/* v5 で足す仕掛け。色と余白の決まりは site.css のまま
   1. 幕開け: 青い幕が縮んで「重なり」に収まる
   2. 道: 重なりから行き先まで、ページを 1 本の線が走る（余白と区切りだけを通り、本文には重ねない）
   3. 図の切り替え: 提供するものを読み進めると、二つの円のどこに当たるかが変わる */

/* ---------- 共通 ---------- */
[data-road]{position:relative}
[data-road]>.wrap{position:relative;z-index:1}
.stage .dot{fill:#fff}
h2{font-size:clamp(30px,3.8vw,54px)}

/* 青い面のざらつき（画像を使わず SVG のノイズ） */
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 道 ---------- */
.road{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible;color:var(--ink)}
.road path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.road .car{fill:var(--blue);stroke:#fff;stroke-width:3;opacity:0}
.dark .road,.dest .road{color:#fff}
.dest .road .car{fill:#fff;stroke:var(--blue)}

/* 余白に立てる縦書きの地点名（広い画面だけ。そのとき本文側のラベルは出さない） */
.way{display:none}
@media (min-width:1400px){
  .way{display:block;position:absolute;top:var(--s16);writing-mode:vertical-rl;font-size:12px;font-weight:700;letter-spacing:.32em;color:var(--mute);z-index:1}
  [data-road^="l"]>.way{left:calc((100% - 1200px)/4 + 16px)}
  [data-road^="r"]>.way{right:calc((100% - 1200px)/4 + 16px)}
  .dark>.way{color:var(--ondark-mute)}
  .way~.wrap .label{display:none}
}

/* ---------- header（青い幕の上では白抜き） ---------- */
.hd{transition:background .3s,border-color .2s}
.hd .logo .w{display:none}
.on-blue .hd{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.on-blue .hd .logo .k{display:none}
.on-blue .hd .logo .w{display:block}
.on-blue .hd nav ul{color:#fff}
.on-blue .hd nav a::after{background:#fff}
.on-blue .hd .btn{background:#fff;color:var(--ink)}

/* ---------- hero と幕 ---------- */
.hero{min-height:calc(100svh - var(--hd));display:grid;align-items:center;padding:var(--s8) 0 var(--s16)}
.hero>.wrap{width:100%}
.hero h1{font-size:clamp(40px,5.6vw,80px)}
.curtain{display:none}
.js .curtain{display:block;position:absolute;left:0;right:0;top:calc(var(--hd) * -1);bottom:0;background:var(--blue);color:#fff;z-index:40}
.curtain-in{position:relative;height:100svh;display:grid;place-content:center;padding:0 var(--pad)}
.curtain p{font-weight:900;font-feature-settings:"palt";font-size:clamp(44px,10.6vw,176px);line-height:1.14;letter-spacing:.01em}
.curtain p span{display:block;white-space:nowrap;overflow:hidden}
.curtain p span b{display:inline-block;font-weight:900}

/* ---------- 私たちの考え ---------- */
.belief .body{grid-column:1 / span 10}
.statement{font-size:clamp(23px,3vw,42px);line-height:1.75}
/* 目的の一行。表示枠の幅を基準に字を決め、どの画面でも一行の長さが枠の約 1.4 倍になるようにする。
   読み進める間に文頭から文末まで流れ切る（移動量は site.js が実測して決める） */
.marquee{grid-column:1 / -1;margin:var(--s12) 0 var(--s8);overflow:hidden;container-type:inline-size}
.track{display:flex;white-space:nowrap;font-weight:900;font-feature-settings:"palt";font-size:9vw;font-size:clamp(30px,9.6cqw,116px);line-height:1.25;color:var(--ink);will-change:transform}
.track span{display:block;flex:none}
.aim{grid-column:7 / span 6;font-size:17px;line-height:2}
/* 動かさないとき（動きを減らす設定・JS なし）は折り返して全文を見せる */
html:not(.js) .track{display:block;white-space:normal;font-size:clamp(28px,5vw,64px)}
@media (max-width:900px){.belief .body,.aim{grid-column:1 / -1}.marquee{margin:var(--s8) 0 var(--s6)}}

/* ---------- 提供するもの ---------- */
.set .pinfig{grid-column:1 / span 5;position:sticky;top:calc(var(--hd) + 14vh);align-self:start}
.set .steps{grid-column:7 / span 6}
.set .head{margin-bottom:var(--s12)}
.set .head p{margin-top:var(--s3);max-width:none}
.disc{opacity:0;transition:opacity .5s ease}
.d-people,.d-road{fill:var(--ink)}
.d-ai{fill:var(--blue)}
#setStage[data-active="people"] .d-people,#setStage[data-active="road"] .d-road,#setStage[data-active="ai"] .d-ai{opacity:1}
/* 三つが揃った状態: 全部が点き、円の上を点が走り出す */
#setStage[data-active="all"] .disc{opacity:1}
#setStage .dot{opacity:0;transition:opacity .5s ease}
#setStage[data-active="all"] .dot{opacity:1}
.set h2 .together{display:block;margin-top:var(--s3);font-size:.5em;font-weight:700;letter-spacing:.04em;line-height:1.6}
.set .legend div b{transition:color .4s}
.step{padding:var(--s8) 0;border-top:1px solid var(--line);min-height:46vh;transition:opacity .45s ease}
.js .step{opacity:.25}
.js .step.on{opacity:1}
.step h3{font-size:clamp(32px,3.8vw,56px);font-weight:900;font-feature-settings:"palt";line-height:1.3}
.step p{margin-top:var(--s2);font-size:17px}
.step .layer{display:block;margin-bottom:var(--s2);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--mute)}
.set .note{word-break:auto-phrase;grid-column:auto;margin-top:0;padding-top:var(--s6);border-top:1px solid var(--line);font-size:clamp(18px,1.6vw,22px);font-weight:700;color:var(--ink);line-height:1.7}
@media (max-width:900px){
  .set .pinfig{grid-column:1 / -1;position:static;max-width:440px}
  .set .steps{grid-column:1 / -1;margin-top:var(--s8)}
  .set .head{margin-bottom:var(--s6)}
  .step{min-height:0;padding:var(--s4) 0}
  .js .step{opacity:1}
}

/* ---------- 事業内容 ---------- */
.biz h3{font-size:clamp(24px,2.4vw,32px)}
.items.steps-list{counter-reset:s}
.items.steps-list li{grid-template-columns:32px 1fr}
.items.steps-list li::before{counter-increment:s;content:counter(s);font-family:"Inter";font-weight:700;font-size:15px;color:var(--mute)}
.items.steps-list p{grid-column:2}
.items li{transition:padding-left .3s ease}
.items li:hover{padding-left:var(--s1)}

/* ---------- 行き先（お問い合わせ） ---------- */
.dest{background:var(--blue);color:#fff;text-align:center;padding:var(--s16) 0}
.dest .wrap{position:relative;z-index:1}
.dest .pin{height:76px;width:auto;margin:var(--s8) auto var(--s6)}
.dest .label{color:rgba(255,255,255,.85)}
.dest h2{color:#fff;font-size:clamp(38px,5.6vw,84px);line-height:1.25}
.dest p{margin:var(--s4) auto 0;max-width:34em}
.dest .mail{margin-top:var(--s6);border-bottom-color:rgba(255,255,255,.5)}
.dest .mail:hover{border-bottom-color:#fff}
.dest ::selection{background:#fff;color:var(--blue)}
@media (max-width:900px){.dest{padding:var(--s12) 0}}