/* ポイントノート数III・C — 静的サイト用スタイル */ :root { --accent: #2E7D5B; --ink: #23262b; --paper: #fbfaf7; --card: #ffffff; --border: #e2e0da; --muted: #6b6f76; } /* ---------- 配色テーマ切替: マカロン版(2026-07-10) ---------- site-features.jsのinitThemeToggleがにdata-theme="macaron"を 付け外しすることで有効/無効になる。各章の--accent(章色)自体は変更せず、 紙面の質感(背景・枠・角丸・影)と検索/ログインアイコン周りの雰囲気だけを ピンク×オレンジのマカロン系に変える。 */ html[data-theme="macaron"] { --paper: #fffaf6; --card: #ffffff; --border: #ffe0e8; --ink: #40342e; --muted: #8a7565; } html[data-theme="macaron"] .site-header { background: linear-gradient(90deg, #ffd6e0, #ffe8cf); border-bottom: none; } html[data-theme="macaron"] .brand { color: #b5476b; } html[data-theme="macaron"] .point-box { border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } html[data-theme="macaron"] .point-box[data-mark="none"] { border-color: var(--border); border-top: 4px solid var(--accent); } html[data-theme="macaron"] .point-box[data-mark="none"] > .point-title { background: transparent; color: var(--ink); align-items: flex-start; padding: 0.9rem 1.1rem 0.2rem; } /* 2026-07-10: マカロン版では「Point ID」だけ小さいピルバッジにして タイトル本文の上に単独行で置く(モックアップD3案の見た目に合わせる)。 .point-title-idはparser.py側で.point-title-textの内側に埋め込まれる ので、display:blockで強制的に改行させている。 */ html[data-theme="macaron"] .point-title-id { display: block; width: fit-content; background: color-mix(in srgb, var(--accent) 16%, #fff); color: var(--accent); font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.65rem; border-radius: 999px; margin-bottom: 0.4rem; } html[data-theme="macaron"] .point-box[data-mark="none"] .point-title-text { font-size: 1.05rem; font-weight: 700; } html[data-theme="macaron"] .point-box[data-mark="none"] .pn-mark-btn { border-color: var(--accent); color: var(--accent); background: transparent; margin-top: 0.1rem; } html[data-theme="macaron"] .point-box[data-mark="none"] .pn-mark-btn:hover { background: color-mix(in srgb, var(--accent) 15%, #fff); } html[data-theme="macaron"] .chapter-list a { border-radius: 16px; border: 1px solid var(--border); border-left: 6px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } html[data-theme="macaron"] .pn-search-input, html[data-theme="macaron"] .pn-login-btn, html[data-theme="macaron"] .pn-view-toggle-btn, html[data-theme="macaron"] .pn-theme-toggle-btn { border-radius: 999px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; line-height: 1.65; font-size: 16px; } /* ---------- ヘッダー / ナビ ---------- */ .site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--card); border-bottom: 3px solid var(--accent); padding: 0.6rem 1rem; transition: transform 0.25s ease; } /* 2026-07-10: 下スクロール時にヘッダーを隠し、上スクロール時に戻す (site-features.jsのinitAutoHideHeaderが付け外しするクラス)。 スマホでヘッダーが縦に場所を取る問題の追加対策。 */ .site-header.pn-header-hidden { transform: translateY(-100%); } /* 2026-07-10: スマホでもPC版レイアウトを見たい人向けの切り替えボタン。 実機の物理画面幅が狭い場合のみ(site-features.jsが判定してhtmlに pn-mobile-deviceクラスを付ける)表示する。押すとviewportメタタグを 書き換えてPC版と同じ横幅として描画させる(ブラウザ標準の「デスクトップ 用サイトを表示」と同じ原理)。 */ .pn-view-toggle-btn { display: none; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--border); background: var(--paper); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; } .pn-view-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } html.pn-mobile-device .pn-view-toggle-btn { display: inline-flex; } /* 2026-07-10: 配色テーマ切替ボタン(現行版⇔マカロン版)。PC版切替と違い 画面幅を問わず常に表示する。 */ .pn-theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--border); background: var(--paper); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; } .pn-theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } .brand { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.05rem; white-space: nowrap; } .subject-nav { display: flex; gap: 0.2rem; background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem; } .subject-nav a { text-decoration: none; color: var(--muted); font-size: 0.82rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; white-space: nowrap; } .subject-nav a:hover { color: var(--ink); } .subject-nav a.current { color: #fff; background: var(--ink); } /* ---------- EXタブ(入試演習の核となるポイント抜粋科目)専用のゴージャス金テーマ ---------- */ .subject-nav a.subject-ex { color: #5a3d00; background: linear-gradient(135deg, #fff6d8 0%, #f3d16e 55%, #c99a2e 100%); box-shadow: 0 0 0 1px #d4af37 inset, 0 1px 4px rgba(184, 134, 11, 0.45); font-weight: 800; letter-spacing: 0.03em; } .subject-nav a.subject-ex:hover { filter: brightness(1.06); color: #5a3d00; } .subject-nav a.subject-ex.current { background: linear-gradient(135deg, #f7d774 0%, #d4af37 55%, #9c7a1e 100%); color: #3a2600; box-shadow: 0 0 0 1px #9c7a1e inset, 0 1px 5px rgba(156, 122, 30, 0.55); } .chapter-nav { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; } .chapter-nav a { text-decoration: none; color: var(--muted); font-size: 0.88rem; padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .chapter-nav a:hover { border-color: var(--border); } /* 2026-07-10: モバイルでは章タブ(9章など多い科目だと3行に折り返して ヘッダーが縦に間延びしていた)を折り返さず1行にし、横スクロールで 見られるようにする。スクロールバー自体は見た目を邪魔しないよう 細く/隠す。 */ @media (max-width: 640px) { .chapter-nav { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; margin-left: 0; padding-bottom: 0.2rem; -ms-overflow-style: none; scrollbar-width: thin; } .chapter-nav::-webkit-scrollbar { height: 4px; } .chapter-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .chapter-nav a { flex: 0 0 auto; } } .chapter-nav a.current { color: var(--accent); border-color: var(--accent); font-weight: 700; background: color-mix(in srgb, var(--accent) 10%, transparent); } /* ---------- 本文レイアウト ---------- */ .chapter-main, .index-main { max-width: 46rem; margin: 0 auto; padding: 1.2rem 1rem 3rem; } .chapter-num { color: var(--muted); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; } .chapter-main h1 { color: var(--accent); border-bottom: 3px solid var(--accent); padding-bottom: 0.4rem; margin-top: 0.2rem; font-size: 1.6rem; } /* ---------- 穴埋めテストモード ---------- */ /* スクロールしても常に押せるよう画面右下に固定(フローティングボタン)。 下までスクロールしてから毎回ページ上部に戻らなくて済むように。 */ .quiz-toggle-btn { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50; padding: 0.7rem 1.1rem; font-size: 0.9rem; font-weight: 700; color: var(--accent); background: #fff; border: 1.5px solid var(--accent); border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,0.18); cursor: pointer; } .quiz-toggle-btn:hover { background: color-mix(in srgb, var(--accent) 16%, #fff); } @media (max-width: 640px) { .quiz-toggle-btn { right: 0.7rem; bottom: 0.7rem; padding: 0.6rem 0.9rem; font-size: 0.82rem; } } body.quiz-mode .quiz-toggle-btn { color: #fff; background: var(--accent); } /* テストモードON時、.fill(地の文の\kuu)と.mathkuu(数式中の\kuu、 MathJaxの\class{mathkuu}{}で付与)は黒塗りにして答えを隠す。 クリックすると.revealedが付いてその場所だけ答えが見える。 */ body.quiz-mode .fill, body.quiz-mode mjx-container .mathkuu { cursor: pointer; border-radius: 3px; } body.quiz-mode .fill:not(.revealed), body.quiz-mode mjx-container .mathkuu:not(.revealed) { color: transparent !important; background: var(--ink); border-bottom-color: var(--ink); } body.quiz-mode .fill:not(.revealed) *, body.quiz-mode mjx-container .mathkuu:not(.revealed) * { visibility: hidden; } body.quiz-mode .fill.revealed, body.quiz-mode mjx-container .mathkuu.revealed { background: color-mix(in srgb, var(--accent) 15%, transparent); } .chapter-main h2 { color: var(--accent); border-left: 8px solid var(--accent); padding-left: 0.6rem; margin-top: 1.8rem; margin-bottom: 0.5rem; font-size: 1.25rem; } .chapter-main h3 { color: var(--ink); border-bottom: 2px dotted var(--border); padding-bottom: 0.2rem; margin-top: 1.2rem; margin-bottom: 0.5rem; font-size: 1.05rem; } p { margin: 0.55em 0; } /* ---------- Point ボックス ---------- */ .point-box { background: var(--card); border: 2px solid var(--accent); border-radius: 10px; margin: 0.9rem 0; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .point-title { background: var(--accent); color: #fff; font-weight: 700; padding: 0.4rem 0.9rem; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } /* タイトル文字列(数式込み)を1つのflexアイテムにまとめる。 これが無いと、タイトル内の\(...\)をMathJaxが別要素に置き換えたときに 前後のテキストと数式がバラバラのflexアイテムとして扱われ、 justify-content:space-betweenで不自然に引き離されてしまう。 */ .point-title-text { flex: 1 1 auto; min-width: 0; } /* ---------- 苦手マーク(理解度3段階)機能 ---------- */ .pn-mark-btn { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.75); background: rgba(255,255,255,0.12); color: #fff; font-size: 0.9rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .pn-mark-btn:hover { background: rgba(255,255,255,0.28); } .pn-mark-btn[data-state="ok"] { background: #2f9e5c; border-color: #2f9e5c; } .pn-mark-btn[data-state="soso"] { background: #d99a2b; border-color: #d99a2b; } .pn-mark-btn[data-state="bad"] { background: #d1495b; border-color: #d1495b; } .point-box[data-mark="ok"] { border-color: #2f9e5c; } .point-box[data-mark="soso"] { border-color: #d99a2b; } .point-box[data-mark="bad"] { border-color: #d1495b; } .point-box[data-mark="ok"] > .point-title { background: #2f9e5c; } .point-box[data-mark="soso"] > .point-title { background: #d99a2b; } .point-box[data-mark="bad"] > .point-title { background: #d1495b; } /* ---------- Pointごとのメモ機能 ---------- */ .pn-note-btn { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.75); background: rgba(255,255,255,0.12); color: #fff; font-size: 0.85rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; } .pn-note-btn:hover { background: rgba(255,255,255,0.28); } .pn-note-btn.open { background: rgba(255,255,255,0.35); } .pn-note-btn.has-note::after { content: ""; position: absolute; top: -2px; right: -2px; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #ffd23f; border: 1px solid rgba(0,0,0,0.2); } .pn-note-panel { border-top: 1.5px dashed var(--border); padding: 0.6rem 1.1rem 0.8rem; background: color-mix(in srgb, var(--accent) 4%, #fff); } .pn-note-textarea { display: block; width: 100%; min-height: 4.5rem; resize: vertical; font: inherit; font-size: 0.92rem; line-height: 1.5; padding: 0.5rem 0.7rem; border: 1.5px solid var(--border); border-radius: 6px; box-sizing: border-box; background: #fff; color: var(--ink); } /* 2026-07-20: フォーカス時font-size 0.92rem(≒14.7px)が16px未満のため、 iOS Safariでメモ欄をタップすると画面が自動的に少しズームインして しまう不具合が報告された。スマホ幅でだけ16px以上に上げてズーム自体を 起こさないようにする(検索ボックスと同じ対策)。 */ @media (max-width: 640px) { .pn-note-textarea { font-size: 16px; } } .pn-note-textarea:focus { outline: none; border-color: var(--accent); } .pn-note-status { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; min-height: 1em; } /* ---------- サイト内検索 ---------- */ .pn-search-wrap { position: relative; margin-left: auto; } .pn-search-input { font-size: 0.85rem; padding: 0.35rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; width: 8.5rem; background: var(--paper); color: var(--ink); font-family: inherit; } .pn-search-input:focus { outline: none; border-color: var(--accent); width: 12rem; } .pn-search-results { position: absolute; top: calc(100% + 0.4rem); right: 0; width: 22rem; max-width: 88vw; max-height: 65vh; overflow-y: auto; background: var(--card); border: 1.5px solid var(--accent); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 200; display: none; } .pn-search-results.open { display: block; } .pn-search-result { display: block; padding: 0.6rem 0.85rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border); } .pn-search-result:last-child { border-bottom: none; } .pn-search-result:hover { background: color-mix(in srgb, var(--accent) 8%, #fff); } .pn-search-result-meta { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.15rem; } .pn-search-result-title { display: block; font-size: 0.9rem; font-weight: 700; } .pn-search-result-snippet { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-search-empty { padding: 0.8rem; color: var(--muted); font-size: 0.85rem; } /* 2026-07-10: モバイルではPointを検索欄を虫眼鏡アイコンだけに縮小し、 タップ(フォーカス)したときだけ入力欄が浮き出て広がる方式にする。 これにより「方針・使い方」等のsite-linksと同じ行に収まりやすくなる。 */ @media (max-width: 640px) { .pn-search-wrap { flex: 0 0 auto; } .pn-search-input { width: 2.3rem; padding: 0.35rem 0.5rem; color: transparent; cursor: pointer; } .pn-search-input::placeholder { color: transparent; } .pn-search-wrap::before { content: "\1F50D"; position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); font-size: 0.82rem; pointer-events: none; } .pn-search-wrap:focus-within::before { display: none; } /* 2026-07-20: 元々.pn-search-wrap基準のposition:absolute(right:0)で 展開していたが、モバイルではヘッダー自体が複数行に折り返す (科目タブ行・章タブ行・検索/リンク行、など)ため、.pn-search-wrapが 実際にどこに来るかがページ・画面幅によって変わり、right:0基準の 絶対配置だと展開後の入力欄が画面外や全く違う位置に飛んで見える 不具合が報告された(検索アイコンをタップした瞬間に入力欄自体が 見当たらなくなる)。.pn-search-wrapの位置に依存しないよう、 画面(ビューポート)基準のposition:fixedに変更し、常に画面上部の 決まった位置に展開するようにする。 */ .pn-search-wrap:focus-within .pn-search-input { position: fixed; top: 0.6rem; left: 0.8rem; right: 0.8rem; width: auto; max-width: none; color: var(--ink); cursor: text; z-index: 300; /* 2026-07-20: フォーカス時にfont-sizeが16px未満だとiOS Safariが 自動的に画面をズームインしてしまう不具合が報告された。フォーカス 時だけでも16px以上にしておけば、iOSの自動ズーム自体が発生しなく なり解消する。 */ font-size: 16px; } .pn-search-wrap:focus-within .pn-search-input::placeholder { color: var(--muted); } .pn-search-wrap:focus-within .pn-search-results { position: fixed; top: 3.1rem; left: 0.8rem; right: 0.8rem; width: auto; max-width: none; } } /* ---------- Googleログイン(端末をまたいだマーク同期) ---------- */ .pn-auth-wrap { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.6rem; flex-shrink: 0; } .pn-login-btn { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.9rem; border: 1px solid #dadce0; border-radius: 999px; background: #fff; color: #3c4043; font-size: 0.82rem; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transition: box-shadow 0.15s ease, background 0.15s ease; white-space: nowrap; } .pn-login-btn:hover { background: #f8f9fa; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18); } .pn-login-btn--disabled, .pn-login-btn:disabled { cursor: default; opacity: 0.55; box-shadow: none; } .pn-login-btn[hidden] { display: none; } .pn-google-icon { flex-shrink: 0; } .pn-user-chip { display: flex; align-items: center; gap: 0.55rem; padding: 0.32rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--accent, #2E7D5B) 12%, #fff); border: 1px solid color-mix(in srgb, var(--accent, #2E7D5B) 35%, #fff); font-size: 0.8rem; } .pn-user-chip[hidden] { display: none; } .pn-user-name { font-weight: 700; color: var(--ink); max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-logout-btn { border: none; background: transparent; color: var(--muted); text-decoration: underline; font-size: 0.76rem; cursor: pointer; padding: 0; white-space: nowrap; } .pn-logout-btn:hover { color: var(--ink); } /* 2026-07-10: モバイルではログインボタンをGoogleアイコンのみの丸ボタンに 縮小し、site-links等と同じ行に収まるようにする。ログイン後のユーザー チップも幅を詰める。 */ @media (max-width: 640px) { .pn-auth-wrap { flex: 0 0 auto; margin-left: 0.4rem; margin-top: 0; } .pn-login-btn { padding: 0.42rem; border-radius: 50%; gap: 0; } .pn-login-btn span { display: none; } .pn-user-chip { padding: 0.28rem 0.55rem; gap: 0.35rem; } .pn-user-name { max-width: 4.5em; font-size: 0.75rem; } .pn-logout-btn { font-size: 0.7rem; } } /* ---------- トップページ: 科目カードとは別枠の副次ナビ ---------- */ .secondary-nav { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); display: flex; gap: 0.8rem; flex-wrap: wrap; } .secondary-nav a { display: inline-block; padding: 0.6rem 1.1rem; border: 1.5px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 0.92rem; } .secondary-nav a:hover { border-color: var(--accent); color: var(--accent); } .point-body { padding: 0.7rem 1.1rem; } .point-body > *:first-child { margin-top: 0; } .point-body > *:last-child { margin-bottom: 0; } /* 丸囲み(内側の軽いボックス) */ .inner-box { border: 1.5px solid var(--border); border-radius: 8px; padding: 0.5rem 0.9rem; margin: 0.6rem 0; background: color-mix(in srgb, var(--accent) 5%, #fff); } /* ---------- 横並び(bmini/minipage) ---------- */ .mini-row { display: flex; flex-wrap: nowrap; /* 2026-07-09: wrapのままだと、比率の合計がちょうど100%の 組み合わせ(0.6+0.4等、ほとんどのbminiペアが該当)で、 gapの分だけ基準サイズがコンテナ幅をわずかに超え、 flex-shrinkで実際は収まるにもかかわらず強制的に2行に 折り返されてしまっていた(縮小を考慮する前の基準サイズで 折り返し判定されるのがflexboxの仕様のため)。nowrapに して、はみ出す分は必ずflex-shrinkで縮めさせるようにした。 スマホ幅での縦積みは下のメディアクエリ側で別途wrapに戻す。 */ gap: 1rem; align-items: flex-start; margin: 0.6rem 0; } .mini { min-width: 0; /* 2026-07-09: 固定220pxをやめ、flex-basis(50%等)まで正しく縮められるように。 これが無いと、片方のカラムの中身(長い数式や半角文字列など折り返せない 要素)が幅220pxを下回れずカラムごと右にはみ出し、.point-boxのoverflow:hidden で見えない位置が切れて「途中で途切れる」原因になっていた。 */ flex-grow: 1; overflow-x: auto; /* それでも中身(改行できない長い数式など)が縮みきらない場合は、 切れずにその部分だけ横スクロールできるようにする安全策。 */ } @media (max-width: 640px) { .mini-row { flex-wrap: wrap; } .mini { flex-basis: 100% !important; } } /* ---------- 画像 ---------- */ .image-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0.9rem 0; min-width: 0; /* 2026-07-09: .mini(左右2カラム)の中に.image-rowが入れ子になる ケースで、画像がflexアイテムとして自身の元画像サイズより 縮まず、.miniごと右にはみ出して2カラムが崩れる(折り返されて 縦積みになる)不具合があったための対策。 */ } img.fig { max-width: 100%; min-width: 0; /* 画像がflexアイテムになる場合の縮小許可(理由は.image-rowと同じ) */ height: auto; display: block; margin: 0.7rem auto; border: 1px solid var(--border); border-radius: 6px; background: #fff; } .image-row img.fig { margin: 0; } /* ---------- リスト ---------- */ ol.kajyou, ul.latex-list, ol.latex-list { padding-left: 1.6rem; margin: 0.6rem 0; } ol.kajyou li, ul.latex-list li, ol.latex-list li { margin: 0.25rem 0; } .item-label { font-weight: 700; color: var(--accent); } /* \item[](ラベル明示的に空)用。著者がラベル無しの行にしたい意図なので、 ブラウザ既定の黒丸(disc)マーカーと、そのぶんの字下げも消して詰める。 */ ul.latex-list li.no-marker, ol.latex-list li.no-marker { list-style: none; margin-left: -1.6rem; } /* \ptref{PTID}(Point間相互参照)のリンク。本文中に溶け込みすぎないよう 下線+アクセントカラーにする。 */ a.ptref { color: var(--accent); text-decoration: underline; } /* \begin{enumerate}[m] は著者の慣習で丸数字(①②③...)を意味する。 20項目を超える場合は10進数にフォールバックする。 */ @counter-style circled { system: fixed; symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳"; suffix: ""; } /* \begin{enumerate}[i)] などカスタムラベル指定用(本文でi)/ii)を 参照している箇所があるため、既定の連番のみでなく指定の書式を再現する) */ ol.enum-custom { list-style: none; counter-reset: enumcustom; padding-left: 2.4rem; } ol.enum-custom > li { counter-increment: enumcustom; position: relative; } ol.enum-custom > li::before { content: var(--enum-prefix) counter(enumcustom, var(--enum-style)) var(--enum-suffix); position: absolute; left: -2.4rem; width: 2rem; text-align: right; padding-right: 0.4rem; font-weight: 700; color: var(--accent); } /* ---------- インライン装飾 ---------- */ .fill { border-bottom: 1.5px solid var(--ink); padding: 0 0.15em; } /* .fillが\boxed{}や不等号(≦/≧)・分数などを含む数式を包むと、下線が数式自体の 罫線と近すぎて視覚的に衝突することがある(2026-07-06指摘、サイト全体で 繰り返し起きている既知の課題)。2026-07-20: 相反式のPoint(1A 1.2.2)等、 \dfracを含む\kuuで実際に下線が分母を突き抜けて見える不具合が再報告された。 一度.fill:has(mjx-container)全体を0.9emまで広げたが、分数を含まない 普通の数式(元々0.25emでちょうど良かった箇所)まで一律に余白が広がって しまい、他の章で下線が次の行にかぶる regression が発生した(2026-07-20 ユーザー指摘)。MathJaxが分数をタグでレンダリングしている ことを利用し、「分数を含む場合だけ」広い余白を当てる形に変更する。 */ .fill:has(mjx-container) { padding-bottom: 0.25em; } /* 分数(\bun/\frac/\dfrac)はベースラインより深く分母が出るため、上記の 0.25emでは足りず下線が分母を突き抜ける(相反式Point 1A 1.2.2で実測確認)。 分数を含む場合だけさらに広げる。2026-07-20: 0.9emだと逆にわずかに 下がりすぎ(下線と分母の間が少し空きすぎる)との指摘があり、0.75emに 微調整。 */ .fill:has(mjx-mfrac) { padding-bottom: 0.75em; } /* 2026-07-20: 上のpadding-bottom拡大後、iOS Safari実機で「分数を含む.fill が行の上に浮いて見える」という重大な不具合が報告された(PCのChrome等 では再現しない)。.fillは素のinline要素で、そこに大きめのpadding-bottom を足すと、インライン要素の行内高さ・ベースライン計算がブラウザによって 不安定になりやすい(特にWebKit)。.fill自体をinline-blockにして ボックスとして明示的に扱わせることで、paddingを持たせても周囲の 行の中で安定して配置されるようにする(MathJax自体の内部要素 (mjx-container)のdisplayは変更しない。以前mjx-container側を inline-blockに変えてMathJax自身のベースライン計算を壊した regressionがあったため、今回は自作のラッパー側だけを変更する)。 */ .fill:has(mjx-container) { display: inline-block; } .red { color: #d13c3c; } .blue { color: #2857c9; } .green { color: #1f8a4d; } .white { color: #fff; background: #333; padding: 0 0.2em; } strong.kyouchou { color: var(--accent); } .uwave, .dashuline, .uuline, .uline { text-decoration: underline; } .strike { text-decoration: line-through; } .fbox { border: 1.3px solid var(--ink); padding: 0.05em 0.4em; border-radius: 3px; display: inline-block; } .huge { font-size: 1.9em; font-weight: 700; } .large { font-size: 1.3em; font-weight: 700; } .small { font-size: 0.85em; } .center { text-align: center; } .right { text-align: right; } .left { text-align: left; } /* ---------- vrule(bmini列の手動区切り線) ---------- */ .vrule { align-self: stretch; width: 1px; background: var(--border); margin: 0 0.3rem; } /* ---------- 樹形図(zyukeizu)を入れ子リストとして表現 ---------- */ ul.zyukeizu { list-style: none; padding-left: 1.3rem; margin: 0.6rem 0; border-left: 2px solid var(--border); } ul.zyukeizu ul { list-style: none; padding-left: 1.3rem; margin: 0.3rem 0; border-left: 2px dashed var(--border); } ul.zyukeizu li { margin: 0.3rem 0; } /* ---------- 図(figure)まわり ---------- */ figure.fig-wrap { margin: 1rem 0; text-align: center; } figure.fig-wrap figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; } .raw-table-note { border: 1px dashed var(--muted); color: var(--muted); padding: 0.6rem 0.9rem; border-radius: 6px; font-size: 0.9rem; margin: 1rem 0; } /* ---------- 表(tabular由来) ---------- */ .table-wrap { overflow-x: auto; margin: 1rem 0; } .tex-table { border-collapse: collapse; width: 100%; font-size: 0.95rem; } .tex-table td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: center; vertical-align: middle; } .tex-table tr:first-child td { background: color-mix(in srgb, var(--accent) 10%, #fff); font-weight: 700; } /* ---------- \2 (元\vspace{2mm}、行間が詰まって穴埋め等が書き込みにくい 箇所を広げるための手打ち調整)の復元 ---------- */ .vspace-2mm { height: 2mm; } /* ---------- MathJax の折り返し対策 ---------- */ /* 2026-07-20: 地の文中のインライン数式(\(..\))がスマホ幅に収まらないほど 横長になる箇所(1A Point 1.1.3の因数分解ex.)、Point 1.2.1の対称式の例) で見切れる不具合があったため、一度インライン数式のmjx-containerも display:inline-blockに変更してoverflow-x:autoを効かせる対応を試みた。 しかし、MathJaxはインライン数式の縦位置(ベースライン)合わせを display:inline前提の内部マージン計算で行っており、inline-blockに 変えるとその調整が崩れ、サイト全体でインライン数式が行からずれて 浮き上がって見える重大なregressionが発生した(ユーザー報告により発覚)。 そのため、mjx-container側のdisplay変更によるインライン数式の横スクロール 対応は撤回し、display:true(mjx-container[display="true"])の場合のみに 戻す。実際に見切れていた2箇所(Point 1.1.3, 1.2.1)は、TEXソース側で 該当の数式を$...$(インライン)から$$...$$(display)に変更することで、 全体に影響を与えずに同じ横スクロール機構を適用する方針にした。 */ mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; } /* ---------- フッター ---------- */ .site-footer { text-align: center; color: var(--muted); font-size: 0.82rem; padding: 2rem 1rem 3rem; } .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 0.5rem; } .footer-links a { color: var(--muted); text-decoration: none; font-size: 0.8rem; } .footer-links a:hover { text-decoration: underline; } .footer-copyright { font-size: 0.75rem; color: var(--muted); margin: 0; } /* ---------- トップページ ---------- */ .index-main h1 { color: var(--ink); font-size: 1.5rem; } .chapter-list { list-style: none; padding: 0; display: grid; gap: 0.8rem; margin-top: 1.5rem; } .chapter-list a { display: block; background: var(--card); border: 2px solid var(--accent); border-left: 10px solid var(--accent); border-radius: 8px; padding: 1rem 1.2rem; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.1rem; } .chapter-list a:hover { background: color-mix(in srgb, var(--accent) 8%, #fff); } /* ---------- トップページの「準備中」章(未公開章)のカード ---------- */ /* 2026-07-20: 1A公開ページの.chapter-soon(準備中の章のプレースホルダー) に対応するCSSが元々style.css側に存在しておらず、無地文字にしか 見えていなかった不具合が報告された(以前は薄い色枠のカード風に見えて いたとのこと)。公開済みの章カード(.chapter-list a)と同じ形・余白を 保ちつつ、枠と文字を薄くして「まだ押せない」ことが伝わるデザインに する。 */ .chapter-soon { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; background: var(--card); border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-left: 6px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 8px; padding: 1rem 1.2rem; color: var(--muted); font-weight: 700; font-size: 1.1rem; } .chapter-soon small { flex: 0 0 auto; font-weight: 600; font-size: 0.72rem; color: color-mix(in srgb, var(--accent) 60%, var(--muted)); background: color-mix(in srgb, var(--accent) 10%, #fff); padding: 0.25rem 0.65rem; border-radius: 999px; white-space: nowrap; } /* ---------- トップページのEXカード:ゴージャス金テーマで目立たせる ---------- */ .chapter-list a.chapter-ex { background: linear-gradient(135deg, #fffaf0 0%, #fdf0c8 40%, #f3d982 100%); border-color: #c99a2e; box-shadow: 0 0 0 1px #d4af37 inset, 0 2px 10px rgba(184, 134, 11, 0.25); } .chapter-list a.chapter-ex:hover { filter: brightness(1.03); } .ex-badge { display: inline-block; margin-left: 0.6rem; font-size: 0.72rem; font-weight: 700; color: #6b4a00; background: color-mix(in srgb, #d4af37 25%, #fff); border: 1px solid #c99a2e; border-radius: 999px; padding: 0.15rem 0.55rem; vertical-align: middle; } @media (max-width: 640px) { body { font-size: 15px; } .chapter-main, .index-main { padding: 1rem 0.7rem 3rem; } } /* ---------- ヘッダー内の補助リンク(併用参考書ページなど) ---------- */ .site-links { display: flex; gap: 0.4rem; margin-left: auto; } .site-links a { text-decoration: none; color: var(--muted); font-size: 0.82rem; font-weight: 700; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; } .site-links a:hover { color: var(--ink); border-color: var(--accent); } .site-links a.current { color: #fff; background: var(--accent); border-color: var(--accent); } /* ---------- 併用参考書ページ ---------- */ .book-card { display: flex; gap: 1rem; background: var(--card); border: 2px solid var(--border); border-left: 8px solid var(--accent); border-radius: 10px; padding: 1rem 1.2rem; margin: 1.2rem 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .book-cover-placeholder { flex: 0 0 84px; height: 116px; border: 1.5px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.72rem; line-height: 1.4; color: var(--muted); background: color-mix(in srgb, var(--accent) 5%, #fff); } .book-body { flex: 1; min-width: 0; } .book-body h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--ink); border: none; padding: 0; } .book-pub { font-weight: 400; font-size: 0.85rem; color: var(--muted); margin-left: 0.4rem; } .book-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--accent); padding: 0.15rem 0.55rem; border-radius: 999px; margin: 0 0.4rem 0.4rem 0; } .book-body p { margin: 0.5em 0; } .book-buy-link { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); border: 1.5px dashed var(--border); padding: 0.3rem 0.8rem; border-radius: 999px; text-decoration: none; cursor: default; } .teacher-note { border: 1.5px dashed var(--accent); border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0.7rem 0 0.2rem; background: color-mix(in srgb, var(--accent) 6%, #fff); font-size: 0.94rem; } .teacher-note strong { color: var(--accent); } /* ---------- 全体ロードマップ図(①→④) ---------- */ .roadmap-flow { display: flex; align-items: stretch; gap: 0.5rem; margin: 1.3rem 0 1.6rem; } .roadmap-step { flex: 1 1 0; background: var(--card); border: 2px solid var(--accent); border-radius: 10px; padding: 0.8rem 0.8rem; text-align: center; } .roadmap-num { display: inline-block; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; margin-bottom: 0.4rem; } .roadmap-step h4 { margin: 0.2rem 0 0.35rem; font-size: 0.9rem; color: var(--ink); } .roadmap-step p { margin: 0; font-size: 0.76rem; color: var(--muted); line-height: 1.55; } .roadmap-arrow { flex: 0 0 auto; align-self: center; font-size: 1.4rem; color: var(--accent); font-weight: 700; } .roadmap-arrow .roadmap-v { display: none; } @media (max-width: 640px) { .roadmap-flow { flex-direction: column; } .roadmap-arrow .roadmap-h { display: none; } .roadmap-arrow .roadmap-v { display: inline; } } /* ---------- 苦手リスト(weak-points.html) ---------- */ .wp-intro { color: var(--muted); font-size: 0.92rem; line-height: 1.7; margin: 0.6rem 0 1.4rem; } .wp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem; margin-bottom: 1rem; } .wp-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; } .wp-filter-chip { border: 2px solid var(--border); background: var(--card); color: var(--muted); font-weight: 700; font-size: 0.85rem; padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer; opacity: 0.5; transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .wp-filter-chip:hover { opacity: 0.8; } .wp-filter-chip.active { opacity: 1; transform: translateY(-1px); } .wp-filter-chip--soso.active { background: #d99a2b; border-color: #d99a2b; color: #fff; box-shadow: 0 0 0 3px rgba(217, 154, 43, 0.35), 0 2px 6px rgba(217, 154, 43, 0.35); } .wp-filter-chip--bad.active { background: #d1495b; border-color: #d1495b; color: #fff; box-shadow: 0 0 0 3px rgba(209, 73, 91, 0.35), 0 2px 6px rgba(209, 73, 91, 0.35); } .wp-toolbar-buttons { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .wp-quiz-note { color: var(--muted); font-size: 0.78rem; margin: -0.4rem 0 1rem; } .mathkuu-sample { display: inline-block; background: var(--ink); color: var(--ink); border-radius: 3px; padding: 0 0.2rem; } .wp-mode-toggle-btn, .wp-page-btn { border: 1.5px solid var(--accent); background: #fff; color: var(--accent); font-weight: 700; font-size: 0.85rem; padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; } .wp-mode-toggle-btn:hover, .wp-page-btn:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 14%, #fff); } .wp-page-btn:disabled { opacity: 0.4; cursor: default; } .wp-page-btn--ghost { border-color: var(--border); color: var(--muted); } .wp-count { color: var(--muted); font-size: 0.82rem; margin: 0.4rem 0; } .wp-group-header { margin: 1.6rem 0 0.4rem; } .wp-group-chapter { color: var(--accent); border-left: 8px solid var(--accent); padding-left: 0.6rem; font-weight: 700; font-size: 1.05rem; } .wp-group-section { color: var(--ink); border-bottom: 2px dotted var(--border); padding-left: 0.6rem; padding-bottom: 0.2rem; margin-top: 0.35rem; font-size: 0.92rem; } /* 苦手リストのプレビューはsearch-index.js由来のプレーンテキストなので、 元のHTMLにあった
を変換した改行(\n)をそのまま画面に反映させる */ #wp-list .point-body, #wp-random .point-body { white-space: pre-wrap; } .wp-point-footer { padding: 0.3rem 0.9rem 0.7rem; text-align: right; } .wp-source-link { color: var(--accent); font-size: 0.8rem; font-weight: 700; text-decoration: none; } .wp-source-link:hover { text-decoration: underline; } .wp-empty { color: var(--muted); font-size: 0.92rem; text-align: center; padding: 2.5rem 1rem; border: 1.5px dashed var(--border); border-radius: 10px; margin: 1rem 0; } .wp-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.4rem 0 2rem; } .wp-page-indicator { color: var(--muted); font-size: 0.85rem; font-weight: 700; } .wp-random-controls { display: flex; justify-content: center; gap: 0.8rem; margin: 1rem 0 2.5rem; } @media (max-width: 640px) { .wp-toolbar { flex-direction: column; align-items: stretch; } .wp-mode-toggle-btn { align-self: flex-start; } } /* ---------- 初回訪問・久しぶりのログイン向けチュートリアル ---------- */ .pn-tutorial-overlay { position: fixed; inset: 0; background: rgba(20, 18, 24, 0.55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1rem; } /* [hidden]属性はブラウザ標準スタイルシート側のdisplay:noneで効くはずだが、 上の`.pn-tutorial-overlay { display: flex; }`という作者スタイルシート側の 宣言は、詳細度に関わらず常にUAスタイルシートより優先されてしまう (CSSのカスケードで「作者 > UA」が詳細度より先に判定されるため)。 そのため[hidden]を付けてもflex表示のまま残り、閉じるボタンを押しても 見た目上ポップアップが消えない不具合があった(2026-07-21)。 明示的に上書きして確実に隠す。 */ .pn-tutorial-overlay[hidden] { display: none; } .pn-tutorial-modal { position: relative; background: var(--card, #fff); border-radius: 14px; max-width: 30rem; width: 100%; max-height: 90vh; overflow-y: auto; padding: 1.6rem 1.5rem 1.4rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .pn-tutorial-close { position: absolute; top: 0.7rem; right: 0.8rem; border: none; background: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; line-height: 1; padding: 0.3rem; } .pn-tutorial-title { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin-bottom: 0.9rem; } .pn-tutorial-demo-slot { margin-bottom: 1rem; } .pn-tutorial-demo-box { margin: 0; font-size: 0.85rem; pointer-events: auto; } .pn-tutorial-demo-box .point-title { font-size: 0.9rem; } .pn-tutorial-line { margin: 0.3rem 0; } .pn-tutorial-blank { display: inline-block; background: var(--ink); color: transparent; border-radius: 3px; padding: 0 0.3rem; cursor: pointer; } .pn-tutorial-blank.revealed { background: color-mix(in srgb, var(--accent) 15%, transparent); color: inherit; } .pn-tutorial-note-mock { padding: 0.7rem 0.9rem; font-size: 0.85rem; line-height: 1.6; color: var(--ink); } .pn-tutorial-weaklist-demo .wp-filter-bar { margin-bottom: 0.6rem; } .pn-tutorial-weaklist-demo .point-box { margin: 0; } .pn-tutorial-text { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin: 0 0 1.1rem; } .pn-tutorial-login-btn { display: block; width: 100%; border: none; background: var(--accent, #8A3E7A); color: #fff; font-weight: 700; font-size: 0.95rem; padding: 0.7rem 1rem; border-radius: 999px; cursor: pointer; margin-bottom: 1.1rem; } /* [hidden]属性はUAスタイルシートのdisplay:noneだが、上のdisplay:blockのような author側の宣言が常に優先されてしまうため、明示的に上書きする必要がある */ .pn-tutorial-login-btn[hidden] { display: none; } .pn-tutorial-dots { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; } .pn-tutorial-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--border); } .pn-tutorial-dot.active { background: var(--accent, #8A3E7A); } .pn-tutorial-nav { display: flex; justify-content: space-between; gap: 0.8rem; } .pn-tutorial-nav .wp-page-btn { flex: 1; }