* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    color: #1f2933;
    background: #f7f8fa;
    line-height: 1.7;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
    background: #111827;
    color: #fff;
}
.site-header-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.site-header .brand { color: #fff; font-weight: bold; font-size: 1.2rem; }
.site-header nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.site-header nav a, .site-header nav .link-button { color: #e5e7eb; }

.site-main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 20px;
    min-height: 60vh;
}

.site-footer { background: #111827; color: #9ca3af; margin-top: 40px; }
.site-footer-inner { max-width: 1000px; margin: 0 auto; padding: 20px; font-size: 0.85rem; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}
.card h3 { margin-top: 0; }
.price { font-weight: bold; color: #111827; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; font-size: 0.92rem; }
th { background: #f3f4f6; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-gray { background: #e5e7eb; color: #374151; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-blue { background: #dbeafe; color: #1e40af; }

.form { max-width: 480px; }
/* 見出しと入力欄を、1行ずつ縦に積む。
   これが無いと、幅の狭い入力欄（数値など）のとなりに次の見出しが回り込む */
.form > label { display: block; margin-top: 16px; margin-bottom: 5px; }
.form > label.inline-check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.form > input[type=text], .form > input[type=email], .form > input[type=password],
.form > input[type=datetime-local], .form > input[type=file], .form > select, .form > textarea {
    display: block; width: 100%;
}
.form > input[type=number] { display: block; }
.form-row { margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.form-row-checkbox { flex-direction: row; align-items: center; }
label { font-weight: 600; font-size: 0.9rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}
.field-error { color: #b91c1c; font-size: 0.85rem; margin: 0; }
.form-error { color: #b91c1c; background: #fee2e2; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.form-success { color: #166534; background: #dcfce7; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.form-links { margin-top: 18px; }
.form-links span { color: #d1d5db; margin: 0 8px; }
ul.form-hint { padding-left: 1.2em; margin-top: 6px; }
ul.form-hint li { margin-bottom: 6px; }

/* ============================================================
   ボタンの段階（全画面で共通のルール）
   ------------------------------------------------------------
   ★ 決まりは 開発/システム管理/ボタンの使い分けルール.md にあります。
     色だけで分けず、「塗り／枠／文字だけ」の形でも分けています。
     色が見分けにくい方にも、どれが主な操作かが伝わるようにするためです。

     主   .btn-primary       青の塗り      この画面で最も進めたい操作。1画面に1つだけ
     副   .btn-secondary     白地に青枠    進むが、主ではない操作
     中立 .btn-quiet         薄い灰色      絞り込む・表示・公開/下書きの切替など
     静   .btn-plain         文字だけ      取り消す・戻る・閉じる
     危険 .btn-danger        赤の塗り      元に戻せない操作（その画面の主操作のとき）
     危険 .btn-danger-quiet  白地に赤枠    一覧の行にある削除など

   ★ class を付け忘れた送信ボタンは「中立」になります。
     付け忘れが主役に見えてしまう事故を防ぐため、既定を控えめにしてあります。
   ============================================================ */

/* ★ 既定は :not([class]) で当てる。
   button[type=submit] は .btn-xxx より強い指定になり、
   クラスで付けた段階が負けてしまうため（2026-08-25 修正）。 */
.btn-primary, .btn-secondary, .btn-quiet, .btn-plain,
.btn-danger, .btn-danger-quiet, button[type=submit]:not([class]) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 8px;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

/* 主：この画面で最も進めたい操作 */
.btn-primary {
    background: #2563eb; color: #fff; border: 1.5px solid #2563eb;
    padding: 11px 24px; font-size: 1rem; font-weight: 700;
    box-shadow: 0 1px 2px rgba(37,99,235,.28);
}
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; text-decoration: none; }

/* 副：進むが、主ではない */
.btn-secondary {
    display: inline-flex;
    background: #fff; color: #2563eb; border: 1.5px solid #2563eb;
    padding: 10px 20px; font-size: 0.95rem; font-weight: 600;
}
.btn-secondary:hover { background: #eff6ff; color: #1d4ed8; text-decoration: none; }

/* 中立：画面の状態を変えるだけの操作。送信ボタンの既定でもある */
.btn-quiet, button[type=submit]:not([class]) {
    background: #eef0f5; color: #374151; border: 1px solid #dfe3ec;
    padding: 8px 16px; font-size: 0.9rem; font-weight: 600;
    box-shadow: none;
}
.btn-quiet:hover, button[type=submit]:not([class]):hover { background: #e2e6f0; color: #111827; text-decoration: none; }

/* 静：取り消す・戻る・閉じる */
.btn-plain {
    background: none; color: #6b7280; border: 1px solid transparent;
    padding: 8px 12px; font-size: 0.9rem; font-weight: 500;
}
.btn-plain:hover { color: #111827; background: #f3f4f6; text-decoration: none; }

/* 危険：元に戻せない操作 */
.btn-danger {
    background: #dc2626; color: #fff; border: 1.5px solid #dc2626;
    padding: 10px 20px; font-size: 0.95rem; font-weight: 700;
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; text-decoration: none; }

.btn-danger-quiet {
    background: #fff; color: #b91c1c; border: 1.5px solid #f0b4b4;
    padding: 8px 16px; font-size: 0.9rem; font-weight: 600;
}
.btn-danger-quiet:hover { background: #fef2f2; border-color: #dc2626; color: #991b1b; text-decoration: none; }

/* 一覧の行に置く小さいボタン */
.btn-sm { padding: 5px 12px !important; font-size: 0.82rem !important; }

/* 押せないとき */
.btn-primary:disabled, .btn-secondary:disabled, .btn-quiet:disabled,
.btn-plain:disabled, .btn-danger:disabled, .btn-danger-quiet:disabled,
button[type=submit]:not([class]):disabled {
    opacity: .45; cursor: not-allowed; box-shadow: none;
}
.btn-primary:disabled:hover { background: #2563eb; }
.btn-danger:disabled:hover { background: #dc2626; }

/* キーボードで操作している方に、どこにいるかを見せる */
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-quiet:focus-visible,
.btn-plain:focus-visible, button[type=submit]:not([class]):focus-visible {
    outline: 2px solid #1d4ed8; outline-offset: 2px;
}
.btn-danger:focus-visible, .btn-danger-quiet:focus-visible {
    outline: 2px solid #dc2626; outline-offset: 2px;
}

/* ボタンの並び。主ボタンを先頭に置き、危険な操作は離す */
.form-actions {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 20px;
}
.form-actions .btn-danger, .form-actions .btn-danger-quiet { margin-left: auto; }

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1em;
}
.link-button.is-danger { color: #b91c1c; }
.inline-form { display: inline; }

.admin-body { background: #f3f4f6; }
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 220px;
    background: #111827;
    color: #e5e7eb;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.admin-sidebar .brand { color: #fff; font-weight: bold; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.admin-sidebar nav a { color: #cbd5e1; padding: 8px 10px; border-radius: 6px; }
.admin-sidebar nav a.active, .admin-sidebar nav a:hover { background: #1f2937; color: #fff; text-decoration: none; }
.admin-sidebar-footer { margin-top: auto; font-size: 0.85rem; color: #9ca3af; }
.admin-sidebar-footer .link-button { color: #9ca3af; }
.admin-main { flex: 1; padding: 32px; max-width: 1100px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { background: #fff; border-radius: 8px; padding: 16px; border: 1px solid #e5e7eb; }
.stat-card .value { font-size: 1.6rem; font-weight: bold; }
.stat-card .label { font-size: 0.85rem; color: #6b7280; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs a { padding: 6px 14px; border-radius: 999px; background: #e5e7eb; color: #374151; }
.tabs a.active { background: #2563eb; color: #fff; }

/* ===== 学習システム ===== */

.lead { color: #4b5563; }
.muted { color: #9ca3af; font-size: 0.85rem; }
.notice { background: #fef9c3; color: #854d0e; padding: 12px 16px; border-radius: 6px; }
.notice.is-success { background: #dcfce7; color: #166534; }
.filter-form { margin-bottom: 16px; }
.breadcrumb { font-size: 0.9rem; color: #6b7280; margin-bottom: 12px; }

.progress-bar { background: #e5e7eb; border-radius: 999px; height: 12px; overflow: hidden; }
.progress-bar.is-small { height: 8px; }
.progress-bar > span { display: block; height: 100%; background: #22c55e; border-radius: 999px; }
.progress-label { font-size: 0.85rem; color: #6b7280; margin: 0 0 6px; }
.progress-figure { font-size: 0.9rem; color: #4b5563; margin: 6px 0 0; }

.learn-overview {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 28px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: center;
}
.learn-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.learn-next-label, .learn-best { font-size: 0.85rem; color: #6b7280; margin: 0; }
.learn-done { color: #166534; font-weight: bold; margin: 0; }

.chapter-list, .lesson-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.chapter-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px;
}
.chapter-card.is-complete { border-left-color: #22c55e; }
.chapter-card a { display: flex; gap: 12px; align-items: baseline; font-weight: bold; }
.chapter-number { color: #6b7280; font-size: 0.85rem; white-space: nowrap; }
.chapter-title { font-size: 1.05rem; }
.chapter-meta { font-size: 0.85rem; color: #6b7280; margin: 8px 0 0; }

.lesson-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.lesson-item.is-complete { background: #f0fdf4; border-color: #bbf7d0; }
.lesson-item a { display: flex; gap: 12px; align-items: center; }
.lesson-index {
    width: 26px; height: 26px; flex: none;
    border-radius: 50%; background: #e5e7eb; color: #374151;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
}
.lesson-item.is-complete .lesson-index { background: #22c55e; color: #fff; }
.lesson-status { font-size: 0.8rem; color: #166534; }
.lesson-chapter-label { color: #6b7280; font-size: 0.9rem; margin-top: -8px; }

.lesson-section { margin-bottom: 24px; }
.lesson-section h2 { font-size: 1.15rem; border-left: 4px solid #2563eb; padding-left: 10px; }

.dialogue { display: grid; gap: 10px; margin: 24px 0; }
.dialogue-heading { font-size: 1.15rem; grid-column: 1 / -1; margin-bottom: 0; }
.dialogue-line { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; }
.dialogue-speaker {
    font-size: 0.8rem; font-weight: bold; text-align: center;
    padding: 4px 0; border-radius: 999px;
}
.dialogue-line.is-kai .dialogue-speaker { background: #dbeafe; color: #1e40af; }
.dialogue-line.is-mirai .dialogue-speaker { background: #fce7f3; color: #9d174d; }
.dialogue-line p {
    margin: 0; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 10px 14px;
}

.key-points { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 16px 20px; }
.key-points h2 { font-size: 1.05rem; margin-top: 0; }
.key-points ul { margin: 0; padding-left: 20px; }
.key-points li { margin-bottom: 6px; }

.lesson-quiz, .chapter-quiz-cta, .mock-intro {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 20px; margin-top: 28px;
}
.chapter-quiz-cta.is-locked { background: #f9fafb; }
.mock-facts { color: #4b5563; font-size: 0.9rem; }

.quiz-question { border: none; border-top: 1px solid #e5e7eb; padding: 16px 0 8px; margin: 0; }
.quiz-question legend { font-weight: bold; color: #2563eb; font-size: 0.9rem; }
.quiz-source { color: #9ca3af; font-weight: normal; }
.quiz-text { margin: 4px 0 12px; }
.quiz-choice { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.quiz-choice:hover { background: #f3f4f6; }

.quiz-score { border-radius: 8px; padding: 16px 20px; background: #f3f4f6; margin-bottom: 20px; }
.quiz-score.is-pass { background: #dcfce7; }
.quiz-score.is-fail { background: #fef9c3; }
.quiz-score-main { font-size: 1.3rem; font-weight: bold; margin: 0; }
.quiz-score-percent { color: #6b7280; font-size: 1rem; margin-left: 8px; }
.quiz-score-verdict { margin: 4px 0 0; font-size: 0.9rem; }

.quiz-results { list-style: none; padding: 0; display: grid; gap: 16px; }
.quiz-result { border-left: 4px solid #d1d5db; padding-left: 14px; }
.quiz-result.is-correct { border-left-color: #22c55e; }
.quiz-result.is-wrong { border-left-color: #ef4444; }
.quiz-result-mark { font-size: 0.8rem; font-weight: bold; margin: 0; color: #6b7280; }
.quiz-result.is-correct .quiz-result-mark { color: #166534; }
.quiz-result.is-wrong .quiz-result-mark { color: #991b1b; }
.quiz-choices-review { list-style: none; padding: 0; margin: 0 0 8px; }
.quiz-choices-review li { padding: 4px 8px; border-radius: 4px; }
.quiz-choices-review li.is-answer { background: #dcfce7; }
.quiz-choices-review li.is-picked:not(.is-answer) { background: #fee2e2; }
.tag-answer, .tag-picked { font-size: 0.75rem; margin-left: 8px; padding: 1px 8px; border-radius: 999px; }
.tag-answer { background: #166534; color: #fff; }
.tag-picked { background: #991b1b; color: #fff; }
.quiz-explanation { font-size: 0.9rem; color: #4b5563; background: #f9fafb; padding: 10px 14px; border-radius: 6px; margin: 0; }
.quiz-retry, .quiz-after-actions { margin-top: 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.chapter-nav, .lesson-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

.learning-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.learning-card h3 { margin: 0 0 10px; font-size: 1.05rem; }
.learning-card-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 0; }

/* --- 団体専用ダッシュボード --- */
.org-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.org-nav a { padding: 6px 14px; border-radius: 999px; background: #e5e7eb; color: #374151; }
.org-nav a.is-active { background: #2563eb; color: #fff; }
.org-nav a:hover { text-decoration: none; }

.flash { border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; }
.flash p { margin: 0; }
.flash-success { background: #dcfce7; color: #166534; }
.flash-error { background: #fee2e2; color: #991b1b; }
.flash-detail { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 0; font-size: 0.9rem; }
.flash-detail dt { font-weight: bold; }
.flash-detail dd { margin: 0; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.stat-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 12px; }
.stat-list li {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 18px;
    min-width: 140px;
}
.stat-label { display: block; font-size: 0.85rem; color: #6b7280; }
.stat-value { display: block; font-size: 1.4rem; font-weight: bold; }

.form-hint { font-size: 0.85rem; color: #6b7280; margin: 4px 0 0; }
.form-inline-grid { max-width: 640px; }
.break-all { word-break: break-all; }

.copy-field { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-field input {
    flex: 1 1 320px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    background: #f9fafb;
}
.copy-button { background: #4b5563; }
.copy-button:hover { background: #374151; }

.invite-share, .invite-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.invite-share-main, .invite-card-main { flex: 1 1 320px; }
.invite-share-qr, .invite-card-qr { text-align: center; font-size: 0.85rem; }
.invite-share-qr img, .invite-card-qr img { display: block; border: 1px solid #e5e7eb; border-radius: 6px; }
.invite-share-qr p, .invite-card-qr p { margin: 6px 0 0; }
.invite-label { font-weight: bold; margin: 0 0 8px; }

.enrollment-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.enrollment-card h3 { margin-top: 0; }
.enrollment-card .invite-share { border: none; padding: 0; margin: 0; background: transparent; }

/* --- 決済設定の確認画面 --- */
.check-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.check-list li {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
}
.check-detail { margin-top: 6px; font-size: 0.9rem; color: #4b5563; word-break: break-all; }
.log-view {
    background: #111827;
    color: #e5e7eb;
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* --- 受験まわり --- */
.exam-block {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 10px 0;
}
.exam-block p { margin: 0 0 8px; }
.exam-block .inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.holiday-list { padding-left: 20px; color: #4b5563; }
tr.is-past td { color: #9ca3af; }

/* --- 団体コードと本部への連絡 --- */
.org-code { font-size: 1.05rem; margin: -8px 0 20px; }
.org-code strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.05em; }

.support-contact {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    padding: 20px 24px;
    margin-top: 32px;
}
.support-contact h2 { margin-top: 0; }
.support-note { color: #4b5563; }
.support-phone { margin: 16px 0 4px; }
.support-phone .btn-primary { font-size: 1.05rem; }
.support-identifiers-label { margin: 16px 0 8px; font-weight: bold; }
.support-identifiers {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 20px;
    margin: 0;
    background: #f9fafb;
    border-radius: 6px;
    padding: 12px 16px;
}
.support-identifiers dt { color: #6b7280; }
.support-identifiers dd { margin: 0; font-weight: bold; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- 本部ダッシュボード --- */
.todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; }
.todo-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 18px;
    color: #374151;
}
.todo-card:hover { text-decoration: none; border-color: #2563eb; }
.todo-card.is-active { border-left: 4px solid #dc2626; }
.todo-count { display: block; font-size: 1.8rem; font-weight: bold; color: #111827; }
.todo-card.is-active .todo-count { color: #dc2626; }
.todo-label { display: block; font-weight: bold; margin-bottom: 6px; }
.todo-note { display: block; font-size: 0.8rem; color: #6b7280; }

.upcoming-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.upcoming-list li {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.9rem;
}
.upcoming-date { color: #6b7280; margin-right: 8px; }
.upcoming-count { font-weight: bold; }

/* --- 本部の特別対応 --- */
.retake-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.retake-box summary { cursor: pointer; font-weight: bold; }
.retake-box .filter-form { margin: 12px 0 0; }
.admin-log-list { list-style: none; padding: 0; font-size: 0.9rem; }
.admin-log-list li { padding: 8px 0; border-bottom: 1px solid #e5e7eb; }
.admin-log-when { color: #6b7280; margin-right: 10px; }

/* --- ユーザー管理の所属変更 --- */
.move-org-form { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.move-org-form select { max-width: 190px; font-size: 0.85rem; }

/* ユーザー管理の一覧：1人2行（2026-09-29） */
.users-count { font-size: .85rem; color: #6b7280; margin: 0 0 6px; text-align: right; }
.users-table th, .users-table td { padding: 8px 10px; vertical-align: top; white-space: nowrap; }
.users-table th.num, .users-table td.num { text-align: right; }
.users-table td.user-id { font-family: "SF Mono", Menlo, monospace; font-size: .85rem; color: #374151; }
.users-table td.user-name { white-space: normal; min-width: 200px; }
.user-name-link { font-weight: 600; color: #111827; }
.user-sub { display: block; font-size: .8rem; color: #6b7280; margin-top: 2px; word-break: break-all; }
.users-table td.user-org { white-space: normal; max-width: 220px; }
.users-table .muted { color: #9ca3af; }
.users-table td.user-actions { white-space: normal; }
.user-actions-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.user-more { position: relative; }
.user-more > summary { list-style: none; display: inline-flex; }
.user-more > summary::-webkit-details-marker { display: none; }
.user-more[open] > summary { background: #dbeafe; color: #1e3a8a; }
.user-more-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 560px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 12px 14px; display: grid; gap: 10px;
}
.user-more-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.user-more-form select { max-width: 220px; font-size: .85rem; }
.user-more-label { display: inline-block; width: 3.5em; font-size: .8rem; color: #6b7280; }
.user-more-hint { flex-basis: 100%; font-size: .78rem; color: #6b7280; padding-left: 3.5em; }
@media (max-width: 720px) {
  .user-more-panel { position: static; min-width: 0; margin-top: 8px; box-shadow: none; }
}

/* --- 受験画面 --- */
.exam-intro ul { color: #374151; }
.exam-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    background: #111827;
    color: #e5e7eb;
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.exam-progress { font-weight: bold; font-size: 1.05rem; }
.exam-answered { color: #9ca3af; font-size: 0.9rem; }
.exam-timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: bold; }
.exam-timer.is-warning { color: #fca5a5; }
.exam-timer.is-over { color: #ef4444; }

.exam-question {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.exam-question-body { font-size: 1.1rem; line-height: 1.9; margin-top: 0; }
.exam-choices { list-style: none; padding: 0; display: grid; gap: 10px; }
.exam-choices li { border: 1px solid #e5e7eb; border-radius: 6px; }
.exam-choices label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; cursor: pointer; }
.exam-choices li:hover { background: #f9fafb; }

.exam-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.exam-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.exam-nav-item {
    width: 40px;
    padding: 6px 0;
    background: #e5e7eb;
    color: #374151;
    border-radius: 6px;
}
.exam-nav-item:hover { background: #d1d5db; }
.exam-nav-item.is-answered { background: #bbf7d0; color: #166534; }
.exam-nav-item.is-current { outline: 2px solid #2563eb; }

.exam-submit {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    padding: 16px 20px;
}
.exam-done { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px 24px; }

/* --- 試験問題の配布・提出 --- */
.exam-paper-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 10px 0;
}
.exam-paper-box p { margin: 0 0 8px; }
.exam-paper-box .inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- 郵送先の代理入力 --- */
.profile-proxy {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 12px 0 20px;
}
.profile-proxy summary { cursor: pointer; font-weight: bold; }
.profile-proxy .form { margin-top: 12px; }

/* --- 級の選択（検定一覧・検定詳細で共通） --- */

/* 検定一覧：検定ごとに1枚のカード。級はその中に並べる */
.cert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.cert-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.cert-item-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.cert-item-title { font-size: 1.15rem; font-weight: bold; margin: 0; }
.cert-item-code {
  background: #e5e7eb; color: #374151;
  border-radius: 4px; padding: 1px 8px;
  font-size: 0.8rem; font-weight: bold; letter-spacing: 0.04em;
}
.cert-item-target { color: #6b7280; font-size: 0.9rem; }
.cert-item-price { margin-left: auto; font-weight: bold; color: #111827; white-space: nowrap; }
.cert-item-price .form-hint { display: inline; margin-left: 6px; font-weight: normal; }
.cert-item-body { padding: 16px 20px; }
.cert-item-body > .level-list { margin: 0; }
.cert-item-actions { padding: 16px 20px; }

/* 級ひとつ分のカード。詳細では選択肢、一覧では申込への入り口になる */
.level-list { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; gap: 12px; }
.level-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 18px;
}
.level-card:has(input:checked) { border-color: #1d4ed8; box-shadow: 0 0 0 2px #dbeafe; }
.level-card.is-disabled { background: #f9fafb; color: #6b7280; }
.level-card label { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; }
.level-card.is-disabled label { cursor: default; }

/* 一覧側は、カードぜんぶを申込への入り口にする */
.level-card.is-link { transition: border-color 0.12s, box-shadow 0.12s; }
.level-card.is-link:hover { border-color: #2563eb; box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15); }
.level-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.level-apply { margin: 10px 0 0; }
.level-apply a { font-weight: bold; }
.level-card.is-link .level-apply a::after { content: " →"; }

.level-name { font-size: 1.15rem; font-weight: bold; }
.level-target { color: #4b5563; font-size: 0.92rem; }
.level-price { margin-left: auto; font-size: 1.1rem; font-weight: bold; color: #1d4ed8; white-space: nowrap; }
.level-card.is-disabled .level-price { color: #6b7280; }
.level-summary { margin: 8px 0 4px; line-height: 1.7; }

/* 問題数・制限時間・合格基準は、小さな札にして横に並べる */
.level-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.level-meta li {
  background: #f3f4f6; color: #4b5563;
  border-radius: 999px; padding: 2px 10px;
  font-size: 0.82rem;
}
.level-card.is-disabled .level-meta li { background: #e5e7eb; }

.level-blocked { margin: 10px 0 0; color: #b45309; font-size: 0.9rem; }
.level-badge {
  display: inline-block;
  background: #1d4ed8;
  color: #fff;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 0.82rem;
  font-weight: bold;
  margin-left: 6px;
  vertical-align: middle;
}

/* 画面が狭いときは、金額を名前の下に回して折り返さないようにする */
@media (max-width: 560px) {
  .level-price { margin-left: 0; width: 100%; }
  .cert-item-price { margin-left: 0; width: 100%; }
}

/* --- 学習ページの級の切り替え --- */
.level-switch { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.level-switch a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
    color: #374151;
    font-size: 0.92rem;
}
.level-switch a.is-current { background: #1d4ed8; border-color: #1d4ed8; color: #fff; font-weight: bold; }

/* --- ロゴ --- */
/* 背景が濃いので、白抜きにした画像（jicta-logo-white.png）を使う。
   CSSのフィルターに頼らないのは、スタイルが読み込まれなかった場合でも
   ロゴが見えるようにするため。 */
.site-header .brand { display: inline-flex; align-items: center; }
.site-header .brand-logo { height: 26px; width: auto; display: block; }

/* サイドバーは内側が180pxしかないため、ロゴと「管理画面」を縦に並べる */
.admin-sidebar .brand { display: block; text-decoration: none; }
.admin-sidebar .brand-logo { display: block; width: 140px; height: auto; max-width: 100%; }
.admin-sidebar .brand-sub {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

/* ── きょうだい・家族アカウント ────────────────────────────
   「いまどなたを開いているか」は見落とされると事故になる（違うお子さまで
   申し込む・受験日を予約する）。ヘッダー直下に、目立つ帯として常に出す。 */

.profile-bar {
    background: #1d4ed8;
    color: #fff;
}
.profile-bar-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.profile-bar-label { font-size: 0.85rem; color: #bfdbfe; }
.profile-bar-name { font-size: 1.05rem; }

.profile-switch { position: relative; margin-left: auto; }
.profile-switch > summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.85rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    padding: 2px 12px;
}
.profile-switch > summary::-webkit-details-marker { display: none; }
.profile-switch > summary:hover { background: rgba(255, 255, 255, 0.15); }

.profile-switch-list {
    position: absolute;
    right: 0;
    z-index: 20;
    margin: 6px 0 0;
    padding: 8px 0;
    min-width: 220px;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.18);
}
.profile-switch-list li { padding: 0; }
.profile-switch-list .link-button,
.profile-switch-list a,
.profile-switch-current {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    color: #1f2933;
    font-size: 0.95rem;
}
.profile-switch-list .link-button:hover,
.profile-switch-list a:hover { background: #f3f4f6; text-decoration: none; }
.profile-switch-current { color: #6b7280; }

/* ログイン直後の「どなたですか？」選択画面 */
.profile-choice-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.profile-choice {
    width: 100%;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px 20px;
    text-align: center;
    font-family: inherit;
}
.profile-choice:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); }
.profile-choice-name { display: block; font-size: 1.15rem; font-weight: bold; color: #1f2933; }
.profile-choice-meta { display: block; margin-top: 6px; font-size: 0.8rem; color: #6b7280; }

/* 家族の一覧 */
.family-list { list-style: none; padding: 0; }
.family-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.family-name { font-weight: bold; }
.family-role {
    font-size: 0.75rem;
    font-weight: normal;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 6px;
}
.family-current {
    font-size: 0.75rem;
    font-weight: normal;
    color: #1d4ed8;
    background: #dbeafe;
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 4px;
}
.family-meta { font-size: 0.85rem; color: #6b7280; }
.family-actions { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.link-danger { color: #b91c1c; }

/* 成人された方のご案内（ログイン情報の独立） */
.adult-notice { margin-bottom: 24px; }
.adult-notice p { margin: 0 0 8px; }
.adult-notice-list { list-style: none; padding: 0; margin: 12px 0 0; }
.adult-notice-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-top: 1px solid rgba(133, 77, 14, 0.2);
}
.adult-notice-name { font-weight: bold; }
.family-adult {
    font-size: 0.75rem;
    font-weight: normal;
    color: #92400e;
    background: #fef3c7;
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 4px;
}
.profile-switch-id { display: block; font-size: 0.75rem; color: #6b7280; }

/* 受験者情報の入力（よみかた・ローマ字・分割住所） */
.profile-group {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 20px 4px;
    margin: 0 0 20px;
    background: #fff;
}
.profile-group > legend {
    padding: 0 8px;
    font-weight: bold;
    color: #1f2933;
}
.profile-group-note {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    color: #374151;
}
.cert-name {
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    background: #eff6ff;
    padding: 2px 10px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════
   学習ページの読みやすさ（スマホ優先）
   ── 紙のテキストと同じ記法を、同じ見た目で出す ──
   ══════════════════════════════════════════════════════════ */

/* 蛍光ペン。紙と同じ意味で使う：黄＝本番試験に出る／青紫＝定義・キーワード */
mark.hl-y{
  background: linear-gradient(transparent 58%, #fff2a8 58%);
  padding: 0 .12em; font-weight: 700; color: inherit;
}
mark.hl-b{
  background: linear-gradient(transparent 58%, #d9d6f5 58%);
  padding: 0 .12em; font-weight: 700; color: #2c2a5e;
}
ruby rt{ font-size: .55em; color: #6b7280; font-weight: 400; }

/* 本文。行長・行間・字面を、読み続けられる値にする */
.lesson-section{ margin-bottom: 28px; }
.lesson-section p{
  font-size: 1.06rem;
  line-height: 2.0;
  letter-spacing: .012em;
  margin: 0 0 1.1em;
  color: #1f2233;
  /* 日本語の途中で不自然に折れないようにする */
  word-break: normal; overflow-wrap: anywhere; line-break: strict;
}
.lesson-section strong{ color: #2c2a5e; font-weight: 700; }
strong.key-red, .lesson-section strong.key-red{ color: #c0262d; font-weight: 800; }
.lesson-section h2{
  font-size: 1.18rem; line-height: 1.6;
  border-left: 5px solid #4a4694; padding-left: 12px;
  margin: 32px 0 14px;
}

/* 覚えておきたいポイント */
.key-points{
  background: #f5f5fb; border: 1px solid #c9c6e6; border-radius: 10px;
  padding: 18px 20px;
}
.key-points h2{ font-size: 1.06rem; margin-top: 0; color: #2c2a5e; }
.key-points li{ margin-bottom: 10px; line-height: 1.9; font-size: 1.02rem; }

/* 図版はスマホで潰れないように */
.lesson-figure img{ width: 100%; height: auto; }
.lesson-figure figcaption{ font-size: .85rem; color: #6b7280; margin-top: 6px; }

/* 人物のイラスト（ワンポイント）。saying があれば吹き出し付きで本文の前に置く */
.lesson-section::after{ content: ""; display: table; clear: both; }
.lesson-portrait{ float: right; width: 150px; margin: 0 0 8px 16px; text-align: center; }
.lesson-portrait-face{ display: block; }
.lesson-portrait img{
  width: 150px; height: 150px; object-fit: cover; display: block; margin: 0 auto;
  border-radius: 50%; background: #f5f5fb; border: 2px solid #d9d6f5;
}
.lesson-portrait-name{ display: block; font-size: .78rem; color: #6b7280; margin-top: 4px; }
.lesson-portrait.has-saying{
  float: none; width: auto; margin: 4px 0 20px; text-align: left;
  display: flex; align-items: center; gap: 18px;
}
.lesson-portrait.has-saying .lesson-portrait-face{ flex: none; width: 150px; text-align: center; }
.lesson-saying{
  position: relative; flex: 1; background: #fff; border: 2px solid #4a4694;
  border-radius: 16px; padding: 12px 16px; font-size: 1.02rem; line-height: 1.8;
  color: #2c2a5e; font-weight: 700;
}
.lesson-saying::before, .lesson-saying::after{
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  border-style: solid; border-color: transparent;
}
.lesson-saying::before{ left: -14px; border-width: 10px 14px 10px 0; border-right-color: #4a4694; }
.lesson-saying::after{ left: -10px; border-width: 8px 11px 8px 0; border-right-color: #fff; }
@media (max-width: 600px){
  .lesson-portrait{ width: 104px; margin-left: 12px; }
  .lesson-portrait img{ width: 104px; height: 104px; }
  .lesson-portrait.has-saying{ gap: 14px; }
  .lesson-portrait.has-saying .lesson-portrait-face{ width: 104px; }
  .lesson-saying{ font-size: .96rem; padding: 10px 12px; }
}

/* ── 音声（車・手ぶら用）─────────────────────────── */
.audio-box{
  border: 1px solid #c9c6e6; background: #f5f5fb; border-radius: 10px;
  padding: 14px 16px; margin: 20px 0;
}
.audio-box h2{ font-size: 1rem; margin: 0 0 4px; color: #2c2a5e; }
.audio-box .audio-note{ font-size: .85rem; color: #6b7280; margin: 0 0 10px; }
.audio-box audio{ width: 100%; }
.audio-dl{ font-size: .85rem; margin: 8px 0 0; }

/* ── 動画（見るだけで学ぶ）───────────────────────── */
.video-box{ margin: 20px 0; }
.video-box h2{ font-size: 1rem; margin: 0 0 8px; color: #2c2a5e; }
.video-box video{ width: 100%; border-radius: 10px; background: #000; display: block; }
.video-note{ font-size: .85rem; color: #6b7280; margin: 8px 0 0; }

/* ── スマホ ─────────────────────────────────────── */
@media (max-width: 640px){
  .lesson-section p{ font-size: 1.09rem; line-height: 2.05; }
  .lesson-section h2{ font-size: 1.12rem; }
  .key-points li{ font-size: 1.05rem; }
  main{ padding-left: 16px; padding-right: 16px; }
}
/* 文字サイズを大きくしている利用者を尊重する */
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; } }

/* ============================================================
   事務局へのご相談（メッセージ機能）
   ============================================================ */

.notice.is-error { background: #fee2e2; color: #991b1b; }

/* --- メニューのバッジ（管理画面のサイドバー） --- */
.admin-sidebar nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: #3b82f6; color: #fff;
    font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.nav-badge.is-alert { background: #dc2626; }

/* --- 未読の丸（受講者・共通） --- */
.msg-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; margin-left: 8px;
    border-radius: 999px; background: #dc2626; color: #fff;
    font-size: 0.75rem; font-weight: 700; line-height: 1; vertical-align: middle;
}
.msg-badge-sm { min-width: 18px; height: 18px; font-size: 0.68rem; margin-left: 6px; }

/* --- 状態のラベル --- */
.msg-state {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; white-space: nowrap;
    background: #e5e7eb; color: #374151;
}
.msg-state.is-waiting  { background: #fef3c7; color: #92400e; }
.msg-state.is-replied  { background: #dbeafe; color: #1e40af; }
.msg-state.is-resolved { background: #dcfce7; color: #166534; }
.msg-flag {
    display: inline-block; padding: 2px 10px; margin-left: 6px; border-radius: 999px;
    background: #dc2626; color: #fff; font-size: 0.75rem; font-weight: 700;
}
.msg-wait { color: #6b7280; font-size: 0.85rem; margin-left: 8px; }

/* --- マイページの入口 --- */
.mypage-messages {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; margin-bottom: 20px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    text-decoration: none; color: inherit;
}
.mypage-messages:hover { border-color: #93c5fd; text-decoration: none; }
.mypage-messages.has-unread { border-color: #fca5a5; background: #fff7f7; }
.mypage-messages-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: #eff6ff; color: #1d4ed8; font-size: 1.2rem; flex-shrink: 0;
}
.mypage-messages-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mypage-messages-sub { font-size: 0.85rem; color: #6b7280; }

/* --- メッセージボックスの2段組み --- */
.msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .msg-layout { grid-template-columns: 1fr; } }

.msg-list { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.msg-list-head { font-size: 0.85rem; color: #6b7280; margin: 0; padding: 14px 16px; border-bottom: 1px solid #f3f4f6; }
.msg-empty { padding: 20px 16px; color: #9ca3af; font-size: 0.9rem; margin: 0; }
.msg-threads { list-style: none; margin: 0; padding: 0; }
.msg-thread-item { border-bottom: 1px solid #f3f4f6; }
.msg-thread-item:last-child { border-bottom: none; }
.msg-thread-item > a { display: block; padding: 14px 16px; text-decoration: none; color: inherit; }
.msg-thread-item > a:hover { background: #f9fafb; text-decoration: none; }
.msg-thread-item.is-current > a { background: #eff6ff; box-shadow: inset 3px 0 0 #1d4ed8; }
.msg-thread-cat { display: block; font-size: 0.72rem; color: #1d4ed8; font-weight: 700; margin-bottom: 4px; }
.msg-thread-subject { display: block; font-weight: 700; line-height: 1.5; margin-bottom: 6px; }
.msg-thread-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-thread-date { font-size: 0.78rem; color: #9ca3af; }

.msg-main { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; }
.msg-detail-head { border-bottom: 1px solid #f3f4f6; padding-bottom: 16px; margin-bottom: 20px; }
.msg-detail-head h2 { margin: 4px 0 8px; }
.msg-detail-cat { font-size: 0.75rem; color: #1d4ed8; font-weight: 700; margin: 0; }
.msg-detail-meta { font-size: 0.85rem; color: #6b7280; margin: 0; }
.msg-context { font-size: 0.85rem; color: #4b5563; margin: 10px 0 0; padding: 8px 12px; background: #f8fafc; border-radius: 8px; }

/* --- やりとりの流れ --- */
.msg-stream { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.msg-bubble { border-radius: 12px; padding: 14px 16px; max-width: 92%; }
.msg-bubble.is-user  { background: #f3f4f6; margin-right: auto; }
.msg-bubble.is-admin { background: #eff6ff; margin-left: auto; }
.msg-bubble.is-note  { background: #fffbeb; border: 1px dashed #f59e0b; max-width: 100%; }
.msg-bubble-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; }
.msg-bubble-name { font-size: 0.82rem; font-weight: 700; color: #374151; }
.msg-bubble-time { font-size: 0.78rem; color: #9ca3af; }
.msg-bubble-body { line-height: 1.9; word-break: break-word; }
.msg-bubble-body a { color: #1d4ed8; text-decoration: underline; word-break: break-all; }
.msg-note-tag {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    background: #f59e0b; color: #fff; font-size: 0.68rem; font-weight: 700;
}
.msg-stream-admin .msg-bubble { max-width: 100%; }

/* --- 添付 --- */
.msg-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.msg-files a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    text-decoration: none; color: #374151; font-size: 0.82rem;
}
.msg-files a:hover { border-color: #93c5fd; text-decoration: none; }
.msg-file-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }
.msg-file-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 48px; border-radius: 6px;
    background: #fee2e2; color: #991b1b; font-size: 0.68rem; font-weight: 700;
}
.msg-file-size { color: #9ca3af; }

/* --- 返信・新規のフォーム --- */
.msg-reply, .msg-new { border-top: 1px solid #f3f4f6; padding-top: 20px; }
.msg-radio { display: block; padding: 6px 0; }
.msg-privacy {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
    padding: 14px 16px; margin: 16px 0; font-size: 0.88rem; line-height: 1.9;
}
.msg-privacy-head { font-weight: 700; margin: 0 0 6px; }
.msg-privacy p:last-child { margin-bottom: 0; }
.msg-reply-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* --- 管理画面の1件表示 --- */
.msg-admin-meta { margin: 0 0 12px; }
.msg-admin-facts { display: grid; gap: 8px; margin: 0 0 16px; padding: 16px; background: #f9fafb; border-radius: 10px; }
.msg-admin-facts > div { display: flex; gap: 12px; font-size: 0.88rem; }
.msg-admin-facts dt { min-width: 8em; color: #6b7280; margin: 0; }
.msg-admin-facts dd { margin: 0; }
.msg-admin-tools { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.admin-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.admin-filter-sub { margin-top: -8px; }
.admin-filter-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px; background: #f3f4f6;
    text-decoration: none; color: #374151; font-size: 0.88rem;
}
.admin-filter-item:hover { background: #e5e7eb; text-decoration: none; }
.admin-filter-item.is-active { background: #1d4ed8; color: #fff; }
.admin-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: rgba(0,0,0,.12); font-size: 0.72rem; font-weight: 700;
}
.admin-filter-item.is-active .admin-filter-count { background: rgba(255,255,255,.28); }
tr.is-urgent  { background: #fef2f2; }
tr.is-overdue { background: #fffbeb; }
.is-overdue-cell { color: #b91c1c; font-weight: 700; }
.table-sub { display: block; font-size: 0.78rem; color: #9ca3af; }
.table-context { max-width: 18em; font-size: 0.85rem; }

/* ============================================================
   学習ページの「事務局へ相談」ボタン
   ============================================================ */

.support-fab-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 60; }

.support-fab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border: none; border-radius: 999px;
    background: #1d4ed8; color: #fff; font-size: 0.95rem; font-weight: 700;
    cursor: pointer; box-shadow: 0 8px 24px rgba(29,78,216,.32);
    position: relative;
}
.support-fab:hover { background: #1e40af; }
.support-fab-icon { font-size: 1.1rem; }
.support-fab-badge {
    position: absolute; top: -4px; right: -4px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #dc2626; color: #fff; font-size: 0.7rem; font-weight: 700;
}
.support-fab-wrap.is-open .support-fab { display: none; }

/* hidden 属性より display:flex が強いため、明示的に打ち消す。
   これが無いと、開くボタンを押さなくてもパネルが出たままになる */
.support-panel[hidden] { display: none; }

.support-panel {
    width: min(420px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 40px));
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.22); overflow: hidden;
}
.support-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; background: #1d4ed8; color: #fff;
}
.support-panel-head h2 { margin: 0; font-size: 1rem; color: #fff; }
.support-panel-close {
    border: none; background: transparent; color: #fff;
    font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.support-panel-body { padding: 18px; overflow-y: auto; }
.support-panel-foot { font-size: 0.82rem; color: #6b7280; margin: 14px 0 0; }

.support-context {
    font-size: 0.82rem; color: #374151; line-height: 1.7;
    background: #f8fafc; border-radius: 8px; padding: 8px 12px; margin: 0 0 14px;
}
.support-context-tag { display: block; font-size: 0.72rem; color: #1d4ed8; font-weight: 700; }

.support-field { display: block; margin-bottom: 14px; }
.support-field-label { display: block; font-size: 0.85rem; font-weight: 700; color: #374151; margin-bottom: 5px; }
.support-field input[type=text],
.support-field select,
.support-field textarea {
    width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px;
    font: inherit; line-height: 1.7;
}
.support-field textarea { resize: vertical; }
fieldset.support-field { border: none; padding: 0; margin: 0 0 14px; }

.support-caution {
    font-size: 0.8rem; color: #92400e; line-height: 1.8;
    background: #fffbeb; border-radius: 8px; padding: 10px 12px; margin: 0 0 14px;
}
.support-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.support-sla { font-size: 0.78rem; color: #6b7280; }
.support-error {
    margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
    background: #fee2e2; color: #991b1b; font-size: 0.85rem;
}

.support-sent { padding: 40px 24px; text-align: center; }
.support-sent-mark {
    width: 52px; height: 52px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #dcfce7; color: #166534; font-size: 1.6rem;
}
.support-sent-head { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.support-sent-body { font-size: 0.88rem; color: #4b5563; line-height: 1.9; margin: 0; }

@media (max-width: 600px) {
    .support-fab-wrap { right: 12px; bottom: 12px; left: 12px; }
    .support-fab { width: 100%; justify-content: center; }
    .support-panel { width: 100%; max-height: calc(100vh - 24px); }
}

/* 印刷には出さない */
@media print { .support-fab-wrap { display: none; } }

/* ============================================================
   アイコン（丸型）
   ============================================================ */

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: #e5e7eb; color: #4b5563; font-weight: 700; line-height: 1;
    user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 34px; height: 34px; font-size: 0.85rem; }
.avatar-md { width: 44px; height: 44px; font-size: 1rem; }
.avatar-lg { width: 96px; height: 96px; font-size: 2rem; }
.avatar.is-office { background: #1d4ed8; color: #fff; }
.avatar.is-initial { background: #cbd5e1; color: #334155; }

/* アイコンの設定画面 */
.avatar-current-row { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.avatar-pick { display: inline-block; cursor: pointer; }
.avatar-stage {
    position: relative; width: 320px; max-width: 100%; height: 320px;
    margin: 0 auto 18px; border-radius: 12px; overflow: hidden;
    background: #f3f4f6; cursor: grab; touch-action: none;
}
.avatar-stage:active { cursor: grabbing; }
.avatar-stage canvas { display: block; width: 100%; height: 100%; }
/* 丸の外側を白く伏せて、切り抜き後の見え方をそのまま出す */
.avatar-mask {
    position: absolute; inset: 0; pointer-events: none;
    box-shadow: 0 0 0 999px rgba(255,255,255,.72);
    border-radius: 50%;
    outline: 2px solid #1d4ed8; outline-offset: -1px;
}
.avatar-zoom { display: flex; align-items: center; gap: 12px; max-width: 320px; margin: 0 auto 12px; }
.avatar-zoom span { font-size: 0.85rem; color: #6b7280; white-space: nowrap; }
.avatar-zoom input[type=range] { flex: 1; }

/* ============================================================
   メッセージ（LINEのような並び）
   ------------------------------------------------------------
   ・自分の発言は右、相手は左。どちらの画面でも「自分が右」
   ・相手にはアイコンが付く
   ・色をはっきり分ける（自分＝濃い青／相手＝白）
   ============================================================ */

.chat { list-style: none; margin: 0 0 24px; padding: 4px 0; display: flex; flex-direction: column; gap: 14px; }

.chat-day { display: flex; justify-content: center; margin: 8px 0; }
.chat-day span {
    padding: 4px 14px; border-radius: 999px;
    background: rgba(17,24,39,.06); color: #6b7280; font-size: 0.75rem; font-weight: 600;
}

.chat-row { display: flex; align-items: flex-end; gap: 10px; }
.chat-row.is-theirs { justify-content: flex-start; }
.chat-row.is-mine   { justify-content: flex-end; }

.chat-col { max-width: min(72%, 560px); display: flex; flex-direction: column; }
.chat-name { font-size: 0.78rem; color: #6b7280; margin: 0 0 4px 4px; }
.chat-row.is-mine .chat-name { text-align: right; margin: 0 4px 4px 0; }

/* 吹き出しと時刻を横に並べる（LINEと同じ位置関係） */
.chat-line { display: flex; align-items: flex-end; gap: 6px; }
.chat-row.is-mine .chat-line { flex-direction: row-reverse; }

.chat-bubble {
    position: relative; padding: 11px 15px; border-radius: 16px;
    font-size: 0.95rem; line-height: 1.85; word-break: break-word;
}

/* 相手（受講者から見た事務局／事務局から見た受講者） */
.chat-row.is-theirs .chat-bubble {
    background: #fff; border: 1px solid #e5e7eb; color: #111827;
    border-bottom-left-radius: 5px;
}
.chat-row.is-theirs .chat-bubble::after {
    content: ''; position: absolute; left: -6px; bottom: 7px;
    width: 12px; height: 12px; background: #fff;
    border-left: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
    transform: rotate(45deg); border-bottom-left-radius: 3px;
}

/* 自分 */
.chat-row.is-mine .chat-bubble {
    background: #1d4ed8; color: #fff; border-bottom-right-radius: 5px;
}
.chat-row.is-mine .chat-bubble::after {
    content: ''; position: absolute; right: -5px; bottom: 7px;
    width: 12px; height: 12px; background: #1d4ed8;
    transform: rotate(45deg); border-bottom-right-radius: 3px;
}
.chat-row.is-mine .chat-bubble a { color: #dbeafe; text-decoration: underline; }
.chat-row.is-theirs .chat-bubble a { color: #1d4ed8; text-decoration: underline; }
.chat-text a { word-break: break-all; }

.chat-time { font-size: 0.7rem; color: #9ca3af; margin: 0; white-space: nowrap; padding-bottom: 3px; }
.chat-read { display: block; color: #6b7280; font-weight: 700; }

/* 内部メモ（受講者には見えない） */
.chat-row.is-note { justify-content: center; }
.chat-row.is-note .chat-col { max-width: min(88%, 680px); }
.chat-row.is-note .chat-bubble {
    background: #fffbeb; border: 1px dashed #f59e0b; color: #78350f; border-radius: 12px;
}
.chat-row.is-note .chat-bubble::after { content: none; }
.chat-note-head { font-size: 0.78rem; color: #92400e; margin: 0 0 6px; }
.chat-row.is-note .chat-time { text-align: center; }

/* 吹き出しの中の添付 */
.chat-bubble .msg-files { margin-top: 10px; }
.chat-row.is-mine .chat-bubble .msg-files a { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff; }
.chat-row.is-mine .chat-bubble .msg-file-size { color: rgba(255,255,255,.7); }
.chat-row.is-mine .chat-bubble .msg-file-icon { background: rgba(255,255,255,.24); color: #fff; }

@media (max-width: 640px) {
    .chat-col { max-width: 82%; }
    .avatar-stage { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* ============================================================
   AIによる返信の下書き（事務局用）
   ============================================================ */

.ai-draft {
    border: 1px solid #ddd6fe; background: #faf9ff; border-radius: 12px;
    padding: 20px 22px; margin: 24px 0;
}
.ai-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ai-draft-head h2 { margin: 0; font-size: 1.05rem; }
.ai-draft-result { margin-top: 16px; }
.ai-draft-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.ai-draft-note {
    background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 6px;
    padding: 10px 14px; font-size: 0.88rem; line-height: 1.85; margin: 0 0 12px;
}
.ai-draft-text {
    width: 100%; padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 10px;
    background: #fff; font: inherit; line-height: 1.95; resize: vertical;
}
.ai-draft-cites { margin-top: 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.ai-draft-cites-head { font-size: 0.85rem; font-weight: 700; color: #4b5563; margin: 0 0 8px; }
.ai-draft-cites ul { margin: 0; padding-left: 1.2em; }
.ai-draft-cites li { font-size: 0.88rem; line-height: 1.9; margin-bottom: 8px; }

/* ============================================================
   メンテナンス（古い写真の削除）
   ============================================================ */

.photo-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 16px 0 12px; }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
              grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.photo-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
.photo-item label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 400; }
.photo-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #f3f4f6; flex-shrink: 0; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.photo-name { font-size: 0.85rem; font-weight: 600; word-break: break-all; }
.photo-link { display: inline-block; margin-top: 8px; font-size: 0.8rem; }
/* チェックが外れているものは、消えないと分かるように薄くする */
.photo-item:has(.photo-check:not(:checked)) { opacity: .45; }

/* ============================================================
   教材の更新（マイページ）
   ============================================================ */

.membership-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
                   padding: 22px 24px; margin-bottom: 20px; }
.membership-card h2 { margin-top: 0; }

/* ============================================================
   検定の写真の差し替え（管理画面）
   ============================================================ */

.cert-photo-block { border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 24px; }
.cert-photo-block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.cert-photo-preview { display: block; border-radius: 10px; background: #f3f4f6; object-fit: cover; }
.cert-photo-card { width: 320px; height: 200px; }
.cert-photo-lp   { width: 260px; height: 200px; }

/* 添付の取り消し */
.msg-file-delete {
    margin-left: 6px; padding: 3px 9px; border-radius: 6px;
    background: transparent; border: 1px solid #e4c4c4; color: #b91c1c;
    font-size: 0.72rem; font-weight: 600; cursor: pointer; line-height: 1.4;
}
.msg-file-delete:hover { background: #fef2f2; border-color: #dc2626; }
.chat-row.is-mine .msg-file-delete { border-color: rgba(255,255,255,.4); color: #fff; }
.chat-row.is-mine .msg-file-delete:hover { background: rgba(255,255,255,.18); }
.msg-file-gone {
    padding: 8px 12px; border-radius: 10px; border: 1px dashed #d1d5db;
    color: #9ca3af; font-size: 0.8rem; list-style: none;
}
.chat-row.is-mine .msg-file-gone { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.75); }

/* 事務局が削除した1通。あった場所は残し、本文だけを伏せる */
.chat-row.is-deleted { justify-content: center; }
.chat-bubble.chat-deleted {
    background: transparent; border: 1px dashed #d1d5db; color: #9ca3af;
    padding: 8px 14px; text-align: center;
}
.chat-deleted-note { margin: 0; font-size: 0.8rem; }
.chat-bubble.chat-deleted .inline-form { margin-top: 4px; }

/* 一覧からご相談をまとめて選んで削除する（事務局の画面だけ） */
.table-check { width: 32px; text-align: center; }
.table-bulk {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 12px;
}

/* メッセージ1通の削除（事務局の画面だけ） */
.chat-delete-form { margin: 2px 0 0; }
.chat-row.is-mine .chat-delete-form { text-align: right; }
.chat-delete {
    background: none; border: none; padding: 0; cursor: pointer;
    color: #9ca3af; font-size: 0.72rem; text-decoration: underline;
}
.chat-delete:hover { color: #dc2626; }

/* お支払い前に、本部が教材だけを先に開いているときの案内 */
.learn-unlock-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 4px solid #d08c2a;
  background: #fdf6e9;
  border-radius: 4px;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* --- お申し込みの取り消し（2026-09-01）--- */
/* 押しまちがえないよう、理由を書かないと送れない形にしてある */
.stack-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
.stack-form label { font-size: 0.85rem; color: #4b5563; }
.stack-form input[type="text"] { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; }
.stack-form .form-hint { margin: 0; }
.stack-form button { align-self: flex-start; }

.row-action > summary { cursor: pointer; color: #b91c1c; font-size: 0.85rem; white-space: nowrap; }
.row-action[open] { min-width: 240px; }

.enrollment-cancel {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}
.enrollment-cancel > summary { cursor: pointer; color: #b91c1c; font-size: 0.9rem; }
.enrollment-cancel .form-hint { margin: 8px 0; }

/* --- 生徒にお渡しするログイン情報の用紙（2026-09-01）--- */
/* 画面で見るときと、印刷したときの両方で読めるようにする。
   印刷では、ヘッダー・フッター・操作ボタンを落として1枚に収める。 */
.handout-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.handout-sheet {
    background: #fff;
    border: 2px solid #111827;
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 720px;
}
.handout-head { text-align: center; border-bottom: 1px solid #e5e7eb; padding-bottom: 14px; }
.handout-org { margin: 0; font-size: 0.9rem; color: #4b5563; }
.handout-head h1 { margin: 6px 0; font-size: 1.4rem; letter-spacing: 0.04em; }
.handout-name { margin: 0; font-size: 1.1rem; font-weight: bold; }

.handout-body { display: flex; gap: 24px; align-items: flex-start; margin: 20px 0; flex-wrap: wrap; }
.handout-qr { text-align: center; }
.handout-qr img { display: block; }
.handout-qr-note { margin: 6px 0 0; font-size: 0.78rem; color: #6b7280; }

.handout-fields { flex: 1; min-width: 260px; margin: 0; }
.handout-fields dt { font-size: 0.85rem; color: #4b5563; margin-top: 12px; }
.handout-fields dt:first-child { margin-top: 0; }
.handout-fields dd { margin: 2px 0 0; }
.handout-url { font-size: 0.95rem; word-break: break-all; }
/* IDとパスワードは、書き写しやすいよう等幅で大きく出す */
.handout-value {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.25rem; font-weight: bold; letter-spacing: 0.08em;
}
.handout-password {
    display: inline-block;
    padding: 4px 10px;
    background: #f3f4f6;
    border: 1px dashed #9ca3af;
    border-radius: 4px;
}

.handout-note { border-top: 1px solid #e5e7eb; padding-top: 14px; font-size: 0.9rem; line-height: 1.8; }
.handout-note ol { margin: 6px 0 12px; padding-left: 1.4em; }
.handout-caution { margin: 6px 0 0; color: #92400e; font-size: 0.85rem; }

@media print {
    .site-header, .site-footer, .profile-bar,
    .handout-actions, .handout-screen-only, .flash { display: none !important; }
    .site-main { padding: 0; margin: 0; }
    .handout-sheet { border: none; padding: 0; max-width: none; }
}

/* 決済の本番確認：確認の手順（管理画面） */
.check-steps { margin: 8px 0 20px; padding-left: 1.4em; line-height: 1.9; }
.check-steps li { margin-bottom: 4px; }

/* 本文・設問の中の図（rich_text の @図[...] 記法。2026-09-20） */
.rt-fig{ display:block; max-width:100%; height:auto; margin:8px 0 10px; }
.quiz-choice .rt-fig, .exam-choices .rt-fig, .quiz-choices-review .rt-fig{
  display:inline-block; vertical-align:middle; max-width:180px; margin:2px 8px 2px 0; }
.rt-fig-missing{ color:#b91c1c; font-size:.85rem; }

/* 銀行振込の案内（2026-09-28） */
.bank-transfer-box { border: 1px solid #d8dee6; border-radius: 8px; padding: 16px 20px; margin: 16px 0; background: #f9fbfd; }
.bank-transfer-box h3 { margin-top: 0; }
.bank-transfer-table { width: auto; margin: 8px 0; }
.bank-transfer-table th { text-align: left; white-space: nowrap; padding-right: 16px; color: #4a5563; font-weight: 600; }
.bank-transfer-table td { padding: 4px 0; }
.bank-transfer-payer { font-size: 1.35em; letter-spacing: .04em; }
.deposit-balance { font-size: 1.6em; font-weight: 700; }
.text-minus { color: #b42318; }
/* 二段階認証（2026-09-28） */
.totp-qr { margin: 12px 0; }
.totp-qr svg { width: 200px; height: 200px; }
.totp-secret { font-size: 1.1em; letter-spacing: .08em; }
.backup-codes { columns: 2; max-width: 360px; font-size: 1.15em; }
.backup-codes li { margin: 4px 0; }
.keys-table td.hint { font-family: ui-monospace, monospace; }
.mail-body { white-space: pre-wrap; font-size: .85em; background: #f6f8fa; padding: 8px; margin: 6px 0 0; max-width: 640px; }

/* ══════════════════════════════════════════════════════════════
   学習ページの追加（2026-09-29）：採点結果・見直し・周期表ポップアップ・音声・紙のページ
   ══════════════════════════════════════════════════════════════ */
.quiz-score:focus{ outline: none; }
.quiz-score-wrong{ margin: 10px 0 0; font-size: .95rem; line-height: 1.8; }
.quiz-score-wrong strong{ color: #b91c1c; }
.quiz-review-link{ margin-left: 8px; font-weight: 700; }
.quiz-many-miss{ display: block; color: #b91c1c; }
.quiz-miss-count{
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; background: #fee2e2; color: #991b1b; vertical-align: 1px;
}
.quiz-miss-count.is-many{ background: #b91c1c; color: #fff; }
.quiz-miss-count.is-recovered{ background: #dcfce7; color: #166534; }
.review-badge{
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: #fee2e2; color: #991b1b;
}
.review-badge.is-many{ background: #b91c1c; color: #fff; }
.review-many{ margin: 8px 0 0; font-size: .9rem; }
.quiz-explanation-label{
  display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: #e5e7eb; color: #374151; margin-right: 6px; vertical-align: 1px;
}
.quiz-explanation.is-wrong{ background: #fff7ed; border-left: 3px solid #f97316; color: #1f2937; }
.quiz-explanation.is-wrong .quiz-explanation-label{ background: #f97316; color: #fff; }

/* 前へ・次へ をボタンに */
.lesson-nav{ align-items: stretch; margin-top: 36px; }
.lesson-nav .btn-primary, .lesson-nav .btn-secondary{
  flex: 1 1 200px; flex-direction: column; align-items: center; gap: 2px; padding: 14px 18px; text-align: center;
}
.lesson-nav .lesson-nav-next{ font-size: 1.08rem; }
.lesson-nav-title{ display: block; font-size: .82rem; font-weight: 500; opacity: .85; line-height: 1.5; }
@media (max-width: 600px){
  .lesson-nav{ flex-direction: column-reverse; }
  .lesson-nav .btn-primary, .lesson-nav .btn-secondary{ width: 100%; }
}

/* 紙のテキストの対応ページ */
.textbook-ref{
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px;
  font-size: .9rem; color: #4b5563; background: #f5f5fb; border: 1px solid #d9d6f5; border-radius: 999px; padding: 4px 14px;
}
.textbook-ref strong{ color: #2c2a5e; }

/* 見直しページ */
.review-summary{ background: #f5f5fb; border: 1px solid #c9c6e6; border-radius: 10px; padding: 16px 20px; margin: 0 0 20px; }
.review-count{ font-size: 1.1rem; margin: 0 0 6px; }
.review-count strong{ color: #b91c1c; font-size: 1.3rem; }
.review-note{ margin: 0; font-size: .9rem; color: #4b5563; }
.review-heading{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 1.1rem; margin: 28px 0 10px; }
.review-heading-count{ font-size: .85rem; color: #6b7280; font-weight: 500; }
.btn-small{ padding: 6px 12px; font-size: .85rem; }
.review-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.review-item{ border: 1px solid #e5e7eb; border-left: 4px solid #ef4444; border-radius: 8px; padding: 12px 16px; background: #fff; }
.review-item.is-solved{ border-left-color: #22c55e; opacity: .85; }
.review-item .quiz-text{ margin: 0 0 6px; font-weight: 600; }
.review-meta{ margin: 0; font-size: .82rem; color: #6b7280; }
.review-answer{ margin-top: 8px; }
.review-answer summary{ cursor: pointer; color: #2563eb; font-weight: 600; font-size: .9rem; }
.review-answer .quiz-choices-review{ margin-top: 8px; }
.review-solved{ margin-top: 28px; }
.review-solved summary{ cursor: pointer; font-weight: 600; }
.review-back{ margin-top: 16px; }
.btn-secondary.is-attention{ border-color: #f97316; color: #c2410c; }
.btn-secondary.is-attention:hover{ background: #fff7ed; }

/* 周期表ボタン（右下に追従）とポップアップ */
.lc-fab{
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  width: 64px; height: 64px; border-radius: 50%;
  background: #4a4694; color: #fff; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(44,42,94,.35);
  font-family: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; line-height: 1.1;
}
.lc-fab:hover{ background: #2c2a5e; }
/* 「事務局へ相談」（右下 20px・高さ約46px）があるページでは、その上に積む（2026-09-29 重なりの修正）。
   相談のパネルを開いているあいだは、パネルに重ならないよう隠す */
body:has(.support-fab-wrap) .lc-fab{ right: 20px; bottom: 84px; }
body:has(.support-fab-wrap.is-open) .lc-fab{ display: none; }
@media (max-width: 600px){
  /* スマホでは相談ボタンが下いっぱい（下から12px）に広がる */
  body:has(.support-fab-wrap) .lc-fab{ right: 12px; bottom: 72px; }
}
.lc-fab-icon{ font-size: 1.25rem; line-height: 1; }
.lc-modal{ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.lc-modal[hidden]{ display: none; }
.lc-modal-backdrop{ position: absolute; inset: 0; background: rgba(17,24,39,.55); }
.lc-modal-panel{
  position: relative; width: 100%; max-width: 760px; max-height: 92vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 30px rgba(0,0,0,.25); overflow: hidden;
}
@media (min-width: 700px){
  .lc-modal{ align-items: center; padding: 20px; }
  .lc-modal-panel{ border-radius: 16px; max-height: 88vh; }
}
.lc-modal-head{ display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 12px 20px; border-bottom: 1px solid #e5e7eb; }
.lc-modal-head h2{ margin: 0; font-size: 1.1rem; color: #2c2a5e; }
.lc-modal-x{
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d1d5db; background: #f3f4f6; color: #374151;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lc-modal-x:hover{ background: #e5e7eb; }
.lc-modal-body{ overflow: auto; padding: 12px 16px; -webkit-overflow-scrolling: touch; }
.lc-modal-note{ font-size: .85rem; color: #4b5563; margin: 0 0 12px; }
.lc-table{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lc-row{ border: 1px solid #d9d6f5; border-radius: 10px; overflow: hidden; }
.lc-row-head{ display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; background: #f5f5fb; }
.lc-row-num{ font-size: .78rem; font-weight: 700; color: #4a4694; }
.lc-row-stage{ font-weight: 700; color: #1f2233; }
.lc-row-age{ font-size: .85rem; color: #6b7280; margin-left: auto; }
.lc-row-body{ margin: 0; padding: 8px 12px; display: grid; gap: 4px; }
.lc-row-body > div{ display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; font-size: .9rem; line-height: 1.6; }
.lc-row-body dt{ color: #6b7280; }
.lc-row-body dd{ margin: 0; }
.lc-tilt{ color: #b91c1c; }
@media (max-width: 480px){ .lc-row-body > div{ grid-template-columns: 7.5em 1fr; font-size: .85rem; } }
.lc-modal-pdf{ margin: 14px 0 0; font-size: .9rem; }
.lc-modal-foot{ padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #e5e7eb; background: #fff; }
.lc-modal-close{ width: 100%; padding: 14px 20px; font-size: 1.05rem; }
body.lc-modal-open{ overflow: hidden; }

/* 音声ページ */
.audio-get-grid{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.audio-get-card{ border: 1px solid #c9c6e6; background: #f5f5fb; border-radius: 10px; padding: 16px 18px; }
.audio-get-card h3{ margin: 0 0 8px; font-size: 1rem; color: #2c2a5e; }
.audio-get-card p{ margin: 0 0 10px; font-size: .92rem; line-height: 1.8; }
.audio-get-note{ font-size: .82rem !important; color: #4b5563; }
.audio-feed-url{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.audio-feed-url input{ flex: 1 1 200px; font-size: .85rem; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; }
.audio-tracks{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.audio-track{ border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 16px; }
.audio-track-head{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.audio-track-num{ font-weight: 700; color: #4a4694; }
.audio-track-title{ font-weight: 600; }
.audio-track-size{ font-size: .8rem; color: #6b7280; margin-left: auto; }
.audio-track audio{ width: 100%; }
.audio-track-actions{ margin: 6px 0 0; font-size: .85rem; }
.audio-paper-note{ margin-top: 24px; font-size: .85rem; color: #6b7280; }
.audio-terms{ font-size: .85rem; color: #4b5563; background: #f9fafb; border-left: 3px solid #d1d5db; padding: 8px 12px; margin: 0 0 20px; }

/* JICTA のロゴが話す吹き出し（2026-09-30。キャラクターの語尾をやめ、ロゴが「です・ます」で話す） */
.jicta-say{ display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.jicta-say-face{
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: #1d4ed8;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(29,78,216,.28);
}
.jicta-say-face img{ width: 30px; height: auto; display: block; }
.jicta-say-bubble{
  position: relative; flex: 1; margin: 0; padding: 10px 14px; line-height: 1.75; font-size: .97rem;
  background: #fff; border: 1.5px solid #bfdbfe; border-radius: 12px; color: #1f2937;
}
.jicta-say-bubble::before{
  content: ""; position: absolute; left: -9px; top: 14px;
  border-style: solid; border-width: 7px 9px 7px 0; border-color: transparent #bfdbfe transparent transparent;
}
.jicta-say-bubble::after{
  content: ""; position: absolute; left: -7px; top: 15px;
  border-style: solid; border-width: 6px 8px 6px 0; border-color: transparent #fff transparent transparent;
}
.jicta-say-who{ display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: #2563eb; margin-bottom: 2px; }
.jicta-say.is-success .jicta-say-bubble{ background: #f0fdf4; border-color: #86efac; }
.jicta-say.is-success .jicta-say-bubble::before{ border-right-color: #86efac; }
.jicta-say.is-success .jicta-say-bubble::after{ border-right-color: #f0fdf4; }
.jicta-say.is-success .jicta-say-who{ color: #166534; }
.jicta-say.is-warn .jicta-say-bubble{ background: #fffbeb; border-color: #fcd34d; }
.jicta-say.is-warn .jicta-say-bubble::before{ border-right-color: #fcd34d; }
.jicta-say.is-warn .jicta-say-bubble::after{ border-right-color: #fffbeb; }
.jicta-say.is-warn .jicta-say-who{ color: #92400e; }
.quiz-score .jicta-say{ margin: 10px 0 0; }

/* 本部からの学習メッセージ（admin/users/message.php・admin/learning/index.php。2026-10-14） */
.hq-bulk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.hq-recipients { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 18px; }
.hq-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #e5e7eb; color: #374151; font-size: .85rem; }
.hq-form { max-width: 760px; }
.hq-form textarea { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.7; }
.hq-form input[type=text] { width: 100%; box-sizing: border-box; }
.hq-fields { margin: 0 0 14px; font-size: .88rem; }
.hq-fields table { margin-top: 8px; }
.hq-fields td { padding: 3px 12px 3px 0; vertical-align: top; }
.hq-check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0; }
.hq-preview-table { margin-bottom: 18px; }
.hq-preview-sample { margin: 0 0 12px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 14px; background: #fff; max-width: 760px; }
.hq-preview-sample summary { cursor: pointer; font-weight: 700; }
.hq-preview-subject { font-weight: 700; margin: 10px 0 6px; }
.hq-preview-body { white-space: normal; line-height: 1.8; background: #f9fafb; border-radius: 6px; padding: 12px 14px; }
.hq-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
td.nowrap { white-space: nowrap; }
.learning-progress-cell { min-width: 120px; white-space: nowrap; }
.hq-form textarea, .hq-form input[type=text], .hq-form select { font-weight: 400; }
.hq-warning { background: #fef9c3; color: #713f12; border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; max-width: 760px; line-height: 1.7; }
.hq-flag-check { flex-basis: 100%; }

/* 表彰状の発送（本部の郵送管理）。2026-10-21 */
.award-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.award-tab { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #e5e7eb; color: #374151; text-decoration: none; font-size: .92rem; }
.award-tab:hover { background: #d1d5db; text-decoration: none; }
.award-tab.is-current { background: #1d4ed8; color: #fff; font-weight: 700; }
.award-tab-count { display: inline-block; margin-left: 4px; font-weight: 700; }
.award-table th, .award-table td { padding: 10px 12px; vertical-align: top; text-align: left; line-height: 1.7; }
.award-table td.award-user, .award-table td.award-address { white-space: normal; min-width: 200px; }
.award-table td.award-mail { min-width: 190px; }
.award-table td:nth-child(3) { min-width: 170px; }
.award-table td:nth-child(4) { min-width: 160px; }
.award-id { font-family: "SF Mono", Menlo, monospace; font-size: .85rem; color: #374151; }
.award-form { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.award-form input[type=date] { font: inherit; padding: 4px 6px; }
.award-table .nowrap { white-space: nowrap; }
.award-live { margin: 0 0 14px; padding: 10px 14px; border-radius: 6px; line-height: 1.7; }
.award-live[hidden] { display: none; }