@charset "UTF-8";

/* ---------- lab.css — カタログ専用の差分（bbb.css の後に読む） ----------
   共通は bbb.css が持つ。ここに書いてよいのは lab.html でしか使わないものだけ。
   bbb.css と同名セレクタを置くと見本と本番がズレる（2026-08-10 に解消済み）。

   目次
   1. Basic Elements      → bbb.css
   2. Typography          bbb.css に無い段だけ
   3. Color               → bbb.css
   4. Spacing utilities
   5. Grid System
   6. Header & Navigation → bbb.css
   7. Layout
   8. Footer
   9. Components          仕切り線 / Card / Button / 地色・文字色
  10. Animation Library   出現演出
  11. Tables
  12. Forms
  13. Diagrams            図解見本帳
   ---------------------------------------------------------------- */

/* ------------------------------------------------------------------ 
1. Basic Elements
------------------------------------------------------------------ */
/* 基本要素（* / body / a / img / p）は bbb.css が唯一の実装。lab は上書きを持たない。 */

/* ------------------------------------------------------------------ 
2. Typography utilities
------------------------------------------------------------------ */
/* 文字サイズは全段 boot.css に集約済み（.big8〜.big100 / .small* / .clamp*）。
   lab はサイズ段を持たない。追加が要るときは boot 側に足す */

/* 定規レイアウト: [クラス名][px値][サンプル文字] の3列。文字の高さ自体が階段になる。
   line-height:1 は必須（各クラスの行間差がそのまま隙間のムラになる）。
   列の中身は要素順で決まるので子クラスは作らない */
/* 列は3本固定（ラベル幅を px で固定＝全行で「可変 / 50px」の位置が揃う）。
   狭幅ではサンプルだけ次の行へ落とす。3列目を 1fr にしておかないと
   行が 100px 程度に縮み、サンプルの置き場が無くなる */
