/* G検定の森 演習 v2
 * 色は本番サイトで実際に使っている値だけ（2026-09-23 に描画HTMLと mu-plugin から採取）
 *   #15803d ボタン／#166534・#14682f その濃い側／#14311f 見出しの深緑／#2f8e5a ヘッダー
 *   #cfdad2 枠線／#5a6a61 補足／#93a29a 薄い文字／#f7faf8 淡い面／#b0761a UBの金／#c0392b 赤
 * ⚠️ すべて .gkmq2 の内側に閉じる（Cocoon の h2/h3・ul・button の装飾を拾わないよう、見出しは p で組む）
 */
.gkmq2{
  --g:#15803d; --g2:#166534; --gs:#e9f4ec; --deep:#14311f;
  --ink:#14311f; --mut:#5a6a61; --fnt:#93a29a; --line:#cfdad2; --sunk:#f7faf8;
  --gold:#b0761a; --golds:#f6ecd9; --bad:#c0392b; --bads:#fbeceb;
  color:var(--ink); font-size:15px; line-height:1.7; margin:0 0 24px;
}
.gkmq2 *, .gkmq2 *::before, .gkmq2 *::after{box-sizing:border-box}
.gkmq2 p{margin:0}
.gkmq2 a{color:var(--g)}
.gkmq2 button{font:inherit;color:inherit;margin:0;box-shadow:none;text-transform:none;letter-spacing:normal;cursor:pointer;-webkit-appearance:none;appearance:none}
.gkmq2 button:disabled{cursor:default}
.gkmq2 :focus-visible{outline:3px solid #a8c2b2;outline-offset:2px}
.gkmq2-loading,.gkmq2-error{padding:24px 0;color:var(--mut)}
.gkmq2-error{display:grid;gap:10px}

.gkmq2-h{font-size:20px;font-weight:800;margin:0 0 12px !important;line-height:1.4}
.gkmq2-h2{font-size:15px;font-weight:800;margin:18px 0 8px !important}
.gkmq2-note{font-size:12px;color:var(--fnt);margin:0 0 12px !important}
.gkmq2-warn{color:var(--bad);font-weight:700}

.gkmq2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:6px;background:var(--g);color:#fff !important;font-weight:700;padding:12px 18px;font-size:15px;text-decoration:none !important;line-height:1.3}
.gkmq2-btn:hover{background:var(--g2)}
.gkmq2-btn:disabled{opacity:.45}
.gkmq2-sub{background:#fff;color:var(--g) !important;border:1.5px solid var(--g)}
.gkmq2-sub:hover{background:var(--gs)}
.gkmq2-sm{padding:8px 12px;font-size:13px}
.gkmq2-btn kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;border:1px solid currentColor;border-radius:4px;padding:0 4px;opacity:.75;background:none;color:inherit;box-shadow:none}
.gkmq2-link{background:none;border:0;color:var(--mut);font-size:13px;padding:4px 0}
.gkmq2-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gkmq2-end{justify-content:flex-end}
.gkmq2-pill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--sunk);color:var(--mut);border:1px solid var(--line);white-space:nowrap}
.gkmq2-pill.gkmq2-good{background:var(--gs);color:var(--g);border-color:transparent}
.gkmq2-pill.gkmq2-weak{background:var(--bads);color:var(--bad);border-color:transparent}

