/*
  AI Innovation 部 — Light Components

  原本デザイン: docs/index-1-light.html
  design-system.md「6. コンポーネント仕様」の実装。
  値はすべて tokens.css のカスタムプロパティ経由で参照し、ハードコードしない。

  使い方（tokens.css を先に読み込むこと）:
    <link rel="stylesheet" href="design-system/light/tokens.css">
    <link rel="stylesheet" href="design-system/light/components.css">
*/

/* =========================================================
   Base / Reset
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-family-base);
  background:var(--bg);
  color:var(--txt);
  line-height:var(--line-height-base);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* =========================================================
   Layout / Utility
   ========================================================= */
/* コンテンツ幅コンテナ */
.wrap{max-width:var(--content-max-width);margin:0 auto;padding:0 var(--content-padding-x)}
/* セクション（.section-alt でゼブラ配色） */
section{padding:var(--section-padding-y) 0}
.section-alt{background:var(--bg2)}
/* 直前セクションと地続きに見せる（上パディングを詰める） */
.section-flush{padding-top:0}
/* グラデーション文字（見出し内の強調語に部分適用）。
   .gr はヒーロー専用、.gr2〜.gr5 はセクションごとの配色違い */
.gr,.gr2,.gr3,.gr4,.gr5{-webkit-background-clip:text;background-clip:text;color:transparent}
.gr{background-image:var(--gradient-text)}
.gr2{background-image:var(--gradient-text-2)}
.gr3{background-image:var(--gradient-text-3)}
.gr4{background-image:var(--gradient-text-4)}
.gr5{background-image:var(--gradient-text-5)}

/* =========================================================
   6.1 Navigation
   ========================================================= */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.8); /* --bg の80%（backdrop blur用） */
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-height)}
.nav-links{display:flex;gap:30px;font-size:15px;font-weight:600;color:var(--muted)}
.nav-links a:hover{color:var(--txt)}

/* ロゴ: 太字テキスト（強調語のみ --p1） */
.logo{font-weight:900;font-size:20px;letter-spacing:-.5px}
.logo span{color:var(--p1)}
.logo-sm{font-size:17px}

/* =========================================================
   6.2 Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:2px;
  padding:13px 26px;
  border-radius:var(--radius-pill);
  font-size:15px;font-weight:800;
  transition:transform var(--transition-fast),background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast);
}
/* 小サイズ。カードやパネルの中に置くとき用 */
.btn-sm{padding:9px 18px;font-size:13.5px}
/* 末尾の矢印。ホバーで少し前に出る（ラベルは <span class="arw">→</span> で囲む） */
.btn .arw{display:inline-block;margin-left:7px;transition:transform var(--transition-fast)}
.btn:hover .arw{transform:translateX(3px)}
/* プライマリ: グラデーション面 + 白文字 */
.btn-p{background:var(--gradient-btn);color:var(--txt-on-accent);box-shadow:var(--shadow-btn)}
.btn-p:hover{transform:translateY(-2px) scale(1.02)}
/* アウトライン: 太ボーダー。ホバーで反転 */
.btn-o{border:2px solid var(--txt);color:var(--txt)}
.btn-o:hover{background:var(--txt);color:var(--bg)}
/* アクセント面（カラーカード・CTA）の上で使う白ボタン */
.btn-w{background:var(--bg);color:var(--p1);box-shadow:0 8px 20px -10px rgba(13,11,31,.6)}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(13,11,31,.7)}
.btn-wo{border:2px solid rgba(255,255,255,.8);color:var(--txt-on-accent)}
.btn-wo:hover{background:rgba(255,255,255,.16);border-color:var(--bg)}
/* カード内に置くCTA。.k（メタ情報）の下に少し離して置く */
.card-cta{margin-top:18px}

/* 本文中のインラインリンク（<a> でも <button> でも同じ見た目にする）。
   周囲より太く・濃くして、下線とアイコンで「押せる」ことを示す */
.link-inline{
  font:inherit;font-weight:900;color:var(--txt);
  background:none;border:0;padding:0 1px;cursor:pointer;
  border-bottom:2px solid var(--p2);
  transition:color var(--transition-fast),border-color var(--transition-fast);
}
.link-inline::after{content:"↗";font-size:.8em;margin-left:.25em;opacity:.8}
.link-inline:hover{color:var(--p2)}
.link-inline:focus-visible{outline:2px solid var(--p2);outline-offset:3px;border-radius:var(--radius-sm)}
/* 濃色ブロック（.big）の上では白抜きに */
.big .link-inline{color:var(--txt-on-ink)}
.big .link-inline:hover{color:var(--p2)}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;padding:110px 0 90px;overflow:hidden;background:var(--hero-bg)}

