:root {
  --paper: #fff; --ink: #262321; --muted: #6f6a66; --hairline: #dddad7;
  --subtle: #f5f5f4; --green: #3e463d; --line-green: #06c755;
  --serif-ja: "Shippori Mincho", serif; --sans: "Noto Sans JP", sans-serif;
  --serif-en: "Times New Roman", Times, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.8; letter-spacing: .02em; }
h1,h2,h3,p,figure,ol { margin: 0; }
h1,h2,h3 { font-weight: 500; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ol { padding: 0; list-style: none; }
address { font-style: normal; }
img { display: block; }
[hidden] { display: none !important; }
a[href],summary { cursor: pointer; }
a[aria-disabled="true"] { cursor: default; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.skip-link { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 8px 16px; background: white; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.desktop-backdrop,.desktop-sidebar { display: none; }
.hero { height: 100vh; height: 100svh; min-height: 540px; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 24px 0 40px; }
/* FVは本文の上に重ね、スクロール中も写真・コピーの位置を動かさない。 */
.fv-transition-enabled .hero {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 0;
  z-index: 40;
  opacity: 1;
  transition: opacity .5s ease-out;
  pointer-events: none;
}
.fv-transition-enabled .scroll-cue { pointer-events: auto; }
/* Conceptの登場位置はFVコピーの下辺を基準に、JSで画面高に合わせる。 */
.fv-transition-enabled { --fv-fade-distance: 80px; }
.fv-transition-enabled .main-content {
  padding-top: var(--fv-content-entry, var(--fv-fade-distance));
  background: transparent;
}
/* Conceptの透明部分の背後に白を敷かず、後続セクションは白背景を保つ。 */
.fv-transition-enabled .main-content > .section:not(.concept):not(.faq) { background: var(--paper); }
@media (max-width: 576px) {
  .fv-transition-enabled { --fv-fade-distance: 300px; }
}
.hero-photo { position: absolute; width: 414.03%; height: 134.65%; max-width: none; left: -154.19%; top: -14.25%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: rgba(0,0,0,.03); }
.hero-copy-wrap { width: 100%; height: 275px; padding: 8px; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(0,0,0,.56) 31.25%,rgba(0,0,0,.56) 65.865%,rgba(255,255,255,0) 93.269%); }
.hero-copy { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 12px; color: white; text-align: center; font: 500 36px/52.2px var(--serif-ja); }
.hero-copy>span:first-child { letter-spacing: .1em; }
.hero-copy>span:last-child { letter-spacing: .06em; }
.fv-copy__line { display: block; text-align: center; }
.fv-animation-enabled:not(.fv-animation-ready) .js-fv-char-animation { opacity: 0; }
.fv-copy-char {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  animation: blurUp 1s ease forwards;
  animation-play-state: paused;
}
.fv-animation-ready .fv-copy-char { animation-play-state: running; }
@keyframes blurUp {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.fv-animation-enabled .scroll-cue { opacity: 0; }
.fv-animation-ready .scroll-cue {
  animation: fvScrollFade 0.6s ease var(--fv-scroll-delay, 2.4s) forwards;
}
@keyframes fvScrollFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fv-transition-enabled .hero { transition: none; }
  .fv-animation-enabled:not(.fv-animation-ready) .js-fv-char-animation,
  .fv-animation-enabled .js-fv-char-animation { opacity: 1; }
  .fv-copy-char { opacity: 1; filter: blur(0); transform: none; animation: none; }
  .fv-animation-enabled .scroll-cue { opacity: 1; animation: none; }
}
.pc-only,.pc-break,.scroll-cue { display: none; }
.main-content { width: 100%; max-width: 480px; margin: 0 auto; position: relative; background: white; }
.section { padding: 88px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; scroll-margin-top: 60px; }
.section-label { display: flex; gap: 12px; align-items: center; padding: 0 12px; color: var(--muted); font: 24px/20px var(--serif-en); letter-spacing: .06em; }
.section-title { width: 270px; max-width: 100%; align-self: center; font: 500 30px/43.5px var(--serif-ja); letter-spacing: 0; text-align: left; }
.concept {
  --concept-blend-lead: 128px;
  position: relative;
  isolation: isolate;
  gap: 56px;
  padding-bottom: 32px;
}
.concept::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--concept-blend-lead)) 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.20) 9%,
    rgba(255,255,255,.55) 17%,
    rgba(255,255,255,.90) 26%,
    rgba(255,255,255,.96) 45%,
    rgba(255,255,255,.99) 75%,
    #fff 100%);
}
.item-heading,h3 { font: 500 22px/33px var(--serif-ja); letter-spacing: .02em; }
.feature-list { width: 100%; display: flex; flex-direction: column; gap: 32px; text-align: center; }
.feature-number { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; }
.feature-number::before,.feature-number::after { content: ""; width: 96px; height: 1px; background: var(--hairline); }
.feature-number span { flex: 0 0 40px; color: var(--muted); font: 24px/33px var(--serif-en); letter-spacing: .08em; }
.feature-list h3 { margin-bottom: 16px; }
.section-photo { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.section-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fee { padding-block: 32px; }
.fee .item-heading { width: 100%; text-align: center; }
.fee-detail { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.fee-amount { display: flex; gap: 8px; align-items: flex-end; justify-content: center; white-space: nowrap; }
.fee-amount>span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.fee-amount>span:first-child { font: 48px/57.6px var(--serif-en); letter-spacing: 0; }
.fee-notes { width: 258px; max-width: 100%; align-self: center; color: var(--muted); font-size: 14px; line-height: 25.2px; letter-spacing: .03em; }
.simple-title { width: 279px; max-width: 100%; text-align: center; font: 500 28px/43.5px var(--serif-ja); letter-spacing: 0; }
.flow-list { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.flow-list li { display: flex; align-items: flex-start; gap: 12px; }
.step-number { flex-shrink: 0; color: var(--muted); font: 22px/33px var(--serif-en); letter-spacing: .08em; }
.step-line { width: 1px; height: 101px; flex-shrink: 0; background: var(--hairline); }
.step-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
.access-content { width: 100%; display: flex; flex-direction: column; gap: 32px; }
.access-details { display: flex; flex-direction: column; gap: 16px; }
.text-link { width: fit-content; font-size: 14px; line-height: 25.2px; letter-spacing: .03em; text-decoration: underline; text-underline-position: from-font; }
.faq { background: var(--subtle); padding-top: 56px; padding-bottom: 68px; }
.faq-list { width: 100%; }
.faq-list details { border-bottom: 1px solid var(--hairline); padding: 24px 0; }
.faq-list summary { display: flex; align-items: center; gap: 16px; list-style: none; font-size: 16px; font-weight: 500; line-height: 28.8px; letter-spacing: 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary>span:first-child { flex: 1; }
.faq-toggle { width: 28px; flex-shrink: 0; text-align: center; font: 400 18px/28px var(--sans); letter-spacing: .02em; }
.faq-toggle::before { content: "+"; }
details[open] .faq-toggle::before { content: "−"; }
.faq-answer { padding-top: 16px; }
.last-cta { padding-block: 96px; gap: 32px; align-items: center; }
.last-cta>p { text-align: center; width: 100%; }
.cta-actions { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.cta-button { display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; border-radius: 4px; padding: 0 16px; font-weight: 500; }
.cta-line { background: var(--line-green); color: white; }
.cta-phone { background: white; color: var(--green); border: 1px solid var(--green); }
.cta-line>span:last-child { width: 118px; text-align: center; white-space: nowrap; }
.cta-phone>span:last-child { width: 114px; text-align: center; white-space: nowrap; }
.icon-slot { width: 24px; height: 24px; position: relative; overflow: hidden; flex-shrink: 0; }
.line-icon { position: absolute; left: 0; top: 2.71%; transform: scaleY(-1); }
.phone-icon { position: absolute; left: 11.66%; top: 0; }
.footer { display: flex; flex-direction: column; gap: 16px; padding: 88px 24px 48px; background: #505050; color: white; font-size: 14px; line-height: 25.2px; letter-spacing: .03em; }
.footer-brand { font: 500 22px/33px var(--serif-ja); letter-spacing: .02em; }
.mobile-header { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 60px; background: white; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.mobile-brand { font: 500 18px/27px var(--serif-ja); letter-spacing: 0; }
.menu-toggle { width: 44px; height: 44px; padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.menu-toggle span { height: 1px; width: 24px; background: var(--green); }
.mobile-menu { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; margin: 0; padding: 100px 48px 48px; color: var(--ink); background: white; }
.mobile-menu::backdrop { background: white; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 24px; font: 24px/44px var(--serif-en); letter-spacing: .06em; }
.menu-close { position: absolute; top: 8px; right: 24px; width: 44px; height: 44px; font-size: 28px; }
@media (min-width: 1024px) {
  .desktop-backdrop { display: block; position: fixed; inset: 0; background: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url("assets/9a65a.png") center/cover no-repeat; }
  .desktop-sidebar { display: block; position: fixed; z-index: 20; left: 88px; top: 72px; color: white; }
  .desktop-brand { font: 500 22px/33px var(--serif-ja); letter-spacing: 0; white-space: nowrap; }
  .desktop-nav { display: flex; flex-direction: column; gap: 24px; margin-top: 71px; }
  .desktop-nav a { display: flex; align-items: center; gap: 12px; height: 44px; width: 200px; font: 18px/27px var(--serif-en); letter-spacing: .07em; }
  .desktop-nav a::before { content: ""; width: 20px; height: 1px; background: white; visibility: hidden; }
  .desktop-nav a[aria-current="location"]::before { visibility: visible; }
  .desktop-sidebar :focus-visible { outline-color: white; }
  .mobile-header { display: none; }
  .hero { width: 100%; min-height: 0; z-index: 10; }
  .hero-photo { inset: 0; width: 100%; height: 100%; object-position: center; }
  .hero-shade { background: rgba(0,0,0,.16); }
  .hero-copy-wrap { background: none; height: auto; width: calc(100% - 80px); padding: 0; }
  .hero-copy-wrap::before {
    content: "";
    position: absolute;
    inset: -100px -40px;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.56) 0%, rgba(0,0,0,.48) 42%, rgba(0,0,0,0) 76%);
  }
  .hero-copy { font-size: 56px; line-height: 81.2px; gap: 0; }
  .hero-copy>span:first-child,.hero-copy>span:last-child { letter-spacing: 0; }
  .pc-only { display: inline; }
  .pc-break { display: initial; }
  .scroll-cue { display: flex; position: absolute; bottom: 32.8px; left: calc(50% - 70px); width: 140px; flex-direction: column; align-items: center; gap: 16px; color: white; font-size: 14px; line-height: 25.2px; letter-spacing: .03em; }
  .scroll-line { width: 1px; height: 48px; background: white; }
  .main-content { width: 480px; max-width: none; margin-left: calc(50% - 60px); margin-right: 0; }
  .section { padding: 104px 40px; scroll-margin-top: 0; }
  .concept { padding-bottom: 48px; --concept-blend-lead: 160px; }
  .section-title { width: 360px; font-size: 32px; line-height: 46.4px; }
  .simple-title { width: fit-content; text-align: left; font-size: 32px; line-height: 46.4px; }
  .fee { padding-block: 48px; }
  .faq { padding-block: 88px; }
  .last-cta .section-title { font-size: 30px; line-height: 43.5px; }
  .footer { padding: 96px 40px 48px; }
}

/* Figmaの文字ボックスの丸めによる差を吸収。内容が増えた場合は自然に伸びる。 */
@media (min-width: 375px) and (max-width: 1023px) {
  .features { min-height: 1086px; }
  .fee { min-height: 305px; }
  .flow { min-height: 999px; }
  .access { min-height: 839px; }
  .faq { min-height: 794px; }
  .last-cta { min-height: 569px; }
  .footer { min-height: 320px; }
}
@media (min-width: 1024px) {
  .features { min-height: 1124px; }
  .fee { min-height: 337px; }
  .flow { min-height: 1034px; }
  .access { min-height: 874px; }
  .faq { min-height: 820px; }
  .last-cta { min-height: 585px; }
  .footer { min-height: 328px; }
}