/* ============================================================
   vox — voice training studio
   紙白 × 墨 × 真鍮/琥珀  ／ 明朝エディトリアル ／ 署名「声の線」
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* color */
  --paper:      #F4F1E9;
  --paper-2:    #FAF8F3;
  --paper-3:    #EEEAE0;
  --ink:        #191B1E;
  --ink-2:      #14161A;
  --cream:      #ECE7DC;
  --text:       #34373C;
  --mute:       #767169;
  --dim:        #9A948A;
  --line:       rgba(24,22,18,.12);
  --line-2:     rgba(24,22,18,.20);
  --line-dk:    rgba(236,231,220,.16);
  --accent:     #B0812E;   /* 真鍮/琥珀 */
  --accent-deep:#8B6320;
  --accent-glow:#D9A24A;
  --accent-soft:rgba(176,129,46,.12);

  /* type */
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --sans:   "Noto Sans JP", system-ui, sans-serif;
  --serif-en: "Cormorant Garamond", serif;
  --mono:   "IBM Plex Mono", ui-monospace, monospace;

  /* metrics */
  --pad: clamp(20px, 5vw, 84px);
  --sec-y: clamp(84px, 12vw, 172px);
  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text);
  background: var(--paper);
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  /* 禁則: 読点はJSで行末保持、どこでも折る */
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
::selection{ background: var(--accent); color:#fff }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out) }
[data-reveal].in{ opacity:1; transform:none }
[data-delay="1"]{ transition-delay:.09s } [data-delay="2"]{ transition-delay:.18s }
[data-delay="3"]{ transition-delay:.27s } [data-delay="4"]{ transition-delay:.36s }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none }
}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:1000;
  background: var(--paper);
  display:grid; place-items:center;
  transition: opacity .7s var(--ease), visibility .7s;
}
#loader.done{ opacity:0; visibility:hidden }
.loader-inner{ text-align:center; transform: translateY(-4px) }
.loader-wave{ width: min(46vw, 220px); height:auto; overflow:visible; margin-bottom:6px }
.loader-word{ font-family: var(--serif-en); font-size: clamp(44px,10vw,72px); letter-spacing:.02em; color: var(--ink); line-height:1 }
.loader-tag{ font-family: var(--mono); font-size:10px; letter-spacing:.4em; color: var(--mute); margin-top:12px; padding-left:.4em }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:transparent }
.scroll-progress span{ display:block; height:100%; width:0; background: var(--accent); transition: width .1s linear }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header-in{
  max-width: 1600px; margin:0 auto;
  padding: clamp(16px,2.4vw,26px) var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.site-header.is-scrolled{
  background: rgba(244,241,233,.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.site-header.is-scrolled .header-in{ padding-top:12px; padding-bottom:12px }
.brand{ display:flex; align-items:baseline; gap:10px; line-height:1 }
.brand-word{ font-family: var(--serif-en); font-size:30px; font-weight:600; color: var(--ink); letter-spacing:.01em }
.brand-sub{ font-family: var(--mono); font-size:9px; letter-spacing:.28em; color: var(--mute) }

.nav-desktop{ display:flex; gap: clamp(14px,1.8vw,30px) }
.nav-desktop a{
  font-family: var(--mono); font-size:11px; letter-spacing:.14em; color: var(--text);
  display:flex; align-items:baseline; gap:5px; position:relative; padding:6px 0;
  transition: color .3s;
}
.nav-desktop a .n-num{ font-size:9px; color: var(--dim); transition: color .3s }
.nav-desktop a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--accent); transition: width .35s var(--ease) }
.nav-desktop a:hover{ color: var(--accent) }
.nav-desktop a:hover .n-num{ color: var(--accent) }
.nav-desktop a:hover::after{ width:100% }

.header-cta{ display:flex; align-items:center; gap:16px }
.jst{ font-family: var(--mono); font-size:11px; letter-spacing:.12em; color: var(--mute); font-variant-numeric: tabular-nums }

/* pills */
.pill{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family: var(--sans); font-size:13px; font-weight:500; letter-spacing:.04em;
  padding: 12px 22px; border-radius:999px; white-space:nowrap;
  transition: transform .35s var(--ease), background .35s, color .35s, border-color .35s, box-shadow .35s;
}
.pill-note{ font-family: var(--mono); font-size:10px; letter-spacing:.06em; opacity:.8; padding-left:8px; margin-left:2px; border-left:1px solid currentColor }
.pill-solid{ background: var(--ink); color: var(--paper) }
.pill-solid:hover{ background: var(--accent); color:#fff; transform: translateY(-2px); box-shadow:0 10px 24px -12px rgba(176,129,46,.7) }
.pill-ghost{ color: var(--ink); border:1px solid var(--line-2) }
.pill-ghost:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-2px) }
.pill-outline{ color: var(--ink); border:1px solid var(--ink) }
.pill-outline:hover{ background: var(--ink); color: var(--paper); transform: translateY(-2px) }
.pill-lg{ padding:16px 34px; font-size:14px }