/* 6.3 Pill（ステータスラベル） */
.pill{
  display:inline-block;font-size:14px;font-weight:800;color:var(--p1);
  background:var(--bg2);border:1px solid var(--line);
  padding:8px 16px;border-radius:var(--radius-pill);margin-bottom:28px;
}
h1{font-size:clamp(42px,8vw,88px);line-height:var(--line-height-h1);font-weight:900;letter-spacing:-2px}
.lede{margin-top:28px;font-size:clamp(16px,2vw,21px);color:var(--muted);max-width:620px;font-weight:500}
.hero-cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}

/* 6.6 Marquee tag（キーワードタグ列。4色を順に割り当てる） */
.marquee{margin-top:70px;display:flex;gap:14px;flex-wrap:wrap}
.mtag{
  font-weight:800;font-size:15px;padding:10px 20px;
  border-radius:var(--radius-pill);color:var(--txt-on-accent);
  transition:transform var(--transition-fast);
}
a.mtag:hover{transform:translateY(-2px)}
.m1{background:var(--p1)}
.m2{background:var(--p2)}
.m3{background:var(--p3)}
.m4{background:var(--p4)}

/* =========================================================
   6.10 Section header pattern（eyebrow → s-title → s-sub）
   ========================================================= */
.eyebrow{font-size:14px;font-weight:900;letter-spacing:1px;color:var(--p2);text-transform:uppercase}
.s-title{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:-1px;margin-top:10px;line-height:var(--line-height-heading)}
.s-sub{color:var(--muted);margin-top:16px;max-width:640px;font-size:17px}

/* =========================================================
   6.5 Card（カラーカード）
   ========================================================= */
.cards{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-grid)}
.cards-3{grid-template-columns:repeat(3,1fr)} /* 3カラム版 */
.card{
  border-radius:var(--radius-lg);padding:40px 34px;
  color:var(--txt-on-accent);position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform var(--transition-base),box-shadow var(--transition-base);
}
/* 右上の光。平坦なグラデーション面に奥行きを与える装飾で、内容は持たない */
.card::before{
  content:"";position:absolute;z-index:0;top:-120px;right:-80px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,255,255,.26),rgba(255,255,255,0) 68%);
}
.card > *{position:relative;z-index:1} /* 装飾より前面に */
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.c1{background:var(--gradient-card-1)}
.c2{background:var(--gradient-card-2)}
.c3{background:var(--gradient-card-3)}
.c4{background:var(--gradient-card-4)}
.card .n{font-size:13px;font-weight:900;letter-spacing:1.5px;opacity:.7}  /* 採番 */
/* 右上のラベル（英語の呼称など。任意）。採番と同じ高さに揃うよう、
   カードの padding（40px 34px）から逆算した位置に絶対配置する。
   .card > * の position:relative に勝たせるため .card 付きで指定する */
.card .card-tag{
  position:absolute;top:35px;right:32px;z-index:1;
  padding:6px 14px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:900;letter-spacing:.06em;
  color:var(--txt-on-accent);
  background:var(--panel-on-accent);
  border:1px solid var(--line-on-accent);
  backdrop-filter:blur(6px);
}
.card h3{font-size:26px;font-weight:900;margin-top:10px;letter-spacing:-.5px}
.card p{margin-top:14px;font-size:15.5px;line-height:1.75;opacity:.95}
/* メタ情報（# 区切り）。細字で、上の区切り線で本文と分ける */
.card .k{
  margin-top:24px;padding-top:16px;border-top:1px solid var(--line-on-accent);
  font-size:13px;font-weight:400;opacity:.9;
}

/* =========================================================
   6.4 Inverted block（.big — 濃色の強調ブロック）
   ========================================================= */
.big{
  background:var(--ink);color:var(--txt-on-ink);
  border-radius:var(--radius-xl);padding:70px 48px;text-align:center;
  margin-top:20px; /* .section-flush と併用したときの微調整 */
}
.bigrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-stats)}
/* ホバー: 見た目は据え置きで、反応だけ返す（カード群と同じ「浮く」動き）。
   数字は少し大きくなり、グラデーションの色で発光する */
