/*
Theme Name: IT資格の森
Description: IT資格の森（サブスク会員サイト）専用テーマ。参考書クオリティ＝深緑×オフホワイト、明朝の見出し、罫線と余白で構造を作る。影・グラデーション・絵文字は使わない。
Author: エンジニアK
Version: 0.1.0
*/

/* =========================================================================
   トークン
   ========================================================================= */

:root {
    --bg:          #FAF9F5;
    --bg-alt:      #F3F1EA;
    --bg-deep:     #1B4D3E;

    --ink:         #1A1A16;
    --ink-sub:     #3D3B34;
    --ink-muted:   #6B6759;
    --ink-invert:  #F7F6F1;

    --green:       #1B4D3E;
    --green-dark:  #123528;
    --green-tint:  #EAF0EC;

    /* いま開いている資格の色。functions.php の itsm_course_color_style() が
       コースに属するページでだけ上書きする（既定は深緑＝サイトの地色）。
       罫線・帯・進捗バーがこの1色から決まるので、資格を移ると画面の色が変わる。 */
    --course:      #1B4D3E;

    --rule:        #DCD8CB;
    --rule-strong: #B9B4A3;

    /* 游書体はWindowsで細く読みづらい。学習サイトなので可読性を最優先し、
       Windowsでは BIZ UDゴシック／UD明朝（教科書・学習教材向けのUDフォント）を先に使う。
       Macは Hiragino が十分な太さなのでそちらを優先。 */
    --serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro",
             "BIZ UDPMincho", "BIZ UDMincho",
             "Yu Mincho Demibold", "游明朝 Demibold", "Yu Mincho", YuMincho,
             "Noto Serif JP", serif;
    --sans:  "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "BIZ UDPGothic", "BIZ UDGothic",
             Meiryo, "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
             "Noto Sans JP", system-ui, sans-serif;

    --w-wide:  1080px;
    --w-base:   960px;
    --w-prose:  720px;

    --step: 8px;
}

/* =========================================================================
   ベース
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    /* Mac(Hiragino)では少し太い字面を選ばせ、WindowsのBIZ UDPゴシックでは
       Regular（既に十分太い）が使われる。どちらでも痩せない */
    font-weight: 500;
    line-height: 1.88;
    letter-spacing: 0.015em;
    font-feature-settings: "palt" 1;
    text-rendering: optimizeLegibility;
    /* -webkit-font-smoothing: antialiased は使わない。文字が痩せて読みづらくなる */
}

img { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--green-dark); }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin: 0;
}

p { margin: 0 0 1.4em; }
ul, ol { margin: 0 0 1.4em; padding-left: 1.4em; }
li { margin-bottom: 0.5em; }

.wrap      { width: min(100% - 2.5rem, var(--w-base)); margin-inline: auto; }
.wrap--wide  { width: min(100% - 2.5rem, var(--w-wide)); margin-inline: auto; }
.wrap--prose { width: min(100% - 2.5rem, var(--w-prose)); margin-inline: auto; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 小見出しラベル。英字の小さいキャプション */
.eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 1em;
}

/* =========================================================================
   ヘッダー
   ========================================================================= */

.site-header {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.4rem 0;
}

.site-logo {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.site-logo:hover { color: var(--green); }

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav li { margin: 0; }
.site-nav a {
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--ink-sub);
    text-decoration: none;
}
.site-nav a:hover { color: var(--green); }

.site-nav .is-cta a {
    border: 1px solid var(--green);
    color: var(--green);
    padding: 0.5em 1.3em;
}
.site-nav .is-cta a:hover {
    background: var(--green);
    color: var(--ink-invert);
}

/* =========================================================================
   ボタン
   ========================================================================= */

.btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    padding: 1em 2.6em;
    border: 1px solid var(--green);
    background: var(--green);
    color: var(--ink-invert);
    border-radius: 2px;
    transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--ink-invert); }

.btn--ghost { background: transparent; color: var(--green); }
.btn--ghost:hover { background: var(--green); color: var(--ink-invert); }

.btn--sm { font-size: 13px; padding: 0.7em 1.6em; }

.btn-note {
    margin-top: 0.9em;
    font-size: 13px;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
}

/* =========================================================================
   セクションの土台
   ========================================================================= */

.section { padding: 5.5rem 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section--tint { background: var(--bg-alt); }

.section__head { margin-bottom: 3rem; }
.section__title {
    font-size: clamp(22px, 3vw, 28px);
    letter-spacing: 0.08em;
}
.section__lead {
    margin: 1.1em 0 0;
    color: var(--ink-sub);
    font-size: 16px;
    max-width: var(--w-prose);
}

/* =========================================================================
   ヒーロー
   ========================================================================= */

.hero { padding: 6.5rem 0 5rem; }

.hero__title {
    font-size: clamp(30px, 5.4vw, 50px);
    line-height: 1.45;
    letter-spacing: 0.06em;
    margin: 0 0 1rem;
}

.hero__lead {
    max-width: 34em;
    font-size: 17.5px;
    color: var(--ink-sub);
    margin-bottom: 2.6rem;
}

.hero__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

.hero__price {
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--ink-sub);
}
.hero__price strong {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
}

/* 実績の数字 */
.figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 4.5rem;
    border-top: 1px solid var(--rule);
}
.figures__item {
    flex: 1 1 180px;
    padding: 1.8rem 1.6rem 1.6rem 0;
    border-right: 1px solid var(--rule);
}
.figures__item:last-child { border-right: 0; }
.figures__num {
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    display: block;
}
.figures__num span { font-size: 15px; margin-left: 0.3em; letter-spacing: 0.08em; }
.figures__label {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    margin-top: 0.5em;
    display: block;
}

/* =========================================================================
   2つの柱（講義動画 / 問題演習）
   ========================================================================= */

.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule-strong);
}
.pillar {
    padding: 2.6rem 2.4rem 2.4rem 0;
    border-bottom: 1px solid var(--rule);
}
.pillar + .pillar {
    border-left: 1px solid var(--rule);
    padding-left: 2.4rem;
}
.pillar__no {
    font-family: var(--serif);
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--green);
    margin: 0 0 1rem;
}
.pillar__title {
    font-size: 23px;
    letter-spacing: 0.08em;
    margin-bottom: 1.1rem;
}
.pillar__body { font-size: 15.5px; color: var(--ink-sub); margin-bottom: 1.6rem; }
.pillar__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pillar__list li {
    margin: 0;
    padding: 0.7em 0 0.7em 1.4em;
    border-bottom: 1px solid var(--rule);
    font-size: 15px;
    position: relative;
}
.pillar__list li::before {
    content: "";
    position: absolute;
    left: 0; top: 1.35em;
    width: 7px; height: 1px;
    background: var(--green);
}

/* 講義動画／問題演習のアイコン。
   ⚠️ 絵文字も生成イラストも使わない。製図と同じ細さの線画にして、
      罫線でできているページの中に馴染ませる（2026-07-26 追加）。 */
.pillar__icon {
    display: block;
    width: 62px;
    height: 62px;
    color: var(--green);
    margin-bottom: 1.3rem;
}
.pillar__icon svg { display: block; width: 100%; height: 100%; }

/* =========================================================================
   図：学習のひとまわり（見る → 解く → 間違いが残る → 間違いだけ解き直す）
   「Udemyではできなかった間違えた問題だけの出題」が、どこで効くのかを示す。
   ========================================================================= */

.flow {
    display: flex;
    align-items: stretch;
    gap: .7rem;
    margin-top: 3.2rem;
}
.flow__step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.2rem 1.3rem;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--rule-strong);
}
/* 04 がこのサイトの売り。ここだけ地色と罫線の色を変えて視線を止める */
.flow__step.is-key {
    border-top-color: var(--green);
    background: var(--green-tint);
}
.flow__no {
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--green);
    margin-bottom: .7rem;
}
.flow__title {
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .04em;
    margin-bottom: .6rem;
}
.flow__body { font-size: 13px; line-height: 1.8; color: var(--ink-sub); }

.flow__arw {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rule-strong);
}
.flow__arw svg { display: block; width: 22px; height: 22px; }

.flow__loop {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1rem 0 0;
    padding: .9rem 1.2rem;
    border: 1px dashed var(--rule-strong);
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ink-sub);
}
.flow__loop-icon { flex: none; color: var(--green); }
.flow__loop-icon svg { display: block; width: 22px; height: 22px; }

@media (max-width: 820px) {
    .flow { flex-direction: column; gap: .4rem; }
    .flow__arw { transform: rotate(90deg); }
}

/* =========================================================================
   資格ラインナップ（罫線だけで構成する表）
   ========================================================================= */

.lineup-group + .lineup-group { margin-top: 3.4rem; }

.lineup-group__head {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.lineup-group__label {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--green);
    margin: 0;
}
.lineup-group__note { font-size: 13px; color: var(--ink-muted); margin: 0; }

.lineup { border-top: 1px solid var(--rule-strong); }

.lineup__name small {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-top: 0.35em;
}

.lineup__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 1rem 2rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
}
a.lineup__row:hover { background: var(--green-tint); }

