/* =========================================================================
 * トップページだけの見た目（index.html が読む）
 *
 *   考え方（Miro・Chrome のトップを操作して決めた。詳しくはメモリ spec-platform-home-design）
 *   - 文字は少なく、1 画面に言いたいことは 1 つ。コア価値は「書き写さなくていい」
 *   - スクロールすると話が進む：止まった画面（.story-pin）の中で 1 行ずつ出てきて、図が入れ替わる
 *   - 見出しには強調する一語を 1 つだけ（.chip）
 *   - 詳しいことは ＋ を押した人にだけ見せる（.bcard）
 *   - 下の要素は、画面に入ったときにふわっと出る（.rv → .in）
 *   - 主な行動（タイミングチャートを描く）は、ついてくる目次からいつでも押せる
 *   - 動きを減らす設定の人には、動かさずに全部を並べて見せる
 * ======================================================================= */

main.home{position:relative; max-width:1180px}
.home-grid{position:absolute; inset:0 0 auto 0; height:900px; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--divider) 1px, transparent 1.2px); background-size:20px 20px;
  -webkit-mask-image:linear-gradient(#000 40%, transparent); mask-image:linear-gradient(#000 40%, transparent)}

/* 強調する一語（Chrome の見出しの色付きの語） */
.chip{display:inline-block; padding:0 .16em; border-radius:.35em; background:var(--sel); color:var(--accent); line-height:1.25}

/* ---- 1 最初の画面 ------------------------------------------------------------ */
.hero3{position:relative; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr); gap:48px; align-items:center; min-height:min(78vh, 720px); padding:24px 0 56px}
.hero3 h1{max-width:none; font-size:clamp(30px, 3.3vw, 48px); line-height:1.18; margin:0 0 16px; letter-spacing:-.01em;
  word-break:keep-all; overflow-wrap:break-word; hyphens:auto}
.hero3 .lead{font-size:clamp(17px, 1.5vw, 21px); line-height:1.5; color:var(--fg); margin:0 0 26px}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 10px}
.btn.big{height:44px; padding:0 22px; font-size:15px; border-radius:22px}
.hero-note{font-size:13px; color:var(--fg-2); margin:0 0 14px}
.resume{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; font-size:13px}
.resume[hidden]{display:none}
.resume > span{color:var(--fg-2)}
.resume a{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid var(--stroke); border-radius:14px;
  background:var(--bg-layer); color:var(--fg); text-decoration:none}
.resume a:hover{background:var(--bg-layer-alt)}
.resume a i{font-style:normal; color:var(--fg-2)}

/* 本物の画面を重ねて見せる（Chrome の最初の画面）。スクロールで少しずつずれる（--p は 0〜1） */
.shots{position:relative; aspect-ratio:16/11; --p:0}
.shots .s{position:absolute; width:78%; height:auto; border-radius:10px; border:1px solid var(--stroke); background:var(--bg-layer);
  box-shadow:0 18px 50px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.shots .s1{right:0; bottom:0; z-index:4; transform:translateY(calc(var(--p) * -30px))}
.shots .s2{right:9%; bottom:14%; z-index:3; transform:translateY(calc(var(--p) * -60px)) rotate(-2deg)}
.shots .s3{right:17%; bottom:28%; z-index:2; transform:translateY(calc(var(--p) * -90px)) rotate(-4deg); opacity:.9}
.shots .s4{right:25%; bottom:42%; z-index:1; transform:translateY(calc(var(--p) * -120px)) rotate(-6deg); opacity:.75}
.scroll-cue{position:absolute; left:50%; bottom:8px; width:26px; height:40px; margin-left:-13px; border:1.5px solid var(--fg-2); border-radius:13px; opacity:.7}
.scroll-cue span{position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--fg-2); animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0); opacity:1} 70%{transform:translateY(12px); opacity:0} 100%{opacity:0}}