.bigrow > *{transition:transform var(--transition-base)}
.bigrow > *:hover{transform:translateY(-6px)}
.bigrow > * .num{transition:transform var(--transition-base),filter var(--transition-base)}
.bigrow > *:hover .num{transform:scale(1.05);filter:drop-shadow(0 12px 26px rgba(236,72,153,.45))}
.big .num{font-size:clamp(48px,9vw,92px);font-weight:900;letter-spacing:-2px;line-height:1}
/* 項目名と説明。<b>/<small> ではなく h3/p を使う（項目名を見出しとして読み上げに乗せるため）。
   **セレクタは .bigrow に閉じる。** .big p にすると、同じブロック内のリード文（.s-sub も <p>）まで
   拾って font-size が 17px → 15px に上書きされてしまう */
.bigrow h3{font-size:20px;font-weight:900;letter-spacing:-.3px;margin-top:12px}
.bigrow p{color:var(--muted-on-ink);font-size:15px;font-weight:600;margin-top:10px}
/* .big 内に 6.10 のセクション見出しパターンを置く場合の配色・配置調整 */
.big .eyebrow{color:var(--p3)}
.big .s-title{margin-bottom:16px}
.big .s-sub{color:var(--muted-on-ink);margin:0 auto 56px}

/* =========================================================
   6.7 Feature panel（.why / .w — 淡色パネル）
   ========================================================= */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-feat);margin-top:56px}
/* 面は --bg 固定。--panel だと .section-alt（--bg2）上で地色と同化して埋もれる */
.why .w{
  --acc:var(--p1);
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:34px 32px;
  box-shadow:var(--shadow-panel);
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-fast);
}
.why .w:nth-child(2){--acc:var(--p2)}
.why .w:nth-child(3){--acc:var(--p4)}
.why .w:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--acc)}
/* 絵文字アイコン。単体で置くと浮くので、アクセント色のティントを敷いた枠に載せる */
.why .w .e{
  display:grid;place-items:center;width:54px;height:54px;
  border-radius:var(--radius-sm);font-size:26px;line-height:1;
  background:var(--bg2);
  background:color-mix(in srgb,var(--acc) 14%,var(--bg));
}
.why .w .n{font-size:15px;font-weight:900;color:var(--acc)}  /* 採番ラベル（絵文字の代替） */
/* 見出しは h3。セクション見出し（h2）の1段下で、カード（.card h3）と同じ階層 */
.why .w h3{font-size:20px;font-weight:900;margin:20px 0 10px;letter-spacing:-.3px}
.why .w p{color:var(--muted);font-size:15px}

/* =========================================================
   6.14 Catalog（分類見出し＋項目リスト）
   カードに収まらない量の項目を、分類ごとに一覧で見せるための構成。
   分類ごとに .cat-p1〜.cat-p4 でパレット色を割り当て、配下の
   バッジ・罫・タグ・ラベルがすべて --cat / --cat-2 を参照する
   ========================================================= */
.catalog{margin-top:56px}
/* 分類は1枚のパネル。畳んだときも枠が残るので、見出しだけが並んでも境界が見える。
   scroll-margin-top は、着地点が sticky な nav と .cat-nav の下に潜らないように */
.cat-group{
  --cat:var(--p1);--cat-2:var(--p1-light);scroll-margin-top:calc(var(--sticky-top) + 76px);
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:var(--shadow-panel);
  transition:border-color var(--transition-fast);
}
.cat-group + .cat-group{margin-top:12px}
.cat-group:has(> .cat-head:hover){border-color:var(--cat)}
.cat-p1{--cat:var(--p1);--cat-2:var(--p1-light)}
.cat-p2{--cat:var(--p2);--cat-2:var(--p2-light)}
.cat-p3{--cat:var(--p3);--cat-2:var(--p3-light)}
.cat-p4{--cat:var(--p4);--cat-2:var(--p4-light)}

/* 分類見出し（= <summary>。クリックで開閉するトグル）:
   採番バッジ → 見出し → 系統名 → 右端に開閉シェブロン。罫線は引かない */
