/* ============================================================
   宿らしさ継承AI研修 — site.css
   世界観: 和紙(クリーム) × 墨 × 金 × 桜(Heroのみ)
   規律: bg+colorペア定義でWCAG AA / 金は装飾・大型のみ / ダッシュ装飾線なし
   アニメは transform(translate3d)/opacity のみ
   ============================================================ */

:root{
  /* 地・墨・金・桜 */
  --washi:        #f4ecdd;
  --washi-deep:   #ece0cb;
  --washi-panel:  rgba(244,236,221,0.86); /* 画像上のテキスト背景・不透明寄りでAA担保 */
  --sumi:         #17130f;   /* 本文（washi上で約14:1） */
  --sumi-soft:    #4a4038;   /* 副次テキスト（washi上で約6.5:1） */
  --sumi-faint:   #7a6f63;   /* 出典など極小（washi上で約3.4:1・大きめ限定） */
  --gold:         #a9791f;   /* 装飾・大型のみ。washi上で実測3.4:1＝小さい文字には使わない */
  --gold-ink:     #7a5510;   /* 小さい金の文字用。washi上5.9:1／モバイル帯(#ece0cb)上5.1:1でAA可 */
  --gold-bright:  #e9c877;   /* 発光・キャンバスのみ（本文には使わない） */
  --sakura:       #cf8790;
  --line:         rgba(23,19,15,0.14); /* 淡い墨の全幅横罫（装飾短線ではない） */

  --serif: "Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  font-family:var(--serif);
  color:var(--sumi);
  background:var(--washi) url("../../media/washi.webp");
  background-size:520px;
  line-height:1.9;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-weight:600; line-height:1.35; letter-spacing:.03em; }

/* 固定ステージ・キャンバス（幕3/幕4のみ描画・pinしない） */
#stage{
  position:fixed; inset:0; width:100vw; height:100svh;
  z-index:0; pointer-events:none;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
#main{ position:relative; z-index:1; }

/* 各幕の基本 */
.maku{ position:relative; }
.reveal{ opacity:0; transform:translate3d(0,0,0); transition:opacity 1s var(--ease); will-change:opacity; }
.reveal.is-in{ opacity:1; }
.reveal.is-in.done{ will-change:auto; }

/* 改行制御: 句や語のまとまりで折り返す（文字の途中で切らない） */
.nw{ white-space:nowrap; }

/* ---- 幕0 Hero ---- */
.hero{ min-height:100svh; display:flex; align-items:center; overflow:hidden; background:#2a231b; }
/* 静止画は video の poster 属性ではなく、この背景で出す。
   poster を属性で持つとPC用が先に落ちてきてしまい、モバイルでは一度も表示されない
   127KB を毎回取りに行っていた。ここなら preload link と同じURLをメディアクエリで出し分けられる。
   （prefers-reduced-motion の .hero__media は後段で background ショートハンドが上書きするので、
     従来どおり画像なしのままになる。挿入位置をそのブロックより後ろにしないこと） */
.hero__media{ position:absolute; inset:0; z-index:0; background:#2a231b center/cover no-repeat; }
@media (min-width:769px){ .hero__media{ background-image:url(../../media/hero-pc-poster.webp); } }
@media (max-width:768px){ .hero__media{ background-image:url(../../media/hero-sp-poster.webp); } }
.hero__video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(28,22,15,.5) 0%, rgba(28,22,15,.16) 44%, rgba(28,22,15,0) 72%),
    linear-gradient(0deg, rgba(28,22,15,.46) 0%, rgba(28,22,15,.08) 34%, rgba(28,22,15,0) 55%); }
.hero__inner{ position:relative; z-index:1; width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 clamp(22px,5vw,64px); }
.hero__eyebrow{ color:#f0e7d6; font-size:clamp(12px,1.5vw,15px); letter-spacing:.34em; margin-bottom:1.4em; }
.hero__title{ color:#fbf5e9; font-size:clamp(40px,8vw,92px); line-height:1.18; letter-spacing:.05em;
  text-shadow:0 2px 24px rgba(20,14,8,.45); }
.hero__lead{ color:#efe6d5; font-size:clamp(15px,2.1vw,21px); margin-top:1.5em; max-width:30em;
  text-shadow:0 1px 12px rgba(20,14,8,.5); }
.hero__cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:1; }
.hero__cue-line{ display:block; width:1px; height:46px; background:linear-gradient(#f0e7d6,transparent);
  animation:cuepulse 2.6s var(--ease) infinite; }
@keyframes cuepulse{ 0%,100%{ transform:translateY(0); opacity:.35 } 50%{ transform:translateY(8px); opacity:.9 } }

/* ---- 幕1 導入の問い（遊び心: ブラー→フォーカス＋墨のゆらぎ背景） ---- */
.thesis{ position:relative; overflow:hidden; background:var(--washi); padding:clamp(90px,17vh,180px) clamp(22px,5vw,64px); }
.thesis::before{ content:""; position:absolute; z-index:0; width:70vmax; height:70vmax; left:-16vmax; top:-24vmax;
  background:radial-gradient(closest-side, rgba(23,19,15,.055), rgba(23,19,15,0) 70%);
  animation:inkdrift 30s ease-in-out infinite alternate; will-change:transform; pointer-events:none; }
.thesis::after{ content:""; position:absolute; z-index:0; width:56vmax; height:56vmax; right:-14vmax; bottom:-20vmax;
  background:radial-gradient(closest-side, rgba(169,121,31,.05), rgba(169,121,31,0) 70%);
  animation:inkdrift 38s ease-in-out infinite alternate-reverse; will-change:transform; pointer-events:none; }
@keyframes inkdrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(22vmax,16vmax,0) scale(1.28); } }
.thesis__inner{ position:relative; z-index:1; max-width:920px; margin:0 auto; text-align:center; }
.thesis__line{ font-size:clamp(30px,6vw,64px); line-height:1.5; letter-spacing:.06em; color:var(--sumi); }
.thesis__line + .thesis__line{ margin-top:.28em; }
.thesis__line.reveal{ transform:translate3d(0,28px,0); filter:blur(11px);
  transition:opacity 1.1s var(--ease), transform 1.25s var(--ease), filter 1.25s var(--ease); }