.lineup__name {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.lineup__desc {
    grid-column: 1 / -1;
    margin: 0.4em 0 0;
    font-size: 15px;
    color: var(--ink-muted);
}
.lineup__meta {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ink-sub);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.lineup__soon {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    border: 1px solid var(--rule-strong);
    padding: 0.2em 0.7em;
}

/* =========================================================================
   価値（Udemyとの違い）
   ========================================================================= */

.points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
.points__item {
    padding: 2.2rem 2rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.points__num {
    font-family: var(--serif);
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--green);
    display: block;
    margin-bottom: 1.1em;
}
.points__title {
    font-size: 17px;
    margin-bottom: 0.8em;
    letter-spacing: 0.06em;
}
.points__body {
    font-size: 15px;
    color: var(--ink-sub);
    margin: 0;
    line-height: 1.85;
}

/* =========================================================================
   料金
   ========================================================================= */

.plan {
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    padding: 3rem 2.6rem;
    max-width: 480px;
}
.plan__name {
    font-size: 15px;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    font-family: var(--sans);
    font-weight: 700;
    margin-bottom: 1.2rem;
}
.plan__price {
    font-family: var(--serif);
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}
.plan__price span { font-size: 16px; letter-spacing: 0.08em; margin-left: 0.4em; }
.plan__tax { font-size: 13px; color: var(--ink-muted); margin: 0.9em 0 2rem; }

.plan__list { list-style: none; margin: 0 0 2.4rem; padding: 0; border-top: 1px solid var(--rule); }
.plan__list li {
    margin: 0;
    padding: 0.85em 0 0.85em 1.5em;
    border-bottom: 1px solid var(--rule);
    font-size: 14.5px;
    position: relative;
}
.plan__list li::before {
    content: "";
    position: absolute;
    left: 0; top: 1.55em;
    width: 8px; height: 1px;
    background: var(--green);
}

/* =========================================================================
   FAQ
   ========================================================================= */

.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); padding: 1.7rem 0; }
.faq__q {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 0.7em;
}
.faq__a { margin: 0; font-size: 15.5px; color: var(--ink-sub); }

/* =========================================================================
   コース詳細（カリキュラム）
   ========================================================================= */

/* -------------------------------------------------------------------------
   資格の帯
   コースに属するページ（カリキュラム・レッスン・演習）の先頭に必ず出す。
   資格が5つに増えると、演習の途中で「どれを解いているのか」が分からなくなるため。
   ⚠️ ロゴ・バッジは商標上つかえないので、識別は「太い色の罫線 + 資格名」で行う。
   ------------------------------------------------------------------------- */
.coursebar {
    border-top: 5px solid var(--course);
    border-bottom: 1px solid var(--rule);
    background: var(--bg-alt);
}
.coursebar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem 1.1rem;
    padding: .85rem 0 .8rem;
}
.coursebar__label {
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--ink-muted);
}
.coursebar__name {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .06em;
}
.coursebar__name a { color: var(--course); text-decoration: none; }
.coursebar__name a:hover { text-decoration: underline; }
.coursebar__org { font-size: 12px; color: var(--ink-muted); letter-spacing: .05em; }
.coursebar__nav { margin-left: auto; display: flex; gap: 1.2rem; }
.coursebar__nav a {
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--ink-sub);
    text-decoration: none;
    padding-bottom: .15rem;
    border-bottom: 2px solid transparent;
}
.coursebar__nav a:hover { color: var(--course); }
.coursebar__nav a.is-on { color: var(--course); border-bottom-color: var(--course); }

/* 帯のすぐ下に大見出しが来るので、その分だけ上の余白を詰める */
.has-course .page-head { padding-top: 3rem; }

@media (max-width: 640px) {
    /* ⚠️ flex-wrap を必ず入れる。3本目「インタラクティブ演習」はラベルが長く、
       折り返せないと狭い画面で横スクロールが出る（browser_test.py が見ている項目）。 */
    .coursebar__nav { margin-left: 0; width: 100%; gap: .6rem 1rem; flex-wrap: wrap; }
    .coursebar__org { width: 100%; }
}

.page-head { padding: 4.5rem 0 3rem; border-bottom: 1px solid var(--rule); }
.page-head__title {
    font-size: clamp(26px, 4vw, 38px);
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}
.page-head__meta {
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.page-head__lead { margin-top: 1.6rem; max-width: var(--w-prose); color: var(--ink-sub); }

.curriculum { border-top: 1px solid var(--rule-strong); }

.curriculum__section {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    padding: 2.2rem 0 0.8rem;
}

.lesson-row {
    display: grid;
    grid-template-columns: 3.2rem 1fr auto;
    align-items: center;
    gap: 1.2rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
}
a.lesson-row:hover { background: var(--green-tint); }

.lesson-row__no {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}
.lesson-row__title { font-size: 15.5px; letter-spacing: 0.04em; }
.lesson-row__title small {
    display: block;
    font-size: 13px;
    color: var(--ink-muted);
    margin-top: 0.25em;
    letter-spacing: 0.04em;
}
.lesson-row__state { display: flex; align-items: center; gap: 0.6rem; }

.badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.32em 0.8em;
    border: 1px solid var(--green);
    color: var(--green);
    white-space: nowrap;
}
.badge--muted { border-color: var(--rule-strong); color: var(--ink-muted); }

.lock { width: 13px; height: 13px; stroke: var(--ink-muted); fill: none; stroke-width: 1.6; flex: none; }
.lesson-row--locked .lesson-row__title { color: var(--ink-sub); }

/* -------------------------------------------------------------------------
   登録なし ↔ 会員 の対比
   鍵マークだけでは「何がどこまで無料か」が伝わらないので、両方を並べて出す。
   数字は実データから出しているので、開放を増減すれば自動で追従する。
   ------------------------------------------------------------------------- */
.plandiff {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
}
.plandiff__col { padding: 1.7rem 1.8rem 1.9rem; }
.plandiff__col + .plandiff__col { border-left: 1px solid var(--rule-strong); }
.plandiff__col--paid { background: var(--green-tint); }
.plandiff__head {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 1rem;
    padding-bottom: .7rem;
    border-bottom: 2px solid var(--rule-strong);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .8rem;
}
.plandiff__col--paid .plandiff__head { border-bottom-color: var(--green); color: var(--green); }
.plandiff__price {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--ink-sub);
}
.plandiff__list { margin: 0; padding: 0; list-style: none; }
.plandiff__list li {
    position: relative;
    padding-left: 1.1em;
    margin-bottom: .6em;
    font-size: 14.5px;
    line-height: 1.75;
}
.plandiff__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 6px;
    height: 1px;
    background: var(--rule-strong);
}
.plandiff__col--paid .plandiff__list li::before { background: var(--green); }

@media (max-width: 620px) {
    .plandiff__col + .plandiff__col { border-left: 0; border-top: 1px solid var(--rule-strong); }
}

/* 模擬試験の目次（コース詳細）。カリキュラムと同じで、中身は閉じても目次は見せる */
.lineup--mocks { margin: 1.8rem 0 2rem; }
.lineup--mocks .lineup__row { padding: 1.1rem 0; }
.lineup--mocks .lineup__name { font-size: 17px; display: flex; align-items: center; gap: .5em; }
.lineup--mocks .lineup__row.is-locked .lineup__name { color: var(--ink-sub); }
.lineup--mocks .badge { font-family: var(--sans); }

/* =========================================================================
   レッスン
   ========================================================================= */

.lesson-body { padding: 3.5rem 0 5rem; }
.lesson-body h2 {
    font-size: 22px;
    letter-spacing: 0.06em;
    margin: 3rem 0 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule);
}
.lesson-body h3 { font-size: 18px; margin: 2.4rem 0 1rem; letter-spacing: 0.06em; }
.lesson-body p, .lesson-body li { font-size: 17px; }

/* 高さは padding-top ではなく aspect-ratio で作る。
   padding で作った高さには min-height が効かず、下の下限指定ができないため */
.subsc-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 2.6rem; background: var(--ink); }
.subsc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 自前の再生ボタン。YouTube側が描くボタンはスマホ縦持ちで小さすぎて押せなかったので、
   押す対象をこちらで持つ（76px＝指の最小44pxを大きく超える）。
   押すと mu-plugin が持たせた data-src の iframe（autoplay付き）に差し替わる */
.subsc-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--ink);
    color: var(--ink-invert);
    border: 0;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.subsc-video__icon {
    position: relative;
    display: block;
    width: 76px;
    height: 76px;
    border: 2px solid var(--ink-invert);
    border-radius: 50%;
}
/* 三角は線と地色だけで作る（画像・絵文字を使わない） */
.subsc-video__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-38%, -50%);
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent var(--ink-invert);
}
.subsc-video__play:hover .subsc-video__icon,
.subsc-video__play:focus-visible .subsc-video__icon { border-color: #fff; }
.subsc-video__play:focus-visible { outline: 3px solid var(--course); outline-offset: -3px; }

/* ⚠️ スマホの縦持ちで再生できなくなる問題（2026-07-29 ユーザー報告）
   本文の横余白の中に 16:9 で置くと、iPhone縦持ちで player が 335〜350×約190px になる。
   YouTube の埋め込みプレイヤーは小さすぎると中央の再生ボタンを縮める／出さないため、
   タップしても再生が始まらない（横向きにすると押せた＝高さ不足が原因）。
   → 縦持ちでは本文の余白を外して画面いっぱいに広げ、さらに高さの下限を決める。
   下限に届かない幅では左右に地色が出るが、背景が --ink なので黒枠として自然に見える */
@media (max-width: 640px) {
    .subsc-video {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        min-height: 260px;
    }
}

.lesson-nav {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.6rem;
    margin-top: 3.5rem;
    font-size: 14px;
}
.lesson-nav a { text-decoration: none; }
.lesson-nav span { display: block; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-muted); }

