/* ポイントノート数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, "Noto Sans CJK JP", "IPAexGothic", 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); } /* 2026-07-26: お気に入りページ(favorites.html)へのショートカット。 PC版切替・テーマ切替と同じ丸アイコン。ハートは常に赤系で示す。 */ .pn-fav-link { 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: #e0556b; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0; text-decoration: none; } .pn-fav-link:hover { border-color: #e0556b; background: #fff0f2; } .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; } /* 2026-07-30: 準備中章はではなくなので、 aだけを対象にしていると横スクロール時に縮んで縦書きになる。両方に効かせる。 */ .chapter-nav a, .chapter-nav .nav-soon { 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="soso"] { background: #d99a2b; border-color: #d99a2b; } .pn-mark-btn[data-state="bad"] { background: #d1495b; border-color: #d1495b; } .point-box[data-mark="soso"] { border-color: #d99a2b; } .point-box[data-mark="bad"] { border-color: #d1495b; } .point-box[data-mark="soso"] > .point-title { background: #d99a2b; } .point-box[data-mark="bad"] > .point-title { background: #d1495b; } /* ---------- ハート(お気に入り/ブックマーク)ボタン ---------- */ /* point-title上に置く小さな丸ボタン。メモ・理解度マークと同じ見た目の系統。 */ .pn-heart-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; padding: 0; } .pn-heart-btn:hover { background: rgba(255,255,255,0.28); } .pn-heart-btn.hearted { background: rgba(255,255,255,0.30); border-color: #fff; } /* ---------- 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); } /* 2026-07-24: モバイルで結果候補をタップするとinputがblurして :focus-withinが外れ、ドロップダウンがabsolute(折返しヘッダ内right:0)へ 瞬間移動→指の下から要素が逃げてタップ空振り＆画面外へずれる不具合。 結果が開いている間(.open)はフォーカスに関係なくfixedを維持して防ぐ。 */ .pn-search-wrap:focus-within .pn-search-results, .pn-search-results.open { 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; } /* 2026-07-31: 番号付きリスト(TEXの\BKajyou / edaenumerate 由来)の番号を 丸番号＋章のテーマカラーにする。指数法則・累乗根の性質などが対象。 */ ol.kajyou { list-style: none; counter-reset: kajyou; padding-left: 2.1rem; } ol.kajyou > li { counter-increment: kajyou; position: relative; } ol.kajyou > li::before { content: counter(kajyou, circled-decimal); position: absolute; left: -1.7rem; color: var(--accent); font-weight: 700; } /* ①〜⑳ を使う(circled-decimalが無い環境向けのフォールバック) */ @counter-style circled-decimal { system: fixed 1; symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳"; suffix: " "; } /* value="0" class="no-marker" の項目(自前ラベル付き)は対象外 */ ol.kajyou > li.no-marker::before { content: none; } .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; } /* 2026-07-31: テーマカラーの丸番号(①②③)を自前で置いている箇条書きは、 リスト既定の「・」と二重になるのでマーカーを消す。 (TEX側で \item \textcolor{\PtColor}{\textbf{\maru{1}}} と書いた項目が対象) */ ul.latex-list li:has(> span[style*="var(--accent)"]:first-child), ol.latex-list li:has(> span[style*="var(--accent)"]:first-child) { list-style: none; } /* \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%だと狭い画面で列が潰れ、見出しが1文字ずつ折り返して 「縦書き」のように見えてしまう。内容なりの幅にして、はみ出したぶんは .table-wrap の overflow-x で横スクロールさせる。 */ width: auto; min-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; white-space: nowrap; /* 見出しは折り返さない */ } /* ---------- \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; } /* 2026-07-31: モバイルでは章タブと同じく1行の横スクロールにする。 これをしないと、タブが画面の右にはみ出してページ全体が横に動いてしまう (章ページ以外＝このタブが最下段に来るページで発生していた)。 */ @media (max-width: 640px) { .site-links { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; margin-left: 0; padding-bottom: 0.2rem; -ms-overflow-style: none; scrollbar-width: thin; } .site-links::-webkit-scrollbar { height: 4px; } .site-links::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .site-links a { flex: 0 0 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, #fav-list .point-body { white-space: pre-wrap; } /* 元ページのHTMLに差し替えが済んだPointは、通常のPointページと同じ 組版に戻す(pre-wrapのままだと余計な改行・詰まりで崩れる。2026-07-31) */ /* IDセレクタ(#wp-list等)の方が詳細度が高く、単に .pn-enhanced で上書き しようとしても負けてpre-wrapが残ってしまう。ID込みで指定する。 */ #wp-list .point-box.pn-enhanced .point-body, #wp-random .point-box.pn-enhanced .point-body, #fav-list .point-box.pn-enhanced .point-body, .point-box.pn-enhanced .point-body { white-space: normal; } .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, #4F6272); 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, #4F6272); } .pn-tutorial-nav { display: flex; justify-content: space-between; gap: 0.8rem; } .pn-tutorial-nav .wp-page-btn { flex: 1; } /* ---------- はみ出し自動セーフティネット(2026-07-24) ---------- .point-box は overflow:hidden のため、中身(長いインライン数式・ 折り返せない半角文字列・幅広の要素)がボックス幅を超えるとクリップされ、 横スクロールも届かず「見切れる」不具合が全科目で再発していた。 site-features.js の initOverflowGuard が、MathJax描画後に親幅を 超えたコンテンツブロックへ下記クラスを自動付与し、その要素だけを 横スクロール可能にする。mjx-container自体のdisplayは一切変更しない ため、過去に起きたインライン数式のベースライン崩れは発生しない。 */ .pn-xscroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; } /* 2026-07-26: 横スクロール可能な要素の端に影を出して「まだ右(左)に続きがある」 ことを気づけるようにする。影はJS(initOverflowGuard)がスクロール位置に応じて pn-more-left / pn-more-right クラスを付け外しして制御する(端まで送ると消える)。 box-shadowなので要素自身の背景色は上書きしない。 */ .pn-xscroll.pn-more-right { box-shadow: inset -18px 0 12px -12px rgba(0,0,0,0.32); } .pn-xscroll.pn-more-left { box-shadow: inset 18px 0 12px -12px rgba(0,0,0,0.32); } .pn-xscroll.pn-more-left.pn-more-right { box-shadow: inset -18px 0 12px -12px rgba(0,0,0,0.32), inset 18px 0 12px -12px rgba(0,0,0,0.32); } /* 2026-07-28: \webhide で片側の列がWeb版だけ消えたとき、残った列を全幅にする */ .mini-row > .mini:only-child { flex-basis: 100% !important; } /* 2026-07-28: TEX側の \textcolor{\PtColor}{...}(章カラー指定)。数式中はMathJaxの \class{ptcolor}、地の文はspanのstyleで、いずれもページの--accentに追従させる */ .ptcolor, mjx-container .ptcolor { color: var(--accent); } /* 2026-07-28: 過剰な行アキの解消(Web版のみ。印刷版のTEXは触らない)。 リストや囲みブロックは自身に余白があるので、隣接する
と二重になっていた。 また\1(縦アキ)と空行が重なって
が3つ以上続く箇所があった。 */ /* 2026-08-04: ここにあった
抑制の4ルールは削除した。 CSSの隣接セレクタ(+)はテキストノードを飛ばして要素の並びだけを見るため、 「①…

②…

③…」のように本文を

で区切って並べると、 あいだに文字があっても br が連続していると判定され、3つ目以降の
が すべて display:none になっていた(3C 2.2.7 で発覚)。 同じ処理は _converter/sitebuild.py の tidy_breaks() が文字列上で行う。 */ /* 2026-07-28: public側だけに手書きで入っていた img の style="max-width:100%" をCSSに集約 */ .point-body img.fig { max-width: 100%; height: auto; } /* トップページのサイト紹介文 (2026-07-30 追加) */ .home-lead { margin: 1rem 0 0; font-size: 1rem; line-height: 1.8; color: var(--ink); } .home-about { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--border); } .home-about h2 { font-size: 1.1rem; margin: 0 0 0.6rem; color: var(--ink); } .home-about p { font-size: 0.95rem; line-height: 1.85; color: var(--ink); margin: 0 0 0.9rem; } .home-about .home-about-more { font-size: 0.92rem; font-weight: 700; } /* 2026-07-30: 章タブのうち準備中(工事中)の章は、リンクではなくグレー表示にする。 工事中ページへの導線を全ページから消すため(AdSense審査対策)。 章を公開したら、public側のspanをaに戻す。 */ .chapter-nav .nav-soon { display: inline-block; flex: 0 0 auto; color: var(--border); font-size: 0.88rem; padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; cursor: default; } /* 2026-07-30: 3つ以上連続する
の3つ目以降を消す。従来は .point-body 限定だったため、 章末の振り返り(point-boxの外にある地の文)では効かず、余分な空行が残っていた。 .chapter-main まで広げて、Pointの外でも効くようにする。 */ /* 2026-08-04: .chapter-main br + br + br も上と同じ誤爆をするため削除。 */ /* ================= 章末の「前の分野へ / 次の分野へ」(2026-07-31) ================= */ .pn-chapter-move { display: flex; justify-content: space-between; gap: 0.8rem; margin: 2.2rem 0 1.5rem; } /* 次だけ(=最初の章)のときは右寄せ、前だけ(=最後の章)のときは左寄せになるよう、 片方しか無い場合の位置を整える */ .pn-chapter-move > .pn-move-next:only-child { margin-left: auto; } .pn-move-link { display: flex; flex-direction: column; gap: 0.15rem; flex: 0 1 48%; padding: 0.6rem 0.9rem; border: 2px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--card, #fff); transition: border-color 0.15s, transform 0.15s; } .pn-move-link:hover { border-color: var(--accent); transform: translateY(-1px); } .pn-move-next { text-align: right; } .pn-move-dir { font-size: 0.75rem; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; } .pn-move-name { font-size: 0.95rem; font-weight: 700; line-height: 1.35; } @media (max-width: 640px) { .pn-move-link { padding: 0.5rem 0.7rem; } .pn-move-name { font-size: 0.85rem; } } /* ================= SNS共有カード(2026-07-31) ================= */ /* 共有カードだけは章のテーマ色ではなく、お気に入り(♥)と同じピンクで固定する。 章ごとに色が変わらないぶん「特別な場所」として目に留まりやすい。 */ .pn-share-card { --share: #d84a63; margin: 2.4rem 0 1.2rem; padding: 1rem 1.1rem 1.1rem; border: 2px solid var(--share); border-radius: 14px; background: linear-gradient(180deg, rgba(216, 74, 99, 0.10), rgba(216, 74, 99, 0.03)); box-shadow: 0 2px 0 rgba(216, 74, 99, 0.25); } .pn-share-headline { font-size: 0.95rem; font-weight: 700; color: var(--share); margin-bottom: 0.5rem; } .pn-share-preview { font-size: 0.85rem; line-height: 1.6; color: var(--ink); background: rgba(255, 255, 255, 0.75); border-radius: 8px; padding: 0.5rem 0.7rem; margin-bottom: 0.7rem; } .pn-share-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pn-share-btn { font-family: inherit; font-size: 0.82rem; font-weight: 700; padding: 0.45rem 0.9rem; border-radius: 999px; border: 2px solid var(--share); background: #fff; color: var(--share); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; } /* タッチ端末ではタップ後に :hover が貼り付いたままになり、押したボタンが ずっと塗りつぶされて見える。ホバーできる環境(マウス)に限定する。 */ @media (hover: hover) and (pointer: fine) { .pn-share-btn:hover { background: var(--share); color: #fff; transform: translateY(-1px); } } .pn-share-btn:active, .pn-share-btn.is-tapped { background: var(--share); color: #fff; transform: none; } .pn-share-btn.is-tapped { transition: background 0.25s, color 0.25s; } .pn-share-btn:focus { outline: none; } .pn-share-btn:focus-visible { outline: 2px solid var(--share); outline-offset: 2px; } @media (max-width: 640px) { .pn-share-btn { font-size: 0.78rem; padding: 0.4rem 0.75rem; } } /* 中盤のカードは章末より控えめに(読書の流れを切りすぎないように) */ .pn-share-card--mid { margin: 1.8rem 0; padding: 0.8rem 1rem 0.9rem; } /* フッター常設の紹介ボタン(2026-07-31) */ .pn-footer-share { --share: #d84a63; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0.6rem; } .pn-footer-share-label { font-size: 0.78rem; font-weight: 700; opacity: 0.75; } .pn-share-row--compact .pn-share-btn { font-size: 0.74rem; padding: 0.3rem 0.7rem; border-width: 1px; } /* ================= ランダム出題モード(quiz.html) 2026-07-31 ================= */ .qz-hero { text-align: center; padding: 1.6rem 1rem 1.2rem; margin-bottom: 1.2rem; border-radius: 18px; background: linear-gradient(160deg, rgba(184, 134, 11, 0.18), rgba(216, 74, 99, 0.10)); } .qz-hero-dice { font-size: 3rem; line-height: 1; animation: qz-bounce 2.4s ease-in-out infinite; } @keyframes qz-bounce { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } } @media (prefers-reduced-motion: reduce) { .qz-hero-dice { animation: none; } } .qz-hero-title { font-size: 1.6rem; margin: 0.4rem 0 0.3rem; color: var(--accent); border: none; } .qz-hero-sub { font-size: 0.88rem; line-height: 1.7; margin: 0; opacity: 0.85; } .qz-panel { margin-bottom: 1.1rem; padding: 0.9rem 1rem 1rem; border: 2px solid var(--border); border-radius: 12px; background: var(--card, #fff); } .qz-section-label { font-size: 0.9rem; font-weight: 700; color: var(--accent); margin-bottom: 0.55rem; } .qz-section-hint { font-size: 0.75rem; font-weight: 400; opacity: 0.7; margin-left: 0.3rem; } .qz-chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; } .qz-chip-row--tight { gap: 0.35rem; margin-bottom: 0.5rem; } .qz-chip { font-family: inherit; font-size: 0.84rem; font-weight: 700; padding: 0.4rem 0.95rem; border-radius: 999px; border: 2px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; } .qz-chip.active { border-color: var(--accent); background: var(--accent); color: #fff; } .qz-mini-btn { font-family: inherit; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; opacity: 0.85; } .qz-note { font-size: 0.78rem; line-height: 1.6; opacity: 0.72; margin: 0.45rem 0 0; } .qz-field-group { margin-bottom: 0.7rem; } .qz-field-subject { font-size: 0.78rem; font-weight: 700; opacity: 0.7; margin-bottom: 0.3rem; } .qz-field-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: inherit; font-size: 0.8rem; font-weight: 700; padding: 0.33rem 0.75rem; border-radius: 999px; border: 2px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; text-align: left; } .qz-field-chip.active { border-color: var(--accent); background: var(--accent); color: #fff; } .qz-field-n { font-size: 0.68rem; font-weight: 700; opacity: 0.65; } .qz-switch { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; margin-top: 0.8rem; cursor: pointer; } .qz-start-wrap { text-align: center; margin: 1.5rem 0 2rem; } .qz-pool-info { font-size: 0.82rem; opacity: 0.8; margin: 0 0 0.7rem; } .qz-start-btn { font-family: inherit; font-size: 1.1rem; font-weight: 700; padding: 0.75rem 2.6rem; border: none; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #B8860B, #d84a63); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15); cursor: pointer; } .qz-start-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); } .qz-start-btn:disabled { background: #bbb; box-shadow: none; cursor: not-allowed; } .qz-play-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .qz-progress { font-size: 0.95rem; font-weight: 700; color: var(--accent); } .qz-progress-bar { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); overflow: hidden; margin: 0.5rem 0 0.7rem; } .qz-progress-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #B8860B, #d84a63); transition: width 0.3s; } .qz-play-hint { font-size: 0.78rem; opacity: 0.7; margin: 0 0 0.6rem; } .qz-judge { margin: 1.2rem 0 2.5rem; text-align: center; } .qz-judge-label { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; opacity: 0.8; } .qz-judge-row { display: flex; justify-content: center; gap: 0.6rem; } .qz-judge-btn { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font-family: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1.1; padding: 0.6rem 1.1rem; border-radius: 14px; border: 2px solid var(--border); background: #fff; cursor: pointer; min-width: 5.2rem; } .qz-judge-btn span { font-size: 0.68rem; font-weight: 700; opacity: 0.75; } .qz-judge-ok { color: #2e8b57; } .qz-judge-soso { color: #d99a2b; } .qz-judge-bad { color: #d1495b; } .qz-judge-btn:active { transform: translateY(2px); } .qz-result-score { font-size: 1.05rem; margin: 0.3rem 0 0; } .qz-score-num { font-size: 1.8rem; color: var(--accent); } .qz-result-breakdown { display: flex; justify-content: center; gap: 0.5rem; margin: 0.2rem 0 1.2rem; } .qz-bd { flex: 0 1 8rem; text-align: center; padding: 0.5rem 0.4rem; border-radius: 10px; border: 2px solid var(--border); background: var(--card, #fff); } .qz-bd-label { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.8; } .qz-bd-n { display: block; font-size: 1.3rem; font-weight: 700; } .qz-bd--ok { border-color: #2e8b57; } .qz-bd--soso { border-color: #d99a2b; } .qz-bd--bad { border-color: #d1495b; } .qz-review-head { font-size: 0.9rem; font-weight: 700; color: var(--accent); margin-bottom: 0.4rem; } .qz-review-list { list-style: none; padding: 0; margin: 0 0 1.2rem; } .qz-review-list li { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.4rem 0; border-bottom: 1px dotted var(--border); font-size: 0.86rem; } .qz-review-mark { font-weight: 700; } .qz-review-mark--soso { color: #d99a2b; } .qz-review-mark--bad { color: #d1495b; } .qz-review-list a { color: var(--ink); } @media (max-width: 640px) { .qz-hero-title { font-size: 1.35rem; } .qz-judge-btn { min-width: 4.4rem; font-size: 1.3rem; padding: 0.5rem 0.7rem; } .qz-start-btn { font-size: 1rem; padding: 0.7rem 2rem; } } /* ランダムテストの注意書き */ .qz-disclaimer { font-size: 0.78rem; line-height: 1.7; margin: 0 0 1.1rem; padding: 0.6rem 0.85rem; border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; background: rgba(0, 0, 0, 0.035); opacity: 0.9; } /* ランダムテストのタブだけ、鮮やかな黄色の縁で目立たせる(2026-07-31) */ .site-links a[href$="quiz.html"] { border: 2px solid #E8A317; color: #9a6b00; padding: 0.28rem 0.73rem; } .site-links a[href$="quiz.html"]:hover { border-color: #E8A317; background: rgba(232, 163, 23, 0.12); } .site-links a[href$="quiz.html"].current { background: #E8A317; border-color: #E8A317; color: #fff; } /* ================= 集中テーマ(2026-08-01) ================= 章ごとのテーマカラーを1色に統一して、色の情報量を減らすためのテーマ。 body の style="--accent:..." はインラインなので、!important でだけ上書きできる。 背景は変えず、アクセントだけを差し替える方式なので描画負荷はほぼゼロ。 charcoal … 無彩色に近いチャコール / dark … ほぼ黒（真っ黒はコントラストが 強すぎて輪郭がちらつくため、わずかに明るくしている） */ html[data-theme="dark"] body, html[data-theme="dark"] .chapter-list a, html[data-theme="dark"] .chapter-soon, html[data-theme="dark"] .point-box { --accent: #3A3A38 !important; } html[data-theme="mizuiro"] body, html[data-theme="mizuiro"] .chapter-list a, html[data-theme="mizuiro"] .chapter-soon, html[data-theme="mizuiro"] .point-box { --accent: #2477AA !important; } /* 苦手マークの色(△✗)とお気に入りの♥は「自分がどう思ったか」という情報なので 統一しない。ここだけは章の色ではなく状態の色を残す。 */ html[data-theme="dark"] .point-box[data-mark="soso"], html[data-theme="mizuiro"] .point-box[data-mark="soso"] { border-color: #d99a2b; } html[data-theme="dark"] .point-box[data-mark="bad"], html[data-theme="mizuiro"] .point-box[data-mark="bad"] { border-color: #d1495b; } /* ヘッダーのブロブロゴ(2026-08-01)。文字だった .brand をSVGに差し替える。 色は currentColor なので、.brand の color を変えれば追従する。 */ .brand--logo { display: inline-flex; align-items: center; line-height: 0; /* ロゴの色は章のテーマカラーに引っぱられず、ウォーターの青で固定する。 サイトの顔なので、ページごとに色が変わらない方が印象が安定する。 */ color: #2477AA; } /* 集中テーマのときだけ、ロゴもそのテーマ色に合わせる */ html[data-theme="dark"] .brand--logo { color: #3A3A38; } html[data-theme="mizuiro"] .brand--logo { color: #2477AA; } html[data-theme="macaron"] .brand--logo { color: #2477AA; } .pn-brand-svg { /* 帯から多少はみ出してよい前提で大きめに。文字が小さく見えないようにする */ height: 52px; width: auto; display: block; margin: -8px 0; } @media (max-width: 640px) { .pn-brand-svg { height: 42px; margin: -6px 0; } } /* 2026-08-04: 未公開章のPointへの参照。public側でリンクを外して残した番号。 リンクに見えないよう色と下線を落とす（工事中ページへの導線を作らないため）。 */ .ptref-soon { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; opacity: 0.75; cursor: default; } /* --- 操作できる図(ウィジェット) 2026-08-06 ------------------------------ TEX側の "%WIDGET:ファイル名.html" から生成されるiframe。中身は <科目>/web/widgets/ に置いた独立HTML。高さはウィジェット側からの postMessageを site-features.js が受け取って合わせる(初期値は下のmin-height)。 */ .pn-widget { margin: 14px 0 6px; } .pn-widget iframe { display: block; width: 100%; height: 430px; border: 1px solid var(--v2-line, #dde5ee); border-radius: 14px; background: #fff; overflow: hidden; } @media (max-width: 600px) { .pn-widget iframe { height: 660px; } } @media print { .pn-widget { display: none; } } /* 動画版ウィジェット(%WIDGET:xxx.mp4)。poster表示のみで、再生を押すまで通信ゼロ */ .pn-widget-video video { display: block; width: 100%; height: auto; border: 1px solid var(--v2-line, #dde5ee); border-radius: 14px; background: #FBF7F2; } /* ========================================================================= 演習セット（有料コンテンツ）まわり 2026-08-11 追加 - enshu.html（カタログページ）の各パーツ - 章末カード（.es-chapter-cta） - トップページの案内（.es-home-promo） - PC版のサイドレール（.es-rail：この章の演習セット＋この章の目次） この区画をまるごと削れば元に戻る。 ========================================================================= */ /* ---------- ボタン（共通） ---------- */ .es-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.65rem 1.3rem; border-radius: 10px; font-weight: 700; font-size: 0.95rem; line-height: 1.35; text-decoration: none; border: 1.5px solid var(--accent); color: var(--accent); background: #fff; white-space: nowrap; transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s; } .es-btn:hover { background: color-mix(in srgb, var(--accent) 9%, #fff); } .es-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent); } .es-btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, #000); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent); } .es-btn-ghost { border-color: var(--border); color: var(--muted); background: transparent; } .es-btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; } .es-btn-sub { display: block; font-size: 0.68rem; font-weight: 500; opacity: 0.85; letter-spacing: 0.02em; margin-top: 0.1rem; } /* ---------- カタログページ ---------- */ .es-page { max-width: 54rem; } .es-page h1 { font-size: 1.9rem; line-height: 1.4; margin: 0.2rem 0 0.8rem; } .es-h1-sub { display: inline-block; font-size: 1.15rem; letter-spacing: 0.06em; opacity: 0.85; } .es-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); } /* ヒーロー */ .es-hero { display: grid; grid-template-columns: 1fr 16rem; gap: 1.8rem; align-items: center; margin: 0.6rem 0 2.6rem; padding: 1.6rem 1.7rem; border-radius: 16px; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 12%, #fff) 0%, #fff 62%); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); } .es-hero-lead { margin: 0 0 1.1rem; font-size: 0.95rem; line-height: 1.9; } .es-hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: stretch; } .es-hero-visual { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.13); border: 1px solid var(--border); background: #fff; line-height: 0; } .es-hero-visual img { width: 100%; height: auto; display: block; } .es-hero-visual::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 92%); pointer-events: none; } /* セクション */ .es-sec { margin: 0 0 2.8rem; } /* 節見出し。左の縦バーは style.css の .chapter-main h2 が既に持っているので、 ここでは重ねて描かない（重ねると金色のバーが2本見える）。 */ .es-h2 { margin: 0 0 0.6rem; font-size: 1.22rem; } .es-caveat { font-size: 0.85rem; color: var(--muted); } .es-sec-lead { margin: 0 0 1.2rem; font-size: 0.93rem; line-height: 1.9; color: #4a4d52; } /* 解説の作り（4ステップ） */ .es-flow { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.85rem; margin: 1.5rem 0 1.8rem; padding: 0; } .es-flow-step { position: relative; padding: 1.5rem 1.05rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card); transition: border-color 0.15s, box-shadow 0.15s; } .es-flow-step:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 3px 12px rgba(0,0,0,0.05); } .es-flow-num { position: absolute; top: -0.75rem; left: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent); } .es-flow-step h3 { margin: 0 0 0.4rem; font-size: 0.97rem; border-bottom: none; padding-bottom: 0; color: inherit; } .es-flow-step p { margin: 0; font-size: 0.85rem; line-height: 1.75; color: var(--muted); } /* 見本画像 */ .es-figure { margin: 1.6rem 0 0; padding: 0; } .es-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); } .es-figure figcaption { margin-top: 0.6rem; font-size: 0.82rem; line-height: 1.7; color: var(--muted); } /* 章の一覧 */ .es-subject { margin: 0 0 1.9rem; } .es-h3 { border-bottom: none; padding-bottom: 0; display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.4rem; font-size: 1.02rem; } .es-subject-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 3.1rem; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; color: #fff; background: var(--sc, var(--accent)); letter-spacing: 0.04em; } .es-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0.4rem 0 0; font-size: 0.92rem; } .es-table th, .es-table td { border-bottom: 1px solid var(--border); padding: 0.6rem 0.55rem; text-align: left; vertical-align: middle; } .es-table thead th { font-size: 0.76rem; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; border-bottom: 2px solid var(--border); padding-bottom: 0.4rem; } .es-table tbody tr { transition: background 0.12s; } .es-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .es-table .es-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .es-table .es-st { width: 11rem; } .es-table .es-cont { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .es-table td a { text-decoration: none; color: inherit; font-weight: 600; } .es-table td a:hover { color: var(--accent); } .es-row-featured { background: color-mix(in srgb, var(--accent) 6%, transparent); } .es-row-featured td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .es-tag { display: inline-block; padding: 0.14rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; text-decoration: none; } .es-tag-soon { background: #eeeceA; color: #6b6f76; } .es-tag-sample { background: color-mix(in srgb, var(--accent) 16%, #fff); color: var(--accent); } a.es-tag-sample { background: var(--accent); color: #fff; transition: opacity 0.15s; } a.es-tag-sample:hover { opacity: 0.85; color: #fff; } .es-tag-onsale { background: var(--accent); color: #fff; } /* 価格 */ .es-price-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1rem 0 0; } .es-price-card { flex: 1 1 8rem; padding: 1.1rem 1rem 1rem; border: 1px solid var(--border); border-radius: 12px; text-align: center; background: var(--card); } .es-price-card.is-mid { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, #fff); box-shadow: 0 3px 12px rgba(0,0,0,0.05); } .es-price-amount { display: block; font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; } .es-yen { font-size: 0.9rem; margin-left: 0.1rem; } .es-price-cond { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; } /* 先生方へ */ .es-teacher { padding: 1.2rem 1.3rem; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, #fff); } .es-teacher .es-h2 { margin-top: 0; } .es-teacher p { margin: 0; font-size: 0.93rem; line-height: 1.9; } /* FAQ（アコーディオン） */ .es-faq { border-top: 1px solid var(--border); } .es-faq-item { border-bottom: 1px solid var(--border); } .es-faq-item > summary { list-style: none; cursor: pointer; padding: 0.85rem 2rem 0.85rem 1.5rem; position: relative; font-weight: 700; font-size: 0.94rem; } .es-faq-item > summary::-webkit-details-marker { display: none; } .es-faq-item > summary::before { content: "Q"; position: absolute; left: 0.15rem; color: var(--accent); } .es-faq-item > summary::after { content: ""; position: absolute; right: 0.6rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform 0.18s; } .es-faq-item[open] > summary::after { transform: translateY(-20%) rotate(-135deg); } .es-faq-item > summary:hover { color: var(--accent); } .es-faq-item p { margin: 0; padding: 0 1rem 1rem 1.5rem; font-size: 0.9rem; line-height: 1.9; color: var(--muted); } .es-closing { margin-top: 2.4rem; padding: 1rem 1.1rem; border-radius: 10px; background: #f7f6f3; font-size: 0.9rem; line-height: 1.9; } /* ---------- 章末カード ---------- */ .es-chapter-cta { margin: 2.6rem 0 0.5rem; padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 12px; background: var(--card); } .es-chapter-cta .es-cta-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); } .es-chapter-cta h3 { margin: 0.3rem 0 0.55rem; font-size: 1.12rem; } .es-chapter-cta p { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.85; } .es-cta-meta { display: flex; gap: 0.5rem 1.2rem; flex-wrap: wrap; margin: 0.7rem 0 1rem; font-size: 0.85rem; color: var(--muted); } .es-cta-meta strong { color: var(--accent); } .es-cta-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: stretch; } /* ---------- トップページの案内 ---------- */ .es-home-promo { display: flex; gap: 1rem 1.2rem; align-items: center; flex-wrap: wrap; margin: 1.8rem 0 0.5rem; padding: 1.1rem 1.25rem; border-radius: 12px; border: 1px solid color-mix(in srgb, #8A6A1D 25%, #e2e0da); background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, #8A6A1D 10%, #fff) 0%, #fff 60%); } .es-home-promo .es-home-body { flex: 1 1 18rem; min-width: 0; } .es-home-promo h3 { margin: 0 0 0.3rem; font-size: 1.02rem; } .es-home-promo p { margin: 0; font-size: 0.88rem; line-height: 1.8; color: var(--muted); } .es-home-promo .es-btn { --accent: #8A6A1D; } /* ---------- PC版サイドレール ---------- */ /* 既定では非表示。1180px以上のときだけ、本文の右側の余白に出す。 */ .es-rail { display: none; } @media (min-width: 1180px) { .es-rail { position: fixed; top: 7.5rem; left: calc(50% + 24rem); width: 15rem; max-height: calc(100vh - 11rem); display: flex; flex-direction: column; font-size: 0.84rem; z-index: 5; opacity: 1; transition: opacity 0.55s ease; } /* 読んでいる間（スクロールが止まってしばらく）は薄くする。 マウスを乗せる・キーボードで入ると即座に戻る。 */ .es-rail.es-dim { opacity: 0.22; } .es-rail:hover, .es-rail:focus-within { opacity: 1; transition: opacity 0.14s ease; } .es-rail-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-bottom: 3.5rem; /* 右下の「テストモード」ボタンに隠れないように */ } .es-rail-scroll::-webkit-scrollbar { width: 6px; } .es-rail-scroll::-webkit-scrollbar-thumb { background: #d8d5cd; border-radius: 3px; } .es-rail-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); margin: 0.9rem 0 0.5rem; } .es-rail-toc { list-style: none; margin: 0; padding: 0; } .es-rail-toc li { margin: 0; } .es-rail-toc a { display: block; padding: 0.24rem 0.5rem 0.24rem 0.7rem; border-left: 2px solid var(--border); color: var(--muted); text-decoration: none; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .es-rail-toc a:hover { color: var(--accent); border-left-color: var(--accent); } .es-rail-toc a.es-current { color: var(--accent); font-weight: 700; border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); } .es-rail-toc .es-rail-sec > a { font-weight: 700; color: #3a3d42; margin-top: 0.45rem; white-space: normal; } .es-rail-card { flex: 0 0 auto; padding: 0.85rem 0.9rem; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 10px; background: var(--card); } .es-rail-card h4 { margin: 0 0 0.3rem; font-size: 0.88rem; } .es-rail-card p { margin: 0 0 0.6rem; font-size: 0.78rem; line-height: 1.65; color: var(--muted); } .es-rail-card .es-btn { display: flex; width: 100%; padding: 0.42rem 0.5rem; font-size: 0.82rem; } .es-rail-card .es-btn-sub { font-size: 0.64rem; } } /* ---------- 狭い画面 ---------- */ @media (max-width: 780px) { .es-hero { grid-template-columns: 1fr; padding: 1.2rem 1.1rem; } .es-hero-visual { max-width: 20rem; margin: 0 auto; } .es-page h1 { font-size: 1.5rem; } .es-page h1 br { display: none; } } @media (max-width: 640px) { .es-chapter-cta { margin-top: 2rem; padding: 1rem 0.95rem; } .es-table { font-size: 0.85rem; } .es-table th, .es-table td { padding: 0.5rem 0.3rem; } .es-table .es-st { width: auto; } .es-table .es-cont { white-space: normal; } .es-hero-actions .es-btn { flex: 1 1 100%; } .es-price-amount { font-size: 1.45rem; } } /* ---------- 参考書ルートページの中の演習セットカード ---------- */ .es-book-card { border-color: color-mix(in srgb, #8A6A1D 40%, var(--border)); background: radial-gradient(140% 140% at 100% 0%, color-mix(in srgb, #8A6A1D 8%, #fff) 0%, #fff 55%); } .es-book-card .book-cover-img { border-color: color-mix(in srgb, #8A6A1D 30%, var(--border)); } .es-book-card .book-cover-img img { object-position: top center; } .es-book-card .book-pub { color: #8A6A1D; } .es-book-card .book-buy-link.active { color: #fff; background: #8A6A1D; border-color: #8A6A1D; } .es-book-card .book-buy-link.active:hover { background: color-mix(in srgb, #8A6A1D 85%, #000); }