.cat-head{
  display:flex;align-items:center;gap:14px;
  cursor:pointer;user-select:none;
  list-style:none; /* 標準の三角マーカーを消す（Safari は ::-webkit-details-marker） */
  padding:18px 24px;
  border-radius:var(--radius-md); /* パネルの角に合わせる。開くと下側は角なし */
  transition:background var(--transition-fast);
}
.cat-head::-webkit-details-marker{display:none}
/* ホバーは分類色の薄いティント。--bg2 を使うと .section-alt の地色と同化して穴に見える */
.cat-head:hover{background:color-mix(in srgb,var(--cat) 7%,var(--bg))}
.cat-head:focus-visible{outline:2px solid var(--cat);outline-offset:2px}
/* 開閉シェブロン。閉=下向き、開=上向き */
.cat-head::after{
  content:"";flex:none;margin-left:auto;width:9px;height:9px;
  border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);
  transform:translateY(-3px) rotate(45deg);
  transition:transform var(--transition-base),border-color var(--transition-fast);
}
.cat-head:hover::after{border-color:var(--cat)}
.cat-group[open] > .cat-head{border-radius:var(--radius-md) var(--radius-md) 0 0}
.cat-group[open] > .cat-head::after{transform:translateY(1px) rotate(-135deg)}
/* 開いたときに中身をふわりと出す（閉じるときは即時） */
.cat-group[open] > .cat-item{animation:cat-open var(--transition-base) ease both}
@keyframes cat-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .cat-group[open] > .cat-item{animation:none}
}
/* 採番バッジ（見出し・目次で共用） */
.cat-head .n,.cat-nav a .n{
  flex:none;display:grid;place-items:center;
  min-width:38px;height:26px;padding:0 10px;
  border-radius:var(--radius-pill);
  background:linear-gradient(150deg,var(--cat),var(--cat-2));
  color:var(--txt-on-accent);font-size:13px;font-weight:900;letter-spacing:.5px;
}
.cat-head h3{font-size:23px;font-weight:900;letter-spacing:-.5px}
.cat-head .sub{font-size:14px;font-weight:800;color:var(--muted)}

/* 目次（分類へのアンカーリンク列）。sub と同じく .cat-p1〜4 で色を割り当てる */
/* 既定色は親に置く。a 側に書くと詳細度で .cat-p2〜4 に勝ってしまい色が反映されない。
   カタログをスクロールする間ずっと見えるよう sticky。--wrap の中に居るので
   セクションを抜ければ自然に外れる。半透明＋blur は nav と同じ処理 */
.cat-nav{
  position:sticky;top:var(--sticky-top);z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:26px -12px 0;padding:10px 12px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.85); /* --bg の85% */
  backdrop-filter:blur(10px);
  --cat:var(--p1);--cat-2:var(--p1-light);
}
.cat-nav a{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 13px 4px 5px;border-radius:var(--radius-pill);
  background:var(--bg2);border:1px solid var(--line);
  font-size:11.5px;font-weight:900;letter-spacing:-.2px;line-height:1.5;
  transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
.cat-nav a .n{min-width:26px;height:18px;padding:0 7px;font-size:9.5px;letter-spacing:.3px}
.cat-nav a:hover{border-color:var(--cat);transform:translateY(-2px);box-shadow:0 6px 16px rgba(13,11,31,.08)}
/* 一括開閉ボタン。目次の右端に寄せ、分類チップとは枠色で区別する */
.cat-toggle{
  margin-left:auto;
  padding:5px 15px;border-radius:var(--radius-pill);
  border:1px solid var(--p1);background:var(--bg2);color:var(--p1);
  font:inherit;font-size:11.5px;font-weight:900;letter-spacing:-.2px;line-height:1.5;
  cursor:pointer;
  transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);
}
.cat-toggle:hover{background:var(--p1);color:var(--txt-on-accent);transform:translateY(-2px)}
.cat-toggle:focus-visible{outline:2px solid var(--p1);outline-offset:2px}

/* 項目: 名称+説明／タグ／ラベルの3カラム。パネル内の行として、上罫だけで区切る */
.cat-item{
  /* 3列目は固定幅。auto にするとラベルの文字数で列位置が行ごとにずれる */
  display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,1.45fr) 200px;
  align-items:center;column-gap:22px;row-gap:10px;
  border-top:1px solid var(--line);padding:18px 24px;
  box-shadow:inset 3px 0 0 0 transparent; /* ホバーで出る左端のアクセント */
  transition:background var(--transition-fast),box-shadow var(--transition-fast);
}
.cat-item:hover{
  background:color-mix(in srgb,var(--cat) 5%,var(--bg));
  box-shadow:inset 3px 0 0 0 var(--cat);
}
.cat-item:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}
.cat-item .name{font-size:16px;font-weight:900;letter-spacing:-.3px}
.cat-item .desc{margin-top:4px;font-size:14.5px;color:var(--muted);line-height:1.5}

