/* ==========================================================================
   JLPT N4 Japanese for Work — quiz.css
   サイト共通の CSS（本番用）。土台は tools/site/見本/site.css。色の値は :root にだけ書く。
   :root は見本と同じに保つ（tools/tests/test_quiz_css.py が見張る）
   方向：案 A「現場の標識」＋ 正解で読みが現れる動き（2026-10-04 ユーザー決定）
   配色：案 1「しまを減らす」（2026-10-05 ユーザー決定。01_設計書/Webサイト_配色の比較.md）
     - ヘッダーは紺（動画の INK）の地に黄の線 1 本。フッターの上も黄の線 1 本
     - しま模様は節目（区切り画面と得点画面の板の上）にだけ使う
     - 警告の三角は使わない。トップは白い地に黄の札「仕事の日本語」
     - 黄は「ここを見て」の所だけ：番号札、進み具合、主ボタンの文字、日数と得点の数字
   仕様：01_設計書/Webサイト_デザイン仕様.md
   基準はスマホ幅 360px。600px・960px で広げる。画像・外部ライブラリなし。
   当てる範囲は自分の部品（.jfw・.site-header・.site-footer）の中に限る（WordPress のテーマをこわさない）。
   ========================================================================== */

/* ---------- 0. 見出しフォント（M PLUS Rounded 1c 800。使う文字だけに絞った自前の配信。ライセンスは fonts/OFL.txt） ---------- */
@font-face{font-family:"M PLUS Rounded 1c";font-weight:800;font-style:normal;font-display:swap;src:url("fonts/mplus-rounded-1c-800-v1.woff2") format("woff2")}

/* ---------- 1. 色と文字 ---------- */
:root{
  /* 土台（動画 tools/common.py と同じ値） */
  --ink:#19232F;          /* 紺：文字、ヘッダー、帯、枠線、ボタン、得点の板（動画の INK） */
  --paper:#F5F7F9;        /* ページの地（動画の PAPER） */
  --card:#FFFFFF;         /* 読む所の地、トップの最初の画面の地（動画の CARD） */
  --on-dark:#FFFFFF;      /* 紺・緑・シリーズ色の上の文字と線 */
  /* 黄：「ここを見て」の所だけ */
  --yellow:#FFD21F;       /* 番号札、進み具合、主ボタンの文字、日数と得点の数字、ヘッダーとフッターの線 */
  /* 正誤 */
  --ok:#11803B;           /* 緑：正解、「ヨシ！」、ランプ（白い文字で 5.0:1） */
  --ok-dark:#0A5727;      /* 正解の選択肢の影 */
  --ng:#C8321E;           /* ✕ の記号だけ。面や枠には使わない */
  /* 灰色 */
  --sub:#566173;          /* 補助の文字（白の上で 6.3:1） */
  --band-sub:#D5DBE5;     /* 紺の上の補助の文字（11.4:1） */
  --ink-soft:#46515F;     /* 紺の上の、まだ来ていない進み具合と表の区切り線 */
  --line:#E2E6EE;         /* 広告枠の見本、消えているランプ */
  --dim:#EEF1F5;          /* 選ばれなかった・まちがえた選択肢の地、裏取り待ちの印 */
  --dim-line:#8792A2;     /* 選ばれなかった選択肢の枠 */
  --dim-text:#4A5463;     /* 選ばれなかった選択肢の文字（--dim の上で 6.8:1） */
  --dim-badge:#667182;    /* 選ばれなかった選択肢の A〜D の地（白い文字で 4.9:1） */
  --shadow:rgba(25,35,47,.4); /* 紺のボタンの下の影 */
  /* シリーズ色（動画の SERIES_COLORS と、白い文字をのせるための濃い側） */
  --kotoba:#2D6EEC;  --kotoba-ink:#1F57CC;   /* ことば Words */
  --bunpo:#0FA270;   --bunpo-ink:#0A7A54;    /* 文法 Grammar */
  --mix:#E7700D;     --mix-ink:#AD5207;      /* 実践ミックス Mixed Practice */
  --series:var(--kotoba);         /* 下線（文字をのせない所） */
  --series-ink:var(--kotoba-ink); /* 本の番号札、タグ、パートの番号、リンクの札の帯 */
  /* 帯 */
  --rule:3px;             /* ヘッダーの下・フッターの上の黄の線の太さ */
  --stripe:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--yellow) 10px 20px); /* 節目だけ */
  /* 文字。見出しフォントが届かないとき（届く前と、絞った字にない字）は、本文と同じ端末のゴシックの太字で出る。
     太さが 1 つしかない丸ゴシック（Hiragino Maru Gothic ProN）は、見出しが細く出るので並べない（デザイン仕様 3 章） */
  --display:"M PLUS Rounded 1c",-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --body:-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}
/* シリーズ色は body か部品のクラスで切り替える */
.series-kotoba{--series:var(--kotoba);--series-ink:var(--kotoba-ink)}
.series-bunpo{--series:var(--bunpo);--series-ink:var(--bunpo-ink)}
.series-mix{--series:var(--mix);--series-ink:var(--mix-ink)}