.burger{ display:none; width:30px; height:20px; position:relative }
.burger span{ position:absolute; left:0; width:100%; height:1.5px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s }
.burger span:nth-child(1){ top:3px } .burger span:nth-child(2){ bottom:3px }
.burger.open span:nth-child(1){ top:9px; transform: rotate(45deg) }
.burger.open span:nth-child(2){ bottom:9px; transform: rotate(-45deg) }

/* ============================================================
   DRAWER (mobile)
   ============================================================ */
.drawer{
  position:fixed; top:0; right:0; z-index:200; height:100dvh; width: min(88vw, 420px);
  background: var(--paper-2); border-left:1px solid var(--line);
  transform: translateX(100%); transition: transform .5s var(--ease);
  display:flex; flex-direction:column;
  padding: 26px clamp(24px,6vw,40px) calc(26px + env(safe-area-inset-bottom));
  overflow-y:auto; visibility:hidden;
}
.drawer.open{ transform: none; visibility:visible }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px }
.drawer-word{ font-family: var(--serif-en); font-size:32px; font-weight:600; color: var(--ink) }
.drawer-close{ font-size:34px; line-height:1; color: var(--ink); width:44px; height:44px; display:grid; place-items:center }
.drawer-nav{ display:flex; flex-direction:column; border-top:1px solid var(--line) }
.drawer-nav a{
  display:flex; align-items:baseline; gap:14px; padding:16px 2px;
  border-bottom:1px solid var(--line); font-family: var(--mono); font-size:15px; letter-spacing:.1em; color: var(--ink);
}
.drawer-nav a .n-num{ font-size:11px; color: var(--accent); width:20px }
.drawer-nav a .n-jp{ margin-left:auto; font-family: var(--sans); font-size:12px; color: var(--mute); letter-spacing:.04em }
.drawer-cta{ margin-top:24px; width:100% }
.drawer-foot{ margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:4px; font-size:11px; color: var(--mute); font-family: var(--mono); letter-spacing:.06em }
.drawer-scrim{ position:fixed; inset:0; z-index:150; background: rgba(20,18,15,.35); opacity:0; visibility:hidden; transition: opacity .5s, visibility .5s }
.drawer-scrim.open{ opacity:1; visibility:visible }

/* ============================================================
   WAVE canvas (署名)
   ============================================================ */
