@charset "UTF-8";
/* ---------- reset (minimum) ---------- */
html, body, div, h1, h2, dl, dt, dd, img, p {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
* {
  box-sizing: border-box;
}
/* ---------- base ---------- */
html, body {
  background-color: #0e0000;
  color: #fff;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  position: relative;
  z-index: 1;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px), radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 35%, transparent 70%), linear-gradient(35deg, #000000 0%, #0a0a0f 25%, rgba(255, 255, 255, 0.12) 50%, #0a0a0f 75%, #000000 100%);
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
  background-color: #000000;
  z-index: -1;
}
.img {
  display: block;
  width: 100%;
  height: auto;
}
a:link, a:visited, a:active {
  color: #fff;
  text-decoration: underline;
  word-break: break-all;
}
main {
  max-width: 640px;
  width: calc(640px / 768 * 100%);
  margin: 0 auto;
  background-color: #0e0000;
}
.inner {
  position: relative;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}
/* ---------- main visual ---------- */
#mv {}
#mv .inner {
  padding: 0;
}
#mv img {
  display: block;
  width: 100%;
  height: auto;
}
/* ---------- faq ---------- */
#faq {
  padding: 50px 0 75px;
}
.ttl {
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
.qa-list {
  max-width: 862px;
  margin: 50px auto 0;
  position: relative;
}
.qa-list dl {
  position: relative;
  margin: 0 auto;
  padding: 1.75em 4em 1.75em 1.75em;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}
.qa-list dl:first-child {
  border-top: 1px solid #fff;
}
.qa-list dl::after, .qa-list dl::before {
  position: absolute;
  top: 1.85em;
  right: 30px;
  display: block;
  content: '';
  width: 5px;
  height: 20px;
  background-color: #fff;
}
.qa-list dl::after {
  transform: rotate(90deg);
}
.qa-list dl.open::before {
  background-color: transparent;
}
.qa-list dl dt {
  position: relative;
  margin: 0;
  padding: 0 50px 0 50px;
  font-weight: bold;
  font-size: 18px;
}
.qa-list dl dt::before {
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 28px;
  height: 30px;
  background-image: url("../img/parts/q.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.qa-list dl dd {
  position: relative;
  display: none;
  height: auto;
  margin: 20px 0 0;
  padding: 0 0 0 50px;
  cursor: auto;
  font-size: 18px;
}
.qa-list dl.open dd {
  display: block !important;
}
.qa-list dl dd::before {
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 2px;
  display: block;
  content: '';
  font-weight: bold;
  width: 28px;
  height: 30px;
  background-image: url("../img/parts/a.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.qa-list dl dd p {
  margin: 0.5em 0 0;
}
.qa-list dl dd p:first-child {
  margin-top: 0;
}

/* ---------- faq: step-by-step guide ---------- */
.qa-list dl dd.guide p {
  margin: 0.8em 0 0;
  line-height: 1.7;
}
.guide .step {
  margin-top: 2.2em;
  font-weight: bold;
}
.guide .step-body {
  margin-top: 0.7em;
  padding-left: 1.4em;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.guide .step-body > p:first-child {
  margin-top: 0;
}
.guide .field {
  margin-top: 1.6em;
  font-weight: bold;
}
.guide .copy-box {
  margin-top: 1em;
  padding: 0.9em 1.2em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
}
.guide .copy-text {
  display: inline-block;
  margin-bottom: 0.2em;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 0.1em;
  -webkit-user-select: all;
  user-select: all;
}
.guide .copy-btn {
  display: inline-block;
  margin-top: 0.7em;
  min-height: 44px;
  min-width: 9em;
  padding: 1em 1.6em;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 2px;
  background-color: transparent;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s, color 0.15s;
}
.guide .copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.guide .copy-btn.copied {
  background-color: #fff;
  color: #0e0000;
}
.guide .copy-btn__done {
  display: none;
}
.guide .copy-btn.copied .copy-btn__idle {
  display: none;
}
.guide .copy-btn.copied .copy-btn__done {
  display: inline;
}
.guide .copy-hint {
  display: inline-block;
  margin-top: 0.6em;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.75);
}
.guide .copy-hint[hidden] {
  display: none;
}
.guide .cta {
  margin-top: 2.2em;
  padding: 1em 1.2em;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.guide .cta-label {
  display: inline-block;
  margin-bottom: 0.4em;
  font-weight: bold;
  word-break: normal;
  overflow-wrap: break-word;
}

footer {
  background-color: #000;
  border-top: 1px solid #FFF;
  text-align: center;
  padding: 1.5em 0;
  line-height: 1;
  font-size: 12px;
  color: #FFF;
}
footer p {
  font-size: 12px;
}
/* ---------- sp (max-width: 767px) ---------- */
@media (max-width: 767px) {
  .inner {
    max-width: 100%;
    padding: 0 26px;
  }
  #faq {
    padding: calc(40 / 390 * 100vw) 0;
  }
  .ttl {
    font-size: 8vw;
  }
  .qa-list {
    margin-top: 12vw;
  }
  .qa-list dl {
    padding: 1.75em 2.5em 1.75em 0.35em;
  }
  .qa-list dl::after, .qa-list dl::before {
    right: 14px;
  }
  .qa-list dl dt {
    padding: 0 0 0 3em;
    font-size: 3.733333333vw;
  }
  .qa-list dl dt::before {
    font-size: 3.733333333vw;
  }
  .qa-list dl dd {
    padding: 0 0 0 3em;
    font-size: 3.733333333vw;
  }
  .qa-list dl dd::before {
    font-size: 3.733333333vw;
    top: 2px;
    left: 0;
  }
  .guide .step-body {
    padding-left: 0.9em;
  }
  .guide .copy-box {
    padding: 0.8em 0.9em;
  }
  .guide .cta {
    padding: 0.9em;
  }
}