/* =========================================================
   LP × Agentic AI — 再設計版
   夜明けのパレット／2書体システム／8ptグリッド
   ========================================================= */

:root{
  /* 夜 */
  --night:#0a0d12;
  --night2:#11161d;
  --night3:#1a212a;
  /* 朝 */
  --paper:#f4efe5;
  --paper2:#ebe3d5;
  --sand:#d8cbb4;
  /* 文字 */
  --lt:#f2ede4;
  --lt-mute:#9aa3ad;
  --dk:#1b1a17;
  --dk-mute:#6b675e;
  /* 機能色 */
  --amber:#e0a458;   /* 光・判定 */
  --verde:#4f8a76;   /* 検証・通過 */
  --rust:#c2603f;    /* 手戻り・警告 */

  /* タイプスケール 16 / 1.25 */
  --t0:.8rem; --t1:1rem; --t2:1.25rem; --t3:1.5625rem;
  --t4:1.953rem; --t5:2.441rem; --t6:3.052rem; --t7:3.815rem;

  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Times New Roman",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Segoe UI",system-ui,sans-serif;

  --shell:1160px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--night);
  color:var(--lt);
  font-family:var(--sans);
  font-size:var(--t1);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  /* clip を使う（hidden は position:sticky を壊すため） */
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

.shell{max-width:var(--shell);margin:0 auto;padding:0 32px}

/* ---------- 進捗レール（夜→朝） ---------- */
.rail{position:fixed;left:0;top:0;width:3px;height:100vh;z-index:60;background:rgba(255,255,255,.06)}
.rail span{display:block;width:100%;height:0;
  background:linear-gradient(180deg,#2b3a4a,var(--rust) 45%,var(--amber) 78%,#f6e9cf);}

/* ---------- 夜明けのグロー（固定・スクロール駆動） ---------- */
.glow{
  position:fixed;inset:auto 0 -30vh 0;height:90vh;z-index:0;pointer-events:none;
  background:radial-gradient(60% 100% at 78% 100%,rgba(224,164,88,.55),rgba(194,96,63,.22) 42%,transparent 72%);
  opacity:0;transition:opacity .4s linear;
}

/* =========================================================
   ACT 0 : HERO
   ========================================================= */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.42) contrast(1.05)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,var(--night) 22%,rgba(10,13,18,.86) 52%,rgba(10,13,18,.35) 100%)}

.hero-grid{
  position:relative;z-index:2;max-width:var(--shell);margin:0 auto;padding:120px 32px 0;
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:64px;align-items:end;
}
.clock{
  font-family:var(--serif);font-size:var(--t4);letter-spacing:.06em;color:var(--amber);
  display:flex;align-items:baseline;gap:16px;margin-bottom:24px;
}
.clock span{font-family:var(--sans);font-size:var(--t0);letter-spacing:.24em;color:var(--lt-mute)}

h1{
  font-family:var(--serif);
  font-size:clamp(2.1rem,5.6vw,var(--t7));
  line-height:1.36;font-weight:600;letter-spacing:.01em;
}
h1 .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(3deg);
  animation:chIn .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes chIn{to{opacity:1;transform:none}}
h1.shown .ch{opacity:1;transform:none}

.hero-note{margin-top:32px;color:var(--lt-mute);font-size:var(--t2);line-height:1.9;max-width:30ch}
.hero-meta{margin-top:48px;display:flex;gap:24px;flex-wrap:wrap;font-size:var(--t0);color:var(--lt-mute)}
.hero-meta span{border-left:1px solid rgba(255,255,255,.18);padding-left:12px}

.hero-strip{position:relative}
.hero-strip img{width:100%;aspect-ratio:3/4.4;object-fit:cover;filter:grayscale(.5) brightness(.8)}
.hero-strip figcaption{margin-top:12px;font-size:.72rem;line-height:1.7;color:var(--lt-mute)}