/* 非会員に見せる案内 */
.subsc-teaser { color: var(--ink-sub); }

.subsc-paywall {
    border: 1px solid var(--rule-strong);
    background: var(--bg-alt);
    padding: 2.8rem 2.4rem;
    margin: 3rem 0 0;
    text-align: center;
}
.subsc-paywall__lead {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 0.8em;
}
.subsc-paywall__desc { font-size: 14.5px; color: var(--ink-sub); margin: 0 0 2rem; }
.subsc-paywall__cta { margin: 0; }
.subsc-paywall__login { font-size: 13px; color: var(--ink-muted); margin: 1.6em 0 0; }

.subsc-cta { margin: 2rem 0; }
.subsc-note { font-size: 14px; color: var(--ink-muted); }

/* 演習画面のスクショ直下に置く「いま試せる」導線 */
.shots-cta {
    margin: 2.6rem 0 0;
    text-align: center;
}
.shots-cta__note {
    display: block;
    font-size: 13.5px;
    color: var(--ink-sub);
    margin-top: 1em;
}

/* 登録不要のお試し演習。有料の案内より先に、目立つ側に置く */
.free-trial {
    border-top: 3px solid var(--green);
    border-bottom: 1px solid var(--rule);
    padding: 2.2rem 0 2.6rem;
}
.free-trial__label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--green);
    margin: 0 0 0.9em;
}
.free-trial__title {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 0.5em;
}
.free-trial__desc { font-size: 15px; color: var(--ink-sub); margin: 0 0 1.8rem; }
.free-trial__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }

/* お試し中であることの注記（演習画面の見出し下） */
.guest-note {
    font-size: 13.5px;
    color: var(--ink-sub);
    background: var(--bg-alt);
    border-left: 3px solid var(--rule-strong);
    padding: 0.7em 1em;
    margin: 1.2rem 0 0;
}

/* お試しの結果画面から入会へつなぐ */
.quiz-guest-end {
    border: 1px solid var(--rule-strong);
    background: var(--bg-alt);
    padding: 2.2rem 2rem;
    margin: 2.6rem 0 0;
    text-align: center;
}
.quiz-guest-end__lead {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 0.7em;
}
.quiz-guest-end__desc {
    font-size: 14.5px;
    color: var(--ink-sub);
    margin: 0 0 1.8rem;
    text-align: left;
}

/* mu-plugin側のボタンもテーマに合わせる */
.subsc-btn {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    padding: 1em 2.6em;
    border: 1px solid var(--green);
    background: var(--green);
    color: var(--ink-invert);
    border-radius: 2px;
}
.subsc-btn:hover { background: var(--green-dark); color: var(--ink-invert); }
.subsc-btn--sub { background: transparent; color: var(--green); }
.subsc-btn--sub:hover { background: var(--green); color: var(--ink-invert); }

/* =========================================================================
   固定ページ・法務ページ
   ========================================================================= */

.prose { padding: 3.5rem 0 5.5rem; }
.prose h2 {
    font-size: 20px;
    letter-spacing: 0.06em;
    margin: 3rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
}
.prose h3 { font-size: 16.5px; margin: 2rem 0 0.8rem; }
.prose p, .prose li { font-size: 16.5px; }

.deftable { width: 100%; border-collapse: collapse; margin: 0 0 2.5rem; font-size: 15.5px; }
.deftable th, .deftable td {
    text-align: left;
    vertical-align: top;
    padding: 1em 1.2em;
    border-bottom: 1px solid var(--rule);
}
.deftable th {
    width: 12em;
    font-weight: 700;
    color: var(--ink-sub);
    background: var(--bg-alt);
    letter-spacing: 0.06em;
}
.deftable tr:first-child th, .deftable tr:first-child td { border-top: 1px solid var(--rule-strong); }

.todo {
    background: #FFF8E1;
    border-left: 3px solid #C79A2E;
    padding: 1em 1.2em;
    font-size: 14px;
    color: #6B5314;
}

/* =========================================================================
   マイページ
   ========================================================================= */

.mypage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}
.progress-card { border-top: 3px solid var(--course); padding-top: 1.3rem; }
.progress-card__name {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 0.9rem;
}
.progress-bar { height: 3px; background: var(--rule); position: relative; margin-bottom: 0.7rem; }
.progress-bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--course); }
.progress-card__meta {
    font-size: 12.5px;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}
.progress-card__org {
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: .06em;
    margin: -0.6rem 0 1.1rem;
}
.progress-card__row {
    font-size: 11.5px;
    letter-spacing: .14em;
    color: var(--ink-muted);
    margin: 1.3rem 0 .45rem;
}
.progress-card__links { margin-top: .9rem; display: flex; flex-direction: column; gap: .3rem; }

/* 到達度の内訳（金→銀→銅→未挑戦）。
   数字だけだと「あとどれくらいか」が掴めないので帯で見せる。 */
.masterybar {
    display: flex;
    height: 10px;
    background: var(--rule);
    margin-bottom: .7rem;
    overflow: hidden;
}
.masterybar__seg { display: block; height: 100%; }
.masterybar__seg.is-gold   { background: var(--course); }
.masterybar__seg.is-silver { background: var(--course); opacity: .55; }
.masterybar__seg.is-bronze { background: var(--course); opacity: .28; }
.masterybar__seg.is-unseen { background: transparent; }

/* -------------------------------------------------------------------------
   消化率のドーナツ
   「一度でも解いたか」だけを表す。正解できたかは金銀銅の帯が担当。
   ⚠️ 円は塗らない（fill:none）。塗ると中央の数字が読めなくなる。
   ------------------------------------------------------------------------- */
.donut {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.donut svg { display: block; }
.donut__track { fill: none; stroke: var(--rule); stroke-width: 3.6; }
.donut__val {
    fill: none;
    stroke: var(--course);
    stroke-width: 3.6;
    stroke-linecap: butt;
}
.donut__pct {
    position: absolute;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink-sub);
    font-variant-numeric: tabular-nums;
}
.donut__pct i { font-style: normal; font-size: 9px; margin-left: .05em; }
.donut.is-done .donut__pct { color: var(--course); }

/* 大きい版（演習トップの見出し）は数字も大きく */
.page-head__with-donut { display: flex; align-items: center; gap: 1.6rem; }
.page-head__with-donut .donut__pct { font-size: 18px; }
.page-head__with-donut .donut__pct i { font-size: 12px; }

/* マイページのカード内 */
.progress-card__quiz { display: flex; align-items: flex-start; gap: 1rem; }
.progress-card__quizbody { flex: 1; min-width: 0; }

/* -------------------------------------------------------------------------
   模擬試験・章別ごとの進み具合
   合算では「どの模試が手つかずか」が読めないので、1本ずつ同じ形で並べる。
   ------------------------------------------------------------------------- */
.setlist { margin: 0 0 3rem; }
.setlist__course {
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: .06em;
    margin: 0 0 .9rem;
    padding-left: .7rem;
    border-left: 4px solid var(--course);
}
.setlist__kind {
    font-size: 11.5px;
    letter-spacing: .16em;
    color: var(--ink-muted);
    margin: 1.4rem 0 .5rem;
}
/* -------------------------------------------------------------------------
   進み具合（円を並べる）
   ⚠️ 行に1本ずつ並べると「一覧」に見えて、模試が3本あることが図として伝わらない
      （2026-07-26 ユーザー指摘）。セットの数だけ円が並ぶ形にする。
   ------------------------------------------------------------------------- */
