/* ssw-benkyo ユーザー画面 共通スタイル（スマホ幅390px想定 / PCデモではフレーム表示） */
/* QA(2026-07-25): 白文字/白地で4.5:1を満たすAA準拠色へ暗色化（共通変数=同根修正・可逆） */
:root{ --blue:#2d6cb0; --green:#1c8437; --red:#c62834; --orange:#b06515; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body{ margin:0; font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
      background:#e9edf2; color:#1a1a1a; display:flex; justify-content:center; min-height:100vh; }
.phone{ width:390px; background:#fff; min-height:100vh; box-shadow:0 0 30px #0002; display:flex; flex-direction:column; }
header{ background:var(--blue); color:#fff; padding:12px 16px; }
header h1{ font-size:1.05rem; margin:0; }
header .sub{ font-size:.72rem; opacity:.85; }
main{ flex:1; padding:16px; }
a{ color:var(--blue); }
.loading{ text-align:center; color:#6b7280; padding:48px 0; }
.empty{ color:#6b7280; text-align:center; padding:20px 0; }
ruby rt{ font-size:.55em; color:var(--blue); }

/* ボタン */
.btn{ display:block; width:100%; padding:14px; border:0; border-radius:12px; font-size:1rem; font-weight:bold; cursor:pointer; }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-blue{ background:var(--blue); color:#fff; } /* A2-40応急: 学習者側でも primary青ボタンの文字色を白に明示 */
.btn-ghost, .btn-secondary{ background:#eef1f5; color:#333; } /* A2-40: secondary系統(btn-ghostは非推奨エイリアス) */
.btn-red, .btn-danger{ background:var(--red); color:#fff; } /* A2-40: danger系統(btn-redは非推奨エイリアス) */

/* スタート画面 */
.field{ margin:14px 0; }
.flabel{ font-size:.82rem; color:#666; font-weight:bold; margin-bottom:6px; }
.seg{ display:flex; gap:8px; }
.seg button{ flex:1; padding:12px; border:2px solid #dde; border-radius:12px; background:#fff; font-size:.95rem; cursor:pointer; }
.seg button.on{ border-color:var(--blue); background:#eaf2fb; color:var(--blue); font-weight:bold; }
.chapbox{ margin-top:10px; border:1px solid #e5e8ee; border-radius:12px; padding:8px 12px; max-height:230px; overflow:auto; }
.chaphint{ font-size:.72rem; color:#6b7280; margin:4px 0 8px; }
.chk{ display:block; padding:7px 2px; font-size:.92rem; border-bottom:1px solid #f0f2f5; cursor:pointer; }
.chk:last-child{ border-bottom:0; }
.chk input{ margin-right:8px; }

/* 演習 */
.topbar{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.topbar .pos{ font-size:.85rem; color:#666; font-weight:bold; }
.topbar .exit{ margin-left:auto; border:1px solid #d0d5db; background:#fff; color:#666; font-size:.8rem;
               padding:6px 12px; border-radius:20px; cursor:pointer; }
/* 一問一答／単語クイズ 共通 進捗表示（◯問目/N問＋バー・常時表示） */
.qprog{ flex:1; min-width:0; }
.qprog-top{ display:flex; align-items:center; margin-bottom:4px; }
.qprog-label{ font-size:.85rem; color:#555; font-weight:bold; font-variant-numeric:tabular-nums; }
.qprog-bar{ height:6px; background:#e6ebf2; border-radius:6px; overflow:hidden; }
.qprog-fill{ height:100%; width:0; background:var(--blue); border-radius:6px; transition:width .3s ease; }
.meta{ font-size:.72rem; color:#6b7280; display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.badge{ background:var(--blue); color:#fff; padding:1px 8px; border-radius:6px; font-weight:bold; }
.badge.jitsugi{ background:var(--orange); }
.src{ margin-left:auto; }
.body{ font-size:1.2rem; line-height:1.9; margin:6px 0 18px; }
.options{ display:flex; flex-direction:column; gap:10px; }
.opt{ padding:14px; border:2px solid #dde; border-radius:12px; background:#fff; font-size:1.05rem; cursor:pointer; text-align:left; }
.opt.ox{ text-align:center; font-size:1.6rem; font-weight:bold; }
.opt.sel{ border-color:var(--blue); background:#eaf2fb; }
.opt.correct{ border-color:var(--green); background:#e5f6e9; }
.opt.wrong{ border-color:var(--red); background:#fbeaec; }
.opt:disabled{ cursor:default; }
.submit{ display:flex; gap:10px; margin-top:18px; }
.submit button{ flex:1; padding:13px; border:0; border-radius:12px; font-size:.95rem; font-weight:bold; cursor:pointer; }
.btn-answer{ background:var(--green); color:#fff; }
.btn-hesitate{ background:#f0ad4e; color:#fff; }
.submit button:disabled{ opacity:.4; cursor:default; }
.reveal{ margin-top:18px; }
.verdict{ font-size:1.3rem; font-weight:bold; text-align:center; padding:10px; border-radius:12px; }
.verdict.ok{ background:#e5f6e9; color:var(--green); }
.verdict.ng{ background:#fbeaec; color:var(--red); }
.verdict .hz{ font-size:.75rem; color:var(--orange); display:block; margin-top:2px; }
.exp{ margin-top:14px; border:1px solid #eee; border-radius:12px; overflow:hidden; }
.tabs{ display:flex; border-bottom:1px solid #eee; }
.tabs button{ flex:1; padding:8px; border:0; background:#f6f7f9; font-size:.8rem; cursor:pointer; color:#666; }
.tabs button.on{ background:#fff; color:var(--blue); font-weight:bold; box-shadow:inset 0 -2px 0 var(--blue); }
.exp .text{ padding:12px 14px; font-size:.9rem; line-height:1.75; min-height:52px; }
.reveal .btn{ margin-top:16px; }
/* この問題の大切な言葉（解説の下・一問一答/模試結果 共通） */
.wordbox{ margin-top:12px; border:1px solid #d8ede9; background:#f3faf8; border-radius:12px; padding:10px 12px; }
.wb-title{ font-size:.82rem; font-weight:bold; color:#1c8f7c; margin-bottom:8px; }
.wb-title i{ margin-right:5px; }
.wterm{ display:flex; align-items:baseline; gap:10px; padding:6px 0; border-top:1px dashed #cfe6e0; }
.wterm:first-of-type{ border-top:0; }
.wt-head{ font-size:1.05rem; font-weight:bold; color:#153; white-space:nowrap; }
.wt-head rt{ font-size:.5em; font-weight:normal; color:#566677; }
.wt-def{ font-size:.83rem; line-height:1.6; color:#334; }
.wt-lang{ display:inline-block; font-size:.66rem; color:#1c8f7c; background:#e2f2ee; border-radius:5px; padding:0 5px; margin-right:6px; vertical-align:middle; }

/* 結果画面 */
.rtitle{ font-size:1.1rem; border-left:4px solid var(--blue); padding-left:8px; margin:6px 0 12px; }
.rtitle.sm{ margin-top:22px; }
.times{ font-size:.8rem; color:#555; background:#f6f8fb; border-radius:10px; padding:10px 14px; line-height:1.7; }
.allserved{ margin:10px 0; font-size:.82rem; color:#c07a00; background:#fff7e6; border:1px solid #f0c674; border-radius:10px; padding:8px 12px; }
.chartwrap{ display:flex; align-items:center; gap:14px; margin:16px 0; }
.pie{ flex:0 0 auto; }
.ssw-legend{ font-size:.82rem; line-height:1.9; }
.ssw-legend .lg{ display:flex; align-items:center; }
.ssw-legend .sw{ width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:7px; }
.summary{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.summary > div{ border:1px solid #eee; border-radius:10px; padding:8px 12px; }
.summary span{ font-size:.75rem; color:#888; display:block; }
.summary b{ font-size:1.3rem; }
.summary small{ display:block; font-size:.68rem; color:#8bc34a; font-weight:bold; }
.rev{ border:1px solid #eee; border-radius:12px; padding:10px 12px; margin:8px 0; }
.rev .rq{ font-size:1rem; margin-bottom:6px; }
.rev .tagline{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rev .tag{ font-size:.72rem; font-weight:bold; padding:1px 7px; border-radius:6px; }
.tag.c{ background:#e5f6e9; color:var(--green); }
.tag.w{ background:#fbeaec; color:var(--red); }
.tag.h{ background:#fff3e0; color:var(--orange); }
.rev .ans{ font-size:.78rem; color:#666; }
.rev .ex{ margin-top:8px; border-top:1px dashed #ddd; padding-top:6px; }
.rev .ex .text{ padding:6px 2px; font-size:.85rem; }
.srcline{ font-size:.68rem; color:#767c88; }
.foot{ margin-top:20px; display:flex; flex-direction:column; gap:8px; }

/* 履歴 */
.tabs2{ display:flex; gap:8px; margin-bottom:12px; }
.tabs2 button{ flex:1; padding:9px; border:0; border-radius:10px; background:#eef1f5; font-weight:bold; cursor:pointer; color:#666; }
.tabs2 button.on{ background:var(--blue); color:#fff; }
.tabs2 button:disabled{ opacity:.5; cursor:default; }
.hitem{ border:1px solid #eee; border-radius:12px; padding:11px 14px; margin:8px 0; cursor:pointer; }
.hitem:active{ background:#f6f8fb; }
.hmain{ display:flex; align-items:center; gap:8px; }
.hdate{ font-weight:bold; }
.hsub{ font-size:.8rem; color:#777; margin-top:3px; }

/* モーダル */
.modal-bg{ position:fixed; inset:0; background:#0006; display:flex; align-items:center; justify-content:center; padding:24px; z-index:10; }
.modal-bg[hidden]{ display:none; }
.modal{ background:#fff; border-radius:16px; padding:20px; max-width:330px; width:100%; }
.modal p{ margin:0 0 18px; font-size:.95rem; line-height:1.7; }
.modal-btns{ display:flex; flex-direction:column; gap:8px; }

/* ===== 認証後ヘッダー（固定＋ドロワー） ===== */
.apphead{ background:var(--blue); color:#fff; padding:12px 14px; display:flex; align-items:center;
          position:sticky; top:0; z-index:30; }
.apphead .brand{ font-weight:bold; font-size:1.05rem; }
.uicon{ margin-left:auto; border:0; background:transparent; color:#fff; font-size:1.7rem; padding:0; cursor:pointer; line-height:1; }
.flagbadge{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:22px; padding:0 6px; background:#fff; color:var(--blue); border-radius:4px; font-size:.75rem; font-weight:bold; }
/* 右ドロワー */
.drawer-overlay{ position:fixed; inset:0; background:#0005; z-index:40; }
.drawer-overlay[hidden]{ display:none; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:270px; max-width:80%; background:#fff; z-index:50;
         transform:translateX(100%); transition:transform .25s ease; box-shadow:-6px 0 24px #0003; display:flex; flex-direction:column; }
.drawer[hidden]{ display:none; }
.drawer.open{ transform:translateX(0); }
.drawer-close{ align-self:flex-end; border:0; background:transparent; font-size:1.4rem; color:#888; padding:14px 16px; cursor:pointer; }
.drawer-user{ display:flex; align-items:center; gap:12px; padding:6px 20px 18px; border-bottom:1px solid #eee; }
.drawer-user img{ width:40px; border-radius:5px; }
.drawer-user .dname{ font-weight:bold; font-size:1.05rem; }
.drawer-user .dnat{ font-size:.78rem; color:#888; }
.drawer-nav{ padding:8px 0; }
.drawer-item{ display:flex; align-items:center; gap:12px; padding:14px 22px; color:#333; text-decoration:none; font-weight:bold; }
.drawer-item i{ width:20px; color:var(--blue); }
.drawer-item:active{ background:#f2f5f9; }
/* フッター */
.appfoot{ text-align:center; font-size:.72rem; color:#6b7280; padding:16px 0 20px; }
/* ゲストヘッダー（言語切替） */
.guesthead{ display:flex; align-items:center; }
/* 第5弾2/3: トップの言語切替＝9言語の国旗（新規登録ボタンの下） */
.langflags{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin:22px auto 4px; max-width:330px; }
.langflags .langflag{ display:flex; flex-direction:column; align-items:center; gap:3px; width:52px; text-decoration:none; color:#667; opacity:.62; transition:opacity .15s; }
.langflags .langflag:hover{ opacity:1; }
.langflags .langflag.on{ opacity:1; font-weight:bold; color:#243; }
.langflags .langflag img{ border-radius:4px; box-shadow:0 1px 3px #0002; }
.langflags .langflag.on img{ outline:2px solid var(--blue); outline-offset:1px; }
.langflags .langlabel{ font-size:.62rem; line-height:1.15; text-align:center; }
.langflags .flagtxt{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; background:#eef; border-radius:4px; font-size:.72rem; font-weight:bold; color:var(--blue); }
/* 第4弾3/第5弾3: 人材一覧 国籍列の国旗 */
.natflag{ border-radius:3px; vertical-align:middle; box-shadow:0 0 1px #0003; }
.guesthead h1{ font-size:1.05rem; margin:0; }
.langsw{ margin-left:auto; display:flex; gap:2px; }
.langsw a{ color:#fff; font-size:.72rem; padding:3px 7px; border-radius:6px; text-decoration:none; opacity:.75; }
.langsw a.on{ background:#ffffff33; opacity:1; font-weight:bold; }
.page-h{ font-size:1.15rem; margin:4px 0 16px; }
/* 第5弾件2: .loginform input{width:100%} でチェックボックスが全幅化＋テキストが flex item で
   最小幅に潰れ1文字ずつ縦崩れしていた。flexをやめブロックlabel＋インライン要素の定番形にして
   横書き・全幅折返しを保証する（縦崩れの原理的排除）。 */
.remember{ display:block; font-size:.85rem; color:#555; margin:12px 0; line-height:1.6; }
/* input[type=checkbox] で .loginform input{width:100%} より高特異度にして全幅化を確実に打ち消す */
.remember input[type=checkbox]{ width:18px; height:18px; vertical-align:middle; margin-right:8px; display:inline-block; }
.remember .rl{ vertical-align:middle; }
.notice{ background:#e5f6e9; color:#1c7a34; border:1px solid #b6e3c2; border-radius:10px; padding:12px 14px; font-size:.9rem; }

/* ===== マイページ カード ===== */
.sectorfield label{ display:block; }
.card{ border:1px solid #e6e9ee; border-radius:14px; margin:14px 0; overflow:hidden; box-shadow:0 1px 4px #0000000a; }
.card-h{ padding:11px 16px; font-weight:bold; font-size:1.05rem; display:flex; align-items:center; gap:9px; color:#fff; background:#5a6b7d; }
.card-h i{ font-size:1rem; opacity:.95; }
.card-b{ padding:14px 16px; }
.card-b .d{ font-size:.8rem; color:#777; margin:0 0 12px; line-height:1.7; }
.card-b .btn{ margin-top:8px; }
.card-b .metric{ font-size:.92rem; font-weight:bold; color:#333; margin-bottom:10px; }
.card-b .metric.big{ font-size:1.25rem; color:var(--blue); }
.c-blue .card-h{ background:#2d6cb0; } .c-orange .card-h{ background:#b06515; }
.c-red .card-h{ background:#c0343a; } .c-purple .card-h{ background:#6a52b8; }
.c-green .card-h{ background:#2e8f52; } .c-gray .card-h{ background:#626c7e; }
.c-teal .card-h{ background:#1f857b; }
/* 単語帳 */
.words-progress{ text-align:center; font-weight:bold; color:#1f7d73; margin:6px 0 14px; }
.word-group{ font-size:.8rem; font-weight:bold; color:#7a8699; margin:16px 0 6px; border-left:3px solid #1f7d73; padding-left:8px; }
.word-card{ border:1px solid #e6e9ee; border-radius:12px; padding:12px 14px; margin:8px 0; background:#fff; }
.word-card.is-mem{ background:#f0faf8; border-color:#bfe6df; }
.wc-top{ display:flex; align-items:flex-start; gap:10px; }
.wc-term{ font-size:1.15rem; font-weight:bold; color:#243447; flex:1; }
.wc-read{ display:block; font-size:.72rem; color:#586372; font-weight:normal; margin-top:1px; }
.wc-mem{ background:#eef2f6; color:#586372; border:0; white-space:nowrap; }
.word-card.is-mem .wc-mem{ background:#1f7d73; color:#fff; }
.wc-img{ margin:8px 0; }
.wc-img svg{ max-width:180px; height:auto; }
.wc-def{ font-size:.9rem; line-height:1.75; color:#333; margin-top:8px; }
/* 大きな漢字見出し＋ふりがな（ruby） */
.wc-term ruby{ font-size:1.35rem; }
.wc-term rt{ font-size:.42em; color:#586372; font-weight:normal; }
/* 定義3段（母語→英→やさしい日本語） */
.words-actions{ margin:2px 0 12px; }
.words-filter{ display:flex; align-items:center; gap:8px; margin:4px 0 10px; }
.words-filter select{ flex:1; padding:7px 10px; border:1px solid #d5dbe4; border-radius:9px; font-size:.85rem; background:#fff; }
.wc-defs{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.wc-stage{ display:flex; gap:8px; align-items:baseline; }
.wc-stage-lang{ flex:0 0 auto; font-size:.64rem; color:#1f7d73; background:#e2f2ee; border-radius:5px; padding:1px 6px; white-space:nowrap; }
.wc-stage[lang="ja"] .wc-stage-lang{ color:#b5761c; background:#f6ecda; }
.wc-stage-text{ font-size:.86rem; line-height:1.65; color:#333; }
.wc-rel{ margin-top:9px; font-size:.74rem; color:#7a8699; }
.wc-rel i{ margin-right:4px; }
/* 単語クイズ（.qprog は共通進捗コンポーネント=上部で定義） */
.qask{ text-align:center; font-size:.82rem; color:#1f7d73; font-weight:bold; margin-bottom:8px; }
.qprompt{ text-align:center; padding:18px 12px; border:1px solid #e6e9ee; border-radius:14px; background:#fafbfc; margin-bottom:14px; line-height:1.5; }
.qprompt.ja_to_meaning{ font-size:1.7rem; font-weight:bold; color:#243447; }
.qprompt.ja_to_meaning rt{ font-size:.35em; color:#586372; font-weight:normal; }
.qprompt.meaning_to_ja{ font-size:1rem; color:#333; }
.qask + .qprompt.meaning_to_ja{ text-align:left; }
/* 誓約（電子サイン） */
.pledge-div{ font-weight:bold; color:#2a6; margin:2px 0 12px; }
.pledge-div i{ margin-right:5px; }
.pledge-body{ background:#f7f9fb; border:1px solid #e6e9ee; border-radius:12px; padding:12px 14px; font-size:.85rem; line-height:1.9; color:#243; margin:8px 0 16px; }
.pledge-lbl,.pledge-sign-lbl{ display:block; font-size:.8rem; font-weight:bold; color:#556; margin:12px 0 5px; }
.pledge-select{ width:100%; padding:9px 10px; border:1px solid #d5dbe4; border-radius:9px; font-size:.82rem; background:#fff; }
.pledge-agree{ display:flex; align-items:flex-start; gap:8px; font-size:.83rem; margin:14px 0; line-height:1.5; }
.pledge-agree input{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; }
.sigwrap{ border:2px dashed #c3ccd8; border-radius:12px; background:#fff; }
.sigpad{ width:100%; height:170px; display:block; touch-action:none; }
.sig-actions{ margin:6px 0 16px; text-align:right; }
.pledge-existing{ background:#eef8f1; border:1px solid #bfe6cd; border-radius:12px; padding:10px 12px; margin-bottom:14px; }
.pledge-existing .pe-h{ font-weight:bold; color:#1c8f4c; font-size:.85rem; margin-bottom:8px; }
.pledge-success{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.pledge-status{ margin-top:8px; font-size:.82rem; color:#8a6d1c; background:#fbf4dd; border-radius:8px; padding:7px 10px; }
.pledge-status.ok{ color:#1c8f4c; background:#eef8f1; }
.pledge-status i{ margin-right:5px; }
.card-h .soon{ font-size:.68rem; background:#ffffff44; padding:1px 8px; border-radius:8px; margin-left:6px; }
.btn-jobs{ background:#2c3e56; color:#fff; font-size:1.05rem; padding:16px; margin-top:18px; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; text-decoration:none; font-weight:bold; }
/* 解説タブ（縦並びは廃止） */
.exptabs{ margin-top:12px; }

/* ===== ランディング / 情報ページ ===== */
.landing{ text-align:center; padding:20px 0; }
.lhero{ font-size:3.4rem; }
.llead{ font-size:1.2rem; margin:14px 8px; }
.ldesc{ font-size:.9rem; color:#666; margin:0 4px 24px; line-height:1.8; }
.infobox{ text-align:center; padding:24px 12px; border:1px solid #e5e8ee; border-radius:14px; }
.ihero{ font-size:2.6rem; }
.infobox p{ font-size:.95rem; line-height:1.8; color:#444; }
.verify-banner{ display:flex; gap:12px; align-items:flex-start; background:#fff8e1; border:1px solid #f2d98a; border-radius:12px; padding:14px; margin-bottom:14px; }
.verify-banner > i{ color:#c98a00; font-size:1.3rem; margin-top:2px; }
.verify-banner p{ margin:0 0 8px; font-size:.92rem; line-height:1.6; color:#5a4600; }

/* ===== ログイン ===== */
.loginform input{ width:100%; padding:13px; border:1px solid #ccd; border-radius:12px; font-size:1rem; }
.alert{ background:#fbeaec; color:var(--red); border:1px solid #f3c2c8; border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:.9rem; }
/* 紹介登録フォーム */
.regform .flabel{ margin-top:12px; }
.finput{ width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid #cdd5e0; border-radius:10px; font-size:1rem; background:#fff; }
.finput:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px #4a90d922; }
.fhint{ font-size:.75rem; color:#586372; margin:5px 0 0; }

/* ===== マイページ ===== */
.sectorsel{ width:100%; padding:12px; border:2px solid #dde; border-radius:12px; font-size:1rem; background:#fff; }
.sector-info{ color:#6b8cff; margin-left:6px; cursor:help; font-size:.9em; }
.sector-hint{ font-size:.8rem; color:#7a8494; margin:6px 2px 0; line-height:1.5; }
.mp{ border:1px solid #e8ebf0; border-radius:14px; padding:14px 16px; margin:12px 0; }
.mp h2{ font-size:1.05rem; margin:0 0 4px; }
.mp .d{ font-size:.82rem; color:#666; margin:0 0 12px; line-height:1.7; }
.mp .btn{ margin-top:8px; }
.mp .cnt, .mp .streak{ font-size:.9rem; font-weight:bold; color:var(--blue); margin-bottom:8px; }
.mp.jp{ background:#f7f9fc; }
.mp .soon{ font-size:.7rem; background:#ffe9c7; color:#b26a00; padding:1px 8px; border-radius:8px; vertical-align:middle; }
.jobslink{ text-align:center; margin:18px 0 8px; }
.jobslink a{ font-weight:bold; }

/* ===== 解説の縦並び（ユーザー言語→英→日） ===== */
.exps{ margin-top:12px; }
.expseg{ border-top:1px solid #eee; padding:8px 2px; }
.expseg:first-child{ border-top:0; }
.explang{ font-size:.7rem; color:var(--blue); font-weight:bold; margin-bottom:2px; }
.exptext{ font-size:.9rem; line-height:1.75; }
.reveal .exps{ border:1px solid #eee; border-radius:12px; padding:4px 12px; }

/* ===== 模試 ===== */
.divcard{ border:1px solid #dde; border-radius:14px; padding:16px; margin:12px 0; }
.divcard h3{ margin:0 0 6px; }
.divcard .streak{ font-size:.85rem; color:#666; }
.btn-green{ background:var(--green); color:#fff; }
.exambar{ display:flex; align-items:center; gap:10px; background:#f2f5f9; padding:8px 12px; border-radius:10px 10px 0 0; margin-bottom:0; }
.exambar .blk{ font-weight:bold; color:var(--blue); }
.exambar .pos{ font-size:.8rem; color:#666; }
.exambar .tmr-el{ margin-left:auto; font-size:.78rem; color:#888; font-variant-numeric:tabular-nums; }
.exambar .timer{ font-variant-numeric:tabular-nums; font-weight:bold; }
.exambar .timer.warn{ color:var(--red); }
/* 模試 進捗バー（時間消化・残20%で警告色） */
.tmrbar{ height:6px; background:#e6ebf2; border-radius:0 0 6px 6px; overflow:hidden; margin-bottom:12px; }
.tmrbar-fill{ height:100%; width:0; background:var(--blue); transition:width 1s linear; }
.tmrbar-fill.warn{ background:var(--red); }
.hold{ margin-top:12px; width:100%; padding:11px; border:2px solid var(--orange); color:var(--orange); background:#fff; border-radius:12px; font-weight:bold; cursor:pointer; }
.hold.on{ background:var(--orange); color:#fff; }
.strip{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; }
.strip button{ width:30px; height:30px; border-radius:8px; border:1px solid #ccd; background:#fff; font-size:.8rem; cursor:pointer; }
.strip button.answered{ background:var(--blue); color:#fff; border-color:var(--blue); }
.strip button.held{ background:var(--orange); color:#fff; border-color:var(--orange); }
.strip button.cur{ outline:3px solid #4a90d955; }
.nav{ display:flex; gap:10px; margin:10px 0; }
.nav button{ flex:1; padding:12px; border:0; border-radius:10px; background:#eef1f5; font-weight:bold; cursor:pointer; }
.nav button:disabled{ opacity:.4; }
.blockres{ border:1px solid #eee; border-radius:12px; padding:10px 14px; margin:8px 0; display:flex; align-items:center; }
.blockres .nm{ font-weight:bold; } .blockres .sc{ margin-left:auto; font-size:.9rem; }
.pill{ padding:2px 10px; border-radius:20px; font-size:.78rem; font-weight:bold; margin-left:6px; }
.pill.ok{ background:#e5f6e9; color:var(--green); } .pill.ng{ background:#fbeaec; color:var(--red); }
.elig{ background:#f2f7fd; border:1px solid #cfe0f3; border-radius:12px; padding:12px 14px; margin:12px 0; font-size:.9rem; }
.elig.qual{ background:#fff7e6; border-color:#f0c674; }
.hitem .hdiv{ font-size:.8rem; color:#666; margin-left:6px; }

/* ===== ユーザー側 求人 ===== */
.wantbanner{ background:#fff7e6; border:1px solid #f0c674; color:#b26a00; border-radius:12px; padding:12px 14px; font-weight:bold; font-size:.92rem; margin-bottom:14px; }

/* 合格までの道しるべ（6ステップ地図） */
.roadmap{ background:linear-gradient(160deg,#eaf2fb 0%,#f6f9fd 60%); border:1px solid #d5e3f4; border-radius:16px; padding:6px 12px; margin:4px 0 18px; box-shadow:0 2px 8px #4a90d914; }
/* 折りたたみサマリー（収納時の1行） */
.road-summary{ display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:0; padding:12px 4px; cursor:pointer; text-align:left; font:inherit; color:#2c3e56; }
.road-summary .rs-icon{ color:var(--blue); font-size:1.1rem; flex:0 0 auto; }
.road-summary .rs-text{ flex:1 1 auto; font-size:.92rem; font-weight:bold; line-height:1.4; }
.road-summary .rs-warn{ flex:0 0 auto; color:var(--red); }
.road-summary .rs-chev{ flex:0 0 auto; color:#8aa0b8; transition:transform .2s ease; }
.roadmap:not(.collapsed) .road-summary .rs-chev{ transform:rotate(180deg); }
.roadmap.collapsed .road-body{ display:none; }
.road-body{ padding:2px 4px 10px; }
.road-head{ text-align:center; margin-bottom:12px; }
.road-remaining{ font-size:1.15rem; font-weight:800; color:#2c3e56; line-height:1.35; }
.road-remaining .rnum{ display:inline-block; min-width:1.6em; font-size:1.9rem; color:var(--blue); margin:0 .12em; vertical-align:-2px; }
.road-remaining.goal{ font-size:1.15rem; color:var(--green); }
.road-todo{ margin-top:6px; font-size:.86rem; font-weight:bold; color:#e08a3c; }
.road-steps{ list-style:none; margin:0; padding:0; }
.rstep{ display:flex; align-items:center; gap:10px; padding:7px 10px; position:relative; }
.rstep::before{ content:""; position:absolute; left:20px; top:-2px; bottom:-2px; width:2px; background:#cdd9e8; z-index:0; }
.rstep:first-child::before{ top:50%; }
.rstep:last-child::before{ bottom:50%; }
.rstep .rmark{ font-size:1.05rem; width:22px; text-align:center; z-index:1; background:#f6f9fd; }
.rstep .rmark.m-done i{ color:var(--green); }
.rstep .rmark.m-current i{ color:var(--blue); }
.rstep .rmark.m-upcoming i{ color:#c2ccd8; }
.rstep .rlabel{ font-size:.95rem; color:#4a5568; }
.rstep.is-done .rlabel{ color:#7a8699; text-decoration:line-through; text-decoration-color:#bcc7d6; }
.rstep.is-current{ background:#fff; border:1.5px solid var(--blue); border-radius:12px; box-shadow:0 2px 6px #4a90d922; }
.rstep.is-current .rlabel{ color:#2c3e56; font-weight:800; font-size:1rem; }
.rstep .rnow{ margin-left:auto; background:var(--blue); color:#fff; font-size:.68rem; font-weight:bold; padding:2px 9px; border-radius:9px; }
.road-want{ margin-top:12px; background:#fff7e6; border:1px solid #f0c674; color:#b26a00; border-radius:11px; padding:10px 13px; font-weight:bold; font-size:.9rem; text-align:center; }
.road-note{ margin-top:9px; font-size:.82rem; color:#5a6b82; text-align:center; }
.road-warn{ margin-top:9px; background:#fbeaec; border:1px solid #f3c2c8; color:var(--red); border-radius:11px; padding:9px 13px; font-size:.84rem; font-weight:bold; text-align:center; }

/* ほしい！のあゆみ（増減の時系列） */
.whlist{ list-style:none; margin:0; padding:0; }
.wh{ display:flex; align-items:flex-start; gap:10px; padding:9px 4px; border-bottom:1px solid #f0f2f5; }
.wh:last-child{ border-bottom:0; }
.wh .wh-ar{ font-size:.9rem; line-height:1.5; }
.wh.up .wh-ar{ color:var(--green); } .wh.down .wh-ar{ color:#9aa4b2; }
.wh .wh-body{ display:flex; flex-direction:column; }
.wh .wh-msg{ font-size:.9rem; color:#333; font-weight:bold; }
.wh .wh-dt{ font-size:.75rem; color:#586372; margin-top:2px; }
.jobcard{ display:flex; gap:12px; background:#fff; border:1px solid #e6e9ee; border-radius:14px; overflow:hidden; margin:12px 0; text-decoration:none; color:#1a1a1a; }
.jc-img{ position:relative; flex:0 0 120px; }
.jc-img img{ width:120px; height:100%; object-fit:cover; display:block; }
.jc-img.big{ flex:none; width:100%; border-radius:12px; overflow:hidden; }
.jc-img.big img{ width:100%; height:auto; }
.imglabel{ position:absolute; right:5px; bottom:5px; background:#000000aa; color:#fff; font-size:.62rem; padding:1px 6px; border-radius:4px; }
.jc-body{ padding:10px 12px 10px 0; flex:1; }
.jc-title{ font-weight:bold; font-size:1.02rem; }
.jc-area{ font-size:.78rem; color:#667; margin:3px 0; }
.jc-income{ font-size:.82rem; } .jc-income b{ color:var(--blue); }
.jc-lead{ font-size:.76rem; color:#889; margin-top:2px; }
.jd-title{ font-size:1.2rem; margin:14px 0 4px; }
.jd-area{ font-size:.82rem; color:#667; margin-bottom:10px; }
.jd-desc{ font-size:.9rem; line-height:1.7; }
.jd-table{ width:100%; border-collapse:collapse; margin:12px 0; }
.jd-table th{ text-align:left; width:96px; color:#586372; font-size:.78rem; font-weight:bold; vertical-align:top; padding:8px 6px; border-bottom:1px solid #eef1f5; }
.jd-table td{ font-size:.88rem; padding:8px 6px; border-bottom:1px solid #eef1f5; }
.jd-table small{ color:#586372; font-size:.72rem; }
.locked{ border:1px solid #f0c674; background:#fff7e6; border-radius:12px; padding:14px; margin-top:8px; }
.lk-head{ font-weight:bold; color:#b26a00; margin-bottom:8px; }
.lk-row{ font-size:.9rem; padding:2px 0; }
.muted{ color:#6b7280; }
.msg{ font-size:.85rem; margin-top:8px; } .msg.ok{ color:#1c7a34; } .msg.ng{ color:#c0333f; }

/* 書類の提出（R3） */
.doc-card{ border:1px solid #e6e9ee; border-radius:12px; padding:12px 14px; margin:8px 0; background:#fff; }
.doc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.doc-name{ font-weight:bold; color:#243447; font-size:.95rem; }
.doc-note{ display:block; font-size:.74rem; color:#586372; font-weight:normal; margin-top:2px; }
.doc-status{ font-size:.7rem; font-weight:bold; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.doc-status.na{ background:#eef2f6; color:#586372; }
.doc-status.warn{ background:#fbf4dd; color:#8a6d1c; }
.doc-status.ok{ background:#eef8f1; color:#1c8f4c; }
.doc-status.ng{ background:#fdecec; color:#b32; }
.doc-up{ display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.doc-up input[type=file]{ font-size:.78rem; flex:1; min-width:150px; }
.flash-ok{ background:#eef8f1; border:1px solid #bfe6cd; color:#1c8f4c; border-radius:8px; padding:8px 12px; margin:10px 0; font-size:.85rem; }
.card.c-indigo .card-h{ color:#3a45b0; background:#e9ebfa; } /* QA: インディゴ文字は明背景で(白地白文字/暗背景衝突を解消) */

/* A2-54⑥: マイページ「日本語の勉強」メニュー行（未定義だったため2項目がinline連結で崩れていた）。各項目=フル幅の行(アイコン｜文言｜矢印)。 */
.menu-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;text-decoration:none;color:#22303f;margin-top:8px}
.menu-item:hover{background:#f7faff;border-color:#c7d2e0}
.menu-item .mi-ic{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#eef4ff;color:#2563eb;border-radius:8px;font-size:1rem}
.menu-item .mi-tx{flex:1 1 auto;font-size:.95rem;line-height:1.4}
.menu-item .mi-ar{flex:0 0 auto;color:#9aa7b8;font-size:.85rem}

/* 図表参照問題: 問題図(image_svg)の表示枠。学習/模試の問題本文の下に中央表示。 */
.qfig{margin:12px 0;text-align:center}
.qfig svg{max-width:100%;height:auto;border:1px solid #e5e7eb;border-radius:8px;background:#fff;padding:6px}