/* ---------- 2. 土台 ---------- */
/* 要素の名前だけで当てる規則は書かない。WordPress のテーマの見た目をこわさないため、自分の部品の中に限る。
   中身の側は :where() で包み、強さをクラス 1 つ分にする（あとに書く .btn・.choice・.hero-jp などの規則が勝つ。見本と同じ順の勝ち負け） */
.jfw,.site-header,.site-footer{color:var(--ink);font:16px/1.6 var(--body);letter-spacing:normal;-webkit-text-size-adjust:100%}
/* WordPress のテーマ（Twenty Twenty-Five）が全体に当てる規則を、自分の部品の中だけで戻す（計画 3 Task 1。強さ 0,0,1 の要素の規則に勝つよう :is で書く）。
   見出しの字間 −0.1px、見出しと段落の text-wrap:pretty、リンクの下線の位置。下線の太さ 1px（テーマの !important）は受け入れる（① の決定 2026-10-06） */
.jfw :is(h1,h2,h3,h4,h5,h6),.site-footer :is(h1,h2,h3){letter-spacing:normal}
.jfw :is(h1,h2,h3,h4,h5,h6,p,blockquote,caption,figcaption),.site-footer :is(p){text-wrap:wrap}
.jfw a,.site-header a,.site-footer a{text-underline-offset:auto}
/* h1 自身の大きさ・太さ・行の高さもテーマ（43.8px・400・1.125）から見本の値に戻す。いまは中の .h1-main・.h1-sub が自分で決めるので
   見た目は同じだが、h1 に字がじかに入っても見本どおりになるように（⑧ の決定 2026-10-06）。トップの .hero h1 はあとに書くので勝つ */
.jfw :is(h1){font-size:2em;font-weight:700;line-height:inherit}
.jfw *,.jfw *::before,.jfw *::after,.site-header *,.site-footer *{box-sizing:border-box}
.jfw :where(h1,h2,h3,p,ul,ol,dl,dd,table),.site-footer :where(p,ul){margin:0;padding:0}
.jfw :where(ul,ol){list-style:none}
.jfw :where(a),.site-header :where(a),.site-footer :where(a){color:inherit}
.jfw :where(button){font:inherit;color:inherit}
.jfw [hidden]{display:none!important}
.jfw :focus-visible,.site-header :focus-visible,.site-footer :focus-visible{outline:3px solid var(--series-ink);outline-offset:2px}
body.jfw-preview{margin:0;background:var(--paper)}
/* WordPress ではページの地がテーマの白になる。.jfw を含むページの body だけを見本の --paper に戻す（⑧ の決定 2026-10-06）。
   本文の地・フッターの上の 40px・短いページの下が白にならない。:has に対応しないブラウザでは白のまま（こわれない）。
   body の字（テーマの Manrope）は戻さない：字はみな .jfw・ヘッダー・フッターが決める */
body:has(.jfw){background:var(--paper)}
.jfw :where(.jp){line-height:2;word-break:keep-all;overflow-wrap:anywhere}
.jfw :where(rt){font-size:max(.5em,11px);font-weight:600}
.jfw :where(.vh){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header :where(.wrap),.site-footer :where(.wrap),.jfw :where(.wrap){max-width:1000px;margin:0 auto;padding:0 16px}

/* ---------- 3. ヘッダーとフッター ---------- */
/* 紺の帯。下に黄の線 1 本（.stripe。名前は前の版のまま。しま模様にはしない） */
.site-header{background:var(--ink);color:var(--on-dark)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px}
/* 見出しフォントが届かず端末の太字（幅が広い）で出たときは、「Japanese for Work」だけが 2 行に折れる（横にはみ出さない） */
.brand{display:flex;align-items:center;gap:5px;min-width:0;font:800 15px/1.15 var(--display);text-decoration:none;min-height:44px}
.brand-plate{flex:none;white-space:nowrap;line-height:1;background:var(--yellow);color:var(--ink);padding:6px;border-radius:4px}
.unofficial{flex:none;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;border:1.5px solid var(--on-dark);border-radius:4px;padding:3px 5px}
.stripe{height:var(--rule);background:var(--yellow)}
/* 型紙の一番上の並びの間の余白（テーマの :where(.wp-site-blocks) > * の 1.2rem）を、帯と黄の線の間に入れない */
.site-header,.stripe{margin-block:0}

.site-footer{margin-top:40px;background:var(--ink);color:var(--band-sub);font-size:14px;padding:0 0 28px}
.site-footer .wrap{display:grid;gap:10px;padding-top:18px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:0 18px}
.site-footer nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);font-weight:700}
.site-footer p a{display:inline-block;padding:4px 0;color:var(--on-dark)}
.disclaimer{color:var(--on-dark)}