.type-row { display: grid; grid-template-columns: 64px 36px 1fr; gap: 4px 12px; align-items: baseline; line-height: 1; padding: 10px 0; border-bottom: 1px solid #eaecef; }
.type-row:last-child { border-bottom: 0; }

/* サンプル文字は絶対に折り返さない（折り返すと階段が壊れて縦に伸びる） */
.type-row> :last-child { grid-column: 1 / -1; white-space: nowrap; }

/* ------------------------------------------------------------------ 
3. Color utilities
------------------------------------------------------------------ */
/* 色クラス（.gray / .green / .bg-* 等）は bbb.css。lab は上書きを持たない */

/* ------------------------------------------------------------------ 
4. Spacing utilities (px統一スケール: 0 / 4 / 8 / 16 / 24 / 48 / 64 / 96 / 128 / 192 = 0〜9段)
------------------------------------------------------------------ */

/* 段は「必要になったものだけ足す」（web-common §3）。未使用の段は置かない */

/* 入れ子 row を h-100 で伸ばす時、上の負マージン分(gutter-y)だけ下端が足りなくなるのを補正 */
.row[class*="g-"].h-100 { height: calc(100% + var(--gutter-y)); }

/* ------------------------------------------------------------------ 
6. Header & Navigation
------------------------------------------------------------------ */
/* ヘッダーは bbb.css が唯一の実装。lab は上書きを持たない。
   ここに独自定義を書くと見本と本番でヘッダーがズレる（実際にズレていた 2026-08-10）。 */

/* ------------------------------------------------------------------ 
7. Layout
------------------------------------------------------------------ */
/* fixed ヘッダー下に潜らない開始位置（bbb .top-contents と同じ 100px/PC120px）。
   main の padding に持たせると main 自身は背景を持たないため、その帯だけ body の
   白が出る（先頭 section が bg-light だと段差になる）。余白は section が持つ
   という原則どおり先頭 section に寄せ、既定の 48px を足した値を書く。 */
.main > section:first-child { padding-top: 148px; }

/* ------------------------------------------------------------------ 
8. Footer
------------------------------------------------------------------ */

.footer hr { margin: 16px 0; border: 0; border-top: 1px solid; opacity: 0.25; }

/* ------------------------------------------------------------------ 
9. Components
------------------------------------------------------------------ */

/* 点線の仕切り */
.b-hr-dot { border: 0; border-top: 2px dotted currentColor; margin: 24px 0; opacity: 0.7; }

/* ---------- Card & 見出し装飾部品（クラスを足すだけ／外すだけ） ---------- */
/* .card / .card-label / .card-hover と価格表（.plan-card 一式）は bbb.css。
   lab はカタログ専用の配置調整だけを持つ */

#brand-panel .card { padding: 16px; }

/* 枠線を持たないカード。グレー地（.bg-light）の上でのみ使う＝地との明度差と弱い影で面を立てる。
   .card / .price-card の border を消すため、両方より後に置く */
.card-shadow { border-color: transparent; box-shadow: 0 1px 3px #e2e4e8; }

/* lab はダミーリンクの見本ページ。href を持たない a も押せる見た目にする */
a:not([href]) { cursor: pointer; }
.swatch { display: inline-block; width: 64px; height: 64px; border-radius: 8px; border: 1px solid #dee2e6; }
.st-green-hover { background: #73e000; border-color: #73e000; color: #fff; }
.st-green-active { background: #4d9d24; border-color: #4d9d24; color: #fff; }
.st-gray-fill { background: #121212; border-color: #121212; color: #fff; }
section { padding-top: 48px; padding-bottom: 48px; }

/* .btn と併記されたときだけ塗りになる（単体は文字色） */
.btn.green { color: #fff; background-color: #66CC33; border-color: #66CC33; }
.btn.green:hover { color: #fff; background-color: #73e000; border-color: #73e000; }
.btn.green:active { color: #fff; background-color: #4d9d24; border-color: #4d9d24; }
.btn.gray { color: #121212; background-color: transparent; border-color: #121212; }

/* ギザギザ丸（シール）の可否バッジ。1枚のマスクに「外形＋記号」を入れ、fill-rule evenodd で
   記号を穴として抜く。穴からカードの地（白）が出る＝ベタ塗りの緑に白い記号が乗って見える */
.ico-patch-check { color: #66CC33; -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01zM11.06 5.79a.75.75 0 0 1 0 1.061l-3.712 3.712a.75.75 0 0 1-1.06 0L4.44 8.714A.75.75 0 0 1 5.5 7.653l1.318 1.318 3.182-3.182a.75.75 0 0 1 1.06 0z'/%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01zM11.06 5.79a.75.75 0 0 1 0 1.061l-3.712 3.712a.75.75 0 0 1-1.06 0L4.44 8.714A.75.75 0 0 1 5.5 7.653l1.318 1.318 3.182-3.182a.75.75 0 0 1 1.06 0z'/%3e%3c/svg%3e"); }

/* Easing pickup タイル（easings.net 風）。
   列は 140px 以上で自動的に本数が決まり、余りは各列が分け合う＝右端に隙間が残らない */
.ease-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.ease-tile { position: relative; padding: 12px; background: #f8f9fa; color: #121212; border-radius: 8px; }

/* viewBox は縦160・横100。既定の meet だと高さ56pxに合わせて幅35pxまで縮み、
   タイルの横幅が余る。preserveAspectRatio="none" で横だけ伸ばし、95px（=約2.7倍）で止める */
/* 曲線の始点・終点は viewBox の境界線上にあるため、既定の overflow:hidden だと
   線幅の外側半分が切られて先端だけ細く見える。はみ出しを許可して均一な太さに保つ */
.ease-curve { display: block; overflow: visible; width: 100%; max-width: 95px; height: 56px; margin: 0 auto; }

/* 横だけ伸ばすと線幅も横方向に太る。線は画面px固定にして均一に保つ */
.ease-curve path { vector-effect: non-scaling-stroke; stroke-width: 2; }
.ease-track { position: relative; height: 10px; margin: 8px 0; }

/* 移動は left で行う。タイル幅が可変になったため、transform の固定px では
   端まで届かない／はみ出すが起きる。calc(100% - 点の直径) なら常に右端で止まる */
.ease-dot { position: absolute; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #66CC33; transition: left 1s; }
.ease-tile:hover .ease-dot { left: calc(100% - 10px); }
[data-ease="bbb-hover"] .ease-dot { transition: left 1.2s cubic-bezier(0.0, 0.7, 0.0, 1.0); }
.ease-tile[data-ease="bbb-hover"]:hover .ease-dot { transition: left 0.12s cubic-bezier(0.2, 0.8, 0.2, 1.0); }
[data-ease="bbb-open"] .ease-dot { transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
[data-ease="linear"] .ease-dot { transition-timing-function: linear; }
[data-ease="ease"] .ease-dot { transition-timing-function: ease; }
[data-ease="ease-out"] .ease-dot { transition-timing-function: ease-out; }
[data-ease="ease-in"] .ease-dot { transition-timing-function: ease-in; }
[data-ease="ease-in-out"] .ease-dot { transition-timing-function: ease-in-out; }
[data-ease="ease-out-expo"] .ease-dot { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* =========================================================
   10. Animation Library（出現演出）
   隠す指定は必ず .wow を頭に付ける（.wow.t-up 等）。
   付けないと .wow の書き忘れで中身が消えたまま戻らない
   ========================================================= */

/* ---------- 文字 x4 ---------- */

.t-up { display: block; overflow: hidden; }
.wow.t-up .ani-i { display: block; transform: translateY(110%); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.wow.t-up.animated .ani-i { transform: translateY(0); }

/* .t-char: 1文字ずつ順に出る（bbb.css の text-reveal を移植）。
   JS が中身を <span class="ani-c"> へ分解し、何文字目かを --i で渡す。
   文字数は可変なので nth-child では書けない＝ここだけ calc で遅延を作る。
   欧文は文字単位で改行される点に注意（和文向け） */
.t-char { display: inline-block; }
.wow.t-char .ani-c { display: inline-block; white-space: pre; opacity: 0; transform: translateY(5px); transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i) * 0.03s); }
.wow.t-char.animated .ani-c { opacity: 1; transform: translateY(0); }
.t-band { display: inline-block; padding: 6px 16px; background: #121212; color: #ffffff; }
.wow.t-band { transform: scaleY(0); transform-origin: center bottom; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.wow.t-band.animated { transform: scaleY(1); }
.wow.t-band .ani-i { display: block; opacity: 0; transform: translateY(50%); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; }
.wow.t-band.animated .ani-i { opacity: 1; transform: translateY(0); }

/* ---------- 画像 x4 ---------- */

/* .i-wipe: 下から窓が開く。中の画像は縮みながら戻る＝奥行きが出る。文字の .t-up と同じ思想。
   clip-path は必ず内側（.ani-i）に掛ける。監視対象の .wow 自身に掛けると
   IntersectionObserver が要素の clip も面積に数えるため、面積ゼロ＝発火しない＝
   永久に隠れたまま、という自己ロックになる */
.i-wipe { display: block; overflow: hidden; border-radius: 8px; }
.wow.i-wipe .ani-i { display: block; clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path 1.8s cubic-bezier(0.85, 0, 0.15, 1), transform 1.8s cubic-bezier(0.85, 0, 0.15, 1); }
.wow.i-wipe.animated .ani-i { clip-path: inset(0 0 0 0); transform: scale(1); }
.i-zoom { display: block; }
.wow.i-zoom { opacity: 0; transform: scale(1.12); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.wow.i-zoom.animated { opacity: 1; transform: scale(1); }

/* .i-curtain: 覆っている緑の面が上へ引き上がる。面は実要素 <span class="ani-cover"></span> */
.i-curtain { position: relative; display: block; overflow: hidden; border-radius: 8px; }

/* 覆う面は .wow が付いている時だけ配置する（付け忘れても画像を隠さない） */
.wow.i-curtain .ani-cover { position: absolute; inset: 0; background: #66CC33; transform-origin: center top; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.wow.i-curtain.animated .ani-cover { transform: scaleY(0); }
.wow.i-curtain .ani-i { display: block; transform: scale(1.08); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.wow.i-curtain.animated .ani-i { transform: scale(1); }
.i-blur { display: block; }
.wow.i-blur { opacity: 0; filter: blur(12px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.wow.i-blur.animated { opacity: 1; filter: blur(0); }

/* ---------- 見本タイル ---------- */
.ani-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.ani-tile { position: relative; padding: 16px; background: #f8f9fa; border-radius: 8px; cursor: pointer; }
/* 見本の中身より前面へ。.i-curtain など position 指定を持つ効果は DOM 順で後ろにあるぶん、指定が無いとマークの上に乗る */
.ani-replay { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; z-index: 1; color: #868e96; transition: color 1.2s cubic-bezier(0.0, 0.7, 0.0, 1.0); }
.ani-tile:hover .ani-replay { color: #66CC33; transition: color 0.12s cubic-bezier(0.2, 0.8, 0.2, 1.0); }

/* 回るのはクリックした時だけ＝再生したことの手応え。JS が .ani-spin を付ける */
.ani-replay.ani-spin { animation: ani-spin 0.3s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes ani-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* 見せ場の枠。高さは min で持ち、中身が増えたら伸びる */
.ani-stage { display: flex; align-items: center; justify-content: center; min-height: 140px; margin-bottom: 12px; overflow: hidden; }
.ani-stage img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* 画像を包む効果（.i-wipe / .i-curtain）は幅を枠に決めさせる。
   包み幅を画像に、画像幅を包みに決めさせると循環して寸法が定まらない */
.ani-stage .i-wipe, .ani-stage .i-curtain { width: 100%; }

/* リプレイ時だけ transition を殺して初期状態へ瞬時に戻す（逆再生を見せない） */
.ani-reset, .ani-reset * { transition: none !important; }

/* ------------------------------------------------------------------ 
11. Tables (独自・実使用分のみ / Bootstrap互換)
------------------------------------------------------------------ */

.table> :not(caption)>*>* { padding: 8px 8px; border-bottom: 1px solid #dee2e6; }
.table>thead { vertical-align: bottom; }

/* th はブラウザ既定が中央寄せ。中身の td は左寄せなので列頭だけズレる。左に揃える */
.table th { text-align: left; }

/* .center を付けた table は td が中央寄せになるので、th の左寄せを打ち消して揃える
   （.center は table への指定＝継承なので、th への直接指定に負ける） */
.table.center th { text-align: center; }
.table>tbody { vertical-align: inherit; }
.table-bordered> :not(caption)>* { border-width: 1px 0; border-style: solid; border-color: #dee2e6; }
.table-bordered> :not(caption)>*>* { border-width: 0 1px; border-style: solid; border-color: #dee2e6; }
.table-hover>tbody>tr:hover>* { background-color: #f2f2f2; }

/* 列数が多い表を横スクロールに逃がす（狭幅で崩れる表だけ使う） */
.table-responsive { overflow-x: auto; }

/* =========================================================
   12. Forms (独自・実使用分のみ)
   Portions adapted from Bootstrap v5.3.3 (https://getbootstrap.com)
   Copyright 2011-2024 The Bootstrap Authors / Licensed under MIT
   ========================================================= */

.form-stack { display: flex; flex-direction: column; gap: 24px; }
.form-check+.form-check { margin-top: 8px; }

/* 三角マーカー実要素（Safari はネイティブ三角が出ないため summary 先頭に併置）。開くと90度回転 */
.disclosure .tri { display: inline-block; width: 0; height: 0; margin-right: 8px; border-left: 8px solid #66CC33; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.disclosure[open] .tri { transform: rotate(90deg); }

/* 開閉を高さアニメ（::details-content を直接遷移・JS不要・bbb標準の減速イージング）。
   閉時の content-visibility:hidden も allow-discrete で遅らせ閉じる動きも滑らかに。
   height:auto へ遷移させる interpolate-size は body 側で許可。未対応環境は即開閉にフォールバック。
   速さは block-size の 0.3s を変える */
.disclosure::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.3s; transition-behavior: allow-discrete; }
.disclosure[open]::details-content { block-size: auto; }

/* ---------- Animation (実装済みhover系の流用) ---------- */

/* ------------------------------------------------------------------ 
13. Diagrams（図解見本帳）
------------------------------------------------------------------ */

/* ---------- カードグリッド（1列 → 768px:2列 → 1200px:3列） ---------- */
.diagram-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

/* ---------- 図解カード（1種=1カード、丸ごと削除可能）。外枠は .card d-flex flex-column ---------- */

/* 図解カードの見出し: 欧文（Staatliches）が主役、和文は緑の小さい補足。
   Staatliches はコンデンス体で同じpxだと小さく見えるため一段上の26pxで置く */
.diagram-en { font-size: 26px; letter-spacing: 1px; }
.diagram-ja { color: #66CC33; font-size: 12px; margin-left: 8px; }

/* ---------- ミニ図描画域（高さ固定でカード比率を統一・中央配置） ---------- */
.diagram-fig { height: 200px; margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: center; }
.diagram-fig svg { display: block; height: 100%; max-width: 100%; }
.diagram-fig .donut { height: 150px; }
.diagram-fig>div { width: 100%; }
.diagram-fig .stat { flex: 1 1 0; text-align: center; }
.diagram-fig .table th, .diagram-fig .table td { padding: 6px 8px; }
.diagram-fig .chevron { flex: 1 1 0; padding: 48px 12px 48px 20px; font-size: 12px; }
.diagram-fig .pyramid-level { padding: 8px; }
.diagram-fig .tree-children { gap: 16px; }
.diagram-fig .tree .card { padding: 6px 12px; }
.diagram-fig .roadmap-circle { width: 48px; height: 48px; font-size: 14px; }

/* ---------- カテゴリ1: データ可視化 ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: 16px; }
.stat { flex: 1 1 160px; }
.bar-row+.bar-row { margin-top: 16px; }
.bar-track { height: 8px; background: #f2f2f2; border-radius: 9999px; overflow: hidden; }
.bar-fill { height: 100%; background: #66CC33; border-radius: 9999px; }
.bar-fill-a { width: 82%; }
.bar-fill-b { width: 54%; }
.bar-fill-c { width: 31%; }
.bar-value { float: right; font-weight: 700; }

/* ---------- カテゴリ2: 比較・関係整理 ---------- */
.compare-highlight { background: #f0fbe8; }

/* ---------- カテゴリ3: プロセス・構造 ---------- */
/* 工程リスト（縦）。接続は実要素 .step-line（緑の縦線）で描く */
.step-list { display: flex; flex-direction: column; }
.step-item { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.step-line { width: 2px; height: 16px; background: #66CC33; margin-left: 12px; }
.step-num { background: #66CC33; color: #fff; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.chevron-row { display: flex; }
.chevron { flex: 1 1 0; background: #f2f2f2; color: #121212; padding: 14px 20px 14px 32px; font-weight: 600; text-align: center; margin-left: -14px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.chevron:first-child { margin-left: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.chevron-active { background: #66CC33; color: #fff; }

.pyramid { max-width: 480px; margin: 0 auto; }

/* 中の p は mt-0 必須。lab.css に p のリセットが無くブラウザ既定の margin-top:1em が生きるため、
   align-items:center はマージン込みで中央に置き、文字だけ半分ぶん下へずれる */
.pyramid-level { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #fff; }
.pyramid-level-1 { width: 50%; margin: 0 auto; background: #66CC33; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.pyramid-level-2 { width: 75%; margin: 4px auto 0; background: #495057; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.pyramid-level-3 { width: 100%; margin: 4px auto 0; background: #121212; }
.tree { max-width: 640px; margin: 0 auto; text-align: center; }
.tree-root { display: inline-block; padding: 12px 24px; }
.tree-line { display: block; width: 2px; height: 24px; background: #121212; margin: 0 auto; }
.tree-children { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 32px; position: relative; }

/* 端は左右端の子の中心に合わせる。列幅 =(100% - column-gap*2)/3 なのでその半分。
   子が3つ・column-gap 32px 前提の値で、どちらかを変えたらこの式も直す */
.tree-line-h { position: absolute; top: 0; left: calc((100% - 64px) / 6); right: calc((100% - 64px) / 6); height: 2px; background: #121212; }

/* flex:1 で列を等幅にする。中身の幅任せだとラベルの字数差で中央の子がズレ、
   根からの縦線と .tree-line-h の 16.6%（3等分前提）が両方合わなくなる */
.tree-child { flex: 1; display: flex; flex-direction: column; align-items: center; }

/* ---------- カテゴリ4: 戦略・判断 ---------- */
.roadmap-row { display: flex; justify-content: center; gap: 24px; text-align: center; }
.roadmap-circle { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #66CC33; border: 2px solid #66CC33; background: #fff; position: relative; }
.roadmap-circle-filled { background: #66CC33; color: #fff; }
.roadmap-circle-filled .ico-check { color: #fff; }
.roadmap-circle-current { border: 3px solid #66CC33; }
.roadmap-circle-future { border: 2px dashed #adb5bd; color: #adb5bd; background: #fff; }
.scrub-track { height: 300vh; }
.scrub-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scrub-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scrub-shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.25; }
.scrub-text { position: absolute; top: 42%; left: 0; width: 100%; text-align: center; opacity: 0; will-change: opacity, transform, filter; }
.draw-track { height: 300vh; }
.draw-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 0 20px; overflow: hidden; }

/* 題字を sticky な stage の中に絶対配置＝300vh のトラックを抜けるまで左上に貼り付く（中身のレイアウトには参加しない） */
/* top はヘッダー 100px（.header）を避ける値。これを下げると題字がヘッダーに潜る */
/* width:auto は .container の width:100% 打ち消し。これが無いと left/right が効かず左端が他 section とズレる */
.stage-title { position: absolute; top: 120px; left: 0; right: 0; width: auto; }
.stage-title h2 { margin: 0; }

/* .draw-stage だけ padding: 0 20px を持つので打ち消してビューポート基準に戻す */
.draw-stage .stage-title { left: -20px; right: -20px; }

/* video 側は stage の外（動画の上）から入り、sticky で貼り付いてから動画に重なる */
/* z-index が無いと後続の .scrub-stage に上書きされて題字が動画の裏に隠れる */
.scrub-track > .stage-title { position: sticky; top: 120px; left: auto; right: auto; width: 100%; margin-bottom: 24px; z-index: 1; }
.draw-svg { width: 100%; max-width: 900px; height: auto; }

/* 線は塗らずストロークだけ。dasharray は JS が実長から入れる */
.draw-svg path { fill: none; stroke: #121212; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.draw-svg .draw-accent { stroke: #66CC33; }
.draw-steps { display: flex; width: 100%; max-width: 900px; }
.draw-steps > .draw-label { flex: 1; text-align: center; }
.draw-label { opacity: 0; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; }

/* ------------------------------------------------------------------ 
14. Media
------------------------------------------------------------------ */

@media (max-width: 767px) {
/* カードグリッド: 2列(モバイル)時のカード間ガターを画面端余白(12px)と一致させる。
   横・縦とも12pxに揃え均等グリッドに。md以上は元のガター据え置き */

/* フェーズ進行図は狭幅でも横方向を維持。padding と文字サイズで吸収する */
  .chevron { padding: 12px 12px 12px 24px; font-size: 14px; }
}

@media (min-width: 576px) {
/* =========================================================
   5. Grid System (独自・全カラム / Bootstrap互換)
   Portions adapted from Bootstrap v5.3.3 (https://getbootstrap.com)
   Copyright 2011-2024 The Bootstrap Authors / Licensed under MIT
   ========================================================= */
}

@media (min-width: 768px) {
/* PC はクラス名・px・サンプルを1行の列で揃える（定規として縦のラインが効く） */
  .type-row> :last-child { grid-column: auto; }

  .video-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .ani-grid { grid-template-columns: repeat(2, 1fr); }

  .diagram-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {

  .main > section:first-child { padding-top: 168px; }

}

@media (min-width: 1200px) {

  .ani-grid { grid-template-columns: repeat(4, 1fr); }
  .diagram-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1400px) {

}

@media (prefers-reduced-motion: reduce) {
/* 動きを抑えたい環境では全て最終状態で静止表示 */
  .wow,
  .wow *,
  .ani-replay { transition: none !important; animation: none !important; }

  .t-up .ani-i,
  .t-band,
  .t-band .ani-i,
  .t-char .ani-c,
  .i-wipe .ani-i,
  .i-zoom,
  .i-curtain .ani-i,
  .i-blur { opacity: 1 !important; transform: none !important; filter: none !important; }

  .i-wipe .ani-i { clip-path: none !important; }

  .i-curtain .ani-cover { display: none !important; }
/* 動きを抑えたい環境では全アニメを停止 */
  .card-hover,
  .disclosure .tri,
  .disclosure::details-content { transition: none !important; animation: none !important; }
}