.wave{ display:block; width:100%; height:100% }
.wave-hero{ position:absolute; left:0; right:0; top:50%; transform: translateY(-50%); height: 42vh; min-height:280px; z-index:0; pointer-events:none; opacity:.9 }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding: 128px var(--pad) 84px; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(176,129,46,.05), transparent 60%),
    var(--paper);
}
.hero-in{ position:relative; z-index:2; max-width:1000px; margin:0 auto; width:100%; text-align:center }
.eyebrow{
  font-family: var(--mono); font-size:11px; letter-spacing:.34em; color: var(--mute);
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom: clamp(26px,4vw,44px);
}
.eyebrow-mark{ font-family: var(--serif-en); font-size:16px; letter-spacing:.02em; color: var(--accent); font-weight:600 }
.eyebrow-loc{ color: var(--dim) }
.hero-title{
  font-family: var(--mincho); font-weight:600; color: var(--ink);
  font-size: clamp(38px, 8.4vw, 104px); line-height:1.12; letter-spacing:.02em;
  display:flex; flex-direction:column; gap:.06em;
}
.hero-title .l1{ font-size:.62em; font-weight:500; color: var(--text) }
.hero-title .l2 em{ font-style:normal; color: var(--accent); font-size:.7em; vertical-align:.08em; margin:0 .02em; opacity:.85 }
/* 意匠的な「間」＝声のひと呼吸（読点の代わり） */
.pause{ display:inline-block; width:.12em; height:.12em; border-radius:50%; background: var(--accent); vertical-align:.42em; margin:0 .32em; opacity:.9 }
.foot-cta-title .pause{ background: var(--accent-glow) }
.hero-lead{
  max-width: 30em; margin: clamp(28px,4vw,44px) auto 0; color: var(--text);
  font-size: clamp(14px,1.5vw,16px); line-height:2.1;
}
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top: clamp(30px,4vw,48px) }
.hero-foot{
  position:absolute; left:0; right:0; bottom: clamp(20px,3vw,38px); z-index:2;
  display:flex; justify-content:center; gap: clamp(16px,4vw,48px); padding:0 var(--pad);
  font-family: var(--mono); font-size:10px; letter-spacing:.2em; color: var(--dim); text-transform:uppercase;
}
.hero-foot .hf-item{ position:relative }
.hero-foot .hf-item:not(:last-child)::after{ content:"／"; position:absolute; right: calc(-1 * clamp(16px,4vw,48px) / 2); transform: translateX(50%); color: var(--line-2) }

/* ============================================================
   SECTION commons
   ============================================================ */
.section{ padding: var(--sec-y) var(--pad); max-width: var(--maxw); margin:0 auto; position:relative }
.sec-head{ margin-bottom: clamp(40px,6vw,72px) }
.sec-head.center{ text-align:center }
.sec-label{ font-family: var(--mono); font-size:11px; letter-spacing:.28em; color: var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:22px }
.sec-head.center .sec-label{ justify-content:center }
.sec-label .sl-num{ color: var(--dim) }
.sec-label.light{ color: var(--accent-glow) }
.sec-title{ font-family: var(--mincho); font-weight:600; color: var(--ink); font-size: clamp(28px,4.6vw,54px); line-height:1.28; letter-spacing:.03em }
.sec-intro{ margin-top: clamp(20px,2.5vw,30px); max-width:40em; color: var(--text); font-size: clamp(14px,1.4vw,16px); line-height:2.05 }
.sec-head.center .sec-intro{ margin-left:auto; margin-right:auto }

.pull{
  font-family: var(--mincho); font-weight:500; color: var(--ink);
  font-size: clamp(18px,2.4vw,27px); line-height:1.85; letter-spacing:.03em;
  padding: clamp(20px,3vw,30px) 0 clamp(20px,3vw,30px) clamp(20px,3vw,32px);
  border-left:2px solid var(--accent); margin: clamp(20px,3vw,34px) 0;
}

/* ---------- PHILOSOPHY ---------- */
.philosophy .sec-title br{ display:block }
.philo-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px,5vw,72px); align-items:start }
.philo-text p{ margin-bottom:1.5em; max-width:38em }
.philo-fig{ position:sticky; top:110px }
.philo-fig img{ border-radius:3px; width:100% }
.philo-fig figcaption,
.lesson-fig figcaption,
.message-fig figcaption{ font-family: var(--mono); font-size:10px; letter-spacing:.14em; color: var(--mute); margin-top:12px }
.philo-b{ margin-top: clamp(56px,8vw,110px); border-top:1px solid var(--line); padding-top: clamp(40px,5vw,68px) }
.philo-b-title{ font-family: var(--mincho); font-weight:600; font-size: clamp(22px,3vw,34px); color: var(--ink); letter-spacing:.03em; margin-bottom: clamp(24px,3vw,36px) }
.philo-b-cols{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,4vw,56px) }
.philo-b-cols p{ font-size: clamp(14px,1.4vw,15.5px) }

