/* =========================================================
   長岡インターンシッププログラム — 学生向けサイト
   "NAZE BLUE" — 明るい紙面に、コーポレートブルーの塗りと
   丸みのある白カードで語るクリーンなデザイン。ヘッダーは
   ロゴの白地とナビの塗り帯を左右に分けた二色構成。写真は
   加工せず、そのままの色でカードや全面ヒーローに使う。
   クラス名・HTML構成は既存のまま。
   ========================================================= */
/* すべての値は /designsystem/tokens/design-tokens.css（Figmaデザインシステムからの転記）
   を参照する。サイト固有のエイリアスのみここで定義し、実値は持たない。 */
:root{
  /* ---- 紙・インク（ベース） ---- */
  --ink:var(--ds-ink-900); --sub:var(--ds-ink-600); --line:var(--ds-border-default);
  --bg:var(--ds-surface-base); --card:var(--ds-surface-white);
  --paper2:var(--ds-surface-soft);
  --ink-800:var(--ds-ink-800);   /* カード見出し・リード */
  --ink-500:var(--ds-ink-500);   /* パンくず・日付・ラベル */
  --divider:var(--ds-border-divider);

  /* ---- ブランドカラー ---- */
  --accent:var(--ds-brand-primary); --accent2:var(--ds-brand-primary-dark); --accent3:var(--ds-brand-primary-light);
  --accent-soft:var(--ds-brand-tint); --accent-tint:var(--ds-brand-tint);
  --fill:#1863D3;   /* .tint内で--accentが白に再定義されても影響されない固定値 */
  --ink-fixed:#12212F; /* 同上：常に濃色 */
  /* トップページ実測：統計ピル・アイコンカード・吹き出し等、.tint内でも常に
     ライトブルー#3D90E1を使う要素用の固定値（--accent3は.tint内で白系に反転するため使えない） */
  --fill-light:#3D90E1;
  /* 英字アイブロー専用のオレンジ（面では使わない／原則2） */
  /* 英字アイブローの色。トップのフレーム実測ではオレンジではなく
     ブランドブルーが使われているため、フレームに合わせる */
  --eyebrow:var(--ds-brand-primary);
  --ink-warm:var(--ds-accent-ink-warm);
  --warm:#8A5A0F; --warm-soft:#faf1de;
  --gold:#b8791a; --good:#146848; --good-soft:#e2f5ec;
  --lock:var(--ds-ink-600); --lock-soft:#eef1f6;

  /* ---- グラデーション：ヒーロー見出しの帯のみ（原則4） ---- */
  --grad-hero:var(--ds-gradient-hero);

  /* ---- 角丸・影 ---- */
  --shadow:var(--ds-shadow-card);
  --shadow-lg:var(--ds-shadow-raised);
  --shadow-primary:var(--ds-shadow-primary);
  --radius:var(--ds-radius-8); --radius-lg:var(--ds-radius-8); --radius-sm:var(--ds-radius-6);
  --radius-tag:var(--ds-radius-4);
  --maxw:var(--ds-content-max); --maxw-wide:var(--ds-canvas-width);

  /* ---- タイポグラフィの骨格 ---- */
  --f-display:700; --f-head:700; --f-body:400; --f-strong:500;
  --track-tight:-.026em; --track-wide:.14em;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:clip;max-width:100%;
  font-family:var(--ds-font-sans),"Noto Sans Mongolian","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height:1.75;font-size:var(--ds-type-body-size);font-weight:500;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:calc(var(--maxw) + 12px);margin:0 auto;padding:0 22px}

/* ---------- バイリンガル出し分け（維持） ----------
   言語トグルはサイトの根幹機構のため !important で固定する。
   （display:block 等を持つコンポーネント側ルールに詳細度で負けて
   日本語とモンゴル語が同時表示される事故を防ぐ） */
html.lang-ja .mn{display:none!important}
html.lang-mn .ja{display:none!important}

/* ---------- 会員限定リンクの出し分け ----------
   未ログイン時は、ヘッダー/フッターから会員限定（🔒）の導線を出さない。
   （見えても開けないリンクを並べない） */
html.is-guest [data-member]{display:none!important}
/* ログイン中は鍵アイコンが不要なので隠す */
html.is-member .nav-links .lock,
html.is-member .site-footer .lock{display:none}

/* ---------- 会員ゲート ---------- */
.gate-overlay{display:none}
html.gate-active body.gate-page>*:not(.site-header):not(.site-footer):not(.gate-overlay):not(script){display:none!important}
html.gate-active body.gate-page .gate-overlay{display:block}
.gate-overlay{padding:40px 0 90px}
.gate{max-width:640px;margin:0 auto;text-align:center;padding:0 22px;position:relative}
.gate .lk{width:60px;height:60px;border-radius:50%;background:var(--accent-soft);display:flex;
  align-items:center;justify-content:center;margin:0 auto 24px}
.gate .lk svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:2}
.gate-eyebrow{display:inline-block;font-size:11px;letter-spacing:var(--track-wide);font-weight:800;
  color:var(--accent);background:var(--accent-soft);padding:5px 14px;border-radius:999px;text-transform:uppercase}
.gate h1{font-size:clamp(23px,3.2vw,30px);font-weight:var(--f-display);margin:18px 0 16px;line-height:1.35;letter-spacing:var(--track-tight)}
.gate p{color:var(--sub);font-size:15px;line-height:1.85;margin:0 auto 28px;max-width:38em}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gate-actions button{border:0;cursor:pointer;font:inherit}
.gate-note{font-size:12.5px;color:var(--sub);opacity:.85;margin-top:22px!important}

/* ---------- ヘッダ / グローバルナビ（白ロゴ域＋青の帯を左右に分ける） ---------- */
.demobar{background:var(--ink);color:#eaf1ff;text-align:center;font-size:11.5px;font-weight:700;
  letter-spacing:.03em;padding:7px 12px;line-height:1.5}
