@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Oswald:wght@400;600;700&display=swap');

:root {
    --accent: #4caf50;
    --accent2: #81c784;
    --font-size-body: 0.92rem;
}

/* スクロールバーを地味に（既定の明るい色がダーク画面で目立つため） */
* {
    scrollbar-width: thin;                                   /* Firefox等 */
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }            /* Chrome/Edge/Safari */
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }
/* ライトモードは逆に暗い半透明で控えめに */
body.light-mode { scrollbar-color: rgba(0, 0, 0, 0.2) transparent; }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.32); }

body.dark-mode {
    --bg: #0a0c10;
    --bg2: #111520;
    --bg3: #1a1f2e;
    --text: #dde3f0;
    --text2: #b0bec5;
    --border: #2a3048;
    --label-bg: #1a2a1a;
    --label-color: #4caf50;
    --divider: #1565c0;   /* 画像下の区切り線：さらに濃い青 */
    --settings-bg: rgba(10,12,16,0.97);
    --placeholder-color: #2a3048;
    --link-field-bg: #0f1520;
    --link-field-color: #6cb6ff;
}

body.light-mode {
    --bg: #f5f5f0;
    --bg2: #ffffff;
    --bg3: #e8ede8;
    --text: #1a2010;
    --text2: #2a3a2a;
    --border: #b8c8b8;
    --label-bg: #2e7d32;
    --label-color: #ffffff;
    --divider: #1565c0;   /* 画像下の区切り線：試しに青（ライトモード）*/
    --settings-bg: rgba(245,245,240,0.97);
    --placeholder-color: #c8d8c8;
    --link-field-bg: #eaeeea;
    --link-field-color: #1558b0;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Noto Sans JP', sans-serif;
    height: 100dvh;   /* 古い端末向けフォールバック */
    /* ホーム画面アプリでは常に全画面。dvhは起動直後に誤って小さく計算され
       隙間が残ることがあるため、最大ビューポート基準のlvhで画面いっぱいに固定。 */
    height: 100lvh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    /* 下の隙間はホームバー安全領域の半分（コントローラー帯の約1/3）に。
       0だとホームバーに重なり、全量だと浮きすぎる。縦画面のみ。 */
    padding-bottom: calc(env(safe-area-inset-bottom) * 0.5);
    transition: background 0.3s, color 0.3s;
}
/* ブラウザで開いたとき（index.html が html に in-browser を付ける）：ブラウザの欄の下にもぐらないよう、見えている高さに */
html.in-browser body { height: 100dvh; }
/* iOS 26 以降の Safari（html に ios-float-bar）：浮いているアドレス欄は、100dvh にするだけで避けられた
   （2026-10-23 牧村さんのiPhoneで確認。88px 足すと空きすぎた）。足りない端末が出たら、ここで足す */

/* ==================== 入口画面 ==================== */
#entry-screen {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: env(safe-area-inset-top);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(76,175,80,0.03) 40px, rgba(76,175,80,0.03) 41px),
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(76,175,80,0.03) 40px, rgba(76,175,80,0.03) 41px);
}

.entry-emblem { font-size: 4rem; color: var(--accent); animation: pulse 2s ease-in-out infinite; }
/* スタート画面のタケル＆サクラ。画面高さの42%までに抑え、どの端末でも収める。 */
.entry-emblem-img {
    max-height: 38vh;
    max-width: 72vw;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35));
}
@keyframes pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.entry-title {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.2em;
    text-shadow: 0 0 30px rgba(76,175,80,0.4);
}

.entry-sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px;
}
.entry-sub-ja {
    font-size: 0.95rem;
    letter-spacing: 0.3em;
}
.entry-sub-en {
    margin-top: 4px;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    opacity: 0.8;
}

.entry-beta {
    margin-top: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--text2);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 14px;
}

.top-beta {
    text-align: center;
    margin-top: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--text2);
    opacity: 0.75;
}

/* 「アイコンにして使う」小さなリンク（インストール済みなら非表示） */
.top-install {
    display: block;
    margin: 8px auto 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: inherit;
    font-size: 0.8rem;
    border-radius: 999px;
    padding: 6px 16px;
    cursor: pointer;
}
.top-install:active { background: rgba(255,255,255,0.08); }
.guide-install-wrap { text-align: center; margin: 18px 0 6px; }

/* ご案内メニューの「方法（必読）」＝明るい色付きボタン */
.guide-install {
    border: none;
    background: linear-gradient(135deg, #2e7d32, #43a047);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 24px;
    box-shadow: 0 2px 12px rgba(67,160,71,0.4);
}
.guide-install:active { opacity: 0.9; background: linear-gradient(135deg, #2e7d32, #43a047); }

/* インストール手順の本文 */
.ins-note { color: var(--text2); font-size: 0.82rem; margin: 4px 0 12px; }
.ins-steps { margin: 4px 0 14px 1.2em; padding: 0; }
.ins-steps li { margin-bottom: 10px; line-height: 1.8; }
.ins-steps strong { color: var(--accent2); }
.ins-sub { color: var(--text2); font-size: 0.76rem; line-height: 1.7; margin-top: 4px; }
/* 手順の中に置くコピーボタン（Safariへ移るための最初の一歩） */
.ins-copy { margin: 8px 0 2px; }
.ins-copy button {
    background: var(--accent);
    border: none;
    color: #08140a;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: 6px;
    padding: 11px 20px;
    cursor: pointer;
}
.ins-copy button:active { opacity: 0.85; }
.install-now { margin: 18px 0 6px; display: flex; justify-content: center; }
.install-now button { background: var(--accent); border: none; color: #000; font-weight: 700;
    font-size: 1rem; border-radius: 8px; padding: 14px 28px; cursor: pointer; }
.install-now button:active { opacity: 0.85; }

#btn-enter {
    margin-top: 20px;
    /* 「学習」は身構えさせるので「スタート」に。角丸を端の半円まで回して
       やわらかい印象にする（左右の余白は文字が短くなったぶん厚めに） */
    padding: 12px 56px;
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.45rem;      /* 入口の一言なので、遠慮せず大きく */
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.15em;
}
#btn-enter:active { background: rgba(76,175,80,0.15); }

/* ==================== メインUI（縦向き） ==================== */
#main-ui {
    display: none;
    flex-direction: column;
    height: 100%;
    width: 100vw;
}

#image-area {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--bg2);
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    max-height: 42dvh;
}
/* メニュー階層のコンパクトバナーモード */
#image-area.menu-banner {
    aspect-ratio: unset;
    height: 14dvh;
    max-height: 14dvh;
}
#image-area.menu-banner #card-image {
    object-fit: cover;
    object-position: center top;
}

#card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
}
/* 完了画面のタケル＆サクラ。画像枠の中央に小さめに置く（カード図表より控えめ）。 */
#card-image.complete-mascot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 60%;
    max-height: 260px;
    object-fit: contain;
}

/* ==================== 図表の全画面表示 ==================== */
/* カード画面では図表をタップすると全画面で見られる。
   設定を開かずにその場で拡大できるようにするための入り口。 */
