/* 新LP（D案・2026-09-14）土台。中島さま制作 index.html の <style> から機械的に切り出したもの。
   場面ごとの CSS は lp/css/<セクション名>/d.css。
   🚨 スマホ用（SP）と モーション低減 は base-d-responsive.css にあり、**セクションCSSより後**に読む。
      順番を変えるとスマホ表示が壊れる（同じ強さの指定は後から読んだほうが勝つため）。 */
/* ==========================================================
   design tokens
   ========================================================== */
:root{
  --color-text:#2e3440;
  --color-text-sub:#5b6472;
  --color-line:#dce6f3;
  --color-navy:#10346b;
  --color-blue-mid:#3c74c4;
  --color-bg:#f5f9fe;
  --color-white:#ffffff;
  --font-body:"Noto Sans JP",sans-serif;
  --font-heading:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --w-container:1120px;
  --w-fig:760px;
  --w-col:520px;
  --pad:20px;
}
/* ==========================================================
   base
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:2.0;
  letter-spacing:.03em;
  color:var(--color-text);
  background:var(--color-bg);
  overflow-x:clip;
}
img{display:block;max-width:100%;border:0}
p{margin:0 0 1.6em}
p:last-child{margin-bottom:0}
h1,h2,h3{margin:0;font-weight:500;font-family:var(--font-heading);line-height:1.9;letter-spacing:.04em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}

.wrap{width:100%;max-width:var(--w-container);margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:calc(var(--w-col) + var(--pad) * 2)}
.col{max-width:var(--w-col)}

.scene{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:110px 0}
.scene--auto{min-height:0;padding:120px 0}

.h2{font-size:clamp(21px,3.6vw,30px);margin:0 0 40px}
.note{font-size:14px;line-height:1.9;color:var(--color-text-sub)}
.lead{max-width:var(--w-col)}

/* ---------- 章番号 ---------- */
.chapter{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:clamp(48px,8.4vw,110px);
  line-height:1;
  color:var(--color-line);
  margin:0 0 18px;
  -webkit-user-select:none;
  user-select:none;
}
.chapter--light{color:rgba(255,255,255,.26)}
.chapter--sm{font-size:clamp(40px,6vw,72px);margin-bottom:10px}

/* ---------- 進捗バー ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--color-blue-mid);z-index:120;transition:width .12s linear}
/* ==========================================================
   出現の型
   Layer A ＝「淡から濃」。opacity 0 起点にしない。
   Layer B ＝「無から有」。読まなくても意味が通るものだけ。
   ========================================================== */
.js .rv-a{
  opacity:.5;transform:translateY(8px);
  transition:opacity .42s ease var(--rv-delay,0s),transform .5s cubic-bezier(.22,.7,.3,1) var(--rv-delay,0s);
}
.js .rv-a.is-in{opacity:1;transform:none}

.js .rv-photo{
  opacity:.35;transform:scale(var(--rv-scale,1.03));
  transition:opacity 1.2s ease var(--rv-delay,0s),transform 1.6s cubic-bezier(.22,.7,.3,1) var(--rv-delay,0s);
}
.js .rv-photo.is-in{opacity:1;transform:scale(1)}

.js .rv-fade{opacity:0;transition:opacity var(--rv-d,1.1s) ease var(--rv-delay,0s)}
.js .rv-fade.is-in{opacity:1}

.js .rv-rise{
  opacity:0;transform:translateY(var(--rv-y,12px));
  transition:opacity var(--rv-d,1s) ease var(--rv-delay,0s),
             transform var(--rv-d,1s) cubic-bezier(.22,.7,.3,1) var(--rv-delay,0s);
}
.js .rv-rise.is-in{opacity:1;transform:none}

/* 場面14のモンタージュ：カットが切り替わる感覚 */
.js .rv-cut{
  opacity:.3;clip-path:inset(0 0 55% 0);
  transition:opacity .34s ease var(--rv-delay,0s),
             clip-path .5s cubic-bezier(.2,.75,.3,1) var(--rv-delay,0s);
}
.js .rv-cut--up{clip-path:inset(55% 0 0 0)}
.js .rv-cut.is-in{opacity:1;clip-path:inset(0 0 0 0)}

/* 順次出現：直下の子に段階遅延 */
.rv-seq > :nth-child(1){--rv-delay:0s}
.rv-seq > :nth-child(2){--rv-delay:.22s}
.rv-seq > :nth-child(3){--rv-delay:.44s}
.rv-seq > :nth-child(4){--rv-delay:.66s}
.rv-seq > :nth-child(n+5){--rv-delay:.88s}

.no-io .rv-a,.no-io .rv-photo,.no-io .rv-fade,.no-io .rv-rise,.no-io .rv-cut{
  opacity:1!important;transform:none!important;clip-path:none!important
}
/* ==========================================================
   図版
   ========================================================== */
.fig{max-width:var(--w-fig);margin:0 auto;overflow:hidden;position:relative}
.fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* ==========================================================
   sticky 場面の土台（ブラウザ本来のスクロールは止めない）
   ========================================================== */
.scene-tall{position:relative}
.sticky-inner{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  display:flex;align-items:center;
}
.sticky-content{position:relative;z-index:2;width:100%;max-width:var(--w-container);margin:0 auto;padding:0 var(--pad);will-change:transform}
.sticky-content.center{text-align:center}
.sticky-content.center .col{margin-left:auto;margin-right:auto}
.bg{position:absolute;inset:0;z-index:0;will-change:transform,opacity}
.bg img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.veil{position:absolute;inset:0;z-index:1}

/* 差し替えテキスト（進捗連動の連続クロスフェード） */
.swap{display:grid}
.swap-item{grid-area:1/1;margin:0}