/* ---------- 4. 共通の部品 ---------- */
/* 主ボタン（紺の地に黄の文字。押すと沈む）。Contact のフォームの送るボタンも同じ */
.btn,.contact-form-slot [type=submit]{appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:10px 22px;border:0;border-radius:8px;background:var(--ink);color:var(--yellow);font:800 18px/1.2 var(--display);text-decoration:none;text-align:center;cursor:pointer;box-shadow:0 4px 0 var(--shadow);transition:transform .08s,box-shadow .08s}
.btn:active,.contact-form-slot [type=submit]:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow)}
/* 控えのボタン（白い地に紺の文字。黄は使わない） */
.btn-line{background:var(--card);color:var(--ink);border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn-row{margin-top:18px}
/* Contact のフォーム（CF7）。字 16px（iPhone の拡大を防ぐ）、欄 48px。まちがいは紺の字と太い帯、赤は ✕ だけ。CF7 の CSS に強さで勝つ */
.contact-form-slot p{margin-top:18px;font-weight:700}
.contact-form-slot :is([type=text],[type=email],textarea){display:block;width:100%;min-height:48px;margin-top:6px;padding:10px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--card);color:var(--ink);font:400 16px/1.5 var(--body)}
.contact-form-slot textarea{height:160px;resize:vertical}
.contact-form-slot .wpcf7-not-valid{border-left-width:8px}
.contact-form-slot .wpcf7-not-valid-tip{margin-top:6px;color:var(--ink);font-weight:700}
.contact-form-slot .wpcf7-not-valid-tip::before{content:"✕ ";color:var(--ng)}
.contact-form-slot .wpcf7-spinner{display:block;margin:12px 0 0;background:var(--ink)}
.contact-form-slot .wpcf7 form[class] .wpcf7-response-output{margin:18px 0 0;padding:12px 14px;border:2px solid var(--ink);border-left-width:10px;border-radius:8px;background:var(--card);font-weight:700}
.contact-form-slot .wpcf7 form.sent .wpcf7-response-output{border-left-color:var(--ok)}

/* タグ（シリーズ名の小さい札） */
.tag{display:inline-block;background:var(--series-ink);color:var(--on-dark);font-size:13px;font-weight:700;line-height:1;padding:5px 8px;border-radius:4px;letter-spacing:.03em}

/* 見出し：横に紺の細い線（しま模様は使わない） */
.list-head{display:flex;align-items:center;gap:10px;margin:28px 0 12px}
.list-head h2{font:800 20px/1.2 var(--display)}
.list-head::after{content:"";flex:1;min-width:24px;height:2px;background:var(--ink)}
.section-title{margin:22px 0 8px;font:800 17px/1.25 var(--display)}
.note{font-size:15px;color:var(--sub)}

/* リンクの札（次の本、まとめページへの入口） */
.link-card{display:block;min-height:56px;padding:10px 14px;background:var(--card);border:2px solid var(--ink);border-left:10px solid var(--series-ink);border-radius:8px;text-decoration:none;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.link-card:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.link-card strong{display:block;font:800 17px/1.3 var(--display)}
.link-card span{display:block;font-size:14px;color:var(--sub)}
.link-card.is-plain{border-left-color:var(--ink)}
.link-cards{display:grid;gap:12px}

/* 広告枠：300×250 の固定。ラベル 24px を足した 274px を先に確保する。近くに黄の面や札を置かない */
.ad-wrap{width:300px;height:274px;margin:28px auto}
.ad-label{height:24px;font-size:12px;line-height:24px;color:var(--sub);text-align:center}
.ad-slot{width:300px;height:250px;background:var(--line);display:flex;align-items:center;justify-content:center;color:var(--sub);font-weight:700}
/* 広告枠の下に置く、押せない自前の中身（150px 以上）。リンク・ボタン・details を入れない */
.buffer{min-height:150px}

/* ---------- 5. ページの頭（問題・まとめ・事実ページ共通） ---------- */
/* WordPress は固定ページの <body> に class="page" を付けるので、.jfw の中に限る */
.jfw .page{max-width:1000px;margin:0 auto;padding:14px 16px 0}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:14px}
.crumb a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.crumb .sep{color:var(--sub)}
.page-head h1{margin-top:2px}
.h1-main{display:block;font:800 23px/1.25 var(--display)}
.h1-sub{display:block;margin-top:4px;font:700 15px/1.4 var(--body);color:var(--sub)}
.theme-jp{margin-top:6px;font-size:16px;font-weight:600}
.intro{margin-top:6px;font-size:15px;max-width:42em}