/* ---------- INTERLUDE (dark) ---------- */
.interlude{
  position:relative; background: var(--ink-2); color: var(--cream); overflow:hidden;
  padding: clamp(96px,15vw,200px) var(--pad); text-align:center;
}
.wave-dark{ position:absolute; left:0; right:0; top:50%; transform: translateY(-50%); height:60%; min-height:200px; z-index:0; pointer-events:none; opacity:.85 }
.interlude-q{ position:relative; z-index:2; font-family: var(--mincho); font-weight:500; font-size: clamp(24px,4.4vw,52px); line-height:1.55; letter-spacing:.04em; color: var(--paper) }
.interlude-q em{ font-style:normal; color: var(--accent-glow) }
.interlude-sub{ position:relative; z-index:2; max-width:34em; margin: clamp(28px,4vw,42px) auto 0; color: rgba(236,231,220,.72); font-size: clamp(13px,1.3vw,15px); line-height:2.05 }

/* ---------- TROUBLE ---------- */
.trouble-list{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background: var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden }
.trouble-list li{ background: var(--paper); padding: clamp(26px,3.4vw,44px) clamp(22px,2.6vw,34px); transition: background .4s }
.trouble-list li:hover{ background: var(--paper-2) }
.trouble-list .t-idx{ font-family: var(--mono); font-size:11px; letter-spacing:.16em; color: var(--accent) }
.trouble-list h4{ font-family: var(--mincho); font-weight:600; font-size: clamp(17px,2vw,22px); color: var(--ink); margin: 14px 0 12px; letter-spacing:.03em }
.trouble-list p{ font-size:13.5px; color: var(--mute); line-height:1.9 }
.trouble-foot{ margin-top: clamp(34px,4vw,52px); font-family: var(--mincho); font-size: clamp(16px,2vw,21px); color: var(--ink); letter-spacing:.03em; line-height:1.85 }

/* ---------- WHY ---------- */
.why{ }
.why-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap: clamp(36px,6vw,88px); align-items:start }
.why-l{ position:sticky; top:120px }
.why-r p{ margin-bottom:1.6em; max-width:40em }

/* ---------- METHOD ---------- */
.method-top{ display:grid; grid-template-columns:1.1fr .9fr; gap: clamp(36px,5vw,72px); align-items:end; margin-bottom: clamp(48px,6vw,84px) }
.method-fig img{ border-radius:3px; width:100% }
.method-steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background: var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.mstep{ background: var(--paper); padding: clamp(26px,2.6vw,34px) clamp(20px,2vw,28px) clamp(30px,3.4vw,44px) }
.mstep-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px }
.mstep-head .ms-num{ font-family: var(--serif-en); font-size:34px; font-weight:600; color: var(--accent); line-height:1 }
.mstep-head .ms-role{ font-family: var(--mono); font-size:10px; letter-spacing:.22em; color: var(--mute) }
.wave-step{ height:44px; margin:6px 0 18px; opacity:.9 }
.mstep h4{ font-family: var(--mincho); font-weight:600; font-size: clamp(16px,1.7vw,20px); color: var(--ink); margin-bottom:14px; letter-spacing:.02em }
.mstep p{ font-size:13px; color: var(--mute); line-height:1.95 }

/* ---------- SCENE ---------- */
.scene{ max-width: var(--maxw); display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,80px); align-items:center }
.scene-fig{ position:relative; border-radius:3px; overflow:hidden }
.scene-fig img{ width:100%; height:100%; object-fit:cover }
.scene-fig .scene-sp{ display:none }
.scene-list{ list-style:none; margin:0; border-top:1px solid var(--line) }
.scene-list li{
  padding:18px 0; border-bottom:1px solid var(--line); font-family: var(--mincho); font-size: clamp(16px,1.9vw,21px); color: var(--ink);
  letter-spacing:.03em; display:flex; align-items:baseline; gap:12px; position:relative; padding-left:26px;
}
.scene-list li::before{ content:""; position:absolute; left:0; top:50%; width:8px; height:8px; border-radius:50%; border:1px solid var(--accent); transform: translateY(-50%) }
.scene-list li .s-note{ font-family: var(--sans); font-size:12px; color: var(--mute); letter-spacing:0 }
.scene-foot{ margin-top: clamp(24px,3vw,34px); color: var(--text); font-size: clamp(13px,1.3vw,15px); line-height:2 }