.dash {
    margin: 2.6rem 0 3rem;
    padding: 1.8rem 0 1.4rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.dash__title {
    font-family: var(--serif);
    font-size: 18px;
    letter-spacing: .1em;
    margin: 0 0 .5rem;
}
.dash__note {
    font-size: 12.5px;
    color: var(--ink-muted);
    letter-spacing: .05em;
    margin: 0 0 .5rem;
}
.dash__kind {
    font-size: 11.5px;
    letter-spacing: .16em;
    color: var(--ink-muted);
    margin: 1.9rem 0 .9rem;
    display: flex;
    align-items: baseline;
    gap: .8em;
}
.dash__kind span {
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    color: var(--ink-sub);
}

.dgrid { display: flex; flex-wrap: wrap; gap: 1.7rem 1.3rem; }
.dgrid__item {
    width: 116px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
}
.dgrid__item:hover .donut__pct { color: var(--course); }
.dgrid__item:hover .dgrid__name { text-decoration: underline; }
.dgrid__name {
    font-family: var(--serif);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.4;
    text-wrap: balance;
}
.dgrid__meta {
    font-size: 11.5px;
    color: var(--ink-muted);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
.dgrid .masterybar { width: 100%; height: 6px; margin: 0; }

@media (max-width: 560px) {
    .dgrid { gap: 1.4rem .9rem; justify-content: space-between; }
    .dgrid__item { width: calc(33.333% - .6rem); }
}

/* 演習トップの行に置く到達度の帯 */
.exam-row__head .masterybar { margin: .55rem 0 .45rem; max-width: 22rem; }
.lineup__bar { grid-column: 1 / -1; display: block; }
.lineup__bar .masterybar { margin: .55rem 0 0; height: 7px; }

@media (max-width: 560px) {
    .page-head__with-donut { gap: 1rem; }
}

/* =========================================================================
   フッター
   ========================================================================= */

.site-footer {
    border-top: 1px solid var(--rule);
    background: var(--bg-alt);
    padding: 3.5rem 0 2.5rem;
    margin-top: 0;
    font-size: 13.5px;
}
.site-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.site-footer__brand {
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: 0.12em;
    margin-bottom: 0.8em;
}
.site-footer__note { color: var(--ink-muted); font-size: 13px; max-width: 26em; }
.site-footer__contact { color: var(--ink-sub); font-size: 13px; margin-top: 0.9em; }
.site-footer__contact a { color: var(--ink-sub); }
.site-footer__contact a:hover { color: var(--green); }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer nav li { margin-bottom: 0.6em; }
.site-footer nav a { color: var(--ink-sub); text-decoration: none; }
.site-footer nav a:hover { color: var(--green); }
.site-footer__copy {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-muted);
    font-size: 12px;
    letter-spacing: 0.08em;
}

/* =========================================================================
   レスポンシブ
   ========================================================================= */

@media (max-width: 860px) {
    .site-header__inner { flex-wrap: wrap; gap: 1rem; }
    .site-nav ul { gap: 1.2rem; flex-wrap: wrap; }
    .section { padding: 4rem 0; }
    .hero { padding: 4rem 0 3rem; }
    .figures__item { flex-basis: 50%; border-right: 0; }
    .pillar { padding-right: 0; }
    .pillar + .pillar { border-left: 0; padding-left: 0; }
    .plan { padding: 2.2rem 1.6rem; }
    .deftable th, .deftable td { display: block; width: auto; }
    .deftable th { border-bottom: 0; }
}

@media (max-width: 560px) {
    body { font-size: 15.5px; }
    .lesson-row { grid-template-columns: 2.4rem 1fr; }
    .lesson-row__state { grid-column: 2; justify-content: flex-start; }
    .lineup__row { grid-template-columns: 1fr; }
    .lineup__meta { white-space: normal; }
}

@media print {
    .site-header, .site-footer, .subsc-paywall { display: none; }
}

/* =========================================================================
   問題演習
   ========================================================================= */

.quiz { max-width: 800px; margin-inline: auto; }

.quiz-loading, .quiz-empty, .quiz-error { color: var(--ink-muted); }
.quiz-error { color: #9B2C2C; }

.quiz-bar {
    display: flex;
    align-items: baseline;
    gap: 1.4rem;
    flex-wrap: wrap;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--rule-strong);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
}
.quiz-bar__pos { font-family: var(--serif); font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.quiz-bar__domain { border: 1px solid var(--rule-strong); padding: 0.2em 0.8em; }
.quiz-bar__timer { margin-left: auto; font-variant-numeric: tabular-nums; }

.quiz-q { padding: 2.2rem 0 0.5rem; }
.quiz-q__text { font-size: 18.5px; line-height: 1.9; margin-bottom: 1.8rem; }
.quiz-q__text img { display: block; margin: 1.2em 0; border: 1px solid var(--rule); }

.quiz-choices { display: block; }
.quiz-choice {
    display: block;
    position: relative;
    padding: 1.05em 1.2em 1.05em 3.1em;
    border: 1px solid var(--rule);
    margin-bottom: 0.7rem;
    cursor: pointer;
    font-size: 17px;
    line-height: 1.85;
    background: var(--bg);
    transition: border-color .12s ease, background-color .12s ease;
}
.quiz-choice:hover { border-color: var(--rule-strong); }
.quiz-choice input { position: absolute; left: 1.15em; top: 1.35em; }
.quiz-choice.is-selected { border-color: var(--green); background: var(--green-tint); }
.quiz-choice.is-correct { border-color: var(--green); background: var(--green-tint); }
.quiz-choice.is-wrong { border-color: #C05621; background: #FDF3EC; }
.quiz-choice__exp {
    display: block;
    margin-top: 0.6em;
    padding-top: 0.6em;
    border-top: 1px dotted var(--rule-strong);
    font-size: 15.5px;
    color: var(--ink-sub);
}

.quiz-result { margin-top: 2rem; border-top: 2px solid var(--green); padding-top: 1.4rem; }
.quiz-result.is-wrong { border-top-color: #C05621; }
/* 正誤が出た行。右端に「次へ」を置く。
   解説は長いものだと画面数個ぶんあり、下の操作列まで
   スクロールしないと次に進めなかった（2026-07-26 ユーザー指摘）。 */
.quiz-result__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.quiz-result__verdict {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0;
}
.quiz-result__next { flex: none; align-self: center; }
.quiz-result.is-correct .quiz-result__verdict { color: var(--green); }
.quiz-result.is-wrong .quiz-result__verdict { color: #C05621; }

.quiz-exp { font-size: 16.5px; line-height: 1.95; color: var(--ink-sub); }
.quiz-exp img { display: block; max-width: 100%; margin: 1.2em 0; border: 1px solid var(--rule); }
.quiz-exp a { text-decoration: underline; }
.quiz-exp strong { color: var(--ink); }

.quiz-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
}
.quiz-nav__center { flex: 1; text-align: center; }
.quiz-nav button:disabled { opacity: .35; cursor: default; }

.quiz-flag {
    background: none;
    border: 1px solid var(--rule-strong);
    color: var(--ink-muted);
    font-size: 12.5px;
    letter-spacing: 0.08em;
    padding: 0.5em 1.2em;
    cursor: pointer;
    font-family: var(--sans);
}
.quiz-flag.is-on { border-color: #C79A2E; color: #8A6A16; background: #FFF8E1; }

.quiz-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule);
}
.quiz-grid__cell {
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid var(--rule);
    background: var(--bg);
    color: var(--ink-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    font-family: var(--sans);
}
.quiz-grid__cell.is-answered { background: var(--green-tint); border-color: var(--green); color: var(--green); }
.quiz-grid__cell.is-flagged { border-color: #C79A2E; }
.quiz-grid__cell.is-current { outline: 2px solid var(--ink); outline-offset: 1px; }
.quiz-submit { flex-basis: 100%; margin-top: 1.8rem; }

.quiz-score { text-align: center; padding: 1rem 0 2.5rem; border-bottom: 1px solid var(--rule); }
.quiz-score__num { font-family: var(--serif); font-size: 68px; font-weight: 600; line-height: 1; margin: 0 0 .5rem; }
.quiz-score__num span { font-size: 24px; margin-left: .1em; }
.quiz-score__detail { font-size: 14px; color: var(--ink-muted); margin: 0; }
.quiz-score__verdict {
    margin: 1.2rem 0 0;
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: 0.1em;
}
.quiz-score__verdict.is-pass { color: var(--green); }
.quiz-score__verdict.is-fail { color: #C05621; }

.quiz-domains { padding: 2.5rem 0; border-bottom: 1px solid var(--rule); }
.quiz-domain {
    display: grid;
    grid-template-columns: 14em 1fr 7em;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    font-size: 13.5px;
}
.quiz-domain__bar { height: 3px; background: var(--rule); position: relative; display: block; }
.quiz-domain__fill { position: absolute; inset: 0 auto 0 0; background: var(--green); display: block; }
.quiz-domain__rate { text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.quiz-review { padding: 2.5rem 0; }
.quiz-review__item { border-bottom: 1px solid var(--rule); }
.quiz-review__q { padding: 1.1em 0; cursor: pointer; font-size: 16px; }
.quiz-review__body { padding: 0 0 2rem; }

.quiz-actions { display: flex; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

.quiz-review-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    border: 1px solid var(--rule-strong);
    background: var(--bg-alt);
    padding: 2rem 2.2rem;
}
.quiz-review-cta__label { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-muted); margin: 0 0 .3em; }
.quiz-review-cta__num { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; margin: 0; }
.quiz-review-cta__num span { font-size: 16px; margin-left: .2em; }
.quiz-review-cta__note { font-size: 13px; color: var(--ink-muted); margin: .7em 0 0; }

@media (max-width: 560px) {
    .quiz-domain { grid-template-columns: 1fr; gap: .3rem; }
    .quiz-domain__rate { text-align: left; }
    .quiz-choice { padding-left: 2.8em; }
    .quiz-score__num { font-size: 52px; }
}

/* 模試の一覧（2つの解き方を並べる） */
.exam-list { border-top: 1px solid var(--rule-strong); }
.exam-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
}
.exam-row__name {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    display: block;
}
.exam-row__meta {
    font-size: 13.5px;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}
.exam-row__head { flex: 1 1 14rem; }
/* 非会員に見せる鍵つきの模試。並べるが押せない */
.exam-row.is-locked .exam-row__name { color: var(--ink-sub); display: flex; align-items: center; gap: .5em; }
.exam-row.is-locked .exam-row__meta { color: var(--ink-muted); }
.exam-row__name .lock { width: 15px; height: 15px; }
.guest-close { margin-top: 3.2rem; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.guest-close .subsc-cta { margin-top: 1.6rem; }
.exam-row__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.badge--hard { border-color: #B3541E; color: #A34A18; background: #FDF3EC; }
.exam-row__name .badge { margin-left: .7em; vertical-align: middle; font-family: var(--sans); }

/* =========================================================================
   習熟度（銅・銀・金）
   ========================================================================= */

.mastery-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    vertical-align: -1px;
    margin-right: .45em;
    border: 1px solid rgba(0,0,0,.18);
}
.mastery-dot.is-gold   { background: #C9A227; }
.mastery-dot.is-silver { background: #A9AAAE; }
.mastery-dot.is-bronze { background: #B07B4F; }
.mastery-dot.is-unseen { background: transparent; border-style: dashed; }

.mastery-bar {
    display: flex;
    height: 12px;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    overflow: hidden;
}
.mastery-bar__seg { display: block; height: 100%; }
.mastery-bar__seg.is-gold   { background: #C9A227; }
.mastery-bar__seg.is-silver { background: #A9AAAE; }
.mastery-bar__seg.is-bronze { background: #B07B4F; }
.mastery-bar__seg.is-unseen { background: #E7E3D8; }

.mastery-legend { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1rem; font-size: 14px; }
.mastery-legend__item { color: var(--ink-sub); }
.mastery-legend__item strong { font-family: var(--serif); font-size: 17px; margin: 0 .15em 0 .4em; }

.quiz-mastery { font-size: 12.5px; color: var(--ink-muted); letter-spacing: .1em; margin: 0 0 .8em; }
.quiz-result__mastery { font-size: 14px; font-family: var(--sans); font-weight: 400; margin-left: 1.2em; color: var(--ink-sub); }

/* 絞り込み */
.filters { margin-bottom: 2rem; }
.filters__row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.filters__label { font-size: 12px; letter-spacing: .16em; color: var(--ink-muted); min-width: 5.5em; }
.filters__chip {
    display: inline-block;
    font-size: 13.5px;
    letter-spacing: .04em;
    padding: .45em 1.1em;
    border: 1px solid var(--rule-strong);
    color: var(--ink-sub);
    text-decoration: none;
    background: var(--bg);
}
.filters__chip:hover { border-color: var(--green); color: var(--green); }
.filters__chip.is-on { background: var(--green); border-color: var(--green); color: var(--ink-invert); }

.lineup__row.is-empty { opacity: .45; }

.badge--resume { border-color: #C79A2E; color: #8A6A16; background: #FFF8E1; margin-left: .8em; }

/* 誤り報告 */
.quiz-report { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px dotted var(--rule-strong); }
.quiz-report__open {
    background: none; border: 0; padding: 0;
    color: var(--ink-muted); font-size: 13px; text-decoration: underline;
    cursor: pointer; font-family: var(--sans);
}
.quiz-report__open:hover { color: var(--green); }
.quiz-report__form { display: block; }
.quiz-report__lead { font-size: 13.5px; color: var(--ink-sub); margin: 0 0 .8em; }
.quiz-report__form select,
.quiz-report__form textarea {
    display: block; width: 100%; max-width: 34em;
    font-family: var(--sans); font-size: 14.5px;
    padding: .6em .8em; margin-bottom: .8em;
    border: 1px solid var(--rule-strong); background: var(--bg); color: var(--ink);
}
.quiz-report__actions { display: flex; gap: .7rem; }
.quiz-report__done { font-size: 14px; color: var(--green); margin: 0; }

.quiz-bar__timer.is-soon { color: #C05621; }
.quiz-bar__timer.is-up { color: #9B2C2C; font-weight: 700; }

/* 学習の記録 */
.history { padding: 3rem 0 1rem; border-top: 1px solid var(--rule); }
.history .figures { margin-top: 2rem; }
.history__sub {
    font-family: var(--serif);
    font-size: 16px;
    letter-spacing: .1em;
    margin: 3rem 0 1.2rem;
    color: var(--ink-sub);
}
.daybars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 110px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--rule-strong);
}
.daybar { flex: 1 1 auto; display: flex; align-items: flex-end; height: 100%; }
.daybar__fill { display: block; width: 100%; background: var(--green); min-height: 0; }
.daybar:hover .daybar__fill { background: var(--green-dark); }
/* 1日ぶんを資格ごとに積み上げる。色でどの資格を進めた日かが分かる */
.daybar__stack { display: flex; flex-direction: column-reverse; width: 100%; min-height: 0; }
.daybar__seg { display: block; width: 100%; background: var(--green); }
.daybar:hover .daybar__seg { filter: brightness(.85); }
.daybars__axis {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: .08em;
    margin: .6em 0 0;
}
.history__note {
    font-size: 12.5px;
    color: var(--ink-muted);
    letter-spacing: .05em;
    margin: -0.6rem 0 1rem;
}

/* 習得（金）の積み上がり。資格対策は数か月かかるので、
   「今どれだけ解いたか」より「どれだけ積み上がったか」が要る。 */
.growth { margin: 0 0 2.6rem; }
.growth__name {
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: .06em;
    margin: 0 0 .6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem 1rem;
    border-left: 4px solid var(--course);
    padding-left: .7rem;
}
.growth__num {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}
.growth__gain {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--course);
    letter-spacing: .06em;
}
.growth__bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 74px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--rule-strong);
}
.growth__bar { flex: 1 1 auto; display: flex; align-items: flex-end; height: 100%; }
.growth__fill { display: block; width: 100%; background: var(--course); min-height: 0; }
.growth__bar:hover .growth__fill { filter: brightness(.8); }

/* 履歴の行頭に置く資格の色 */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--green);
    margin-right: .45em;
    vertical-align: baseline;
}

.quiz-grid__cell.is-ok { background: var(--green); border-color: var(--green); color: #fff; }
.quiz-grid__cell.is-ng { background: #FDF3EC; border-color: #C05621; color: #A03D12; }

/* =========================================================================
   演習トップ（タブ＋絞り込み）
   ========================================================================= */

.tabs { display: flex; gap: 4px; margin: 3rem 0 0; border-bottom: 1px solid var(--rule-strong); }
.tabs__btn {
    font-family: var(--sans);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .85em 2.2em;
    border: 1px solid var(--rule-strong);
    border-bottom: 0;
    background: var(--bg-alt);
    color: var(--ink-muted);
    cursor: pointer;
    margin-bottom: -1px;
}
.tabs__btn.is-on { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--bg); }

.panel { padding: 2.4rem 0 0; }
.panel__lead { font-size: 15px; color: var(--ink-sub); max-width: var(--w-prose); }

.picker { border-top: 1px solid var(--rule); margin-top: 1.5rem; }
.picker__row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
}
.picker__label {
    flex: 0 0 6em;
    font-size: 12.5px;
    letter-spacing: .14em;
    color: var(--ink-muted);
    padding-top: .35em;
}
.picker__items { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }

.check {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}
.check input { width: 16px; height: 16px; accent-color: #1B4D3E; cursor: pointer; }
.check__n {
    font-size: 12.5px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    margin-left: .1em;
}

.mastery-dot.is-marked { background: #1B4D3E; }

.picker__actions { display: flex; gap: .6rem; margin: 1.6rem 0 1rem; }

.domains {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
.domain {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .9em 1.1em;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: 15px;
    cursor: pointer;
}
.domain input { width: 16px; height: 16px; accent-color: #1B4D3E; cursor: pointer; }
.domain__name { flex: 1; }
.domain__n {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink-sub);
    font-variant-numeric: tabular-nums;
}
.domain.is-empty { opacity: .4; }

.picker__go {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule-strong);
}
.picker__total { margin: 0; font-size: 15px; color: var(--ink-sub); }
.picker__total strong {
    font-family: var(--serif);
    font-size: 30px;
    margin: 0 .15em;
    color: var(--ink);
}
.btn.is-disabled { opacity: .35; pointer-events: auto; cursor: not-allowed; }

/* チェック（お気に入り） */
.quiz-mark {
    font-family: var(--sans);
    font-size: 12.5px;
    letter-spacing: .06em;
    padding: .35em 1em;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    color: var(--ink-muted);
    cursor: pointer;
}
.quiz-mark:hover { border-color: var(--green); color: var(--green); }
.quiz-mark.is-on { background: var(--green); border-color: var(--green); color: var(--ink-invert); }

@media (max-width: 640px) {
    .picker__row { flex-direction: column; gap: .5rem; }
    .picker__label { flex: none; }
    .tabs__btn { flex: 1; padding: .85em .6em; }
}

/* =========================================================================
   問題一覧（カテゴリ別・キーワード検索）
   ========================================================================= */

.tabs__btn--link { text-decoration: none; display: inline-block; }

.qsearch {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--rule-strong);
    margin-bottom: 2rem;
}
.qsearch input[type="search"] {
    flex: 1 1 22em;
    font-family: var(--sans);
    font-size: 16px;
    padding: .75em 1em;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    color: var(--ink);
}
.qsearch input[type="search"]:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.qsearch select {
    font-family: var(--sans);
    font-size: 15px;
    padding: .75em 1em;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    color: var(--ink);
}
.qsearch__count { margin: 0; font-size: 14px; color: var(--ink-muted); white-space: nowrap; }
.qsearch__count strong { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-right: .1em; }

.qgroup { margin-bottom: 3rem; }
.qgroup__title {
    font-size: 18px;
    letter-spacing: .08em;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--green);
    margin-bottom: 0;
}
.qgroup__n { font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: var(--ink-muted); margin-left: 1em; }

.qlist { list-style: none; margin: 0; padding: 0; }
.qitem { border-bottom: 1px solid var(--rule); margin: 0; }
.qitem__btn {
    display: flex;
    align-items: baseline;
    gap: .8em;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .95em .4em;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink);
}
.qitem__btn:hover { background: var(--green-tint); }
.qitem.is-open > .qitem__btn { background: var(--green-tint); font-weight: 700; }
.qitem__no {
    font-family: var(--serif);
    font-size: 13px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    flex: none;
}
.qitem__text {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.qitem__mark {
    flex: none;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--green);
    border: 1px solid var(--green);
    padding: .15em .6em;
}
.qitem__panel { padding: .5rem .4em 2rem; }
.qitem__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; align-items: center; }

@media (max-width: 560px) {
    .qsearch input[type="search"] { flex-basis: 100%; }
    .qitem__text { -webkit-line-clamp: 3; }
}

.qitem__text { font-weight: 700; }
.qitem__tags {
    flex: none;
    font-size: 12.5px;
    color: var(--ink-muted);
    letter-spacing: .04em;
}
.qitem__panel .quiz-q__text { font-size: 17px; margin-bottom: 1.4rem; }

/* カリキュラム内の動画サムネイル */
.lesson-row--video {
    display: grid;
    grid-template-columns: 3.2rem 200px 1fr auto;
    align-items: center;
    gap: 1.2rem;
    padding: 1.1rem 0;
}
.lesson-thumb {
    position: relative;
    display: block;
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--ink);
    cursor: pointer;
    line-height: 0;
    overflow: hidden;
}
.lesson-thumb img { width: 100%; height: auto; display: block; transition: opacity .15s ease; }
.lesson-thumb:hover img { opacity: .78; }
.lesson-thumb__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lesson-thumb__play svg { width: 46px; height: auto; }
.lesson-thumb__bg { fill: #212121; fill-opacity: .8; transition: fill-opacity .15s ease; }
.lesson-thumb:hover .lesson-thumb__bg { fill: #C00; fill-opacity: 1; }

.lesson-row__body { min-width: 0; }
.lesson-row__link {
    font-size: 16.5px;
    letter-spacing: .04em;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}
.lesson-row__link:hover { color: var(--green); text-decoration: underline; }
.lesson-row__body small {
    display: block;
    font-size: 13.5px;
    color: var(--ink-muted);
    margin-top: .3em;
}

.lesson-player {
    /* 再生を押したら、サムネイル幅ではなく行いっぱいに広げる（200pxのままでは見られない） */
    grid-column: 2 / -1;
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    background: var(--ink);
}
.lesson-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ⚠️ 再生中は列構成を組み替える（2026-07-27 修正）
   プレイヤーが 2/-1 で2〜4列目を占有すると、タイトルと尺が次の行へ送られ、
   **1列目（3.2rem）に入って「1文字ずつ改行」になる**（実際にそう表示された）。
   再生中だけ3列にして、2行目にタイトル(1fr)と尺を置き直す。 */
.lesson-row--playing { grid-template-columns: 3.2rem 1fr auto; }
.lesson-row--playing .lesson-player { grid-column: 2 / -1; }
.lesson-row--playing .lesson-row__body { grid-column: 2; min-width: 0; }
.lesson-row--playing .lesson-row__state { grid-column: 3; }

@media (max-width: 720px) {
    .lesson-row--video { grid-template-columns: 2.4rem 1fr; row-gap: .8rem; }
    .lesson-thumb, .lesson-player { grid-column: 2; width: 100%; }
    .lesson-row__body { grid-column: 2; }
    .lesson-row__state { grid-column: 2; }

    /* ⚠️⚠️ 再生中の3列指定を、ここで必ず打ち消す（2026-07-29 ユーザー報告で判明）
     *
     * `.lesson-row--playing` は3列（3.2rem 1fr auto）を前提に
     * `.lesson-row__state { grid-column: 3 }` を置いている。
     * ところがこの幅では列が「2.4rem 1fr」の**2列**になるため、3列目が
     * **暗黙に作られる**。暗黙列は中身（資料・尺・バッジ＝約190px）で幅が決まるので、
     * その分 `1fr` が潰れ、**プレイヤーが80px前後まで細くなっていた**。
     * `grid-column: 2 / -1` の `-1` は「明示グリッドの終端」＝2列目までを指すので、
     * プレイヤーは広がれない。
     *
     * 実機の症状は「スマホ縦持ちだと再生ボタンが小さすぎて押せない。横向きなら押せる」。
     * 横向き（721px以上）ではこのブロックが効かず3列指定が生きるので、正常に見えていた。
     * **画面幅で列数が変わるグリッドでは、状態クラス側の列番号も必ず上書きすること。**
     */
    .lesson-row--playing { grid-template-columns: 2.4rem 1fr; }
    .lesson-row--playing .lesson-player,
    .lesson-row--playing .lesson-row__body,
    .lesson-row--playing .lesson-row__state { grid-column: 2; }
}

/* カリキュラムの章区切り */
.chapter { margin-bottom: 3.2rem; }
.chapter__head {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    flex-wrap: wrap;
    padding-bottom: .7rem;
    border-bottom: 2px solid var(--green);
}
.chapter__no {
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ink-invert);
    background: var(--green);
    padding: .25em .7em;
}
.chapter__title { font-size: 19px; letter-spacing: .06em; margin: 0; }
.chapter__meta {
    margin-left: auto;
    font-size: 13px;
    color: var(--ink-muted);
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.chapter__free { color: var(--green); font-weight: 700; }
.chapter .curriculum { border-top: 0; }

.lesson-row__dur {
    font-size: 13px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    margin-right: .4em;
}
.curriculum-script { display: none; }

@media (max-width: 560px) {
    .chapter__meta { margin-left: 0; flex-basis: 100%; }
}

/* 章の小テストへの導線 */
.chapter__quiz { margin: 1rem 0 1.4rem; }

/* レッスン行の資料リンク */
.lesson-row__pdf {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--green);
    border: 1px solid var(--green);
    padding: .22em .7em;
    text-decoration: none;
    margin-right: .5em;
    white-space: nowrap;
}
.lesson-row__pdf:hover { background: var(--green); color: var(--ink-invert); }
.lesson-pdf { margin: 2.4rem 0 0; }

/* コースページ上部の目次 */
.course-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
}
.course-nav__main {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .5em 1.3em;
    border: 1px solid var(--green);
    color: var(--green);
    text-decoration: none;
}
.course-nav__main:hover { background: var(--green); color: var(--ink-invert); }
.course-nav__sep {
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--ink-muted);
    margin-left: 1rem;
}
.course-nav__ch {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 700;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule-strong);
    color: var(--ink-sub);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.course-nav__ch:hover { border-color: var(--green); background: var(--green-tint); color: var(--green); }

/* アンカーで飛んだとき見出しが上端に張り付かないように */
#practice, #curriculum, .chapter { scroll-margin-top: 1.5rem; }

/* LPの実画面。狭い画面では縦積みにする（横並びのままだと縮んで読めない） */
.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.6rem;
    align-items: start;
}
.shot figcaption {
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin-top: .7em;
    text-align: center;
}
.shot { margin: 0; }
.shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
}
.shot-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    margin-top: 2.4rem;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
.shot-note {
    padding: 1.6rem 1.6rem 1.4rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.shot-note__title {
    font-family: var(--serif);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0 0 .7em;
}
.shot-note__body { font-size: 14.5px; color: var(--ink-sub); margin: 0; line-height: 1.85; }

.lineup__free {
    display: inline-block;
    margin-left: .6em;
    font-size: 12px;
    color: var(--green);
    border: 1px solid var(--green);
    padding: .12em .55em;
}

/* レッスン下部の操作 */
.lesson-actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2.6rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--rule);
}
.js-done.is-done {
    background: var(--green);
    border-color: var(--green);
    color: var(--ink-invert);
}
.js-done.is-done::before { content: "✓ "; }

/* 講義スライドの実物 */
.slides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.6rem;
}
.slide { margin: 0; }
.slide img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule-strong);
    background: #fff;
}
.slide figcaption {
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin-top: .6em;
}