/* 動画：1 行のリンク。押すまで iframe を読み込まない */
.video{display:flex;align-items:center;gap:10px;min-height:48px;margin-top:10px;padding:6px 12px;background:var(--card);border:2px solid var(--ink);border-radius:8px;text-decoration:none;font-size:15px;font-weight:700}
.video small{display:block;font-size:13px;font-weight:400;line-height:1.3;color:var(--sub);white-space:nowrap}
.video-play{flex:none;width:34px;height:26px;border-radius:5px;background:var(--ink);position:relative}
.video-play::after{content:"";position:absolute;left:13px;top:7px;border-left:10px solid var(--on-dark);border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- 6. クイズ：出題（広告枠なし） ---------- */
.layout{display:grid;gap:16px;margin-top:14px}
.quiz{min-width:0}
/* 作業指示票の形：白い札に紺の枠、上に紺の帯 */
.stage{background:var(--card);border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.ticket-band{display:flex;justify-content:space-between;gap:8px;background:var(--ink);color:var(--on-dark);padding:8px 12px;font-size:14px;font-weight:700}
.ticket-band b{color:var(--on-dark)}
/* 進み具合（黄）：6 つの区切り（パート）。now の中の幅で、パート内の進みを示す */
.segs{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:0 3px 3px;background:var(--ink)}
.segs i{height:8px;background:var(--ink-soft);border-radius:1px;overflow:hidden}
.segs i.done{background:var(--yellow)}
.segs i.now span{display:block;height:100%;background:var(--yellow)}
.stage-in{padding:14px 14px 18px}
.q-head{display:flex;align-items:center;gap:10px}
/* Q の番号札（黄。白の上なので必ず紺の枠を付ける） */
.q-no{flex:none;background:var(--yellow);border:2px solid var(--ink);border-radius:6px;font:800 24px/1 var(--display);padding:6px 10px}
.q-kind{font-size:14px;font-weight:600;color:var(--sub)}
.q-inst{margin-top:10px;font-size:15px}
.q-sentence{margin-top:4px;font-size:24px;font-weight:700}
.q-sentence rt{font-size:12px}
.target{text-decoration:none;border-bottom:4px solid var(--series)}
/* 下線の語の読みは、出題のあいだ隠す（場所は確保してあるので、現れても行が動かない） */
.stage[data-state="asking"] .target rt{visibility:hidden}

.choices{display:grid;gap:10px;margin-top:14px}
.choice{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;width:100%;min-height:58px;padding:5px 12px 5px 5px;background:var(--card);border:2px solid var(--ink);border-radius:8px;text-align:left;font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.choice:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.choice .jp{line-height:1.9}
/* A〜D の札：紺の地に白い文字（黄は使わない） */
.badge{display:flex;align-items:center;justify-content:center;align-self:stretch;min-height:44px;border-radius:5px;background:var(--ink);color:var(--on-dark);font:800 20px/1 var(--display)}
.mark{font:800 22px/1 var(--display)}
.choice[disabled]{cursor:default;color:var(--ink)}
.choices.long .choice{font-size:18px}

/* 聞き取り：再生ボタン（その画面の主ボタンなので、文字と印は黄） */
.player{display:flex;align-items:center;gap:12px;margin-top:12px}
.play-btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:8px 22px 8px 18px;border:0;border-radius:28px;background:var(--ink);color:var(--yellow);font:800 18px/1 var(--display);cursor:pointer;box-shadow:0 4px 0 var(--shadow);transition:transform .08s,box-shadow .08s}
.play-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow)}
.play-btn::before{content:"";border-left:14px solid var(--yellow);border-top:9px solid transparent;border-bottom:9px solid transparent}
.play-btn[aria-pressed="true"]::before{width:14px;height:18px;border:0;border-left:5px solid var(--yellow);border-right:5px solid var(--yellow)}
.player-note{font-size:14px;color:var(--sub)}

/* ---------- 7. クイズ：正誤と解説（広告枠なし） ---------- */
.choice.is-dim{background:var(--dim);border-color:var(--dim-line);color:var(--dim-text);box-shadow:none}
.choice.is-dim .badge{background:var(--dim-badge);color:var(--on-dark)}
.choice.is-correct{background:var(--ok);border-color:var(--ok);color:var(--on-dark);box-shadow:0 3px 0 var(--ok-dark)}
.choice.is-correct .badge{background:var(--card);color:var(--ok)}
/* まちがえて選んだ選択肢：赤い面にしない。紺の点線の枠と ✕ だけ */
.choice.is-wrong{background:var(--dim);border-style:dashed;box-shadow:none}
.choice.is-wrong .mark{color:var(--ng)}
/* 正解のときだけ、黄色の光の輪が 1 回広がる */
.stage[data-state="correct"] .choice.is-correct{animation:jfw-flash .45s ease-out both}

.verdict{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px}
/* 「ヨシ！」の札：正解のときだけ出す */
.yoshi{display:inline-flex;align-items:center;gap:6px;background:var(--ok);color:var(--on-dark);border-radius:8px;padding:8px 14px;font:800 24px/1.1 var(--display);box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg);animation:jfw-slam .28s cubic-bezier(.2,1.5,.4,1) both}
.verdict-en{font:800 22px/1.2 var(--display);color:var(--ok)}
/* まちがいのとき：正しい答えを紺の札で大きく見せる（責める色を使わない）。
   黄は正しい答えの記号（B）だけ。「ANSWER」の小札は線だけ */