.scrollcue{
  position:relative;z-index:2;margin:88px auto 40px;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.7rem;letter-spacing:.3em;color:var(--lt-mute);text-decoration:none;
}
.scrollcue span{width:1px;height:56px;background:linear-gradient(var(--amber),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* =========================================================
   共通セクション
   ========================================================= */
.act{position:relative;z-index:2;padding:144px 0}
.act-dark{background:var(--night)}
.act-light{background:var(--paper);color:var(--dk)}
.act-paper{background:var(--paper2);color:var(--dk)}

.eyebrow{
  font-family:var(--serif);font-size:var(--t2);color:var(--amber);
  letter-spacing:.4em;margin-bottom:24px;
}
h2{font-family:var(--serif);font-size:clamp(1.7rem,4vw,var(--t6));line-height:1.45;font-weight:600;letter-spacing:.01em}
h3{font-family:var(--serif);font-size:var(--t3);line-height:1.5;font-weight:600}
.lead{margin-top:24px;max-width:60ch;color:var(--lt-mute);font-size:var(--t2)}
.act-light .lead,.act-paper .lead{color:var(--dk-mute)}
.act-light .eyebrow,.act-paper .eyebrow,.hhead .eyebrow{color:var(--rust)}

/* ゆらぎ見出し */
.wobble{filter:url(#fWobble)}

/* ---------- 起：split ---------- */
.split{display:grid;grid-template-columns:1fr 340px;gap:72px;margin-top:64px;align-items:start}
.split-text p{margin-bottom:24px;max-width:44ch}
.split-text .big{font-size:var(--t3);font-family:var(--serif);line-height:1.75}
.split-text b{color:var(--amber);font-weight:600}
.split-img.tall img{aspect-ratio:3/4;object-fit:cover;filter:grayscale(.4) brightness(.75)}

.quote{
  margin-top:96px;padding:40px 0 40px 40px;border-left:2px solid var(--amber);max-width:66ch;
}
.quote p{font-family:var(--serif);font-size:var(--t2);line-height:1.9}
.quote b{color:var(--amber)}
.quote cite{display:block;margin-top:20px;font-style:normal;font-size:var(--t0);letter-spacing:.12em;color:var(--lt-mute)}

/* ---------- 承：3つのコスト（非対称・段差） ---------- */
.costs{margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.cost{position:relative;padding:32px 28px 32px 0;border-top:1px solid rgba(255,255,255,.14)}
.cost.c1{margin-top:0;padding-right:48px}
.cost.c2{margin-top:56px}
.cost.c3{margin-top:112px}
.cost-n{font-family:var(--serif);font-size:var(--t2);color:var(--rust);letter-spacing:.1em}
.cost h3{margin:8px 0 16px}
.cost p{color:var(--lt-mute);font-size:.94rem}
.cost em{font-style:normal;color:var(--lt);border-bottom:1px solid rgba(224,164,88,.5)}
.cost .cause{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.14);color:var(--amber);font-size:.86rem}

.verdict{
  margin-top:96px;font-family:var(--serif);font-size:clamp(1.2rem,2.8vw,var(--t4));line-height:1.8;max-width:34ch;
}
.verdict b{color:var(--amber)}

/* =========================================================
   WOW : 検証ループ
   ========================================================= */
.loopsec{position:relative;z-index:2;height:420vh;background:var(--night2)}
.loop-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.loop-inner{
  max-width:var(--shell);margin:0 auto;padding:0 32px;width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.loopsvg{width:100%;height:auto;overflow:visible}
.loop-track{fill:none;stroke:rgba(255,255,255,.10);stroke-width:2}
.loop-draw{fill:none;stroke:url(#gDawn);stroke-width:3;stroke-linecap:round}
.loop-exit{fill:none;stroke:rgba(224,164,88,.28);stroke-width:2;stroke-dasharray:5 7}
.lb{
  fill:rgba(255,255,255,.34);font-family:var(--sans);font-size:15px;letter-spacing:.22em;text-anchor:middle;
  transition:fill .35s,font-size .35s;
}
.lb.on{fill:var(--amber)}
#human .h-dot{fill:#fff}
#human .h-halo{fill:rgba(224,164,88,.22)}
#human.out .h-dot{fill:var(--amber)}

.loop-copy .eyebrow{margin-bottom:16px}
.loop-copy h2{margin-bottom:24px}
.loop-copy p{color:var(--lt-mute);max-width:36ch;min-height:6.5em}
.loop-bar{margin-top:32px;height:2px;background:rgba(255,255,255,.12);max-width:280px}
.loop-bar span{display:block;height:100%;width:0;background:var(--amber)}

/* =========================================================
   夜明け（文字の中に写真が覗く）
   ========================================================= */
.dawn{position:relative;z-index:2;height:96vh;overflow:hidden;background:#000}
.dawn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);filter:saturate(1.05)}
.dawn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,18,.72),rgba(10,13,18,.15) 45%,rgba(10,13,18,.8))}
.dawn-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px}
.cutout{
  font-family:var(--serif);font-size:clamp(3rem,13vw,9rem);line-height:1;font-weight:700;letter-spacing:.02em;
  background-image:url("https://images.unsplash.com/photo-1613578519724-22fdb5d06388?auto=format&fit=crop&w=1600&q=80");
  background-size:cover;background-position:center 30%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:brightness(1.35) contrast(1.1);
}
.dawn-copy p{margin-top:32px;color:var(--lt);letter-spacing:.16em;font-size:var(--t2)}

/* =========================================================
   三手
   ========================================================= */
.hand{display:grid;grid-template-columns:88px 1fr 340px;gap:48px;align-items:start;padding:88px 0;border-bottom:1px solid rgba(27,26,23,.12)}
.hand:last-child{border-bottom:0}
.hand.rev{grid-template-columns:340px 1fr 88px}
.hand.rev .hand-img{order:1}
.hand.rev .hand-body{order:2}
.hand.rev .hand-num{order:3}
.hand-num{
  font-family:var(--serif);font-size:var(--t6);line-height:1;color:var(--sand);
  writing-mode:vertical-rl;letter-spacing:.1em;
}
.hand-body h3{margin-bottom:24px;font-size:var(--t4)}
.hand-body p{margin-bottom:20px;max-width:46ch;color:#3d3a34}
.hand-body b{color:var(--rust);font-weight:600}
.hand-src{font-size:var(--t0)!important;letter-spacing:.1em;color:var(--dk-mute)!important;margin-bottom:0!important}
.hand-img img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.12) saturate(.95)}
.hand.rev .hand-img img{aspect-ratio:3/4}

/* =========================================================
   横スクロール工程
   ========================================================= */
.hsec{position:relative;z-index:2;height:520vh;background:var(--paper);color:var(--dk)}
.hsticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hhead{max-width:var(--shell);margin:0 auto 40px;padding:0 32px;width:100%}
.hhead .eyebrow{margin-bottom:12px}
.hhead h2{font-size:var(--t5)}
.hnote{margin-top:12px;font-size:var(--t0);letter-spacing:.2em;color:var(--dk-mute)}
.htrack{display:flex;gap:24px;padding-left:max(32px,calc((100vw - var(--shell))/2 + 32px));will-change:transform}
.proc{
  flex:none;width:min(420px,76vw);background:#fff;border:1px solid rgba(27,26,23,.10);
  padding:32px 28px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;
}
.proc:nth-child(odd){margin-top:32px}
.proc:hover{transform:translateY(-8px);box-shadow:0 18px 48px rgba(27,26,23,.12)}
.proc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.pi{width:34px;height:34px;fill:none;stroke:var(--rust);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.proc-n{font-family:var(--serif);font-size:var(--t3);color:var(--sand)}
.proc h3{font-size:var(--t2);margin-bottom:20px}
.proc ul{list-style:none;font-size:.88rem;line-height:1.8}
.proc ul li{padding-left:18px;position:relative;margin-bottom:8px;color:#403c35}
.proc ul.ai{margin-bottom:20px;padding-bottom:20px;border-bottom:1px dashed rgba(27,26,23,.16)}
.proc ul.ai li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;background:var(--verde)}
.proc ul.cau li::before{content:"";position:absolute;left:0;top:.66em;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--rust)}
.proc ul.cau li{color:#5a534a}

/* =========================================================
   捨てる9つ
   ========================================================= */
.unl{list-style:none;margin-top:72px;counter-reset:u}
.unl li{
  counter-increment:u;display:grid;grid-template-columns:1fr 1fr 240px;gap:32px;align-items:baseline;
  padding:26px 0 26px 56px;border-top:1px solid rgba(27,26,23,.12);position:relative;
}
.unl li::before{
  content:counter(u,decimal-leading-zero);position:absolute;left:0;top:26px;
  font-family:var(--serif);font-size:var(--t1);color:var(--sand);letter-spacing:.08em;
}
.u-old{color:var(--dk-mute);text-decoration:line-through;text-decoration-color:rgba(194,96,63,.6);font-size:.96rem}
.u-new{font-size:var(--t2);font-family:var(--serif)}
.u-new b{color:var(--rust)}
.u-why{font-size:.82rem;color:var(--dk-mute);line-height:1.7}

/* =========================================================
   明日の6手
   ========================================================= */
.start-head h2{font-size:var(--t5)}
.start-head p{margin-top:16px;color:var(--dk-mute)}
.stepwrap{margin-top:64px;display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:start}
.stepl{list-style:none;counter-reset:s}
.stepl li{counter-increment:s;position:relative;padding:24px 0 24px 72px;border-bottom:1px solid rgba(27,26,23,.12)}
.stepl li::before{
  content:counter(s);position:absolute;left:0;top:24px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--dk);color:var(--paper);
  font-family:var(--serif);font-size:var(--t1);
}
.stepl li b{display:block;font-size:var(--t2);font-family:var(--serif);margin-bottom:6px}
.stepl li span{color:var(--dk-mute);font-size:.92rem}
.start-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.start-img figcaption{margin-top:12px;font-size:.76rem;color:var(--dk-mute);line-height:1.7}

.closing{
  margin-top:96px;padding-top:56px;border-top:2px solid var(--dk);
  font-family:var(--serif);font-size:clamp(1.2rem,3vw,var(--t4));line-height:1.85;
}
.closing b{color:var(--rust)}

/* =========================================================
   出典
   ========================================================= */
.foot{position:relative;z-index:2;background:var(--night);color:var(--lt);padding:112px 0 96px}
.foot-h{font-size:var(--t2);letter-spacing:.06em;color:var(--lt-mute);font-family:var(--sans);margin-bottom:40px}
.srcs{list-style:none;display:grid;gap:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.srcs li{background:var(--night);padding:20px 24px;display:grid;
  grid-template-columns:118px 1fr;grid-template-rows:auto auto;column-gap:20px;align-items:center}
.srcs b{grid-column:2;grid-row:1;font-size:.96rem;font-weight:600}
.srcs small{grid-column:2;grid-row:2;display:block;color:var(--lt-mute);font-size:.74rem;word-break:break-all;margin-top:2px}
.tag{grid-column:1;grid-row:1/3;align-self:center;
  font-size:.64rem;letter-spacing:.16em;padding:5px 10px;border:1px solid rgba(255,255,255,.2);text-align:center;color:var(--lt-mute)}
.tag.a{color:var(--amber);border-color:rgba(224,164,88,.4)}
.tag.o{color:var(--verde);border-color:rgba(79,138,118,.5)}
.note{margin-top:40px;font-size:.76rem;color:var(--lt-mute);line-height:1.9}

/* =========================================================
   リビール（役割ごとに動きを変える）
   ========================================================= */
[data-rv]{opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
[data-rv="up"]{transform:translateY(40px)}
[data-rv="side"]{transform:translateX(-32px)}
[data-rv="drop"]{transform:translateY(-28px)}
[data-rv="scale"]{transform:scale(.96)}
[data-rv].on{opacity:1;transform:none}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-top:96px}
  .hero-strip{max-width:220px}
  .split{grid-template-columns:1fr;gap:40px}
  .split-img.tall{max-width:300px}
  .costs{grid-template-columns:1fr;gap:0}
  .cost{margin-top:0!important;padding-right:0!important}
  .loop-inner{grid-template-columns:1fr;gap:32px}
  .loop-copy p{min-height:auto}
  .loopsvg{max-width:440px;margin:0 auto}
  .hand,.hand.rev{grid-template-columns:1fr;gap:24px}
  .hand-num,.hand.rev .hand-num{writing-mode:horizontal-tb;order:0;font-size:var(--t4)}
  .hand.rev .hand-img{order:0}
  .hand-img img,.hand.rev .hand-img img{aspect-ratio:16/9;max-height:280px}
  .unl li{grid-template-columns:1fr;gap:8px}
  .stepwrap{grid-template-columns:1fr;gap:40px}
  .start-img{max-width:320px}
  .srcs li{grid-template-columns:1fr;gap:10px}
  .tag{justify-self:start;padding:4px 10px}
  .act{padding:96px 0}
}

/* 横スクロールを縦積みに退避 */
.hsec.stacked{height:auto}
.hsec.stacked .hsticky{position:static;height:auto;padding:96px 0}
.hsec.stacked .htrack{flex-wrap:wrap;justify-content:center;padding:0 24px;transform:none!important}
.hsec.stacked .proc{margin-top:0}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-rv]{opacity:1;transform:none}
  .wobble{filter:none}
}