.thesis__line.reveal.is-in{ transform:none; filter:blur(0); }
.thesis__inner .thesis__line:nth-of-type(2){ transition-delay:.16s; }
.thesis__inner .thesis__line:nth-of-type(3){ transition-delay:.32s; }
.thesis__note{ margin-top:2.2em; font-size:clamp(15px,2vw,20px); color:var(--sumi-soft); letter-spacing:.05em; }
.thesis__note.reveal{ transition-delay:.52s; }

/* ---- 幕2 なぜ今か（スクロールで3つ切り替わる固定ステージ） ---- */
.why{ background:var(--washi); }
.why__intro{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,14vh,150px) clamp(22px,5vw,64px) clamp(30px,6vh,70px); }
.why__eyebrow{ color:var(--gold); font-size:clamp(12px,1.5vw,15px); letter-spacing:.32em; font-weight:600; margin-bottom:1em; }
.why__head{ font-size:clamp(22px,3.6vw,40px); line-height:1.55; letter-spacing:.04em; max-width:24em; }

.why__track{ position:relative; height:340vh; }              /* スクロール尺（3枚ぶん） */
.why__stage{ position:fixed; inset:0; z-index:2; opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease); pointer-events:none;
  -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.why__stage.is-live{ opacity:1; visibility:visible; }
/* 幕2の写真は3枚とも上部の明暗が大きく振れる。上端だけ和紙に溶かし、
   写真を落ち着かせつつ、その上に重なるブランドマークが沈まないようにする。 */
.why__stage::after{ content:""; position:absolute; inset:0 0 auto 0; z-index:3; pointer-events:none;
  height:clamp(96px,16vh,170px);
  background:linear-gradient(180deg,
    rgba(244,236,221,.88) 0%, rgba(244,236,221,.56) 38%, rgba(244,236,221,.2) 70%, rgba(244,236,221,0) 100%); }

.wstat{ position:absolute; inset:0; opacity:0; }             /* JSがopacityでクロスフェード */
.wstat__bg{ position:absolute; inset:-4%; background-size:cover; background-position:center; background-color:var(--washi-deep);
  animation:kenburns 22s ease-in-out infinite alternate; will-change:transform; }
.wstat:nth-child(2) .wstat__bg{ animation-duration:26s; animation-direction:alternate-reverse; }
.wstat:nth-child(3) .wstat__bg{ animation-duration:24s; }
@keyframes kenburns{ from{ transform:scale(1.02) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(-1.5%,-1%,0); } }
.wstat__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,15,9,.04), rgba(20,15,9,.16) 60%, rgba(20,15,9,.44)); }
.wstat__body{ position:absolute; inset:0; display:flex; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(22px,6vw,90px); }
.wstat__panel{ max-width:min(640px,92%); background:var(--washi-panel);
  padding:clamp(30px,4vw,54px) clamp(28px,4vw,52px); border-radius:2px; }