.answer-plate{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--on-dark);border-radius:8px;padding:6px 14px 6px 8px;font-size:20px;font-weight:700}
.answer-plate small{border:1.5px solid var(--band-sub);color:var(--band-sub);border-radius:4px;padding:4px 6px;font:800 12px/1 var(--display);letter-spacing:.1em}
.answer-plate b{color:var(--yellow);font:800 22px/1 var(--display)}
.stage[data-state="wrong"] .verdict-en{color:var(--ink);font-size:18px;flex-basis:100%}

/* 解説のカード：読む所は白地。左の太い帯で正誤を示す（正解は緑、まちがいは紺） */
.answer-card{margin-top:14px;background:var(--card);border:2px solid var(--ink);border-left-width:8px;border-radius:8px;padding:10px 14px 12px;animation:jfw-rise .35s .12s ease-out both}
.stage[data-state="correct"] .answer-card{border-left-color:var(--ok)}
.gloss{font-size:20px;font-weight:800}
.a-sentence{font-size:18px;font-weight:600}
.a-english{font-size:16px}
.why{margin-top:10px;padding-top:10px;border-top:2px dashed var(--ink);font-size:16px}
/* 小さい札（WHY、Conversation、Up next、Last checked）：紺の地に白い文字 */
.label{display:inline-block;background:var(--ink);color:var(--on-dark);font:800 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:3px;margin-right:6px;vertical-align:2px;white-space:nowrap}
/* 正解で読みが現れる（案 B から借りた動き） */
.stage[data-state="correct"] .target rt,
.stage[data-state="correct"] .gloss rt{color:var(--ok);animation:jfw-yomi .45s .15s ease-out both}
/* 聞き取り：会話文（答えのあとだけ） */
.transcript{margin-top:10px;padding-top:10px;border-top:2px dashed var(--ink)}
.transcript p{font-size:17px}