/* 技術タグ（チップ列）。分類色の淡いティント */
.cat-tags{display:flex;flex-wrap:wrap;gap:6px}
.cat-tags span{
  font-size:12.5px;font-weight:800;line-height:1.6;
  padding:3px 11px;border-radius:var(--radius-pill);
  color:var(--txt);background:var(--bg2);
  background:color-mix(in srgb,var(--cat) 13%,var(--bg));
}
/* 右端のラベル（人材の系統）。分類色の塗り */
.cat-item .role{
  justify-self:end;white-space:nowrap;
  font-size:12.5px;font-weight:900;letter-spacing:-.2px;
  color:var(--txt-on-accent);background:linear-gradient(150deg,var(--cat),var(--cat-2));
  padding:6px 14px;border-radius:var(--radius-pill);
}

/* =========================================================
   6.12 Figure（図版パネル）
   ========================================================= */
.figure{
  margin-top:56px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px;
}
.figure img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
/* 字面は .s-sub（セクション補足文）と揃える。図版の説明も本文の一部として読ませる */
.figure figcaption{margin-top:18px;color:var(--muted);font-size:17px;text-align:center}
/* 図版より前に置く導入文のとき。.figure の margin-top と同じ値を下に取り、
   カード群と図版のあいだの余白の中央に文字が来るようにする */
.figure > figcaption:first-child{margin:0 0 56px}
/* 枠なし版: 図版自身が面と余白を持つ場合に使う。枠・背景を外し、
   padding 分だけ図版をコンテンツ幅いっぱいに広げる */
.figure-flush{background:none;border:0;border-radius:0;padding:0}
.figure-flush img{border-radius:0}

/* =========================================================
   6.8 CTA セクション
   ========================================================= */
.cta{
  background:var(--gradient-cta);border-radius:var(--radius-2xl);
  padding:72px 40px;text-align:center;color:var(--txt-on-accent);
  position:relative;overflow:hidden;
}
.cta h2{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:-1px;line-height:var(--line-height-heading)}
.cta p{margin-top:16px;font-size:18px;opacity:.95}
.cta .hero-cta{justify-content:center;margin-top:34px}

/* =========================================================
   6.13 Modal（<dialog> + iframe のオーバーレイ）
   挙動は light/dark 共用の ../components.js（data-modal-open / data-modal-close）
   ========================================================= */
/* 寸法は幅・高さを直接指定せず、四方を --modal-gap だけ内側に寄せて決める（inset モデル）。
   これで上下の余白が左右と必ず同じ値になり、縦に長い内容でも高さを使い切れる。
   上の `*{margin:0}` reset がブラウザ標準の `margin:auto` を打ち消すため、
   上限で縮んだときの中央寄せ用に margin:auto を明示する */
.modal{
  --modal-gap: var(--content-padding-x); /* 四方の余白。上下＝左右 */

  position:fixed;inset:var(--modal-gap);margin:auto;
  width:auto;height:auto;
  /* 既定は none = 余白を除いた全面。箇所ごとに小さくしたいときだけ上限を入れる */
  max-width:var(--modal-max-width);
  max-height:var(--modal-max-height);
  border:0;padding:0;overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--bg);color:var(--txt);
  box-shadow:var(--shadow-modal);
}
.modal::backdrop{background:var(--overlay);backdrop-filter:blur(3px)}
/* モーダル表示中は背後のページをスクロールさせない */
body:has(dialog[open]){overflow:hidden}

.modal-in{display:flex;flex-direction:column;height:100%}
/* ヘッダ: 左にタイトル、右に補助リンクと閉じるボタン */
.modal-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px 16px 24px;border-bottom:1px solid var(--line);
}
.modal-title{font-size:18px;font-weight:900;letter-spacing:-.3px}
.modal-actions{display:flex;align-items:center;gap:16px}
.modal-link{font-size:14px;font-weight:800;color:var(--p1)}
.modal-link:hover{text-decoration:underline}
.modal-close{
  flex:none;display:grid;place-items:center;
  width:36px;height:36px;border:0;border-radius:var(--radius-pill);
  background:var(--bg2);color:var(--txt);cursor:pointer;
  font:inherit;font-size:15px;font-weight:800;line-height:1;
  transition:background var(--transition-fast),color var(--transition-fast);
}
.modal-close:hover{background:var(--txt);color:var(--bg)}
/* showModal() の初期フォーカスは autofocus で .modal-close に置く。
   そのまま既定のフォーカスリングが出るとリンクの角枠のように見えるため、意図した形に整える */