/* まとめ */
.gkmq2-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 8px}
.gkmq2-sum>div{background:#fff;padding:9px 12px}
.gkmq2-sum b{display:block;font-size:22px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.gkmq2-sum b small{font-size:12px;font-weight:500;color:var(--mut)}
.gkmq2-sum span{font-size:11.5px;color:var(--mut)}

.gkmq2-card{border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 10px}
.gkmq2-card p{font-size:14px}
.gkmq2-resume{background:var(--golds);border:1px solid #e3cfa6}
.gkmq2-reco{background:var(--gs);border:1px solid #cfe3d5}
.gkmq2-reco b{color:var(--g)}

/* 分野 */
.gkmq2-pickhead{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;flex-wrap:wrap;margin:16px 0 8px}
.gkmq2-pickhead .gkmq2-h2{margin:0 !important}
.gkmq2-quick{display:flex;gap:6px;flex-wrap:wrap}
.gkmq2-chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 11px;font-size:12.5px;color:var(--mut)}
.gkmq2-chip:hover{border-color:var(--g);color:var(--g)}
.gkmq2-cats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gkmq2-cats.gkmq2-odd::after{content:"";background:#fff}
@media (max-width:640px){.gkmq2-cats{grid-template-columns:1fr}.gkmq2-cats.gkmq2-odd::after{display:none}}
.gkmq2-cat{text-align:left;border:0;border-radius:0;background:#fff;padding:8px 12px 9px;display:grid;grid-template-columns:18px minmax(0,1fr) 72px;gap:3px 10px;align-items:center;width:100%}
.gkmq2-cat:hover{background:#f3f9f5}
.gkmq2-cat[aria-pressed="true"]{background:var(--gs)}
.gkmq2-box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--fnt);display:grid;place-items:center;font-size:12px;color:#fff;line-height:1}
.gkmq2-cat[aria-pressed="true"] .gkmq2-box{background:var(--g);border-color:var(--g)}
.gkmq2-name{font-weight:700;font-size:13.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gkmq2-acc{text-align:right;font-weight:800;font-size:16px;line-height:1.1;font-variant-numeric:tabular-nums}
.gkmq2-acc small{font-size:10.5px;margin-left:2px}
.gkmq2-acc.gkmq2-good{color:var(--g)} .gkmq2-acc.gkmq2-near{color:var(--gold)} .gkmq2-acc.gkmq2-weak{color:var(--bad)}
.gkmq2-acc.gkmq2-few{color:var(--mut)} .gkmq2-acc.gkmq2-none{color:var(--fnt);font-size:12px}
.gkmq2-bar{position:relative;display:block;height:5px;border-radius:99px;background:#e8eeea;overflow:hidden}
.gkmq2-cat .gkmq2-bar{grid-column:2}
.gkmq2-bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--g)}
.gkmq2-bar.gkmq2-near i{background:var(--gold)} .gkmq2-bar.gkmq2-weak i{background:var(--bad)} .gkmq2-bar.gkmq2-few i{background:var(--fnt)}
.gkmq2-meta{text-align:right;font-size:11px;color:var(--fnt);white-space:nowrap;line-height:1.2;font-variant-numeric:tabular-nums}

.gkmq2-conds{display:grid;gap:10px;margin:12px 0 0;padding:12px;border-radius:10px;background:var(--sunk)}
.gkmq2-cond{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gkmq2-cond>span{font-size:12.5px;font-weight:700;color:var(--mut);min-width:5em}
.gkmq2-opts{display:flex;gap:6px;flex-wrap:wrap}
.gkmq2-opt{border:1.5px solid var(--line);background:#fff;border-radius:6px;padding:5px 10px;font-size:13px}
.gkmq2-opt small{color:var(--fnt);margin-left:4px}
.gkmq2-opt[aria-pressed="true"]{border-color:var(--g);color:var(--g);font-weight:700}
.gkmq2-opt:disabled{opacity:.4}

/* 下に貼り付くバー */
.gkmq2 .gkmq2-dock{position:-webkit-sticky;position:sticky;bottom:0;z-index:50;margin:12px 0 0;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:10px 10px 0 0;box-shadow:0 -4px 14px rgba(20,49,31,.08);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:10px}
.gkmq2 .gkmq2-dock p{font-size:13px;color:var(--mut);line-height:1.45}
.gkmq2 .gkmq2-dock p b{color:var(--ink);font-size:15px}
.gkmq2 .gkmq2-dock .gkmq2-btn{flex:none}
/* バーが出ている間は、Cocoon の「トップへ戻る」をバーの上へ逃がす
   ⚠️ body に付けるクラスはバー（.gkmq2-dock）と**別の名前**にする。同じ名前だと
      バーの CSS がページ本体（body）に当たり、サイト全体の段落の文字サイズや余白が変わる（2026-09-23 テストで検出） */
body.gkmq2-docked #go-to-top{bottom:96px !important}

/* 出題 */
.gkmq2-qbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.gkmq2-count{font-weight:800;font-variant-numeric:tabular-nums}
.gkmq2-timer{margin-left:auto;font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.gkmq2-dots{display:flex;gap:3px;flex:1 1 100%}
.gkmq2-dots i{flex:1;height:5px;border-radius:3px;background:#e8eeea}
.gkmq2-dots i.cur{background:var(--fnt)} .gkmq2-dots i.ok{background:var(--g)} .gkmq2-dots i.ng{background:var(--bad)}
.gkmq2-qmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 6px;min-height:28px}
.gkmq2-star{margin-left:auto;border:1.5px solid var(--line);background:#fff;border-radius:6px;padding:3px 10px;font-size:12.5px;color:var(--mut)}
.gkmq2-star[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:var(--golds);font-weight:700}
.gkmq2-qtext{font-size:16.5px;font-weight:700;line-height:1.75;margin:4px 0 14px}
.gkmq2-qtext p+p{margin-top:.6em}
.gkmq2-choices{display:grid;gap:8px}
.gkmq2-choice{width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:11px 12px;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:start;font-size:15px;line-height:1.6}
.gkmq2-choice:hover:not(:disabled){border-color:var(--g)}
.gkmq2-choice:disabled{opacity:1;color:var(--ink)}
.gkmq2-k{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:var(--sunk);border:1px solid var(--line);color:var(--mut);font-size:12px;font-weight:700;margin-top:1px}
.gkmq2-mark{grid-column:2;font-weight:800;font-size:12.5px}
.gkmq2-why{grid-column:2;font-size:13px;color:var(--mut);border-top:1px dashed var(--line);padding-top:7px}
.gkmq2-choice.is-ok{border-color:var(--g);background:var(--gs)}
.gkmq2-choice.is-ok .gkmq2-k{background:var(--g);border-color:var(--g);color:#fff}
.gkmq2-choice.is-ok .gkmq2-mark{color:var(--g)}
.gkmq2-choice.is-ng{border-color:var(--bad);background:var(--bads)}
.gkmq2-choice.is-ng .gkmq2-k{background:var(--bad);border-color:var(--bad);color:#fff}
.gkmq2-choice.is-ng .gkmq2-mark{color:var(--bad)}
.gkmq2-choice.is-dim{color:var(--mut)}
.gkmq2-verdict{margin:14px 0 8px !important;font-size:19px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
/* みんなの正答率 */
.gkmq2-crowd{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12.5px;color:var(--mut);font-weight:400}
.gkmq2-crowd b{font-size:14px;color:var(--ink)}
.gkmq2-crowd small{font-size:11px;color:var(--fnt)}
.gkmq2-crowd em{font-style:normal;font-size:12px;color:var(--gold);font-weight:700}
.gkmq2-ratebar{width:90px;height:6px;display:inline-block}
.gkmq2-ratebar i{background:var(--g2)}
.gkmq2-verdict.is-ok b{color:var(--g)} .gkmq2-verdict.is-ng b{color:var(--bad)}
.gkmq2-exp{background:var(--sunk);border-radius:8px;padding:12px 14px;font-size:14px}
.gkmq2-exp p+p{margin-top:.8em}
.gkmq2-exph{font-size:12.5px;font-weight:700;color:var(--mut)}
.gkmq2-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:13px}
.gkmq2-qfoot{display:flex;justify-content:flex-end;margin:16px 0 0}
.gkmq2-keys{font-size:11.5px;color:var(--fnt);margin:12px 0 0 !important}
@media (hover:none){.gkmq2-keys{display:none}}

/* 結果 */
.gkmq2-eyebrow{font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.04em;margin:0 0 6px !important}
.gkmq2-score{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:14px;border-radius:10px;background:var(--sunk);margin:0 0 12px}
.gkmq2-big{font-size:44px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.gkmq2-big small{font-size:18px;color:var(--mut)}
.gkmq2-score p{font-size:13.5px;margin:0 0 8px}
.gkmq2-score .gkmq2-bar{height:9px}
.gkmq2-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.gkmq2-deltas{display:grid;gap:4px;font-size:13px}
.gkmq2-delta{display:flex;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.gkmq2-arrow{color:var(--fnt)}
.gkmq2-delta .up{color:var(--g);font-weight:700} .gkmq2-delta .down{color:var(--bad);font-weight:700}
.gkmq2-review{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gkmq2-review details+details{border-top:1px solid var(--line)}
.gkmq2-review summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:9px 12px;align-items:center;font-size:13.5px}
.gkmq2-review summary::-webkit-details-marker{display:none}
.gkmq2-rk{font-weight:800;width:18px;text-align:center}
.gkmq2-rk.is-ok{color:var(--g)} .gkmq2-rk.is-ng{color:var(--bad)}
.gkmq2-rq{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gkmq2-rbody{padding:2px 12px 12px 40px;font-size:13px;color:var(--mut);display:grid;gap:4px}
.gkmq2-rbody b{color:var(--ink)}

/* 会員サイトの案内 */
.gkmq2-up{margin:20px 0 0;border:1.5px solid var(--deep);border-radius:12px;overflow:hidden;background:#fff}
.gkmq2-uh{background:var(--deep);color:#fff;padding:11px 14px}
.gkmq2-uh small{display:block;font-size:11.5px;opacity:.85;letter-spacing:.04em}
.gkmq2-uh b{display:block;font-size:16px;line-height:1.45}
.gkmq2-ub{padding:12px 14px;display:grid;gap:10px}
.gkmq2-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gkmq2-facts>div{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:8px 8px 9px;display:grid;gap:2px;align-content:start}
/* 数字は深緑。赤は「不正解」の色なので、ここで使うと警告のように見えてものものしい（2026-09-23 ユーザー指摘） */
.gkmq2-facts b{font-size:22px;font-weight:800;color:var(--deep);line-height:1.15}
.gkmq2-facts b small{font-size:12px;margin-left:1px}
.gkmq2-facts span{font-size:11.5px;color:var(--mut);line-height:1.45}
.gkmq2-facts sup{font-size:9px}
.gkmq2-src{font-size:11px;color:var(--fnt);margin-top:-4px !important}
.gkmq2-src a{color:var(--mut)}
.gkmq2-lead{font-size:13.5px}
.gkmq2-proof{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gkmq2-ub-badge{background:var(--gold);color:#fff;font-weight:700;font-size:12px;padding:3px 10px;border-radius:4px}
.gkmq2-rate{border:1.5px solid #dcc59a;color:var(--gold);font-weight:700;font-size:12px;padding:2px 9px;border-radius:4px}
.gkmq2-proof small{font-size:11px;color:var(--fnt)}
.gkmq2-cta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.gkmq2-cta span{font-size:12.5px;color:var(--mut)}
.gkmq2-buyout{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:8px}
.gkmq2-buyout p{font-size:13px;font-weight:700;color:var(--mut)}
.gkmq2-buyout img{display:block;width:100%;max-width:480px;height:auto;border-radius:6px;border:1px solid var(--line)}
.gkmq2-more{font-size:12.5px}

/* body 直下に出すもの */
.gkmq2-toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:#14311f;color:#fff;padding:8px 14px;border-radius:8px;font-size:13px;z-index:100000;max-width:calc(100vw - 32px)}
.gkmq2-modal{position:fixed;inset:0;background:rgba(10,25,15,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100001}
.gkmq2-modal>div{background:#fff;border-radius:12px;padding:18px;max-width:360px;width:100%;display:grid;gap:10px;color:#14311f;font-size:14px;line-height:1.7}
.gkmq2-modal p{margin:0}
.gkmq2-mh{font-weight:800;font-size:16px}
.gkmq2-modal .gkmq2-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:#15803d;color:#fff;font-weight:700;padding:8px 12px;font-size:13px;cursor:pointer;font-family:inherit}
.gkmq2-modal .gkmq2-sub{background:#fff;color:#15803d;border:1.5px solid #15803d}
.gkmq2-modal .gkmq2-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

@media (max-width:480px){
  .gkmq2-sum b{font-size:19px}
  .gkmq2-facts b{font-size:19px}
  .gkmq2-big{font-size:38px}
}
@media (prefers-reduced-motion:reduce){.gkmq2 *{transition:none !important;scroll-behavior:auto !important}}

/* ---------- 無料登録（保存先の表示・フォーム） ---------- */
.gkmq2-save{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:10px;padding:8px 12px;margin:0 0 12px;font-size:12.5px;color:var(--mut)}
.gkmq2-save.is-on{border-style:solid;border-color:#cfe3d5;background:var(--gs);color:var(--g2)}
.gkmq2-save b{color:var(--ink)}
/* 「ログイン」「アカウント」は文字だけだと押せるように見えないので下線を付ける（2026-09-25 画面確認で修正） */
.gkmq2-save .gkmq2-link{text-decoration:underline;color:var(--g2);font-weight:700}
.gkmq2-savecard{border:1.5px solid var(--g);border-radius:10px;padding:8px 12px;margin:0 0 12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:13.5px}

/* ダイアログは .gkmq2 の外（body 直下）に出るので、色の変数をここにも持たせる */
.gkmq2-modal{--g:#15803d;--g2:#166534;--gs:#e9f4ec;--ink:#14311f;--mut:#5a6a61;--fnt:#93a29a;--line:#cfdad2;--bad:#c0392b}
.gkmq2-modal .gkmq2-link{background:none;border:0;color:var(--mut);font-size:13px;padding:4px 0;cursor:pointer;font-family:inherit;text-decoration:underline}
.gkmq2-modal .gkmq2-danger{color:var(--bad)}
.gkmq2-modal .gkmq2-btn:disabled{opacity:.5;cursor:default}
.gkmq2-modal button.gkmq2-btn[type="submit"]{width:100%;padding:12px;font-size:15px}
.gkmq2-mtop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gkmq2-x{background:none;border:0;font-size:22px;line-height:1;color:var(--mut);cursor:pointer;padding:0 4px}
.gkmq2-mlead{color:var(--mut);font-size:13.5px}
.gkmq2-form{display:grid;gap:10px}
.gkmq2-field{display:grid;gap:4px;font-size:12.5px;font-weight:700;color:var(--mut)}
.gkmq2-field input{font:inherit;font-size:16px;font-weight:400;color:var(--ink);border:1.5px solid var(--line);border-radius:8px;padding:10px 11px;width:100%;background:#fff;box-sizing:border-box}
.gkmq2-field input:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px rgba(21,128,61,.15)}
.gkmq2-show{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut)}
.gkmq2-err{color:var(--bad);font-size:13px;font-weight:700;min-height:0}
.gkmq2-err:empty{display:none}
.gkmq2-fine{font-size:11.5px;color:var(--mut);line-height:1.7}
.gkmq2-fine a{color:var(--g);margin-left:4px}
.gkmq2-mlinks{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;border-top:1px solid var(--line);padding-top:8px}

/* 登録・ログイン直後の確認の枠（消さずに残す）と、結果画面の「保存しました」 */
.gkmq2-okcard{border:1.5px solid var(--g);background:var(--gs);border-radius:10px;padding:10px 12px;margin:0 0 12px;display:grid;gap:4px;font-size:13.5px;color:var(--ink)}
.gkmq2-okhead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gkmq2-okhead b{color:var(--g2);font-size:15.5px}
.gkmq2-okcard .gkmq2-x{background:none;border:0;font-size:20px;line-height:1;color:var(--mut);cursor:pointer;padding:0 4px}
.gkmq2-okcard .gkmq2-fine{font-size:12px;color:var(--mut)}
.gkmq2-saved{font-size:13px;color:var(--g2);font-weight:700;margin:0 0 12px !important}