/* ---------- 8. 区切り画面と得点画面（広告枠はここだけ） ---------- */
.panel{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:14px 10px 18px}
.panel > *{margin-left:4px;margin-right:4px}
.panel > .ad-wrap{margin-left:auto;margin-right:auto}
.eyebrow{font-size:14px;font-weight:700;color:var(--sub)}
/* 得点の板。上のしま模様は「ここで一区切り」の印（サイトでしま模様を使うのはここだけ） */
.scoreboard{margin-top:10px;background:var(--ink);color:var(--on-dark);border-radius:8px;overflow:hidden}
.scoreboard-top{height:8px;background:var(--stripe)}
.scoreboard-in{padding:14px 14px 16px;text-align:center}
.sb-label{font:800 13px/1 var(--display);letter-spacing:.14em;color:var(--band-sub)}
.sb-num{margin-top:6px;font:800 76px/1 var(--display);color:var(--yellow);font-variant-numeric:tabular-nums;overflow:hidden}
.sb-num span{display:inline-block;animation:jfw-drop .5s cubic-bezier(.2,1.4,.4,1) both}
.sb-num small{font-size:28px;color:var(--on-dark);margin-left:6px}
.sb-note{margin-top:6px;font:800 18px/1.3 var(--display)}
.scoreboard.is-part .sb-num{font-size:56px}
/* 区切り画面：6 問の ✓ と ✕ */
.dots{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:12px}
.dots li{display:grid;justify-items:center;gap:2px;padding:6px 0 4px;border-radius:5px;background:var(--ok);color:var(--on-dark);font-size:12px;font-weight:700;line-height:1.2;animation:jfw-lamp .3s ease-out both}
.dots li b{font:800 18px/1 var(--display)}
.dots li.is-missed{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);animation:none}
/* ふり返り：まちがえた問は紺の帯、正解した問は緑の帯。赤と黄は使わない（広告枠の近くに黄を置かない） */
.review{display:grid;gap:8px}
.review-item{border:2px solid var(--ink);border-left-width:8px;border-left-color:var(--ok);border-radius:6px;padding:8px 10px;font-size:15px}
.review-item.is-missed{border-left-color:var(--ink)}
.review-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.review-q{font-size:13px;font-weight:700;color:var(--sub)}
.review-word{font-size:20px;font-weight:800}
.review-yours{margin-top:4px;display:grid;gap:2px}
.review-yours s{color:var(--sub)}
.review-item .a-sentence{font-size:17px;margin-top:2px}
.review-item .why{margin-top:6px;padding-top:6px;font-size:15px;border-top-width:1px}
/* 得点画面：パートごとのランプ */
.lamp-rows{display:grid;gap:10px}
.lamp-row{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:14px}
.lamp-row b{font-variant-numeric:tabular-nums}
.lamps{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.lamps i{height:14px;border-radius:3px;background:var(--line)}
.lamps i.on{background:var(--ok);animation:jfw-lamp .3s ease-out both}
.lamp-row:nth-child(2) .on{animation-delay:.05s}.lamp-row:nth-child(3) .on{animation-delay:.1s}
.lamp-row:nth-child(4) .on{animation-delay:.15s}.lamp-row:nth-child(5) .on{animation-delay:.2s}
.lamp-row:nth-child(6) .on{animation-delay:.25s}
/* 次のパートの案内（広告枠の下の、押せない中身） */
.up-next{border:2px solid var(--ink);border-radius:8px;padding:12px 14px 14px}
.up-next h3{margin-top:8px;font:800 19px/1.3 var(--display)}
.up-next .meta{font-size:15px;margin-top:4px}
.after-buffer{display:grid;gap:12px;margin-top:20px}

/* ---------- 9. このセットの中身（クイズの下。説明の続きと、パートごとの見出し。アンカー付き） ---------- */
.parts{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:12px 14px 6px}
.parts > h2{font:800 18px/1.2 var(--display)}
.parts > p{font-size:14px;color:var(--sub);margin-top:2px}
/* 題の下から移した説明の続き（デザイン仕様「① の決定」1） */
.parts > .intro{margin-top:6px;font-size:15px;color:var(--ink)}
.parts > .video{margin-top:10px}
.parts > .video + p{margin-top:10px}
.part{border-top:2px dashed var(--ink);margin-top:10px;padding:8px 0 4px;scroll-margin-top:12px}
.part h3{font:800 16px/1.3 var(--display)}
.part h3 a{display:flex;align-items:center;gap:8px;min-height:48px;text-decoration:none}
.part-no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:5px;background:var(--series-ink);color:var(--on-dark);font:800 16px/1 var(--display)}
/* いまのパートの番号札は黄（紺の枠つき） */
.part.is-now .part-no{background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.part > p{font-size:14px;color:var(--sub);padding-left:38px;margin-top:-6px}

/* ---------- 10. トップ ---------- */
/* 最初の画面：白い地に、黄の札「仕事の日本語」（紺の枠と影、少し傾ける） */
.hero{background:var(--card);border-bottom:2px solid var(--ink);padding:20px 0 26px;overflow:hidden}
.hero .wrap{display:grid;gap:14px}
/* 小さい見出し。前に黄の小さい四角（警告の三角は使わない） */
.order-tag{display:inline-flex;align-items:center;gap:8px;font:800 13px/1.2 var(--display);letter-spacing:.08em}
.order-tag::before{content:"";flex:none;width:12px;height:12px;background:var(--yellow);border:2px solid var(--ink);border-radius:2px}
.hero-jp{font:800 44px/1.5 var(--display);letter-spacing:.02em;white-space:nowrap}
.hero-jp rt{font-family:var(--body);font-size:14px;letter-spacing:.1em} /* ふりがなは本文のフォント（ほかのふりがなと同じ。見出しフォントの字を増やさない） */
.hero-plate{display:inline-block;background:var(--yellow);border:3px solid var(--ink);border-radius:10px;padding:10px 14px 0;line-height:1.75;box-shadow:5px 5px 0 var(--ink);transform:rotate(-1.5deg)}
.hero h1{font:800 24px/1.25 var(--display)}
.hero .lead{font-size:16px;max-width:34em}
/* 対象の明記（紙の色の札） */
.audience{display:grid;gap:6px}
.audience li{display:flex;align-items:center;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:6px 10px;font-size:15px;font-weight:700;line-height:1.3}
.audience li::before{content:"";flex:none;width:10px;height:10px;background:var(--ink);border-radius:2px}
/* 試験までの日数の板（数字は黄） */
.board{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 12px;background:var(--ink);color:var(--on-dark);border-radius:8px;padding:10px 14px;max-width:330px;box-shadow:0 4px 0 var(--shadow)}
.board-num{grid-row:span 2;font:800 52px/1 var(--display);color:var(--yellow);font-variant-numeric:tabular-nums;animation:jfw-drop .5s cubic-bezier(.2,1.4,.4,1) both}
.board-unit{font:800 18px/1.2 var(--display);align-self:end}
.board-label{font-size:13px;color:var(--band-sub);align-self:start}
.board:not(.is-live){display:block}
.board:not(.is-live) .board-num,.board:not(.is-live) .board-unit{display:none}
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plates li{background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:8px 6px;text-align:center;font-size:13px;line-height:1.3}
.plates b{display:block;font:800 26px/1.1 var(--display)}

/* 場面別・形式別の入口（札のタイル） */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:8px 10px;background:var(--card);border:2px solid var(--ink);border-radius:8px;text-decoration:none;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.tile strong{font:800 16px/1.25 var(--display)}
.tile span{font-size:13px;color:var(--sub);line-height:1.5}
.tile .jp{line-height:1.9}
/* 事実ページへの入口：白い地に、左の黄の帯だけ（全面の黄はやめた） */
.tile.is-yellow{padding-left:20px;box-shadow:inset 8px 0 0 var(--yellow),0 3px 0 var(--ink)}
.tile.is-yellow:active{box-shadow:inset 8px 0 0 var(--yellow),0 1px 0 var(--ink)}
.tile.is-wide{grid-column:1/-1}

/* シリーズの絞り込み */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;background:var(--card);border:2px solid var(--ink);border-radius:24px;font-size:15px;font-weight:700;cursor:pointer}
.chip::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--series-ink)}
.chip.all::before{background:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-dark)}
.chip[aria-pressed="true"]::before{box-shadow:0 0 0 2px var(--on-dark)}