/* ---- 2 スクロールで話が進む ---------------------------------------------------- */
/* JS が動くと .story.live になり、高さを取って中身を画面に止める（sticky）。動かないときは、上から順に並べるだけ */
.story{position:relative; margin:0 0 40px}
.story-pin{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center}
.story-text{position:relative}
.story-line{border:0; padding:0; margin:0 0 18px; font-size:clamp(24px, 2.6vw, 38px); line-height:1.3; font-weight:700; max-width:none; letter-spacing:-.01em}
.story-steps{display:none}
.story.live{height:calc(var(--n, 6) * 72vh + 100vh)}
.story.live .story-pin{position:sticky; top:0; height:100vh; min-height:520px}
.story.live .story-text{min-height:12em}
.story.live .story-line{position:absolute; left:0; right:0; top:50%; margin:0; opacity:0; transform:translateY(calc(-50% + 28px)); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
.story.live .story-line.on{opacity:1; transform:translateY(-50%)}
.story.live .story-line.past{transform:translateY(calc(-50% - 28px))}
.story.live .story-steps{display:flex; position:absolute; left:0; right:0; bottom:-5.4em; gap:6px; list-style:none; margin:0; padding:0}
.story-steps li{flex:1 1 0; height:3px; border-radius:2px; background:var(--divider); position:relative}
.story-steps li.on, .story-steps li.done{background:var(--accent)}
.story-steps li span{position:absolute; left:0; top:9px; font-size:11px; color:var(--fg-2); white-space:nowrap; opacity:0; transition:opacity .3s}
.story-steps li.on span{opacity:1}

/* 図の舞台（エディタの窓の形） */
.stage{position:relative; border:1px solid var(--stroke); border-radius:14px; background:var(--bg-layer); box-shadow:0 24px 60px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06); overflow:hidden}
.stage-bar{display:flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-bottom:1px solid var(--divider); background:var(--bg-layer-alt)}
.stage-bar i{width:10px; height:10px; border-radius:5px; background:var(--divider)}
.stage-name{margin-left:10px; font-size:12px; font-weight:600; color:var(--fg-2)}
.stage-body{position:relative; aspect-ratio:36/17; background-image:radial-gradient(var(--divider) 1px, transparent 1.2px); background-size:16px 16px}
.stage-prog{height:3px; background:var(--divider)}
.stage-prog i{display:block; height:100%; width:0; background:var(--accent); transition:width .15s linear}
.scene{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s}
.scene.on{opacity:1; visibility:visible; transition:opacity .4s ease}
.scene svg{display:block; width:100%; height:100%}