#img-zoom {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
#img-zoom img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.zoom-hint {
    position: absolute;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.74rem;
    color: rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 5px 15px;
    pointer-events: none;
    white-space: nowrap;
}
/* 拡大できることを示す、控えめな印 */
body:not(.menu-mode) #image-area.has-image { cursor: zoom-in; }
body:not(.menu-mode) #image-area.has-image::after {
    content: '⛶';
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 0.8rem;
    line-height: 1;
    color: rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 5px;
    padding: 4px 6px;
    pointer-events: none;
}

#image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--placeholder-color);
}

#divider-line {
    height: 3px;
    background: var(--divider);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(21,101,192,0.45);   /* グローもさらに濃い青に */
}

#content-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#text-view {
    flex: 1;
    overflow-y: auto;
    padding: 6px 4px;
    -webkit-overflow-scrolling: touch;
}

#card-progress {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-bottom: 1px;
}

.prog-unit {
    font-size: 0.75rem;   /* サブユニット名と同じ大きさに（0.62→0.75rem）*/
    color: #4a90d9;       /* ユニット名を青に */
    letter-spacing: 0.05em;
    line-height: 1.1;     /* 行間は従来のまま */
    margin-bottom: 1px;
}

/* 設定画面の断り書き（アクセス計測について） */
.settings-note {
    font-size: 0.7rem;
    line-height: 1.7;
    color: var(--text2);
    opacity: 0.75;
    margin: 14px 0 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* 進捗行：左に「サブユニット　3 / 16」、右端にカード番号 */
.prog-row {
    display: flex;
    align-items: center;
}

/* カード番号（ASAKA01 等）。ご意見フォームでカードを特定する手がかり。
   主役ではないので小さく薄く、行は増やさず右端に逃がす。
   em指定なので PC幅で進捗行が大きくなると一緒に大きくなる。 */
.card-code {
    margin-left: auto;
    padding-left: 8px;
    font-size: 0.88em;
    color: var(--text2);
    opacity: 0.7;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

#card-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

#card-body {
    font-size: var(--font-size-body);
    line-height: 1.85;
    color: var(--text);
    white-space: pre-wrap;
    font-family: 'Noto Sans JP', sans-serif;
}
/* 登録案内画面 */
.reg-text { white-space: normal; font-size: 0.95rem; line-height: 1.9; }
.reg-email { margin: 14px auto; padding: 10px 14px; max-width: 22em; background: var(--bg3);
             border-radius: 6px; font-weight: bold; color: var(--accent2); text-align: center; word-break: break-all; }
.reg-gbtn { margin: 22px 0 8px; display: flex; justify-content: center; }
.reg-status { text-align: center; font-size: 0.85rem; color: var(--text2); min-height: 1.2em; margin-top: 6px; }
.reg-privacy { margin-top: 18px; font-size: 0.78rem; color: var(--text2); text-align: center; }
.reg-privacy a { color: #6db3f2; }
.reg-actions { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.reg-logout, .reg-unreg { background: transparent; border: 1px solid var(--border); color: var(--text2);
              padding: 8px 18px; border-radius: 5px; cursor: pointer; font-family: inherit; font-size: 0.85rem; }
.reg-unreg { border-color: rgba(200,90,90,.5); color: #e08a8a; }
.reg-loading { font-size: 0.85rem; color: var(--text2); }
/* アプリ内プライバシー方針 */
.reg-priv-doc { white-space: normal; font-size: 0.86rem; line-height: 1.85; }
.reg-priv-doc p { margin-bottom: 12px; }
.reg-priv-doc strong { color: var(--accent2); }
.reg-priv-doc a { color: #6db3f2; }
.reg-priv-note { color: var(--text2); font-size: 0.78rem; }

/* 登録画面の「メニューに戻る」 */
.reg-back { margin-top: 30px; text-align: center; }
.reg-backbtn { background: var(--accent); border: none; color: #000; font-weight: 700;
               padding: 10px 26px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 0.9rem; }
.reg-backbtn:active { opacity: 0.85; }

/* 本文中のリンク */
#card-body a {
    color: #6db3f2;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;   /* 長いURLでもはみ出さない */
}
#card-body a:active { opacity: 0.7; }

#menu-view {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#menu-content { padding-bottom: 10px; }

.menu-label {
    background: var(--label-bg);
    color: var(--label-color);
    padding: 6px 14px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    font-family: 'Oswald', sans-serif;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    height: 28px;
    line-height: 16px;
}

.menu-item {
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans JP', sans-serif;
}

.item-dot {
    font-size: 0.55rem;
    color: var(--accent);
    opacity: 0.8;
    flex-shrink: 0;
    line-height: 1;
}
.menu-item:active { background: var(--bg3); }
.menu-item.active-item {
    background: rgba(76,175,80,0.15);
    color: var(--accent2);
    border-left: 3px solid var(--accent);
}

/* ==================== トップメニューボタン ==================== */
.top-menu-wrap {
    padding: 28px 10% 14px;   /* 上を倍（14→28px）に */
    display: flex;
    flex-direction: column;
    gap: 9px;
}
/* 「受講」の下だけ間隔を6割増（gap 9px + 5px ≈ 1.6倍） */
.top-menu-wrap .btn-jukou { margin-bottom: 5px; }

/* 最終行：受験案内＋使い方の横並び */
.top-btn-row {
    display: flex;
    gap: 8px;
}
.top-btn-row .btn-exam { flex: 2; }
.top-btn-row .btn-howto { flex: 1; }

.top-btn {
    width: 100%;
    height: 50px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.0rem;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-btn:active { opacity: 0.8; transform: scale(0.98); }

.btn-jukou   { background: linear-gradient(135deg, #1a3a1a, #2e7d32); border-color: #4caf50; }
.btn-freestudy { background: linear-gradient(135deg, #1a2a3a, #1565c0); border-color: #2196f3; }
.btn-news    { background: linear-gradient(135deg, #2a2a1a, #f57f17); border-color: #ffc107; }
.btn-links   { background: linear-gradient(135deg, #1a2a3a, #00695c); border-color: #26a69a; }
.btn-exam    { background: linear-gradient(135deg, #3a1a1a, #b71c1c); border-color: #f44336; }
.btn-howto   { background: linear-gradient(135deg, #2a2a3a, #4a4a6a); border-color: #7a7aaa; font-size: 0.85rem; }
.btn-guide   { background: linear-gradient(135deg, #3a1a1a, #b71c1c); border-color: #f44336; }  /* 受験案内と同じ落ち着いた赤 */
/* ご案内は少し幅を狭めて中央寄せ（他ボタンより控えめな主張） */
.top-menu-wrap .btn-guide { align-self: center; width: 84%; margin-bottom: 5px; }

/* ==================== サブメニュー共通構造（看板＋子パネル） ==================== */
.sub-menu-wrap {
    padding: 24px 12px 8px;   /* 受講パネルと画像の間を3倍（8→24px）に */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 看板：タップ無効 */
.banner-btn {
    cursor: default !important;
    pointer-events: none;
}
.banner-btn:active {
    opacity: 1 !important;
    transform: none !important;
}

/* 子パネル群：看板より左右4px絞る */
.sub-panel-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 4px;
    margin-top: 12px;
}

/* 上部見出し帯：看板と見出しを1枚の不透明ブロックにまとめて固定する。
   個々の要素を別々に sticky にすると、間の隙間や左右の余白が透けて
   下のメニューが見えてしまうため、まとめて背景を敷いた帯ごと固定する。 */
.sticky-head {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--bg);
    padding-bottom: 6px;
}

/* ==================== 2枚看板（2層目用） ==================== */
/* 左右8%で下のジャンルボタン(.genre-list-wrap)と同じ幅に揃える。gapを1/3に。 */
.double-banner-wrap {
    padding: 10px 8% 0;
    display: flex;
    gap: 3px;
}
/* カード一覧の2枚看板もテーマ一覧と同じ形（第一画面に合わせる） */
.banner-xs-wrap { padding: 10px 8% 0; }

/* ご案内は1枚看板（級・科目の選択が無いので看板は「ご案内」1枚） */
.single-banner-wrap { padding: 10px 8% 0; display: flex; }
.single-banner-wrap > * { flex: 1; }
.banner-btn.btn-guide { border-width: 2px !important; border-color: #f44336 !important; }

/* 2枚看板内のボタン：高さ・flex比率 */
.banner-small,
.banner-xs {
    height: 48px !important;
    font-size: 0.85rem !important;
    min-height: unset !important;
    padding: 0 8px !important;
}
/* 受講(1):科目名(3) の幅比率 */
.double-banner-wrap > :first-child { flex: 1 !important; }
.double-banner-wrap > :last-child  { flex: 3 !important; }
/* 自由研究は看板名が長い（🔬 自由研究）ので左を広めに。右（著者名/テーマ名）は余裕がある */
.double-banner-wrap > .btn-freestudy:first-child { flex: 1.6 !important; }
.double-banner-wrap > .btn-freestudy:first-child + * { flex: 2.4 !important; }
/* 看板は1行で収める（折り返して2行になると48pxの中で窮屈になる） */
.banner-btn.btn-freestudy { white-space: nowrap; }
.banner-btn.btn-links { white-space: nowrap; }
/* リンク集も看板名が長い（🔗 リンク集）ので左を広めに。右のジャンル名は余裕がある */
.double-banner-wrap > .btn-links:first-child { flex: 1.5 !important; }
.double-banner-wrap > .btn-links:first-child + * { flex: 2.5 !important; }

/* 自由研究の見出しに付く「テーマ」バッジ。タイトル本体と区別を付ける */
.theme-tag {
    flex-shrink: 0;
    margin-right: 5px;
    padding: 1px 4px;
    border: 1px solid rgba(255,214,64,0.75);
    border-radius: 4px;
    background: rgba(0,0,0,0.28);
    color: #ffd740;              /* タイトル（白）と区別が付く黄色 */
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;           /* 字間を詰めて幅を稼ぐ */
    line-height: 1.4;
}
/* 受講看板だけ縁取りを太く・緑寄りの黄緑に */
.banner-btn.btn-jukou {
    border-width: 2px !important;
    border-color: #8bc34a !important;
}

/* ==================== 級選択パネル ==================== */
.grade-btn {
    width: 100%;
    height: 60px;
    border-radius: 6px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.grade-btn:active { opacity: 0.8; transform: scale(0.98); }
.grade-btn .grade-sub { font-size: 0.78rem; font-weight: normal; opacity: 0.8; }

.btn-grade1 { background: linear-gradient(135deg, #7f0000, #c62828); border: 1px solid #ef5350; color: #fff; }
.btn-grade2 { background: linear-gradient(135deg, #1a237e, #283593); border: 1px solid #5c6bc0; color: #fff; }
.btn-grade3 { background: linear-gradient(135deg, #1b5e20, #2e7d32); border: 1px solid #4caf50; color: #fff; }
.btn-coming { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); opacity: 0.68; }

/* ==================== 受講メニュー・グリッドレイアウト ==================== */
.grade-label {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    padding: 7px 8px;
    border-radius: 4px;
    margin-top: 5px;
    text-align: center;
}
.grade-label-1 { color: #ff9a9a; border: 1px solid #c62828; background: rgba(198,40,40,0.25); }
.grade-label-2 { color: #b0bdf8; border: 1px solid #3949ab; background: rgba(57,73,171,0.25); }
.grade-label-3 { color: #b5f0b8; border: 1px solid #2e7d32; background: rgba(46,125,50,0.25); }

.subject-row {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}

.subject-btn {
    flex: 1;
    height: 80px;
    border-radius: 6px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--border);
    color: #fff;
}
.subject-btn:active { opacity: 0.8; transform: scale(0.97); }
.subject-btn.btn-grade3 {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    border-color: #4caf50;
}
.subject-btn.btn-coming {
    background: var(--bg3);
    border-color: var(--border);
    color: var(--text2);
    opacity: 0.65;
    cursor: default;
}
/* 作成中の科目ボタン。押せる（中に入るとユニット名まで見せる）。grade3より抑えた緑。 */
.subject-btn.btn-preview {
    background: linear-gradient(135deg, #123d18, #1a4d20);
    border-color: #2e7d32;
    color: #d2e4d2;
    opacity: 0.9;
}

/* ==================== ジャンルパネル見出し（テーマ一覧・カード一覧ヘッダー） ==================== */
.genre-panel-label {
    background: linear-gradient(135deg, #162338, #1c3260);
    border: 1px solid rgba(90,160,230,0.55);
    color: #bdd4f5;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    pointer-events: none;   /* 見出し自体は押せない */
}
/* ただし中の ◀▶ ボタンはクリックできるように戻す */
.genre-nav-btn { pointer-events: auto; }
/* テーマ一覧ラベル：緑（受講と同色系）。固定は親の .sticky-head が担う */
.genre-panel-label.label-section {
    min-height: 34px;
    border-radius: 8px;
    margin: 4px 8% 0;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #1a3a1a, #2e7d32);
    border-color: #4caf50;
    color: #fff;
}
/* テーマバッジ付きの見出し（自由研究）は、長いタイトルの折り返しに備えて余白を調整 */
.genre-panel-label.label-theme {
    /* タイトルは講座の顔なので、左右の余白を削って1行に収まる幅を稼ぐ */
    margin-left: 5%;
    margin-right: 5%;
    padding: 5px 9px;
    line-height: 1.5;
    min-height: 42px;   /* 主役なので看板と同じ高さに */
}
/* 自由研究の看板行は、下のテーマ見出し（5%）と左右を揃えて段差をなくす */
.single-banner-wrap.free-wrap,
.double-banner-wrap.free-wrap { padding-left: 5%; padding-right: 5%; }
/* 看板は少し低く、テーマ見出しは高く。主役はテーマ名なので上下幅を揃える
   （文字の大きさは変えない） */
.free-wrap .banner-small { height: 42px !important; }

/* 押すと第1話が始まる見出し。親の pointer-events:none を打ち消して押せるようにする */
.genre-panel-label.theme-start {
    pointer-events: auto;
    cursor: pointer;
}
.genre-panel-label.theme-start:active { filter: brightness(1.25); }
/* タイトルは1行に収める。狭い端末では文字を少しだけ詰めて折り返しを防ぐ */
.theme-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 400px) {
    .genre-panel-label.label-theme { font-size: 0.84rem; }
}
.theme-go {
    flex-shrink: 0;
    margin-left: 5px;
    font-size: 0.8rem;
    color: #ffd740;
    opacity: 0.95;
    white-space: nowrap;
}
/* カード一覧上部の現在ジャンル表示：前画面で押した genre-btn がそのまま見出しに */
.genre-panel-label.label-genre-header {
    min-height: 40px;
    border-radius: 8px;
    margin: 8px 8% 0;
    width: auto;
    padding: 0 4px;   /* 端の◀▶ボタン用に左右を詰める */
}
/* ジャンル名を中央、◀▶を両端に。押すと同じ科目内の別テーマへ横移動 */
.genre-nav-name { flex: 1; text-align: center; padding: 0 4px; }
.genre-nav-btn {
    flex-shrink: 0;
    width: 34px;
    min-height: 30px;
    align-self: stretch;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(90,160,230,0.4);
    border-radius: 6px;
    color: #bdd4f5;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.genre-nav-btn:active { background: rgba(255,255,255,0.16); }
.genre-nav-btn:disabled { opacity: 0.28; cursor: default; }
.light-mode .genre-nav-btn { border-color: rgba(50,110,200,0.4); color: #1a3a72; }
.light-mode .genre-panel-label {
    background: linear-gradient(135deg, #deeaf8, #c8dbf2);
    border-color: rgba(50,110,200,0.45);
    color: #1a3a72;
}

/* ==================== ジャンル選択ボタン（第一階層） ==================== */
.genre-list-wrap {
    padding: 10px 8%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.genre-btn {
    width: 100%;
    min-height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #162338, #1c3260);
    border: 1px solid rgba(90,160,230,0.55);
    font-family: 'Noto Sans JP', sans-serif;
    color: #bdd4f5;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.genre-btn::after {
    content: '▶';
    font-size: 0.65rem;
    opacity: 0.6;
    flex-shrink: 0;
}
.genre-btn:hover {
    background: linear-gradient(135deg, #1c2e4a, #223870);
    border-color: rgba(120,185,255,0.75);
    color: #d8eaff;
}
.genre-btn:active { opacity: 0.8; transform: scale(0.98); }
/* 公開カードのないジャンルの暗色表示（1級/2級と同じ扱い）。
   .genre-btn の後に置き、同じ暗色トークンで確実に上書きする。 */
.genre-btn.btn-coming {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text2);
    opacity: 0.6;
    cursor: default;
}
.genre-btn.btn-coming::after { content: none; }   /* 進める印(▶)は消す */

/* 作成中のユニット（テーマ）タイル。名前は見せるが押せない。右端に「作成中」バッジ。
   .genre-btn の hover/coming より後に置き、同特異度でも確実に勝たせる。 */
.genre-btn.btn-preview {
    background: linear-gradient(135deg, #17331c, #1e4d26);
    border: 1px solid #2e7d32;
    color: #a9c49a;
    opacity: 0.92;
    cursor: default;
}
.genre-btn.btn-preview:hover {   /* hoverでも変化させない（押せないため） */
    background: linear-gradient(135deg, #17331c, #1e4d26);
    border-color: #2e7d32;
    color: #a9c49a;
}
.genre-btn.btn-preview::after { content: none; }   /* 進める印(▶)は出さない */
.wip-tag {
    font-size: 0.62rem;
    font-weight: normal;
    letter-spacing: 0.04em;
    color: #d7e6cf;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(120,170,110,0.5);
    border-radius: 3px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.light-mode .genre-btn {
    background: linear-gradient(135deg, #deeaf8, #c8dbf2);
    border-color: rgba(50,110,200,0.45);
    color: #1a3a72;
}
.light-mode .genre-btn:hover {
    background: linear-gradient(135deg, #ccddf5, #b8cceb);
    border-color: rgba(50,110,200,0.65);
}

/* ==================== リンク集ジャンルパネル ==================== */
.link-genre-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 6px;
    background: linear-gradient(135deg, #1a2530, #1e3a4a);
    border: 1px solid #2a6a7a;
    font-family: 'Noto Sans JP', sans-serif;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    gap: 8px;
}
.link-genre-btn:active { opacity: 0.8; transform: scale(0.98); }

.link-genre-name {
    font-size: 1.0rem;
    font-weight: bold;
    text-align: left;
    flex: 1;
}

.link-genre-count {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    opacity: 0.8;
    flex-shrink: 0;
}

/* ==================== リンク一覧 ==================== */
.section-header {
    padding: 3px 14px;               /* 行の高さを約15%減（上下6→3px。文字はそのまま）*/
    font-size: 0.9rem;
    line-height: 1.2;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.08em;
    background: var(--label-bg);
    color: var(--label-color);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 112px;                      /* sticky-head（看板58+見出し48+余白6）の下に貼り付く */
    z-index: 9;
}

.link-field-header {
    padding: 5px 14px;
    font-size: 0.75rem;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.08em;
    background: var(--link-field-bg);
    color: var(--link-field-color);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 9;
}

.link-item { justify-content: space-between; }

.link-name {
    flex: 1;
    font-size: 1.0rem;
}

.link-arrow {
    font-size: 0.8rem;
    color: var(--accent);
    opacity: 0.7;
    flex-shrink: 0;
    margin-left: 4px;
}

.link-badge {
    font-size: 0.65rem;
    font-family: 'Oswald', sans-serif;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}
.badge-jp  { background: rgba(76,175,80,0.2); color: var(--accent); border: 1px solid var(--accent); }
.badge-pdf { background: rgba(244,67,54,0.15); color: #ef9a9a; border: 1px solid #e57373; }

/* ==================== ニュース・お知らせ ==================== */
.news-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 14px 4px;
}
.news-tab {
    flex: 1;
    padding: 9px 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text2);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
}
/* 選ばれていないタブも「押せる」と分かるように、縁と文字を明るめに（2026-10-30 牧村さん） */
body.dark-mode .news-tab:not(.active) { border-color: #7a8bb0; color: #dde3f0; }
body.light-mode .news-tab:not(.active) { border-color: #6f8a6f; }
.news-tab.active {
    background: linear-gradient(135deg, #2a2a1a, #f57f17);
    border-color: #ffc107;
    color: #fff;
    font-weight: 700;
}
.news-item { justify-content: flex-start; }
.news-date {
    font-size: 0.78rem;
    color: var(--text2);
    opacity: 0.85;
    flex-shrink: 0;
    min-width: 3.4em;
    font-variant-numeric: tabular-nums;
}
.news-title { flex: 1; font-size: 1.0rem; color: var(--text); }

/* ニュース一覧の末尾に置く出所表記 */
.news-source-foot {
    text-align: center;
    padding: 18px 12px 10px;
    font-size: 0.74rem;
    color: var(--text2);
    opacity: 0.85;
}


/* 時間の層の見出し（今週／先週／1ヶ月前まで／3ヶ月のまとめ）。右に期間を添える */
.news-band {
    margin: 6px 0 0;
    padding: 7px 16px;
    background: var(--bg3);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.nb-label { color: var(--accent2); font-size: 0.82rem; letter-spacing: 0.08em; font-weight: 700; }
.nb-range { color: var(--text2); font-size: 0.72rem; font-variant-numeric: tabular-nums; margin-left: auto; }
/* 押すと閉じる層の見出し */
.news-band-btn { cursor: pointer; }
.news-band-btn:active { background: rgba(255,255,255,0.06); }
.nb-fold { color: var(--text2); font-size: 0.68rem; opacity: 0.8; flex-shrink: 0; margin-left: 12px; }
/* 3ヶ月は別建てなので、上に区切りを置いて他のボタンと分ける */
.news-more-sep { margin-top: 6px; border-color: var(--accent2); color: var(--accent2); }

/* さらに過去の層を開くボタン */
.news-more { text-align: center; padding: 16px 0 8px; }
.news-more-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.82rem;
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
}
.news-more-btn:active { background: rgba(255,255,255,0.08); }
/* ダイジェスト末尾の出典表記 */
.news-source {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.76rem;
    color: var(--text2);
    line-height: 1.7;
}

.news-empty, .news-coming {
    padding: 40px 20px;
    text-align: center;
    color: var(--text2);
    font-size: 0.92rem;
    line-height: 1.9;
}
/* ==================== 自由研究 ==================== */
.free-tabs { padding: 8px 14px 6px; }
/* テーマ一覧のボタンに件数を小さく添える */
.free-theme { position: relative; }
.free-theme-count {
    margin-left: 8px;
    font-size: 0.72rem;
    color: var(--text2);
    opacity: 0.85;
}
.free-unit-name { flex: 1; }
.free-unit-author {
    font-size: 0.75rem;
    color: var(--text2);
    opacity: 0.85;
    flex-shrink: 0;
    margin-left: 8px;
}
/* カード本文末尾のPDFダウンロード */
.card-pdf { margin-top: 26px; text-align: center; }
.card-pdf a {
    display: inline-block;
    background: rgba(76,175,80,0.12);
    border: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 6px;
    padding: 11px 22px;
}
.card-pdf a:active { opacity: 0.85; }

/* 内蔵ブラウザ（LINE等）で開いたときの外部ブラウザ案内バナー */
.inapp-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    flex-wrap: wrap;          /* 文章が長い・ボタンが2つのときは折り返す */
    gap: 8px 10px;
    padding: 10px 12px;
    background: #14261a;
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    max-height: 60vh;
    overflow-y: auto;
}
.inapp-banner .iab-text { min-width: 200px; }
.inapp-banner .iab-actions { margin-left: auto; }
.iab-text { flex: 1; font-size: 0.8rem; line-height: 1.5; color: #e6f0e6; }
.iab-how { display: block; margin-top: 2px; font-size: 0.72rem; color: #9aa4b2; }
.iab-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.iab-btn {
    background: var(--accent);
    border: none;
    color: #08140a;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 6px;
    padding: 9px 13px;
    cursor: pointer;
    white-space: nowrap;
}
.iab-btn:active { opacity: 0.85; }
/* 「くわしく」は副次的な選択肢なので枠線だけの控えめな見た目に */
.iab-btn2 {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 6px;
    padding: 8px 11px;
    cursor: pointer;
    white-space: nowrap;
}
.iab-btn2:active { background: rgba(76,175,80,0.15); }
.iab-close {
    background: transparent;
    border: none;
    color: #9aa4b2;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
}

/* トップメニューの📰に付く新着の赤い● */
.news-badge {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff5252;
    margin-left: 8px;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(255,82,82,0.8);
}

.card-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-family: 'Oswald', sans-serif;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
.badge-fact { background: rgba(255,160,0,0.15); color: #ffb74d; border: 1px solid #ffa726; }
.badge-com  { background: rgba(33,150,243,0.15); color: #64b5f6; border: 1px solid #42a5f5; }

.link-coming { opacity: 0.3; cursor: default; }
.link-coming:active { background: transparent; }

/* ==================== 音声警告オーバーレイ ==================== */
#voice-warning {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.92);
    border: 1px solid #4a5a7a;
    border-radius: 8px;
    color: #b0bec5;
    font-size: 0.85rem;
    padding: 10px 16px;
    text-align: center;
    z-index: 6000;
    display: none;
    white-space: nowrap;
    line-height: 1.6;
    cursor: pointer;
}

/* ==================== 下部コントロール（縦向き） ==================== */
#controls {
    height: 54px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 0.7fr 0.7fr 0.85fr 0.85fr 1.4fr;   /* 右端の「🔊 聴く」を横並びで収める */
    gap: 3px;
    padding: 4px 4px 3px 4px;
    flex-shrink: 0;
}

.ctrl-btn {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: 4px;
    font-family: 'Noto Sans JP', sans-serif;
    /* 長押ししたときにボタンの文字（▶など）が選択されて青くなったり、
       コピーメニューが出るのを抑止する（連続再生の長押しを邪魔しない）*/
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ctrl-btn:active { background: rgba(76,175,80,0.15); color: var(--accent); }

/* TOPボタン */
.btn-home {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* ▲ 上層メニューへ */
.btn-up {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;         /* ▲とMENUの間にわずかに隙間 */
    line-height: 1.05;
}
.btn-up .btn-sub-label {
    font-size: 0.78rem;   /* MENUをさらに一回り大きく（0.66→0.78rem）*/
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.06em;
    opacity: 0.75;
    font-weight: normal;
}

/* ◀ ▶ 矢印ボタン共通 */
.btn-arrow {
    font-size: 1.2rem;
    font-weight: bold;
}

/* ▶ は強調 */
.btn-next {
    background: rgba(76,175,80,0.2);
    border-color: var(--accent);
    color: var(--accent2);
}
.btn-next:active { background: rgba(76,175,80,0.4); }
/* 連続再生モード中（青） */
/* 連続再生モード：音声ボタンが青く光る（脈動） */
#btn-voice.voice-auto {
    background: rgba(74,144,217,0.45);
    border-color: #4a90d9;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(74,144,217,0.5);
    animation: autoAdv-pulse 1.8s ease-in-out infinite;
}
@keyframes autoAdv-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(74,144,217,0.4); }
    50%       { box-shadow: 0 0 20px rgba(74,144,217,0.85); }
}

/* ◀ が CARD になったとき */
#btn-back.btn-card-mode {
    background: rgba(76,175,80,0.1);
    border-color: rgba(76,175,80,0.5);
    color: var(--accent2);
    font-size: 0.68rem;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.06em;
    font-weight: 600;
}
#btn-back:disabled {
    opacity: 0.3;
    cursor: default;
}

/* 音声ボタン */
/* 読み上げボタン。機能に気づかれにくかったので、押す前から色を付けて目立たせる。
   MENUボタンと同じ「記号＋小さな文字」の縦積みに揃える。 */
.btn-voice-ctrl {
    flex-direction: row;      /* アイコンと文字を横に並べる */
    gap: 5px;
    font-size: 1.0rem;
    line-height: 1.1;
    font-family: 'Noto Sans JP', sans-serif;
    background: rgba(76,175,80,0.16);
    border-color: rgba(76,175,80,0.65);
    color: var(--accent);
}
.btn-voice-ctrl .btn-sub-label {
    font-size: 0.95rem;       /* 「聴く」をしっかり読める大きさに */
    letter-spacing: 0.04em;
    opacity: 1;
    font-weight: 700;
}
#btn-voice.playing {
    background: rgba(76,175,80,0.2);
    border-color: var(--accent);
    color: var(--accent);
}
/* 読上ONモード */
#btn-voice.voice-on {
    background: rgba(76,175,80,0.28);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: bold;
}

/* ==================== 横向き対応（スマホを横に倒したとき専用） ====================
   max-height を付けて「画面の高さが低い＝スマホ横向き」に限定する。
   これが無いとパソコン（横長）もここに入ってしまい、画像が巨大化していた。
   パソコン向けのレイアウトは後段の「パソコン対応」で別途指定する。 */
/* 縦の低い画面（低解像度PCやノートPC。例800×600・1024×768・1366×768）では、
   画像パネルを画面高さの42%までに抑えてメニューが必ず見えるようにする。
   スマホ横向きの横並びレイアウトは max-height:none !important で守られるので不干渉。
   :not(.menu-banner) と併せて特異度でPC/タブレットの54lvh指定に勝たせる。 */
@media (max-height: 800px) {
    #image-area:not(.menu-banner) { max-height: 42dvh; }
}

/* スマホ横向き用の横並びレイアウト。ただし「本当に横に広い」画面だけに限定する。
   4:3や正方形寄りの低解像度画面（例800×600）だと画像が横幅を食い尽くして
   メニューが画面外に出てしまうため、min-aspect-ratio で除外する。 */
@media (orientation: landscape) and (max-height: 600px) and (min-aspect-ratio: 3 / 2) {
    body { padding-top: 0; padding-bottom: 0; }

    #main-ui {
        flex-direction: row !important;
        height: 100dvh;
        align-items: stretch;
    }

    #image-area {
        height: 100dvh !important;
        width: calc(100dvh * 4 / 3 + env(safe-area-inset-left)) !important;
        max-height: none !important;
        aspect-ratio: unset !important;
        flex-shrink: 0;
        border-right: 3px solid var(--divider);
        border-bottom: none;
        padding-left: env(safe-area-inset-left);
    }

    #card-image { object-fit: contain; width: 100%; height: 100%; display: block; }
    #divider-line { display: none; }

    #content-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
    }

    #controls {
        width: 50px !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        grid-template-columns: unset !important;
        padding: 4px 3px 4px 2px !important;
        border-top: none !important;
        border-left: 1px solid var(--border) !important;
        flex-shrink: 0;
        gap: 3px;
        order: 1;
    }

    .ctrl-btn {
        flex: 1 !important;
        font-size: 0.6rem !important;
        min-height: 0;
        width: 100%;
    }

    .btn-up, .btn-arrow, .btn-next {
        font-size: 1.0rem !important;
    }
    #btn-back.btn-card-mode {
        font-size: 0.62rem !important;
    }
    .btn-next { flex: 1.2 !important; }
}

/* ==================== 設定ボタン ==================== */
#btn-settings {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(76,175,80,0.2);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 5000;
    display: none;
}

/* ==================== 設定パネル ==================== */
#settings-panel {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#settings-content {
    background: var(--settings-bg);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 24px;
    width: 85vw;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-align: center;
}

.settings-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text2);
}

.toggle-group { display: flex; gap: 6px; }

.toggle-btn {
    flex: 1;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text2);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
}
.toggle-btn.active {
    background: rgba(76,175,80,0.2);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: bold;
}

#btn-settings-close {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ==================== 設定：アプリの更新 ==================== */
.settings-update { border-top: 1px solid var(--border); padding-top: 12px; }
.update-controls { display: flex; flex-direction: column; gap: 7px; }
.update-btn {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background: rgba(76,175,80,0.15);
    color: var(--accent);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.92rem;
    font-weight: bold;
    cursor: pointer;
}
.update-btn:active { opacity: 0.8; }
.update-status {
    font-size: 0.78rem;
    color: var(--text2);
    text-align: center;
    min-height: 1.2em;
}
.reset-link {
    background: none;
    border: none;
    color: var(--text2);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.72rem;
    text-decoration: underline;
    opacity: 0.7;
    cursor: pointer;
    padding: 2px;
}
.reset-link:active { opacity: 1; }

.ver {
    position: fixed;
    bottom: 4px;
    right: 8px;
    font-size: 9px;
    color: #333;
    pointer-events: none;
    z-index: 10000;
    font-family: 'Oswald', sans-serif;
}

body.font-small #card-body { font-size: 0.82rem; }
body.font-medium #card-body { font-size: 0.92rem; }
body.font-large #card-body { font-size: 1.05rem; }

/* ==================================================================
   パソコン対応（幅900px以上）
   スマホの指定には一切触れず、広い画面のときだけ上書きする。
   既定：タブレット／A4のような縦長の紙面を中央に置く
   切替：body.pc-wide で図表重視のワイド表示
   ================================================================== */
@media (min-width: 900px) {

    /* 背景：紙面を浮かせるための下地 */
    body {
        padding: 0;
        background:
            radial-gradient(1200px 700px at 50% -10%, #14203a 0%, transparent 60%),
            var(--bg);
        align-items: center;
        justify-content: center;
    }
    body.light-mode {
        background:
            radial-gradient(1200px 700px at 50% -10%, #dfe8dd 0%, transparent 60%),
            var(--bg);
    }

    /* ---- 既定：タブレット／A4的な紙面を中央に ---- */
    #main-ui {
        width: min(880px, 96vw);
        height: min(1180px, 100lvh);      /* A4に近い縦長。画面が低ければ画面なり */
        max-height: 100lvh;
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 24px 70px rgba(0,0,0,.5);
        background: var(--bg2);
    }
    body.light-mode #main-ui { box-shadow: 0 24px 70px rgba(0,0,0,.18); }

    /* 図表：紙面の幅を使い切れるところまで広げる。
       4:3なので、幅880pxいっぱいに出すには高さ660pxが要る。
       画面が低いときは本文・メニューが潰れないよう頭打ちにする。
       1920×1080でもトップメニューがスクロールせず収まるよう 50lvh/600px に抑える。
       （図表を大きくしたいなら上げる／本文・メニューを確保したいなら下げる） */
    #image-area { max-height: min(50lvh, 600px); }

    /* 本文：読みやすい幅と大きさに */
    #text-view { padding: 18px 34px 22px; }
    #card-body { line-height: 1.95; }
    body.font-small  #card-body { font-size: 0.95rem; }
    body.font-medium #card-body { font-size: 1.06rem; }
    body.font-large  #card-body { font-size: 1.2rem; }
    #card-title { font-size: 1.28rem; }
    #card-progress { font-size: 0.85rem; }
    .prog-unit { font-size: 0.85rem; }

    /* コントローラー：マウス向けに大きく */
    #controls { height: 64px; gap: 6px; padding: 7px 10px 8px; }
    .ctrl-btn { font-size: 0.9rem; cursor: pointer; transition: background .15s, border-color .15s; }
    .btn-up { font-size: 1.3rem; }
    .btn-up .btn-sub-label { font-size: 0.7rem; }
    .btn-arrow { font-size: 1.4rem; }

    /* ---- メニュー ---- */
    .top-menu-wrap { padding: 24px 12% 14px; }   /* 上下の余白を詰めてトップメニューを収める */
    .top-btn { height: 58px; font-size: 1.05rem; }

    /* サブメニューのバナーは4:1の画像なので、高さを比率に任せて全体を見せる。
       高さ固定だと下が切れて「MSアカデミー」の文字が消えていた。 */
    #image-area.menu-banner { aspect-ratio: 4 / 1; height: auto; max-height: none; }

    /* テーマ一覧は1列。左右は上の看板・見出しと同じ8%に揃える */
    .genre-list-wrap { padding: 12px 8%; gap: 8px; }
    .genre-btn { min-height: 52px; }

    /* カード一覧は1列。ブロックごと中央に置き、中身は左そろえ（読みやすさ優先）。
       2段組は視線が左右に飛んで読みにくかったため、縦一本の流れに変更。 */
    .card-list-body {
        max-width: 560px;
        margin: 0 auto;
        padding: 4px 0 10px;
    }
    .card-list-body .menu-item { justify-content: flex-start; text-align: left; padding-left: 26px; }
    .card-list-body .section-header { text-align: left; position: static; padding-left: 20px; }

    /* 級・科目パネル：上に寄って下が空くので、縦方向の中央に置く */
    .sub-menu-wrap {
        padding: 20px 8%;
        min-height: 100%;
        justify-content: center;
    }
    .subject-btn { height: 92px; font-size: 0.92rem; }
    .grade-label { font-size: 0.95rem; }

    /* 設定の「画面レイアウト」欄はパソコンでだけ出す */
    .settings-layout { display: flex !important; }
}

/* ---- 切替：ワイド表示（図表を大きく見たいとき） ---- */
@media (min-width: 900px) {
    body.pc-wide #main-ui {
        width: 100vw; height: 100lvh; max-height: 100lvh;
        border: none; border-radius: 0; box-shadow: none;
        flex-direction: row; align-items: stretch;
    }
    /* 図表を主役に：左に大きく */
    body.pc-wide #image-area {
        flex: 1.55;
        height: auto; max-height: none;
        aspect-ratio: unset;
        border-right: 3px solid var(--divider);
        min-width: 0;
    }
    body.pc-wide #image-area.menu-banner { flex: none; width: 100%; height: 14lvh; max-height: 14lvh; }
    body.pc-wide #divider-line { display: none; }
    body.pc-wide #content-area { flex: 1; min-width: 0; max-width: 620px; }
    body.pc-wide #controls { height: 64px; }

    /* メニュー画面はワイドでも紙面型（横並びだと間延びするため） */
    body.pc-wide.menu-mode #main-ui { flex-direction: column; }
    body.pc-wide.menu-mode #image-area { flex: none; }
    body.pc-wide.menu-mode #content-area { max-width: none; }
    body.pc-wide.menu-mode #divider-line { display: block; }
    body.pc-wide .genre-list-wrap { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- hover はマウスがある環境だけ ----
   タッチ画面（iPad等）では、タップ後に反応が残り続けるため適用しない。 */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .ctrl-btn:hover:not(:disabled) { background: var(--bg2); border-color: var(--accent); color: var(--accent); }
    .menu-item:hover { background: var(--bg3); cursor: pointer; }
    .subject-btn:hover:not(:disabled) { filter: brightness(1.18); }
    .genre-btn:hover, .top-btn:hover { filter: brightness(1.15); }
}

/* ==================================================================
   タブレット縦向き（幅600〜899px：iPad mini/無印/Air/Pro11 の縦）
   パソコン指定（900px以上）から漏れ、スマホ表示が横に伸びて
   本文が1行56文字ほどになり読みにくかったため、ここで面倒を見る。
   端末自体が枠なので紙面の枠は付けず、画面いっぱいに使う。
   ================================================================== */
@media (min-width: 600px) and (max-width: 899px) {
    /* 本文は読みやすい幅で中央に（画像・メニューは全幅のまま） */
    #text-view { padding: 14px 24px 18px; }
    #card-body, #card-title, #card-progress { max-width: 42em; margin-left: auto; margin-right: auto; }
    body.font-small  #card-body { font-size: 0.92rem; }
    body.font-medium #card-body { font-size: 1.02rem; }
    body.font-large  #card-body { font-size: 1.15rem; }
    #card-body { line-height: 1.9; }
    #card-title { font-size: 1.2rem; }

    /* 図表：画面の幅いっぱいまで使えるように。4:3なので幅いっぱい＝高さ75vw。
       iPadは縦に長いので、これでも本文は500px前後残る。
       画面が低いとき（横長のウィンドウ等）は本文が潰れないよう54dvhで頭打ち。 */
    #image-area { max-height: min(54dvh, 75vw); }

    /* 操作は指で押しやすい大きさに */
    #controls { height: 60px; gap: 5px; }
    .ctrl-btn { font-size: 0.85rem; }
    .btn-up { font-size: 1.25rem; }
    .btn-up .btn-sub-label { font-size: 0.66rem; }
    .btn-arrow { font-size: 1.3rem; }

    /* サブメニューのバナーは4:1の画像。高さを比率に任せて全体を見せる */
    #image-area.menu-banner { aspect-ratio: 4 / 1; height: auto; max-height: none; }

    /* テーマ一覧は1列。左右は上の看板・見出しと同じ8%に揃える。
       ボタンは詰まって見えるので背を高くし、間隔も広げる */
    .genre-list-wrap { padding: 14px 8%; gap: 10px; }
    .genre-btn { min-height: 64px; font-size: 1.02rem; }

    /* カード一覧は1列。ブロックごと中央に置き、中身は左そろえ */
    .card-list-body {
        max-width: 640px;
        margin: 0 auto;
        padding: 4px 0 10px;
    }
    .card-list-body .menu-item { justify-content: flex-start; text-align: left; padding-left: 26px; }
    .card-list-body .section-header { text-align: left; position: static; padding-left: 20px; }

    /* トップ：ボタンが小さいと画像に対して頭でっかちに見えるため大きくする */
    .top-menu-wrap { padding: 24px 10% 16px; }
    .top-btn { height: 62px; font-size: 1.05rem; }

    /* 級・科目パネル：縦方向の中央に置く */
    .sub-menu-wrap { padding: 18px 8%; min-height: 100%; justify-content: center; }
    .subject-btn { height: 86px; }
}

/* 設定の「画面レイアウト」欄はスマホでは隠す */
.settings-layout { display: none; }

/* 3ヶ月のまとめで月が変わるところの区切り。層の見出しとは別の色にして、
   層の切り替わりと月の切り替わりを見分けられるようにする */
.news-month {
    padding: 5px 16px;
    background: rgba(90,160,230,0.10);
    border-top: 1px solid rgba(90,160,230,0.45);
    border-bottom: 1px solid rgba(90,160,230,0.25);
    color: #7fb3ff;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* ==================== 調べるツール（リンク集の8つ目） ==================== */
/* ジャンル一覧で、他と性格が違うことが分かるように色を変える */
.link-genre-btn.link-genre-tool {
    background: linear-gradient(135deg, #1a2a3a, #24405e);
    border-color: #5a9fd4;
}
.st-box { padding: 14px 6% 6px; }
.st-lead { font-size: 0.86rem; color: var(--text2); line-height: 1.7; margin-bottom: 10px; }
.st-input {
    width: 100%;
    background: var(--bg2);
    border: 2px solid var(--accent);
    border-radius: 8px;
    color: var(--text);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.05rem;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.st-input:focus { outline: none; border-color: var(--accent2); }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 11px 12px;
    cursor: pointer;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
}
.st-btn:active { background: rgba(76,175,80,0.15); border-color: var(--accent); }
.st-btn-label { font-size: 0.9rem; color: var(--text); font-weight: 700; }
.st-btn-note { font-size: 0.7rem; color: var(--text2); line-height: 1.5; }
.st-site-note { display: block; font-size: 0.72rem; color: var(--text2); margin-top: 2px; line-height: 1.5; }
.st-site .link-name { line-height: 1.4; }
/* 狭い画面ではボタンを1列に */
@media (max-width: 400px) {
    .st-grid { grid-template-columns: 1fr; }
}

/* リンク集の使い方（9つ目） */
.link-genre-btn.link-genre-help {
    background: linear-gradient(135deg, #2a2416, #4a3d1e);
    border-color: #c9a227;
}
.lh-doc h3.lh-h {
    font-size: 0.95rem;
    color: var(--accent2);
    margin: 22px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}
.lh-doc .lh-list { margin: 0 0 12px 1.1em; padding: 0; }
.lh-doc .lh-list li { margin-bottom: 9px; line-height: 1.8; }
.lh-doc em { font-style: normal; color: var(--accent2); }
.lh-doc .link-badge { display: inline-block; vertical-align: baseline; }

/* ニュース記事の原文（英語）リンク */
.news-orig { margin-top: 14px; font-size: 0.82rem; }
.news-orig a { color: var(--text2); text-decoration: underline; }

/* 使い方：紹介文の見出し語と、その項目がどのジャンルにあるかの印 */
.lh-doc .lh-in {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 0.68rem;
    color: var(--text2);
    white-space: nowrap;
}

/* 使い方：節の末尾に置く補足の一行 */
.lh-doc .lh-note {
    list-style: none;
    margin-left: -1.1em;
    font-size: 0.78rem;
    color: var(--text2);
    opacity: 0.9;
}

/* ===== ニュースの情報源（ガーディアン選抜／ロイター／BBC） ===== */
.news-srcs {
    display: flex;
    gap: 6px;
    padding: 10px 14px 2px;
}
.news-src {
    flex: 1;
    padding: 8px 2px;
    background: transparent;
    border: 1px solid #7a8bb0;
    border-radius: 6px;
    color: #dde3f0;
    font-family: inherit;
    font-size: 0.76rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-src:hover { background: rgba(255,255,255,.06); color: #eee; }
.news-src.active {
    background: rgba(21,101,192,.22);
    border-color: #6cb6ff;
    color: #fff;
    font-weight: 700;
    cursor: default;
}
.src-ext { margin-left: 3px; font-size: 0.66rem; opacity: .65; }
.news-src.news-mag { font-size: 0.82rem; padding: 10px 6px; }

/* ===== マーケット ===== */
.mkt-wrap { display: flex; flex-direction: column; padding: 8px 14px 0; }
.mkt-btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
@media (max-width: 560px) {
    .mkt-btns { grid-template-columns: repeat(2, 1fr); }
}
.mkt-btn {
    padding: 9px 2px;
    background: transparent;
    border: 1px solid #7a8bb0;
    border-radius: 6px;
    color: #dde3f0;
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mkt-btn:hover { background: rgba(255,255,255,.06); color: #eee; }
.mkt-btn.active {
    background: rgba(21,101,192,.22);
    border-color: #6cb6ff;
    color: #fff;
    font-weight: 700;
}
.mkt-chart {
    height: min(62vh, 460px);
    min-height: 280px;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    background: #0d0d12;
}
.mkt-chart iframe { width: 100%; height: 100%; display: block; border: 0; }

/* アプリの外に出るボタンは破線。中で切り替わるボタンと見分けが付くように。
   ロイター・BBC（ニュース）と 日本の金利（マーケット）が同じ見た目になる。 */
.news-src[data-url],
.mkt-btn.mkt-ext {
    border-style: dashed;
    border-color: #7a8bb0;
    color: #c4d3ee;
}
.news-src[data-url]:hover,
.mkt-btn.mkt-ext:hover { border-color: #6cb6ff; color: #cfe3ff; }

/* マーケットだけは、画面の縦をチャートに使い切る。
   看板を畳んだうえで、ボタンの下に残った高さを全部チャートへ渡す。
   こうすると画面内に収まるので、指でずらす必要がなくなる。 */
body.market-view #image-area,
body.market-view #divider-line { display: none !important; }
body.market-view #menu-view   { overflow: hidden; }
body.market-view #menu-content { flex: 1; display: flex; min-height: 0; padding-bottom: 0; }
body.market-view .sub-menu-wrap { flex: 1; min-height: 0; padding-top: 10px; padding-bottom: 0; }
body.market-view .mkt-wrap     { flex: 1; min-height: 0; padding-bottom: 0; }
body.market-view .mkt-chart    { flex: 1; height: auto; min-height: 170px; }
body.market-view .news-source-foot { padding: 6px 12px 8px; }

/* 自由研究の専用リンク（?study=…）で来たとき */
/* スタートの画面に出す行き先 */
.entry-study {
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--text);
    text-align: center;
    line-height: 1.5;
    padding: 0 16px;
}
/* 研究のカード一覧の最後に出す、ほかの講座への入口 */
.study-invite {
    margin: 22px 12px 8px;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text2);
    text-align: center;
}
.study-invite-top {
    display: block;
    margin: 10px auto 0;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(90,160,230,0.55);
    background: rgba(90,160,230,0.12);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
}