/* ⚠ 入口（LP）は 2026-08-01 に大学の面（academic.css）へ移した。
LP は /gakubu 等と同じ頭部（すりガラス追従・ナビ5本・目次）と脚部を自分で描くので、
SPA 既定の頭と足は隠す。版面の枠（.wrap の 860px と 5vw の余白）も外し、
節が画面幅いっぱいに敷けるようにする。 */
/* ⚠ 2026-08-01 の構造見直し: 頭は全画面で共通（.ac-head-bar）になったので隠さない。
隠すのは簡素な脚だけ（入口は実数の帯つきの脚を自分で描く）。 */
body.on-lp .foot { display: none; }
body.on-lp .wrap { max-width: none; margin: 0; padding: 0; }
/* ⚠ 入口だけは style.css も読む。素の `a:hover{text-decoration:underline}`（0,1,1）が
academic.css の `text-decoration:none`（0,1,0）に勝ち、釦・札・ナビに下線が出ていた。
class を持つ a だけ打ち消す（本文中の素のリンクは下線を残す）。 */
.ac a[class]:hover { text-decoration: none; }
/* NOMISMA — 入口（LP）の意匠
figure: money-school-lp（図録トーン・墨地に金）。
⚠ 学びの画面は「紙と墨」（style.css）。入口だけが図録。
表は図録、中は紙 — ATLAS 本編の摺物の考え方をそのまま持ち込む。
⚠ 全ルールを .lp で囲う。囲わないと、科目やドリルの画面まで暗くなる。 */
.lp {
--lp-ground: #17130d; --lp-ground2: #20190f;
--paper-lp: #f3ecdd; --paper2-lp: #e8dcc4;
--gold-lp: #c2a15b; --gold-bright: #dcbd7c; --gold-deep: #9c7f3f;
/* 紙の節の墨（生成りの上の文字） */
--plate-sub: #5a4a2c;
/* LP の大見出し（hero h1 / h2 / lede）。旧 fbf6ea / faf5e8 / f7f1e4（Δ≤6/ch）を統合 */
--lp-ink-hi: #fbf6ea;
--cream: #ece3d0; --cream-dim: #c3b799; --muted: #9a8c6f;
--ink-text: #241c11; --line: rgba(194, 161, 91, 0.28);
--serif-lp: "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", "Shippori Mincho", serif;
--sans-lp: "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", system-ui, sans-serif;
--mono-lp: "SFMono-Regular", ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
background: var(--lp-ground); color: var(--cream);
font-family: var(--sans-lp); line-height: 1.9; letter-spacing: 0.02em;
/* ⚠ 本文は .wrap（max-width 860px）の中にある。入口だけは画面幅いっぱいに敷く。
計算で外へ出す（margin: 0 -5vw だと wrap の上限までしか広がらず、右端に継ぎ目が出る）。 */
width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0;
}
.lp h1, .lp h2, .lp h3 { font-family: var(--serif-lp); font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; }
.lp a { color: inherit; text-decoration: none; }
.lp .in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.lp .eyebrow { font-size: 14px; letter-spacing: 0.42em; color: var(--gold-lp); margin: 0 0 18px; }
.lp .reftag { font-family: var(--mono-lp); font-size: 14px; letter-spacing: 0.22em; color: var(--muted); }
.lp .rule { width: 64px; height: 1px; background: linear-gradient(90deg, var(--gold-lp), transparent); margin: 22px 0; }
.lp .center { text-align: center; }
.lp .center .rule { margin: 22px auto; }
.lp section { padding: 84px 0; }
.lp h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--lp-ink-hi); margin: 0.1em 0 0.2em; border: 0; padding: 0; }
.lp .sec-head { max-width: 40em; }
.lp .sec-head.center { margin: 0 auto; }
.lp .sec-sub { color: var(--cream-dim); font-size: 1.02rem; margin-top: 14px; }
/* 釦 */
.lp .btn-lp {
display: inline-block; padding: 15px 30px; border-radius: 2px; font-family: var(--sans-lp);
font-size: 0.95rem; letter-spacing: 0.08em; transition: 0.25s; cursor: pointer; border: 1px solid transparent;
}
.lp .btn-gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold-lp)); color: #20180a; font-weight: 700; }
.lp .btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; }
.lp .btn-ghost { border-color: var(--line); color: var(--cream); }
.lp .btn-ghost:hover { border-color: var(--gold-lp); color: var(--gold-bright); text-decoration: none; }
/* 表（紙）の節 */
.lp .paper-sec { background: linear-gradient(180deg, var(--paper-lp), var(--paper2-lp)); color: var(--ink-text); }
.lp .paper-sec h2 { color: #201808; }
.lp .paper-sec .sec-sub { color: var(--plate-sub); }
.lp .paper-sec .eyebrow { color: var(--gold-deep); }
.lp .paper-sec .rule { background: linear-gradient(90deg, var(--gold-deep), transparent); }
/* 冒頭 */
.lp .hero {
position: relative; overflow: hidden; padding: 104px 0 88px;
background:
radial-gradient(1200px 600px at 78% -8%, rgba(194, 161, 91, 0.16), transparent 60%),
radial-gradient(900px 500px at 10% 110%, rgba(194, 161, 91, 0.08), transparent 60%),
var(--lp-ground);
border-bottom: 1px solid var(--line);
}
.lp .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.lp .hero h1 { font-size: clamp(2.1rem, 5vw, 3.7rem); margin: 0.1em 0 0.35em; color: var(--lp-ink-hi); }
.lp .hero h1 .sm { display: block; font-size: max(14px, 0.46em); color: var(--gold-bright); letter-spacing: 0.2em; margin-bottom: 0.5em; }
.lp .hero .lead { font-size: 1.06rem; color: var(--cream-dim); max-width: 34em; margin: 0 0 30px; }
.lp .hero .cta { display: flex; gap: 16px; flex-wrap: wrap; }
/* 冒頭の一枚（原本どおり: 環に囲まれた実物写真） */
.lp .medallion-fig { max-width: 380px; margin: 0 auto; text-align: center; }
.lp .medallion-ring {
position: relative; aspect-ratio: 1; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(circle at 38% 30%, rgba(240, 215, 154, 0.13), transparent 55%),
radial-gradient(circle at 50% 55%, rgba(194, 161, 91, 0.09), transparent 70%);
border: 1px solid var(--line);
box-shadow: inset 0 0 70px rgba(194, 161, 91, 0.07), 0 30px 70px rgba(0, 0, 0, 0.45);
}
.lp .medallion-ring:before { content: ""; position: absolute; inset: 9px; border-radius: 50%;
border: 1px solid rgba(194, 161, 91, 0.4); }
.lp .medallion-ring .ring-text { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp .medallion-ring .coin-img { width: 62%; aspect-ratio: 397/347;
filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.lp .medallion-cap { margin: 22px 0 0; font-family: var(--serif-lp); font-size: 0.98rem;
color: var(--cream); letter-spacing: 0.08em; line-height: 1.8; }
.lp .medallion-cap span { display: block; margin-top: 7px; font-family: var(--mono-lp);
font-size: 14px; letter-spacing: 0.3em; color: var(--muted); }
/* height:auto は必須。図録のサムネイル用 style.css の `.coin-img{height:108px}`
（中身が ![]()
の版・SP は 84px）がここへ流れ込み、LP 側の「背景画像 + aspect-ratio で
高さを決める」方式を無効化する。外すと教材の3枚もヒーローのメダリオンも 108px に潰れる。
.lp は LP ルート（app.js の ）にしか付かないため図録側へは波及しない。 */
.lp .coin-img { background: center/contain no-repeat; display: block; height: auto; }
.lp .img-trite { background-image: url(/img/trite.webp); }
.lp .img-aureus { background-image: url(/img/aureus.webp); }
.lp .img-reales { background-image: url(/img/reales.webp); }
.lp .img-kanei { background-image: url(/img/kanei.webp); }
/* 主宰の一行（原本どおり: 明朝・字間広め） */
.lp .hero .by { font-family: var(--serif-lp); color: var(--cream-dim);
letter-spacing: 0.16em; font-size: 0.92rem; margin: 0 0 26px; }
.lp .gold-word { color: var(--gold-bright); }
/* 実数（この学校が持っているもの） */
.lp .facts { display: flex; gap: 2.4rem; flex-wrap: wrap; margin-top: 34px;
padding-top: 26px; border-top: 1px solid var(--line); }
.lp .facts b { display: block; font-family: var(--mono-lp); font-size: 1.5rem; color: var(--gold-bright); line-height: 1.2; }
.lp .facts span { font-size: 14px; letter-spacing: 0.16em; color: var(--muted); }
/* なぜ学ぶか */
.lp .problem blockquote { font-family: var(--serif-lp); font-size: clamp(1.4rem, 3.4vw, 2.2rem);
line-height: 1.7; color: var(--lp-ink-hi); margin: 0; max-width: 20em; }
.lp .q3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.lp .q3 div { border-top: 1px solid var(--line); padding-top: 18px; color: var(--cream-dim); font-size: 0.96rem; }
.lp .q3 b { display: block; font-family: var(--serif-lp); color: var(--gold-bright);
font-size: 1.12rem; margin-bottom: 6px; }
/* 授業の見せ方 */
.lp .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp .screen { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #0d0a06;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.lp .screen .scene { aspect-ratio: 16/10; position: relative;
background: linear-gradient(180deg, rgba(16, 11, 6, 0.05), rgba(16, 11, 6, 0.25)),
url(/img/scene.webp) center/cover no-repeat; }
.lp .screen .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px;
background: linear-gradient(0deg, rgba(8, 6, 3, 0.92), transparent);
font-family: var(--serif-lp); font-size: 1.05rem; color: var(--ink-bright); }
.lp .screen .cap small { display: block; color: var(--gold-bright); font-family: var(--sans-lp);
font-size: 14px; letter-spacing: 0.24em; margin-bottom: 8px; }
.lp .screen .bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
border-top: 1px solid var(--line); font-size: 14px; color: var(--cream-dim); }
.lp .screen .bar .prog { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.lp .screen .bar .prog i { display: block; width: 38%; height: 100%; background: var(--gold-lp); }
/* 学科 */
.lp .dept-label { font-family: var(--mono-lp); font-size: 14px; letter-spacing: 0.28em;
color: var(--gold-lp); margin: 42px 0 16px; text-align: center; }
.lp .depts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp .dept { border: 1px solid var(--line); border-radius: 8px; padding: 24px 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent); display: block; }
.lp .dept:hover { border-color: var(--gold-lp); text-decoration: none; }
.lp .dept .reftag { color: var(--gold-deep); }
.lp .dept h3 { font-size: 20px; color: var(--ink-bright); margin: 9px 0 8px; }
.lp .dept p { margin: 0 0 12px; color: var(--cream-dim); font-size: 0.88rem; line-height: 1.75; }
.lp .dept-src { font-family: var(--mono-lp); font-size: 14px; letter-spacing: 0.14em; color: var(--muted); }
.lp .dept.feature { border-color: var(--gold-lp); background: linear-gradient(180deg, rgba(194, 161, 91, 0.11), transparent); }
/* 基礎課程・研究課程の帯 */
.lp .layer { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 28px; border: 1px solid var(--line);
border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent); margin-bottom: 18px; }
/* ⚠ .tag はチップ用の汎用クラスで nowrap を持つ。ここでは見出しなので折返しを戻す
（fr の小書きが 358px あり、nowrap のままだと SP 390px で格子ごと押し広げた実害） */
.lp .layer .tag { font-family: var(--serif-lp); font-size: 1.28rem; color: var(--gold-bright); white-space: normal; }
.lp .layer .tag small { display: block; font-family: var(--sans-lp); font-size: 14px;
letter-spacing: 0.2em; color: var(--muted); margin-top: 8px; }
.lp .layer p { margin: 0.4rem 0 0; color: var(--cream-dim); font-size: 0.92rem; }
/* 身につくこと */
.lp .gains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.lp .gain { border-top: 1px solid rgba(156, 127, 63, 0.35); padding-top: 16px; }
.lp .gain b { display: block; font-family: var(--serif-lp); font-size: 1.5rem; color: var(--gold-deep); line-height: 1; }
.lp .gain h3 { font-size: 20px; margin: 8px 0 5px; color: #201808; }
.lp .gain p { margin: 0; font-size: 0.88rem; color: var(--plate-sub); line-height: 1.75; }
/* 主宰 */
.lp .master-grid { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; }
.lp .portrait { aspect-ratio: 3/4; border: 1px solid var(--line); border-radius: 6px;
background: linear-gradient(180deg, #241c11, #16110a); display: flex; align-items: center;
justify-content: center; flex-direction: column; gap: 10px; color: var(--muted); }
.lp .portrait .kanji { font-family: var(--serif-lp); font-size: 3.4rem; color: var(--gold-deep); }
.lp .portrait small { font-size: 14px; letter-spacing: 0.2em; }
/* 実写ポートレート（Nile's NILE 掲載のオーナー提供写真・2026-07-31） */
.lp .portrait.has-photo { padding: 0; overflow: hidden; }
.lp .portrait.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 紀要の引用（見本論文）。図録の引用頁のように、罫で挟む */
.lp .voice-quote { max-width: 720px; margin: 34px auto 0; padding: 26px 30px;
border-top: 1px solid var(--gold-lp); border-bottom: 1px solid var(--line); }
.lp .vq-title { font-family: var(--serif-lp); font-size: 1.12rem; color: var(--ink-bright); margin: 0 0 12px; }
.lp .vq-body { font-size: 0.94rem; line-height: 2; color: var(--cream-dim); margin: 0 0 14px; }
.lp .vq-by { font-size: 14px; letter-spacing: 0.14em; color: var(--muted); margin: 0; }
.lp .vq-note { max-width: 720px; margin: 18px auto 0; font-size: 14px; color: var(--muted); line-height: 1.9; }
/* 教材 — 実物コイン3枚（原本どおり: 写真を斜めに重ねる） */
.lp .real { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp .real .coins { position: relative; height: 236px; }
.lp .real .rc { position: absolute; width: 168px; text-align: center; }
.lp .real .rc .coin-img { width: 100%; aspect-ratio: 1;
filter: drop-shadow(0 18px 30px rgba(40, 25, 5, 0.45)); }
.lp .real .rc span { display: block; margin-top: 10px; font-family: var(--serif-lp);
font-size: 14px; letter-spacing: 0.12em; color: var(--plate-sub); line-height: 1.65; }
.lp .real .rc1 { left: calc(50% - 232px); top: 30px; transform: rotate(-7deg); }
.lp .real .rc2 { left: calc(50% - 92px); top: 0; width: 184px; z-index: 2; }
.lp .real .rc3 { left: calc(50% + 78px); top: 34px; transform: rotate(8deg); }
/* 料金 */
.lp .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; align-items: start; }
/* 2026-07-31 値付け改定: プランは 無料の範囲/入学（買い切り）の二枚。中央に寄せる */
.lp .plans.two { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-left: auto; margin-right: auto; }
/* ⚠ .two は素の .plans より詳細度が高く、下の 860px の畳み（.lp .plans { 1fr }）に勝ってしまう。
狭い画面の畳みをここで自分にも適用する（実測: 390px で独語 98px はみ出した） */
@media (max-width: 860px) { .lp .plans.two { grid-template-columns: 1fr; max-width: 100%; } }
.lp .plan { border: 1px solid var(--line); border-radius: 8px; padding: 30px 26px; position: relative; }
.lp .plan.on { border-color: var(--gold-lp); background: linear-gradient(180deg, rgba(194, 161, 91, 0.1), transparent); }
.lp .plan .flag { position: absolute; top: -11px; left: 26px; background: var(--gold-lp); color: #20180a;
font-size: 14px; letter-spacing: 0.16em; padding: 3px 12px; border-radius: 2px; font-weight: 700; }
.lp .plan h3 { font-size: 20px; color: var(--ink-bright); margin: 0 0 10px; }
.lp .plan .price { font-family: var(--serif-lp); font-size: 2rem; color: var(--gold-bright); }
.lp .plan .price small { font-size: max(14px, 0.44em); color: var(--muted); letter-spacing: 0.1em; }
.lp .plan ul { list-style: none; padding: 0; margin: 18px 0 22px; }
.lp .plan li { font-size: 0.88rem; color: var(--cream-dim); padding: 6px 0 6px 18px; position: relative; }
.lp .plan li::before { content: '·'; position: absolute; left: 4px; color: var(--gold-lp); }
.lp .caveat { margin-top: 26px; font-size: 14px; color: var(--muted); }
/* 修了証（原本どおり: 二重罫の枠・隅飾り・氏名欄・日付・落款） */
/* 問答 */
.lp .faq { max-width: 46em; margin: 40px auto 0; }
.lp .faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.lp .faq summary { font-family: var(--serif-lp); font-size: 1.04rem; color: var(--ink-bright); cursor: pointer;
padding: 12px 0; }
.lp .faq p { margin: 12px 0 0; color: var(--cream-dim); font-size: 0.92rem; }
/* 締め */
.lp .final { text-align: center; border-top: 1px solid var(--line);
background: radial-gradient(900px 420px at 50% 0%, rgba(194, 161, 91, 0.12), transparent 62%), var(--lp-ground2); }
.lp .final h2 { max-width: 16em; margin: 0 auto 0.3em; }
.lp .lp-foot { border-top: 1px solid var(--line); padding: 34px 0 46px; font-size: 14px; color: var(--muted); }
.lp .lp-foot .cat { font-family: var(--mono-lp); font-size: 14px; letter-spacing: 0.22em; margin: 14px 0 0; }
.lp .lp-foot .credit { margin-top: 16px; font-size: 14px; line-height: 1.8; }
@media (max-width: 860px) {
.lp .hero-grid { grid-template-columns: 1fr; gap: 30px; }
.lp .hero { padding: 64px 0 56px; }
.lp .medallion-fig { max-width: 260px; }
.lp .demo-grid, .lp .master-grid { grid-template-columns: 1fr; gap: 28px; }
.lp .depts, .lp .gains, .lp .plans { grid-template-columns: 1fr 1fr; }
.lp .real { grid-template-columns: 1fr; gap: 30px; }
.lp .layer { grid-template-columns: 1fr; gap: 14px; }
.lp section { padding: 60px 0; }
}
@media (max-width: 560px) {
.lp .q3, .lp .depts, .lp .gains, .lp .plans { grid-template-columns: 1fr; gap: 16px; }
.lp .real .coins { height: 210px; }
.lp .real .rc { width: 118px; }
.lp .real .rc1 { left: calc(50% - 168px); top: 24px; }
.lp .real .rc2 { left: calc(50% - 66px); top: 0; width: 132px; }
.lp .real .rc3 { left: calc(50% + 52px); top: 28px; }
.lp .facts { gap: 1.4rem; }
/* 証書は罫の内側を詰める。⚠ 字間を残したまま幅だけ狭めると本文が枠から溢れる */
/* ⚠ 題の字間 0.6em は「修 了 証」の三字に合わせた寸法。ラテン文字は 7〜11 字あるので
SP ではそのままだと枠から出る（実測 fr/es で 333px > 280px）。字間と級数を落として全語に合わせる。 */
}
/* 学科カードの図版。⚠ 実測すると、この段は 1,433px・645字で絵が 0 枚だった。
⚠ 手で選ばず、その学科に属する科目自身の図版から取る。
⚠ 紙の地なので透過の実物（コイン）を使う。写真は紙に沈まず浮く。 */
.dept.has-plate { position: relative; }
.dept-plate { position: absolute; right: 14px; top: 14px; width: 46px; height: 46px;
object-fit: contain; opacity: .55; filter: saturate(.7); transition: opacity .2s; }
.dept.has-plate:hover .dept-plate { opacity: .95; filter: none; }
.dept.has-plate h3, .dept.has-plate p { padding-right: 54px; }
@media (max-width: 640px) { .dept-plate { width: 36px; height: 36px; right: 10px; top: 10px; }
.dept.has-plate h3, .dept.has-plate p { padding-right: 42px; } }
/* 情景の帯 — 図録の図版として額装する。絵は油彩調で暗いので、紙の地に細い金の罫と台紙で載せる */
.lp .scene-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.lp .scene-strip figure { margin: 0; background: rgba(255, 252, 244, 0.5);
border: 1px solid var(--line); padding: 10px 10px 8px; }
.lp .scene-strip img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
filter: saturate(.92); }
.lp .scene-strip figcaption { padding: 9px 2px 2px; font-size: 14px; letter-spacing: .08em;
color: var(--plate-sub); text-align: center; }
@media (max-width: 640px) {
.lp .scene-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lp .scene-strip figure { padding: 6px 6px 4px; }
.lp .scene-strip figcaption { font-size: 14px; letter-spacing: .04em; }
}
/* 中間幅（861〜1100px）: 実物コイン3枚の絶対配置が柱からあふれる（実測 1024px で +4px）。
置き位置と寸法を柱に収める */
@media (min-width: 861px) and (max-width: 1100px) {
.lp .real .rc { width: 150px; }
.lp .real .rc1 { left: calc(50% - 210px); }
.lp .real .rc2 { width: 168px; left: calc(50% - 84px); }
.lp .real .rc3 { left: calc(50% + 56px); }
}
/* 校名の読み仮名。語中で折り返さない・一回り小さく静かに */
.lp .hero .kicker-yomi { white-space: nowrap; font-size: max(14px, .72em); letter-spacing: .14em; opacity: .85; }