/* 本の一覧（左の番号札がシリーズ色） */
.books{display:grid;gap:12px}
.book{display:grid;grid-template-columns:64px 1fr;background:var(--card);border:2px solid var(--ink);border-radius:8px;text-decoration:none;overflow:hidden;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.book:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.book-no{background:var(--series-ink);color:var(--on-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 22px/1 var(--display);gap:4px}
.book-no small{font-size:11px;letter-spacing:.08em}
.book-body{padding:10px 12px;min-width:0}
.book-tag{font-size:13px;font-weight:700;color:var(--series-ink);text-transform:uppercase;letter-spacing:.05em}
.book h3{font:800 18px/1.3 var(--display)}
.book .jp{font-size:15px;margin-top:2px}
.book-meta{font-size:14px;color:var(--sub)}

/* 説明の箇条（印は紺の四角。黄は使わない） */
.how{display:grid;gap:8px;font-size:16px}
.how li{position:relative;padding-left:22px}
.how li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--ink);border-radius:2px}

/* ---------- 11. まとめページ（場面別・形式別） ---------- */
.prose{max-width:672px}
.prose > p{margin-top:10px}
.jump{display:inline-flex;align-items:center;min-height:48px;font-weight:700}
/* ことばの一覧（押せない） */
.words{width:100%;border-collapse:collapse;background:var(--card);border:2px solid var(--ink)}
.words th{background:var(--ink);color:var(--on-dark);font-size:13px;font-weight:700;text-align:left;padding:6px 10px}
.words td{padding:6px 10px;border-top:1px solid var(--ink);vertical-align:middle;font-size:15px}
.words .w{font-size:20px;font-weight:800;white-space:nowrap}
.words .src{font-size:13px;color:var(--sub);white-space:nowrap;text-align:right}

/* ---------- 12. 試験の案内（事実ページ） ---------- */
/* 最終確認日の札 */
.checked{display:inline-flex;align-items:center;gap:8px;margin-top:10px;border:2px solid var(--ink);border-radius:6px;background:var(--card);padding:4px 10px 4px 4px;font-size:14px;font-weight:700}
.checked .label{margin:0;vertical-align:0}
/* 非公式の断り：紺の見出し（前に黄の小さい四角）＋白地の本文。警告の三角は使わない */
.notice{margin-top:14px;background:var(--card);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.notice-head{display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--on-dark);padding:7px 12px;font:800 15px/1.2 var(--display)}
.notice-head::before{content:"";flex:none;width:12px;height:12px;background:var(--yellow);border-radius:2px}
.notice p{padding:10px 12px;font-size:15px}
/* 断りの箱は最初の 1 画面に入れる（デザイン仕様 9 章）。題・確認日の札のすぐ下に出し、説明（.intro）はそのあとに回す。
   並べ替えるのは見た目だけ（箱にも説明にも押せるものはない）。:has() のないブラウザでは HTML の順のまま */
.page-head:has(> .notice){display:flex;flex-direction:column}
.page-head:has(> .notice) > .checked{align-self:flex-start}
.page-head:has(> .notice) > .intro{order:1}
/* 比較の表 */
.compare{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--card);border:2px solid var(--ink);font-size:14px;line-height:1.5}
.compare th,.compare td{padding:8px;border-top:1px solid var(--ink);border-left:1px solid var(--ink);vertical-align:top;text-align:left;overflow-wrap:anywhere}
.compare thead th{background:var(--ink);color:var(--on-dark);font:800 14px/1.3 var(--display);border-left-color:var(--ink-soft)}
/* 日本語の節（Privacy Policy の外部送信について）の見出しと表の見出しは、見出しフォント（絞った字）を使わず端末のフォントで */
.jfw [lang="ja"] h2,.jfw [lang="ja"] thead th{font-family:var(--body)}
.compare tbody th{width:28%;background:var(--paper);font-weight:700}
/* 裏取り待ちの印（見本だけ。本番には出ない） */
.pending{background:var(--dim);outline:1px dashed var(--sub);border-radius:3px;padding:0 3px}
/* 出典 */
.sources{display:grid;gap:4px;font-size:15px}
.sources li{display:grid}
.sources a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;font-weight:700}
.sources span{font-size:13px;color:var(--sub);margin-top:-8px}

