）の中だけで効き、外の墨地は一切動かない。 */ .ac { /* ── 色 ───────────────────────────────────────────── Navy=構造と信頼／Gold=行動と達成／White=紙／Parchment=読む面／Ink=文字 */ --navy: #0A1F44; --navy-deep: #00081E; --navy-soft: #34466D; --navy-mist: #D9E2FF; --gold: #C5A059; --gold-deep: #775A19; --gold-pale: #FED488; --paper: #F8F9FA; --paper-white: #FFFFFF; --parchment: #F4F1E9; --ink: #191C1D; --ink-mid: #44464E; /* ⚠ 旧 #75777F は白4.47・淡灰4.24・羊皮3.96 で三地とも AA 未達だった（実測）。 #515359 は 7.69 / 7.29 / 6.81 ＝ AAA 7:1 を満たす */ --ink-faint: #515359; --rule: #E1E3E4; --rule-strong: #C5C6CF; --ink-black: #11100D; /* ── 字 ───────────────────────────────────────────── */ --serif: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif; --sans: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif; --mono: 'Hanken Grotesk', 'Roboto Mono', ui-monospace, monospace; /* ── 間 ───────────────────────────────────────────── */ --container: 1280px; --gutter: 24px; --margin-desktop: 64px; --margin-mobile: 16px; --section-gap: 120px; /* ── 形 ───────────────────────────────────────────── */ --r: 4px; --r-lg: 8px; --shadow-float: 0 8px 40px rgba(10, 31, 68, .07); /* ── 基層 ───────────────────────────────────────────── ⚠ 変数と基層を一つの `.ac` にまとめてある。二つに割ると「同じ名前が二用途」の芽になる（tools/css_lint.py が見ている）。 */ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; /* ⚠ 入口では body（style.css）の字間 .02em が降りてくる。学校の面は字間を持たない */ letter-spacing: normal; font-weight: 400; -webkit-font-smoothing: antialiased; } /* ============================================================================= 基層 ========================================================================== */ .ac, .ac * { box-sizing: border-box; } .ac img { max-width: 100%; display: block; } /* ⚠ 素のだけを継承色にする。class を持つ部品（釦・札・行）の色指定に勝たせない。実測で発覚: `.ac a`(0,2,0) が `.ac-head-cta`(0,1,0) を上書きし、紺地の釦の文字が墨色になっていた。 */ /* ⚠⚠ 詳細度の事故（2026-08-01 実測）: この規則(0,2,2)が `.ac-tabs a[aria-current]`(0,2,1) に勝ち、 **紺地の札の文字を墨に戻して**いた（比 1.05＝読めない）。札のは class を持たないので、「素のリンク」と見分けがつかなかった。器の中を除外する。 */ .ac main a:not([class]):not(.ac-tabs a):not(.ac-drop-panel a) { color: inherit; } /* 内容の器。⚠ 頁の幅はここだけで決める（節ごとに違う幅を作らない） */ .ac-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--margin-mobile); } @media (min-width: 900px) { .ac-wrap { padding: 0 var(--margin-desktop); } } /* 節。⚠ 余白は 120px を基準に、詰める時だけ縮める（広げない） */ .ac-sec { padding: 72px 0; } @media (min-width: 900px) { .ac-sec { padding: var(--section-gap) 0; } } .ac-sec--tight { padding: 56px 0; } @media (min-width: 900px) { .ac-sec--tight { padding: 80px 0; } } .ac-sec--paper { background: var(--paper-white); } .ac-sec--parch { background: var(--parchment); } .ac-sec--navy { background: var(--navy); color: #fff; } .ac-sec--navy .ac-lede, .ac-sec--navy .ac-h2-sub { color: rgba(255,255,255,.78); } /* ============================================================================= 字の階層 — 見出しは明朝（学校の声）／機能は角ゴシック ========================================================================== */ .ac-display { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1.24; letter-spacing: -0.01em; margin: 0; } @media (min-width: 900px) { .ac-display { font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; } } /* ⚠ 素の h1/h2 に style.css が字間と罫を当てている（入口だけ両方読む）。ここで打ち消す。server の頁では元から無いので、見た目は一切変わらない。 */ .ac-h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.25; margin: 0; letter-spacing: normal; border: 0; padding: 0; } @media (min-width: 900px) { .ac-h1 { font-size: 48px; line-height: 1.2; } } .ac-h2 { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.3; margin: 0; letter-spacing: normal; border: 0; padding: 0; } @media (min-width: 900px) { .ac-h2 { font-size: 40px; } } .ac-h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.4; margin: 0; letter-spacing: normal; border: 0; padding: 0; } @media (min-width: 900px) { .ac-h3 { font-size: 26px; line-height: 1.35; } } .ac-h4 { font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.5; margin: 0; } /* 節の肩ラベル。⚠ 大文字＋字送りで、本文と役割を分ける */ /* ⚠⚠ 金は「紙の上の文字」に使わない（2026-08-01 実測で是正）。墨地では #C5A059 が映えたが、紙地（#F8F9FA）では**コントラスト比 2.33**＝読めない。黒地から紙地へ移したとき、金だけ黒地時代の値のまま残っていた（実測で 57 件の文字が該当）。 → **文字には --gold-deep(#775A19・比 6.11)／罫・枠・下線には --gold** と役割で分ける。 ⚠ 暗い地（.ac-sec--navy / .ac-hero / .watch）の上では従来どおり --gold でよい。 */ .ac-label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 14px; display: block; } .ac-sec--navy .ac-label { color: var(--gold); } .ac-label--ja { font-family: var(--sans); letter-spacing: .28em; text-transform: none; } /* ⚠ 行長は文字数で決まる。max-width が無いと 1440px 幅で 64字/行になっていた（参照実測 33〜40字） */ .ac-lede { font-size: 17px; line-height: 1.9; color: var(--ink-mid); margin: 18px 0 0; max-width: 640px; } @media (min-width: 900px) { .ac-lede { font-size: 18px; line-height: 1.8; } } .ac-body { font-size: 16px; line-height: 1.9; color: var(--ink-mid); margin: 0 0 1.1em; } .ac-small { font-size: 15px; line-height: 1.8; color: var(--ink-faint); } /* 節の頭（ラベル＋見出し＋説明）。中央寄せと左寄せの二型 */ .ac-head { margin-bottom: 44px; } @media (min-width: 900px) { .ac-head { margin-bottom: 64px; } } .ac-head--mid { text-align: center; max-width: 780px; margin-left: auto; margin-right: auto; } .ac-head--mid .ac-lede { margin-left: auto; margin-right: auto; } .ac-rule-mid { width: 40px; height: 1px; background: var(--gold); margin: 22px auto 0; } /* ============================================================================= 釦 — Primary=Navy／Secondary=枠だけ／Ghost=金の文字 ========================================================================== */ .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .06em; padding: 15px 30px; border-radius: var(--r); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: .18s ease; min-height: 48px; /* ⚠ 触れる高さ。SP で 44px を下回らせない */ } .ac-btn--primary { background: var(--navy); color: #fff; } .ac-btn--primary:hover { background: var(--navy-deep); } /* ⚠ 金は「入学」という一語にだけ使う（グロービス実測の規律: アクセント色を一語に閉じる）。回遊・参照・記事への導線は primary(紺) か outline に落とす。色を語彙にすると、無料側を読んでいる人が「次に押すもの」を毎回同じ形で見つけられる。 */ .ac-btn--gold { background: var(--gold); color: var(--ink-black); } .ac-btn--gold:hover { background: #b28f47; } .ac-btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); } .ac-btn--outline:hover { background: var(--navy); color: #fff; } /* ⚠⚠ 暗い地の上では枠釦を白に起こす。紺のままだと地に沈んで**見えない**。実測 2026-08-01: `.ac-cta`（紺の帯）は `.ac-sec--navy` を持たないため、 /gakubu /kyoin /teikei /nyugaku の頁末 CTA で第3段の釦が丸ごと消えていた（「第一章を観る」しか見えず、隣の「入学案内を見る」が紺地に紺で描かれていた）。入口のヒーローでも同じことが起きた。地が暗い三つの器をまとめて起こす。 */ .ac-sec--navy .ac-btn--outline, .ac-cta .ac-btn--outline, .ac-hero .ac-btn--outline { color: #fff; border-color: rgba(255,255,255,.5); } .ac-sec--navy .ac-btn--outline:hover, .ac-cta .ac-btn--outline:hover, .ac-hero .ac-btn--outline:hover { background: #fff; color: var(--navy); } .ac-btn--ghost { padding: 0; min-height: 0; color: var(--gold-deep); border: 0; background: none; } /* ⚠ 札の足に置いた細い導線は、読み物の中の字ではなく「押す場所」である。実測 2026-08-01: 窓口の盤（/teikei）の 8 本が高さ 22px で、SP の 44px を下回っていた。字の体裁（余白なし・金の文字）は変えず、当たりだけ広げる。 */ .ac-card-foot .ac-btn--ghost { min-height: 44px; } .ac-btn--ghost::after { content: '→'; transition: transform .18s ease; } .ac-btn--ghost:hover::after { transform: translateX(4px); } .ac-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* ⚠ SP では釦を全幅にする。幅の違う釦を縦に積むと縁がぎざぎざになり、どちらが主かも読めなくなる（実測: 金196px と枠155px が段違いに並んでいた）。 */ @media (max-width: 699px) { .ac-btns > .ac-btn { width: 100%; } } /* ============================================================================= 札（カード）— 白地・1px の細い枠・影は使わない ========================================================================== */ .ac-card { background: var(--paper-white); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: .2s ease; } a.ac-card:hover { border-color: var(--gold); transform: translateY(-2px); } .ac-card-fig { aspect-ratio: 16 / 10; background: var(--rule); overflow: hidden; } .ac-card-fig img { width: 100%; height: 100%; object-fit: cover; } .ac-card-in { padding: 24px; flex: 1; display: flex; flex-direction: column; } .ac-card-in > :last-child { margin-bottom: 0; } .ac-card-meta { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; } .ac-card-desc { font-size: 17px; line-height: 1.85; color: var(--ink-mid); margin: 10px 0 0; } /* 問いから科目への道。⚠ 六つの問いは、この学校の憲法にあたる部分。道が無いと「問い02に答えるにはどの科目か」が読者に分からず、問いが飾りで終わる。 */ .ac-gain-route { display: flex; flex-direction: column; gap: 6px; } .ac-gain-route a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--gold-deep); text-decoration: none; padding: 4px 0; } .ac-gain-route a:hover { color: var(--navy); text-decoration: underline; } .ac-card-foot { margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--ink-faint); } /* 格子。⚠ SP は必ず1列に落とす */ .ac-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 700px) { .ac-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .ac-grid { gap: var(--gutter); } .ac-grid--3 { grid-template-columns: repeat(3, 1fr); } .ac-grid--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 700px) and (max-width: 899px) { .ac-grid--3, .ac-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================= 科目の一覧（/kamoku） ⚠⚠ 2026-08-01 に作り直した（オーナー指摘「文章がずらっと並んで難しそう」）。それまで図版 0 枚の箇条書きで、学校の中（図版 44 枚の札）と食い違っていた。 ⚠ 符号（E1・B03）は内輪の記号なので、題より小さく・題の上に置く。符号を先頭に大きく出すと、頁が講義要綱の PDF に見える。 ========================================================================== */ .ac-axismap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 48px; } @media (min-width: 700px) { .ac-axismap { grid-template-columns: repeat(4, 1fr); } } .ac-axismap a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--paper-white); transition: .2s ease; } .ac-axismap a:hover { border-color: var(--gold); } .ac-axismap b { font-weight: 600; font-size: 15px; } .ac-axismap small { font-family: var(--mono); font-size: 13px; color: var(--ink-faint); } .ac-axis { margin: 0 0 56px; scroll-margin-top: calc(var(--head-top-h) + var(--head-main-h) + 16px); } .ac-axis > h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; } .ac-axis > h2 > small { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); font-weight: 400; } .ac-axis-lede { color: var(--ink-mid); margin: 0 0 24px; max-width: 62ch; } /* 科目の札。⚠ a 要素の中なので中身は span（p や h3 を入れると入れ子が不正になる） */ a.ac-course { display: flex; flex-direction: column; } .ac-course .ac-card-fig { position: relative; } .ac-course .ac-card-in { padding: 18px 20px 20px; } .ac-course .ac-card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } /* ⚠ 節数は折り返させない。学問の名が長いと（出土銭の読み方）「8／節」に割れていた（実測） */ .ac-course-n { font-weight: 400; letter-spacing: .06em; color: var(--ink-faint); text-transform: none; white-space: nowrap; flex: 0 0 auto; } /* 学問の名（史料批判・図像学…）。⚠ 捨てずに符号の隣に置く — 名前を教えるのも授業のうち。ただし見出しにはしない（読者はまだ学んでいないので、名前が先だと意味が渡らない） */ .ac-course-field { font-family: var(--sans); font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-mid); margin-left: 8px; } .ac-course-field::before { content: '／'; color: var(--rule); margin-right: 8px; } .ac-course-t { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.5; font-weight: 600; color: var(--ink); } .ac-course .ac-card-desc { font-size: 15px; line-height: 1.75; margin-top: 8px; } /* 実物のコインを情景の上に丸く添える。⚠ コインは標本、情景は場面。役割が違うので見せ方も分ける ⚠⚠ セレクタを `.ac-card-fig img.ac-card-plate` まで上げること（実測 2026-08-01）。 `.ac-card-plate` 単独（0,1,0）は既存の `.ac-card-fig img`（0,1,1）に負け、 width:100% が効いて**丸い実物が枠いっぱいに膨らみ、情景を覆っていた**。 */ .ac-card-fig img.ac-card-plate { position: absolute; right: 12px; bottom: 12px; width: 64px; height: 64px; object-fit: contain; border-radius: 50%; padding: 7px; background: rgba(255, 255, 255, .93); border: 1px solid rgba(0, 0, 0, .12); } /* 入口の一枚。⚠ 横並びにして、他の札より一段大きく見せる（ここから始まると分かるように） */ .ac-entry { margin: 0 0 56px; } .ac-entry > h2 { margin-bottom: 16px; } @media (min-width: 700px) { a.ac-entry-card { flex-direction: row; } .ac-entry-card .ac-card-fig { flex: 0 0 44%; aspect-ratio: auto; } .ac-entry-card .ac-card-in { padding: 28px 32px; justify-content: center; } .ac-entry-card .ac-course-t { font-size: 26px; } } .ac-tag-free { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: none; color: var(--paper-white); background: var(--navy); padding: 3px 10px; border-radius: 999px; } /* ============================================================================= 実物の盤（/jitsubutsu） ⚠⚠ 2026-08-01。この頁は「すべて実物の写真です」と宣言しながら、217 種の一覧に **写真が一枚も無かった**。頁が自分の宣言と矛盾していた。 ⚠ コインは透過 PNG なので、枠で囲わず紙の上に置く（標本の盤の見立て）。札の意匠（.ac-card）を流用しない — コインは「もの」で、科目は「入口」。役割が違う。 ========================================================================== */ .ac-tray { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 4px; } @media (min-width: 560px) { .ac-tray { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .ac-tray { grid-template-columns: repeat(5, 1fr); } } .ac-spec { display: block; text-align: center; text-decoration: none; color: inherit; padding: 14px 8px 18px; border-radius: var(--r); transition: .2s ease; } .ac-spec:hover { background: var(--paper-white); } .ac-spec-fig { display: flex; align-items: center; justify-content: center; height: 108px; margin-bottom: 10px; } .ac-spec-fig img { max-width: 100%; max-height: 100%; object-fit: contain; } .ac-spec b { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); } .ac-spec small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-faint); } .ac-spec:hover b { color: var(--navy); } /* 制作中。⚠ 隠さない — 隠すと軸の全体像（何が来るか）が読者に見えない。 ⚠ その軸の中に置く（末尾にまとめない）。開けない札なので、枠は破線で開いていないことを示す */ .ac-course-pending { border-style: dashed; background: transparent; } /* ⚠ 情景は薄く出す。図版だけ空の札は「壊れた画像」に見え、「これから来る科目」には読めない */ .ac-course-pending .ac-card-fig { background: var(--rule); } .ac-course-pending .ac-card-fig img { filter: grayscale(.75); opacity: .45; } .ac-course-pending .ac-course-t { color: var(--ink-mid); } .ac-course-pending .ac-card-meta { color: var(--ink-faint); } /* ============================================================================= 数字の帯 — 実データだけを出す。⚠ 出典のない数字を置かない ========================================================================== */ .ac-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } @media (min-width: 700px) { .ac-stats--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 900px) { .ac-stats--3 { grid-template-columns: repeat(3, 1fr); } } .ac-stat { background: var(--paper-white); padding: 28px 18px; text-align: center; } .ac-sec--navy .ac-stats { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); } .ac-sec--navy .ac-stat { background: var(--navy); } .ac-stat-n { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1; color: var(--navy); letter-spacing: -.01em; } .ac-sec--navy .ac-stat-n { color: #fff; } @media (min-width: 900px) { .ac-stat-n { font-size: 44px; } } .ac-stat-l { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; color: var(--gold-deep); margin-top: 10px; } .ac-sec--navy .ac-stat-l { color: var(--gold); } /* 数が「その教材そのもの」へ行ける場合だけ、枡をリンクにする。 ⚠ 入口では、この枡が五つの様式（観る・学ぶ・実物・引く）への見える導線を兼ねる。 */ a.ac-stat { display: block; text-decoration: none; color: inherit; transition: .2s ease; } a.ac-stat:hover { background: var(--parchment); } .ac-sec--navy a.ac-stat:hover { background: var(--navy-soft); } /* ============================================================================= ヒーロー — 全幅の暗い帯。旅の絵をここで見せる（学校の面と旅の面の境） ========================================================================== */ .ac-hero { position: relative; background: var(--ink-black); color: #fff; overflow: hidden; } .ac-hero-bg { position: absolute; inset: 0; } .ac-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; } .ac-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,31,68,.92) 0%, rgba(10,31,68,.62) 46%, rgba(17,16,13,.34) 100%); } .ac-hero-in { position: relative; padding: 96px 0 84px; } @media (min-width: 900px) { .ac-hero-in { padding: 152px 0 132px; max-width: 780px; } } .ac-hero .ac-label { color: var(--gold); } .ac-hero .ac-lede { color: rgba(255,255,255,.86); } .ac-hero-sub { font-family: var(--serif); font-weight: 400; color: var(--gold); } /* 頁の頭（下層。ヒーローより浅い帯） */ /* ⚠ --head-img は頁ごとに inline で差し込む（server/lib/acshell.js の pagehead）。既定を none で宣言しておく。宣言が無いと css_lint が「定義の無い変数」として落とすし、 img を渡し忘れた頁で背景の指定そのものが壊れる。 */ .ac-pagehead { --head-img: none; background: var(--navy); color: #fff; padding: 56px 0 48px; } /* 情景を敷いた頭。⚠ 帳は必ず残す（写真の明るさが頁ごとに違うので、無いと見出しの読みやすさが頁ごとにばらつく）。左は濃く、右へ抜いて写真を見せる。 ⚠ SP は横幅が無いので上下方向に抜く（横方向だと写真がほとんど見えない）。 */ .ac-pagehead.has-scene { background-image: linear-gradient(90deg, rgba(10,31,68,.96) 42%, rgba(10,31,68,.60) 100%), var(--head-img); background-size: cover; background-position: center right; } @media (max-width: 699px) { .ac-pagehead.has-scene { background-image: linear-gradient(180deg, rgba(10,31,68,.94) 55%, rgba(10,31,68,.72) 100%), var(--head-img); } } @media (min-width: 900px) { .ac-pagehead { padding: 88px 0 76px; } } .ac-pagehead .ac-label { color: var(--gold-deep); } .ac-pagehead .ac-lede { color: rgba(255,255,255,.8); max-width: 720px; } /* ============================================================================= 頭部（追従・すりガラス） ========================================================================== */ .ac-head-bar { position: sticky; top: 0; z-index: 50; background: rgba(248,249,250,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--rule); } /* 上段＝教材への直行路。⚠ 細く・小さく。下段の学校の導線より前に出さない */ /* ⚠ 色は継承の根で決める。子の a に色を書くと `.ac a:not([class])`(0,2,1) に負けて墨色を継承し、紺地で読めなくなる（実測で日本語だけ消えていた）。同種のバグの二度目。 */ /* ⚠⚠ 2026-08-01 再設計: 上段は**ユーティリティ**（言語・入学案内）。参照4校とも上段はここ。以前は上段に主ナビ（教材5本）を置き、下段に学校4本を置いていた＝**主ナビを2つに割って**いた。 ⚠ 上段は控えめに。紺のベタ帯だと上段のほうが強く見え、主従が逆転する。 */ .ac-head-top { display: none; background: var(--paper); border-bottom: 1px solid var(--rule); } @media (min-width: 62.5rem) { .ac-head-top { display: block; } } /* ⚠ 学びの画面では上段の五様式を #corpusnav という入れ物に差し込む（chrome() が innerHTML で書き換えるため）。入れ物が flex の item になると、中のに親の gap が効かず、「航路Routes科目Courses…」と詰まって出る（実測 2026-08-01）。入れ物を透明にする。 */ #corpusnav { display: contents; } .ac-head-top-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--margin-desktop); height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .ac-head-top-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--gold-deep); margin-right: 4px; } /* ⚠⚠ 上段は紙地になった（2026-08-01 再設計）。**紺地前提の白文字が残っていて、白地に白文字（コントラスト比 1.05＝判読不能）になっていた**（オーナー指摘で実測）。 ⚠ 地を変えたら、その上の文字色を必ず測り直す。地だけ変えて字を残すのが典型の事故。 ⚠ 釦（.ac-head-cta）は自前の紺背景を持つので、この規則より後で上書きする。 */ .ac-head-top-in a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-size: 13px; font-weight: 500; color: var(--ink-mid); } .ac-head-top-in a:hover { color: var(--navy); } .ac-head-top-in a.ac-head-cta { color: #fff; } /* ⚠ 2026-09-04: 帯は「札（在籍/聴講中）→ マイページ → ログアウト」の三つ組。項目の間は 14px（実測で 0 だった＝一語に溶けていた）。札は状態であり行き先も持つので、縁のある小さな札にして地の文と区別する */ .ac-head-top-in .nav-util { display: inline-flex; align-items: center; gap: 14px; } .ac-head-top-in .nav-state { color: var(--ink-mid); border: 1px solid var(--rule-strong, var(--rule)); border-radius: 999px; padding: 2px 10px; line-height: 1.4; } .ac-head-top-in .nav-state:hover { border-color: var(--gold); color: var(--ink); } /* ⚠⚠ 上段では英字の添えを出さない（2026-08-01 是正）。実測: 項目の中（和文と英字）が 7px、項目の間が 26px しかなく、**近さの差が 3.7 倍**。目が「どこまでが一項目か」を判別できず、「航路Routes科目Courses用語集Glossary…」と一本の帯に溶けていた。38px の細い帯に 5 項目 × 2 語＝10 語は入らない。英字は下段（縦積みで成立している側）に残す。役割が違うので、同じ扱いにしない。 */ .ac-head-top-in a i { display: none; } .ac-head-top-in a:hover { color: #fff; } .ac-head-top-in a:hover i { color: var(--gold); } .ac-head-top-in a[aria-current] { color: var(--gold-deep); } /* ⚠⚠ 群の間隔は、群の中の間隔より**はっきり広く**取る（2026-08-01 是正）。実測では逆転していた: 下段のナビは項目間 30px なのに、ナビと入学案内の間が 20px。近さの原則が反転するので、「四項目＋釦」が一塊に見えて読めなかった。いまは群の中 24px ／群の間 48px（2倍）。上段も同じ考えで 30px を確保している。 */ .ac-head-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--margin-mobile); height: 64px; display: flex; align-items: center; gap: 24px; } @media (min-width: 900px) { .ac-head-in { padding: 0 var(--margin-desktop); height: 84px; gap: 48px; } } /* ⚠ 校名は「家へ戻る」唯一の導線。実測で高さ 27px しかなかった（触れる最小は 44px）。頭部は 64/76px あるので、上下の余白で 44px にしても見た目は動かない。 */ .ac-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; margin-right: auto; padding: 9px 0; } .ac-brand b { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--navy); letter-spacing: .02em; } .ac-brand small { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--gold-deep); } @media (max-width: 560px) { .ac-brand small { display: none; } } /* 下段＝学校の導線。日本語の下に英語を小さく添える。 ⚠ 英語は意味を伝えるためでなく、見出しの図形として置く（実測: ZEN/グロービスとも同型）。太らせない・目立たせないことで効く。 */ .ac-nav { display: none; gap: 24px; align-items: flex-end; } @media (min-width: 62.5rem) { .ac-nav { display: flex; } } .ac-nav a { display: flex; align-items: center; text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.2; } .ac-nav a span { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.2; } .ac-nav a i { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); line-height: 1; } /* 上段の入学案内。⚠ 下段の主ナビより小さく。ここは行動の口であって主ナビではない。 */ .ac-head-top .ac-head-cta { min-height: 28px; padding: 5px 16px; font-size: 12px; } /* 「学校について」の束ね。⚠ 主ナビを 6〜7 本の相場に収めるための器（参照4校の実測）。 ⚠ position を持つ板は、閉じているとき display:none を明示する（

の畳みが外れるため）。 */ .ac-drop { position: relative; } .ac-drop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 0; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.2; } .ac-drop > summary::-webkit-details-marker { display: none; } .ac-drop > summary::after { content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); } .ac-drop > summary:hover, .ac-drop[open] > summary { color: var(--navy); border-bottom-color: var(--gold); } .ac-drop:not([open]) > .ac-drop-panel { display: none; } .ac-drop-panel { position: absolute; left: 0; top: calc(100% + 8px); min-width: 200px; z-index: 70; background: var(--paper-white); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-float); padding: 6px; } .ac-drop-panel a { display: block; padding: 10px 14px; font-size: 14px; color: var(--ink); text-decoration: none; } .ac-drop-panel a:hover { background: var(--paper); color: var(--navy); } .ac-nav a:hover, .ac-nav a[aria-current] { color: var(--navy); } .ac-nav a:hover i, .ac-nav a[aria-current] i { color: var(--gold-deep); } .ac-nav a[aria-current] { border-bottom-color: var(--gold-deep); } /* ⚠ 触れる高さは 44px を下回らせない（実測で 41px だった） */ .ac-head-cta { display: inline-flex; align-items: center; padding: 12px 20px; min-height: 44px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; border-radius: var(--r); text-decoration: none; } .ac-head-cta:hover { background: var(--navy-deep); } /* 携帯・タブレットの目次。⚠ 1000px 未満ではナビが消え、脚部まで下りないとどこへも行けない状態だった（実測）。JS を使わず details/summary で開閉する。 */ /* ⚠⚠ SP では身分の群（在籍・ログイン）を頭に出さない（2026-08-01 是正）。実測: 仏 100px・独 97px・西 57px の横溢れが全画面で出ていた。犯人は入学案内の釦で、 390px の幅に校名＋身分＋釦が入らなかった（長い語の言語で必ず溢れる）。身分は目次（ac-menu）の中に同じ項目があるので、頭からは落として構わない。 ⚠ 「入らないから小さくする」ではなく「入らないものを別の場所へ移す」で直す。 */ @media (max-width: 62.4rem) { .nav-util { display: none; } } .ac-menu { position: relative; } @media (min-width: 62.5rem) { .ac-menu { display: none; } } .ac-menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--paper-white); } .ac-menu > summary::-webkit-details-marker { display: none; } .ac-menu > summary span { display: block; width: 18px; height: 1px; background: var(--navy); position: relative; } .ac-menu > summary span::before, .ac-menu > summary span::after { content: ''; position: absolute; left: 0; width: 18px; height: 1px; background: var(--navy); } .ac-menu > summary span::before { top: -6px; } .ac-menu > summary span::after { top: 6px; } .ac-menu[open] > summary span { background: transparent; } .ac-menu[open] > summary span::before { top: 0; transform: rotate(45deg); } .ac-menu[open] > summary span::after { top: 0; transform: rotate(-45deg); } /* ⚠⚠ 目次の中身が画面より高い（2026-08-13 是正）。実測: 盤 874px に対し 390x844 で +94px・360x640 で +298px はみ出し、 overflow-y が visible なので **中でスクロールできず、下の項目に触れられなかった**。届かなくなっていたのは 7 言語の切替と「ログイン」＝目次の最後にある項目。盤は sticky な頭の中に絶対配置されているので、頁を送ってもはみ出した先は出てこない。 76px の根拠: 実測した盤の上端 64px（頭 65px の中に置かれ、top: 100%+10px）＋下の余白 12px。 ⚠ vh は iOS のアドレスバー分だけ実際の可視領域より大きい。dvh を後に書いて上書きさせる。 */ .ac-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(84vw, 320px); background: var(--paper-white); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-float); padding: 8px; z-index: 60; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; /* 盤の端まで来ても、後ろの頁が一緒に動かない */ -webkit-overflow-scrolling: touch; } .ac-menu-panel a { display: block; padding: 14px 16px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; border-radius: var(--r); } .ac-menu-panel a:hover, .ac-menu-panel a[aria-current] { background: var(--paper); color: var(--navy); } .ac-menu-panel hr { border: 0; border-top: 1px solid var(--rule); margin: 8px 0; } .ac-menu-panel small { display: block; padding: 4px 16px 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--ink-faint); } /* ============================================================================= 脚部 — 3列（学ぶ／連携と記録／規約）＋実データの帯 ========================================================================== */ .ac-foot { background: var(--ink-black); color: rgba(255,255,255,.7); padding: 64px 0 32px; } .ac-foot-grid { display: grid; gap: 36px; grid-template-columns: 1fr; } @media (min-width: 800px) { .ac-foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gutter); } } .ac-foot h2 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--gold-deep); margin: 0 0 16px; } .ac-foot ul { list-style: none; margin: 0; padding: 0; } .ac-foot li { margin-bottom: 10px; } .ac-foot a { font-size: 14px; color: rgba(255,255,255,.7); text-decoration: none; } .ac-foot a:hover { color: var(--gold); } .ac-foot-brand b { font-family: var(--serif); font-size: 20px; color: #fff; display: block; margin-bottom: 6px; } .ac-foot-brand p { font-family: var(--serif); font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.85); margin: 0 0 10px; max-width: 26em; } .ac-foot-brand p.ac-foot-sub { font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.5); margin: 0; } .ac-foot-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.45); } /* ============================================================================= 部品 ========================================================================== */ /* 番号つきの手順（入学の流れ・学びの順序） */ .ac-steps { counter-reset: st; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } @media (min-width: 900px) { .ac-steps--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 900px) { .ac-steps--5 { grid-template-columns: repeat(5, 1fr); } } .ac-step { counter-increment: st; background: var(--paper-white); padding: 30px 24px; } .ac-step::before { content: counter(st, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--gold-deep); margin-bottom: 14px; } .ac-step h3 { margin-bottom: 8px; } /* 名簿（教員・提携先） */ .ac-person { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; } .ac-person-fig { aspect-ratio: 1; background: var(--rule); border-radius: var(--r); overflow: hidden; } .ac-person-fig img { width: 100%; height: 100%; object-fit: cover; } .ac-person-role { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; } /* 記事の一覧行（紀要・コラム） */ .ac-rows { border-top: 1px solid var(--rule); } .ac-row { display: block; padding: 26px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; } .ac-row:hover .ac-h3 { color: var(--navy); } .ac-row-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; } .ac-row-meta b { color: var(--gold-deep); font-weight: 700; } /* 定義の並び（要件・費用） */ .ac-dl { border-top: 1px solid var(--rule); } .ac-dl > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--rule); } @media (min-width: 700px) { .ac-dl > div { grid-template-columns: 220px 1fr; gap: 24px; } } .ac-dl dt { font-size: 14px; font-weight: 700; color: var(--navy); } .ac-dl dd { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink-mid); } /* 折りたたみ（よくある質問） */ .ac-faq { border-top: 1px solid var(--rule); } .ac-faq details { border-bottom: 1px solid var(--rule); } .ac-faq summary { padding: 22px 40px 22px 0; font-size: 16px; font-weight: 700; color: var(--navy); cursor: pointer; list-style: none; position: relative; } .ac-faq summary::-webkit-details-marker { display: none; } .ac-faq summary::after { content: '+'; position: absolute; right: 8px; top: 20px; font-size: 20px; color: var(--gold-deep); font-weight: 400; } .ac-faq details[open] summary::after { content: '−'; } .ac-faq p { margin: 0 0 22px; font-size: 15px; line-height: 1.9; color: var(--ink-mid); } /* 引用（学びの言葉） */ .ac-quote { border-left: 2px solid var(--gold); padding: 4px 0 4px 22px; margin: 0; } .ac-quote p { font-family: var(--serif); font-size: 20px; line-height: 1.8; color: var(--ink); margin: 0 0 12px; } @media (min-width: 900px) { .ac-quote p { font-size: 24px; } } .ac-quote cite { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-faint); } /* 二段組（画と文） */ .ac-split { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .ac-split { grid-template-columns: 1fr 1fr; gap: 64px; } .ac-split--wide { grid-template-columns: 1.15fr 1fr; } } .ac-split-fig { border-radius: var(--r-lg); overflow: hidden; background: var(--rule); aspect-ratio: 4 / 3; } .ac-split-fig img { width: 100%; height: 100%; object-fit: cover; } /* 帯の CTA */ .ac-cta { background: var(--navy); color: #fff; text-align: center; } .ac-cta .ac-h2 { color: #fff; } .ac-cta .ac-lede { color: rgba(255,255,255,.78); max-width: 620px; margin-left: auto; margin-right: auto; } .ac-cta .ac-btns { justify-content: center; } /* パンくず */ .ac-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.55); margin-bottom: 18px; } .ac-crumb a { color: rgba(255,255,255,.55); text-decoration: none; } .ac-crumb a:hover { color: var(--gold); } /* 読む本文（記事・規約） */ .ac-prose { max-width: 44rem; } .ac-prose h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--navy); margin: 44px 0 16px; } .ac-prose h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; margin: 32px 0 12px; } .ac-prose p { font-size: 16px; line-height: 1.95; color: var(--ink-mid); margin: 0 0 1.2em; } .ac-prose ul, .ac-prose ol { padding-left: 1.4em; margin: 0 0 1.4em; } .ac-prose li { font-size: 16px; line-height: 1.9; color: var(--ink-mid); margin-bottom: .5em; } /* ============================================================================= 読みもの（メディア層） ========================================================================== */ /* 分類のタブ。⚠ 実際に絞り込める（/yomu/c/）ものだけを並べる */ .ac-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .ac-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-mid); text-decoration: none; background: var(--paper-white); transition: .18s ease; } .ac-tabs a:hover { border-color: var(--navy); color: var(--navy); } .ac-tabs a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; } .ac-tabs span { font-family: var(--mono); font-size: 11px; opacity: .7; } /* 記事の頭（日付・筆者・分類） */ .ac-artmeta { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-faint); padding-bottom: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; } .ac-artmeta a { color: var(--gold-deep); text-decoration: none; } .ac-artfig { margin: 0 0 36px; border-radius: var(--r-lg); overflow: hidden; } .ac-artfig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* 記事の末尾に置く「この記事が指している教材」 */ .ac-related { max-width: 44rem; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); } .ac-related ul { list-style: none; padding: 0; margin: 14px 0 0; } .ac-related li { margin-bottom: 10px; } .ac-related a { font-size: 15px; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule-strong); } .ac-related a:hover { border-bottom-color: var(--gold); } /* ============================================================================= 言語切替 — 7言語（頭部の紺帯・携帯は目次の中） ⚠ 学びの画面（index.html）の