.wstat__num{ font-size:clamp(50px,11vw,124px); line-height:.98; letter-spacing:.01em; color:var(--sumi); font-weight:600; }
.wstat__unit{ font-size:.4em; margin-left:.16em; color:var(--sumi-soft); letter-spacing:.02em; }
.wstat__label{ margin-top:.8em; font-size:clamp(15px,2vw,20px); color:var(--sumi); line-height:1.8; }
.wstat__because{ margin-top:1em; font-size:clamp(14px,1.75vw,17px); color:var(--sumi-soft); line-height:1.85; }
.wstat__src{ position:absolute; left:0; right:0; bottom:clamp(20px,3vh,34px); text-align:center;
  font-size:12px; color:#f0e7d6; letter-spacing:.03em; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.why__dots{ position:absolute; left:50%; bottom:clamp(50px,8vh,80px); transform:translateX(-50%); display:flex; gap:10px; }
.why__dots span{ width:7px; height:7px; border-radius:50%; background:rgba(23,19,15,.26); transition:background .4s var(--ease), transform .4s var(--ease); }
.why__dots span.on{ background:var(--gold); transform:scale(1.3); }

/* ---- 幕3 暗黙知が灯る（背景=固定キャンバス。セクションは透明） ---- */
.ignite{ background:transparent; min-height:260svh; }
/* テキストだけを軽量stickyで中央固定（重い描画は固定キャンバス側＝分離でiOS震え回避） */
.ignite__text{ position:sticky; top:0; z-index:1; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(22px,5vw,64px); }
.ignite__lead{ font-size:clamp(30px,5.6vw,60px); line-height:1.45; letter-spacing:.05em; color:var(--sumi); }
.ignite__sub{ margin-top:1.6em; font-size:clamp(15px,2vw,20px); color:var(--sumi-soft); max-width:26em; }

/* ---- 幕4 円相（背景=固定キャンバス。セクションは透明） ---- */
.dissect{ background:transparent; min-height:300svh; }
.dissect__grid{ position:sticky; top:0; z-index:1; max-width:var(--maxw); margin:0 auto;
  height:100svh; padding:clamp(40px,7vh,90px) clamp(22px,5vw,72px);
  display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:1fr auto;
  align-items:center; gap:clamp(16px,3vw,56px); }
.dissect__q, .dissect__o{ list-style:none; grid-row:1; display:flex; flex-direction:column; gap:clamp(14px,2.6vh,30px); }
.dissect__q{ grid-column:1; text-align:right; }
.dissect__o{ grid-column:3; text-align:left; }
.dissect__q li, .dissect__o li{ font-size:clamp(13px,1.6vw,19px); color:var(--sumi); letter-spacing:.02em; line-height:1.45; }
.dissect__center{ grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center;
  width:clamp(180px,19vw,250px); height:clamp(180px,19vw,250px); }
.dissect__center-label{ font-size:clamp(14px,1.6vw,20px); line-height:1.55; color:var(--sumi); letter-spacing:.04em; font-weight:600; text-align:center; z-index:1; }
.enso-svg{ display:none; }   /* デスクトップは固定canvasが円相を描く */
.dissect__note{ grid-column:1/4; grid-row:2; margin-top:clamp(18px,3vh,38px); text-align:center;
  font-size:clamp(12px,1.5vw,15px); color:var(--sumi-soft); max-width:46em; justify-self:center; line-height:1.8; }

/* ---- 幕10 大義の締め（墨地に漂う金の墨雲） ---- */
.legacy{ position:relative; overflow:hidden; background:var(--sumi); color:#efe4d0;
  padding:clamp(120px,22vh,240px) clamp(22px,5vw,64px); text-align:center; }
.legacy::before{ content:""; position:absolute; z-index:0; inset:-12%; pointer-events:none;
  background:
    radial-gradient(38% 48% at 24% 28%, rgba(169,121,31,.16), rgba(169,121,31,0) 62%),
    radial-gradient(44% 54% at 80% 72%, rgba(169,121,31,.11), rgba(169,121,31,0) 64%),
    radial-gradient(30% 40% at 62% 18%, rgba(200,150,60,.08), transparent 66%);
  animation:legacydrift 40s ease-in-out infinite alternate; will-change:transform; }
.legacy::after{ content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:radial-gradient(66% 62% at 50% 50%, transparent 28%, rgba(8,6,3,.55) 100%); }
@keyframes legacydrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(4%,-3%,0) scale(1.16); } }
.legacy__inner{ position:relative; z-index:1; max-width:900px; margin:0 auto; }
.legacy__lead{ font-size:clamp(28px,5vw,58px); line-height:1.5; letter-spacing:.06em; color:#fbf3e4; }
.legacy__body{ margin-top:1.8em; font-size:clamp(16px,2.2vw,24px); line-height:1.9; letter-spacing:.05em; color:#e2d3ba; }
.legacy__body--turn{ margin-top:1.4em; color:#fbf3e4; }

/* ---- 幕5 資産に変える ---- */
.asset{ background:var(--washi); padding:clamp(100px,17vh,190px) clamp(22px,5vw,64px); }
.asset__inner{ max-width:900px; margin:0 auto; }
.asset__head{ font-size:clamp(30px,5.4vw,58px); line-height:1.45; letter-spacing:.05em; color:var(--sumi); }
.asset__body{ margin-top:1.8em; font-size:clamp(15px,2vw,20px); line-height:2; color:var(--sumi-soft); }
.asset__body--quiet{ margin-top:1.4em; font-size:clamp(14px,1.8vw,18px); color:var(--sumi); }

/* ---- 幕6 残るもの（成果物ポスターギャラリー） ---- */
.deliver{ background:var(--washi-deep); padding:clamp(90px,15vh,170px) clamp(22px,5vw,64px); }
.deliver__intro{ max-width:var(--maxw); margin:0 auto; }
.deliver__eyebrow{ font-size:clamp(12px,1.4vw,14px); letter-spacing:.22em; color:var(--gold); font-weight:600; margin-bottom:1.1em; }
.deliver__head{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,3.4vw,38px);
  line-height:1.5; letter-spacing:.04em; color:var(--sumi); margin:0 0 clamp(30px,5vh,60px); }

/* ポスターカード共通（静的グリッド＝フォールバック／カルーセル 両モードで画像は出る・no-JS可） */
.deliver__list{ list-style:none; max-width:var(--maxw); margin:0 auto; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:clamp(20px,3vw,34px); }
.deliver__item{ position:relative; aspect-ratio:251/354; border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; padding:22px 22px 24px; color:var(--card-fg);
  background:var(--card-bg);
  box-shadow:0 16px 34px rgba(23,19,15,.16), 0 4px 10px rgba(23,19,15,.10); }
/* 写真は背景ではなく子要素の img で敷く。カルーセルで transform と opacity を毎フレーム書かれるのは
   親の .deliver__item 側なので、塗り直しの対象から写真を1枚ぶん外せる。
   あわせて loading=lazy が効くようになり、初期ロードから6枚ぶんの重さが外れる。
   .deliver__item > *（詳細度 0,1,0）より子クラス指定（0,2,0）が強いので position と z-index はこちらが勝つ */
/* 角丸は img 自身にも持たせる。親の overflow:hidden だけに任せると、
   変形中の祖先の下でラスタ画像をクリップすることになり、iOS Safari が塗り直しやすい */
.deliver__item > .deliver__img{ position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; pointer-events:none; border-radius:8px; }
.deliver__item::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; }
.deliver__item[data-tone="ondark"]::after{ background:linear-gradient(180deg,
  rgba(10,8,4,.5) 0%, rgba(10,8,4,.14) 26%, rgba(10,8,4,.18) 56%, rgba(10,8,4,.66) 100%); }
.deliver__item[data-tone="onlight"]::after{ background:linear-gradient(180deg,
  rgba(246,240,229,.6) 0%, rgba(246,240,229,.24) 26%, rgba(246,240,229,.28) 56%, rgba(246,240,229,.72) 100%); }
.deliver__item > *{ position:relative; z-index:2; }
.deliver__no{ font-size:12px; letter-spacing:.16em; font-weight:600; opacity:.76; font-variant-numeric:tabular-nums; }
.deliver__tag{ font-size:11px; letter-spacing:.26em; font-weight:600; opacity:.66; margin-top:auto; }
.deliver__name{ margin-top:auto; font-family:var(--serif); font-weight:600;
  font-size:clamp(21px,2.3vw,28px); letter-spacing:.02em; line-height:1.3; }
.deliver__desc{ margin-top:.6em; font-size:clamp(13px,1.5vw,15px); line-height:1.75; opacity:.86; }

/* カルーセル（JS有効・PC/モバイル共通・motion可）
   ピンは二方式のハイブリッド。
   PC(761px以上) = JS制御の3状態。区間前 = absolute top:0 ／ 区間内 = fixed top:0 ／ 区間後 = absolute bottom:0。
   3状態ともフロー外なので、スクローラーの高さ(520vh)は1pxも動かない。ピン保持中の誤差は実測0.0pxで健全。
   モバイル(760px以下) = position:sticky（下の 760px メディア内で上書き・JSはクラスを書かない）。
   実測(2026-07-18・60試行): fixed切替のクラス付与はメインスレッドで最低1フレーム遅れ、
   不連続20件が全て3境界(進入・上抜け・出口)に集中し区間内は0件、速度4000px/sで最大225pxのスナップ。
   stickyは合成スレッドが追従するため境界で飛ばない。ここを再びJS切替に戻さないこと。 */
.deliver.is-carousel{ padding:0; }
.deliver.is-carousel .deliver__scroller{ height:520vh; position:relative; }
.deliver.is-carousel .deliver__stage{ position:absolute; top:0; left:0; height:100svh; overflow:hidden; z-index:2;
  contain:layout paint;
  background:radial-gradient(130% 120% at 30% 22%, var(--washi) 0%, var(--washi-deep) 82%); }
.deliver.is-carousel .deliver__stage.is-pinned{ position:fixed; top:0; }
.deliver.is-carousel .deliver__stage.is-past{ position:absolute; top:auto; bottom:0; }
.deliver.is-carousel .deliver__intro{ padding:clamp(80px,14vh,150px) clamp(24px,5vw,64px) clamp(24px,5vh,50px); max-width:var(--maxw); margin:0 auto; }
.deliver.is-carousel .deliver__head{ margin:0; }
.deliver.is-carousel .deliver__list{ position:absolute; inset:0; display:block; margin:0; max-width:none; }
.deliver.is-carousel .deliver__item{ position:absolute; left:44%; top:50%; width:clamp(220px,21vw,296px);
  transform-origin:center; cursor:pointer; transition:box-shadow .5s var(--ease);
  will-change:auto; }   /* 昇格の権限は .deliver--lift 一箇所に集約（.reveal の will-change を無効化） */
.deliver.is-carousel .deliver__item.deliver--lift{ will-change:transform,opacity; }
.deliver.is-carousel .deliver__item.is-hover{ box-shadow:0 30px 60px rgba(23,19,15,.30), 0 10px 22px rgba(23,19,15,.18); }
/* 説明文はカード上では見せないが、支援技術には残す（読み上げ経路を断たない） */
.deliver.is-carousel .deliver__desc{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.deliver.is-carousel .deliver__name{ margin-top:.5em; }

/* 右パネル（カルーセル時のみ） */
.deliver__panel{ display:none; }
.deliver.is-carousel .deliver__panel{ display:block; position:absolute; right:clamp(24px,4vw,72px);
  top:50%; transform:translateY(-50%); width:min(32ch,34vw); text-align:right; z-index:6; pointer-events:none; }
.dpanel__eye{ font-size:12px; letter-spacing:.22em; opacity:.55; margin-bottom:1em; font-weight:600; color:var(--sumi-soft); }
.dpanel__ttl{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,2.5vw,34px); letter-spacing:.02em; line-height:1.32; color:var(--sumi); margin-bottom:.4em; text-wrap:balance; }
.dpanel__tag{ font-size:12px; letter-spacing:.24em; color:var(--gold); font-weight:600; margin-bottom:.9em; }
.dpanel__meta{ font-size:14.5px; line-height:1.8; color:var(--sumi-soft); }
.dpanel__count{ margin-top:1.4em; font-size:13px; opacity:.5; font-style:italic; color:var(--sumi-soft); font-variant-numeric:tabular-nums; }
.dpfade{ transition:opacity .35s var(--ease), transform .45s var(--ease); }

/* キュー（カルーセル時のみ） */
.deliver__cue{ display:none; }
.deliver.is-carousel .deliver__cue{ display:block; position:absolute; left:clamp(24px,5vw,64px); bottom:36px; z-index:6;
  font-size:12px; letter-spacing:.14em; opacity:.55; color:var(--sumi-soft); }

/* 狭幅デスクトップ/タブレット: 右パネルは畳んでカードを中央に（被り・切れ回避）
   761px以上に限定する。760px以下はパネルを下部キャプションとして作り直すため。 */
@media (min-width:761px) and (max-width:1080px){
  .deliver.is-carousel .deliver__panel{ display:none; }
  .deliver.is-carousel .deliver__item{ left:50%; }
}

/* モバイルのカルーセル: 中央の1枚が正立して主役になり、右パネルは下部の固定キャプションに転用する。
   幅は横(58vw)と縦(30svh)の小さい方で決める。縦の低い端末はカード高が先に効くため。 */
@media (max-width:760px){
  .deliver.is-carousel .deliver__scroller{ height:400vh; }
  /* ▼施策1(2026-07-18): モバイルはJSのfixed切替をやめ sticky でピンする（境界スナップの原理解決）。
     in-flow の sticky は 固着距離 = scroller高(400vh) − stage高(100svh) となり、
     deliver.js の span = scroller.offsetHeight − stageH と厳密一致（進捗計算は無変更）。
     is-pinned / is-past は幅モード切替の過渡で残り得るため、クラス付きも同じ sticky に束ねる。
     巻き戻しはこのブロックごと削除。▲ */
  .deliver.is-carousel .deliver__stage,
  .deliver.is-carousel .deliver__stage.is-pinned,
  .deliver.is-carousel .deliver__stage.is-past{ position:sticky; top:0; bottom:auto; }
  .deliver.is-carousel .deliver__item{ left:50%; width:min(clamp(200px,58vw,300px), 30svh); padding:18px 18px 20px; }
  .deliver.is-carousel .deliver__cue{ display:none; }   /* キャプションと縦位置を奪い合うため畳む */
  /* カード面の題は下のキャプションが正本。狭い端末で折り返しすぎないよう一段落とす */
  .deliver.is-carousel .deliver__name{ font-size:clamp(17px,4.6vw,22px); }

  .deliver.is-carousel .deliver__panel{
    display:grid; position:absolute; z-index:70;
    left:0; right:0; width:auto;
    top:auto; bottom:0;
    transform:none; text-align:center; pointer-events:none;
    /* 地は画面下端まで伸ばして次のカードが下から覗くのを断ち、文字は浮遊CTAの上に置く */
    padding:46px clamp(20px,6vw,32px) calc(env(safe-area-inset-bottom) + 96px);
    grid-template-columns:auto auto; justify-content:center; align-items:baseline;
    column-gap:14px; row-gap:0;
    grid-template-areas:
      "ttl ttl"
      "tag count"
      "meta meta";
    color:var(--sumi);
    background:linear-gradient(180deg,
      rgba(236,224,203,0) 0%, rgba(236,224,203,.92) 18%, rgb(236,224,203) 30%, rgb(236,224,203) 100%);
  }
  .deliver.is-carousel .dpanel__eye{ display:none; }
  .deliver.is-carousel .dpanel__ttl{ grid-area:ttl; font-size:clamp(21px,5.6vw,26px); margin-bottom:.34em; color:var(--sumi); }
  /* 12pxの小さい文字なので、装飾用の --gold ではなく文字用の --gold-ink を使う（帯上で5.1:1） */
  .deliver.is-carousel .dpanel__tag{ grid-area:tag; margin-bottom:0; color:var(--gold-ink); }
  /* PCの薄字(opacity .5)のままだと小文字でAAを割るため、モバイルは不透明の副次色で出す */
  .deliver.is-carousel .dpanel__count{ grid-area:count; margin-top:0; opacity:1; color:var(--sumi-soft); }
  .deliver.is-carousel .dpanel__meta{ grid-area:meta; margin-top:.7em; font-size:13.5px; line-height:1.75; color:var(--sumi-soft); }
}

/* 見出しをh2化しても太字化しないよう weight を元の本文相当に固定 ／ フリーウェイ出典の極小表記 */
.why__head, .asset__head, .future__head, .program__head, .chosen__head{ font-weight:400; }
.chosen__src{ display:block; margin-top:1em; font-size:11px; opacity:.7; line-height:1.7; }

/* ---- 幕6 大義 ---- */
.taigi{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:#241d15; }
.taigi__media{ position:absolute; inset:0; z-index:0; }
.taigi__video{ width:100%; height:100%; object-fit:cover; opacity:.96; }
.taigi__media::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(78% 68% at 50% 50%, rgba(14,9,4,.66) 0%, rgba(14,9,4,.30) 55%, rgba(14,9,4,.5) 100%),
    linear-gradient(180deg, rgba(14,9,4,.3), rgba(14,9,4,.1) 45%, rgba(14,9,4,.34)); }
.taigi__inner{ position:relative; z-index:1; width:100%; max-width:940px; margin:0 auto;
  padding:0 clamp(22px,5vw,64px); text-align:center; }
.taigi__lead{ color:#f3ead9; font-size:clamp(16px,2.2vw,22px); letter-spacing:.06em; text-shadow:0 1px 12px rgba(8,5,2,.8); }
.taigi__daigi{ color:#fdf7ec; font-size:clamp(30px,6vw,64px); line-height:1.5; letter-spacing:.06em; margin:.7em 0;
  text-shadow:0 2px 8px rgba(8,5,2,.7), 0 4px 30px rgba(8,5,2,.6); }
.taigi__sub{ color:#efe1c9; font-size:clamp(15px,2vw,20px); letter-spacing:.06em; text-shadow:0 1px 12px rgba(8,5,2,.8); }

/* ---- 幕7 研修の設計 ---- */
.program{ background:var(--washi-deep); padding:clamp(90px,15vh,170px) clamp(22px,5vw,64px); }
.program__head{ max-width:var(--maxw); margin:0 auto 2.6em; font-size:clamp(22px,3.4vw,38px); line-height:1.5; letter-spacing:.04em; }
.program__list{ list-style:none; max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; }
.program__step{ padding:clamp(26px,4vh,46px) 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:clamp(16px,3vw,48px); align-items:start; }
.program__step:last-child{ border-bottom:1px solid var(--line); }
.program__meta{ display:flex; flex-direction:column; gap:.2em; }
.program__n{ font-size:clamp(16px,2vw,22px); color:var(--gold); font-weight:600; letter-spacing:.06em; }
.program__t{ font-size:clamp(13px,1.5vw,15px); color:var(--sumi-soft); letter-spacing:.08em; }
.program__title{ font-size:clamp(21px,3vw,34px); color:var(--sumi); }
.program__desc{ margin-top:.7em; font-size:clamp(14px,1.8vw,17px); color:var(--sumi-soft); line-height:1.9; }
.program__step--main{ background:linear-gradient(180deg, rgba(169,121,31,.06), transparent); }
.program__step--main .program__title{ font-size:clamp(26px,4.4vw,48px); }
.program__step--main .program__desc{ color:var(--sumi); font-size:clamp(15px,2vw,18px); }
.program__note{ max-width:var(--maxw); margin:2.4em auto 0; font-size:clamp(14px,1.8vw,17px); color:var(--sumi-soft); }

/* ---- 幕8 その先へ（2階建て＋選ばれる宿） ---- */
.future{ background:var(--washi); padding:clamp(90px,15vh,170px) clamp(22px,5vw,64px);
  display:grid; gap:clamp(56px,9vh,104px); max-width:var(--maxw); margin:0 auto; }
.future__head{ font-size:clamp(24px,3.6vw,42px); line-height:1.5; letter-spacing:.04em; margin-bottom:1.6em; }
.future__steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.future__steps li{ position:relative; }
.future__steps li:nth-child(2){ transform:translateY(clamp(0px,2vw,24px)); }
.future__steps li:nth-child(3){ transform:translateY(clamp(0px,4vw,48px)); }
.future__steps li:nth-child(4){ transform:translateY(clamp(0px,6vw,72px)); }
.future__no{ display:block; font-size:clamp(26px,4vw,48px); color:var(--gold); font-weight:600; line-height:1; }
.future__label{ display:block; margin:.4em 0 .5em; font-size:clamp(16px,2vw,22px); color:var(--sumi); letter-spacing:.05em; }
.future__d{ font-size:clamp(12px,1.5vw,15px); color:var(--sumi-soft); line-height:1.8; }

.chosen{ background:var(--sumi); color:#efe4d0; border-radius:2px; padding:clamp(40px,6vw,72px); }
.chosen__eyebrow{ color:var(--gold-bright); font-size:clamp(12px,1.5vw,15px); letter-spacing:.24em; }
.chosen__head{ margin-top:.5em; font-size:clamp(28px,5vw,54px); line-height:1.4; letter-spacing:.05em; color:#fbf3e4; }
.chosen__body{ margin-top:1.4em; font-size:clamp(14px,1.9vw,18px); line-height:1.95; color:#dccbb0; max-width:40em; }
.chosen__proof{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,72px); margin:2em 0 1.4em; }
.chosen__proof li{ display:flex; flex-direction:column; gap:.3em; }
.chosen__k{ font-size:clamp(12px,1.5vw,14px); color:#c9b79a; letter-spacing:.06em; }
.chosen__v{ font-size:clamp(24px,4vw,40px); color:var(--gold-bright); font-weight:600; }
.chosen__note{ font-size:clamp(12px,1.5vw,14px); color:#c9b79a; line-height:1.8; max-width:42em; }
.price{ max-width:var(--maxw); margin:clamp(48px,8vh,90px) auto 0;
  background:var(--washi); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(34px,5vw,56px); }
.price__head{ font-size:clamp(14px,1.6vw,16px); color:var(--gold); font-weight:600; letter-spacing:.16em; margin-bottom:1.2em; }
.price__list{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,64px); }
.price__list li{ display:flex; flex-direction:column; gap:.2em; }
.price__k{ font-size:clamp(13px,1.5vw,15px); color:var(--sumi-soft); letter-spacing:.06em; }
.price__v{ font-size:clamp(26px,4.4vw,44px); color:var(--sumi); font-weight:600; letter-spacing:.02em; }
.price__note{ margin-top:1.6em; font-size:clamp(13px,1.6vw,15px); color:var(--sumi-soft); }

/* ---- 幕9 CTA ---- */
.cta{ background:var(--washi); padding:clamp(100px,18vh,200px) clamp(22px,5vw,64px); text-align:center; }
.cta__inner{ max-width:760px; margin:0 auto; }
.cta__lead{ font-size:clamp(26px,4.6vw,50px); line-height:1.5; letter-spacing:.05em; color:var(--sumi); }
.cta__sub{ margin-top:1.2em; font-size:clamp(15px,2vw,20px); color:var(--sumi-soft); }
.cta__btn{ display:inline-block; margin-top:2.4em; padding:1em 2.6em; text-decoration:none;
  font-size:clamp(15px,1.9vw,18px); letter-spacing:.1em; color:#fbf5e9;
  background:var(--gold); border-radius:2px; transition:background .4s var(--ease), transform .4s var(--ease); }
.cta__btn:hover{ background:#916615; transform:translateY(-2px); }

/* ---- FAQ ---- */
.faq{ background:var(--washi-deep); padding:clamp(80px,13vh,150px) clamp(22px,5vw,64px); }
.faq__head{ max-width:var(--maxw); margin:0 auto 2em; font-size:clamp(20px,3vw,32px); letter-spacing:.06em; }
.faq__list{ max-width:var(--maxw); margin:0 auto; }
.faq__item{ padding:clamp(20px,3vh,32px) 0; border-top:1px solid var(--line); }
.faq__item dt{ font-size:clamp(16px,2.1vw,21px); color:var(--sumi); font-weight:600; margin-bottom:.7em; }
.faq__item dd{ font-size:clamp(14px,1.8vw,17px); color:var(--sumi-soft); line-height:1.9; }

/* ---- footer ---- */
.foot{ background:var(--sumi); color:#e7d9c1; padding:clamp(50px,8vh,90px) clamp(22px,5vw,64px); text-align:center; }
.foot__brand{ font-size:clamp(18px,2.4vw,24px); letter-spacing:.1em; color:#f4ecdd; }
.foot__tagline{ margin-top:.6em; font-size:clamp(13px,1.6vw,15px); color:#c9b79a; letter-spacing:.08em; }
.foot__meta{ margin-top:1.6em; font-size:clamp(12px,1.5vw,14px); color:#c9b79a; }
.foot__meta a{ color:#e9c877; }
.foot__copy{ margin-top:1.4em; font-size:11px; color:#9c8b70; letter-spacing:.08em; }

/* ---- レスポンシブ ---- */
@media (max-width:760px){
  .deliver__list{ grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); }
  .deliver__intro{ text-align:left; }
  .future__steps{ grid-template-columns:1fr; }
  .future__steps li:nth-child(2),.future__steps li:nth-child(3),.future__steps li:nth-child(4){ transform:none; }
  .program__step{ grid-template-columns:1fr; gap:.6em; }
  /* 幕4モバイル: キャンバス円相は使わず、CSS円＋縦積みで読める形に（重なり解消） */
  .dissect{ min-height:auto; }
  .dissect__grid{ position:static; height:auto; min-height:100svh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(16px,2.6vh,28px); padding:clamp(72px,12vh,110px) clamp(22px,5vw,40px); }
  .dissect__q, .dissect__o{ grid-row:auto; grid-column:auto; align-items:center; text-align:center; }
  .dissect__center{ position:relative; grid-row:auto; grid-column:auto; display:grid; place-items:center;
    width:clamp(210px,66vw,270px); height:clamp(210px,66vw,270px); margin:clamp(4px,1vh,12px) 0; }
  .enso-svg{ display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .enso-svg__path{ fill:none; stroke:rgba(169,121,31,.6); stroke-width:2.6; stroke-linecap:round; }
  .dissect__note{ grid-row:auto; grid-column:auto; margin-top:clamp(10px,2vh,20px); }
  .why__track{ height:300vh; }
  .wstat__body{ padding:0 clamp(18px,6vw,30px); }
  .wstat__panel{ max-width:100%; }
  .wstat__num{ font-size:clamp(46px,15vw,88px); }

  /* モバイルHero: テキストを下1/3へ＋強い下スクリムで確実に読める（門・桜は上2/3で活きる） */
  .hero{ align-items:flex-end; }
  .hero__inner{ padding-bottom:clamp(64px,13vh,120px); }
  .hero__scrim{ background:
    linear-gradient(0deg, rgba(24,18,10,.74) 0%, rgba(24,18,10,.34) 42%, rgba(24,18,10,0) 70%); }
  .hero__title{ text-shadow:0 2px 24px rgba(12,8,3,.66); }
  .hero__lead{ text-shadow:0 1px 14px rgba(12,8,3,.82); }
}

/* ---- reduced-motion（第一級パス・美しく完全に読める） ---- */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__cue-line{ animation:none; }
  .hero__video,.taigi__video{ display:none; }   /* 動画は止めてposterを見せる */
  /* 地の色だけを指定する。ショートハンドで書くと前段のポスター画像まで消え、
     明るい地に白文字が乗って 1.66:1 まで落ちる（読めない） */
  .hero__media{ background-color:#2a231b; }
  #stage{ display:none; }                        /* キャンバスは静止画相当に */
  /* 幕2スイッチャーは静止で3枚積む（読める・美しい） */
  .why__track{ height:auto !important; }
  .why__stage{ position:static; opacity:1; visibility:visible; }
  .wstat{ position:relative; inset:auto; opacity:1; min-height:100svh; }
  .why__dots{ display:none; }
}

/* ---- ブランドマーク（左上・押すと dbajapan.com へ戻る） ----
   地色が明暗どちらでも読めるよう、文字色と同時にハローを反転させる。
   Heroの左上は木立ちと和紙で明るいため既定は墨。暗幕(taigi/legacy)で白へ。 */
.brandmark{
  position:fixed;
  /* padding の分だけ戻し、文字の見た目の余白を top/left の値どおりにする */
  top:calc(max(clamp(14px,2.2vh,26px), env(safe-area-inset-top)) - 20px);
  left:calc(max(clamp(16px,3.4vw,40px), env(safe-area-inset-left)) - 28px);
  z-index:20;
  padding:20px 28px;
  font-family:var(--serif);
  font-size:clamp(14px,1.45vw,17px);
  font-weight:600;
  letter-spacing:.16em;
  line-height:1;
  color:var(--sumi);
  text-decoration:none;
  background:transparent;   /* 下地は敷かない。雲のような楕円が浮いて品位を落とす */
  /* 地に溶けないよう、字の際にだけ薄く和紙の光を回す（暗幕では墨に反転） */
  text-shadow:
    0 0 2px rgba(244,236,221,.98),
    0 0 6px rgba(244,236,221,.9),
    0 0 14px rgba(244,236,221,.68);
  transition:color .45s var(--ease), text-shadow .45s var(--ease);
}
.brandmark:hover{ color:#75591b; }
.brandmark:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:2px; }

.brandmark.on-dark{
  color:#f6efe1;
  text-shadow:
    0 0 2px rgba(18,13,8,.98),
    0 0 6px rgba(18,13,8,.9),
    0 0 14px rgba(18,13,8,.68);
}
.brandmark.on-dark:hover{ color:var(--gold-bright); }

@media (max-width:760px){
  .brandmark{ font-size:14px; letter-spacing:.14em; }
}

/* ---- 継承タイムライン（幕9・第2回を主役に）＋導線 2026-07-18 ---- */
.program__list{ --rail:clamp(24px,4.5vw,46px); position:relative; padding-left:var(--rail); }
.program__list::before{ content:""; position:absolute; left:calc(var(--rail) * 0.34); top:.7em; bottom:.7em; width:2px;
  background:linear-gradient(180deg, transparent, var(--line) 7%, var(--line) 93%, transparent); }
.program__step{ position:relative; }
.program__step::before{ content:""; position:absolute; top:calc(clamp(26px,4vh,46px) + .35em);
  left:calc(var(--rail) * -0.66 - 5px); width:10px; height:10px; border-radius:50%;
  background:var(--washi-deep); border:2px solid var(--gold); box-sizing:border-box; }
.program__step--main::before{ top:calc(clamp(26px,4vh,46px) + .1em);
  left:calc(var(--rail) * -0.66 - 8px); width:16px; height:16px; background:var(--gold);
  box-shadow:0 0 0 6px rgba(169,121,31,.12); }
.program__step--main{ padding-top:clamp(30px,5vh,52px); padding-bottom:clamp(30px,5vh,52px); }
.program__flag{ align-self:flex-start; display:inline-block; margin-bottom:.6em; padding:.28em .85em;
  font-size:clamp(11px,1.3vw,13px); letter-spacing:.1em; color:#fbf5e9; background:var(--gold); border-radius:2px; }
.program__cta{ max-width:var(--maxw); margin:clamp(30px,5vh,56px) auto 0; }
.program__cta .cta__btn{ margin-top:0; }

/* 浮遊CTA（全スクロール常設・heroを抜けたら出現） */
.floatcta{ position:fixed; z-index:30; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vh,30px);
  display:inline-flex; align-items:center; padding:.9em 1.5em; text-decoration:none;
  font-family:var(--serif); font-size:clamp(14px,1.6vw,16px); letter-spacing:.1em; font-weight:600;
  color:#fbf5e9; background:var(--gold); border-radius:999px;
  box-shadow:0 6px 22px rgba(23,19,15,.28);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .3s var(--ease); }
.floatcta.is-visible{ opacity:1; visibility:visible; transform:none; }
.floatcta:hover{ background:#916615; }
.floatcta:focus-visible{ outline:2px solid var(--sumi); outline-offset:3px; }
@media (max-width:760px){ .floatcta{ right:14px; bottom:14px; padding:.85em 1.35em; } }
@media (prefers-reduced-motion:reduce){ .floatcta{ transition:none; opacity:1; visibility:visible; transform:none; } }