/* 運営者 */
.author {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 2rem;
    border-top: 1px solid var(--rule-strong);
    padding-top: 2rem;
}
.author__name {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .08em;
}
.author__body { max-width: var(--w-prose); }
.author__body p { font-size: 15.5px; color: var(--ink-sub); }

/* 講師アイコン。**Udemyの講師プロフィールと同じ画像**を出す（2026-07-29 ユーザー指示）。
   ⚠️ 「架空の人物のイラストは置かない」という方針とは矛盾しない。
      禁止しているのは実在しない人物をでっち上げることで、
      受講者がUdemyで見ているのと同じ目印を出すのは同一人物である証拠になる。
   ⚠️ 主役は下の数字なので小さく（56px）。丸く抜いて罫線1本だけ添える。 */
.author__icon {
    display: block;
    width: 56px;
    height: 56px;
    margin-bottom: .8rem;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    object-fit: cover;
}

/* 実績の数字。信頼はここで作る（顔ではなく検証できる事実で） */
.author__figures {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 1.6rem 0;
    padding: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.author__figures li {
    flex: 1 1 9rem;
    margin: 0;
    padding: 1rem 1.2rem 1rem 0;
}
.author__figures li + li {
    border-left: 1px solid var(--rule);
    padding-left: 1.2rem;
}
.author__figures b {
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.author__figures span { font-size: 13px; margin-left: .2em; color: var(--ink-sub); }
.author__figures em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin-top: .35em;
}
.author__proof { font-size: 13.5px; }
.author__contact { font-size: 14px; }

@media (max-width: 480px) {
    .author__figures li { flex-basis: 100%; padding-right: 0; }
    .author__figures li + li {
        border-left: 0;
        border-top: 1px solid var(--rule);
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .author { grid-template-columns: 1fr; gap: .8rem; }
}

/* 社内向けの「要記入」メモは管理者にだけ見せる（訪問者には出さない） */
.todo { display: none; }
body.is-admin .todo { display: block; }

/* 狭い画面（〜340px）でグリッドが溢れないように */
.shots, .pillars, .slides, .points, .shot-notes {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.lesson-actions__note { font-size: 13.5px; color: var(--ink-muted); }

/* URLで直接開いた問題を目立たせる（/quiz/list/#問題ID） */
.qitem.is-linked {
    background: var(--bg-alt);
    box-shadow: -3px 0 0 var(--green);
}

/* =========================================================================
   直近3回の正誤（問題一覧）
   習熟度（銅銀金）は「いまの状態」しか分からない。まぐれ当たりなのか
   安定して解けているのかは、直近の並びを見ないと判断できないため添える。
   ========================================================================= */

.qhist {
    flex: none;
    display: grid;
    grid-template-columns: repeat(3, 1.35em);
    gap: 0 .1em;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}
.qhist__c { font-style: normal; }
.qhist__c.is-o    { color: var(--green); font-weight: 700; }
.qhist__c.is-x    { color: #A34A18; font-weight: 700; }
.qhist__c.is-none { color: var(--rule-strong); }

/* 一覧の見出し行に「直近3回」のラベルを出す */
.qgroup__hint {
    display: flex;
    justify-content: flex-end;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--ink-muted);
    padding: 0 .4em .4rem 0;
}

/* 模試ごとの絞り込み */
.listnav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1.1rem;
    margin: 1.6rem 0 0;
    font-size: 13.5px;
}
.listnav__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ink-muted);
}
.listnav__item {
    color: var(--ink-sub);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: .15em;
}
.listnav__item:hover { color: var(--green); border-color: var(--green); }
.listnav__item.is-on {
    color: var(--green);
    font-weight: 700;
    border-bottom: 2px solid var(--green);
}

