@charset "utf-8";
/* ===========================================================================
次世代トップ養成ゼミナール 体験会 ご招待ページ — style.css
プレジデント総合研究所 / Design System: 次世代トップ養成ゼミナール
構成: 1) デザイントークン 2) 共通効果 3) ページ共通レイアウト
4) セクション別スタイル（HTMLのクラス名と1対1）
Webフォントは index.html の （Google Fonts）で読み込みます。
=========================================================================== */
/* --- 1) デザイントークン ------------------------------------------------- */
:root{
/* ── 基調グラデーション stops (the whole palette is cut from this one ramp) ── */
--g0:#0C0B20; /* 漆黒紺 ink-navy 0% */
--g1:#110F32; /* 深紺 deep-navy 30% */
--g2:#211B68; /* 紺紫 navy-violet 50% */
--g3:#4F2BB4; /* 青紫 blue-violet 70% */
--g4:#7527C9; /* バイオレット violet 86% */
--g5:#6A26AE; /* 赤紫 red-violet 100% */
/* ── ベタ単色 ── */
--accent:#923B91; /* 唯一のベタアクセント。罫・欧文ラベル・Session番号 */
--accent-alt:#C41E24; /* 【要確認①】発注書v1の指定色。既定では未使用 */
--president:#0C3388; /* PRESIDENTロゴ／マストヘッド専用 */
--paper:#FFFFFF;
--paper-warm:#EEEBE5; /* 表組みヘッダ行・網掛け行 */
--text:#000000;
/* ── テーマ別マストヘッド色 (§2.3) ── */
--masthead-t1:#FFFFFF; /* 自分を変える — 濃紺スーツ（暗い写真） */
--masthead-t2:#0C3388; /* 胆力をつける — 目元（明るい肌） */
--masthead-t3:#A39C9B; /* 道を拓く — 白い階段（ほぼ白） */
--masthead-t4:#0C3388; /* よく生きる — 開いた本（明るい） */
--masthead-t5:#88853F; /* 人をつくる — 葉の水滴（緑） */
/* ── グラデーション ── */
--grad-page: linear-gradient(180deg,
var(--g0) 0%, var(--g1) 30%, var(--g2) 50%,
var(--g3) 70%, var(--g4) 86%, var(--g5) 100%);
--grad-band: linear-gradient(90deg,
#5C0F81 0%, #6D1CB1 33%, #6F25C5 55%, #5033B0 100%);
--grad-band-navy: linear-gradient(90deg,
#0F0E2E 0%, #221A68 45%, #283CA9 75%, #193288 100%);
/* ── セマンティック別名 ── */
--surface-page:var(--grad-page); /* 面＝縦グラデーション */
--surface-card:var(--paper); /* 白カード */
--surface-band:var(--grad-band); /* 帯・ピル＝横グラデーション */
--surface-band-alt:var(--grad-band-navy);
--surface-table-head:var(--paper-warm);
--text-body:var(--text);
--text-on-dark:var(--paper);
--text-label:var(--accent);
--rule-color:var(--accent);
--rule-color-ink:var(--text);
}
:root{
/* families */
--mincho:'Shippori Mincho', 'リュウミン Pro M', 'Yu Mincho', serif;
--mincho-d:'Shippori Mincho B1', 'リュウミン Pro M', serif;
--gothic:'Zen Kaku Gothic New', 'Yu Gothic', sans-serif;
--latin:'Jost', 'TT Commons Pro', 'Avenir', sans-serif;
/* weights */
--w-light:300; --w-regular:400; --w-medium:500; --w-bold:700; --w-black:900;
/* 役割別サイズ (§3.2 底本実測・pt 固定) */
--fs-cover-1:48.2pt; /* T1 表紙タイトル1行目 */
--fs-cover-2:42.5pt; /* T2 表紙タイトル2行目 */
--fs-vertical:26.2pt; /* T3 縦組みコピー（扉は26.6pt） */
--fs-theme-hero:80.8pt;/* T4 巨大テーマ名（縦組み） */
--fs-catch:43.2pt; /* T5 メインキャッチ */
--fs-pill:19.1pt; /* T6 キャッチピル */
--fs-section:28.3pt; /* T7 表組みページ大見出し */
--fs-label:15.6pt; /* T8/T9 欧文ラベル・タグライン */
--fs-label-s:11.3pt; /* T8 小さい方の欧文ラベル */
--fs-lede:9.9pt; /* T10 導入文 */
--fs-body:9.2pt; /* T11-13 本文・FAQ・表組み */
--fs-body-min:8.7pt; /* §6.3 下限。これ以下は不可 */
--fs-price:35.4pt; /* T14 金額 */
--fs-price-unit:18.6pt;/* T15 「円」 */
--fs-nav:14.2pt; /* T16 テーマナビ */
--fs-lockup-1:19.9pt; /* ロゴロックアップ「「次世代トップ」」 */
--fs-lockup-2:17.6pt; /* ロゴロックアップ「養成ゼミナール」 */
--fs-note:6.4pt; /* 注記・極小ゴシック */
/* 行送り (§3.2 — 150% 未満に詰めない) */
--lh-body:5.0mm; /* 9.2pt に対し154% */
--lh-lede:5.5mm; /* 9.9pt に対し157% */
--lh-vertical:1.19;
--lh-min:1.5;
/* 字送り (§3.5) */
--ls-display:-0.02em; /* 大見出し基準 */
--ls-display-max:-0.06em; /* 詰めてよい下限 */
--ls-vertical:0.03em;
--ls-body:0;
}
:root{
/* 仕上がり (§1) */
--page-w:210mm; --page-h:297mm; --bleed:3mm;
/* 版面 (§4.1) */
--margin-l:28mm; --margin-r:28mm; --col-w:154mm;
--lockup-x:3.5mm; /* ヘッダーロックアップは版面外・断ち寄せ */
--head-top:10.3mm; /* 天 */
--nav-top:274mm; /* テーマナビ上端 */
--foot-bottom:285mm; /* 最下部要素の下端 */
--sign-x:199mm; /* 右端の縦サイン */
/* 白カード (§4.1 / C6) */
--card-x:17mm; --card-w:176mm; --card-pad:8mm; --card-gap:6mm;
/* FAQ 2段組 (§4.6) */
--faq-col-l:28mm; --faq-col-r:126mm; --faq-col-w:76mm; --faq-gutter:22mm;
/* 表組み (§4.5 / C7) */
--cell-h:5.6mm; --cell-pad-x:2mm;
/* 罫 (§2.2) — 2種のみ */
--rule-w:0.2mm; --rule-w-thin:0.1mm;
/* 角丸 — 2種のみ (§4.1) */
--radius-card:3mm;
--radius-pill:999mm; /* 高さ÷2 = 完全な半円 */
--pill-h:8mm; --pill-pad-x:5mm;
}
/* --- 2) 共通効果（グレイン・縦組み・詰め組み・リンク） ------------------- */
:root{
--grain-opacity:.045; /* §2.5 — 0.05 を超えない */
--grain-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 紙質感 (§2.5)。面のグラデーションに必ず重ねる。 */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:overlay;background-image:var(--grain-url)}
/* 縦組み (§3.4) — 必ず white-space:nowrap と明示 height を併用する */
.vertical{writing-mode:vertical-rl;text-orientation:mixed;font-feature-settings:"vpal" 1,"vkrn" 1;line-height:var(--lh-vertical);letter-spacing:var(--ls-vertical);white-space:nowrap}
.vertical-hero{writing-mode:vertical-rl;font-family:var(--gothic);font-weight:900;font-size:var(--fs-theme-hero);letter-spacing:.035em;white-space:nowrap}
/* 詰め組み (§3.5) — 見出しは折り返し禁止 */
.display{font-feature-settings:"palt" 1;letter-spacing:var(--ls-display);white-space:nowrap}
/* 影・袋文字は禁止 (§6.1-2)。リンクは版面のアクセントに従う。 */
a{color:var(--accent);text-decoration:none;border-bottom:var(--rule-w-thin) solid currentColor}
a:hover{color:var(--g4)}
/* --- 3) ページ共通レイアウト -------------------------------------------- */
html,body{margin:0;padding:0;background:var(--g2)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--g4)}
.mb-h{display:none}
.chrome{opacity:0;pointer-events:none;transition:opacity 200ms}
.pc-only{display:flex}
.cta-box{position:fixed;right:24px;bottom:0;width:300px;z-index:60;box-sizing:border-box}
.sec-gap{padding-top:88px}
.sec-gap-xl{padding-top:132px;padding-bottom:44px}
.bw{max-width:700px;margin-left:auto;margin-right:auto}
.cw{max-width:800px;margin-left:auto;margin-right:auto}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.t-row{display:grid;grid-template-columns:44px 120px minmax(0,1.15fr) 1.05fr;border-bottom:1px solid var(--text);min-height:31px;align-items:center}
.t-first{border-top:1px solid var(--text)}
.t-c{padding:10px 12px;box-sizing:border-box}
.t-kiki{grid-column:2}.t-head{grid-column:3}.t-sub{grid-column:4}.t-head-w{grid-column:3 / span 2}
@media (max-width:767px){
.dt-v{display:none !important}
.mb-h{display:block}
.pc-only{display:none !important}
.s0-r{display:none}
.cta-box{right:0;width:100%}
.sec-gap{padding-top:56px}
.sec-gap-xl{padding-top:84px;padding-bottom:28px}
.sp-grid{grid-template-columns:1fr;gap:20px}
.t-row{grid-template-columns:44px 1fr;align-items:start;padding:8px 0}
.t-kiki,.t-head,.t-sub,.t-head-w{grid-column:2}
.t-c{padding:2px 12px}
.cpad{padding:24px}
.card-gap{margin-top:20px}
.dt7-row{grid-template-columns:1fr}
.cmp-row{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:8px;padding:14px 0}
.cmp-lb{grid-column:1/-1}
.cmp-head .cmp-lb{display:none}
.pc-br{display:none}
}
.wcard2{max-width:800px;margin-left:auto;margin-right:auto;background:var(--paper);color:var(--text);border-radius:16px;box-sizing:border-box}
.cpad{padding:44px}
.card-gap{margin-top:32px}
.dt6-row{display:grid;grid-template-columns:160px 1fr;border-bottom:1px solid var(--text);min-height:31px;align-items:center}
.dt7-row{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--text)}
.cmp-row{display:grid;grid-template-columns:110px 1fr 1fr;column-gap:clamp(12px,1.6vw,24px);border-bottom:0.5px solid rgba(255,255,255,.4);padding:clamp(14px,1.6vw,20px) 0;align-items:center}
/* SP：見出しを行頭に返し、値2列を中央に。ピルは列幅に収める。 */
@media (max-width:767px){
.cmp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px;row-gap:8px;padding:14px 0}
.cmp-lb{grid-column:1/-1;text-align:center}
.cmp-head .cmp-lb{display:none}
.cmp-pill{font-size:clamp(11px,3.2vw,15px);padding:0 10px;height:36px;border-radius:18px}
.cmp-take{text-align:center}
}
@media (max-width:767px){.dt6-row{display:none}}
.s9-row{display:grid;grid-template-columns:100px 1fr;column-gap:16px;padding:10px 0;border-bottom:0.5px solid rgba(255,255,255,.4);align-items:baseline}
.cta-sp{height:100px}
.cta-btn:hover{background:var(--grad-band-navy)}
.lnk-paper:hover{color:rgba(255,255,255,.7)}
.lnk-dim:hover{color:#FFFFFF}
@media (max-width:767px){.s9-row{grid-template-columns:1fr;row-gap:4px}.cta-sp{height:118px}.pc-br{display:none}}
@media (max-width:399px){.s0-tk{display:none}}
/* スクロール連動クローム（ヘッダー・スティッキーCTA・縦サイン）
script.js が .is-on を付け外しします。 */
.chrome{opacity:0;pointer-events:none;transition:opacity 200ms}
.chrome.is-on{opacity:1}
.chrome.chrome-i.is-on{pointer-events:auto}
/* PRESIDENT ワードマーク（SVGスプライトを