/* ---------- LESSON ---------- */
.lesson-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,80px); align-items:center }
.lesson-list{ list-style:none; margin-top: clamp(8px,1vw,12px) }
.lesson-list li{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size: clamp(14px,1.5vw,16px); color: var(--ink); line-height:1.8 }
.lesson-list .dot{ flex:none; width:7px; height:7px; margin-top:.7em; border-radius:50%; background: var(--accent) }
.lesson-foot{ margin-top: clamp(22px,3vw,32px); font-family: var(--mincho); font-size: clamp(15px,1.8vw,19px); color: var(--ink); line-height:1.9; letter-spacing:.02em }
.lesson-fig img{ border-radius:3px; width:100% }

/* ---------- BUSINESS ---------- */
.business{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px,5vw,80px); align-items:center }
.business-fig img{ border-radius:3px; width:100%; height:100%; object-fit:cover }
.business-list{ list-style:none; margin:0; border-top:1px solid var(--line) }
.business-list li{ padding:16px 0; border-bottom:1px solid var(--line); font-size: clamp(14px,1.5vw,16px); color: var(--ink); position:relative; padding-left:28px }
.business-list li::before{ content:"→"; position:absolute; left:0; color: var(--accent); font-family: var(--mono) }
.business-foot{ margin-top: clamp(22px,3vw,32px); color: var(--text); font-size: clamp(13px,1.3vw,15px); line-height:2 }

/* ---------- PRICE ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.price-card{
  background: var(--paper-2); border:1px solid var(--line); border-radius:4px;
  padding: clamp(24px,2.4vw,32px) clamp(20px,2vw,28px); display:flex; flex-direction:column;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.price-card:hover{ transform: translateY(-4px); box-shadow:0 20px 40px -28px rgba(24,20,12,.4); border-color: var(--line-2) }
.pc-tag{ font-family: var(--mono); font-size:10px; letter-spacing:.16em; color: var(--accent); margin-bottom:16px }
.pc-name{ font-family: var(--mincho); font-weight:600; font-size: clamp(17px,1.9vw,21px); color: var(--ink); letter-spacing:.02em; margin-bottom:12px }
.pc-desc{ font-size:12.5px; color: var(--mute); line-height:1.85; margin-bottom:auto; padding-bottom:24px }
.pc-fee{ padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:baseline; gap:6px; color: var(--ink) }
.pc-num{ font-family: var(--serif-en); font-size:38px; font-weight:600; line-height:1; letter-spacing:.01em }
.pc-num-sm{ font-family: var(--mincho); font-size:22px; font-weight:600 }
.pc-unit{ font-size:12px; color: var(--mute) }
.pc-fee-sub{ margin-top:12px; font-size:12px; color: var(--mute) }
.pc-fee-sub b{ color: var(--ink); font-weight:600 }
.price-note{ margin-top:24px; font-family: var(--mono); font-size:11px; letter-spacing:.08em; color: var(--mute); text-align:center }

/* ---------- MESSAGE ---------- */
.message-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px,5vw,80px); align-items:start }
.message-fig{ position:sticky; top:110px }
.message-fig img{ border-radius:3px; width:100% }
.message-fig figcaption{ display:flex; flex-direction:column; gap:3px; margin-top:16px }
.mf-role{ font-family: var(--mono); font-size:10px; letter-spacing:.14em; color: var(--mute) }
.mf-name{ font-family: var(--mincho); font-size:20px; color: var(--ink); letter-spacing:.06em }
.message-lead{ font-family: var(--mincho); font-weight:600; font-size: clamp(26px,3.6vw,44px); line-height:1.4; color: var(--ink); letter-spacing:.04em; margin:22px 0 clamp(28px,4vw,44px) }
.message-text p{ margin-bottom:1.7em; max-width:40em; font-size: clamp(14px,1.45vw,16px) }