.site-header{position:sticky;top:0;z-index:50;background:var(--accent)}
.nav{display:flex;align-items:center;gap:18px;height:80px;max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--ds-pad-chrome)}
.brand{display:flex;align-items:center;gap:10px;font-weight:var(--f-display);font-size:14px;color:#fff;white-space:nowrap;min-width:0;overflow:hidden;flex:0 1 auto}
.brand .blogo{background:#fff;border-radius:4px;padding:4px 7px}
.brand .bname{min-width:0;max-width:270px}
.brand .bname .ja,.brand .bname .mn{overflow:hidden;text-overflow:ellipsis}
/* 省略記号を効かせるため名前行のみblock化する。
   small（サブタイトル）まで巻き込まないよう span に限定する */
html.lang-ja .brand .bname span.ja{display:block}
html.lang-mn .brand .bname span.mn{display:block}
.brand:hover{text-decoration:none}
.brand .blogo{height:28px;width:auto;display:block;flex:none}
.brand .bname{display:flex;flex-direction:column;line-height:1.2;font-weight:var(--f-display);font-size:14.5px;white-space:nowrap;letter-spacing:var(--track-tight)}
.brand .bname small{font-size:10px;font-weight:600;color:#fff;letter-spacing:.02em}
.nav-bar{display:flex;align-items:center;gap:22px;height:100%;flex:1;min-width:0;background:transparent;
  padding:0;margin-left:0;justify-content:flex-end}
.nav-links{display:flex;align-items:center;gap:1px;flex-wrap:nowrap}
.nav-links a{color:rgba(255,255,255,.92);font-size:12.5px;font-weight:700;padding:8px 9px;border-radius:4px;white-space:nowrap}
.nav-links a:hover{color:#fff;text-decoration:none;background:rgba(10,18,28,.22)}
.nav-links a.active{color:var(--ink);background:#fff}
.nav-links a .lock{font-size:10px;opacity:.8;margin-left:2px}
.nav-actions{display:flex;align-items:center;gap:16px}
.lang-toggle{display:inline-flex;border:1.5px solid #fff;border-radius:999px;overflow:hidden;background:transparent;padding:1.5px}
.lang-toggle button{border:0;background:transparent;font:inherit;font-size:11.5px;font-weight:800;
  padding:6px 12px;cursor:pointer;color:#fff;line-height:1;letter-spacing:.03em;border-radius:999px}
.lang-toggle button.on{background:#fff;color:var(--accent)}
.totop{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--sub);
  white-space:nowrap;border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;text-decoration:none}
.totop svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.totop:hover{color:var(--fill);border-color:var(--fill);text-decoration:none}
.login-link{font-size:13px;font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap;display:inline-flex;
  align-items:center;gap:5px;text-decoration:none;cursor:pointer;background:none;border:0;font-family:inherit}
.login-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- ボタン：丸みのあるピル型 ---------- */
/* デザインシステム: radius 6 / padding 16-32 / 16px・500 / min-width 200 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-8);border:0;cursor:pointer;font:inherit;
  font-weight:500;border-radius:var(--ds-radius-6);padding:16px 32px;font-size:var(--ds-type-body-size);line-height:var(--ds-type-body-lh);
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;
  text-decoration:none;white-space:nowrap;min-width:200px}
/* 全ボタンに矢印を付与（明示的に .btn-noarrow で抑止可） */
.btn::after{content:"→";font-size:15px;line-height:1;font-weight:500}
.btn.btn-noarrow::after{content:none}
.btn-primary{background:var(--fill);color:#fff}
.btn-primary:hover{background:var(--ds-brand-primary-dark);text-decoration:none}
.nav .btn-primary{padding:9px 18px;font-size:13.5px;background:#fff;color:var(--accent);min-width:0;border-radius:var(--ds-radius-6)}
.nav .btn-primary::after{content:none}
.nav .btn-primary:hover{background:var(--ink-fixed);color:#fff}
/* secondary: 白地＋1.6px の primary-dark 枠。文字色も枠と同じ（READMEの既知の注意点） */
.btn-ghost{background:var(--ds-surface-white);box-shadow:inset 0 0 0 1.6px var(--ds-brand-primary-dark);
  border:0;color:var(--ds-brand-primary-dark);padding:16px 32px}
.btn-ghost:hover{background:var(--ds-brand-primary-dark);color:#fff;text-decoration:none}
.btn-white{background:#fff;color:var(--accent)}
.btn-white:hover{background:var(--ink-fixed);color:#fff;text-decoration:none}
/* .tint内では--accentが白に再定義されるため、白ボタンの文字色を固定色に戻す */
section.block.tint .btn-white{color:var(--fill)}
section.block.tint .btn-white:hover{background:var(--ink-fixed);color:#fff}
section.block.tint .btn-ghost{background:transparent;border-color:#fff;color:#fff}
section.block.tint .btn-ghost:hover{background:#fff;color:var(--fill)}
/* ただし .tint 内でも白カードの中に置かれたボタンは通常配色に戻す */
section.block.tint .members-cta .btn-ghost,
section.block.tint .form .btn-ghost{background:#fff;box-shadow:inset 0 0 0 1.6px var(--ds-brand-primary-dark);
  border:0;color:var(--ds-brand-primary-dark)}
section.block.tint .members-cta .btn-ghost:hover,
section.block.tint .form .btn-ghost:hover{background:var(--ds-brand-primary-dark);color:#fff}
section.block.tint .members-cta .btn-white,
section.block.tint .form .btn-white{background:var(--fill);color:#fff}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85);padding:14.5px 30.5px}
.btn-outline:hover{background:#fff;color:var(--fill);text-decoration:none}
.btn-ink{background:var(--ink-fixed);color:#fff}
.btn-ink:hover{background:var(--fill);color:#fff;text-decoration:none}
/* サイズ違い（Figma実測280×75。他ページに .btn-lg 利用は無いため、既存の.btn/.btn-ghost等の
   padding・min-widthを上書きしない専用の追加クラスとして末尾に置く） */
.btn-lg{min-width:280px;padding:25.5px 32px}
/* テキストリンク型「もっと見る →」 */
.more-link{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}
.more-link::after{content:"→";font-weight:700}
.more-link:hover{color:var(--fill);text-decoration:none}
/* 「先輩の声を読む」等、吹き出しアイコン付きの.more-link修飾（Figma実測：青い角丸アイコン＋
   枠なしフラットテキスト）。.more-link本体（多数のページで共用）は変更しない */
.more-link .ic-bubble{flex:none;width:28px;height:28px;border-radius:var(--ds-radius-6);
  background:var(--accent);display:flex;align-items:center;justify-content:center}
.more-link .ic-bubble svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8}
/* 「〜の会社ページを見る」等、建物アイコン付きの.more-link修飾（Figma実測：塗りバッジの
   .ic-bubbleとは異なり、線画アイコンのみで背景・枠は無い）。.more-link本体は変更しない */
.more-link .ic-building{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.more-link .ic-building svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.row-end{display:flex;justify-content:flex-end;margin-top:22px}
.nav-toggle{display:none;position:relative;z-index:61;margin-left:6px;border:1.5px solid rgba(255,255,255,.6);background:transparent;border-radius:4px;
  width:42px;height:38px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2}


/* ==================================================================
   インタラクション：ホバー/フォーカスの挙動を4種類に統一する
   ------------------------------------------------------------------
   ボタン・ピル   … 1px 持ち上げ ＋ 淡い影／矢印を 3px 送る
   カード・タイル … 2px 持ち上げ ＋ 淡い影
   補助リンク     … 色のみ（フッターの切替・ログイン・言語トグル）
   行リスト       … 背景の淡い塗りのみ（動かさない）
   テキストリンク … 色のみ（＋矢印を 3px 送る）
   どれも 0.18s / ease-out で揃える。色は .tint 内でも反転しない
   固定トークン（--fill / --ink-fixed）だけを使う。
   ================================================================== */
:root{--mo:.18s;--mo-ease:cubic-bezier(.2,.7,.3,1)}

/* --- ① ボタン・ピル --- */
.btn,.topic-pills .tp{
  transition:background-color var(--mo) var(--mo-ease),border-color var(--mo) var(--mo-ease),
             color var(--mo) var(--mo-ease),box-shadow var(--mo) var(--mo-ease),
             transform var(--mo) var(--mo-ease);
  transform:translateY(0)}
.btn:hover,.topic-pills .tp:hover{
  transform:translateY(-1px);box-shadow:0 3px 10px rgba(18,33,47,.13)}
.btn:active,.topic-pills .tp:active{
  transform:translateY(0);box-shadow:none}
/* 補助リンク（フッターの切替・ログイン・言語トグル）は色の変化のみ */
.switch-link,.login-link,.lang-toggle button{
  transition:background-color var(--mo) var(--mo-ease),border-color var(--mo) var(--mo-ease),
             color var(--mo) var(--mo-ease)}
.switch-link:hover,.login-link:hover{transform:none;box-shadow:none}

.btn:focus-visible,.switch-link:focus-visible,.topic-pills .tp:focus-visible,
.login-link:focus-visible,.lang-toggle button:focus-visible,a:focus-visible{
  outline:3px solid var(--ds-brand-primary-light);outline-offset:2px}
/* 反転帯の上では白い影が効かないので、輪郭を薄く光らせる */
section.block.tint .btn:hover,.site-header .btn:hover{
  box-shadow:0 3px 10px rgba(10,18,28,.22)}

/* --- ② カード・タイル --- */
a.card,a.co-item,a.bubble-link,a.gate,.feature-link{
  transition:box-shadow var(--mo) var(--mo-ease),transform var(--mo) var(--mo-ease);
  transform:translateY(0)}
a.card:hover,a.co-item:hover,a.bubble-link:hover,a.gate:hover,.feature-link:hover{
  transform:translateY(-2px);box-shadow:var(--ds-shadow-raised);text-decoration:none}
a.card:active,a.co-item:active,a.bubble-link:active,a.gate:active{transform:translateY(0);box-shadow:none}
.co-item .thumb{transition:box-shadow var(--mo) var(--mo-ease)}
.co-item:hover .thumb{opacity:1;box-shadow:var(--ds-shadow-raised)}

/* --- ③ 行リスト（動かさない） --- */
.news-list a,.news-strip a,.prevnext a{
  transition:background-color var(--mo) var(--mo-ease),color var(--mo) var(--mo-ease)}
.news-list a:hover,.news-strip a:hover,.prevnext a:hover{
  background:var(--accent-tint);text-decoration:none;transform:none;box-shadow:none}

/* --- ④ テキストリンク --- */
.more-link{transition:color var(--mo) var(--mo-ease)}
.more-link:hover{color:var(--fill);text-decoration:none}
.btn::after,.more-link::after{transition:transform var(--mo) var(--mo-ease)}
.btn:hover::after,.more-link:hover::after{transform:translateX(3px)}
section.block.tint .more-link{color:#fff}
section.block.tint .more-link:hover{color:#fff;opacity:.82}

@media (prefers-reduced-motion: reduce){
  .btn,.switch-link,.topic-pills .tp,.login-link,.lang-toggle button,
  a.card,a.co-item,a.bubble-link,a.gate,.news-list a,.prevnext a,
  .btn::after,.more-link::after{transition:none!important}
  .btn:hover,.switch-link:hover,.topic-pills .tp:hover,.login-link:hover,
  a.card:hover,a.co-item:hover,a.bubble-link:hover,a.gate:hover,
  .btn:hover::after,.more-link:hover::after{transform:none!important}
}

/* ---------- ヒーロー（塗り背景版） ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,var(--ink) 0%,var(--accent) 150%)}
.hero .deco{position:absolute;inset:0;opacity:.5;pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:80px 22px 84px}
.hero .hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4;pointer-events:none;z-index:0}
.hero .kicker{display:inline-block;font-size:11.5px;letter-spacing:var(--track-wide);font-weight:800;
  background:rgba(255,255,255,.16);color:#fff;padding:6px 14px;border-radius:999px;text-transform:uppercase}
.hero h1{margin:20px 0 18px;font-size:clamp(30px,5.4vw,54px);font-weight:var(--f-display);line-height:1.12;letter-spacing:var(--track-tight);max-width:19em}
.hero p.lead{font-size:16.5px;opacity:.92;max-width:34em;margin:0 0 30px;line-height:1.8}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.hero-stats .s{background:rgba(255,255,255,.14);backdrop-filter:blur(3px);border-radius:var(--radius-sm);padding:12px 20px}
.hero-stats .s b{font-size:clamp(20px,2vw,24px);font-weight:var(--f-display);display:block;line-height:1.05;
  letter-spacing:var(--track-tight);font-variant-numeric:tabular-nums}
.hero-stats .s>span{font-size:11.5px;opacity:.88;display:block;margin-top:4px}

/* ---------- フルブリード写真ヒーロー：見出しはハイライトマーカー風 ---------- */
.hero-full{position:relative;height:616px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--ink) 0%,var(--accent) 140%)}
.hero-full .bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.hero-full::after{content:"";position:absolute;inset:0;z-index:1;
  /* フレームでは写真を暗くしていない。左側の文字保護に薄く敷くだけ */
  background:linear-gradient(90deg,rgba(10,18,28,.16) 0%,rgba(10,18,28,0) 48%)}
.hero-full::before{display:none}
.hero-full{align-items:stretch}
/* 見出しと指標は下段にまとめる（間を space-between で開けると上部に空洞ができる） */
.hero-full .inner{position:relative;z-index:3;max-width:var(--maxw-wide);width:100%;margin:0 auto;padding:56px 40px 48px;
  display:flex;flex-direction:column;justify-content:space-between}
.hero-full .ey{display:none}
.hero-full h1{font-size:clamp(26px,3.6vw,42px);line-height:1.62;font-weight:var(--f-display);letter-spacing:var(--track-tight);
  margin:0;max-width:16em;display:inline}
/* 見出しの帯は #1863D3 のベタ塗り（フレーム実測値。グラデーションではない） */
.hero-full h1 .ja,.hero-full h1 .mn{box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background:var(--fill);padding:.2em .28em;border-radius:0}
.hero-full p.lead{font-size:clamp(15px,1.4vw,18px);max-width:33em;opacity:1;margin:18px 0 0;line-height:1.8;
  text-shadow:0 1px 3px rgba(10,18,28,.85),0 0 14px rgba(10,18,28,.6)}
.hero-full .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* 統計ピル：白の小カードを左下に横並び */
.hero-full .hero-stats{margin:0;gap:12px}
.hero-full .hero-stats .s{background:rgba(255,255,255,.62);backdrop-filter:blur(6px);color:var(--ink-fixed);
  border-radius:6px;padding:10px 16px;text-align:center;min-width:118px}
.hero-full .hero-stats .s b{font-size:19px;color:var(--ink-fixed);line-height:1.2}
.hero-full .hero-stats .s b small{font-size:11.5px;font-weight:700;margin-left:1px}
.hero-full .hero-stats .s>span{font-size:11px;opacity:1;color:var(--sub);margin-top:1px}
/* トップページ専用の統計チップ配色（Figma実測: 不透明な青地＋白文字）。
   .hero-stats .s の既定（半透明白地）は他ページで使う可能性があるため変更せず、
   修飾クラス .solid を追加して上書きする */
.hero-full .hero-stats.solid .s{background:var(--fill);color:#fff}
.hero-full .hero-stats.solid .s b,.hero-full .hero-stats.solid .s b small{color:#fff}
.hero-full .hero-stats.solid .s>span{color:#fff;opacity:1}
/* Figma実測（トップ 130:13519/130:13527）: ピルは3等分の均等幅・角丸4px・gap24、
   数字32px太字。.hero-stats.solid はこのページ専用のためここで直接、実測値に合わせる */
.hero-full .hero-stats.solid{gap:24px;width:100%;max-width:408px}
.hero-full .hero-stats.solid .s{flex:1;min-width:0;border-radius:4px;padding:8px 10px}
.hero-full .hero-stats.solid .s b{font-size:clamp(22px,2.4vw,32px)}
.hero-full .hero-stats.solid .s b small{font-size:12px}
.hero-full .hero-stats.solid .s>span{font-size:12px}
/* トップページのヒーロー：見出し52px/行間78px・左右余白32pxはFigma実測（130:13516/130:13519）。
   .hero-full本体は index.html／student/nagaoka／company/index.html でも共有のため、
   専用クラス .hero-home を追加してこのページだけ上書きする */
.hero-full.hero-home .inner{padding:40px 32px 64px}
.hero-full.hero-home h1{font-size:clamp(26px,3.6vw,52px);line-height:1.5}

/* 2巡目の先頭位置はJSで実測し、画像比率や小数ピクセルに左右されない距離を使う。 */
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--marquee-shift,0px),0,0)}}
@media(max-width:600px){.marquee-track img{height:130px}}

/* ---------- セクション見出し ---------- */
section.block{padding:var(--ds-space-80) 0}
section.block.tint{
  background:var(--fill);color:#fff;
  --eyebrow:#fff;
  /* 文字色に使うトークンは漏れなく反転する（青地に濃色文字を出さない） */
  --ink-800:#fff;--ink-500:#fff;--divider:rgba(255,255,255,.32);
  --ink-warm:#fff;
  --ink:#fff;--sub:#fff;--line:rgba(255,255,255,.32);--card:rgba(255,255,255,.09);
  --accent:#fff;--accent2:#fff;--accent3:rgba(255,255,255,.65);
  --accent-soft:rgba(255,255,255,.16);--accent-tint:rgba(255,255,255,.09);
  --warm-soft:rgba(255,255,255,.16);--good-soft:rgba(255,255,255,.16);
}
/* 「お知らせ」→「長岡インターンシップとは？」の境界だけに使う区切り装飾
   （Figma実測: 白背景と青背景の境界に大きな楕円が乗り、直線ではなく山型カーブになる）。
   section.block.tint 本体のルールは変更せず、専用クラス .curve-top を新設して該当セクションにだけ添える */
.curve-top{position:absolute;top:0;left:-80px;width:calc(100% + 160px);height:90px;
  transform:translateY(-56%);background:var(--fill);border-radius:50%;z-index:-1;pointer-events:none}
@media(max-width:600px){.curve-top{left:-32px;width:calc(100% + 64px);height:56px;transform:translateY(-50%)}}
.sec-head{text-align:left;max-width:52em;margin:0 0 40px}
/* 英字アイブローはオレンジ限定（原則2）。DSの eyebrow/en スケールに合わせる */
.sec-head .ey{display:inline-block;font-size:14px;letter-spacing:.12em;font-weight:700;
  color:var(--eyebrow);text-transform:uppercase;line-height:1.3;margin-bottom:6px}
.sec-head h2{font-size:var(--ds-type-h2-size);line-height:var(--ds-type-h2-lh);margin:0 0 var(--ds-space-16);
  letter-spacing:var(--track-tight);font-weight:700;color:var(--ink)}
.sec-head p{color:var(--ink-800);font-size:var(--ds-type-body-size);line-height:var(--ds-type-body-lh);margin:0;max-width:46em}

/* ---------- 見出し＋説明の横並び（プログラムのどんな？型） ---------- */
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 36px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.head-row h2{font-size:clamp(24px,3vw,32px);font-weight:var(--f-display);margin:0;letter-spacing:var(--track-tight);color:var(--ink)}
.head-row p{color:var(--sub);font-size:14.5px;margin:0;max-width:34em}

/* ---------- 番号タイムライン（どんなプログラム？型） ---------- */
.steps{margin:0}
.step{position:relative;display:flex;gap:18px;padding:22px 0}
.step:not(:last-child){border-bottom:0}
.step .num{flex:none;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:var(--f-display);font-size:15px;position:relative;z-index:1}
.step .rail{position:absolute;left:17px;top:56px;bottom:-22px;width:2px;background:var(--line)}
.step:last-child .rail{display:none}
.step .body{padding-top:4px}
.step h4{margin:0 0 6px;font-size:16.5px;font-weight:var(--f-display);color:var(--ink)}
.step p{margin:0;font-size:14.5px;color:var(--sub);line-height:1.75}

/* ---------- カードグリッド：丸み＋ソフトシャドウ ---------- */
.grid{display:grid;gap:22px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:box-shadow .18s,transform .18s;display:flex;flex-direction:column;box-shadow:var(--shadow)}
a.card{will-change:transform}
a.card:active{transform:translateY(-1px)}
.card .photo{aspect-ratio:16/10;border-radius:0}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:7px;flex:1}
.card h3{margin:0;font-size:var(--ds-type-hcard-size);line-height:var(--ds-type-hcard-lh);font-weight:700;
  letter-spacing:var(--ds-type-hcard-ls);color:var(--accent)}
.card .meta{font-size:var(--ds-type-caption-size);line-height:var(--ds-type-caption-lh);color:var(--sub);font-weight:500}
.card p{margin:var(--ds-space-8) 0 0;font-size:var(--ds-type-read-size);line-height:var(--ds-type-read-lh);font-weight:400;color:var(--ink)}
.card .tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.tag{font-size:var(--ds-type-caption-size);line-height:var(--ds-type-caption-lh);font-weight:500;
  background:var(--accent-soft);color:var(--ds-brand-primary-dark);border-radius:var(--ds-radius-4);padding:2px 8px}
.tag.warm{background:var(--warm-soft);color:#7a4f0d}
.card .more{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.02em}

/* ---------- 地図の図版 ----------
   実体（角丸カード・等倍表示）は本ファイル末尾の「長岡についてページ専用」
   セクションで定義している（.map-fig はこのページでしか使われていないクラス）。 */

/* ---------- ロゴKV：実写のない企業のキービジュアル代替 ---------- */
.logo-kv{background:var(--ds-surface-white);border:1px solid var(--line);
  border-radius:var(--ds-radius-8);display:flex;align-items:center;justify-content:center;
  padding:34px 24px;margin-bottom:26px;min-height:150px}
.logo-kv img{max-width:min(260px,60%);max-height:96px;width:auto;height:auto;object-fit:contain}

/* ---------- 記事詳細（先輩の声）：本文746 ＋ サイド289 ----------
   Figma実測（24:8273 オユンガさん｜先輩の声。ハル／ミシェール／ティモーレンも同一テンプレート）:
   ① 写真は本文カラムの直下に積まれ、サイドのfactsとは高さを揃えない（本文＋写真をまとめて
      1本の左カラムにする .detail-main を新設）。
   ② サイドのfacts幅は実測289px固定（旧310pxは概算値だったため実測に合わせて修正）。
   ③ タイトルの上下余白は section.block の既定（80/80）ではなく実測32/96（.interview-block）。
   .detail・.detail-main・.prevnext-btns・.interview-block は先輩の声4ページ専用（他テンプレート
   と共有していないことをgrep確認済み）のため直接実測値に更新した。.spec本体（27の企業詳細
   ページと共有）は変更せず、.detail配下だけに絞った上書きで対応する。 */
section.block.interview-block{padding:32px 0 var(--ds-space-96)}
.detail{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
  gap:var(--ds-space-32);max-width:var(--ds-grid-index);margin:0 auto}
.detail>*{min-width:0}
.detail-main{flex:1 1 var(--ds-measure-detail);max-width:var(--ds-measure-detail);
  display:flex;flex-direction:column;gap:var(--ds-space-32)}
.detail-main .prose{max-width:none;margin:0}
/* 概要リスト（業種／受入学科など）は行区切りの定義リスト */
.spec{border-top:var(--ds-stroke-hairline) solid var(--divider)}
.spec div{display:grid;grid-template-columns:auto 1fr;gap:var(--ds-space-16);padding:13px 4px;
  border-bottom:var(--ds-stroke-hairline) solid var(--divider)}
.spec dt{margin:0;font-size:var(--ds-type-caption-size);line-height:var(--ds-type-caption-lh);color:var(--sub);white-space:nowrap}
.spec dd{margin:0;font-size:var(--ds-type-caption-size);line-height:var(--ds-type-caption-lh);color:var(--ds-ink-800)}
/* .detail配下（先輩の声の facts サイド）だけ実測に合わせる：幅289・ラベル列120・
   本文サイズはcaption(12px)ではなくbody/s(14/21) */
.detail .spec{flex:0 0 289px;width:289px}
.detail .spec div{grid-template-columns:120px 1fr;padding:16px 0}
.detail .spec dt,.detail .spec dd{font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh)}
/* ラベル列は固定120pxのため、「インターン先・勤務先」のような長いラベルは
   折り返す（nowrapのままだと隣の値列に文字が重なる） */
.detail .spec dt{white-space:normal}
@media(max-width:1024px){
  .detail{flex-direction:column}
  .detail-main{max-width:none;flex-basis:auto}
  .detail .spec{width:100%;flex-basis:auto}
}
/* パンくず→h1の間隔（Figma実測 24:8273）: 32pxのフラット間隔（クラムズのpb16px＋page-head側
   のpt16pxで計32px）。共有.page-head既定のpt36pxのままだと16+36=52pxになり間延びする。
   他のパンくず直後ページ（.page-head--centered等）と同型のパターンで、先輩の声4ページ専用の
   .page-head--interviewを新設して上書きする（.page-head/.crumbs本体は変更しない）。 */
.crumbs+.page-head--interview{padding:16px 0 0}
.page-head--interview h1{margin-bottom:0}
/* 本文の見出し・段落・リスト（Figma実測 24:8273 の 109:186x 系ノード）:
   ① 見出しh2は.prose既定のh3トークン(18px/27px)ではなくhdetailトークン(20px/30px/-0.42px)。
      節の区切りは上罫線ではなく64pxの余白のみ（Figmaに罫線は無い。企業サイド8ファイルが共有
      する.prose h2の罫線付き既定は変更しない）。
   ② 段落は.prose既定のread トークン(14px/25.2px/400)ではなくBody/M/Medium(16px/24px/500)。
      段落間はmargin相殺で終わる12pxではなく、pt-16の単純な積み上げ（.legal-detail／
      .news-detailの本文と同じ値）。
   ③ 「・雪で電車が止まる」等の一言リストは、行間なしで詰めて並ぶプレーンテキスト＋和文中点
      （ブラウザ既定の丸ブレット「•」ではない）。
   .prose本体（企業サイド8ファイル・学生サイド他テンプレートと共有）は変更せず、
   .interview-block配下だけをFigma実測に合わせて上書きする。 */
.interview-block .prose h2{font-size:var(--ds-type-hdetail-size);line-height:var(--ds-type-hdetail-lh);
  letter-spacing:var(--ds-type-hdetail-ls);border-top:0;padding-top:0;margin:64px 0 0}
.interview-block .prose h2:first-child{margin-top:0}
.interview-block .prose p{font-size:16px;line-height:24px;font-weight:500;margin:16px 0 0}
.interview-block .prose ul{margin:16px 0 0;padding-left:0;list-style:none}
.interview-block .prose li{margin:0;font-size:16px;line-height:24px;font-weight:500}
.interview-block .prose li::before{content:"・"}

/* ---------- テキストのみのリストカード（DSの List コンポーネント相当） ---------- */
.card.card-list{box-shadow:var(--shadow);border:1px solid var(--line);border-radius:var(--ds-radius-8)}
.card.card-list .body{padding:16px 24px 24px;gap:var(--ds-space-8)}
.card.card-list .more{display:none}

/* ---------- お知らせ一覧カード：ボーダーレスな写真＋キャプションのタイル ----------
   Figma実測（お知らせ一覧 card/news ×8）: 白背景・枠線・影を持たず、写真とテキストが
   ページの地色に直接乗る。日付は右寄せ、見出しは濃色インク（--ink-800）でブランド
   ブルーではない。.card 側の基本ルールは他ページ（プログラム一覧・参加企業一覧等）
   でも使われる共有クラスのため変更せず、このページ専用の .card-news で上書きする。 */
.card.card-news{background:transparent;border:0;box-shadow:none;border-radius:0}
.card.card-news .photo{border-radius:var(--radius-sm)}
/* .card .body既定（padding20/22/24・gap7）は他ページ共有のカード然としたレイアウト用。
   ここは枠なしタイルなので、写真直下から8px・横パディングなしに詰める（Figma実測） */
.card-news .body{padding:var(--ds-space-8) 0 0;gap:var(--ds-space-8)}
/* 見出しはFigma実測でBody/M/Medium（16px/500/lh24）。.card h3既定はheading/card
   （17.5px/700/lh31.5・字間-0.35px、企業一覧など枠付きカードの見出し用）でこのページには太すぎるため上書き */
.card-news h3{color:var(--ink-800);font-weight:500;font-size:var(--ds-type-body-size);
  line-height:var(--ds-type-body-lh);letter-spacing:normal}
/* 日付はFigma実測でBody/S/Medium（14px/lh21）。.card .meta既定のcaption（12px/lh18）は小さすぎる */
.card-news .meta{text-align:right;font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh)}

/* ---------- お知らせ一覧セクション本体：Figma実測（student/news 24:9043） ----------
   グリッド幅は1088px固定（--ds-grid-index＝4列×248px＋gap32×3）。.containerの既定1120幅の
   ままだと1カラム256pxになりFigmaより8px広がるため、このページだけ幅を絞る。gapは48/32
   （--ds-grid-indexの定義コメントの通り。従来のインラインstyleは49/32でほぼ合っていたが
   きっちり48に直す）。セクション上下パディングもpt-64/pb-96（section.blockの既定80/80とは
   異なる）。タイトル節とパンくずの間隔もFigma実測で32pxのみ：.page-head既定の上パディング
   36pxは.crumbsの下パディング16pxと合わせると52pxになり広すぎるため、このページだけ上を
   16pxに縮め、下は0にする（後続セクションのpt-64がそのままリード文からの余白になる）。
   いずれも.block/.container/.page-head/.crumbs本体（サイト全体で共有）は変更せず、
   このページ専用のクラスで上書きする。 */
.page-head.page-head--news{padding:16px 0 0}
section.block.news-index-block{padding:var(--ds-space-64) 0 var(--ds-space-96)}
/* .news-index-wrapは.containerと同じ要素にクラスを重ねて使っているため、.containerの
   padding(0 22px、左右合計44px)がmax-widthの内側に食い込む。max-widthをそのまま
   --ds-grid-index(1088px)にすると内側の実効幅は1088-44=1044pxまで狭まり、カード幅が
   248pxではなく237pxになってFigmaより11px/枚狭くなる不具合を実測で確認した(パンくず＋
   タイトルのラッパーにも同じクラスを流用しており、そちらも1076pxまで狭まっていた)。
   +44pxしてFigma実測の1088pxを内側幅として復元する。 */
.news-index-wrap{max-width:calc(var(--ds-grid-index) + 44px)}
.news-index-grid{gap:48px 32px}
/* 見出し文字色はFigma実測でtext/default(#232a33 = --ink-800)。.page-head h1既定の
   --ink(ink-900 #12212F、54ファイル共有)とは別の色のため、このページだけ上書きする。
   リード文(p)は既定のink-800のままで正しいので触らない。 */
.page-head.page-head--news h1{color:var(--ink-800)}
/* 段階見出し（サポート一覧のフェーズ）は英字アイブロー無しの簡素な形 */
.sec-head.sec-head-sm{margin-bottom:var(--ds-space-16)}
.sec-head.sec-head-sm h2{font-size:var(--ds-type-h3-size);line-height:var(--ds-type-h3-lh);font-weight:700;margin:0 0 var(--ds-space-8)}
.sec-head.sec-head-sm p{font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh);color:var(--sub)}

/* ---------- 機能カード：丸いアイコンバッジ（線画） ---------- */
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.feature .ic{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--accent-soft);margin-bottom:16px;display:flex;align-items:center;justify-content:center}
.feature .ic svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8}
.feature h3{margin:0 0 8px;font-size:16.5px;font-weight:var(--f-display);color:var(--ink)}
.feature p{margin:0;font-size:14px;color:var(--sub);line-height:1.7}
section.block.tint .feature{--ink-800:var(--ink-fixed);--ink-500:rgba(18,33,47,.62);background:#fff;box-shadow:var(--ds-shadow-raised);
  --ink:var(--ink-fixed);--sub:rgba(18,33,47,.62);--accent:var(--fill)}
section.block.tint .feature .ic{background:#eef5ff}

/* ---------- 写真枠 ---------- */
.photo{position:relative;aspect-ratio:16/9;background:var(--accent);
  background-size:cover;background-position:center;display:flex;align-items:flex-end;border-radius:var(--radius-sm)}
.photo.tall{aspect-ratio:3/4}
.photo.alt{background:var(--accent2)}
.photo.warm{background:#7a4f0d}
.photo.img{background-color:var(--ink)}
.photo.img .ph-ico{display:none}
.photo.img::after{display:none}
.photo .ph-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.55}
.photo .ph-ico svg{width:48px;height:48px;stroke:#fff;fill:none;stroke-width:1.8}
.card .photo{border-radius:0}

/* ---------- タイムライン（サポート情報等） ----------
   Figma実測（プログラムページ「インターンシップの流れ」フレーム）: カード・番号丸ドット
   ではなく、細い青線＋番号なしの小さな正方形ドット＋日付を独立列にしたフラット表現。
   .timeline/.tl-step はこのページ以外で使われていない（grep確認済み）ため、
   ここで直接そのFigma仕様に更新する。 */
.timeline{position:relative;margin:10px 0;padding-left:42px}
.timeline::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--fill)}
.tl-step{position:relative;display:grid;grid-template-columns:176px 1fr;column-gap:24px;padding:0 0 32px}
.tl-step:last-child{padding-bottom:0}
.tl-step .dot{position:absolute;left:-35px;top:4px;width:16px;height:16px;border-radius:4px;background:var(--fill)}
.tl-step .ph{grid-column:1;grid-row:1;display:block;font-size:12.5px;font-weight:700;color:var(--sub);
  text-align:right;line-height:1.6;padding-top:1px;letter-spacing:.01em}
.tl-step .ph .date-main,.tl-step .ph .date-time{display:block;white-space:nowrap}
.tl-step h4{grid-column:2;grid-row:1;margin:0 0 6px;font-size:16px;font-weight:var(--f-display);color:var(--fill)}
.tl-step p{grid-column:2;grid-row:2;margin:0;font-size:14px;color:var(--ink);opacity:.86;line-height:1.78}
.tl-step .support{grid-column:2;grid-row:3;margin-top:10px;font-size:13px;background:var(--accent-tint);border-radius:var(--radius-sm);padding:10px 14px}
.tl-step .support b{color:var(--accent)}
@media(max-width:600px){
  .tl-step{grid-template-columns:1fr}
  .tl-step .ph{grid-column:1;grid-row:1;text-align:left;margin-bottom:4px}
  .tl-step h4{grid-column:1;grid-row:2}
  .tl-step p{grid-column:1;grid-row:3}
  .tl-step .support{grid-column:1;grid-row:4}
}

/* ---------- 先輩の声 / 引用：写真サムネ＋吹き出し風カード ---------- */
.voice{display:flex;gap:17px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.voice .av{flex:none;width:56px;height:56px;border-radius:50%;background-color:var(--accent);
  background-size:cover;background-position:center}
.voice .who{font-size:12.5px;color:var(--sub);margin-bottom:3px}
.voice .who b{color:var(--ink);font-size:15px}
.voice .txt{font-size:14.5px;line-height:1.85}
/* 引用：左罫ではなく、字下げなしの大きめ本文＋前後の余白で見せる */
.quote{font-size:20px;line-height:1.8;font-weight:700;color:var(--ink);
  padding:26px 0;margin:26px 0;border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
/* オユンガさん記事中の一言引用（Figma実測 109:1889）: 罫線の大見出し引用ではなく、
   白背景・角丸10・パディング16の小さなカード＋本文サイズ(14/21)。角丸は既存の
   --ds-radius-8（8px）ではなくFigma実測どおり10pxで固定値を持つ。.quote本体は他の
   取材記事（企業サイド8ファイル）と共有のため変更せず、この用途だけ.quote-cardで上書きする */
.quote.quote-card{font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh);font-weight:500;
  color:var(--ink-800);background:var(--card);border:0;border-radius:10px;
  padding:16px;margin:24px 0 0}

/* ---------- 記事本文 ---------- */
/* 記事本文はカードに載せず地色の上に直接置く（DSの記事ページ準拠） */
.prose{background:transparent;border:0;border-radius:0;padding:0;max-width:var(--ds-measure-read);margin:0 auto;box-shadow:none}
/* 記事見出し：左のアクセント罫は使わず、上罫と余白で節を区切る */
.prose h2{font-size:var(--ds-type-h3-size);line-height:var(--ds-type-h3-lh);font-weight:700;
  margin:44px 0 16px;padding-top:20px;border-top:1px solid var(--divider);letter-spacing:var(--track-tight)}
.prose h2:first-child{border-top:0;padding-top:0}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16px;color:var(--accent);margin:26px 0 7px;font-weight:800}
.prose p{margin:12px 0;font-size:var(--ds-type-read-size);line-height:var(--ds-type-read-lh);font-weight:400}
.prose ul{margin:12px 0;padding-left:1.3em}
.prose li{margin:6px 0}
.prose .lead{font-size:17.5px;color:var(--ink);font-weight:700}

/* ---------- 手続き・サポート記事（学生 legal 詳細11ページ）専用 ----------
   Figma実測（24:8830 応募・選考の進め方。get_design_contextで再照合）:
   ① section.blockの既定80/80ではなく pt-32/pb-96（先輩の声詳細の.interview-block
      と同じ非対称パディングだが、別テンプレートのため専用クラス.legal-detailを新設）。
   ② 本文は14px(--ds-type-read-size)ではなく16px/24px（Body/M/Regular）、
      見出しh2は18px(--ds-type-h3-size)ではなく20px/30px・字間-0.42px・Bold
      （このサイズは.co-story h2と同一で、記事系テンプレート共通のコンポーネント値と判断）。
   ③ 見出しは罫線を引かず、見出し前32px・見出し直後16px・段落間16px・H3前24pxの
      単純な余白のみで節を区切る。H3(FAQのQ)は.prose h3既定のline-height未指定
      （bodyの1.75を継承し28pxになる）ままだとFigma実測の24pxより広いため、ここで
      24pxに固定する（font-size/color/font-weightは.prose h3既定のまま流用）。
   ④ 注記(.note)は白背景・枠なし・角丸10pxのカード（.co-story .noteと同仕様）。
   ⑤ パンくず→h1の間隔はFigma実測32pxのフラット間隔（.page-head既定のpt36pxのままだと
      クラムズのpb16pxと合わせて52pxになり間延びする）。先輩の声詳細の.page-head--interview
      と同型のパターンで、legal詳細11ページ専用の.page-head--legal-detailを新設して
      上書きする。あわせて、Figmaのtitleコンポーネントに英字アイブロー（"SUPPORT"等）は
      存在しない（.page-head .ey は既定でdisplay:noneのため元々非表示だったが、
      HTML側に残っていた死んだマークアップも11ページ分削除した）。
   .prose/.note/.page-head本体は先輩の声・企業インタビュー・お知らせ詳細等の他テンプレートと
   共有のため変更せず、.legal-detail／.page-head--legal-detail配下だけをFigma実測に
   合わせて上書きする。 */
section.block.legal-detail{padding:32px 0 var(--ds-space-96)}
.legal-detail .prose h2{border-top:0;padding-top:0;margin:32px 0 0;
  font-size:20px;line-height:30px;letter-spacing:-0.42px;font-weight:700}
.legal-detail .prose h2:first-child{margin-top:0}
.legal-detail .prose h3{margin:24px 0 0;padding-top:0;line-height:24px}
.legal-detail .prose p{margin:16px 0 0;font-size:16px;line-height:24px}
.legal-detail .prose ul{margin:16px 0 0}
.legal-detail .prose li{font-size:16px;line-height:24px}
.legal-detail .prose .note{margin-top:16px;background:var(--card);border:0;
  border-radius:10px;padding:16px;font-weight:400}
.legal-detail .cta-row{justify-content:center;gap:var(--ds-space-32);margin-top:var(--ds-space-96)}
/* パンくずと同じ.containerに並ぶ構成（先輩の声・お知らせ詳細と同型）が前提。
   crumbsのpb16px＋ここのpt16pxで計32pxにする */
.crumbs+.page-head--legal-detail{padding:16px 0 0}

/* ---------- お知らせ詳細記事（学生 news 4ページ共通テンプレート）専用 ----------
   Figma実測（24:9266 2026年オンラインインターン募集開始｜お知らせ。yasashii-nihongo /
   welcome / hanabiも同一テンプレートのため同じクラスを適用）:
   ① section.blockの既定80/80ではなく pt-32/pb-96（.legal-detail・.interview-blockと
      同じ非対称パディング）。
   ② 見出しh2は18px(--ds-type-h3-size)ではなく20px/30px・字間-0.42px・Bold、見出し前
      32px。段落は14px(--ds-type-read-size)ではなく16px/24px・段落前16px。いずれも
      .legal-detail .prose と同一値（記事系テンプレート共通のコンポーネント値と判断）。
   ③ リード文（.lead）はBody/L/Bold実測で18px/lh27。現状の17.5px＋lh未指定（25.2px
      を継承）は誤り。
   ④ 本文の実際の折返し幅はカード全体（date/タイトル行と揃う822px）ではなく686px。
      見出し・段落・リストは686で左詰め、その外側のCTAボタン（.center）だけ822幅の
      中央に置かれる（Figma実測: 24:9282配下の子要素x/width、58:7618ボタンの中心位置
      で確認）。.proseの既定max-width（832px、54ファイル超で共用）は変えず、
      .news-detail .proseだけ822に狭め、見出し・段落・リストにさらに686の内側
      max-widthを追加する。
   ⑤ リスト行間はFigma実測8px（項目ごとにpt8px）。ブレット位置はpl24px
      （.prose ul既定の1.3em≒20.8pxではなく24px）。
   ⑥ CTAボタン前の余白はFigma実測40px。.mt-l（38px、他49ファイルと共有の汎用値）は
      変更せず、このテンプレートの.center.mt-lだけ40pxに上書きする。
   .prose/.mt-l本体（他テンプレートと共有）は変更せず、.news-detail配下だけを
   Figma実測に合わせて上書きする（.legal-detailと同型のパターン）。 */
section.block.news-detail{padding:32px 0 var(--ds-space-96)}
.news-detail .prose{max-width:822px}
.news-detail .prose h2{border-top:0;padding-top:0;margin:32px 0 0;max-width:686px;
  font-size:var(--ds-type-hdetail-size);line-height:var(--ds-type-hdetail-lh);
  letter-spacing:var(--ds-type-hdetail-ls);font-weight:700}
.news-detail .prose h2:first-child{margin-top:0}
.news-detail .prose p{margin:16px 0 0;max-width:686px;font-size:16px;line-height:24px}
.news-detail .prose .lead{font-size:18px;line-height:27px}
.news-detail .prose ul{margin:16px 0 0;padding-left:24px;max-width:686px}
.news-detail .prose li{margin:8px 0 0}
.news-detail .prose li:first-child{margin-top:0}
.news-detail .prose .center.mt-l{margin-top:40px}
/* 「お知らせ一覧に戻る」ボタン（このページのみ・Figma実測 71:1740）:
   カード下端からの余白は親要素の32px gap＋自身のpt64pxで実測96px。
   枠線・文字色はbrand/primary(#1863D3)。.btn-ghost共有ルール（secondary配色＝
   primary-dark #0A5BA4、README既定）は変更せず、このボタンだけscoped上書きする。 */
.news-detail .news-back-link{margin-top:96px}
.news-detail .cta-back{color:var(--fill);box-shadow:inset 0 0 0 1.6px var(--fill)}
.news-detail .cta-back:hover{background:var(--fill);color:#fff}
.news-detail .cta-back .cta-back-ic{transform:rotate(-90deg);flex:none}
/* Figma実測（71:1740）: min-width280は既存.btn-lgと同じだが、padding実測は24px/64px
   （現状の25.5px/32pxは誤り）。.btn-lgは他ページで未使用のため直接補正する。 */
.btn-lg{min-width:280px;padding:24px 64px}

/* ---------- 2カラム info ---------- */
.split{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.info-box{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--ds-radius-8);padding:22px 24px}
/* good / warm のベタ塗り（緑・茶）は配色規定外なので、白カードに統一して見出し色で区別する */
.info-box.good,.info-box.warm{background:var(--card);color:var(--ink);border-color:var(--line)}
/* 反転帯の中に置く白カードは、文字色トークンを漏れなく戻す（白地に白を防ぐ） */
section.block.tint .info-box{background:#fff;color:var(--ink-fixed);border-color:transparent;
  --ink:var(--ink-fixed);--ink-800:var(--ink-fixed);--ink-500:rgba(18,33,47,.62);
  --sub:rgba(18,33,47,.62);--divider:#E1E8F1;--line:#E1E8F1;--accent:var(--fill);--eyebrow:var(--fill)}
.info-box h4{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--fill);display:flex;align-items:center;gap:8px}
.info-box ul{margin:0;padding-left:1.1em}
.info-box li{font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh);margin:7px 0;color:var(--ink-800)}

/* ---------- 数値・ファクト：白カードのミニスタッツ ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;text-align:left;box-shadow:var(--shadow)}
.fact b{display:block;font-size:clamp(20px,2.2vw,28px);color:var(--accent);line-height:1.15;font-weight:var(--f-display);
  white-space:nowrap;overflow-wrap:normal;
  letter-spacing:var(--track-tight);font-variant-numeric:tabular-nums}
.fact span{font-size:12px;color:var(--sub);display:block;margin-top:6px}
section.block.tint .fact{--ink-800:var(--ink-fixed);--ink-500:rgba(18,33,47,.62);background:#fff;--ink:var(--ink-fixed);--sub:rgba(18,33,47,.62);--accent:var(--fill)}
/* 塗りつぶしチップ修飾（プログラムページ「できること」フレーム実測: 青ベタ地＋白文字、
   ラベルが上に小さく・値が下に大きく太字）。.fact本体は30ファイル超で共有のため変更せず、
   ここに .fact-fill だけを追加で重ねる。DOMの<b>/<span>順序はREADMEの規則
   （<b>に値・<span>にラベル）を保ったまま、flexのorderで見た目だけ入れ替える */
.fact.fact-fill{background:var(--fill);border:0;box-shadow:none;display:flex;flex-direction:column;padding:22px 20px}
.fact.fact-fill span{order:1;color:rgba(255,255,255,.82);font-size:13px;font-weight:400;margin:0 0 6px}
.fact.fact-fill b{order:2;color:#fff;font-size:clamp(18px,1.8vw,21px);white-space:normal}

.co-logo{height:38px;width:auto;max-width:200px;object-fit:contain;object-position:left center;display:block;margin:0 0 16px}
.feature .co-logo{height:30px;margin:0 0 12px}

/* ---------- パンくず・ページ見出し ---------- */
.crumbs{font-size:var(--ds-type-caption-size);line-height:var(--ds-type-caption-lh);color:var(--sub);padding:var(--ds-space-16) 0}
.crumbs a{color:var(--sub)}
.crumbs a:hover{color:var(--accent)}
.page-head{padding:36px 0 10px}
/* DSのTitleコンポーネントはパンくず→h1→リードのみ。ページ見出しに英字アイブローは置かない */
.page-head .ey{display:none}
.page-head h1{font-size:var(--ds-type-h1-size);line-height:var(--ds-type-h1-lh);margin:0 0 var(--ds-space-16);
  font-weight:700;letter-spacing:var(--ds-type-h1-ls);color:var(--ink)}
.page-head p{color:var(--ink-800);margin:0;max-width:46em;font-size:var(--ds-type-body-size);line-height:var(--ds-type-body-lh)}
/* お知らせ詳細のようにFigmaでh1が中央揃えの回のみ使う専用修飾（.page-head基本ルールは
   54ファイル共有のため変更しない。text-align:centerが必要なページだけこのクラスを足す） */
.page-head--centered h1{text-align:center}
.page-head--centered .ey{text-align:right}
/* ---------- 2026年オンラインインターン募集開始（お知らせ詳細）専用 ----------
   Figma実測（24:9266）: パンくず→日付→h1→本文カードの縦の間隔はすべて32pxの
   フラットな等間隔（パンくずのpb16px＋.page-head既定のpt36pxで52pxになる現状は誤り）。
   日付行はBody/S(--sub・14px)ではなくBody/M(--ink-800・16px)。h1の色もページ見出し
   共通の--ink（ink-900）ではなくink-800。.page-head/.crumbs本体（54ファイル共有）は
   変更せず、パンくず直後にこのページの.page-head--centeredが来るときだけ上書きする。 */
.crumbs+.page-head--centered{padding:16px 0 0}
.page-head--centered .ey{display:block;max-width:822px;margin:0 auto 32px;
  font-size:var(--ds-type-body-size);line-height:var(--ds-type-body-lh);
  color:var(--ink-800);font-variant-numeric:tabular-nums}
/* .page-head h1既定のmargin-bottom:16pxは、上のpadding-bottom:0と組み合わさると
   マージン相殺でsection側にそのまま漏れ出し、合計48px（16+32）になってしまう
   （section.news-detailのpt-32と合わせて32pxにしたい）。h1側の余白を0にして
   section側のpaddingだけで32pxを作る */
.page-head--centered h1{color:var(--ink-800);margin-bottom:0}

/* ---------- フォーム ---------- */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--ds-radius-8);padding:32px;max-width:var(--ds-measure-form);margin:0 auto;box-shadow:var(--shadow)}
section.block.tint .form{--ink-800:var(--ink-fixed);--ink-500:rgba(18,33,47,.62);background:#fff;border-color:transparent;color:var(--ink-fixed);--ink:var(--ink-fixed);--sub:rgba(18,33,47,.62);--accent:var(--fill);
  --line:#e1e8f1;--warm-soft:#faf1de;box-shadow:var(--ds-shadow-raised)}
/* .flat: カード化せず地色のままフィールドだけ枠付きで並べる版（Figma実測準拠、apply.html用） */
.form.flat{background:transparent;border:0;box-shadow:none;padding:0}
section.block.tint .form.flat{background:transparent;box-shadow:none}
.field{margin-bottom:19px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;letter-spacing:.01em}
.field .req{color:var(--ds-feedback-error-strong);font-size:11px;margin-left:4px;font-weight:800}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 14px;min-height:var(--ds-field-h);font:inherit;font-size:15px;background:#fbfdff}
.field select{width:auto;min-width:240px;max-width:60%}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent)}
.form-note{font-size:12.5px;color:var(--sub);margin-top:6px}
.demo-banner{background:var(--ink-fixed);color:#eaf1ff;border:0;border-radius:var(--radius-sm);padding:12px 18px;
  font-size:13px;margin:0 0 24px;display:flex;align-items:center;gap:9px}
.demo-banner svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}

/* ---------- 会員限定まとめCTA（ページ末尾に1か所） ---------- */
.members-cta{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 38px;box-shadow:var(--shadow)}
.members-cta .sec-head{margin-bottom:28px}
section.block.tint .members-cta{background:#fff;border-color:transparent;color:var(--ink-fixed);
  --ink:var(--ink-fixed);--ink-800:var(--ink-fixed);--ink-500:rgba(18,33,47,.62);
  --sub:rgba(18,33,47,.62);--accent:var(--fill);--eyebrow:var(--fill);--line:#E1E8F1}

/* ---------- CTA帯：明るい背景＋縦積み2ボタン ---------- */
/* CTA帯：Figma準拠で長生橋の写真を敷く。青文字の可読性を保つため
   白のベールを重ねてコントラストを確保する */
.cta-band{position:relative;overflow:hidden;color:var(--ink);text-align:center;
  min-height:392px;background:var(--bg) url('/assets/ds/cta-nagaoka-bridge.jpg') center bottom/cover no-repeat}
.cta-band::after{content:"";position:absolute;inset:0;
  z-index:0;
  background:rgba(255,255,255,.5)}
.cta-band::before{display:none}
.cta-band .deco{display:none}
.cta-band .inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:64px 22px}
.cta-band h2{font-size:32px;line-height:48px;margin:0;font-weight:700;letter-spacing:-.84px;color:var(--accent)}
.cta-band p{opacity:1;color:var(--ink-fixed);margin:16px 0 0;font-size:16px;line-height:24px;font-weight:500}
/* 縦積み・中央寄せ */
.cta-band .cta-row{display:flex;gap:16px;flex-direction:column;align-items:center;justify-content:center;margin-top:24px}
.cta-band .cta-row .btn{min-width:200px;min-height:56px;padding:16px 32px;border-radius:6px;justify-content:center;font-size:16px;line-height:24px;font-weight:500}
.cta-band .btn-white{background:var(--fill);color:#fff}
.cta-band .btn-white:hover{background:var(--ds-brand-primary-dark);color:#fff}
.cta-band .btn-outline{background:#fff;color:var(--accent);border-color:var(--accent)}
.cta-band .btn-outline:hover{background:var(--fill);color:#fff}
/* トップページ実測（89:8088/89:8091）: 見出し色は primary-strong(#0A5BA4)・本文16px。
   .cta-band は他ページ（legal・company）でも共有のため、修飾クラス .cta-band--home を
   追加してこのページだけ実測値に合わせる */
.cta-band.cta-band--home h2{color:var(--ds-brand-primary-dark)}
.cta-band.cta-band--home p{font-size:16px}

/* ---------- お知らせ：左に見出し列＋右に日付/タイトルの行リスト ---------- */
.news-block{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 24px;align-items:start}
.news-block .nb-head .ey{display:block;font-size:14px;letter-spacing:.12em;font-weight:700;color:var(--eyebrow);text-transform:uppercase;line-height:1.3}
.news-block .nb-head h2{font-size:22px;font-weight:var(--f-display);margin:6px 0 0;letter-spacing:var(--track-tight);color:var(--ink)}
/* トップページ実測（35:12107/35:12109）: ラベル列は112px相当（本文に合わせた自動幅）・
   列間gap32・見出し28px・アイブロー16px。.news-block は company/index.html でも共有のため
   修飾クラス .news-block--home を追加し、このページだけ実測値に合わせる */
.news-block.news-block--home{grid-template-columns:max-content minmax(0,1fr);gap:0 32px}
.news-block.news-block--home .nb-head .ey{font-size:16px}
.news-block.news-block--home .nb-head h2{font-size:var(--ds-type-h2-size);margin-top:8px}
.news-block.news-block--home .news-list a{grid-template-columns:75px minmax(0,1fr);gap:64px;padding:24px 32px}
.news-list{border-top:var(--ds-stroke-hairline) solid var(--divider)}
.news-list a{display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--ds-space-24);align-items:center;
  padding:20px 6px;border-bottom:var(--ds-stroke-hairline) solid var(--divider);text-decoration:none;color:var(--ink);transition:background-color .15s}
.news-list .d{font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh);color:var(--sub);font-variant-numeric:tabular-nums}
.news-list .t{font-size:var(--ds-type-body-size);line-height:var(--ds-type-body-lh);font-weight:500;color:var(--ds-ink-800)}
/* 旧: お知らせストリップ（他ページで使用中のため維持） */
.news-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news-strip a{display:block;padding:20px 22px;text-decoration:none;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s}
.news-strip a:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.news-strip a:active{transform:translateY(-1px)}
.news-strip .d{font-size:11px;letter-spacing:.05em;color:var(--accent);font-weight:800;text-transform:uppercase}
.news-strip .t{font-size:15px;font-weight:700;margin-top:7px;line-height:1.5;color:var(--ink)}
.news-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 18px}
.news-head h2{font-size:22px;font-weight:var(--f-display);margin:0}
.news-head a{font-size:13px;font-weight:800;color:var(--accent);text-decoration:none}

/* ---------- 「〜とは？」ブルーセクション：中央寄せ見出し＋番号付きステップ ---------- */
.sec-center{text-align:center;max-width:44em;margin:0 auto 46px}
/* Figma実測（22:117）: 40px太字。他ページでの使用は無いため直接実測値に合わせる */
.sec-center h2{font-size:clamp(26px,4vw,40px);font-weight:var(--f-display);margin:0 0 16px;letter-spacing:var(--track-tight)}
/* Figma実測（22:120）: 本文もBold・16px・不透明の白（透過なし） */
.sec-center p{font-size:16px;font-weight:700;line-height:1.5;margin:0;opacity:1}
.step-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step-card .sc-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
/* Figma実測（22:127）: 32px角丸なしの正方形バッジ・数字18px */
.step-card .n{flex:none;width:32px;height:32px;border-radius:0;background:#fff;color:var(--fill);
  display:flex;align-items:center;justify-content:center;font-weight:var(--f-display);font-size:18px}
.step-card h4{margin:0;font-size:18px;font-weight:var(--f-display)}
/* Figma実測（22:131）: 本文16px・Regular・不透明の白 */
.step-card p{margin:0 0 18px;font-size:16px;font-weight:400;line-height:1.5;opacity:1}
/* Figma実測（120:8369等）: カード枠なし・地色に直接乗るピクトグラムSVG（3種、実アセット差し替え） */
.step-card .ph{aspect-ratio:336/160;background:none;border-radius:0;display:flex;align-items:center;justify-content:center}
.step-card .ph img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- WHYパネル ----------
   Figma実測（130:10897/130:10895）: 単一の2カラム分割ではなく、上下2段構成。
   上段＝［アイブロー＋見出し］と［1行の説明文］を横並び（下端揃え）、
   下段＝［回転した地図画像・約285px］と［2×2カード＋ボタン・約625px］を横並び（下端揃え）。
   .why-panel／.wp-*／.icard はこのページ以外で使われていないため直接実測値に更新する。 */
.why-panel{display:flex;flex-direction:column;gap:32px}
.wp-row{display:flex;gap:64px;align-items:flex-end;flex-wrap:wrap}
.wp-lead{flex:none;max-width:100%}
.wp-lead .ey{display:block;font-size:20px;letter-spacing:-.02em;font-weight:800;line-height:1.3}
.wp-lead h2{font-size:clamp(24px,2.8vw,32px);font-weight:var(--f-display);margin:8px 0 0;letter-spacing:var(--track-tight)}
.wp-desc{flex:1;min-width:240px;font-size:16px;font-weight:700;line-height:1.5;margin:0;opacity:1;max-width:32em}
.wp-map{flex:none;width:clamp(240px,28vw,380px);min-height:430px;display:flex;align-items:center;justify-content:center}
.wp-map img{display:block;width:min(100%,285px);height:auto;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(6,29,66,.14))}
.wp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:32px}
.icard{background:var(--fill);border-radius:8px;padding:16px 24px;text-align:center;box-shadow:none;color:#fff}
.icard .ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.icard .ic svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:1.7}
.icard h4{margin:0 0 9px;font-size:18px;font-weight:var(--f-display);color:#fff}
.icard p{margin:0;font-size:14px;color:#fff;line-height:1.5;text-align:left}
@media(max-width:1024px){.wp-row{gap:32px}.wp-map{width:100%;min-height:0}.wp-map img{width:180px}}

/* ---------- 参加企業：枠なしカード（写真＋バッジ＋直置きテキスト） ---------- */
.co-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 32px;
  max-width:var(--ds-grid-index);margin:0 auto}
.co-item{display:block;text-decoration:none;color:var(--ink)}
.co-item .thumb{position:relative;aspect-ratio:248/154;border-radius:var(--ds-radius-6);overflow:hidden;background:var(--ds-ink-800);
  background-size:cover;background-position:center;transition:opacity .18s}
.co-item .badge{position:absolute;top:8px;right:8px;background:var(--ds-surface-white);color:var(--ds-brand-primary-dark);
  font-size:var(--ds-type-micro-size);line-height:var(--ds-type-micro-lh);font-weight:500;
  border-radius:var(--ds-radius-4);padding:2px 6px;display:inline-flex;align-items:center;gap:2px}
.co-item h3{margin:var(--ds-space-8) 0 0;font-size:var(--ds-type-h3-size);line-height:var(--ds-type-h3-lh);
  font-weight:500;color:var(--ds-ink-800);letter-spacing:0}
.co-item .meta{font-size:var(--ds-type-caption-size);line-height:var(--ds-type-caption-lh);color:var(--sub);margin-top:var(--ds-space-8)}
.co-item .tagrow{display:flex;flex-wrap:wrap;gap:var(--ds-space-6);margin-top:var(--ds-space-8)}
.co-item .tag{background:var(--ds-surface-white);color:var(--ds-brand-primary-dark);border-radius:var(--ds-radius-4);
  padding:2px 8px;font-size:var(--ds-type-caption-size);line-height:var(--ds-type-caption-lh);font-weight:500}
/* 実写のない企業はロゴを白地のサムネ枠に収める */
.co-item.is-logo .thumb{background:var(--ds-surface-white);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:26px 30px}
.co-item.is-logo .thumb .co-logo{width:100%;height:100%;max-width:100%;max-height:100%;margin:0;object-fit:contain;object-position:center}
/* ロゴ未取得の企業は、同じ白枠の中に社名を組んで体裁を揃える */
.co-item.is-logo .logo-text{font-size:17px;font-weight:700;color:var(--fill);letter-spacing:var(--track-tight);text-align:center}

/* ---------- 参加企業一覧（student/company/index.html）専用の上書き ----------
   .co-item/.badge/.tag は student/index.html の企業プレビューと
   company/internship-knowledge/index.html でも共有しているため、共有ルールは
   変えずこの一覧セクション配下（.co-index）だけをFigma実測（24:7399/55:5023）に合わせる。 */
/* Container:margin実測：グリッド上64px・下96px。section.blockの既定80px上下は
   54ファイル共有のため変更せず、このページの<section>だけ専用クラスで上書きする */
section.block.co-index{padding:var(--ds-space-64) 0 var(--ds-space-96)}
/* Figmaのbrand-primary-lightは白背景で小文字のコントラストが不足するため、
   同系統のprimary-darkを使ってWCAG AAを満たす。 */
.co-index .co-item .badge{color:var(--ds-brand-primary-dark);letter-spacing:.5px}
.co-index .co-item .tag{color:var(--ds-brand-primary-dark)}
/* バッジのアイコンはUnicode「★」ではなく実アセットのスターSVG（12x12・currentColorで
   文字色に追従） */
.co-index .co-item .badge .i-star{width:12px;height:12px;flex:none;fill:currentColor}
/* 業種メタ：ラベル（業種／Салбар）はmuted、値はdefault寄りの濃色（Figma実測55:5023）。
   Figmaのダミー文言は短いため両方whitespace-nowrapだが、実データは業種名が長い会社が
   あるため、ラベルだけ折り返し禁止で固定し、値だけ折り返せるようにする */
.co-index .co-item .meta{display:flex;gap:var(--ds-space-8)}
.co-index .co-item .meta .k{flex:none;white-space:nowrap}
.co-index .co-item .meta .v{flex:1;min-width:0;color:var(--ds-ink-800)}

.bubble-track{display:flex;gap:32px;width:max-content;animation:marquee 44s linear infinite;
  will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.bubble-marquee{overflow:hidden;position:relative;width:100%;padding:6px 0 20px}
.bubble-marquee:hover .bubble-track,.bubble-marquee:focus-within .bubble-track{animation-play-state:paused}
/* Figma実測（42:4509等）はライトブルー#3D90E1だが、白い小文字とのコントラストが3.35:1に
   とどまるため、実装は同系統のprimary #1863D3を使う。角丸12px・幅304px。
   吹き出しの尻尾も実アセット（bubble-tail.svg）に差し替える。.bubbleはこのページのマーキー
   専用（一覧ページの.bubble-gridは別途--ds-brand-primary-lightで独自に上書き済み）のため直接更新する */
.bubble{position:relative;flex:none;width:304px;background:var(--fill);color:#fff;border-radius:12px;padding:16px 24px;text-decoration:none;cursor:pointer}
.bubble::after{content:"";position:absolute;left:32px;bottom:-15px;width:35px;height:15px;
  background:url('/assets/ds/bubble-tail.svg') no-repeat;background-size:contain;border:0}
.bubble .txt{font-size:16px;line-height:1.5;margin:0}
.bubble .who{margin-top:8px;font-size:12px;text-align:right;opacity:.92}
.bubble .who b{font-weight:500}

/* 一覧ページ用：吹き出しを3列グリッドで並べる（流さない）。gapはFigma実測(58:7645)の
   単一値32pxに統一（旧34/24は暫定値だったため差し替え） */
.bubble-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch}
.bubble-grid .bubble{width:auto;margin-bottom:14px}
a.bubble-link{text-decoration:none;color:#fff;display:block;transition:transform .18s,box-shadow .18s}
a.bubble-link:active{transform:translateY(-1px)}
@media(max-width:1024px){.bubble-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bubble-grid{grid-template-columns:1fr}}

/* 先輩の声一覧：吹き出しの外側・下に人物アイコン＋氏名/所属を置く2段構成（Figma実測 58:7646-58:7657）。
   .bubbleの塗り色・paddingはトップページのマーキー（.bubble-marquee、padding16/24）と共用のため、
   ここでは .bubble-grid にスコープを絞って上書きする（ベースの.bubbleは変更しない）。
   - padding: 実測は水平16・垂直12（マーキー版は水平24・垂直16で逆）
   - drop-shadow: 実測 2px 2px 4px rgba(34,40,120,.25)（マーキー版には無い）
   - 尻尾(::after)の位置: 実測は吹き出し右側（right:32px）。マーキー版は左寄せのため
     ベースの.bubble::afterは変更せず、ここだけleft/rightを上書きする */
.bubble-grid .bubble-cell{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;min-width:0}
.bubble-grid .bubble-cell > .bubble-link{display:flex;flex-direction:column}
.bubble-grid .bubble-cell > .bubble-link > .txt{flex:1;align-items:flex-start}
.bubble-grid .bubble-person{align-self:start}
.bubble-grid .bubble{background:var(--ds-brand-primary);padding:12px 16px;
  filter:drop-shadow(2px 2px 4px rgba(34,40,120,.25))}
.bubble-grid .bubble::after{border-top-color:var(--ds-brand-primary);left:auto;right:32px}
/* 吹き出し本文：実測14px/bold/lh21（マーキー版の.txtは16px/regular）。
   min-heightは3行分。実際の行数差は親のsubgridで吸収し、タグと人物紹介の位置も揃える */
.bubble-grid .bubble .txt{font-size:14px;font-weight:700;line-height:1.5;min-height:63px;
  display:flex;align-items:center}
/* 「もっと見る」：この吹き出しは.tint外にあるため.more-linkの白文字化(section.block.tint内の
   ルール)が効かない。実測は12px/bold/white */
.bubble-grid .more-link{color:#fff;font-size:12px}
.bubble-person{display:flex;align-items:center;gap:16px;margin-top:0}
/* アバター：実測はイラストアセット(102×120)。旧実装の自作アイコン(34×34線画)から差し替え */
.bp-avatar{flex:none;width:102px;height:120px;display:block}
/* 氏名・所属：実測はどちらも同じ太さ・同じ色（氏名だけ強調する差はない） */
.bp-who{font-size:14px;line-height:1.5;color:var(--ink-800)}
.bp-who b{display:block;font-weight:700;font-size:14px}
.bp-who .bp-org{display:block;color:var(--ink-800);font-weight:700;margin-top:8px}

/* ---------- サポート：吹き出し＋イラスト ---------- */
.ask-row{display:flex;justify-content:center;align-items:flex-end;gap:32px;flex-wrap:wrap;margin:0 0 -6px}
/* Figma実測（89:8109等）: 3つとも高さ66pxで揃う・文字14px太字・色は brand/accent の濃紺(#00315B)。
   .ask-row/.ask はこのページ専用のため直接実測値に更新する */
.ask{position:relative;background:#fff;border-radius:999px;padding:14px 24px;min-height:66px;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  color:#00315B;box-shadow:var(--shadow);text-align:center;line-height:1.5}
.ask::after{content:"";position:absolute;left:50%;bottom:-6px;width:9px;height:9px;background:#fff;border-radius:50%}
.ask::before{content:"";position:absolute;left:calc(50% + 12px);bottom:-15px;width:5px;height:5px;background:#fff;border-radius:50%}
.support-art{display:flex;justify-content:center;margin:22px 0 34px}
.support-art img{width:min(382px,80%);height:auto;display:block}

/* ---------- 編集スプリット（写真＋テキスト） ---------- */
.split-ed{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.split-ed>*{min-width:0}
.split-ed .ph{min-height:370px;aspect-ratio:auto;background-size:cover;background-position:center}
.split-ed .tx{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;background:var(--card)}
.split-ed .tx h2{font-size:28px;font-weight:var(--f-display);line-height:1.28;margin:9px 0 14px;letter-spacing:var(--track-tight)}
.split-ed .tx .ey{display:inline-block;font-size:14px;letter-spacing:.12em;font-weight:700;color:var(--eyebrow);text-transform:uppercase;line-height:1.3;margin-bottom:6px}
.split-ed.flip .ph{order:2}

/* ---------- グラデーションパネル（WHY型） ---------- */
.panel-grad{position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#fff;
  background:linear-gradient(120deg,var(--grad1) 0%,var(--grad2) 78%);padding:44px 42px}
.panel-grad .ey{display:inline-block;font-size:11px;letter-spacing:var(--track-wide);font-weight:800;
  color:rgba(255,255,255,.9);text-transform:uppercase}
.panel-grad h2{font-size:clamp(22px,2.8vw,29px);margin:10px 0 12px;font-weight:var(--f-display);line-height:1.28;letter-spacing:var(--track-tight)}
.panel-grad p.lead{font-size:14.5px;opacity:.92;max-width:26em;margin:0 0 22px;line-height:1.75}
.panel-grad .btn-white{margin-top:8px}
.panel-grad .map{max-width:220px;margin:0 auto;opacity:.9}
.panel-grad .grid{position:relative;z-index:1}
/* .panel-grad 内のみ白カード（WHYパネルの .icard は上の定義を使う） */
.panel-grad .icard{background:#fff;box-shadow:var(--ds-shadow-raised);text-align:left;padding:22px 20px}
.panel-grad .icard .ic{width:38px;height:38px;margin:0 0 12px}
.panel-grad .icard .ic svg{width:26px;height:26px;stroke:var(--accent)}
.panel-grad .icard h4{margin:0 0 6px;font-size:15px;color:var(--ink)}
.panel-grad .icard p{margin:0;font-size:13px;color:var(--sub);line-height:1.65}

/* ---------- 運営機関ロゴ ---------- */
.orgs{text-align:center;margin:8px 0 0}
.orgs-label{font-size:11px;letter-spacing:.14em;font-weight:800;color:var(--sub);text-transform:uppercase}
.orgs-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:14px 0 4px}
.org{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 20px;height:66px;display:inline-flex;align-items:center;box-shadow:var(--shadow)}
.org img{height:34px;width:auto;display:block}
.orgs-note{max-width:48em;margin:10px auto 0;color:var(--sub);font-size:14px;line-height:1.7}

/* ---------- フッタ：白地・濃色文字のライト構成 ---------- */
.site-footer{background:#fff;color:var(--ink);padding:0 0 26px;font-size:14px;border-top:1px solid var(--line)}
.site-footer .container{padding-top:54px}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.site-footer a{color:var(--ink)}
.site-footer a:hover{color:var(--accent)}
.site-footer h5{color:var(--ink);font-size:14px;font-weight:var(--f-display);letter-spacing:.02em;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:11px 0;font-size:13.5px}
.site-footer p{color:var(--sub)!important}
.site-footer .fbrand{display:flex;align-items:center;gap:10px;font-weight:var(--f-display);color:var(--ink);font-size:16px;margin-bottom:16px;line-height:1.5}
.site-footer .fbrand .flogo{height:26px;width:auto;background:#fff;border-radius:var(--radius-sm);padding:0;margin-right:4px}
.site-footer .program-disclaimer{max-width:720px;margin:28px auto 0;text-align:center;font-size:12px;line-height:1.75;color:var(--sub)}
.site-footer .copy{border-top:0;margin-top:26px;padding-top:18px;font-size:12px;color:var(--sub);
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;text-align:center}
.switch-link{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:700;color:var(--ink);margin:8px 8px 0 0}
.switch-link:hover{background:var(--accent-tint);border-color:var(--accent);text-decoration:none;color:var(--accent)}
/* トップページ専用: フッターのサイト切替リンクを Figma実測の塗りボタン調にする修飾クラス。
   .switch-link 本体（多数のページのフッターで共用）は変更しない */
.switch-link.switch-btn{background:var(--fill);border-color:transparent;border-radius:var(--ds-radius-8);
  padding:13px 20px;color:#fff}
.switch-link.switch-btn:hover{background:var(--ink-fixed);border-color:transparent;color:#fff}
.flogos{display:flex;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line);margin-top:34px;padding-top:26px}
.flogos .flabel{font-size:11px;color:var(--sub);font-weight:700;margin-right:4px}
.flogos .fl{background:#fff;border-radius:0;padding:0;display:inline-flex;align-items:center;height:34px}
.flogos .fl img{height:28px;width:auto;display:block}

/* ---------- prev/next ---------- */
.prevnext{display:flex;justify-content:space-between;gap:12px;margin-top:30px;flex-wrap:wrap}
.prevnext a{flex:1;min-width:220px;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.prevnext a{transition:box-shadow .18s,transform .18s}
.prevnext a:hover{box-shadow:var(--shadow-lg);text-decoration:none;transform:translateY(-2px)}
.prevnext .l{font-size:11.5px;color:var(--sub)}
.prevnext .t{font-weight:800;color:var(--accent)}
/* 記事詳細（先輩の声）の前後ナビゲーション：Figma実測は左右いっぱいのカード（.prevnext、
   40ファイル超で共有のため変更しない）ではなく、中央に並んだ単純な.btn2個。
   専用の軽量ラッパーだけを新設する */
/* Figma実測（24:8273）: gap32・上96px（section.block.interview-block側の
   pt-96とは別に、本文＋写真ブロックとボタン列の間にこの余白が入る） */
.prevnext-btns{display:flex;gap:var(--ds-space-32);justify-content:center;flex-wrap:wrap;margin-top:var(--ds-space-96)}

/* ---------- ユーティリティ ---------- */
.center{text-align:center}
.right{text-align:right}
.mt-l{margin-top:38px}
.mt-m{margin-top:22px}
.muted{color:var(--sub)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
/* 注記：左のアクセント罫や色地は使わず、地色＋1px枠のニュートラルな囲みにする */
.note{background:var(--bg);border:1px solid var(--line);border-radius:var(--ds-radius-6);
  padding:16px 20px;font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh);
  color:var(--ink-800)}
section.block.tint .note{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.34);color:#fff}
.form .note,.members-cta .note{background:var(--bg);border-color:var(--line);color:var(--ink-800)}

/* ---------- レスポンシブ（1024 / 760 / 600 は維持） ---------- */
@media(min-width:1025px){
  html.lang-mn .nav-links,html.is-member .nav-links{display:none;position:absolute;top:80px;left:0;right:0;background:var(--accent);
    flex-direction:column;align-items:stretch;gap:0;padding:8px;z-index:60}
  html.lang-mn .nav-links.open,html.is-member .nav-links.open{display:flex}
  html.lang-mn .nav-links a,html.is-member .nav-links a{padding:13px 15px;border-radius:var(--radius-sm)}
  html.lang-mn .nav-links a:hover,html.lang-mn .nav-links a.active,
  html.is-member .nav-links a:hover,html.is-member .nav-links a.active{background:rgba(10,18,28,.22);color:#fff}
  html.lang-mn .nav-toggle,html.is-member .nav-toggle{display:inline-flex}
}
@media(max-width:1024px){
  .nav-bar{position:static}
  .nav-links{display:none;position:absolute;top:80px;left:0;right:0;background:var(--accent);flex-direction:column;
    align-items:stretch;gap:0;padding:8px;z-index:60;margin:0}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 15px;border-radius:var(--radius-sm)}
  .nav-links a:hover,.nav-links a.active{background:rgba(10,18,28,.22);color:#fff}
  .nav-toggle{display:inline-flex}
  .nav .btn.apply-cta{display:none}
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .split-ed{grid-template-columns:1fr}
  .split-ed.flip .ph{order:0}
  .split-ed .ph{min-height:240px}
  .split-ed .tx{padding:32px 28px}
  .panel-grad .grid.cols-2{grid-template-columns:1fr 1fr}
  /* 新コンポーネント */
  .co-grid{grid-template-columns:repeat(2,1fr)}
  .step-cards{grid-template-columns:1fr;gap:26px}
  .news-block{grid-template-columns:1fr;gap:20px}
  .news-block.news-block--home{grid-template-columns:1fr}
}
@media(max-width:760px){
  .news-strip{grid-template-columns:1fr}
  /* モバイルは616pxだと縦に間延びするため詰める */
  .hero-full{height:auto;min-height:440px}
  .hero-full .inner{padding:32px 20px 24px}
  .hero-full h1{font-size:26px;line-height:1.72}
  .facts{grid-template-columns:1fr 1fr}
  .panel-grad{padding:32px 26px}
  .panel-grad .grid.cols-2{grid-template-columns:1fr}
  .news-list a{grid-template-columns:1fr;gap:5px;padding:16px 4px}
  .ask-row{gap:10px}
  .ask{font-size:12px;padding:11px 18px}
  .support-art img{width:78%}
}
@media(max-width:600px){
  .nav{gap:6px;padding-left:14px;padding-right:10px}
  .nav-bar{padding:0;margin-left:0;gap:8px}
  .co-grid{grid-template-columns:1fr}
  .bubble{width:250px}
  .btn{min-width:0;width:100%;max-width:320px}
  .cta-row{width:100%}
  .brand{font-size:14.5px;gap:6px;min-width:0;flex:1 1 auto;overflow:hidden}
  .brand .bname{max-width:100px}
  .brand .bname small{display:none}
  .nav-actions{margin-left:auto;gap:6px}
  .lang-toggle button{min-width:44px;min-height:44px;padding:8px 9px}
  .login-link{display:none}
  .nav-toggle{margin-left:0;flex:none;width:44px;height:44px}
  .hero-inner{padding:56px 20px 60px}
  .hero h1{font-size:26px;line-break:anywhere}
  .hero p.lead{font-size:15.5px}
  .hero-stats{flex-direction:row;gap:7px;flex-wrap:nowrap}
  .hero-full .hero-stats .s{min-width:0;flex:1;padding:8px 6px}
  .hero-full .hero-stats .s b{font-size:16px}
  .hero-full .hero-stats .s>span{font-size:9.5px;line-height:1.35}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .prose{padding:0}
  .form{padding:22px}
  .field select{width:100%;max-width:100%}
  .site-footer .cols{grid-template-columns:1fr}
  .page-head h1{font-size:27px}
  .co-title{font-size:27px;line-height:1.3}
  .demobar{font-size:10.5px}
  .login-link span{display:none}
  .head-row{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- フォームページ（v2レイアウト：title → 相談種別ピル → Form 640 → 相談先の反転帯） ---------- */
.topic-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  max-width:var(--ds-measure-form);margin:0 auto 28px}
.topic-pills .tp{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);
  color:var(--ink-800);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:500;
  transition:background var(--ds-motion-fast) var(--ds-ease),color var(--ds-motion-fast) var(--ds-ease),
             border-color var(--ds-motion-fast) var(--ds-ease)}
.topic-pills .tp:hover{border-color:var(--fill);color:var(--fill)}
.topic-pills .tp.is-on{background:var(--fill);border-color:var(--fill);color:#fff;font-weight:700}
.topic-pills .tp:focus-visible{outline:2px solid var(--fill);outline-offset:2px}

/* 相談先の反転帯 */
.contact-band{padding:56px 0}
.contact-band .inner{max-width:var(--ds-measure-form);margin:0 auto}
.contact-band h2{font-size:var(--ds-type-h3-size);line-height:var(--ds-type-h3-lh);font-weight:700;margin:0 0 var(--ds-space-16)}
.contact-band p{font-size:var(--ds-type-body-size);line-height:var(--ds-type-body-lh);margin:0 0 var(--ds-space-16)}
.contact-band p:last-child{margin-bottom:0}
.contact-band .who{font-size:var(--ds-type-bodys-size);font-weight:700;letter-spacing:.04em;
  display:inline-block;border:1px solid currentColor;border-radius:999px;padding:5px 14px;margin-bottom:var(--ds-space-16)}

/* フッター：ゲスト用/会員用の見出し出し分け */
html.is-member .site-footer h5.guest-only{display:none}
html.is-guest .site-footer h5[data-member]{display:none}

/* ---------- 企業詳細：PR写真ギャラリー / 会社概要テーブル ---------- */
.pr-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 34px}
.pr-gallery figure{margin:0}
.pr-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--ds-radius-6);
  border:1px solid var(--line);display:block;background:var(--bg)}
.pr-gallery.one{grid-template-columns:1fr;max-width:746px}
.co-kv{width:100%;aspect-ratio:745/402;object-fit:cover;border-radius:var(--ds-radius-8);
  border:1px solid var(--line);display:block;margin-bottom:26px;background:var(--bg)}
/* 企業詳細ヒーロー（参加企業27社の共通テンプレート）。
   実写真がある企業は写真、ロゴのみの企業は同じ右カラムに白いロゴパネルを置く。
   Figma実測（node 24:7861）: 固定幅289pxの左カラムに社名見出し＋業種／受入学科／
   受入人数／本社所在地の定義リストを「ラベル120px固定・値可変・下罫」で並べ、
   残り幅に実写真を配置。左カラムは行全体よりpt-24ぶん低い位置から始まる。
   見出し直下から本文行の終わりまで(.co-story)、右端は.co-heroと同じ列に揃える。 */
.co-detail{padding:32px 0 96px}
.co-hero{display:grid;grid-template-columns:289px 1fr;gap:64px;align-items:start;margin-bottom:var(--ds-space-64)}
.co-hero .co-kv{margin-bottom:0}
.co-hero-left{padding-top:24px}
.co-title{margin:0 0 32px;font-size:var(--ds-type-h1-size);line-height:var(--ds-type-h1-lh);
  letter-spacing:var(--ds-type-h1-ls);font-weight:700;color:var(--ink)}
.co-lead{margin:-16px 0 24px;font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh);
  font-weight:500;color:var(--ink-800)}
.co-kv.co-kv--logo{display:flex;align-items:center;justify-content:center;padding:48px;
  background:var(--ds-surface-white);object-fit:initial}
.co-kv.co-kv--logo img{display:block;width:auto;height:auto;max-width:min(76%,520px);max-height:220px;object-fit:contain}
.co-facts{margin:0}
.co-facts>div{display:grid;grid-template-columns:120px 1fr;gap:var(--ds-space-16);padding:16px 0;
  border-bottom:1px solid var(--divider)}
.co-facts>div:first-child{border-top:1px solid var(--divider)}
.co-facts dt{margin:0;font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh);font-weight:500;color:var(--sub)}
.co-facts dd{margin:0;font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh);font-weight:500;color:var(--ink)}
/* 取材記事本体（.prose共通ルールは54ファイル超で共用のため変更せず、.co-storyで
   このページだけ上書きする）。Figma実測: 中央寄せ・読み幅832ではなく.co-heroと同じ
   左端に揃えたフル幅。見出しは上罫なしで64px空け、段落は16px間隔（h2/pとも上マージンのみ）。 */
.co-story{max-width:none;margin:0}
.co-detail>.container>.prose{max-width:746px;margin-left:auto;margin-right:auto}
.co-story h2{margin:64px 0 0;padding-top:0;border-top:0;font-size:20px;line-height:30px;
  letter-spacing:-0.42px;font-weight:700;color:var(--ink)}
.co-story h2:first-child{margin-top:0}
.co-story p{margin:16px 0 0;font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
/* 白カード注記（節末尾の補足）。共有.noteは地色＋枠のニュートラル版のため変更せず、
   ここだけFigma実測（白背景・枠なし・角丸10px）に上書きする */
.co-story .note{background:var(--card);border:0;border-radius:10px;padding:16px;font-weight:500}
/* 「先輩の声を読む」の吹き出しバッジ：Figma実測アセット(32×23.8、3ドット＋しっぽ)を使用。
   共有.ic-bubble（別意匠）は変更せず、このページ専用の新規アイコンとして追加 */
.more-link .ic-quote-badge{flex:none;width:32px;height:23.8232px;display:block;color:var(--fill)}
/* 企業一覧／次の企業ボタン列：Figma実測 gap-32・中央寄せ・上96px */
.co-cta-row{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;margin-top:var(--ds-space-96)}
.spec{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:var(--ds-type-bodys-size);
  line-height:var(--ds-type-bodys-lh)}
.spec th,.spec td{text-align:left;vertical-align:top;padding:13px 0;border-bottom:1px solid var(--divider)}
.spec th{width:11em;font-weight:700;color:var(--ink-800);white-space:nowrap;padding-right:18px}
.spec td{color:var(--ink-800)}
.spec tr:first-child th,.spec tr:first-child td{border-top:1px solid var(--divider)}
.co-item .badge.year{background:var(--fill);color:#fff}
@media(max-width:760px){
  .pr-gallery{grid-template-columns:1fr}
  .co-hero{grid-template-columns:1fr;gap:20px}
  .co-hero-left{padding-top:0}
  .co-kv.co-kv--logo{min-height:220px;padding:32px;aspect-ratio:auto}
  .co-kv.co-kv--logo img{max-width:82%;max-height:150px}
  .spec th,.spec td{display:block;width:auto;padding:0;border:0}
  .spec th{padding-top:14px;font-size:12.5px;color:var(--sub)}
  .spec td{padding-bottom:14px;border-bottom:1px solid var(--divider)}
  .spec tr:first-child th{border-top:0}
}

/* ログイン済みなら「ログインすると見られるコンテンツ」の案内は不要なので出さない */
html.is-member [data-guest-only]{display:none!important}

/* ---------- 参画企業ロゴウォール（企業サイトTOPの社会的証明） ---------- */
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.logo-wall .lw{background:var(--ds-surface-white);border:1px solid var(--line);
  border-radius:var(--ds-radius-6);height:78px;display:flex;align-items:center;justify-content:center;padding:12px}
.logo-wall .lw img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.logo-wall .lw span{font-size:12px;font-weight:700;color:var(--fill);text-align:center;line-height:1.4}
@media(max-width:1024px){.logo-wall{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.logo-wall{grid-template-columns:repeat(3,1fr)}.logo-wall .lw{height:64px}}

/* ---------- 写真マーキー（TOPの実写ストリップ） ---------- */
.marquee{overflow:hidden;position:relative;width:100%;padding:4px 0}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.marquee.on-tint::before{background:linear-gradient(90deg,var(--accent-tint),transparent)}
.marquee.on-tint::after{background:linear-gradient(270deg,var(--accent-tint),transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marquee 34s linear infinite;
  will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.marquee-track:not(.is-measured),.bubble-track:not(.is-measured){animation-play-state:paused}
.marquee.reverse .marquee-track{animation-direction:reverse;animation-duration:38s}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee.is-paused .marquee-track,.marquee.is-page-hidden .marquee-track,
.bubble-marquee.is-paused .bubble-track,.bubble-marquee.is-page-hidden .bubble-track{animation-play-state:paused}
.marquee-track img{height:180px;width:auto;max-width:none;border-radius:var(--radius-sm);object-fit:cover;display:block;flex:none}

@media(prefers-reduced-motion:reduce){
  .marquee-track,.bubble-track{animation:none!important;transform:none!important;will-change:auto}
}

/* 指標カードが2〜3枚のときは、4カラム固定だと右が空くので列数を合わせる */
.facts:has(> .fact:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.facts:has(> .fact:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}

/* 未ログイン時は間の節が消えて反転帯が連続することがあるので、区切り線を入れる */
section.block.tint[data-guest-only]{border-top:1px solid rgba(255,255,255,.24)}


/* 節の中の小見出し（Figma：WHY 節「受け入れ企業が感じた4つのメリット」） */
.sub-head{margin:0 0 20px;font-size:var(--ds-type-h3-size);line-height:var(--ds-type-h3-lh);
  font-weight:700;color:var(--ink);letter-spacing:-.005em}

/* ---------- チェックリスト（プログラムページ「できること」フレーム実測）----------
   濃紺角丸チェックボックス＋広めの行間のチェック意匠。「ログインで見れる情報」の
   .check-card とアイコンを共有する。.checklistはこのページ専用クラス（.proseの
   読み幅832では実測のリスト幅979に対して狭すぎるため、.proseには入れずコンテナ
   直下に置く。それに伴いセレクタも.prose .checklistから.checklistに直す）。 */
.checklist{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:16px}
.checklist li{margin:0;display:flex;align-items:flex-start;gap:12px;text-align:left}
.ic-check{display:inline-block;flex:none;width:22px;height:22px;margin-top:2px}
.ic-check svg{width:22px;height:22px;display:block}
.ic-check rect{fill:var(--fill)}
.ic-check path{fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* ---------- チェックカード（「ログイン（参加登録）で見れる情報」フレーム実測）----------
   3項目とも同一のチェックボックス意匠（円背景なし）で、カード枠・影は持たない。
   .feature（10ファイル超で共有・丸い薄青アイコン背景＋白カード）は変更せず、
   このセクション専用に新設する */
.check-card{padding:0}
.check-card .ic-check{width:24px;height:24px;margin-bottom:14px}
.check-card .ic-check svg{width:24px;height:24px}
.check-card h3{margin:0 0 8px;font-size:16.5px;font-weight:var(--f-display);color:var(--ink)}
.check-card p{margin:0;font-size:14px;color:var(--sub);line-height:1.7}

/* ---------- 動画ブロック（「動画で見る、先輩たちの長岡暮らし」フレーム実測）----------
   青地に直接見出し・動画・キャプションを乗せる、カード枠のない表現。
   .feature（10ファイル超で共有・白カード化）は変更せず、この2カラム専用に新設する */
.vv-item h3{margin:0 0 4px;font-size:16.5px;font-weight:var(--f-display);color:var(--ink)}
.vv-item p{margin:0;font-size:14px;line-height:1.7;color:var(--sub)}

/* ---------- 先輩の声一覧「動画で見る、先輩たちの長岡暮らし」専用の補正（Figma実測 24:8104）----------
   .vv-item自体はprogram/index.htmlと共通（変更しない）。このセクションだけ実測が異なる2点を
   ページ専用クラスで補う：
   1) セクション上下余白：実測はpt-32/pb-96（section.blockの既定80/80とは別）。program側の
      同フレームは現状既定のままなので、この差はここでは追わず本ページのみ補正する。
   2) 列間gap：実測32px（.gridの既定22pxのまま） */
section.block.tint.vv-section{padding:var(--ds-space-32) 0 var(--ds-space-96)}
.vv-grid{gap:32px}
.vv-featured{max-width:768px;margin:0 auto 40px}

/* ---------- 参加企業 / サポート情報の2カラム（Figma実測：1セクション内の横並び）----------
   .grid.cols-2 をそのまま使用。列内の見出しブロックは .sec-head を再利用するため、
   ここでは列間のボタン位置あわせのみ補う */
.cs-split{align-items:start}
.cs-col .sec-head{margin-bottom:26px}

/* ---------- 長岡についてページ専用（Figma実測）----------
   共有クラス（.hero-full／.map-fig／.members-cta）の基本ルールは変更せず、
   body.page-nagaoka で限定した上書きと、このページ専用の新規クラスだけを追加する。 */

/* ヒーロー：写真全体に青のデュオトーンを掛け、右側に地図のシルエットを薄く重ねる。
   見出しのベタ塗りハイライトは外し、プレーンな白文字＋シャドウにする（フレーム実測）。
   .hero-full 本体は index.html／student/index.html／company/index.html でも共有のため、
   ここでは body.page-nagaoka .hero-full ... の形でこのページだけに限定する。
   高さ・見出しサイズも実測（node 130:10639）は480px／52px・行送り78pxで、他ページが使う
   .hero-full既定の616pxとは異なるため、ここで上書きする。 */
body.page-nagaoka .hero-full{height:480px}
body.page-nagaoka .hero-full h1{font-size:clamp(26px,3.6vw,52px);line-height:1.5}
/* デュオトーン：フレーム実測は写真の上に brand/primary をopacity 80%でベタ乗せ（blend-modeなし）。
   multiply(.55)だと写真本来の彩度が残り過ぎて水色寄りになるため、実測に合わせて素のopacity合成にする */
body.page-nagaoka .hero-full .duo{position:absolute;inset:0;z-index:1;background:var(--fill);
  opacity:.74;pointer-events:none}
body.page-nagaoka .hero-full .map-deco{position:absolute;top:0;right:-6%;bottom:0;width:58%;z-index:1;
  display:flex;align-items:center;justify-content:center;opacity:.5;pointer-events:none}
body.page-nagaoka .hero-full .map-deco img{width:100%;height:auto;max-width:640px}
body.page-nagaoka .hero-full h1 .ja,body.page-nagaoka .hero-full h1 .mn{background:none;padding:0;
  text-shadow:0 2px 10px rgba(8,20,38,.55),0 0 22px rgba(8,20,38,.35)}
@media(max-width:760px){body.page-nagaoka .hero-full .map-deco{opacity:.16;width:70%}}

/* ヒーロー統計チップ：フレーム実測（130:10642ほか）は不透明な白カードではなく、
   写真の上に白枠1pxだけを乗せた透過チップ。ラベルが上・数値（接頭辞/数字/単位を
   別サイズで）が下という、共有.fact（値が上・ラベルが下）とは逆順の構成。
   .fact/.facts（27ファイル超で共有）は変更せず、専用クラスを新設する。 */
body.page-nagaoka .hero-stats-outline{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}
body.page-nagaoka .stat-chip{flex:1;min-width:132px;border:1px solid rgba(255,255,255,.92);
  border-radius:6px;padding:17px 20px;box-shadow:0 1px 2px rgba(18,33,49,.05),0 10px 26px rgba(18,33,49,.07);
  color:#fff}
body.page-nagaoka .stat-chip .lbl{display:block;font-size:12px;line-height:1.5;font-weight:400}
body.page-nagaoka .stat-chip b{display:flex;align-items:baseline;gap:4px;font-weight:700;
  font-size:clamp(20px,2vw,26px);line-height:1.2;margin-top:8px;font-variant-numeric:tabular-nums}
body.page-nagaoka .stat-chip b small{font-size:14px;font-weight:700}
@media(max-width:600px){
  body.page-nagaoka .hero-stats-outline{gap:8px;flex-wrap:nowrap}
  body.page-nagaoka .stat-chip{min-width:0;padding:10px 10px}
  body.page-nagaoka .stat-chip .lbl{font-size:10px}
  body.page-nagaoka .stat-chip b{font-size:17px;margin-top:4px}
  body.page-nagaoka .stat-chip b small{font-size:11px}
}

/* ACCESS：彩色済みの新潟県地図（長岡市ハイライト・周辺市町村名入り）を、実測どおり
   「テキスト列と高さを揃えた丸角カード」で見せる（.map-fig はこのページ専用クラス）。
   等倍の小さな中央寄せアイコン表示だった旧ルールを実測（298px高・角丸10）に更新する。 */
.map-fig{display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  align-self:stretch;min-height:260px}
.map-fig img{max-width:480px;width:100%;height:auto;filter:none;opacity:1}
body.page-nagaoka .split{align-items:flex-start}

/* 長岡の生活水準を先に説明する導入。東京との共通点と、交通・雪など実際の差を
   同じブロックで示し、過度に安心させる表現にならないようにする。 */
body.page-nagaoka .everyday-section{padding-top:var(--ds-space-96);padding-bottom:var(--ds-space-96)}
body.page-nagaoka .everyday-intro{max-width:980px;margin:0 auto 48px;text-align:center}
body.page-nagaoka .everyday-intro .ey{color:var(--fill);font-size:13px;font-weight:700;letter-spacing:.14em}
body.page-nagaoka .everyday-intro h2{margin:12px 0 24px;font-size:clamp(28px,3.1vw,44px);
  line-height:1.45;letter-spacing:var(--track-tight);color:var(--ink)}
body.page-nagaoka .everyday-intro>p{margin:0 auto;max-width:900px;font-size:17px;line-height:2;
  text-align:left;color:var(--ink)}
body.page-nagaoka .everyday-intro .everyday-difference{margin-top:24px;padding:22px 26px;
  background:var(--card);border-left:4px solid var(--fill);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow:var(--shadow);font-size:15px;line-height:1.85}
body.page-nagaoka .everyday-grid{gap:28px}
body.page-nagaoka .everyday-grid .feature{padding:26px 28px}
body.page-nagaoka .everyday-grid .feature h3{font-size:18px;color:var(--fill);margin-bottom:12px}
body.page-nagaoka .everyday-grid .feature p{font-size:15px;line-height:1.8;color:var(--ink-800)}
@media(max-width:760px){
  body.page-nagaoka .everyday-section{padding-top:64px;padding-bottom:64px}
  body.page-nagaoka .everyday-intro{margin-bottom:32px;text-align:left}
  body.page-nagaoka .everyday-intro h2{font-size:28px}
  body.page-nagaoka .everyday-intro>p{font-size:15px;line-height:1.85}
  body.page-nagaoka .everyday-intro .everyday-difference{padding:18px 20px}
}

/* 「約70人のモンゴル人コミュニティ・学友会」：フレーム実測は白カード枠＋影で
   テキストごと囲わず、写真だけに角丸・影を付けて地色に直接乗せる。.split-ed本体
   （複数ページ共有）は変更せず、この行だけ .flat で上書きする。 */
body.page-nagaoka .split-ed.flat{border:0;box-shadow:none;background:transparent;border-radius:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:center}
body.page-nagaoka .split-ed.flat .ph{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
body.page-nagaoka .split-ed.flat .tx{padding:0;background:transparent}
@media(max-width:1024px){
  body.page-nagaoka .split-ed.flat{grid-template-columns:1fr;row-gap:32px}
  body.page-nagaoka .split-ed.flat .ph{min-height:240px}
}

/* 「住まい／治安／移動…」6枚の機能カード：フレーム実測は上下16px（既定の.featureは26px）。
   .feature本体（10ファイル超で共有）は変更せず、この節だけ上書きする。 */
body.page-nagaoka .life-grid .feature{padding:16px 24px}
body.page-nagaoka .community-gallery{margin:56px 0}
body.page-nagaoka .industry-cta{margin-top:32px}
body.page-nagaoka .video-section-secondary{margin-top:72px}

body.page-nagaoka .city-character-head{max-width:920px;margin:0 auto 48px}
body.page-nagaoka .city-character-head .ey{margin-bottom:8px}
body.page-nagaoka .city-character-grid{gap:28px}
body.page-nagaoka .city-character-grid .feature{padding:28px}
body.page-nagaoka .city-character-grid .feature h3{font-size:18px;color:var(--fill);margin-bottom:12px}
body.page-nagaoka .city-character-grid .feature p{font-size:15px;line-height:1.8;color:var(--ink-fixed)}
@media(max-width:760px){
  body.page-nagaoka .city-character-head{text-align:left;margin-bottom:32px}
}

/* 「長岡の四季」：フレーム実測（24:7162ほか）はカード化された.split-edではなく、
   セクション幅いっぱいに写真とテキストが接する全面バンド（高さ372・角丸なし）。
   .container の外（section.blockの直下）に置くことで実現する、このページ専用の新規コンポーネント。 */
.season-row{display:flex;min-height:372px;width:min(80%,1440px);margin-left:auto;margin-right:auto}
.season-row .season-photo{flex:1 1 50%;background-size:cover;background-position:center;min-height:280px}
.season-row .season-text{flex:1 1 50%;background:var(--card);display:flex;flex-direction:column;
  justify-content:center;padding:48px min(64px,7vw)}
.season-row .season-text .ey{display:block;font-size:14px;font-weight:700;color:var(--fill);margin-bottom:4px}
.season-row .season-text h2{font-size:28px;line-height:1.5;font-weight:var(--f-display);margin:4px 0 12px;
  letter-spacing:var(--track-tight);color:var(--ink)}
.season-row .season-text p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.season-row+.season-row{margin-top:32px}
@media(max-width:900px){
  .season-row{flex-direction:column;min-height:0;width:calc(100% - 44px)}
  .season-row .season-photo{min-height:220px}
  .season-row .season-text{padding:28px 22px}
}

/* 「食・買い物」小見出し：フレーム実測（130:9831）は32pxの黒ではなく、
   20px／行送り30／字間-0.42・ブランドブルーの小見出し（トークンは--ds-type-hdetail-*を流用）。
   .sec-head本体（全ページ共有）は変更せず、この節専用の .food-topic で上書きする。 */
body.page-nagaoka .food-topic h2{font-size:var(--ds-type-hdetail-size);line-height:var(--ds-type-hdetail-lh);
  letter-spacing:var(--ds-type-hdetail-ls);color:var(--fill)}

/* 「来る前に知っておくと安心」：フレーム実測はカード枠なしの素のリスト（見出しも
   インク色で、ブランドブルーの.info-box h4とは異なる）。.info-box本体（サイト全体で
   共有）は変更せず、この節専用の .food-note を新設する。 */
body.page-nagaoka .food-note{margin-top:32px;padding:0;background:transparent;border:0;box-shadow:none}
body.page-nagaoka .food-note h4{margin:0 0 16px;font-size:16px;font-weight:700;color:var(--ink)}
body.page-nagaoka .food-note ul{margin:0;padding-left:1.1em;list-style:disc}
body.page-nagaoka .food-note li{font-size:14px;line-height:1.5;margin:8px 0;color:var(--ink-800)}

/* 「ログイン（参加登録）で見れる情報」：フレーム実測（130:9677）は32pxではなく
   20px／行送り30／字間-0.42。.members-cta本体（サイト全体で共有）は変更せず、
   このページのインスタンスだけ上書きする。 */
body.page-nagaoka .members-cta .sec-head h2{font-size:var(--ds-type-hdetail-size);
  line-height:var(--ds-type-hdetail-lh);letter-spacing:var(--ds-type-hdetail-ls)}

/* 「ログイン（参加登録）で見られる情報」：チェックアイコン＋見出しが同じ行に並ぶ、
   本文量に応じた可変幅のインラインリスト（フレーム実測）。カード枠・影は持たない。
   チェックの図形は既存の .ic-check を再利用し、バッジ色だけ黒地に上書きする
  （.ic-check 本体・.feature 本体はどちらも変更しない）。 */
.check-row{display:flex;flex-wrap:wrap;gap:26px 48px;margin:0}
.check-row-item{flex:1 1 200px;max-width:340px}
.check-row-item .ic-check rect{fill:var(--ink-fixed)}
.check-row-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.check-row-head h3{margin:0;font-size:16.5px;font-weight:var(--f-display);color:var(--ink)}
.check-row-item p{margin:0;font-size:14px;color:var(--sub);line-height:1.7}

/* ================================================================
   プログラムページ専用（student/program/index.html — Figma node 24:6490
   の実測に合わせて作り直し）。.checklist/.check-card/.cs-split/.fact-fill/
   .cd-title/.flow-* はこのページ専用の新規クラスなので直接値を持たせる。
   .split-ed/.sec-head/.members-cta/.ic-check/.grid.cols-3/section.block は
   他ページと共有のため、body.page-program でスコープした上書きに限定する。
   ================================================================ */

/* 「できること」：見出し＋チェックリスト＋ファクトを .prose（読み幅832）から出し、
   コンテナ幅で見せる（Figma実測: リスト幅979 / コンテナ1088 ≒ ほぼ全幅）。
   見出しは h2 相当（28px/42・中央）に直す（旧: .prose h2 の 18px+上罫が誤って掛かっていた）。 */
.cd-title{font-size:var(--ds-type-h2-size);line-height:var(--ds-type-h2-lh);font-weight:700;
  color:var(--ink);letter-spacing:var(--track-tight);margin:0 0 var(--ds-space-32)}
.checklist{gap:var(--ds-space-32)}
.checklist .ic-check{width:24px;height:24px;margin-top:0}
.checklist .ic-check svg{width:24px;height:24px}
.checklist .ic-check path{stroke-width:1.4}
.facts.facts-cd{margin-top:var(--ds-space-32)}
/* ファクトの塗りチップ：Figma実測（130:10860ほか）角丸4・padding24/16、
   ラベル12px/値16px（.fact-fillはこのページ専用クラスのため直接補正） */
.fact.fact-fill{border-radius:var(--ds-radius-4);padding:24px 16px}
.fact.fact-fill span{font-size:var(--ds-type-caption-size);line-height:var(--ds-type-caption-lh);margin:0 0 4px}
.fact.fact-fill b{font-size:var(--ds-type-body-size);line-height:var(--ds-type-body-lh)}
.fact.fact-fill b span{color:#fff;font:inherit;line-height:inherit;margin:0;order:initial}
/* 「約 2 週間」を1つの値として横並びに保つ。汎用の .fact-fill span が
   ラベル用の order/display を子孫spanにも適用していたため、狭いカードで
   3行に崩れていた。言語コンテナだけを行内flexにし、数字だけを強調する。 */
.facts-cd .fact-fill b>.ja,
.facts-cd .fact-fill b>.mn{align-items:baseline;gap:4px;white-space:nowrap}
html.lang-ja .facts-cd .fact-fill b>.ja,
html.lang-mn .facts-cd .fact-fill b>.mn{display:inline-flex}
.facts-cd .fact-fill .metric-number{font-size:32px;font-weight:800;line-height:1}
.facts-cd .fact-fill .metric-prefix,
.facts-cd .fact-fill .metric-unit{font-size:var(--ds-type-body-size);font-weight:700;line-height:1.2}

/* 「インターンシップの流れ」：見出し列＋タイムライン列の横並い（Figma実測: gap32、
   左列は本文幅で自然収縮、右列がflex-1）。旧実装は見出しの下にタイムラインを
   縦積みしていたが、Figmaでは左右2カラム。このセクションだけ section.block の
   上下80pxではなく32pxなので、専用クラス.flow-secをbody.page-programでスコープする。 */
body.page-program .flow-sec{padding:32px 0}
.flow-row{display:flex;gap:32px;align-items:flex-start}
.flow-head{flex:0 0 400px;max-width:400px}
.flow-head .sec-head{margin-bottom:0}
.flow-body{flex:1;min-width:0;padding-top:16px}
@media(max-width:1024px){
  .flow-row{flex-direction:column;gap:24px}
  .flow-head{flex:none;max-width:none}
  .flow-body{padding-top:0}
}
/* 「なぜ長岡なのか」の直後に隙間なく続く「動画で見る」節は、Figma実測では
   同じ青帯が地続きになる（動画側はpb-80のみでpt無し）。隣り合う2つ目のtint
   セクションの上パディングだけ打ち消す（他ページのtint隣接には影響させない）。 */
body.page-program section.block.tint + section.block.tint{padding-top:0}

/* 「なぜ長岡なのか」：写真列は1.05frの比率ではなくFigma実測の固定421px、
   高さは421:275のアスペクト比で伸縮させる。.split-edはnagaokaページとも共有の
   ため、このページの当該インスタンスにだけ付けた.prog-whyでスコープする。 */
/* align-items:startを明示しないと、グリッドの既定(stretch)でこの列が
   テキスト列の高さまで縦に引き伸ばされ、aspect-ratio指定と競合して
   幅が421pxを超えて膨張してしまう（テキスト列にはみ出す不具合を確認済み）。 */
.split-ed.prog-why{grid-template-columns:minmax(360px,42%) minmax(0,1fr);align-items:stretch}
.split-ed.prog-why .ph{aspect-ratio:auto;min-height:100%;width:100%}
@media(max-width:1024px){
  .split-ed.prog-why{grid-template-columns:1fr}
  .split-ed.prog-why .ph{aspect-ratio:16/9}
}

/* トップの「もっと見る」と写真帯を別のまとまりとして読めるだけ離す。 */
body.page-home section.block.tint>.marquee{margin-top:64px}
body.page-nagaoka .season-section .sec-head{margin-bottom:56px!important}

/* 「動画で見る、先輩たちの長岡暮らし」：見出しは.sec-head既定のh2(28px)ではなく
   Figma実測でh1スケール（32px/48/-0.84）。.sec-head--lgでこの箇所だけ上書きする。 */
.sec-head.sec-head--lg h2{font-size:var(--ds-type-h1-size);line-height:var(--ds-type-h1-lh);
  letter-spacing:var(--ds-type-h1-ls)}

/* 「参加企業／サポート情報」：等幅2カラムグリッドではなく、Figma実測の
   justify-between（左は本文幅で自然収縮、右は固定560px、間の余白は可変）。
   .cs-splitはこのページ専用クラスのため.grid.cols-2を外して直接置き換える。 */
.cs-split{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cs-split .cs-col{flex:0 1 auto}
/* 左列の.sec-head pは共有ルール(max-width:46em=736px)のままだと右列560pxと
   同じ行に収まらず折り返ってしまう（Figma実測は左列も自然幅≒449px）。
   このページ専用の.cs-colに限定して読み幅を絞る */
.cs-split .cs-col:first-child{max-width:480px}
.cs-split .cs-col:last-child{flex:0 1 560px;max-width:560px}
@media(max-width:760px){
  .cs-split{flex-direction:column}
  .cs-split .cs-col:last-child{max-width:none}
}

/* 「ログイン（参加登録）で見れる情報」：Figmaでは背景が地色のままで青帯(.tint)は
   無い（HTML側でtintクラスを既に外している）。カードだけ実測の角丸16・
   padding24/32に補正し、見出しはh2(28px)ではなくh3寄りの実測（20px/30/-0.42）。
   .members-ctaは他ページとも共有のため、body.page-programでスコープする。 */
body.page-program .members-cta{border-radius:16px;padding:24px 32px}
body.page-program .members-cta .sec-head{margin-bottom:0}
body.page-program .members-cta .sec-head h2{font-size:var(--ds-type-hdetail-size);
  line-height:var(--ds-type-hdetail-lh);letter-spacing:var(--ds-type-hdetail-ls)}
body.page-program .members-cta .grid.cols-3{gap:32px}
body.page-program .members-cta .cta-row{gap:16px}

/* チェックカード：アイコンと見出しは縦積みではなく同じ行に並ぶ（Figma実測gap8）。
   padding0ではなく上下32pxの余白を持つ。アイコン色は青ではなく濃色インク。
   .check-cardはこのページ専用クラスのため直接補正する。 */
.check-card{padding:32px 0}
.cc-head{display:flex;align-items:center;gap:8px;margin:0}
.check-card h3{margin:0}
.check-card p{margin:8px 0 0;line-height:1.5}
.check-card .ic-check{width:24px;height:24px;margin:0}
.check-card .ic-check svg{width:24px;height:24px}
.check-card .ic-check path{stroke-width:1.4}
.check-card .ic-check rect{fill:var(--ink-800)}

/* ---------- 就労手続き・サポート体制 一覧（student/legal/index.html 専用） ----------
   Figma実測（node 24:8493, get_design_context）と現行実装のズレをこのページだけ閉じて補正する。
   company/legal/index.html（同型ページ）で先に確立した補正パターンを踏襲。
   1) パンくず→h1：Figmaはcrumbs側pt-16pxのみ＋タイトル側16pxで計32px。共有.crumbsのpb16px
      ＋共有.page-headの既定36pxのままだと16+36=52pxになり間延びするため、
      このページだけpage-headの上余白を16pxに詰める。
   2) 見出し文字色：h1・段階見出し(h2)・カード本文は、フレーム上ではどれも同じ
      text/default（#232A33 = --ink-800）で塗られている。共有の.page-head h1 / .sec-head h2 /
      .card pはvar(--ink)（--ink-900 = #12212F）を使っており実測より一段濃い。
      共有ルールは変えず、このページの該当箇所だけ--ink-800に補正する。
   3) 段階見出し(h2)のサイズ：共有.sec-head-smは見出し/3トークン(18px/lh27)を前提にしているが、
      このページの見出しは実測20px/lh30/字間-0.42px（heading/detailトークン、programページの
      .members-ctaでも同トークンを流用済み）。.sec-head-smはnagaoka.htmlでも使われているため
      本体は変えず、このページだけ上書きする。
   4) セクション間隔：タイトル直後は「外側コンテナpt-32＋先頭グループ自身pt-32」で計64px、
      以降の段階間はpt-32px、見出し→カード列はpt-16px。共有.block(80px/80px)・
      段階間の従来のmargin-top:40pxのままだと間延びするため、このページ専用に詰める。
   5) カード列：フレームはカード幅400px固定・gap24px（横・縦とも）で並び、読み幅832pxちょうどに
      収まる（「その他のサポート情報」節はカード1枚・同じく400px・左寄せ）。共有.grid.cols-2は
      コンテナを50/50に割るだけで固定400pxを再現できないため、このページ専用の.legal-cardsを
      flexで新設する（.grid.cols-2自体は変更しない）。また共有.containerは変えず、
      この節専用の.legal-list-wrapでmax-widthを876px（左右22pxパディング分を差し引いた
      実効832px）に広げる。
   6) カード見出し・本文のタイポ：共有.card h3は見出し/cardトークン(17.5px/lh31.5/字間-0.35)、
      共有.card pはbody/readトークン(14px/lh25.2)を前提にしているが、Figma実測はBody/L/Bold
      (18px/lh27/字間0)・Body/S/Regular(14px/lh21/字間0)。他ページでも使われる.card本体は
      変えず、このページの.card-listだけ上書きする。
   7) CTA見出し色：共有.cta-band h2はvar(--accent)（プライマリ）だが、実測はbrand/primary-strong
      （--ds-brand-primary-dark）。ホーム専用の.cta-band--homeと同じ考え方で、このページ専用の
      .cta-band--legalを新設する（共有.cta-band本体は変えない）。
   8) リード文の折り返し幅：共有.page-head pのmax-width:46em（≈736px）のままだと、Figma実測で
      2文目に追加した長文（「応募から入社後の定着まで…」）が本来より狭く何行にも折り返される。
      title節はカード列の.legal-list-wrap（832px相当）とは別のFigmaフレームで、コンテナ幅
      1088pxいっぱいまで折り返す設計（46em制限なし。student/login.htmlの.page-head--login pや
      company/login.htmlの.page-head.login-head pと同一パターン）のため、このページだけ解除する。
   9) カード本体：node 93:1825 ほか各カードとも bg-white + drop-shadow(0 2px 3px rgba(44,61,87,.05))
      + rounded-8のみで、枠線（border）は付いていない。.card.card-list既定（お知らせ一覧などで
      使う、枠+シャドウのカード然としたスタイル）は他ページ共有のため変えず、このページだけ
      枠線を外す（company/legal/index.htmlの.legal-list .card.card-listと同一パターン）。
   ---------- */
.page-head.legal-head{padding:16px 0 0}
.page-head.legal-head h1{color:var(--ink-800)}
.page-head.legal-head p{max-width:none}
section.block.legal-list{padding:64px 0 80px}
.legal-list-wrap.container{max-width:876px}
.legal-list .sec-head.sec-head-sm{margin:32px 0 16px}
.legal-list .sec-head.sec-head-sm.first{margin-top:0}
.legal-list .sec-head.sec-head-sm h2{font-size:var(--ds-type-hdetail-size);
  line-height:var(--ds-type-hdetail-lh);letter-spacing:var(--ds-type-hdetail-ls);color:var(--ink-800)}
.legal-list .card.card-list{border:0}
.legal-cards{display:flex;flex-wrap:wrap;gap:24px}
.legal-cards .card-list{flex:0 1 400px;max-width:400px}
.legal-list .card-list h3{font-size:var(--ds-type-h3-size);line-height:var(--ds-type-h3-lh);letter-spacing:0}
.legal-list .card-list p{color:var(--ink-800);font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh)}
.cta-band.cta-band--legal h2{color:var(--accent2)}
@media(max-width:600px){
  .legal-cards .card-list{flex:1 1 100%;max-width:none}
}

/* ---------- お問い合わせ（student/contact/index.html 専用） ----------
   Figma実測（24:9449, get_design_context）と現行実装のズレをこのページだけ閉じて補正する。
   1) パンくず→h1：他ページ同様、共有.crumbsのpb16px＋共有.page-head既定36pxのままだと
      16+36=52pxになり間延びする。Figma実測は32pxのフラットな間隔のため、.legal-head等と
      同じ考え方でこのページ専用に上書き（.page-head本体は変えない）。
   2) リード文→フォーム先頭ラベル：Figma実測48px（Form自身のpt-32＋先頭フィールドのpt-16）。
      共有section.blockの既定80/80ではなく、このセクションだけ上下パディングを差し替える。
   3) フォーム外枠：カード化させず地色に直接フィールドを並べる版。実は同じ見た目のクラスが
      apply.html用に.form.flatとしてすでに存在するため、それをそのまま再利用する
      （インラインstyleでbackground/border/paddingを都度消していたのをやめ、既存クラスに寄せた）。
   4) フィールド：ラベルはBody/S/Bold実測14px/lh21・色--ink-800（共有.fieldは13px/7px余白で
      色未指定＝ink-900のまま濃すぎた）。枠線はFigma実測 #727B86＝既存トークン--ds-ink-500
      （共有.fieldの枠は--line=#E1E8F1と薄すぎて実測と異なる）。角丸4px＝--ds-radius-4、
      背景#FBFDFF＝既存トークン--ds-surface-soft（いずれも実測と完全一致する既存トークンが
      あったのでそれを使う）。高さは通常欄52px・メッセージ欄のみ160px（共有--ds-field-hの
      48pxより実測は4px高い）。フィールド間隔は16px。
      なお必須マークの色はFigma上は素の#fb2c36（トークンに紐付かない生の値）だったが、
      デザイントークンよりraw hexは優先度が低いため（figma-design-to-codeスキルの優先順位）、
      既存トークン--ds-feedback-error-strong（#A90000）をそのまま使う。
   5) 「お問い合わせ種別」：FigmaのDropdownコンポーネント（幅288px・高さ42px）に合わせ、
      利用者が問い合わせ分類を選べるselectとして実装する。選択肢は日本語／モンゴル語を
      併記し、多言語切替にかかわらず内容を判断できるようにする。高さは他欄と揃えて52pxに
      広げてしまわないよう、
      min-heightではなくheightで固定する（min-heightだと共有.fieldのpadding:11px 14px＋
      枠1.5pxで内容の高さがすでに42pxを超えるため効かず、結局52px相当になってしまう）。
   6) 注記（箇条書き）：Figma実測はカード化せず地色にそのまま乗る素の箇条書き（共有.noteの
      背景・枠・パディングは付けない）。メッセージ欄からの間隔は実測21px。
   7) 送信ボタン手前の余白：Figma実測32px（共有.btn自体のpadding/min-widthはFigma実測と
      すでに一致しているため変更不要）。
   8) h1の色：ページ見出し共通の--ink（ink-900・#12212F）のままだと、Figma実測のtext/default
      （ink-800・#232A33）より濃く沈む。お知らせ詳細・ログイン等の他ページ専用クラスと同じく
      このページだけh1色をink-800に上書きする（共有.page-head h1本体は変更しない）。
   9) メッセージ欄（textarea）の高さ：HTML側のrows="6"属性がCSSのmin-height:160pxより
      優先されて実際は193px相当まで伸びてしまう。お問い合わせ種別と同じ理由でheightに
      変更し、Figma実測の160pxに固定する。
   共有.page-head/.crumbs/.form/.field/.note/.btn本体（他の多くのページと共有）は変更せず、
   このページ専用のクラスだけを追加して閉じた形で上書きする。 */
.page-head.page-head--form{padding:16px 0 0}
.page-head.page-head--form h1{color:var(--ink-800)}
section.block.contact-form-block{padding:48px 0 var(--ds-space-96)}
.contact-form-block .field{margin-bottom:16px}
.contact-form-block .field:last-of-type{margin-bottom:0}
.contact-form-block .field label{font-size:14px;line-height:21px;font-weight:700;
  color:var(--ink-800);margin-bottom:8px;letter-spacing:normal}
.contact-form-block .field input,
.contact-form-block .field select,
.contact-form-block .field textarea{border-color:var(--ds-ink-500);border-radius:var(--ds-radius-4);
  background:var(--ds-surface-soft);min-height:52px;font-size:16px}
.contact-form-block .field textarea{height:160px}
.contact-form-block #cf-topic{width:100%;max-width:480px;height:auto;min-height:46px;padding-right:40px}
.contact-form-block .field select{line-height:1.35;padding-top:9px;padding-bottom:9px}
.contact-form-block .privacy-consent{display:flex;align-items:flex-start;gap:12px;margin:24px 0 0;font-size:14px;line-height:1.65;color:var(--ink-800)}
.contact-form-block .privacy-consent input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--fill)}
.contact-form-block .privacy-consent a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.page-login .nav-links,.page-login .apply-cta{display:none!important}
.page-login .nav-bar{justify-content:flex-end}
.page-login .site-footer .cols{grid-template-columns:1fr}
.page-login .site-footer .cols>div:nth-child(n+2){display:none}
.page-login .login-form{max-width:608px;margin-left:auto;margin-right:auto}
.metric-prefix,.metric-unit{font-size:14px;font-weight:700;vertical-align:baseline}
.metric-number{font-size:40px;font-weight:800;line-height:1;color:var(--fill)}
.contact-form-block .note{margin-top:21px;background:transparent;border:0;padding:0;border-radius:0}
.contact-form-block .note ul{margin:0;padding-left:21px}
.contact-form-block .note li{margin:0}
.contact-form-block .note li+li{margin-top:8px}
.contact-form-block .center{margin-top:32px}

/* ---------- 応募する（student/program/apply.html 専用） ----------
   Figma実測（24:9639, get_design_context）と現行実装のズレをこのページだけ閉じて補正する。
   お問い合わせ（.contact-form-block）で確立した補正パターンをそのまま踏襲する。
   1) パンくず→h1：現行実装はパンくずとpage-headを別々の.containerに分けていたため
      .crumbs+セレクタが効いていなかった（見た目は52pxのまま）。Figma側は両方とも同じ
      title:margin配下の兄弟要素のため、HTM側も1つの.containerにまとめたうえで、
      他ページと同じ「.crumbsのpb16px＋page-head側pt16pxで計32px」に揃える。
   2) h1の色：フレーム上のh1はページ見出し共通の--ink（ink-900）ではなく、text/default
      ＝ink-800で塗られている（お知らせ詳細ページでも見つかった同種のズレ）。
   3) リード文→フォーム先頭ラベル：Figma実測32px（Form自身のpt-32のみ。先頭フィールドに
      pt-16は無い）。共有section.blockの既定80/80ではなく、上32px・下96px
      （送信ボタン→フッターの実測）に差し替える。
   4) フォーム本体：Figmaのフォームはdrop-shadow・rounded-22pxを持つノードだが、実際の
      塗り色は背景と同化していて見た目はカード化されていない（get_screenshotで確認済み）。
      既存の.form.flat（枠・影・背景なしでカード化しない版）がそのまま一致するため踏襲。
   5) フィールド：ラベルはBody/S/Bold実測14px/lh21・色--ink-800・字間0（共有.fieldは13px/
      7px余白・字間.01emで実測とズレる）。枠線はFigma実測 #727B86＝既存トークン--ds-ink-500
      （共有.fieldの枠は--line=#E1E8F1と薄すぎる）。角丸4px＝--ds-radius-4。背景は
      --ds-surface-soft（#FBFDFF）で共有.fieldの直書き値と同じ。高さはテキスト・メール欄が
      52px、メッセージ欄（textarea）のみ160px（共有--ds-field-hの48pxより実測は高い）。
      フィールド間隔は16px（共有19pxから補正）。
   6) ドロップダウン（学年・性別・所属高専・日本語能力・卒業後の進路の5項目）：Figmaでは
      幅288px・高さ42pxの専用サイズ（共有.field selectのmin-width:240px/max-width:60%とは
      別の固定値）。狭い画面ではmax-width:100%で収める。
   7) 送信ボタン手前の余白：Figma実測32px。HTML側の該当divに直接inline styleで反映済み
      （このページはインラインstyleで同種の値を管理する既存の書き方に合わせた）。
   8) リード文の行組み：Figma実測は1つの流れる段落ではなく、文単位で改行された4行
      （各行mb-0・行間24pxのみで積む）。現行HTMLは全文を1つの<p>に流し込んでいたため、
      共有.page-head pのmax-width:46em（≈736px）で折り返す位置がFigmaの改行位置と一致
      しない。事実関係（7万円負担の注記など、Figma側の簡略文言より正確な現行実装の文言を
      維持＝資料の一次情報優先）はそのまま、文の区切りにだけ<br>を入れてFigmaの行分けに
      揃えた。あわせてこのページだけ46em制限を解除する（Figmaのリード文は1088px幅の
      コンテナいっぱいまで折り返し無しで許容する設計のため）。
   9) フォーム幅：Figmaのフォームカードは実測608px固定（外側のmax-w-640は器のクランプに
      過ぎず、実効幅は608px）。共有.form既定のmax-width:640px（--ds-measure-form）のままだと
      入力欄が32px広くなるため、このページだけ608pxに補正する。
   共有.page-head/.crumbs/.form/.field/.note/.btn本体（他の多くのページと共有）は変更せず、
   このページ専用のクラスだけを追加して閉じた形で上書きする。
   ※このページでは検証しなかったが確認できた範囲の記録：共有.site-footer h5（サイトマップ／
   サポート見出し）はFigma実測でbrand/primary（青 #1863D3）だが実装は--ink（ほぼ黒）。
   同じく.flogos の border-top もFigma実測は brand/primary だが実装は--line（薄いグレー）。
   どちらもフッター全体（全ページ共有）に及ぶ配色差のため、このページ専用の上書きでは対応せず
   記録のみに留める。 */
.crumbs+.page-head--apply{padding:16px 0 0}
.page-head--apply h1{color:var(--ink-800)}
.page-head--apply p{max-width:none}
section.block.apply-form-block{padding:32px 0 var(--ds-space-96)}
.apply-form-block .form{max-width:608px}
.apply-form-block .field{margin-bottom:16px}
.apply-form-block .field:last-of-type{margin-bottom:0}
.apply-form-block .field label{font-size:14px;line-height:21px;font-weight:700;
  color:var(--ink-800);margin-bottom:8px;letter-spacing:normal}
.apply-form-block .field input,
.apply-form-block .field select,
.apply-form-block .field textarea{border-color:var(--ds-ink-500);border-radius:var(--ds-radius-4);
  background:var(--ds-surface-soft);font-size:16px}
.apply-form-block .field input,
.apply-form-block .field textarea{min-height:52px}
.apply-form-block .field textarea{min-height:160px}
.apply-form-block .field select{width:288px;max-width:100%;min-height:42px}

/* ---------- ログイン（student/login.html 専用） ----------
   Figma実測（209:9799, get_design_context）と現行実装を0ベースで再照合し作り直した。
   1) パンくず→h1：他ページ同様、共有.crumbsのpb16px＋共有.page-head既定36pxのままだと
      16+36=52pxになる。Figma実測は「パンくずpt16px＋パンくず→h1間32px」のフラットな
      間隔のため、.page-head--apply等と同じ考え方でこのページ専用に上書き。
   2) h1色：ページ見出し共通の--ink（ink-900）ではなくtext/default（--ink-800）。
   3) リード文：共有.page-head pのmax-width:46em（約736px）だと2〜3行に折り返す設計だが、
      Figma実測はコンテナ幅いっぱい（1088px）まで折り返しており46em制限は無い。このページ
      だけmax-widthを解除。
   4) フォーム外枠：Figma実測は幅608pxの入力欄2つ＋左右パディング32pxで、カードの実寸は
      672px（共有--ds-measure-formの640pxより32px広い）。このページだけmax-widthを672pxに
      上書き。上下セクション余白は実測64/64（共有section.blockの既定80/80ではない）。
   5) フィールド：ラベルは14px/lh21/700/色--ink-800/字間0・下8px（共有.fieldは13px/7px/
      字間.01em）。枠線はFigma実測#727B86＝既存トークン--ds-ink-500（共有.fieldの枠は
      --line=#E1E8F1と薄すぎる）。角丸4px＝--ds-radius-4。背景--ds-surface-soft(#FBFDFF)は
      共有.fieldの直書き値と同じなので変更不要。高さ52px（共有--ds-field-hの48pxより高い）。
      フィールド間隔は24px（共有19pxから補正）、パスワード欄→送信ボタンは48px（フォーム
      自身のgap24px＋ボタン行自身のpt24pxの合計。ブロック要素の隣接マージン相殺を利用し、
      ボタン行側のmargin-topだけで48pxを表現）。必須マーク「*」の色はFigma上は素の#fb2c36
      （トークンに紐付かない生値）だが、デザイントークンよりraw hexは優先度が低いため
      （figma-design-to-codeスキルの優先順位。お問い合わせページで確立済みの判断を踏襲）、
      既存トークン--ds-feedback-error-strongをそのまま使う（変更なし）。
   6) 「ログインが必要なページ」「アカウントについて」の2カラム：現行実装は共有.feature
      （白カード・枠・影）を背景/枠/影だけ打ち消して代用していたが、Figma実測はカードでは
      なく透明地・中央の1本罫線（#727B86＝--ds-ink-500）で区切るだけのフラットな構成。
      新規.login-faqに作り直した。見出しは16px/lh24/700/色--ink-800（共有.feature h3は
      16.5px・色--ink=ink-900）、本文は14px/lh21/500/色--ink-800（共有.feature pは
      色--sub=ink-600のmuted・行送り1.7で実測のlh21とズレる）。列間は共有.grid.cols-2の
      既定gap22pxを打ち消し（Figmaはgapなし・罫線のみで区切る2カラム）。アイコンは自作の
      線画からFigma実測の実アセット（ロック／ユーザーの2アイコン、いずれもストローク
      #1863D3）をダウンロードして差し替え（assets/ds/icon-login-lock.svg・
      icon-account-user.svg）。
   7) 3つのボタン（先輩の声を見る／お問い合わせフォームへ／プログラムを知る）：Figma実測の
      枠線色は#1863D3（brand/primary）で、1つ目のボタンだけラベル色が#0A5BA4
      （brand/primary-strong）と異なる値になっている。これは既知のFigmaの部分的な配色ゆれ
      （README B-5「secondaryバリアントのラベル色」と同種の事象）で、共有.btn-ghost
      （枠・文字とも#0A5BA4で統一・サイト全体で確立済み）と完全一致はしないが、この1ボタン
      だけ色を変える判断はせず共有.btn-ghostをそのまま使う（記録のみ・変更なし）。FAQ列から
      ボタン列までの間隔は実測56px（FAQ列自身のpb24px＋ボタン列自身のpt32pxの合計。旧実装は
      24pxのみだった）。
   8) 注記ボックス：Figma実測は白地・枠なし・padding 16/24（共有.noteは地色+1px枠+
      padding 16/20）。ボタン列から注記までの間隔は実測24px（旧実装22pxから補正）。
   ヘッダーnav・フッターの会員限定リンク構成・件数は既定仕様として変更せず。パンくずの
   区切り記号（Figmaは「／」、現行サイトは全ページ共通で「›」）は、他ページ（お知らせ詳細等）
   で既に「1フレームだけの表記ゆれの可能性が高く、全ページ共有の.crumbsを変える根拠として
   弱い」と判断し追随していない先例があるため、このページも同様に追随せず記録のみ。
   共有.page-head/.crumbs/.form/.field/.note/.btn/.feature/.grid本体（他の多くのページと
   共有）は変更せず、このページ専用のクラスだけを追加して閉じた形で上書きする。 */
.crumbs+.page-head--login{padding:16px 0 0}
.page-head--login h1{color:var(--ink-800)}
.page-head--login p{max-width:none}
section.block.login-block{padding:var(--ds-space-64) 0}
.login-block .form{max-width:672px}
.login-block .field{margin-bottom:24px}
.login-block .field label{font-size:14px;line-height:21px;font-weight:700;
  color:var(--ink-800);margin-bottom:8px;letter-spacing:normal}
.login-block .field input{border-color:var(--ds-ink-500);border-radius:var(--ds-radius-4);
  min-height:52px;font-size:16px}
.login-block .center{margin-top:48px}
section.block.login-info-block{padding:24px 0 var(--ds-space-96)}
.login-info-block .grid.cols-2{gap:0}
.login-faq{padding:0 32px;display:flex;flex-direction:column;gap:16px}
.login-faq:first-child{border-right:1px solid var(--ds-ink-500)}
.login-faq h3{display:flex;align-items:center;gap:8px;font-size:16px;line-height:24px;
  font-weight:700;color:var(--ink-800);margin:0}
.login-faq h3 img{width:20px;height:20px;flex:none}
.login-faq p{font-size:var(--ds-type-bodys-size);line-height:var(--ds-type-bodys-lh);
  font-weight:500;color:var(--ink-800);margin:0}
.login-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ds-space-24);
  margin-top:56px}
.login-info-block .note{margin-top:24px;background:#fff;border:0;padding:16px 24px}
/* 600px以下では共有.grid.cols-2が1カラムに畳まれる（既存のグローバルbreakpoint）。
   その際、列区切り用の縦罫線（border-right）が単カラムの右端に残ってしまうバグが
   旧実装（インラインstyle版）にもあったため、この機会に併せて解消する。 */
@media(max-width:600px){
  .login-faq:first-child{border-right:0;padding-bottom:16px}
}

/* ---------- 2026-08 visual review: always-visible responsive navigation ----------
   Mobile navigation remains discoverable as a horizontally scrollable second row.
   This removes the hidden hamburger dependency while preserving every destination. */
.sp-break{display:none}

@media(min-width:1025px){
  html.lang-mn .nav-links,html.is-member .nav-links{
    display:flex;position:static;inset:auto;background:transparent;flex-direction:row;
    align-items:center;gap:1px;padding:0;z-index:auto;overflow-x:auto;scrollbar-width:none}
  html.lang-mn .nav-links::-webkit-scrollbar,html.is-member .nav-links::-webkit-scrollbar{display:none}
  html.lang-mn .nav-links a,html.is-member .nav-links a{padding:8px 9px}
  html.lang-mn .nav-toggle,html.is-member .nav-toggle{display:none!important}
  html.lang-mn .nav .apply-cta{display:none}
}

@media(max-width:1024px){
  .nav{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions" "links links";gap:10px 12px;padding:12px 16px 0}
  .brand{grid-area:brand;min-width:0}
  .nav-bar{display:contents}
  .nav-actions{grid-area:actions;margin-left:0;justify-self:end}
  .nav-links{grid-area:links;display:flex!important;position:static;inset:auto;width:auto;
    flex-direction:row;align-items:center;gap:4px;margin:0 -16px;padding:5px 16px 10px;
    background:rgba(10,18,28,.12);overflow-x:auto;overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;z-index:auto}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:none;padding:9px 11px;border-radius:4px;scroll-snap-align:start}
  .nav-toggle{display:none!important}
  .nav .btn.apply-cta{display:none}
}

@media(max-width:600px){
  .nav{gap:10px;padding:10px 14px 0}
  .nav-links{margin:0 -14px;padding:5px 14px 9px}
  .brand .bname{max-width:142px}
  .lang-toggle button{min-width:40px;min-height:38px;padding:6px 8px}
  .sp-break{display:inline}
  .hero-full h1{font-size:22px;line-height:1.65}
  .hero-full.hero-home .inner{padding:28px 20px 28px}
  .cd-title{font-size:23px;line-height:1.5}
  .news-block.news-block--home .news-list a{grid-template-columns:1fr;gap:4px;padding:18px 4px}
  .news-block.news-block--home .news-list .d{font-size:12px}
  .site-footer .container{padding-top:64px}
  .flogos{row-gap:18px}
}

/* ---------- 2026-08 student information architecture and filters ---------- */
.program-city-intro{padding-top:32px}
.program-city-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:64px;align-items:center}
.program-city-photo{border-radius:12px;overflow:hidden;min-height:420px}
.program-city-photo img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover}
.program-city-copy h2{font-size:clamp(30px,3.2vw,48px);line-height:1.25;margin:10px 0 24px}
.program-city-copy p{font-size:16px;line-height:2;margin:0 0 18px}
.program-city-copy .btn{margin-top:14px}
.two-week-section{border-top:1px solid var(--line)}
.week-example{border-top:1px solid var(--line)}
.week-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;padding:28px 0;border-bottom:1px solid var(--line)}
.week-day{font-weight:700;color:var(--fill);font-size:15px;padding-top:4px}
.week-row h3{font-size:20px;margin:0 0 8px}
.week-row p{margin:0;line-height:1.8;color:var(--sub)}
.week-row--life{border-bottom:0}
.tint-soft{background:#f4f7fb}
.senior-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.senior-preview-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:start;padding:24px;border:1px solid var(--line);border-radius:10px;background:#fff;color:inherit;text-decoration:none}
.senior-preview-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.senior-preview-card:hover,.senior-preview-card:focus-visible{transform:translateY(-2px);border-color:rgba(24,99,211,.24);box-shadow:var(--ds-shadow-raised);text-decoration:none;outline:none}
.senior-preview-card:hover *,.senior-preview-card:focus-visible *{text-decoration:none}
.senior-preview-card:active{transform:translateY(0)}
.senior-preview-card>img{width:88px;height:88px;border-radius:50%;background:#edf2fb;object-fit:cover}
.senior-preview-card h3{font-size:20px;margin:10px 0 6px}
.senior-preview-card p{font-size:14px;line-height:1.7;color:var(--sub);margin:0}
.senior-preview-card .tagrow,.voice-tags{display:flex;gap:6px;flex-wrap:wrap}
.senior-preview-card .tag,.voice-tags .tag{font-size:11px;padding:4px 8px;border-radius:999px;background:#edf2fb;color:var(--fill);font-weight:700}
.row-end--spacious{margin-top:40px;margin-bottom:24px}
.detail-points{display:grid;gap:10px;margin:22px 0 30px;padding:0;list-style:none}
.detail-points li{position:relative;padding-left:22px;color:var(--ink-800);font-size:14px;line-height:1.65}
.detail-points li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--fill)}
.filter-panel{display:grid;gap:16px;margin:0 0 48px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filter-group{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;align-items:start}
.filter-label{font-size:14px;font-weight:700;color:var(--ink-800);padding-top:9px}
.filter-buttons{display:flex;flex-wrap:wrap;gap:8px}
.filter-button{min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-800);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.filter-button:hover,.filter-button:focus-visible{border-color:var(--fill);outline:none}
.filter-button.is-active{background:var(--fill);border-color:var(--fill);color:#fff}
.filter-status{margin:0;font-size:13px;color:var(--sub)}
.filter-note{margin:0;max-width:78em;font-size:13px;line-height:1.8;color:var(--sub)}
.co-item[hidden],.bubble-cell[hidden]{display:none!important}
.voice-tags{margin:14px 0 4px}
.interview-filter-panel{margin-top:-16px}
body.page-nagaoka .everyday-intro .everyday-difference{margin-top:20px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
body.page-nagaoka .hero-full p.lead{max-width:42em}
.cs-split .btn-primary{background:var(--fill);border-color:var(--fill);color:#fff}
.cs-split .btn-primary:hover{background:var(--ds-brand-primary-dark);border-color:var(--ds-brand-primary-dark);color:#fff}
.filter-panel{border-top:0}
/* 2026-09 UIレビュー：線ではなく余白でまとまりを示す。 */
body.page-nagaoka .everyday-grid .feature,
body.page-nagaoka .life-grid .feature{border:0;box-shadow:none}
body.page-nagaoka .city-character-grid .feature{border:0;box-shadow:none;background:rgba(255,255,255,.2)}
/* 白20%のカード上でも白い本文を読めるよう、専用の濃青トークンを背景に使う。 */
body.page-nagaoka .city-character-section{background:var(--ds-brand-primary-panel)}
body.page-nagaoka .city-character-grid .feature h3,
body.page-nagaoka .city-character-grid .feature p{color:#fff}
.facts-cd .fact-fill,.facts-cd .fact-fill b{text-align:center;justify-content:center}
.facts-cd .fact-fill b>.ja,.facts-cd .fact-fill b>.mn{white-space:normal}
.legal-cards .card-list .body{position:relative}
.legal-cards .card-list h3{padding-right:32px}
.legal-cards .card-list h3::after{content:"→";position:absolute;right:24px;top:24px;color:var(--fill)}
.legal-cards .card-list .more{display:none}
.legal-cards .card-list,.senior-preview-card{box-shadow:0 4px 8px rgba(44,61,87,.08)}
.senior-preview-card{position:relative;padding-bottom:48px}
.senior-preview-card::after{content:"→";position:absolute;bottom:20px;right:24px;color:var(--fill)}
.senior-preview-card>img{object-position:center top}
.co-item{position:relative;isolation:isolate;border-radius:8px}
.co-item::before{content:"";position:absolute;inset:-8px;border-radius:8px;background:#fff;box-shadow:0 4px 8px rgba(44,61,87,.08);opacity:0;z-index:-1;transition:opacity .15s}
@media(hover:hover){
  a.co-item:hover{transform:none;box-shadow:none;text-decoration:none}
  .co-item:hover::before{opacity:1}
  .co-item:hover .thumb{box-shadow:none}
}
.co-item:focus-visible::before{opacity:1}
.hero-full.hero-home h1>.ja,.hero-full.hero-home h1>.mn{padding:0;background:none}
.hero-full.hero-home h1 .hero-line{display:inline-block;max-width:100%;background:var(--fill);padding:2px 10px;margin-bottom:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.review-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:0}
.review-video-grid .vv-item{display:grid;grid-template-rows:subgrid;grid-row:span 3}
.review-video-grid .vv-item h3{margin:0;align-self:start}
.review-video-grid .vv-item p{margin:0;align-self:start}
@media(min-width:768px){
  .timeline{padding-left:0}
  .timeline::before{left:192px}
  .tl-step{grid-template-columns:176px minmax(0,1fr);column-gap:48px}
  .tl-step .dot{left:185px}
}
@media(max-width:767px){
  .review-video-grid{grid-template-columns:1fr;gap:32px}
  .review-video-grid .vv-item{display:block;grid-row:auto}
}
.co-detail .prose{max-width:var(--ds-measure-read)}
.industry-photo{margin:0;border-radius:12px;overflow:hidden;min-height:390px}
.industry-photo img{display:block;width:100%;height:100%;min-height:390px;object-fit:cover}
.news-index-grid{display:block!important}
.news-index-grid .card-news{display:block;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.news-index-grid .card-news:last-child{border-bottom:1px solid var(--line)}
.news-index-grid .card-news .photo{display:none}
.news-index-grid .card-news .body{display:grid;grid-template-columns:180px minmax(0,1fr);gap:40px;align-items:center;padding:28px 8px}
.news-index-grid .card-news .meta{font-size:14pt;color:var(--sub);margin:0}
.news-index-grid .card-news h3{font-size:16px;line-height:1.5;margin:0}
.news-block.news-block--home .row-end{margin-top:40px;margin-bottom:32px}

@media(max-width:900px){
  .program-city-grid{grid-template-columns:1fr;gap:32px}
  .program-city-photo,.program-city-photo img{min-height:300px}
  .senior-preview-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .cta-band{min-height:0}
  .cta-band .inner{padding:48px 20px}
  .cta-band h2{font-size:26px;line-height:39px}
  .week-row{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .filter-group{grid-template-columns:1fr;gap:8px}
  .filter-label{padding-top:0}
  .filter-button{font-size:12px;padding:7px 12px}
  .news-index-grid .card-news .body{grid-template-columns:1fr;gap:6px;padding:22px 4px}
  .senior-preview-card{grid-template-columns:64px minmax(0,1fr);padding:18px}
  .senior-preview-card>img{width:64px;height:64px}
}