/* 図の中身（色はツールの画面に合わせる） */
.scene text{font-family:inherit; fill:var(--fg); font-size:10px}
.scene .t-sub{fill:var(--fg-2); font-size:8px}
.scene .t-mono{font-family:Consolas, "Cascadia Mono", monospace}
.scene .sig{fill:var(--accent); font-weight:700}
.scene .bad{fill:#C42B1C; font-weight:700; font-family:Consolas, "Cascadia Mono", monospace}
.scene .bad-line{fill:none; stroke:#C42B1C; stroke-width:1.2}
.scene .bad-dot{fill:#C42B1C}
.scene .bad-q{fill:#fff; font-weight:700; font-size:13px}
.scene .ok-dot{fill:#1E8E3E}
.scene .ok-mark{fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.scene .copy{fill:none; stroke:var(--fg-2); stroke-width:1.2; stroke-dasharray:2 2}
.scene .link{fill:none; stroke:var(--accent); stroke-width:1.6}
.scene .box{fill:var(--bg-layer); stroke:var(--fg-2); stroke-width:1}
.scene .g-rob{fill:#E8E1FB; stroke:#7B5BD6}
.scene .g-rio{fill:#DDF3EC; stroke:#2E9C7B}
.scene .g-plc{fill:#E1ECFA; stroke:#3D72C4}
.scene .g-hmi{fill:#FBF0DA; stroke:#C38A1C}
.scene .wire{fill:none; stroke:var(--fg-2); stroke-width:1.2}
.scene .wave{fill:none; stroke:var(--fg); stroke-width:1.6; stroke-linejoin:round}
.scene .grid-v{stroke:var(--divider); stroke-width:.6}
.scene .cause{fill:none; stroke:var(--accent); stroke-width:1.2; stroke-dasharray:3 2}
.scene .head{fill:var(--accent)}
.scene .row-bg{fill:var(--bg-layer-alt)}
.scene .cell{fill:var(--bg-layer); stroke:var(--divider); stroke-width:.8}
html[data-theme="dark"] .scene .g-rob, html[data-theme="dark"] .scene .g-rio,
html[data-theme="dark"] .scene .g-plc, html[data-theme="dark"] .scene .g-hmi{fill-opacity:.18}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .scene .g-rob, html:not([data-theme="light"]) .scene .g-rio,
  html:not([data-theme="light"]) .scene .g-plc, html:not([data-theme="light"]) .scene .g-hmi{fill-opacity:.18}
}
/* 図の中で出てくる順番（.scene.play のときだけ動く。--d で遅らせる） */
.scene .pop{opacity:0; transform-box:fill-box; transform-origin:center}
.scene.play .pop{animation:pop .45s cubic-bezier(.2,.8,.3,1.2) forwards; animation-delay:var(--d,0s)}
@keyframes pop{from{opacity:0; transform:scale(.85)} to{opacity:1; transform:none}}
.scene.play .pop.shake{animation:pop .45s cubic-bezier(.2,.8,.3,1.2) forwards, shake .5s ease 1; animation-delay:var(--d,0s), calc(var(--d,0s) + .45s)}
@keyframes shake{25%{transform:translateX(-2px)} 75%{transform:translateX(2px)}}
.scene .draw{stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400)}
.scene.play .draw{animation:draw var(--dur,1.1s) ease-in-out forwards; animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.scene .fade{opacity:0}
.scene.play .fade{animation:fade .4s ease forwards; animation-delay:var(--d,0s)}
@keyframes fade{to{opacity:1}}
.scene .cursor{opacity:0}
.scene.play .cursor{animation:var(--path) var(--cdur,2.6s) ease-in-out forwards; animation-delay:var(--d,0s)}
@keyframes cur3{0%{opacity:0; transform:translate(160px,76px)} 12%{opacity:1; transform:translate(160px,76px)} 88%{opacity:1; transform:translate(260px,76px)} 100%{opacity:0; transform:translate(262px,76px)}}
/* 動かさないとき：出来上がりを見せる */
.still .scene .pop, .still .scene .fade{opacity:1; animation:none}
.still .scene .draw{stroke-dashoffset:0; animation:none}
.still .scene .cursor{display:none}

/* ---- ついてくる目次（Chrome の丸い目次） -------------------------------------- */
.subnav{position:sticky; top:57px;   /* ヘッダが上に貼り付く幅では、その下に出す */ z-index:40; display:flex; justify-content:center; margin:0 0 8px; pointer-events:none}
@media (max-width:960px){ .subnav{top:96px} }
@media (max-width:822px){ .subnav{top:8px} }   /* ここから下はヘッダが流れていく */
.subnav-in{pointer-events:auto; display:flex; align-items:center; gap:2px; padding:4px; border:1px solid var(--stroke); border-radius:24px;
  background:var(--bg-layer); box-shadow:var(--shadow-flyout); max-width:100%; overflow-x:auto; scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{flex:none; display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:16px; color:var(--fg); text-decoration:none; font-size:13px; white-space:nowrap}
.subnav a:hover{background:var(--bg-layer-alt)}
.subnav a[aria-current="true"]{background:var(--sel); color:var(--accent); font-weight:600}
.subnav a.go{background:var(--accent); color:var(--on-accent); font-weight:600; margin-left:4px}
.subnav a.go:hover{background:var(--accent-hover)}
html{scroll-padding-top:64px}

/* ---- 区切りごとの見出し ------------------------------------------------------- */
.home section.blk{padding:72px 0 8px}
.home section.blk > h2, .home section.blk > .tt-pin > h2{max-width:none; margin:0 0 22px; font-size:24px; border:0}
.home section.blk > h2.big, .home section.blk > .tt-pin > h2.big{font-size:clamp(26px, 2.8vw, 40px); line-height:1.25; letter-spacing:-.01em; margin-bottom:30px}

/* 画面に入ったらふわっと出る（Miro） */
.rv{opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
html:not(.js-home) .rv{opacity:1; transform:none}

/* ---- 3 約束：大きな一語と一行。詳しくは ＋ ----------------------------------------- */
.bento{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px}
/* 5 枚：上の段に 3 枚、下の段に広めの 2 枚（隙間を作らない） */
.bento > .bcard{grid-column:span 2}
.bento > .bcard:nth-child(n+4){grid-column:span 3}
.bcard{border-radius:16px; background:var(--bg-layer-alt); overflow:hidden; transition-delay:var(--i,0s)}
.bcard summary{list-style:none; cursor:pointer; position:relative; display:flex; flex-direction:column; gap:6px; min-height:150px; padding:22px 22px 20px}
.bcard summary::-webkit-details-marker{display:none}
.bcard summary b{font-size:clamp(22px, 2vw, 30px); line-height:1.15; letter-spacing:-.01em}
.bcard summary span{font-size:14px; color:var(--fg-2); padding-right:36px}
.bcard .plus{position:absolute; right:16px; bottom:16px; width:30px; height:30px; border-radius:15px; background:var(--accent); transition:transform .25s}
.bcard .plus::before, .bcard .plus::after{content:""; position:absolute; left:8px; right:8px; top:14px; height:2px; background:var(--on-accent); border-radius:1px}
.bcard .plus::after{transform:rotate(90deg)}
.bcard[open] .plus{transform:rotate(45deg)}
.bcard summary:focus-visible{outline:2px solid var(--fg); outline-offset:-2px; border-radius:16px}
.bcard p{margin:0; padding:0 22px 22px; font-size:14px; color:var(--fg-2)}

/* ---- 4 4 つのエディタ ------------------------------------------------------- */
.tt-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 20px}
.tt-tab{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 8px; border:1px solid var(--stroke); border-radius:20px;
  background:var(--bg-layer); color:var(--fg); font:inherit; font-size:14px; cursor:pointer}
.tt-tab .n{display:grid; place-items:center; width:24px; height:24px; border-radius:12px; background:var(--bg-layer-alt); font-size:12px; font-weight:600; color:var(--fg-2)}
.tt-tab[aria-selected="true"]{background:var(--sel); border-color:var(--accent); color:var(--accent); font-weight:600}
.tt-tab[aria-selected="true"] .n{background:var(--accent); color:var(--on-accent)}
.tt-tab:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.tt-panel{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:36px; align-items:center}
.tt-panel[hidden]{display:none}
.tt-panel h3{font-size:24px; margin:0 0 10px}
.tt-panel p{margin:0 0 18px; color:var(--fg-2)}
.tt-panel .acts{display:flex; gap:8px; flex-wrap:wrap}
.tt-shot{display:block; margin:0; border:1px solid var(--stroke); border-radius:12px; overflow:hidden; background:var(--bg-layer); box-shadow:0 18px 50px rgba(0,0,0,.12)}
.tt-shot img{display:block; width:100%; height:auto}
.tt-panel.show{animation:ttin .35s ease}
/* 4 つのエディタもスクロールで進む（JS が .live を付ける）：区間の高さを取り、中身を画面に止めたまま、
   スクロールした量に合わせてタブが 1 → 4 と進む。下の細い線が進み具合 */
.tt-prog{display:none; height:3px; margin:-8px 0 22px; border-radius:2px; background:var(--stroke); overflow:hidden}
.tt-prog i{display:block; width:0; height:100%; background:var(--accent)}
.tt-tour.live{height:calc(4 * 62vh + 100vh)}
.tt-tour.live .tt-pin{position:sticky; top:0; height:100vh; min-height:560px; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; padding-top:72px}
.tt-tour.live .tt-prog{display:block}
.tt-tour.live .tt-panel.show{animation:ttflow .5s cubic-bezier(.2,.8,.2,1)}
@keyframes ttflow{from{opacity:0; transform:translateY(36px)} to{opacity:1; transform:none}}
@keyframes ttin{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---- 5 解説とサンプル：横に流れる帯（Miro のスライドの帯） --------------------------- */
.strip{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 1fr); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:2px 2px 14px; margin:0 -2px; scrollbar-width:thin}
.strip > a{scroll-snap-align:start}
.strip .gcard{min-height:92px; border-radius:14px; justify-content:flex-start}
.strip .gcard span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.strip.samples{grid-auto-columns:minmax(280px, 1fr)}
.strip .scard img{height:130px}

/* ---- 6 よくある質問・最後の一押し ------------------------------------------------- */
.faq details{border-bottom:1px solid var(--divider); padding:4px 0}
.faq summary{cursor:pointer; padding:12px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:8px; height:8px; margin-top:6px; border:solid var(--fg-2); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:0 0 12px; color:var(--fg-2); max-width:70ch}
.endcta{margin:80px 0 12px; padding:56px 20px; border-radius:20px; text-align:center;
  background:radial-gradient(circle at 20% 0%, var(--sel), transparent 60%), var(--bg-layer-alt)}
.endcta h2{margin:0 0 20px; font-size:clamp(26px, 2.8vw, 40px); max-width:none; border:0}
.endcta .hero-cta{justify-content:center}

/* ---- 幅の狭い画面 --------------------------------------------------------- */
@media (max-width:900px){
  .hero3, .tt-panel{grid-template-columns:minmax(0,1fr); gap:28px}
  .hero3{min-height:0; padding-bottom:64px}
  .story-pin{grid-template-columns:minmax(0,1fr); gap:20px}
  .story.live .story-pin{align-content:center}
  .story.live .story-text{min-height:5.6em}
  .story.live .story-steps{bottom:-2.6em}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento > .bcard, .bento > .bcard:nth-child(n+4){grid-column:auto}
  .bento > .bcard:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:520px){
  .hero3 h1{font-size:28px}
  .shots{aspect-ratio:16/12}
  .shots .s{width:84%}
  .shots .s2{right:6%}
  .shots .s3{right:11%}
  .shots .s4{right:16%}
  .story-line{font-size:24px}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bcard summary{min-height:0}
  .story-steps li span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .tt-panel.show{animation:none}
  .scene{transition:none}
  .shots .s{transition:none; transform:none}
  .scroll-cue span{animation:none}
}