/* 演習トップから問題一覧へ */
.exam-row__list {
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--ink-sub);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    align-self: center;
}
.exam-row__list:hover { color: var(--green); border-color: var(--green); }

.lineup__main {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 1rem 2rem;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.lineup__row:has(.lineup__main) {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}
.lineup__row:has(.lineup__main):hover { background: var(--green-tint); }
.lineup__list {
    flex: none;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--ink-sub);
    text-decoration: none;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: .35em 1em;
}
.lineup__list:hover { color: var(--green); border-color: var(--green); }

@media (max-width: 560px) {
    .qhist { grid-template-columns: repeat(3, 1.2em); font-size: 12px; }
    .qitem__tags { display: none; }
}

/* 分野はシラバスの章立て順。番号を添えて「順番に意味がある」ことを示す */
.domain__no,
.qgroup__no {
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    flex: none;
}
.qgroup__no {
    font-size: 13px;
    color: var(--green);
    margin-right: .5em;
}

/* =========================================================================
   対象の資格（トップページ）
   分類ごとに縦に積むと「どの資格に対応しているのか」が一目で入らないため、
   1つのグリッドに畳んで、分類は各カードの肩に出す。
   ⚠️ 認定団体のロゴ・バッジは使えない。略称は自分たちで組んだ文字であり、
      認定バッジを模した形・色にはしないこと（丸バッジ・盾型にしない）。
   ========================================================================= */