/* ---------- 13. 動き（CSS だけ。どれも 0.6 秒以内に終わる） ---------- */
/* 「始まりの形」だけを書く。止めたときは完成形がそのまま出る。名前は jfw- で始める（テーマの @keyframes とぶつけない） */
@keyframes jfw-drop{from{transform:translateY(-70%);opacity:0}}
@keyframes jfw-slam{from{transform:rotate(-2deg) scale(1.5);opacity:0}}
@keyframes jfw-rise{from{transform:translateY(10px);opacity:0}}
@keyframes jfw-flash{from{box-shadow:0 0 0 8px var(--yellow)}}
@keyframes jfw-lamp{from{transform:scaleY(.2);background:var(--yellow)}}
@keyframes jfw-yomi{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- 15. JavaScript が無効のときの全文と、動画の枠 ---------- */
/* パートの見出しの下に 6 問の全文を並べる。quiz.js が動いているあいだ（.jfw-on）は隠す */
.qa-list{display:grid;gap:14px;margin:8px 0 6px}
.qa{background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:10px 12px;scroll-margin-top:12px}
.qa-head{display:flex;align-items:center;gap:10px}
.qa .q-no{font-size:18px;padding:4px 8px}
.qa .q-sentence{font-size:20px}
.qa-choices{display:grid;gap:4px;margin-top:8px}
.qa-choices li{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;font-size:17px;font-weight:700}
.qa-choices .badge{min-height:32px;font-size:15px}
.qa-answer{margin-top:10px;padding-top:8px;border-top:2px dashed var(--ink)}
.qa-correct{font-size:17px;font-weight:700}
.qa-audio{display:block;width:100%;margin-top:8px}
.set-nav{display:grid;gap:12px;margin:14px 0 8px}
.jfw-on .qa-list,.jfw-on .set-nav{display:none}
/* 広告枠を入れる前の場所取り。.ad-wrap と同じ大きさにして、広告枠が入ってもボタンが動かないようにする（広告の要素ではない） */
.ad-space{width:300px;height:274px;margin:28px auto}
.panel > .ad-space{margin-left:auto;margin-right:auto}
/* 動画：リンクを押したあとの 16:9 の枠 */
.video-frame{position:relative;margin-top:10px;aspect-ratio:16/9;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--ink)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 14. 幅ごとの違い ---------- */
/* 配置の切り替えは、画面の幅ではなく .jfw の幅（WordPress のテーマの本文の幅）で決める（コンテナクエリ）。
   テーマは本文を 620〜720px に絞るのがふつうで、画面の幅で決めると 2 カラムの広告枠がはみ出す。
   コンテナクエリに対応しないブラウザでは、1 カラムのまま（安全な側）。ヘッダー・フッターは .jfw の外なので画面の幅のまま */
.jfw{container-type:inline-size}
@media (min-width:600px){
  .site-header :where(.wrap),.site-footer :where(.wrap){padding:0 24px}
}
@container (min-width:600px){
  .jfw :where(.wrap){padding:0 24px}
  .jfw .page{padding:20px 24px 0}
  .h1-main{font-size:30px}
  .h1-sub{font-size:17px}
  .btn,.contact-form-slot [type=submit]{display:inline-flex;width:auto;min-width:220px}
  .btn-row{text-align:right}
  .video{max-width:420px}
  .stage-in{padding:20px}
  .q-sentence{font-size:28px}
  .q-sentence rt{font-size:14px}
  .choices{grid-template-columns:1fr 1fr}
  .choices.long{grid-template-columns:1fr}
  .panel{padding:20px 16px 24px}
  .after-buffer .btn{justify-self:start}
  .hero{padding:36px 0 40px}
  .hero-jp{font-size:64px}.hero-jp rt{font-size:18px}
  .hero h1{font-size:32px}
  .audience{grid-template-columns:auto auto;justify-content:start}
  .plates{max-width:420px}
  .books{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .link-cards{grid-template-columns:1fr 1fr}
  .compare{font-size:16px}
  .compare th,.compare td{padding:10px 12px}
}
/* トップの最初の画面は、959px までは 2 つの列の中身を 1 つの並びにする（960px からは 2 カラム） */
.hero .col-a,.hero .col-b{display:contents}
@container (min-width:960px){
  .layout{grid-template-columns:minmax(0,640px) 300px;justify-content:space-between;align-items:start}
  .hero .wrap{grid-template-columns:1.2fr 1fr;align-items:center;column-gap:40px}
  .hero .col-a{display:grid;gap:14px}
  .hero .col-b{display:grid;gap:16px;justify-items:start}
  .books{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(5,1fr)}
  .tiles.is-six{grid-template-columns:repeat(6,1fr)}
}
/* .jfw が 356px より狭いとき（テーマの左右の余白と .page の 16px が重なるスマホ）：300×250 の広告枠（縮めない）が
   パネルの中に収まるよう、.page の左右の余白を詰め、それでも足りなければパネルの内側の余白を詰める。
   356px でいままでの余白（16px・10px）につながる。パネルの中に収まるのは .jfw が 304px 以上のとき */
@container (max-width:355.98px){
  .jfw .page{padding-left:clamp(0px,calc(50cqi - 162px),16px);padding-right:clamp(0px,calc(50cqi - 162px),16px)}
  .panel{padding-left:clamp(0px,calc(50cqi - 152px),10px);padding-right:clamp(0px,calc(50cqi - 152px),10px)}
}