/* ---------- TRIAL (CV, dark) ---------- */
.trial{ position:relative; background: var(--ink-2); color: var(--cream); max-width:none; overflow:hidden; padding: clamp(84px,11vw,150px) var(--pad) }
.trial-in{ position:relative; z-index:2; max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px,6vw,88px); align-items:start }
.trial-head .sec-title{ color: var(--paper) }
.trial-title{ font-family: var(--mincho); font-weight:600; font-size: clamp(28px,4.2vw,52px); line-height:1.3; color: var(--paper); letter-spacing:.04em; margin-bottom: clamp(22px,3vw,30px) }
.trial-sub{ color: rgba(236,231,220,.74); font-size: clamp(13px,1.3vw,15px); line-height:2.05; max-width:34em }
.trial-form{ display:flex; flex-direction:column; gap:18px }
.tf-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.tf-field{ display:flex; flex-direction:column; gap:8px }
.tf-label{ font-family: var(--mono); font-size:10px; letter-spacing:.12em; color: rgba(236,231,220,.66); display:flex; align-items:center; gap:8px }
.tf-label i{ font-style:normal; font-size:9px; color: var(--ink-2); background: var(--accent-glow); padding:1px 7px; border-radius:999px; letter-spacing:.06em }
.tf-field input, .tf-field select, .tf-field textarea{
  font-family: var(--sans); font-size:14px; color: var(--paper); background: rgba(236,231,220,.05);
  border:1px solid var(--line-dk); border-radius:4px; padding:13px 15px; width:100%;
  transition: border-color .3s, background .3s;
}
.tf-field textarea{ resize:vertical; line-height:1.8 }
.tf-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23D9A24A' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right:36px }
.tf-field input::placeholder, .tf-field textarea::placeholder{ color: rgba(236,231,220,.34) }
.tf-field input:focus, .tf-field select:focus, .tf-field textarea:focus{ outline:none; border-color: var(--accent-glow); background: rgba(236,231,220,.08) }
.tf-submit{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px }
.tf-note{ font-size:11px; color: rgba(236,231,220,.5); line-height:1.6 }
.tf-done{ margin-top:6px; padding:16px 18px; border:1px solid var(--accent-glow); border-radius:4px; color: var(--accent-glow); font-size:13.5px; background: rgba(217,162,74,.06) }
.trial .pill-solid{ background: var(--accent); color:#fff }
.trial .pill-solid:hover{ background: var(--accent-glow) }

/* ---------- ACCESS ---------- */
.access-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap: clamp(36px,5vw,80px); align-items:center }
.access-fig img{ border-radius:3px; width:100%; height:100%; object-fit:cover }
.access-dl{ margin: clamp(6px,1vw,10px) 0 clamp(30px,4vw,40px); border-top:1px solid var(--line) }
.access-dl > div{ display:grid; grid-template-columns: 120px 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line) }
.access-dl dt{ font-family: var(--mono); font-size:11px; letter-spacing:.1em; color: var(--mute); padding-top:3px }
.access-dl dd{ font-size:14px; color: var(--ink); line-height:1.7 }