.lineup-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem 1.4rem;
    margin: 0 0 2.2rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--rule);
}
.lineup-sum__now {
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: .06em;
}
.lineup-sum__now strong {
    font-size: 30px;
    font-weight: 600;
    color: var(--green);
    margin-right: .12em;
    font-variant-numeric: tabular-nums;
}
.lineup-sum__next { font-size: 13.5px; color: var(--ink-muted); }
.lineup-sum__next strong { color: var(--ink-sub); }

.certs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.cert {
    /* 子要素の数が「公開中／準備中」で変わるので、grid の行指定ではなく
       flex + margin-top:auto で説明文を下端に固定する（カードの高さが揃う） */
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.5rem 1.5rem;
    background: var(--bg);
    color: inherit;
    text-decoration: none;
}
a.cert:hover { background: var(--green-tint); }
a.cert:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* 資格名が主役。略称（G / Agent など）では何の資格か伝わらないので使わない。
   ⚠️ 認定バッジの模倣にしないこと（丸バッジ・盾型・団体色にしない）。罫線1本に留める。 */
.cert__name {
    display: block;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.45;
    /* 資格の色。サイト内の帯・マイページと同じ色を入口でも使う */
    color: var(--course);
    padding-bottom: .55rem;
    border-bottom: 3px solid var(--course);
    text-wrap: balance;
}
.cert.is-soon .cert__name { color: var(--ink); border-bottom-color: var(--rule-strong); }

.cert__org {
    display: block;
    font-size: 12.5px;
    color: var(--ink-muted);
    letter-spacing: .03em;
    margin-top: .7em;
}

.cert__data {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: 1.2rem 0 .9rem;
}
.cert__fig { display: block; }
.cert__fig b {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.cert__fig em {
    display: block;
    font-style: normal;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--ink-muted);
    margin-top: .1em;
}
.cert__data--soon {
    font-size: 13px;
    color: var(--ink-muted);
    margin: 1.2rem 0 .9rem;
}

.cert__state {
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: .3em 1em;
    border: 1px solid var(--rule-strong);
    color: var(--ink-muted);
}
.cert__state.is-open { border-color: var(--green); color: var(--green); }

/* 無料で解ける問題数。「公開中」の状態タグとは別軸なので、色ではなく位置で分ける */
.cert__free {
    align-self: flex-start;
    margin-top: .5rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--course);
}
.cert__free::before {
    content: "";
    display: inline-block;
    width: 12px; height: 1px;
    margin-right: .5em;
    vertical-align: middle;
    background: var(--course);
}

.cert__desc {
    display: block;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ink-sub);
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
}

/* カード全体がリンクだと分かるようにする。
   ⚠️ カードは <a> だが、見た目が箱なので押せることが伝わっていなかった。 */
.cert__go {
    display: block;
    margin-top: .9rem;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--green);
}
.cert__go::after { content: " →"; }
a.cert:hover .cert__go { text-decoration: underline; }

@media (max-width: 480px) {
    .certs { grid-template-columns: 1fr; }
    .cert { padding: 1.4rem 1.2rem; }
}


/* =========================================================================
   図：ひとつの会員登録 → 各資格 →（講義・演習）
   「まとめて対策できる」「動画と模擬試験の両方が入っている」を1枚で示す。
   （2026-07-26 ユーザー要望「イラストとかでアピールできない？」）

   ⚠️ 生成イラスト・フリー素材は使わない。線と罫線だけで組む。
   ⚠️ 文字をSVGに入れない。viewBox で縮むとスマホで読めなくなる。
      箱と文字はHTML、線だけをCSSの疑似要素で引く（本物のテキストなので
      拡大・読み上げ・検索・リンクが効く）。
   ⚠️ 枝の本数は資格の数で変わる。PHP側が `--hub-n` に本数を入れるので、
      横木の両端の位置もそこから計算する（列数を決め打ちしない）。
   ========================================================================= */

.hub { margin: 0 0 3rem; }

.hub__core {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 1rem 2.4rem 1.1rem;
    border: 1px solid var(--green);
    background: var(--bg);
    text-align: center;
}
.hub__core-title {
    display: block;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--green);
}
.hub__core-sub {
    display: block;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--ink-muted);
    margin-top: .35em;
}
/* 幹（中央の箱から下へ1本） */
.hub__core::after {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    width: 1px; height: 22px;
    background: var(--rule-strong);
}

.hub__leaves {
    position: relative;
    list-style: none;
    margin: 22px 0 0;
    padding: 22px 0 0;
    display: grid;
    grid-template-columns: repeat(var(--hub-n, 5), 1fr);
}
/* 横木。両端の枝の真上で止める（＝1列ぶんの半分だけ内側へ寄せる） */
.hub__leaves::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% / var(--hub-n, 5));
    right: calc(50% / var(--hub-n, 5));
    height: 1px;
    background: var(--rule-strong);
}

.hub__leaf { position: relative; margin: 0; }
/* 枝（横木から各資格の箱へ） */
.hub__leaf::before {
    content: "";
    position: absolute;
    bottom: 100%; left: 50%;
    width: 1px; height: 22px;
    background: var(--rule-strong);
}
.hub__leaf > a {
    display: block;
    height: 100%;
    padding: .9rem .8rem 1rem;
    background: var(--bg);
    border: 1px solid var(--rule);
    /* 資格の色。サイト内の帯・マイページと同じ色を入口でも使う */
    border-top: 3px solid var(--course);
    color: inherit;
    text-decoration: none;
    text-align: center;
}
.hub__leaf + .hub__leaf > a { border-left: 0; }
.hub__leaf > a:hover { background: var(--green-tint); }
.hub__leaf > a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.hub__name {
    display: block;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--course);
    text-wrap: balance;
    /* 資格名の行数がまちまちなので、下の「講義／演習」の位置を揃える */
    min-height: 4.5em;
}
.hub__parts {
    display: grid;
    gap: 1px;
    margin-top: .6rem;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.hub__part {
    display: block;
    padding: .45em .3em;
    background: var(--bg-alt);
    font-size: 11.5px;
    letter-spacing: .06em;
    color: var(--ink-muted);
}
.hub__part.is-on { background: var(--bg); color: var(--ink-sub); }
.hub__part b {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin: 0 .15em;
}
.hub__part em { font-style: normal; margin-left: .45em; }

/* 無料枠。「講義 準備中」だけが目に入ると資格まるごと準備中に見えるので、
   いま解けるものを同じ枠の中で言う（2026-07-26 ユーザー指摘） */
.hub__free {
    display: block;
    margin-top: .55rem;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--course);
}