.modal-close:focus-visible{outline:2px solid var(--p1);outline-offset:2px}
.modal-link:focus-visible{outline:2px solid var(--p1);outline-offset:3px;border-radius:var(--radius-sm)}
/* 本文: iframe を残り高さいっぱいに敷く（min-height:0 が無いと flex 内で縮まない） */
.modal-body{flex:1;min-height:0;background:var(--bg2)}
.modal-frame{display:block;width:100%;height:100%;border:0;background:var(--bg)}

/* --- .modal-doc: iframe ではなく文章を直接入れる版 --- */
.modal-doc{--modal-max-width:820px}
.modal-doc .modal-body{background:var(--bg);overflow-y:auto;padding:36px 36px 44px}
.modal-doc .doc{max-width:600px;margin:0 auto}
.modal-doc h3{
  font-size:22px;font-weight:900;letter-spacing:-.4px;
  padding-bottom:12px;border-bottom:2px solid var(--txt);
}
.modal-doc h3 ~ h3{margin-top:52px}
.modal-doc p{margin-top:18px;font-size:15.5px;color:var(--muted)}
.modal-doc p b{color:var(--txt);font-weight:900} /* 本文中の強調は地の文より濃く */
/* 冒頭の定義文。本文より一段強い */
.modal-doc .doc-lead{font-size:17px;color:var(--txt)}
/* 4つの価値。1行ずつ罫で区切り、本文より大きく見せる */
.modal-doc .doc-values{list-style:none;margin-top:22px}
.modal-doc .doc-values li{
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:17px;color:var(--txt);
}
.modal-doc .doc-values b{font-weight:900}
/* 12の原則。採番は 01〜12 のゼロ埋めで --p1 */
.modal-doc .doc-principles{list-style:none;margin-top:20px;counter-reset:doc-p}
.modal-doc .doc-principles li{
  position:relative;padding:14px 0 14px 46px;
  border-top:1px solid var(--line);font-size:15.5px;
}
.modal-doc .doc-principles li::before{
  counter-increment:doc-p;content:counter(doc-p,decimal-leading-zero);
  position:absolute;left:0;top:16px;
  font-size:13px;font-weight:900;letter-spacing:.5px;color:var(--p1);
}
/* 署名・著作権表記・出典 */
.modal-doc .doc-sign{font-size:13.5px;line-height:1.9}
.modal-doc .doc-copy{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;
}
.modal-doc .doc-src{margin-top:28px;font-size:13px}
.modal-doc .doc-src a{color:var(--p1);font-weight:800}
.modal-doc .doc-src a:hover{text-decoration:underline}

/* =========================================================
   6.15 Reveal（スクロール連動のフェードイン）
   挙動は ../components.js（data-reveal → .is-visible）。
   初期状態は JS が動くときだけ当てたいので .js-reveal 配下に限定する
   ========================================================= */
.js-reveal [data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1);
}
.js-reveal [data-reveal].is-visible{opacity:1;transform:none}
/* 同じ塊の中で順に出したいときの段差（1〜4） */
.js-reveal [data-reveal="1"]{transition-delay:.08s}
.js-reveal [data-reveal="2"]{transition-delay:.16s}
.js-reveal [data-reveal="3"]{transition-delay:.24s}
.js-reveal [data-reveal="4"]{transition-delay:.32s}

/* =========================================================
   6.9 Footer
   ========================================================= */
footer{padding:50px 0;color:var(--muted);font-size:15px;border-top:1px solid var(--line)}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.foot-in a:hover{color:var(--p1)}

/* =========================================================
   Breakpoint — md (max-width:820px)
   ========================================================= */
@media(max-width:820px){
  .nav-links{display:none}
  .cards,.cards-3,.why,.bigrow{grid-template-columns:1fr}
  /* カタログは1カラム化し、右端ラベルを左寄せに戻す */
  .cat-item{grid-template-columns:1fr;row-gap:12px;padding:18px 20px}
  .cat-item .role{justify-self:start}
  .cat-head{padding:16px 20px;gap:10px}
  .cat-head h3{font-size:20px}
  .cat-toggle{margin-left:0} /* 折り返して左端に来るため、右寄せは解く */
  .bigrow{gap:36px}
  .big{padding:48px 28px}
  .figure{padding:16px}
  .figure-flush{padding:0}
  .cta{padding:56px 24px}
  /* モーダルは全画面化し、補助リンクは省く */
  .modal{inset:0;max-width:none;max-height:none;border-radius:0}
  .modal-head{padding:12px 14px 12px 18px}
  .modal-doc .modal-body{padding:24px 20px 32px}
  .modal-link{display:none}
}