/* ============================================================================= NOMISMA — 全頁共通の面 “Dark Academia Scholarly”（2026-09-03）。 ⚠⚠ 2026-10-25: 既定は明るい面（アイボリー）に変わった（最終版 3 章・デザイン）。暗い面は data-theme="dark"（利用者の切替）。下の白地の節の注記を参照。 ⚠⚠ 2026-09-04: **設計（配置・部品・字組み）は面に依らず常に効く**。暗い面が既定、白地は html[data-theme="light"] で **色のトークンだけ**を明るい値に差し替える（オーナー「デザインが同じでライトモードにできるように」）。 直書きの色は使わない — 使うなら --lpd-* に名前を付けて、暗い値（下の html {}）と明るい値（html[data-theme="light"] {}）の両方に置く。 画像の上の幕（--lpd-scrim-*）も面ごとに変える（白地では薄い紙色の幕＋墨の字）。 実測の門: tools/contrast_scan.mjs を THEME 無し（暗い面）と THEME=light の両方で。 ========================================================================== */ /* ── 明るい面（既定）の --lpd-* トークン。⚠ 例外的に**無接頭**で置く: 入口（LP）の 12 節の部品（.ac-inside .ac-trust .ac-one .ac-adm .ac-free …）は 2026-09-03 の暗い面と同時に作られ、この一枚にしか規則が無い。部品の規則は面に依らず効かせ（下で接頭を外してある）、色はトークンで面ごとに変える。 値は academic.css の紙地（--paper / --paper-white / --navy / --gold / --gold-deep）と同じ系統 */ /* ============================================================================= NOMISMA — 全頁共通の面 “Dark Academia Scholarly”（2026-09-03 オーナー指示「トップのデザインと全てのページを合わせて」） 正本: docs/design/lp-dark-academia/DESIGN.md（Stitch のトークン）。 ⚠ 2026-09-03 午前までは入口（LP）だけの面（lp-dark.css・body.on-lp に限定）だった。同日午後、学校の面（server 描画・body.ac）と 学びの画面（SPA・style.css）にも同じ面を当てるため、限定を外してこの一枚に統合した。lp-dark.css は廃止。 ⚠ 値はトークンをそのまま使う。地を変えたら、その上の文字色は必ず測り直す（実測の門: tools/contrast_scan.mjs）。 ========================================================================== */ /* ── 1. 学びの画面（style.css）の変数を暗い地の値へ。部品は変数で色を決めているので、ここで大半が揃う ── */ /* ⚠ :root で書く。html {} だと style.css の :root（擬似クラス＝強い）に負けて暗い面で字が墨になる（実測 2026-09-04） */ :root { --paper: #101415; --paper-hi: #1d2022; --paper-lo: #191c1e; --ink: #e0e3e5; --ink-mid: #c6c6cd; --ink-faint: #9a9ca3; --navy: #bec6e0; --navy-deep: #dae2fd; --shu: #e9c349; --gold: #e9c349; --gold-bright: #e9c349; --rule: #45464d; --rule-strong: #5a5b63; --font-mincho: 'Playfair Display', 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --font-data: 'Inter', 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif; } /* 紺・朱を地にして白文字を載せていた 4 箇所（変数の差し替えだけでは白文字が残る）→ 金の釦に */ .rating button.sel, html .chip.on, html .watch-link { background:var(--lpd-fill); border-color:var(--lpd-fill); color:var(--lpd-on-fill); } .watch-link:hover { background:var(--lpd-fill-hover); color:var(--lpd-on-fill); } /* ── 2. 学校の面（academic.css）の変数。⚠ 白地前提で紺を「地」に使う部品は下で個別に上書きする ── */ html .ac { --navy: #bec6e0; --navy-deep: #dae2fd; --navy-soft: #3f465c; --navy-mist: #283044; --gold: #e9c349; --gold-deep: #e9c349; --gold-pale: #ffe088; --paper: #101415; --paper-white: #1d2022; --parchment: #191c1e; --ink: #e0e3e5; --ink-mid: #c6c6cd; --ink-faint: #9a9ca3; --rule: #45464d; --rule-strong: #5a5b63; --ink-black: #0b0f10; --shadow-float: 0 8px 40px rgba(0, 0, 0, .5); --serif: 'Playfair Display', 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif; --sans: 'Inter', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif; --mono: 'Inter', 'Hanken Grotesk', ui-monospace, monospace; background: #101415; color: #e0e3e5; } /* 頁の頭（下層の帯）: 紺のベタ → 地の一段上に情景を薄く */ body .ac-pagehead { background:var(--lpd-low); color:var(--lpd-on); } /* 2026-10-26: 写真のある頭は、写真を別の枠（）に出し、字は無地の地（明るい面はアイボリー --lpd-surface #FBF6EA）に置く。旧は幕（scrim）を重ねた背景の写真の上に字 */ body .ac-pagehead.has-scene { background:var(--lpd-surface); } body .ac-pagehead .ac-label { color:var(--lpd-gold-text); } body .ac-pagehead .ac-lede { color:var(--lpd-variant); } body .ac-crumb, body .ac-crumb a { color:var(--lpd-faint); } /* 紺の地に白文字だった部品 → 金の地に濃い文字 */ body .ac-tabs a[aria-current] { background:var(--lpd-fill); border-color:var(--lpd-fill); color:var(--lpd-on-fill); } body .ac-tabs a { background:var(--lpd-container); border-color:var(--lpd-outline-variant); color:var(--lpd-variant); } body .ac-tabs a:hover { border-color:var(--lpd-gold); color:var(--lpd-gold-text); } body .ac-tag-free { background:var(--lpd-fill); color:var(--lpd-on-fill); } body .ac-card-fig img.ac-card-plate { background:var(--lpd-container-92); border-color:var(--lpd-line-hi); } body .ac-spec:hover { background:var(--lpd-container); } body .ac-axismap a { background:var(--lpd-container); } body .ac-dl dt { color:var(--lpd-gold-text); } body .ac-faq summary { color:var(--lpd-on); } body .ac-prose a { color:var(--lpd-primary); border-bottom-color:var(--lpd-outline); } body .ac-prose a:hover { border-bottom-color:var(--lpd-gold); } body .ac-prose h2 { color:var(--lpd-on); } body .ac-related a { color:var(--lpd-primary); border-bottom-color:var(--lpd-outline); } body .ac-form input, body .ac-form textarea { background:var(--lpd-container); color:var(--lpd-on); border-color:var(--lpd-outline); } body .ac-form input:focus, body .ac-form textarea:focus { outline-color:var(--lpd-gold); } body .ac-form label { color:var(--lpd-on); } body .ac-form-msg.is-ok { color:var(--lpd-gold-text); } body .ac-form-msg.is-ng { color:var(--lpd-error); } body .ac-course-pending .ac-card-fig { background:var(--lpd-low); } /* 引く頁（用語・実物・航路の本文）の表 */ body .yo-table th { background:var(--lpd-container); } body .yo-table th, body .yo-table td { border-color:var(--lpd-outline-variant); } body .yo-fig.scene img { box-shadow:0 0 0 1px var(--lpd-outline-variant); } /* 人物編の停別プレーヤー（リテラル色を使っていた）*/ body .jt-btn { border-color:var(--lpd-outline); background:var(--lpd-container); color:var(--lpd-on); } body .jt-btn.is-on { background:var(--lpd-fill); color:var(--lpd-on-fill); border-color:var(--lpd-fill); } body .jt-resume { border-color:var(--lpd-gold); background:linear-gradient(180deg, var(--lpd-gold-dim), var(--lpd-gold-dim2)); color:var(--lpd-gold-hover); box-shadow:none; } body .jt-lbl, body .jt-pos { color:var(--lpd-faint); } body .jt-text { color:var(--lpd-variant); } body .ac-film { border-color:var(--lpd-outline-variant); } /* 学校の面の脚部と CTA 帯は lp と同じ規則（下に続く）*/ /* ── 3. 入口（LP）で作った部品の面。body.on-lp の限定を外したもの ── */ /* （以下、旧 lp-dark.css の本文） NOMISMA — 入口（LP）の意匠 “Dark Academia Scholarly”（Stitch 2026-09-03） 正本: workspace/current/nomisma-redesign/stitch/stitch_nomisma_landing_page_redesign/{DESIGN.md,code.html,screen.png} ⚠ 文言は一切変えない（オーナー指示「ライティング内容は今のまま・デザインのみ」）。 app.js の viewLP() が描く同じ節・同じ辞書キーに、この面だけを着せる。 ⚠ 全規則を body に閉じる。学校の面（/gakubu 等の server 描画）と学びの画面には及ばない。 ⚠ 値は DESIGN.md / code.html（tailwind.config）の値をそのまま使う。 - 色: surface #101415 / low #191c1e / container #1d2022 / high #272a2c / lowest #0b0f10 on-surface #e0e3e5 / variant #c6c6cd / outline-variant #45464d / primary #bec6e0 secondary(gold) #e9c349 / on-secondary #3c2f00 / secondary-fixed(hover) #ffe088 - 字: headline-xl 48/1.2/-.02em 600 ・ lg 36/1.25/-.01em 600 ・ md 24/1.3 500（Playfair Display） body-lg 18/1.6 ・ body-md 15/1.6 ・ label-sm 12/1.4/.05em 500（Inter） - 形: 札 rounded-xl=0.5rem ・ 釦 rounded-lg=0.25rem ・ 節 py-24=96px ・ 器 max-w-7xl=1280px gutter desktop 32 / tablet 24 / mobile 16 ・ 頭 h-20=80px ・ 札の余白 p-8=32px ・ 枡 p-6=24px ⚠ 768px 未満の見出しは DESIGN.md「32px を超える見出しは縮める」に従う。縮め先の数は設計に無いので、 この学校が既に持つ SP の値（academic.css: display 34px / h2 26px）を使う（新しい数を作らない）。 ⚠ 書体は自前配信（/fonts/playfair-display.css, /fonts/inter.css）。実行時に Google を読まない （index.html の注記のとおり、約 30 回に 1 回壊れる）。和文は Shippori Mincho / Noto Sans JP に落ちる。 ⚠ 設計では主 CTA も金（secondary）。この面の中では「金＝入学だけ」の規律より設計を優先する。 ========================================================================== */ /* ⚠ 変数は :root に置く（2026-09-03 実測: `body .ac { --lpd-* }` は学校の面＝body 自身が .ac のとき自分に当たらず、 頭部の余白 0・金の釦が透明になった）。接頭辞 --lpd- は他と衝突しない */ html { --lpd-surface: #101415; --lpd-low: #191c1e; --lpd-container: #1d2022; --lpd-high: #272a2c; --lpd-highest: #323537; --lpd-lowest: #0b0f10; --lpd-bright: #363a3b; --lpd-on: #e0e3e5; --lpd-variant: #c6c6cd; --lpd-outline: #909097; --lpd-outline-variant: #45464d; --lpd-primary: #bec6e0; --lpd-gold: #e9c349; --lpd-gold-text: #e9c349; --lpd-faint: #9a9ca3; --lpd-primary-strong: #dae2fd; --lpd-error: #f3a19a; --lpd-gold-60: rgba(233, 195, 73, .6); --lpd-gold-40: rgba(233, 195, 73, .4); --lpd-gold-dim: #3a3010; --lpd-gold-dim2: #2a2308; --lpd-line-10: rgba(69, 70, 77, .1); --lpd-line-30: rgba(69, 70, 77, .3); --lpd-line-40: rgba(69, 70, 77, .4); --lpd-line-50: rgba(69, 70, 77, .5); --lpd-line-60: rgba(69, 70, 77, .6); --lpd-line-hi: rgba(255, 255, 255, .12); --lpd-container-92: rgba(29, 32, 34, .92); --lpd-high-80: rgba(39, 42, 44, .8); --lpd-surface-80: rgba(16, 20, 21, .8); --lpd-scrim-96: rgba(16, 20, 21, .96); --lpd-scrim-94: rgba(16, 20, 21, .94); --lpd-scrim-74: rgba(16, 20, 21, .74); --lpd-scrim-62: rgba(16, 20, 21, .62); --lpd-scrim-60: rgba(16, 20, 21, .6); --lpd-scrim-30: rgba(16, 20, 21, .3); --lpd-on-gold: #3c2f00; --lpd-gold-hover: #ffe088; /* 2026-10-26 塗りの釦・札（字のある塗り）のトークン。暗い面は従来の金（--lpd-gold・--lpd-gold-hover・--lpd-on-gold と同じ値）。明るい面は藍（下の html[data-theme="light"]） */ --lpd-fill: #e9c349; --lpd-fill-hover: #ffe088; --lpd-on-fill: #3c2f00; --lpd-serif: 'Playfair Display', 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif; --lpd-sans: 'Inter', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif; --lpd-r-card: 0.5rem; --lpd-r-btn: 0.25rem; --lpd-sec: 96px; --lpd-head-h: 80px; --lpd-gutter: 16px; }/* 飛び先の余白（style.css: .part / [id^=sec-] の scroll-margin-top = --head-h + 0.8rem）は、頭の実寸から出す。 頭は本 file が全幅で --lpd-head-h に組む（body .ac-head-bar { height: var(--lpd-head-h) }）ので、--head-h もここから出す。 ⚠ 2026-09-07 実測（check:reading）: style.css の旧値（SP 64px / PC 38+84）が残り、SP で目次から飛んだ見出しが 3〜4px 頭の下に潜っていた。 html:root は style.css の :root と @media の :root（同じ specificity・後勝ち）より強く、読み込み順に依らず勝つ。片方だけ変えない */ html:root { --head-top-h: 0px; --head-main-h: var(--lpd-head-h); } @media (min-width: 768px) { html { --lpd-gutter: 24px; } } @media (min-width: 1024px) { html { --lpd-gutter: 32px; } } body .ac, html .ac { background:var(--lpd-surface); color:var(--lpd-on); font-family:var(--lpd-sans); font-size:15px; line-height:1.6; } body { background:var(--lpd-surface); } /* 器 — max-w-7xl（1280px・余白込み）＋ gutter */ body .ac-wrap { max-width:1280px; padding:0 var(--lpd-gutter); } /* 節 — py-24。地は設計の交互（surface / surface-container-low） */ body .ac-sec, body .ac-sec--tight { padding:var(--lpd-sec) 0; } body .ac-sec--paper, body .ac-sec--parch { background:var(--lpd-surface); } body .ac-sec--navy, body #gain, body .ac-cta { background:var(--lpd-low); color:var(--lpd-on); } /* 字の階層 */ body .ac-display { font-family:var(--lpd-serif); font-weight:600; font-size:34px; line-height:1.2; letter-spacing:-0.02em; color:var(--lpd-on); } body .ac-h2 { font-family:var(--lpd-serif); font-weight:600; font-size:22px; line-height:1.25; /* 2026-10-26 要件定義書 v2 5 章: 見出し（h2）は 20〜22px（旧 26px） */ letter-spacing:-0.01em; color:var(--lpd-on); } @media (min-width: 768px) { body .ac-display { font-size:48px; } body .ac-h2 { font-size:22px; } /* 2026-10-26 要件定義書 v2 5 章: 見出し（h2）は 20〜22px（旧 768px 以上 36px） */ } body .ac-h3, body .ac-h4 { font-family:var(--lpd-serif); font-weight:500; font-size:24px; line-height:1.3; letter-spacing:normal; color:var(--lpd-on); } body .ac-label { font-family:var(--lpd-sans); font-size:14px; font-weight:500; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; color: var(--lpd-gold-text); margin:0 0 8px; } body .ac-lede { font-family:var(--lpd-sans); font-size:15px; line-height:1.6; color:var(--lpd-variant); margin:16px 0 0; max-width:448px; } body .ac-body { font-size:18px; line-height:1.6; color:var(--lpd-variant); } body .ac-small { font-size:14px; line-height:1.4; letter-spacing:.05em; color:var(--lpd-variant); } body .ac-card-desc { font-size:15px; line-height:1.6; color:var(--lpd-variant); margin:0; } body .ac-card-desc + .ac-card-desc { margin-top:16px; } body .ac-head { margin-bottom:64px; } body .ac-head--mid { max-width:672px; } body .ac-head--mid .ac-h2 { margin-bottom:16px; } body .ac-head--mid .ac-lede { margin-top:0; max-width:none; } body .ac-rule-mid { display:none; } /* 釦 — 主＝金のベタ／並列＝暗い地に薄い枠。文字は label-sm の大文字 */ body .ac-btn { font-family:var(--lpd-sans); font-size:14px; font-weight:500; line-height:1.4; letter-spacing:.05em; text-transform:uppercase; padding:16px 32px; min-height:48px; border-radius:var(--lpd-r-btn); border:1px solid transparent; transition:background-color .18s ease, color .18s ease; } body .ac-btn--primary, body .ac-btn--gold { background:var(--lpd-fill); color:var(--lpd-on-fill); } body .ac-btn--primary:hover, body .ac-btn--gold:hover { background:var(--lpd-fill-hover); color:var(--lpd-on-fill); } body .ac-btn--outline, body .ac-hero .ac-btn--outline, body .ac-cta .ac-btn--outline, body .ac-sec--navy .ac-btn--outline { background:var(--lpd-high-80); color:var(--lpd-on); border-color:var(--lpd-line-30); } body .ac-btn--outline:hover, body .ac-hero .ac-btn--outline:hover, body .ac-cta .ac-btn--outline:hover, body .ac-sec--navy .ac-btn--outline:hover { background:var(--lpd-bright); color:var(--lpd-on); } body .ac-btns { gap:16px; } body .ac-hero .ac-btn--primary { box-shadow:0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); } @media (max-width: 699px) { body .ac-btns > .ac-btn { width:auto; } } /* 頭部 — 80px の一段・すりガラス（surface/80 + blur-xl）。 ⚠ 上段（言語・身分・入学案内）と下段（校名・ナビ）の DOM は共通のまま、並びだけ一段に畳む。 上段は order で右端へ。SP では上段は元々隠れ、目次（ac-menu）が受ける。 */ body .ac-head-bar { display:flex; align-items:center; gap:24px; height:var(--lpd-head-h); padding:0 max(var(--lpd-gutter), calc((100% - 1280px) / 2 + var(--lpd-gutter))); background:var(--lpd-surface-80); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:0; box-shadow:0 1px 8px rgba(0, 0, 0, .04); } body .ac-head-in { flex:1; max-width:none; margin:0; padding:0; height:auto; gap:32px; } body .ac-head-top { order:2; background:none; border:0; } body .ac-head-top-in { max-width:none; margin:0; padding:0; height:auto; gap:16px; } /* ⚠ 校名は 直下の素のテキスト（app.js の chrome() は を作らない）。a 自身に着せる */ body .ac-brand, body .ac-brand b { padding:0; font-family:var(--lpd-serif); font-weight:500; font-size:24px; line-height:1.3; letter-spacing:.025em; color:var(--lpd-primary); } body .ac-brand:hover { color:var(--lpd-on); } body .ac-brand small { font-family:var(--lpd-sans); font-size:14px; letter-spacing:.05em; color:var(--lpd-outline); } body .ac-nav { gap:32px; align-items:center; } body .ac-nav a, body .ac-drop > summary { padding:8px 0; border-bottom:0; font-family:var(--lpd-sans); font-size:15px; font-weight:400; line-height:1.6; color:var(--lpd-variant); } body .ac-nav a:hover, body .ac-drop > summary:hover, body .ac-drop[open] > summary { color:var(--lpd-on); border-bottom:0; } body .ac-nav a[aria-current] { color: var(--lpd-gold-text); font-weight:500; border-bottom:0; } body .ac-drop-panel { background:var(--lpd-high); border-color:var(--lpd-outline-variant); border-radius:var(--lpd-r-btn); box-shadow:0 8px 40px rgba(0, 0, 0, .4); } body .ac-drop-panel a { color:var(--lpd-on); } body .ac-drop-panel a:hover { background:var(--lpd-highest); color:var(--lpd-on); } body .ac-head-top-in a { color:var(--lpd-variant); font-family:var(--lpd-sans); font-size:15px; font-weight:400; } body .ac-head-top-in a:hover { color:var(--lpd-on); } body .ac-head-top-in .nav-state { color:var(--lpd-outline); font-size:14px; } body .ac-head-top .ac-head-cta, body .ac-head-top-in a.ac-head-cta { background:var(--lpd-fill); color:var(--lpd-on-fill); font-family:var(--lpd-sans); font-size:14px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; line-height:1.4; padding:8px 24px; min-height:40px; border-radius:var(--lpd-r-btn); } body .ac-head-top .ac-head-cta:hover { background:var(--lpd-fill-hover); color:var(--lpd-on-fill); } body .lang-sel { background:transparent; color:var(--lpd-variant); border:1px solid var(--lpd-outline-variant); border-radius:var(--lpd-r-btn); font-family:var(--lpd-sans); font-size:14px; padding:6px 8px; } /* ⚠ 2026-09-04: 学校の面（.ac-lang）は文字だけ。学びの画面の枠付きの箱は style.css で外したが、ここが枠を戻していた */ body .lang-sel { border:0; padding:0 0.9rem 0 0; background:transparent no-repeat right 0.15rem center; background-image:url("data:image/svg+xml;utf8,"); } body .lang-sel option { background:var(--lpd-high); color:var(--lpd-on); } body .ac-menu > summary { background:var(--lpd-high); border-color:var(--lpd-outline-variant); border-radius:var(--lpd-r-btn); } body .ac-menu > summary span, body .ac-menu > summary span::before, body .ac-menu > summary span::after { background:var(--lpd-on); } body .ac-menu[open] > summary span { background:transparent; } body .ac-menu-panel { background:var(--lpd-container); border-color:var(--lpd-outline-variant); border-radius:var(--lpd-r-card); box-shadow:0 8px 40px rgba(0, 0, 0, .5); } body .ac-menu-panel a { color:var(--lpd-on); } body .ac-menu-panel a:hover, body .ac-menu-panel a[aria-current] { background:var(--lpd-high); color: var(--lpd-gold-text); } body .ac-menu-panel hr { border-top-color:var(--lpd-outline-variant); } body .ac-menu-panel small { color:var(--lpd-outline); font-family:var(--lpd-sans); } body .ac-menu-langs a { color:var(--lpd-on); border-color:var(--lpd-outline-variant); } body .ac-menu-langs a:hover, body .ac-menu-langs a[aria-current] { background:var(--lpd-high); color: var(--lpd-gold-text); border-color:var(--lpd-gold); } /* ヒーロー — 情景を全面に敷き、下から surface へ溶かす（to-t from-surface via-surface/60 to-surface/30）。 ⚠ 頭部の裏まで絵を回す（設計の -mt-20 pt-20）。sticky の頭の分だけ上へ引き上げる。 */ body .ac-hero { display:flex; align-items:center; min-height:921px; margin-top:calc(-1 * var(--lpd-head-h)); padding-top:var(--lpd-head-h); background:var(--lpd-surface); color:var(--lpd-on); } body .ac-hero-bg img { opacity:1; } body .ac-hero-bg::after { background:linear-gradient(to top, var(--lpd-surface) 0%, var(--lpd-scrim-60) 50%, var(--lpd-scrim-30) 100%); } body .ac-hero-in { flex:1; padding:96px 0; max-width:none; text-align:center; } body .ac-hero-in .ac-wrap { max-width:1024px; display:flex; flex-direction:column; align-items:center; } body .ac-hero .ac-label { margin-bottom:16px; } body .ac-hero .ac-display { max-width:896px; margin:0 0 24px; } body .ac-hero .ac-lede { font-size:18px; line-height:1.6; color:var(--lpd-variant); max-width:672px; margin:0 0 40px; } body .ac-hero .ac-btns { justify-content:center; margin-top:0; } @media (max-width: 767px) { body .ac-hero { min-height:640px; } } /* WHY NOW — 見出しの左に肩ラベル＋題、右に説明（items-end）。引用は金の縦罫。 */ body #why .ac-head { display:grid; grid-template-columns:1fr; grid-template-areas:'label' 'h2' 'lede'; align-items:end; } body #why .ac-head .ac-label { grid-area:label; } body #why .ac-head .ac-h2 { grid-area:h2; } body #why .ac-head .ac-lede { grid-area:lede; } @media (min-width: 768px) { body #why .ac-head { grid-template-columns:1fr minmax(0, 448px); grid-template-areas:'label lede' 'h2 lede'; column-gap:48px; } body #why .ac-head .ac-lede { margin-top:0; } } body .ac-quote { border-left:2px solid var(--lpd-gold-40); padding:0 0 0 24px; margin:0 0 64px; } body .ac-quote p { font-family:var(--lpd-serif); font-style:italic; font-weight:500; font-size:24px; line-height:1.3; color:var(--lpd-on); margin:0; } /* 札 — 地の一段上（surface-container）・枠なし・rounded-xl・p-8。番号は Playfair の金（60%） */ body .ac-grid { gap:32px; } body .ac-card { background:var(--lpd-container); border:0; border-radius:var(--lpd-r-card); transition:background-color .18s ease; } body .ac-card:hover { background:var(--lpd-high); } body .ac-card-in { padding:32px; } body .ac-card-meta { font-family:var(--lpd-serif); font-size:24px; font-weight:500; line-height:1.3; letter-spacing:normal; text-transform:none; color:var(--lpd-gold-text); margin-bottom:16px; /* 2026-10-24 指示 77: 金 60%（地 #1d2022 に 4.34）→ 金（9.65） */ } body .ac-card .ac-h3 { margin-bottom:12px; } body .ac-gain-out { color: var(--lpd-gold-text); font-size:14px; line-height:1.4; letter-spacing:.05em; font-weight:500; } /* MATERIALS — 枡を 6 列（2/3/6）。数は Playfair の金 */ body .ac-stats, body .ac-sec--navy .ac-stats { grid-template-columns:repeat(2, 1fr); gap:24px; background:none; border:0; margin-bottom:48px; } @media (min-width: 768px) { body .ac-stats.ac-stats--3 { grid-template-columns:repeat(3, 1fr); } } @media (min-width: 1024px) { body .ac-stats.ac-stats--3 { grid-template-columns:repeat(6, 1fr); } } body .ac-stat, body .ac-sec--navy .ac-stat { background:var(--lpd-container); padding:24px; border-radius:var(--lpd-r-card); } body a.ac-stat:hover, body .ac-sec--navy a.ac-stat:hover { background:var(--lpd-high); } body .ac-stat-n, body .ac-sec--navy .ac-stat-n { font-family:var(--lpd-serif); font-size:36px; font-weight:600; line-height:1.25; letter-spacing:-0.01em; color: var(--lpd-gold-text); margin-bottom:4px; } body .ac-stat-l, body .ac-sec--navy .ac-stat-l { font-family:var(--lpd-sans); font-size:14px; font-weight:500; line-height:1.4; letter-spacing:.05em; text-transform:uppercase; color:var(--lpd-variant); margin-top:0; } body .ac-note { margin-top:0; text-align:center; color:var(--lpd-variant); } body .ac-note + .ac-note { margin-top:8px; } body .ac-note-link { color:var(--lpd-gold-text); text-decoration:underline; } body .ac-note-link:hover { color:var(--lpd-gold-hover); } body .ac-note--italic { font-style:italic; } /* HOW YOU LEARN — 四つの札。番号は counter（academic の ::before）を設計の番号に着せ替える */ body .ac-steps { gap:32px; background:none; border:0; margin-bottom:48px; } @media (min-width: 768px) { body .ac-steps.ac-steps--4 { grid-template-columns:repeat(4, 1fr); } } body .ac-step { background:var(--lpd-container); padding:32px; border-radius:var(--lpd-r-card); } body .ac-step::before { font-family:var(--lpd-serif); font-size:24px; font-weight:500; line-height:1.3; letter-spacing:normal; color:var(--lpd-gold-60); margin-bottom:16px; } body .ac-step h3 { margin-bottom:12px; } /* WHAT YOU GAIN — 札の下に主釦を中央へ */ body #gain .ac-grid { margin-bottom:64px; } body #gain .ac-btns { justify-content:center; margin-top:0; } /* FACULTY — 二段組（gap-12）・写真は 500px 高の rounded-xl・影 */ body .ac-split { gap:48px; } body .ac-split-fig { aspect-ratio:auto; height:500px; border-radius:var(--lpd-r-card); background:var(--lpd-container); box-shadow:0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); } body #master .ac-h2 { margin-bottom:24px; } body #master .ac-lede { font-size:18px; max-width:none; margin:0 0 24px; } body .ac-master-name { font-family:var(--lpd-serif); font-size:24px; font-weight:500; line-height:1.3; color:var(--lpd-on); margin:0 0 32px; } body .ac-master-name b { font-weight:500; } body #master .ac-btns { margin-top:0; } /* 末尾の帯 */ body .ac-cta .ac-wrap { max-width:768px; } body .ac-cta .ac-h2 { color:var(--lpd-on); margin-bottom:24px; } body .ac-cta .ac-lede { font-size:18px; color:var(--lpd-variant); max-width:none; margin:0 0 40px; } body .ac-cta .ac-btns { margin-top:0; } /* 脚部 — surface-container-lowest・4 列・肩ラベルは金の大文字 */ body .ac-foot { background:var(--lpd-lowest); color:var(--lpd-variant); padding:64px 0 0; border-top:1px solid var(--lpd-line-10); } body .ac-foot-grid { gap:48px; } @media (min-width: 768px) { body .ac-foot-grid { grid-template-columns:repeat(4, 1fr); gap:48px; } } body .ac-foot-brand b { font-family:var(--lpd-serif); font-size:24px; font-weight:500; line-height:1.3; color:var(--lpd-primary); margin-bottom:16px; } body .ac-foot-brand p { font-family:var(--lpd-sans); font-size:14px; line-height:1.6; color:var(--lpd-variant); margin:0 0 16px; } body .ac-foot h2 { /* 2026-09-08: 列見出しを h4→h2（見出しの階層の飛びを直す）。ここが追随しないと既定の暗い面で見た目が変わる */ font-family:var(--lpd-sans); font-size:20px; font-weight:500; line-height:1.4; letter-spacing:.05em; text-transform:uppercase; color: var(--lpd-gold-text); margin:0 0 16px; } body .ac-foot li { margin-bottom:12px; } body .ac-foot a { font-size:14px; color:var(--lpd-variant); } body .ac-foot a:hover { color:var(--lpd-on); } body .ac-foot-bottom { margin-top:64px; padding:48px 0; border-top:1px solid var(--lpd-line-10); font-family:var(--lpd-sans); font-size:14px; line-height:1.4; letter-spacing:.05em; color:var(--lpd-variant); } /* ============================================================================= ファーストビュー 3 層（2026-09-03）: 主見出し → 四つの「なぜ」→ ブランドの一文（既存 brand.tag）→ 学校の定義 ========================================================================== */ body .ac-hero .ac-fv-q { margin-bottom:24px; } body .ac-fv-brand { font-family:var(--lpd-serif); font-weight:600; font-size:24px; line-height:1.3; letter-spacing:-0.01em; color:var(--lpd-gold-text); margin:0 0 16px; } body .ac-hero .ac-fv-school { font-size:15px; margin-bottom:40px; } /* ============================================================================= INSIDE NOMISMA — 入学するとひらく四つの学び（2×2 の大型札・SP は縦一列） ⚠ 札の画像は本物（教本と航路の実ページ・DB の実物）。見本を描かない ========================================================================== */ body .ac-in-lede1 { font-family:var(--lpd-serif); font-size:24px; line-height:1.3; font-weight:500; color:var(--lpd-on); } body .ac-head--mid .ac-lede + .ac-lede { margin-top:12px; } body .ac-in-lede3 { font-size:14px; line-height:1.6; letter-spacing:.05em; } body .ac-inside { display:grid; grid-template-columns:1fr; gap:32px; margin-bottom:48px; } @media (min-width: 768px) { body .ac-inside { grid-template-columns:repeat(2, 1fr); } } body .ac-inside-card { display:flex; flex-direction:column; background:var(--lpd-container); border-radius:var(--lpd-r-card); overflow:hidden; transition:background-color .18s ease; } body .ac-inside-card:hover { background:var(--lpd-high); } body .ac-inside-fig { position:relative; aspect-ratio:16 / 10; background:var(--lpd-lowest); overflow:hidden; } body .ac-inside-fig > img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; } /* 01 読む — 表紙・図版ページ・章の冒頭を三枚、本を広げたように重ねる */ body .ac-inside-fig--book img { position:absolute; width:auto; height:auto; box-shadow:0 20px 25px -5px rgba(0, 0, 0, .5), 0 8px 10px -6px rgba(0, 0, 0, .4); border-radius:2px; } body .ac-book-cover { left:6%; top:8%; width:40% !important; transform:rotate(-3deg); z-index:3; } body .ac-book-figure { left:50%; top:6%; width:46% !important; z-index:2; } body .ac-book-chapter { left:46%; top:50%; width:50% !important; z-index:1; } body .ac-inside-tag { position:absolute; left:16px; bottom:16px; z-index:4; font-family:var(--lpd-sans); font-size:14px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--lpd-on-fill); background:var(--lpd-fill); padding:6px 12px; border-radius:var(--lpd-r-btn); } /* 02 深める — 科目の題の札（実データ） */ body .ac-inside-fig--chips { display:flex; align-items:center; padding:32px; } body .ac-chips { display:flex; flex-wrap:wrap; gap:12px; } body .ac-chip { display:inline-flex; align-items:baseline; gap:10px; padding:10px 16px; border-radius:var(--lpd-r-btn); background:var(--lpd-high); border:1px solid var(--lpd-line-30); color:var(--lpd-on); font-family:var(--lpd-serif); font-size:18px; font-weight:500; line-height:1.3; text-decoration:none; } body .ac-chip:hover { background:var(--lpd-highest); color: var(--lpd-gold-text); } body .ac-chip small { font-family:var(--lpd-sans); font-size:14px; letter-spacing:.05em; color:var(--lpd-outline); } /* 03 確かめる — 実物 4 枚（写真＋名＋出典） */ body .ac-inside-fig--coins { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; padding:24px; align-content:center; } @media (min-width: 520px) { body .ac-inside-fig--coins { grid-template-columns:repeat(4, 1fr); } } body .ac-inside-coin { display:block; text-align:center; text-decoration:none; color:var(--lpd-on); min-width:0; } body .ac-inside-coin img { width:100%; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); } body .ac-inside-coin b { display:block; margin-top:10px; font-family:var(--lpd-sans); font-size:14px; font-weight:500; line-height:1.4; } body .ac-inside-coin small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:4px; font-size:14px; line-height:1.4; color:var(--lpd-outline); } /* 札の本文 */ body .ac-inside-in { padding:32px; display:flex; flex-direction:column; flex:1; } body .ac-inside-k { margin-left:12px; font-family:var(--lpd-sans); font-size:14px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color: var(--lpd-gold-text); vertical-align:middle; } body .ac-inside-in .ac-h3 { margin-bottom:12px; } body .ac-inside-in .ac-card-desc + .ac-card-desc { margin-top:12px; } body .ac-inside-links { margin-top:auto; padding-top:24px; display:flex; flex-wrap:wrap; gap:8px 24px; } body .ac-inside-link { font-family:var(--lpd-sans); font-size:14px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color: var(--lpd-gold-text); text-decoration:none; } body .ac-inside-link::after { content:' →'; } body .ac-inside-link:hover { color:var(--lpd-gold-hover); text-decoration:underline; } /* 入口の選び方（W19 第 3 単位）: 目的の四つの読む順と、題材の入口。文字は 14px 以上（本文 16px）。副題（貨幣の航路など）は小さく添える */ body .ac-choose-list { margin:8px 0 0; padding-left:1.2em; } body .ac-choose-list li { margin:0 0 12px; font-size:16px; line-height:1.6; } body .ac-choose-list a { color: var(--lpd-gold-text); } body .ac-choose-list small { display:block; font-size:14px; color: var(--lpd-variant); } body .ac-in-langs .ac-label { display:inline; margin:0 12px 0 0; } /* ⚠ SP 実測（390px）: 科目の札と実物 4 枚は 16:10 の固定高に入りきらず、上下が切れた。 狭い画面では図版部の高さを中身に合わせる（PC は 16:10 のままで札の高さを揃える） */ @media (max-width: 767px) { body .ac-inside-fig--chips, body .ac-inside-fig--coins { aspect-ratio:auto; } body .ac-inside-fig--chips { padding:24px; } } /* ファーストビューのカテゴリ行（NOMISMA の直下・主見出しの上）。lp.fv.school は使わなくなった（辞書には残す） */ body .ac-fv-cat { font-family:var(--lpd-sans); font-size:15px; font-weight:500; line-height:1.6; letter-spacing:.05em; color:var(--lpd-on); margin:0 0 20px; } body .ac-hero .ac-label { margin-bottom:8px; } body .ac-hero .ac-fv-brand { margin-bottom:40px; } /* ============================================================================= 2026-09-03 監査後の裁定（12 節）で足した節の面 ========================================================================== */ /* 03 一枚から読む — 左に実物 1 枚、右に四つの問い（見る→調べる→つなげる→考える） */ body .ac-one { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; } @media (min-width: 900px) { body .ac-one { grid-template-columns:1fr 1.4fr; gap:48px; } } body .ac-one-fig a { display:block; text-align:center; text-decoration:none; color:var(--lpd-on); } body .ac-one-fig img { width:min(100%, 360px); aspect-ratio:1; object-fit:contain; margin:0 auto; filter:drop-shadow(0 20px 30px rgba(0, 0, 0, .55)); } body .ac-one-fig b { display:block; margin-top:16px; font-family:var(--lpd-serif); font-size:18px; font-weight:500; } body .ac-one-fig small { display:block; margin-top:4px; font-size:14px; color:var(--lpd-outline); } body .ac-one-steps { list-style:none; margin:0; padding:0; display:grid; gap:12px; } body .ac-one-steps li { display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:baseline; background:var(--lpd-container); border-radius:var(--lpd-r-card); padding:20px 24px; } @media (max-width: 519px) { body .ac-one-steps li { grid-template-columns:1fr; gap:6px; } } body .ac-one-k { font-family:var(--lpd-serif); font-size:24px; font-weight:500; color:var(--lpd-gold-60); } body .ac-one-k em { font-style:normal; font-family:var(--lpd-sans); font-size:14px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color: var(--lpd-gold-text); margin-left:10px; } body .ac-one-q { font-family:var(--lpd-serif); font-size:20px; font-weight:500; line-height:1.4; color:var(--lpd-on); } body .ac-one-bridge { margin:48px 0 0; text-align:center; font-family:var(--lpd-serif); font-size:24px; font-weight:500; color: var(--lpd-gold-text); } body .ac-note-dim { color:var(--lpd-outline); margin-left:8px; } /* 05 学び方 — 各段は実ページへの釦。確認問題は一問だけ */ body a.ac-step { text-decoration:none; color:inherit; display:flex; flex-direction:column; } body a.ac-step:hover { background:var(--lpd-high); } body a.ac-step .ac-inside-link { margin-top:auto; padding-top:16px; } body .ac-drill { max-width:720px; margin:48px auto 0; background:var(--lpd-container); border-radius:var(--lpd-r-card); padding:32px; } body .ac-drill-q { font-size:15px; line-height:1.6; color:var(--lpd-on); } body .ac-drill-q p { margin:0 0 8px; } body .ac-drill-q blockquote { margin:8px 0 12px; padding:0 0 0 16px; border-left:2px solid var(--lpd-gold-40); color:var(--lpd-variant); } body .ac-drill-choices { margin:12px 0 16px; padding-left:1.4em; color:var(--lpd-variant); font-size:15px; line-height:1.6; } body .ac-drill-choices li { margin-bottom:6px; } /* 07 貨幣学という学問 — 読み物の幅・出典の列 */ body .ac-num { max-width:720px; margin:0 auto; } body .ac-num .ac-body { font-size:18px; margin:0 0 20px; } body .ac-num-p3 { color:var(--lpd-on); } body .ac-num-map { margin-top:20px; font-size:16px; line-height:1.7; } body .ac-num-map a { color:var(--lpd-gold-text); text-decoration:underline; text-underline-offset:4px; } body .ac-num-src { margin-top:24px; padding-top:24px; border-top:1px solid var(--lpd-line-30); display:flex; flex-direction:column; gap:8px; } body .ac-num-src .ac-label { margin:0 0 4px; } body .ac-num-src a { font-size:14px; color:var(--lpd-variant); text-decoration:underline; text-decoration-color:var(--lpd-line-60); text-underline-offset:3px; } body .ac-num-src a:hover { color: var(--lpd-gold-text); } /* 08 TRUST — 数えられる事実を大きく、規律を定義の並びで、運営を小さく */ body .ac-trust-facts { max-width:820px; margin:0 auto 48px; text-align:center; } body .ac-trust-facts p { font-family:var(--lpd-serif); font-size:24px; font-weight:500; line-height:1.4; color:var(--lpd-on); margin:0 0 16px; } body .ac-trust-grid { display:grid; grid-template-columns:1fr; gap:32px; } @media (min-width: 900px) { body .ac-trust-grid { grid-template-columns:1.3fr 1fr; gap:48px; } } body .ac-dl--dark { border-top:1px solid var(--lpd-line-50); } body .ac-dl--dark > div { border-bottom:1px solid var(--lpd-line-50); } body .ac-dl--dark dt { color:var(--lpd-gold-text); font-family:var(--lpd-sans); } body .ac-dl--dark dd { color:var(--lpd-variant); } body .ac-dl--dark dd a { color:var(--lpd-gold-text); } body .ac-trust-promise { margin-top:16px; } body .ac-trust-who { background:var(--lpd-container); border-radius:var(--lpd-r-card); padding:32px; } body .ac-trust-who img { width:96px; height:96px; object-fit:cover; border-radius:50%; margin-bottom:16px; } body .ac-trust-who .ac-card-desc + .ac-card-desc { margin-top:12px; } body .ac-trust-who .ac-inside-link { display:inline-block; margin-top:16px; } /* 09 向いている人・向いていない人 */ body .ac-fit { display:grid; grid-template-columns:1fr; gap:32px; } @media (min-width: 768px) { body .ac-fit { grid-template-columns:1fr 1fr; gap:48px; } } body .ac-fit .ac-h2 { font-size:22px; margin-bottom:20px; } /* 2026-10-26 要件定義書 v2 5 章: 見出し（h2）は 20〜22px（旧 24px） */ body .ac-fit-list { list-style:none; margin:0; padding:0; } body .ac-fit-list li { padding:12px 0 12px 28px; position:relative; border-top:1px solid var(--lpd-line-40); color:var(--lpd-variant); font-size:15px; line-height:1.6; } body .ac-fit-list li::before { content:'○'; position:absolute; left:4px; color: var(--lpd-gold-text); } body .ac-fit-list--not li::before { content:'×'; color:var(--lpd-outline); } /* 10 無料の範囲 — 札 4 枚 */ body .ac-free { display:grid; grid-template-columns:1fr; gap:24px; } @media (min-width: 768px) { body .ac-free { grid-template-columns:repeat(2, 1fr); } } @media (min-width: 1024px) { body .ac-free { grid-template-columns:repeat(4, 1fr); } } body .ac-free-t { font-family:var(--lpd-serif); font-size:18px; font-weight:500; line-height:1.4; color:var(--lpd-on); margin:0 0 16px; } body .ac-free .ac-inside-links { margin-top:auto; padding-top:0; } /* 11 入学案内 — 価格はここで初めて大きく */ body .ac-adm { max-width:880px; margin:0 auto; } body .ac-adm-price { text-align:center; margin:0 0 32px; } body .ac-adm-price b { display:block; font-family:var(--lpd-serif); font-size:48px; font-weight:600; line-height:1.2; letter-spacing:-0.02em; color: var(--lpd-gold-text); } body .ac-adm-price span { font-size:14px; letter-spacing:.05em; color:var(--lpd-variant); } body .ac-adm-dl { margin-bottom:40px; } body .ac-adm .ac-card-meta { margin-top:8px; } body .ac-adm-steps { margin-bottom:24px; } body .ac-adm-steps .ac-step { padding:24px; } body .ac-adm-houjin { margin:0 0 40px; } body .ac-faq--dark { border-top:1px solid var(--lpd-line-50); margin-bottom:8px; } body .ac-faq--dark details { border-bottom:1px solid var(--lpd-line-50); } body .ac-faq--dark summary { color:var(--lpd-on); font-weight:500; } body .ac-faq--dark summary::after { color:var(--lpd-gold-text); } body .ac-faq--dark p { color:var(--lpd-variant); } body .ac-adm .ac-btns { justify-content:center; margin-top:32px; } body .ac-cta .ac-h2 { margin-bottom:40px; } /* 主ナビ 7 本（2026-09-03）: 英語などの長い名札で 1280px を超えた（実測 en で +33px）。字を一段小さく詰め、 1200px 未満は学校の面と同じ目次（ハンバーガー）に切り替える */ body .ac-nav { gap:20px; } body .ac-nav a, body .ac-drop > summary { font-size:14px; white-space:nowrap; } body .ac-head-in { gap:24px; } body .ac-head-top-in a { font-size:14px; white-space:nowrap; } /* 2026-10-16（W19 第 3 単位）: 上段の釦が「料金・受講案内」になり、PC 1280 で「ライトモード」の釦が二行に折れた。釦も一行に保つ */ body .ac-head-top-in button { white-space:nowrap; } /* 2026-10-16（W19 第 3 単位）: 上段の釦が「料金・受講案内」に伸び、1200px で釦が右へ 58px はみ出した（実測）。目次に畳む境を 1279px へ */ @media (max-width: 1279px) { /* 2026-09-05（LP 分析 §12-2）: 頭部の上段ごと消すと入学案内の釦（.ac-head-cta）も消えていた。 目次に畳むのはナビと言語・ログインの列だけにし、釦は残す */ body .ac-head-top-in > :not(.ac-head-cta) { display:none; } /* 2026-10-25 v4 B: 頭の 4 項目（.ac-nav4）はここで隠さない（1024px 以上で常に出す・末尾の節） */ body .ac-menu { display:block; } } /* ラテン文字の名札は長い（実測 1280px: en +41px・de +122px）。日本語・中国語は一段のまま、 それ以外の言語は 1400px 未満で目次に切り替える（html[lang] は app.js が言語ごとに付ける） */ @media (max-width: 1399px) { /* 同上（2026-09-05）: en ほか 5 言語は PC 1280 でも畳む。釦は残す（実測: en/de で .ac-head-cta の幅 0） */ html:not([lang="ja"]):not([lang="zh"]) body .ac-head-top-in > :not(.ac-head-cta) { display:none; } /* 2026-10-25 v4 B: .ac-nav4 は隠さない */ html:not([lang="ja"]):not([lang="zh"]) body .ac-menu { display:block; } } /* ログイン中（html.is-member）は上段に身分・マイページ・ログアウトが加わる。PC 1280 で上段が右へ 232px（学びの画面）・82px（学校の面） はみ出した（2026-10-16 実測・上段の釦「料金・受講案内」の後）。日本語・中国語も、ログイン中は 1600px 未満で目次に畳む（1440px では学びの画面で 72px はみ出した・実測） */ @media (max-width: 1599px) { html.is-member body .ac-head-top-in > :not(.ac-head-cta) { display:none; } /* 2026-10-25 v4 B: .ac-nav4 は隠さない */ html.is-member body .ac-menu { display:block; } } /* 頭部だけは 1440px まで広げる（7 本の名札＋言語・ログイン・入学案内が 1216px に入らない言語がある。実測 de 1370px） */ body .ac-head-bar { padding:0 max(var(--lpd-gutter), calc((100% - 1440px) / 2 + var(--lpd-gutter))); } /* TRUST の末尾: 完成した学校ではない、の一文と更新履歴（裁定 2026-09-03） */ body .ac-trust-open { margin-top:24px; color:var(--lpd-on); } body .ac-trust-log { margin-top:12px; color:var(--lpd-variant); } body .ac-trust-log .ac-label { display:inline; margin:0 10px 0 0; } /* ── 4. 教本ビューア（/kamoku/:code/textbook）。本は紙のまま（教本 CSS が自前の明るい変数を持つ）。周りの器だけ暗い面に合わせる ── */ /* ⚠ 本の中の h2 は academic.css の `.yo h2 { color: var(--gold-deep) }` を継いでいた。gold-deep が明るい金になったので紙の上で読めなくなる （実測 1.52）。本の中は旧来の深い金（#775A19・紙の上で 6.11）に固定する */ body .yo .tb h2, body .tb h2 { color: #775a19; } /* 教本の本文は両面とも紙。紙の上の金は深い方（トークンにしない） */ /* ⚠ 教本の --ink-faint（#8e8981）は紙の上で 3.1 と AA 未満（11〜12px の注記・図版キャプション）。一段濃くする（#6f6a62・4.6） */ body .tb { --ink-faint:#6f6a62; } body .tbnav .tbnav-head, body .tbnav .tbnav-pos { color:var(--lpd-faint); } body .tbnav a { color:var(--lpd-variant); } body .tbnav a:hover { color:var(--lpd-on); } body .tbnav a.now { color:var(--lpd-gold-text); border-left-color:var(--lpd-gold); } body .tbprog { background:rgba(255, 255, 255, .08); } body .tbprog i { background:var(--lpd-gold); } body .tbnav-btn { background:var(--lpd-fill); color:var(--lpd-on-fill); box-shadow:0 2px 10px rgba(0, 0, 0, .4); } /* 学びの画面（#/courses）の入口の札: 明るい面用の白い覆いが情景に掛かり、薄い文字が薄い絵に載っていた → 暗い覆いに */ body .entry.has-scene { background:linear-gradient(90deg, rgba(29, 32, 34, .96) 42%, rgba(29, 32, 34, .55) 100%), var(--entry-img) center/cover no-repeat; } /* 入口 TRUST の 3 札と ADMISSION の「ひらく範囲」（2026-09-03 下段の書き直し） */ body .ac-trust-proof { margin:0 0 40px; } body .ac-trust-proof .ac-h4 { margin:0 0 10px; font-size:20px; } body .ac-adm-paid { margin:0 0 32px; } /* WHY NOW の結び（投資の前に、歴史でお金を） */ body .ac-why-close { margin:32px auto 0; text-align:center; max-width:720px; } /* ── 12 軸の自己監査（2026-09-03）で直した点 ──────────────────────────── 見出しの孤立改行（SP の h1 が「くる。」だけ 3 行目に）→ balance。学び方は札 4 枚（INSIDE と重複）→ 一列の段取り。 SP のタップ対象（ac-inside-link 19px）→ 8px の余白で 35px に。出典の small は 12px 以上 */ body .ac-hero h1, body .ac-h1, body .ac-h2 { text-wrap:balance; } body .ac-one-a { display:block; margin-top:6px; font-size:14px; line-height:1.6; color:var(--lpd-variant); font-family:var(--lpd-sans); } body .ac-howline { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; } body .ac-howline li a { display:block; padding:18px 4px 8px; border-top:2px solid var(--lpd-gold); color:inherit; text-decoration:none; } body .ac-howline li a:hover span { color:var(--lpd-gold-hover); } body .ac-howline b { display:block; font-family:var(--lpd-serif); font-weight:400; font-size:24px; line-height:1.3; margin-bottom:6px; } body .ac-howline span { display:block; font-size:15px; line-height:1.6; color:var(--lpd-variant); } body .ac-adm-flow { margin:0 0 28px; } body .ac-inside-card small { font-size:14px; } @media (max-width: 767px) { body .ac-howline { grid-template-columns:1fr 1fr; gap:8px 16px; } body .ac-inside-link, body .ac-note-link, body .ac-drill .ac-inside-link { display:inline-block; padding:8px 0; } } /* SP: h1 は balance が効かない環境（text-wrap 未対応）でも 2 行に収める。脚部の連絡先リンクのタップ寸法 */ @media (max-width: 767px) { body .ac-foot li a { display:inline-block; padding:6px 0; } } /* SP の h1: 「見えてくる。」を割らない（「くる。」だけの孤立行を防ぐ） */ body .ac-nb { white-space:nowrap; } /* 史料室（/shiryo）— 証拠台帳の表と資料頁。2026-09-03 */ body .ac-ledger-wrap { overflow-x:auto; margin:24px 0; } body .ac-ledger { width:100%; min-width:560px; border-collapse:collapse; font-size:14px; line-height:1.7; } body .ac-ledger th:nth-child(1), body .ac-ledger td:nth-child(1) { min-width:14ch; } body .ac-ledger th:nth-child(2), body .ac-ledger td:nth-child(2) { min-width:22ch; } body .ac-ledger td:nth-child(3) { white-space:nowrap; } body .ac-ledger td:nth-child(4) { min-width:8ch; } body .ac-ledger-sub { display:block; font-size:14px; color:var(--lpd-outline); margin-top:2px; } body .ac-ledger th, body .ac-ledger td { text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-top:1px solid var(--lpd-outline-variant); } body .ac-ledger th { font-size:14px; letter-spacing:.12em; color:var(--lpd-outline); font-weight:500; } body .ac-ledger a { color: var(--lpd-gold-text); text-decoration:none; border-bottom:1px solid transparent; } body .ac-ledger a:hover { border-bottom-color:currentColor; } body .ac-src-note { color:var(--lpd-variant); max-width:72ch; font-size:16px; line-height:1.9; } body .ac-src-dl { display:grid; grid-template-columns:max-content 1fr; gap:8px 24px; margin:24px 0; font-size:14px; line-height:1.8; } body .ac-src-dl dt { font-size:14px; letter-spacing:.12em; color:var(--lpd-outline); padding-top:3px; } body .ac-src-dl dd { margin:0; overflow-wrap:anywhere; } body .ac-src-hash { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; color:var(--lpd-variant); } body .ac-src-link { color: var(--lpd-gold-text); text-decoration:none; border-bottom:1px solid transparent; } body .ac-src-link:hover { border-bottom-color:currentColor; } body .ac-src-claims { padding-left:1.4em; max-width:72ch; line-height:1.9; } body .ac-src-claims li { margin:0 0 8px; } @media (max-width: 640px) { body .ac-src-dl { grid-template-columns:1fr; gap:2px 0; } body .ac-src-dl dd { margin-bottom:10px; } } /* 最終裁定（2026-09-03）: 航路の図は 1 段 3 枚（教本より強くしない）・大学名は小さな出典行 */ body .ac-inside-fig--kouro { aspect-ratio:auto; } body .ac-inside-fig--kouro > img { height:auto; } body .ac-num-src { margin:20px 0 0; padding-top:14px; border-top:1px solid var(--lpd-outline-variant); font-size:14px; line-height:1.7; color:var(--lpd-outline); } body .ac-num-src a { color:var(--lpd-variant); text-decoration:none; } body .ac-num-src a:hover { color:var(--lpd-gold-hover); text-decoration:underline; } body .ac-num-src span { font-size:14px; } body .ac-free-t b { font-family:var(--lpd-serif); font-weight:400; font-size:20px; line-height:1.4; } @media (max-width: 767px) { body .ac-num-src a { display:inline-block; padding:6px 0; } } /* 大学名の出典行は一行に並べる（lp.css の縦並びを上書き） */ body .ac-num-src a { display:inline; padding:0; } @media (max-width: 767px) { body .ac-num-src a { display:inline-block; padding:6px 0; } } /* 大学名の出典行: 縦並び（lp.css の block／grid）を確実に一行へ。詳細度を上げて後勝ち */ body .ac-num .ac-num-src { display:block; } body .ac-num .ac-num-src a { display:inline; padding:0; } @media (max-width: 767px) { body .ac-num .ac-num-src a { display:inline-block; padding:6px 0; } } /* 主ナビ＝四段の束ね（2026-09-04）。いま居る頁を含む束ねは金 */ body .ac-nav .ac-drop[data-cur] > summary { color: var(--lpd-gold-text); } body .ac-nav .ac-drop-panel a[aria-current] { color: var(--lpd-gold-text); } /* ── 明るい面だけ（html:not([data-theme="dark"])）: 紺の節（.ac-sec--navy＝入口の INSIDE・TRUST・ADMISSION）と暗い情景の上の文字。 紺の節は academic.css の意匠（白い字）。09-03 に足した部品はトークンで色を決めるので、節の中でトークンを白系に差し替える。 白い札（.ac-trust-who・.ac-card）の中だけ墨に戻す。実測の門: THEME 無し（白地）と THEME=dark の contrast_scan 両方 */ /* 暗い情景の上（入口の第一画面） */ /* 実測: 白い札の中の h4「主宰者について」が白のままだった */ /* ── 白地（html[data-theme="light"]）: 設計は暗い面と同じ。変わるのは色のトークンだけ（2026-09-04 オーナー「デザインが同じでライトモードにできるように」）。 上の無条件の値が暗い面（既定）。ここは同じ名前の変数を明るい値で上書きする。⚠ 新しい直書きの色は増やさない（増やすならトークンに） */ /* 2026-10-25 オーナー決定（最終版 3 章・デザイン「アイボリーを地に、金と藍は差し色だけ」）: 明るい面が既定になった（index.html・acshell.js の頭の script・app.js の setFace）。 地（surface・paper）をアイボリー #FBF6EA（lp.css の --lp-ink-hi #fbf6ea と同じ値）に。旧 #F8F6F1。幕（scrim）・すりガラス（surface-80）も同じ地の rgb(251, 246, 234) に。 暗い面は利用者の切替（月の絵の釦）で選べるまま残す（暗い値は上の無条件の html {}・:root） */ html[data-theme="light"] { --lpd-surface: #FBF6EA; --lpd-low: #F1EEE6; --lpd-container: #FFFFFF; --lpd-high: #ECE8DF; --lpd-highest: #E3DED3; --lpd-lowest: #FFFFFF; --lpd-bright: #FFFFFF; --lpd-on: #191C1D; --lpd-variant: #44464E; --lpd-faint: #6B665E; --lpd-outline: #6B665E; --lpd-outline-variant: #D8D3C7; --lpd-primary: #0A1F44; --lpd-primary-strong: #00081E; --lpd-gold: #C5A059; --lpd-gold-text: #775A19; --lpd-on-gold: #1D1A16; --lpd-gold-hover: #775A19; --lpd-gold-60: #775A19; --lpd-gold-40: rgba(197, 160, 89, .6); /* 2026-10-26 オーナー 10/25 23:40「金で塗ったボタンは藍・アイボリー地の金の文字は濃い金 #775A19 だけ」: 塗りの釦は藍 #0A1F44 に地の色の字。 字に使う金（--lpd-gold-hover・--lpd-gold-60）は #775A19 に（旧 #D4B46B・#8A6D3B）。--lpd-gold（#C5A059）は線・棒・点など字の無い差し色だけに残る */ --lpd-fill: #0A1F44; --lpd-fill-hover: #00081E; --lpd-on-fill: #FBF6EA; --lpd-gold-dim: #F3E7C3; --lpd-gold-dim2: #EAD9A6; --lpd-error: #B3261E; --lpd-line-10: rgba(216, 211, 199, .35); --lpd-line-30: rgba(216, 211, 199, .7); --lpd-line-40: rgba(216, 211, 199, .8); --lpd-line-50: rgba(216, 211, 199, .9); --lpd-line-60: #D8D3C7; --lpd-line-hi: rgba(0, 0, 0, .08); --lpd-container-92: rgba(255, 255, 255, .92); --lpd-high-80: rgba(236, 232, 223, .85); --lpd-surface-80: rgba(251, 246, 234, .88); --lpd-scrim-96: rgba(251, 246, 234, .96); --lpd-scrim-94: rgba(251, 246, 234, .94); --lpd-scrim-74: rgba(251, 246, 234, .8); --lpd-scrim-62: rgba(251, 246, 234, .66); --lpd-scrim-60: rgba(251, 246, 234, .7); --lpd-scrim-30: rgba(251, 246, 234, .35); /* 学びの画面（style.css）の変数 */ --paper: #FBF6EA; --paper-hi: #FFFFFF; --paper-lo: #F1EEE6; --ink: #191C1D; --ink-mid: #44464E; --ink-faint: #6B665E; --navy: #0A1F44; --navy-deep: #00081E; --shu: #0A1F44; --gold: #C5A059; --gold-bright: #775A19; --rule: #D8D3C7; --rule-strong: #C3BEB1; } html[data-theme="light"] .ac { --navy: #0A1F44; --navy-deep: #00081E; --navy-soft: #E7EBF5; --navy-mist: #F0F3FA; /* ⚠ 学校の面の --gold は基底（academic.css）で字にも使われる（.ac-label・現在地・脚部の h4）。白地では字に使える深い金。地に使う金は --lpd-gold */ --gold: #775A19; --gold-deep: #775A19; --gold-pale: #F3E7C3; /* 2026-10-26: 字の金は #775A19 だけ（旧 --gold #7F6436） */ --paper: #FBF6EA; --paper-white: #FFFFFF; --parchment: #F1EEE6; --ink: #191C1D; --ink-mid: #44464E; --ink-faint: #6B665E; --rule: #D8D3C7; --rule-strong: #C3BEB1; --ink-black: #11100D; --shadow-float: 0 8px 40px rgba(0, 0, 0, .12); background: var(--lpd-surface); color: var(--lpd-on); } /* 基底（academic.css）が「紺の地に白い字」を決め打ちしている部品。暗い面では地が暗いので通るが、白地では白い字が消える。 設計は同じ（低い地の節）なので、白地では字をトークンに戻す */ html[data-theme="light"] .ac-sec--navy, html[data-theme="light"] .ac-cta, html[data-theme="light"] #gain { color: var(--lpd-on); } html[data-theme="light"] .ac-sec--navy .ac-lede, html[data-theme="light"] .ac-sec--navy .ac-h2-sub, html[data-theme="light"] .ac-cta .ac-lede, html[data-theme="light"] #gain .ac-lede { color: var(--lpd-variant); } html[data-theme="light"] .ac-sec--navy .ac-h2, html[data-theme="light"] .ac-cta .ac-h2, html[data-theme="light"] #gain .ac-h2, html[data-theme="light"] .ac-sec--navy .ac-h3, html[data-theme="light"] .ac-sec--navy .ac-h4 { color: var(--lpd-on); } html[data-theme="light"] .ac-sec--navy .ac-btn--outline, html[data-theme="light"] .ac-cta .ac-btn--outline { color: var(--lpd-on); border-color: var(--lpd-outline); } html[data-theme="light"] .ac-sec--navy .ac-stat-n { color: var(--lpd-on); } html[data-theme="light"] .ac-foot, html[data-theme="light"] .ac-foot a { color: var(--lpd-variant); } html[data-theme="light"] .ac-foot a:hover { color: var(--lpd-on); } html[data-theme="light"] .ac-foot-brand p { color: var(--lpd-on); } html[data-theme="light"] .ac-foot-brand p.ac-foot-sub { color: var(--lpd-faint); } html[data-theme="light"] .ac-foot-bottom { border-top-color: var(--lpd-line-50); color: var(--lpd-faint); } /* ── 名前のある問い（2026-09-05）── */ body a.ac-story { display:block; color:inherit; text-decoration:none; } body a.ac-story:hover { filter:brightness(1.08); } body .ac-story .ac-card-in { display:block; } body .ac-story .ac-card-meta { display:block; } body .ac-story .ac-h3 { display:block; font-size:20px; line-height:1.5; margin:8px 0 10px; } body .ac-story .ac-card-desc { display:block; } body .ac-story-go { display:block; margin-top:14px; font-size:14px; color:var(--lpd-gold-text); } body .ac-gain-modern { margin-top:20px; font-size:16px; line-height:1.8; } body .ac-story-grid { margin-top:8px; } body a.ac-story { overflow:hidden; } body .ac-story-img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--lpd-r-card) var(--lpd-r-card) 0 0; } body .ac-story .ac-h3 { font-size:20px; } /* ── 到達の札の絵・学問の年表（2026-09-05 オーナー「文字だらけ」）── */ body .ac-card > .ac-card-img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--lpd-r-card) var(--lpd-r-card) 0 0; } body .ac-num-tl { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:14px; position:relative; } body .ac-num-tl li { position:relative; padding-left:26px; font-size:15px; line-height:1.6; } body .ac-num-tl li::before { content:''; position:absolute; left:6px; top:9px; width:10px; height:10px; border-radius:50%; background:var(--lpd-gold-text); } body .ac-num-tl li b { display:block; font-family:var(--lpd-serif); font-size:20px; color:var(--lpd-gold-text); letter-spacing:.04em; } @media (min-width: 900px) { body .ac-num-tl { grid-template-columns:repeat(5, 1fr); gap:18px; padding-top:22px; } body .ac-num-tl::before { content:''; position:absolute; left:0; right:0; top:10px; height:1px; background:var(--lpd-line-30); } body .ac-num-tl li { padding-left:0; padding-top:10px; } body .ac-num-tl li::before { left:0; top:-5px; } } /* 2026-09-05（LP 分析 §12-7）: 航路の一覧の写し（文字入り）が SP で上部だけに切り抜かれ 27% に縮んでいた。SP では全体を見せる */ @media (max-width: 767px) { body .ac-inside-fig--kouro { height:auto; aspect-ratio:auto; } body .ac-inside-fig--kouro > img { height:auto; object-fit:contain; } } /* ============================================================================= 2026-09-06 LP のセールス分析（§1〜§10）の実装で足した面 ========================================================================== */ /* HERO の副題（できることの三文）: 読む本文と同じ 18px・幅は 34em まで */ body .ac-hero .ac-fv-sub { font-size:18px; line-height:1.8; max-width:34em; } /* 利用状況の知らせ（確認中・確認できなかった）。⚠ 説明の文字は 14px を下回らない（読者は 60 代が多い） */ body .ac-hero .ac-fv-state { font-size:16px; line-height:1.7; max-width:34em; margin:0 0 14px; color:var(--lpd-on); } /* 2026-09-08 監査 A-018: --lpd-on-surface は未定義で、この宣言は捨てられ親の色を継承していた。継承していた色は --lpd-on と完全一致（実測 暗い面 #e0e3e5 / 白地 #191C1D、対比 14.38:1 / 15.87:1）なので、見た目を変えずに定義済みの token へ直す */ body .ac-hero .ac-fv-state b { color:var(--lpd-variant); } /* TRUST の札 2 = 実物の写真（所蔵先つき・ONE COIN と同じ扱い）*/ body .ac-trust-coin { display:flex; flex-direction:column; } body .ac-trust-coin-fig { display:block; padding:28px 28px 0; text-align:center; color:inherit; text-decoration:none; } body .ac-trust-coin-fig img { display:block; width:100%; max-width:260px; margin:0 auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); } body .ac-trust-coin-fig b { display:block; margin-top:14px; font-size:16px; } body .ac-trust-coin-fig small { display:block; margin-top:4px; color:var(--lpd-variant); } body .ac-trust-open { margin-top:0; } body .ac-trust-grid .ac-num-src { margin:8px 0 16px; } /* ADMISSION: 値札の下に教本の表紙（実物） */ body .ac-adm-cover { display:block; width:100%; max-width:200px; margin:24px auto 0; border-radius:6px; box-shadow:0 20px 25px -5px rgba(0, 0, 0, .5); } @media (min-width: 1024px) { body .ac-adm-side .ac-adm-cover { margin-left:0; } } /* INSIDE 04 = 事件簿の情景（他の札と同じ切り抜き） */ body .ac-inside-fig--case > img { object-position:center; } /* /kouro: 編の名（通貨名系）を国名の下に */ body .ac-course-brand { display:block; margin-top:6px; color:var(--lpd-variant); } /* 読者の声の窓（#/enroll・在籍者だけ） */ body .voice { margin-top:28px; padding-top:20px; border-top:1px solid var(--lpd-outline, rgba(255,255,255,.12)); } body .voice textarea { width:100%; min-height:4.4em; padding:12px; font:inherit; font-size:16px; line-height:1.7; border-radius:8px; } /* SP（§5・文字の壁）: STORIES と GAIN の札を「絵を左・題と一文を右」の横組みに。一枚 200px 前後 ⚠ 2026-10-25 オーナー決定（最終版 3 章・デザイン「スマホのカードは画像を小さなサムネイルにして、問いの文字を主役に」）: 旧: 絵が幅の 38%・高さ 180px 以上（文字より絵が大きい）。新: 絵は右上の 88px 角のサムネイル（主宰の写真 .ac-trust-founder img と同じ 88px）、 問い（題）を左の全幅で先に読む。題の字は 17px → 20px（PC の題と同じ大きさ） */ @media (max-width: 767px) { body a.ac-story, body #gain .ac-card { display:grid; grid-template-columns:minmax(0, 1fr) 88px; align-items:start; gap:0 14px; padding:16px; } body a.ac-story > .ac-story-img, body #gain .ac-card > .ac-card-img { grid-column:2; grid-row:1; width:88px; height:88px; min-height:0; aspect-ratio:1 / 1; object-fit:cover; border-radius:8px; } body a.ac-story > .ac-card-in, body #gain .ac-card > .ac-card-in { grid-column:1; grid-row:1; padding:0; } body .ac-story .ac-h3, body #gain .ac-card .ac-h3 { font-size:20px; line-height:1.5; margin:4px 0 6px; } } /* TRUST: 主宰者の札に写真を（右下の塊は札へ統合）・大学の link は一行に・実物の出典は 14px 以上 */ body .ac-trust-founder img { width:88px; height:88px; border-radius:50%; object-fit:cover; margin-bottom:16px; } body .ac-trust-grid { grid-template-columns:1fr; } body .ac-trust-grid .ac-num-src { display:block; } body .ac-trust-grid .ac-num-src a { display:inline; } body .ac-trust-grid .ac-num-src span { display:block; margin-top:6px; } body .ac-trust-coin-fig small { font-size:14px; } @media (min-width: 900px) { body .ac-trust-grid { grid-template-columns:1fr; } } /* 右下の塊を札へ統合したので一列 */ /* 橋（一枚→現在・2026-09-06）: HOW の四段（.ac-howline）と同じ組み方で七段。SP は 2 列 */ body .ac-bridge { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7, 1fr); gap:12px; } body .ac-bridge li a { display:block; padding:16px 4px 8px; border-top:2px solid var(--lpd-gold); color:inherit; text-decoration:none; } body .ac-bridge li a:hover span { color:var(--lpd-gold-hover); } body .ac-bridge b { display:block; font-family:var(--lpd-serif); font-weight:400; font-size:22px; line-height:1.3; color:var(--lpd-gold-text); } /* 2026-10-26 要件定義書 v2 5 章: 明るい金 #C5A059 は線と飾りだけ。字の金は --lpd-gold-text（明るい面 #775A19・暗い面は従来と同じ #e9c349） */ body .ac-bridge span { display:block; margin-top:6px; font-size:16px; line-height:1.5; color:var(--lpd-on); } @media (max-width: 1023px) { body .ac-bridge { grid-template-columns:1fr 1fr; gap:8px 16px; } } /* 読む順（/gakubu#paths・2026-09-06） */ body .ac-paths { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; } body .ac-paths > li { padding:16px 0 8px; border-top:2px solid var(--lpd-gold); } /* 直下の 4 枠だけに罫（入れ子の科目の行には引かない） */ body .ac-paths ol li { padding:0; border:0; } body .ac-paths b { display:block; font-family:var(--lpd-serif); font-weight:400; font-size:22px; line-height:1.3; } body .ac-paths ol { margin:8px 0 0; padding-left:1.4em; font-size:16px; line-height:1.7; } body .ac-paths ol a { color:inherit; } @media (max-width: 1023px) { body .ac-paths { grid-template-columns:1fr; } } /* FREE の見開き（教本 E1 の実頁・2026-09-06）: 1 頁 = 撮った CSS 幅 420px（文字が実寸で読める）。 ⚠ 2026-09-06 実測（オーナー指摘「デザインサイズバグ」）: 1023px 以下を一律「92% 幅」にしていたため、768〜1023px（タブレット・狭い PC 窓）で 1 頁が 720〜842px（文字 2 倍・高さ 1,600px）に膨らんでいた。頁の幅は常に 420px を上限にし、2 頁が並ぶ幅（900px〜）だけ見開きにする */ body .ac-spread { max-width: 856px; margin: 0 auto 40px; text-align: center; } body .ac-spread-h { margin: 0 0 18px; } body .ac-spread-pages { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; text-decoration: none; } body .ac-spread-pages img { flex: 0 0 min(92%, 420px); width: min(92%, 420px); height: auto; display: block; scroll-snap-align: start; border: 1px solid var(--lpd-outline-variant); border-radius: 4px; background: #101415; } body .ac-spread-cap { margin: 16px auto 0; max-width: 640px; } body .ac-spread-swipe { margin: 8px 0 0; font-size: 14px; color: var(--lpd-variant); } body .ac-spread-lede { margin: 0 auto 18px; max-width: 640px; } body .ac-spread-real { margin: 8px 0 0; font-size: 14px; color: var(--lpd-variant); } @media (min-width: 900px) { body .ac-spread-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: visible; padding-bottom: 0; } body .ac-spread-pages img { width: 100%; } body .ac-spread-swipe { display: none; } } /* WHY の余白（SP・裁定 09-06: 文章を先に削り、余白は最後）*/ @media (max-width: 1023px) { body #why .ac-card-in { padding: 24px; } body #why .ac-grid { gap: 16px; } body #why .ac-quote { margin-bottom: 32px; } body #why .ac-why-close { margin-top: 20px; } body #why.ac-sec { padding: 56px 0; } body #why .ac-head { margin-bottom: 40px; } } /* ── 教本の棚（/kyohon）と読む順の四つの道（/gakubu#paths）— 2026-09-06 監査③ 裁定 TASK 6・7。文字は 16px 以上・札は 14px 以上（type-scale の床） ── */ body .ac-first { margin:24px 0 0; padding:20px 22px 22px; border:1px solid var(--lpd-gold); border-radius:12px; } body .ac-first > h2, body .ac-shelf > h2 { font-family:var(--lpd-serif); font-weight:400; font-size:22px; line-height:1.3; margin:0 0 6px; } /* 2026-10-26 要件定義書 v2 5 章: 見出し（h2）は 20〜22px（旧 26px） */ body .ac-first > p, body .ac-shelf > p { margin:0 0 4px; font-size:16px; line-height:1.7; } body .ac-shelf { margin-top:44px; } body .ac-issue { margin:10px 0 0; padding-left:1.6em; font-size:16px; line-height:1.9; columns:2; column-gap:36px; } body .ac-issue a { color:inherit; } body .ac-paths-link { margin-top:32px; font-size:16px; } body .ac-paths p { margin:8px 0 0; font-size:16px; line-height:1.7; } body .ac-paths p > span:first-child { font-family:var(--lpd-sans); font-size:14px; letter-spacing:.1em; color:var(--lpd-gold-text); margin-right:.6em; } body .ac-paths ol li small { font-size:14px; margin-left:.5em; } body .ac-paths ol li small a { color:var(--lpd-gold-text); } @media (max-width:700px) { body .ac-issue { columns:1; } body .ac-first > h2, body .ac-shelf > h2 { font-size:22px; } } /* /gakubu MATERIALS — 数の札に一文の説明（2026-09-06）。16px 以上 */ body .ac-stat .ac-stat-d { margin-top:6px; font-size:16px; line-height:1.6; } /* 推薦枠の代替導線・発行順の折りたたみ（2026-09-06 裁定 3） */ body .ac-first-alt { margin:12px 0 0; font-size:16px; line-height:1.7; } body details.ac-issue-wrap > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; } body details.ac-issue-wrap > summary::-webkit-details-marker { display:none; } body details.ac-issue-wrap > summary > h2 { margin:0; } body details.ac-issue-wrap > summary > span { font-size:16px; } body details.ac-issue-wrap > summary::after { content:'＋'; font-size:20px; color:var(--lpd-gold-text); margin-left:auto; } body details.ac-issue-wrap[open] > summary::after { content:'－'; } /* /gakubu MATERIALS v2 — 停留所は航路の内訳・言語は利用条件（2026-09-06 裁定 2） */ body .ac-stat .ac-stat-sub { margin-top:10px; padding-top:8px; border-top:1px solid var(--lpd-outline-variant); font-size:16px; line-height:1.6; } body .ac-stat-note { margin:20px 0 0; font-size:16px; line-height:1.7; } body .ac-stats--2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--gutter, 16px); } @media (max-width:700px) { body .ac-stats--2 { grid-template-columns:1fr; } } /* 2026-10-22 在籍中は入学の口（上段の釦・目次・案内）を隠す（app.js の headcta.hidden・acshell の [data-enroll]）。釦の display 指定に負けないよう明示 */ body [data-enroll][hidden], body #headcta[hidden] { display:none !important; } /* 2026-10-22 オーナー「ライトモードという文字もナビを圧迫」「言語設定も」: 上段の言語と表示の切替は絵だけ（名は aria-label・title）。 学校の面（.ac-lang）と学びの画面（.lang-ico の上に透明の select）で同じ見た目 */ .ac-ico { display:block; width:18px; height:18px; } .ac-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } body .ac-lang > summary::after { content:none; } /* 押せる広さは 44px 四方（顧客体験レビュー §08「タップ領域は44pxを目安」2026-10-22。絵は 18px のまま、押せる枠だけ広げる） */ body .ac-lang > summary { padding:6px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; } body .theme-btn--icon { display:inline-flex; align-items:center; justify-content:center; padding:6px !important; min-width:44px; min-height:44px; box-sizing:border-box; } body .lang-ico { position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer; color:inherit; } body .lang-ico .lang-sel { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; margin:0; } /* 上段の補助の口（はじめての方へ・辞典）2026-10-22 顧客体験レビュー §03 */ body .ac-head-top-in a.ac-head-aux { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; } /* 2026-10-22 オーナー確認「トップで『はじめての方へ』と『辞典』の間が詰まって見える」: トップは二つを span（#navaux）に包むので、 上段の並び（.ac-head-top-in の gap:16px・229 行）が二つの間に効いていなかった。包みの中にも同じ 16px を置く */ body .ac-head-top-in .nav-aux { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* 在籍中に隠した脚部の口（data-enroll）の行を残さない */ .ac-foot li:has(> a[hidden]) { display: none; } /* ── 明るい入口の面（2026-10-23 オーナー最終版 2）: トップと「はじめての方へ」は明るい地色とゴシック体。 講座の中と図鑑は黒と金と明朝体のまま。地色は data-theme=light（app.js の setFace・acshell の BRIGHT）で、ここは字の系統だけを替える。 校名（頭部・脚部のロゴ）は明朝のまま ── */ html.face-bright .ac, html.face-bright main { --serif: var(--sans); --lpd-serif: var(--lpd-sans); } html.face-bright .ac-brand, html.face-bright .ac-foot-brand { --lpd-serif: 'Playfair Display', 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif; } /* 入口: 目的を 3 つから選ぶ（最初の画面）。押せる物は 44px 以上・字は 16px 以上（説明は 15px 以上の規律より大きめ） */ .ac-ent { background: var(--lpd-surface, var(--paper)); padding-block: 48px 40px; } .ac-ent-brand { margin: 0 0 6px; font-family: var(--lpd-sans); font-size: 15px; letter-spacing: .04em; color: var(--lpd-variant); } .ac-ent-h1 { margin: 0 0 28px; font-family: var(--lpd-sans); font-weight: 700; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.35; color: var(--lpd-on); text-wrap: balance; } .ac-ent-h { margin: 0 0 6px; font-family: var(--lpd-sans); font-weight: 700; font-size: 22px; color: var(--lpd-on); } .ac-ent-lede { margin: 0 0 20px; font-size: 16px; color: var(--lpd-variant); } .ac-ent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; } .ac-ent-card { display: flex; flex-direction: column; min-width: 0; min-height: 44px; text-decoration: none; color: var(--lpd-on); background: var(--lpd-container, var(--paper-white)); border: 1px solid var(--lpd-line-50, var(--rule)); border-radius: 12px; overflow: hidden; } .ac-ent-card:hover, .ac-ent-card:focus-visible { border-color: var(--lpd-gold, var(--gold)); } .ac-ent-fig { display: block; aspect-ratio: 16 / 9; max-width: 100%; background: var(--lpd-high, var(--paper)); } .ac-ent-fig img { width: 100%; height: 100%; object-fit: cover; display: block; } .ac-ent-fig--coin img { object-fit: contain; padding: 12px; box-sizing: border-box; } .ac-ent-in { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; } .ac-ent-t { font-family: var(--lpd-sans); font-size: 20px; font-weight: 700; line-height: 1.4; } .ac-ent-d { font-size: 16px; line-height: 1.6; color: var(--lpd-variant); } .ac-ent-go { margin-top: auto; padding-top: 4px; min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; color: var(--lpd-gold-text, var(--gold-deep)); } .ac-ent-free { margin-top: 40px; } .ac-ent-freeh { margin: 0 0 8px; } .ac-ent-free ul { list-style: none; margin: 0; padding: 0; } .ac-ent-free li { display: flex; align-items: center; min-height: 52px; padding: 4px 0; border-top: 1px solid var(--lpd-outline-variant, var(--rule)); font-size: 16px; line-height: 1.7; color: var(--lpd-variant); } .ac-ent-free li:first-child { border-top: 0; } .ac-ent-free li a { display: flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--lpd-on); text-underline-offset: 3px; } /* 2026-10-23 第 2 段の指示 51: 名乗りの 3 段。1 段目 NOMISMA（いちばん大きく・字の間隔を少し広げる）／2 段目 名乗り（1 段目の 40%・本文と同じ書体）／ 3 段目 「1話ずつ読めて、続けるほど深くなる」（本文より一段小さい灰色・トップと料金の頁だけ）。390px で 3 段とも折り返さない（nowrap・check:prerelease P16 が実測） */ .ac-name { margin: 0 0 24px; } .ac-name-1 { margin: 0; font-family: var(--lpd-serif); font-weight: 600; font-size: 48px; line-height: 1.15; letter-spacing: .14em; color: var(--lpd-on); white-space: nowrap; } /* 2026-10-25（ハム v4）: 2 段目は h1「ニュースのお金の話が、歴史で分かる。」、3 段目はサブ（長い言語では 390px に収まらない）→ 折り返す（横のはみ出しを作らない） */ .ac-name-2 { margin: 6px 0 0; font-family: var(--lpd-sans); font-size: 20px; line-height: 1.5; color: var(--lpd-on); } .ac-name-2 .ac-name-seg { display: inline-block; } /* 2026-10-28 v4 0.10: 読点の後ろでだけ折り返す（app.js の ac-name-seg） */ .ac-name-3 { margin: 4px 0 0; font-family: var(--lpd-sans); font-size: 14px; line-height: 1.5; color: var(--lpd-variant); } @media (min-width: 900px) { .ac-name-1 { font-size: 64px; } .ac-name-2 { font-size: 25.6px; } .ac-name-3 { font-size: 15px; } } /* 2026-10-23 第 2 段の指示 52: 続きから読む（扉より目立つ形・読んだ記録がある人だけ） */ .ac-cont { display: flex; flex-direction: column; gap: 2px; margin: 0 0 24px; padding: 14px 18px; min-height: 44px; border-radius: 8px; text-decoration: none; background: var(--lpd-fill, var(--gold)); color: var(--lpd-on-fill, #241a00); } .ac-cont-k { font-size: 15px; font-weight: 700; } .ac-cont-t { font-size: 18px; line-height: 1.5; } /* 2026-10-24 指示 76: 扉の名前・「◯節のうち◯節」・細い横の進み具合の棒。読みかけが 2 本以上なら残りは畳む */ .ac-cont-m { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; line-height: 1.5; } .ac-cont-door { font-weight: 700; } .ac-cont-bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; } .ac-cont-bar i { display: block; height: 100%; background: currentColor; } .ac-cont-more { margin: -12px 0 24px; } .ac-cont-more summary { display: flex; align-items: center; min-height: 44px; font-size: 16px; cursor: pointer; color: var(--lpd-on); } .ac-cont-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ac-cont-more a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; min-height: 44px; border: 1px solid var(--lpd-outline, currentColor); border-radius: 8px; text-decoration: none; color: var(--lpd-on); } .ac-cont-more b { font-size: 16px; line-height: 1.5; } /* 扉のカード（2026-10-30 オーナー「ちぐはぐでAI感も満載でダサい」→ 下の物語と同じ ac-card に揃えた。扉ごとの色の線・帯の形は外した）。 金の小見出し（ac-card-meta）＝扉の名か講座の数・見出し（ac-h3）＝問いか扉の名・金の行き先（ac-story-go）＝最初に読む 1 話 */ .ac-door-card .ac-h3 { display: block; } .ac-door-card .ac-card-desc { display: block; margin-top: 18px; } .ac-door-card .ac-story-go { margin-top: 4px; font-size: 16px; font-weight: 700; } .ac-door-grid--small { margin-top: 20px; } /* スマホでも講座の数の 3 枚は横に並べる（縦に 3 枚積むと 1 画面を使い切る）。名は 16px（本文 16 以上の決まり）で 1 行（390px で「日本のお金」5 字＝80px が内幅 約 92px に入る） */ @media (max-width: 699px) { .ac-door-grid--small { grid-template-columns: repeat(3, 1fr); gap: 10px; } .ac-door-grid--small .ac-card-in { padding: 14px 10px; } .ac-door-grid--small .ac-h3 { font-size: 16px; white-space: nowrap; } } .ac-door-more { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 28px; margin: 12px 0 0; } .ac-door-more a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--lpd-gold-text, var(--gold-deep)); text-decoration: none; } .ac-door-more a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Cookie の同意の欄（2026-10-23・public/consent.js）。外国語版だけに出る。画面の下に固定・押せる物 44px 以上・字 15px 以上 */ .nm-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--lpd-container, #1d2022); color: var(--lpd-on, #e0e3e5); border-top: 2px solid var(--lpd-gold, #e9c349); box-shadow: 0 -8px 32px rgba(0, 0, 0, .35); padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); } .nm-consent-in { max-width: 960px; margin: 0 auto; } .nm-consent-t { margin: 0 0 4px; font-family: var(--lpd-sans, sans-serif); font-weight: 700; font-size: 17px; } .nm-consent-b { margin: 0 0 12px; font-size: 16px; line-height: 1.6; } .nm-consent-act { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0; } .nm-consent-act button { min-height: 44px; padding: 0 20px; font: inherit; font-size: 16px; font-weight: 700; border-radius: 6px; cursor: pointer; border: 1px solid var(--lpd-fill, #e9c349); } .nm-consent-yes { background: var(--lpd-fill, #e9c349); color: var(--lpd-on-fill, #241a00); } .nm-consent-no { background: transparent; color: var(--lpd-on, #e0e3e5); } .nm-consent-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--lpd-on, #e0e3e5); } /* ── 押せる高さ 44px（2026-10-23 オーナー指示「44px 未満の古いリンクも全部 44px 以上に」）── 測り方: browser-qa/tap_sweep.js（390・1280 の 40 頁で、44px 未満の押せる物を部品ごとに数える）。 ⚠ 文の中のリンク（教本の本文の用語・出典の参照など、文字の行の中にあるもの）は対象外（行の高さで押す。WCAG 2.5.8 の inline の例外）。 ⚠ 見た目の大きさ（字・札の枠）は変えず、押せる範囲（高さ）だけを広げる。行の並びが崩れないよう inline-flex で中央に寄せる */ html body .ac-foot-grid a, html body .ac-foot-note a, html body .cs-facet-body a, html body .cs-facet-row a, html body .yo-tags a, html body .cs-chips a, html body a.cs-srcchip, html body .tb-further-list a, html body .ac-matrix a, html body a.yo-back, html body a.is-on, html body .yo-sub a, html body a.ac-small, html body a.ac-note-link, html body a.ac-inside-link, html body a.gl-more, html body a.ac-src-link, html body .ac-crumb a, html body .yo-crumb a, html body a.watch-link, html body a.more, html body .summary-list a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; } html body a.ac-brand, html body a.chip, html body button.small, html body button.ghost, html body button.tbnav-btn { min-height: 44px; box-sizing: border-box; } html body a.ac-brand { display: inline-flex; align-items: center; } html body .wrap input, html body input.gl-q { min-height: 44px; box-sizing: border-box; } /* 頭部（PC）の項目と、本の段・教本の頁送り（2026-10-23・同上。1280 の実測で 40px 前後だった） */ html body .ac-drop > summary, html body .ac-head-top .ac-head-cta, html body .ac-head-top-in a.ac-head-cta, html body .nav-util a, html body .tbnav a, html body .ac-shelf > summary { min-height: 44px; box-sizing: border-box; } html body .nav-util a { display: inline-flex; align-items: center; } /* 白地の金の字（2026-10-23・トップを白地にして check:contrast で測った）: 番号「01〜07」（--lpd-gold・比 2.28）と札の小見出し（--lpd-gold-60・比 4.18）は 白地では 4.5 に届かない → 白地のときだけ字用の金（--lpd-gold-text #775A19）にする。暗い面は従来どおり */ html[data-theme="light"] body .ac-bridge b, html[data-theme="light"] body .ac-card-meta { color: var(--lpd-gold-text); } /* ── 2026-10-25 オーナー決定（最終版 3 章・デザイン）単位 B ────────────────────────────── 1) 頭: PC の幅（1024px 以上＝この一枚の lg の境・--lpd-gutter 32px と同じ境）で「講座・図鑑・料金・無料で読む」（.ac-nav4）を常に出す。 SP・タブレット（1023px まで）は従来どおりハンバーガー＋料金の釦。ハンバーガー（3 テーマの束ね・はじめての方へ・言語・表示の切替）は全幅で出す （旧: 1280px 以上の日本語では隠れていた。束ねを頭から外したので、PC でも開けるように）。 PC では上段の料金の釦（.ac-head-cta）を隠す（4 項目の「料金」と同じ行き先・同じ名が頭に二つ並ぶため）。 2) SP（767px まで＝この一枚の SP の境）のカード: 画像を 88px 角のサムネイル（主宰の写真と同じ 88px）にし、問いの文字を主役に。 入口の物語・六つの問いは上の「SP（§5・文字の壁）」の節を書き換えた。ここは「はじめての方へ」の入口のカード（.ac-ent-card） 3) 講師のタイムライン（/kyoin/hayama・server/lib/founderstory.js）: 縦の線と点。最後の「現在は登録なし」の行（.ac-tl-now）だけ藍に ─────────────────────────────────────────────────────────────────────────────── */ body .ac-nav.ac-nav4 { display:none; } body details.ac-menu { display:block; } @media (min-width: 1024px) { body .ac-head-in .ac-nav.ac-nav4 { display:flex; gap:32px; /* 旧 .ac-nav の gap（234 行）と同じ */ align-items:center; margin-left:auto; } body .ac-head-top-in .ac-head-cta { display:none; } } body .ac-nav4 a.ac-nav4-a { display:inline-flex; align-items:center; min-height:44px; padding:0; font-family:var(--lpd-sans); font-size:16px; font-weight:500; line-height:1.4; color:var(--lpd-on); white-space:nowrap; text-decoration:none; } body .ac-nav4 a.ac-nav4-a:hover { color:var(--lpd-gold-text); } body .ac-nav4 a.ac-nav4-a[aria-current] { color:var(--lpd-gold-text); } body .ac-nav4 a.ac-nav4-a[hidden] { display:none; } @media (max-width: 767px) { .ac-ent-card { display:grid; grid-template-columns:minmax(0, 1fr) 88px; align-items:start; } .ac-ent-card > .ac-ent-fig { grid-column:2; grid-row:1; width:88px; height:88px; aspect-ratio:1 / 1; margin:16px 16px 0 0; border-radius:8px; overflow:hidden; } .ac-ent-card > .ac-ent-in { grid-column:1; grid-row:1; } .ac-ent-fig--coin img { padding:4px; } } body .ac-tl { list-style:none; margin:32px 0 0; padding:0; position:relative; max-width:672px; } body .ac-tl::before { content:''; position:absolute; left:7px; /* 点 16px の中心 ＝ (16 − 線 2) ÷ 2 */ top:8px; bottom:8px; width:2px; background:var(--lpd-outline-variant); } body .ac-tl-i { position:relative; padding:0 0 24px 36px; } body .ac-tl-i:last-child { padding-bottom:0; } body .ac-tl-i::before { content:''; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:var(--lpd-gold-text); box-sizing:border-box; } body .ac-tl-when { display:block; font-size:15px; line-height:1.5; color:var(--lpd-variant); } body .ac-tl-reg { display:block; font-size:18px; font-weight:700; line-height:1.5; color:var(--lpd-on); } body .ac-tl-co { display:block; font-size:16px; line-height:1.6; color:var(--lpd-variant); } body .ac-tl-i.ac-tl-now::before { background:var(--lpd-primary); } body .ac-tl-i.ac-tl-now .ac-tl-reg { color:var(--lpd-primary); } /* 問いかけの見出し（2026-10-25 最終版 3 章・デザイン「見出しの一部を問いかけ型にして、明朝の格調を和らげる」）: 問いの文の見出しは明朝でなくゴシック。 トップ・はじめての方へは face-bright で見出しが全部ゴシック（2026-10-23）なので、ここはそれ以外の頁の問いの見出し（/kyoin/hayama の STORY） */ body .ac-h2.ac-h2--q { font-family:var(--lpd-sans); font-weight:700; letter-spacing:0; } /* ── 2026-10-26 公開前の直し（単位 B・オーナー 10/25 23:40「金で塗ったボタンは藍。アイボリー地の金の文字は濃い金 #775A19 だけ」）── 塗りの釦・札は --lpd-fill（明るい面 #0A1F44／字 #FBF6EA・暗い面は従来の金）。学校の面（academic.css）が --gold で塗っている釦も明るい面だけ藍に。 学びの画面（style.css）の釦は style.css の末尾（style.css は入口の画面だけが読む） */ html[data-theme="light"] .ac .vz-readlink { background: #0A1F44; color: #FBF6EA; } /* ── 2026-10-26 公開前の直し（単位 B・オーナー 10/25 23:40「動きを減らす設定に対応する」）── 動きを減らす設定（prefers-reduced-motion: reduce）の人には、CSS の transition・animation・なめらかなスクロールを止める。 旧は学びの画面の style.css にだけあり、学校の面（acshell の頁・教本・事件の頁）には無かった。この一枚は全頁が読む。 JS の動き（なめらかなスクロール・次の話への自動の再生）は public/app.js の scrollBehavior()・server/lib/visual.js・server/routes/pages.js（人物の動画）で止める */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } /* 料金の頁などの名乗りの 3 段目（2026-10-30 オーナー「デザインに関しては元に戻して」の続き）: 紺の下地の箱は、既定が明るい面だった時の読みやすさの手当て。 暗い面に戻したので、トップの最初の画面の副題（ac-fv-sub）と同じ金の字にする。色は面ごとの変数（--lpd-gold-text）で明るい面でも読める。字は 16px（本文 16 以上の決まり） */ body .ac-pagehead .ac-ph-tag { background: none; padding: 0; border-radius: 0; color: var(--lpd-gold-text, var(--gold-deep)); font-size: 16px; font-weight: 700; } /* 講師紹介の見出し（2026-10-30）: 読点の後ろでだけ折り返す（「引 / き継ぐ」のような語の途中の折り返しを出さない）。一文の説明は字下げしない */ .ac-trust-seg { display: inline-block; } body .ac-trust-sum { padding-left: 0; } /* 2026-10-30 オーナー「デザインはトップに合わせていく」→ 要件定義書 15:40 版 2.2 ①: 写真のある頁の頭（料金・案内・学べること・マイページほか .ac-pagehead.has-scene）を、 トップ（.ac-hero）と同じ「情景を全面に敷き、中央に題」の形にする。幕はトップの .ac-hero-bg::after と同じ指定、上下の余白はトップの .ac-hero-in の 96px。 ⚠ 10-26 単位 B（写真と文章を分け、写真は右の枠）を、この指示で置き換える。料金（--short）も SP で写真を敷く（敷くだけで高さは増えない） */ body .ac-pagehead.has-scene { position:relative; overflow:hidden; isolation:isolate; text-align:center; padding:96px 0; } body .ac-pagehead.has-scene .ac-ph-grid { display:block; } body .ac-pagehead.has-scene .ac-ph-photo { display:block; position:absolute; inset:0; z-index:-1; margin:0; } body .ac-pagehead.has-scene .ac-ph-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, var(--lpd-surface) 0%, var(--lpd-scrim-60) 50%, var(--lpd-scrim-30) 100%); } body .ac-pagehead.has-scene .ac-ph-img { width:100%; height:100%; max-height:none; aspect-ratio:auto; object-fit:cover; border-radius:0; } body .ac-pagehead.has-scene .ac-ph-text { max-width:896px; margin:0 auto; } body .ac-pagehead.has-scene .ac-h1, body .ac-pagehead.has-scene .ac-lede { margin-left:auto; margin-right:auto; } body .ac-pagehead.has-scene .ac-crumb, body .ac-pagehead.has-scene .ac-crumb a { color:var(--lpd-variant); } /* 2026-10-30 15:40 版 2.2 ②: 講座・読みものの頁（.yo・例 /kouza/P1）をトップのカードの形に寄せる。 ・頭の一文: 左の金の縦線をやめ、トップの説明文と同じ色（--lpd-variant） ・節の見出し: 金の等幅・字間の広い札をやめ、トップの見出し（.ac-h2: 明朝 600・22px・--lpd-on）と同じ。教本（.tb・紙の面）の中は今のまま ・右の欄（1180px 以上）: 左の罫をやめ、トップのカード（.ac-card: --lpd-container・--lpd-r-card・中の余白はトップの .ac-card-in の 32px に対し欄の幅に合わせ 24px） ・右の欄のリンク: トップのカードの行き先（.ac-door-more）と同じ金の字・下線は指したときだけ ⚠ theme-dark.css は layout-pc.css・type-scale.css より先に読まれる（acshell.js 341〜343 行）→ html body で詳細度を上げる */ html body .yo-lede { border-left:0; padding:0; color:var(--lpd-variant); } html body .yo h2:not(.tb h2) { font-family:var(--lpd-serif); font-weight:600; font-size:22px; line-height:1.25; letter-spacing:-0.01em; color:var(--lpd-on); border-bottom:0; padding-bottom:0; } html body .yo-side h2:not(.tb h2) { font-size:18px; } /* ⚠ academic.css の `.ac main a:not([class]):not(.ac-tabs a):not(.ac-drop-panel a)`（詳細度 0,4,3・色 inherit）に負けていた（写しで実測）→ 同じ :not を重ねて上回る */ html .ac main .yo-side li > a:not([class]):not(.ac-tabs a):not(.ac-drop-panel a), html .ac main .yo-side .yo-sub a:not([class]):not(.ac-tabs a):not(.ac-drop-panel a) { color:var(--lpd-gold-text, var(--gold-deep)); text-decoration:none; } html .ac main .yo-side li > a:not([class]):hover, html .ac main .yo-side .yo-sub a:not([class]):hover { text-decoration:underline; text-underline-offset:3px; } @media (min-width: 1180px) { html body .yo-side { border-left:0; padding:24px; background:var(--lpd-container); border-radius:var(--lpd-r-card); } }