/* ---------- COMPANY ---------- */
.company-dl{ max-width:860px; margin:0 auto; border-top:1px solid var(--line) }
.company-dl > div{ display:grid; grid-template-columns: 200px 1fr; gap:20px; padding:16px clamp(8px,2vw,20px); border-bottom:1px solid var(--line) }
.company-dl dt{ font-family: var(--mono); font-size:11px; letter-spacing:.1em; color: var(--mute) }
.company-dl dd{ font-size:14px; color: var(--ink); line-height:1.8 }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background: var(--ink-2); color: var(--cream) }
.foot-cta{ position:relative; overflow:hidden; text-align:center; padding: clamp(84px,13vw,170px) var(--pad); border-bottom:1px solid var(--line-dk) }
.foot-cta-title{ position:relative; z-index:2; font-family: var(--mincho); font-weight:600; font-size: clamp(30px,6vw,72px); line-height:1.24; color: var(--paper); letter-spacing:.04em; margin-bottom: clamp(30px,4vw,46px) }
.foot-cta-title em{ font-style:normal; color: var(--accent-glow); font-size:.72em; vertical-align:.08em; opacity:.9 }
.foot-cta .pill-solid{ position:relative; z-index:2; background: var(--accent); color:#fff }
.foot-cta .pill-solid:hover{ background: var(--accent-glow) }
.foot-main{ max-width: var(--maxw); margin:0 auto; padding: clamp(56px,7vw,88px) var(--pad); display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(32px,5vw,64px) }
.foot-word{ font-family: var(--serif-en); font-size:44px; font-weight:600; color: var(--paper); line-height:1 }
.foot-tag{ margin-top:16px; font-size:12px; color: rgba(236,231,220,.6); line-height:1.9; letter-spacing:.04em }
.foot-nav{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; align-content:start }
.foot-nav a{ font-family: var(--mono); font-size:11px; letter-spacing:.12em; color: rgba(236,231,220,.72); transition: color .3s }
.foot-nav a:hover{ color: var(--accent-glow) }
.foot-contact p{ font-size:12.5px; color: rgba(236,231,220,.66); line-height:2.1 }
.foot-bar{ border-top:1px solid var(--line-dk); padding: 22px var(--pad); display:flex; justify-content:space-between; gap:16px; max-width: var(--maxw); margin:0 auto; width:100% }
.foot-bar span{ font-family: var(--mono); font-size:10px; letter-spacing:.14em; color: var(--dim) }

/* ============================================================
   MOBILE bottom CTA
   ============================================================ */
.mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:1px; background: var(--line-2); padding-bottom: env(safe-area-inset-bottom) }
.mobile-cta a{ flex:1; text-align:center; padding:15px 8px; font-size:13px; font-weight:500; letter-spacing:.04em }
.mc-tel{ background: var(--paper-2); color: var(--ink) }
.mc-book{ background: var(--ink); color: var(--paper) }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav-desktop, .jst{ display:none }
  .burger{ display:block }
  .header-cta .pill-solid{ display:none }
  .philo-grid, .why-grid, .method-top, .scene, .lesson-grid, .business, .message-grid, .access-grid, .trial-in{ grid-template-columns:1fr }
  .philo-fig, .why-l, .message-fig{ position:static }
  .trouble-list, .method-steps{ grid-template-columns:repeat(2,1fr) }
  .price-grid{ grid-template-columns:repeat(2,1fr) }
  .philo-fig, .method-fig{ max-width:520px }
  .scene-fig, .business-fig, .lesson-fig, .access-fig{ max-width:640px }
  .foot-main{ grid-template-columns:1fr 1fr }
  .scene .scene-body{ order:2 }
  .business .business-body{ order:2 }
}
@media (max-width:680px){
  :root{ --sec-y: clamp(64px,15vw,110px) }
  .mobile-cta{ display:flex }
  body{ padding-bottom:0 }
  .hero{ min-height:92svh; padding-top:120px }
  .hero-foot{ display:none }
  .wave-hero{ height:34vh }
  .philo-b-cols{ grid-template-columns:1fr; gap:1.4em }
  .trouble-list, .method-steps, .price-grid, .foot-nav{ grid-template-columns:1fr }
  .tf-row{ grid-template-columns:1fr }
  .foot-main{ grid-template-columns:1fr; gap:40px }
  .foot-bar{ flex-direction:column; gap:6px }
  .company-dl > div, .access-dl > div{ grid-template-columns:1fr; gap:5px; padding:14px 0 }
  .company-dl dt, .access-dl dt{ color: var(--accent) }
  .scene-fig .scene-pc{ display:none } .scene-fig .scene-sp{ display:block }
  .site-footer{ margin-bottom:0 }
  .mstep{ padding-bottom:28px }
}
@media (max-width:420px){
  .hero-title{ font-size: clamp(32px,10vw,44px) }
  .brand-sub{ display:none }
}