.hub__cap {
    margin: 1rem 0 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ink-muted);
    text-align: center;
}

/* =========================================================================
   登録不要で解ける模擬試験（資格ごとのボタン）
   ⚠️ 1資格ぶんだけ置かない。全資格を開放したのに押せる場所がG検定しか無かった
      （2026-07-26 ユーザー指摘）。開放した数だけ並べる。
   ========================================================================= */

.trybar {
    margin-top: 2.8rem;
    padding: 1.8rem 1.8rem 1.6rem;
    background: var(--bg);
    border: 1px solid var(--rule-strong);
}
.trybar__lead {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 1.2rem;
}
.trybar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem;
}
.trybar__item { margin: 0; }
.trybar__item > a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    height: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--course);
    background: var(--bg);
    color: inherit;
    text-decoration: none;
}
.trybar__item > a:hover { background: var(--green-tint); }
.trybar__item > a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.trybar__name {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
}
/* 右側は「問数」と「無料の講義本数」を縦に積む。
   資格を選ぶ場面では、その資格で何が何本ぶん無料かが1枚で分かる必要がある。 */
.trybar__meta {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
}
.trybar__lesson {
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: .02em;
    white-space: nowrap;
}
.trybar__n {
    flex: none;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--course);
    font-variant-numeric: tabular-nums;
}
.trybar__note {
    margin: 1.2rem 0 0;
    font-size: 13px;
    line-height: 1.85;
    color: var(--ink-sub);
}

/* 節の途中に置く入会導線。読んで納得した瞬間に押せる場所を作る。
   ⚠️ 以前は入会ボタンがヒーローと料金の2か所しか無く、間に5節あった。 */
.midcta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2.6rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
}

/* ページ末尾の最終導線。FAQで疑問が解けた直後を受け止める */
.lastcta {
    margin-top: 3.2rem;
    padding: 2.2rem 2rem 2rem;
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    text-align: center;
}
.lastcta__lead {
    font-family: var(--serif);
    font-size: clamp(17px, 2.4vw, 21px);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .06em;
    margin: 0 0 1.6rem;
    text-wrap: balance;
}
.lastcta__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
}
.lastcta__note {
    margin: 1.4rem 0 0;
    font-size: 13px;
    color: var(--ink-muted);
}

/* 狭い画面では線をやめて、ただの一覧にする。
   枝と横木は列が折り返した瞬間に指す先を失うので、残すとかえって読めない。 */
@media (max-width: 760px) {
    .hub__leaves {
        grid-template-columns: repeat(2, 1fr);
        gap: .6rem;
        margin-top: 1.4rem;
        padding-top: 0;
    }
    .hub__leaves::before,
    .hub__leaf::before,
    .hub__core::after { display: none; }
    .hub__leaf + .hub__leaf > a { border-left: 1px solid var(--rule); }
    .hub__name { min-height: 3em; }
}
@media (max-width: 420px) {
    .hub__leaves { grid-template-columns: 1fr; }
    .hub__name { min-height: 0; }
}

/* =========================================================================
   対象の資格：分類ごとのまとまり
   ========================================================================= */

.cgroup + .cgroup { margin-top: 3rem; }
.cgroup__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: 0 0 1.3rem;
    padding-bottom: .8rem;
    border-bottom: 2px solid var(--green);
}
.cgroup__no {
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}
.cgroup__label {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .08em;
}
.cgroup__note { font-size: 13px; color: var(--ink-muted); }
.cgroup__n {
    margin-left: auto;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.cgroup__soon {
    margin: 0;
    padding: 1.6rem 1.5rem;
    background: var(--bg-alt);
    border: 1px solid var(--rule);
    font-size: 14px;
    color: var(--ink-sub);
}

@media (max-width: 560px) {
    .hero__certgroup { grid-template-columns: 1fr; gap: .35rem; }
    .cgroup__note { flex-basis: 100%; }
    .cgroup__n { margin-left: 0; }
}

/* ケース問題（AIエージェント）は本文が1500〜1800字と長い。
   1行が長すぎると目が戻れなくなるので、読み幅を絞って行間を確保する。
   ⚠️ 本文の改行は生の改行のまま届くことがある。ビルド時に <br> へ直しているが、
      万一素通りしても詰まらないよう保険をかけておく。 */
.quiz-q__text {
    max-width: 44em;
    overflow-wrap: anywhere;
}
.quiz-q__text br + br { line-height: 2.6; }

/* ケース問題で、実際に問われている部分。
   ケース本文が40行以上あり、設問が末尾に埋もれて見つからなかったため区別する。 */
.case-ask {
    display: block;
    margin-top: 1.8rem;
    padding: 1.2em 1.3em;
    background: var(--bg-alt);
    border-left: 3px solid var(--green);
    font-weight: 700;
}

/* 分野別ドリル・復習では、長いケース本文をたたんで出す */
.case-fold { margin-bottom: 1.4rem; }
.case-fold__btn {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--green);
    background: none;
    border: 1px solid var(--green);
    border-radius: 2px;
    padding: .5em 1.3em;
    cursor: pointer;
}
.case-fold__btn:hover { background: var(--green); color: var(--ink-invert); }
.case-body {
    margin-top: 1rem;
    padding: 1.1em 1.2em;
    background: var(--bg-alt);
    border-left: 2px solid var(--rule-strong);
    font-size: 15.5px;
    line-height: 1.85;
}

/* =========================================================================
   インタラクティブ演習（/course/<コース>/lab/）
   ⚠️ iframe の枠そのものは mu-plugin（subsc_lab_embed）がインラインで持つ。
      ここは見出しと余白だけ。二重に枠を描かない。
   ========================================================================= */

.lab-item { margin: 3.2rem 0 4.4rem; }
.lab-item + .lab-item { border-top: 1px solid var(--rule); padding-top: 3rem; }

.lab-item__title {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    margin: 0 0 .5rem;
    scroll-margin-top: 80px;
}
.lab-item__desc {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--ink-sub);
    margin: 0;
}

/* 会員限定のもの。題名・説明までは見せ、教材は出さない。
   ⚠️ 開いているものと同じ高さの箱にしない。iframe が無いぶん詰めて、
      一覧として読めるようにする（鍵つきが14本続くため） */
.lab-item--locked { margin: 2rem 0; }
.lab-item--locked .lab-item__title { color: var(--ink-muted); font-size: 18px; }
.lab-item--locked .lab-item__title svg { vertical-align: -1px; margin-right: .35em; }
.lab-item__lock {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--ink-muted);
    margin: .5rem 0 0;
}

@media (max-width: 640px) {
    .lab-item { margin: 2.4rem 0 3.2rem; }
    .lab-item__title { font-size: 18px; }
}


/* =========================================================================
 * 入会直後の /welcome/ — 送信先の明示と訂正フォーム
 *
 * ⚠️ ここが「課金は通ったのにログインできない」を止める最後の砦。
 *    送信先のアドレスは**本文より目立たせる**（読み飛ばされたら意味が無い）。
 * ======================================================================= */

/* 決済前の1行（入会ボタンの直下）。正典は mu-plugin の subsc_welcome_paynote_html() */
.paynote {
    margin-top: 0.9em;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}
.paynote strong { color: var(--ink-sub); }

/* 送信先のアドレス。罫線と地色で本文から切り離す */
.wc-mail {
    margin: 1.4em 0 0.8em;
    padding: 0.9em 1.1em;
    background: #FFFFFF;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--green);
    display: block;
}
.wc-mail span {
    display: block;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin-bottom: 0.2em;
}
.wc-mail strong {
    display: block;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    /* 長いアドレスでも枠から出さない */
    overflow-wrap: anywhere;
}

.wc-reason {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-sub);
}

/* 訂正フォーム。JSに頼らず details で開閉する */
.wc-fix {
    margin: 1.6em 0;
    border-top: 1px solid var(--rule);
    padding-top: 1.1em;
}
.wc-fix > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--green);
    font-size: 15px;
    letter-spacing: 0.04em;
    /* 押せる高さを確保する（スマホで潰れると押せない） */
    padding: 0.6em 0;
}
.wc-fix > summary:hover { text-decoration: underline; }
.wc-fix__body { padding-top: 0.6em; }
.wc-fix__label {
    display: block;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin-bottom: 0.35em;
}
/* ⚠️ font-size を16px未満にしない。iOSが勝手にズームする */
.wc-fix__input {
    display: block;
    width: 100%;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    padding: 0.75em 0.85em;
    background: #FFFFFF;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    margin-bottom: 1em;
}
.wc-fix__input:focus {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}
.wc-fix__note {
    margin-top: 1em;
    font-size: 13px;
    line-height: 1.85;
    color: var(--ink-muted);
}

/* 受け付け結果の知らせ */
.wc-notice {
    margin: 0 0 1.8em;
    padding: 1.1em 1.2em;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--green);
    background: var(--green-tint);
}
.wc-notice--bad {
    border-left-color: #8A3B2E;
    background: #F6EEEB;
}
.wc-notice__t {
    margin: 0 0 0.4em;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 400;
}
.wc-notice p { font-size: 14.5px; line-height: 1.85; margin: 0; }
.wc-notice .wc-mail { margin: 0.7em 0; }

@media (max-width: 640px) {
    .wc-mail strong { font-size: 17px; }
}