/* 転職チェック（会員限定ツール）の見た目。サイトの色（白・黒・ミント）に合わせる */
.tool h2 { font-size:20px; margin:28px 0 8px; line-height:1.5; }
.tool .lead { font-size:14.5px; color:#333; margin:6px 0 12px; }
.tool .ar { border:1px solid #E5E7EB; border-radius:12px; padding:14px 14px 10px; margin:14px 0; }
.tool .ar h3 { font-size:15px; margin:0 0 4px; }
.tool .q { font-size:14.5px; font-weight:700; margin:14px 0 8px; line-height:1.6; }
.tool .lk { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.tool .ch { font:inherit; border:1.5px solid #D1D5DB; background:#fff; color:#111; border-radius:10px; padding:8px 2px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tool .ch:active { transform:scale(.97); }
.tool .lk .ch { padding:10px 2px; }
.tool .lk .ch b { font-size:17px; }
.tool .lkl { display:flex; justify-content:space-between; font-size:11.5px; color:#666A70; margin:0 2px 4px; }
.tool .ch.on { background:#5EE6B0; border-color:#111; box-shadow:inset 0 0 0 1.5px #111; font-weight:900; }
.tool .ch:focus-visible { outline:3px solid #0B7F5B; outline-offset:2px; }
.tool .yn { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.tool .yn .ch { font-size:14px; font-weight:700; padding:11px 4px; }
.tool .nv { display:flex; gap:10px; flex-wrap:wrap; margin:24px 0 6px; }
.tool .pri { font:inherit; background:#111; color:#fff; border:0; border-radius:999px; padding:13px 26px; font-weight:700; font-size:15px; cursor:pointer; }
.tool .pri:disabled { opacity:.35; cursor:not-allowed; }
.tool .sec { font:inherit; background:#F3F4F6; color:#111; border:0; border-radius:999px; padding:12px 20px; font-weight:700; font-size:14px; cursor:pointer; }
.tool .left { font-size:12.5px; color:#666A70; margin:0; }
.tool .pg { height:6px; background:#E5E7EB; border-radius:99px; overflow:hidden; }
.tool .pg i { display:block; height:100%; background:#5EE6B0; }
.tool .ps { font-size:12px; color:#666A70; margin:6px 0 0; }
.tool .br { display:grid; grid-template-columns:8.5em 1fr 2.4em; gap:10px; align-items:center; font-size:13.5px; margin:8px 0; }
.tool .bl { font-weight:700; }
.tool .bt { height:14px; background:#F3F4F6; border-radius:4px; overflow:hidden; }
.tool .bt i { display:block; height:100%; background:#9CA3AF; }
.tool .bt i.on { background:#5EE6B0; }
.tool .bt i.alt { background:#111; }
.tool .br b { text-align:right; }
.tool .hl { font-weight:900; font-size:16px; margin:16px 0; line-height:1.6; }
.tool .ins { background:#F3F4F6; border-radius:10px; padding:12px 14px; margin:12px 0; font-size:14px; }
.tool .ins p { margin:0; }
.tool .it { font-weight:900; margin:0 0 4px !important; }
.tool .warn { border:2px solid #CC4A24; border-radius:12px; padding:14px; margin:14px 0; font-size:14px; }
.tool .warn p { margin:4px 0; }
.tool .wt { color:#CC4A24; font-weight:900; font-size:16px; }
.tool .warn a { color:#0B7F5B; font-weight:700; }
.tool .res { border:2px solid #111; border-radius:12px; padding:16px; margin:14px 0; }
.tool .res p { margin:0; font-size:14.5px; }
.tool .rl { font-size:12px !important; color:#666A70; }
.tool .rt { font-size:22px !important; font-weight:900; margin:4px 0 6px !important; line-height:1.4; }
.tool .vd { border-top:1px solid #E5E7EB; padding:16px 0 8px; }
.tool .vd h3 { font-size:16px; margin:0 0 6px; }
.tool .vd .br { grid-template-columns:10.5em 1fr 2.4em; }
.tool .vd p { font-size:14px; margin:8px 0; }
.tool .why { color:#666A70; font-size:13px !important; }
.tool .ac { background:#E9FBF3; border-radius:10px; padding:10px 12px; }
.tool .ac b { display:block; font-size:12px; color:#0B7F5B; margin-bottom:2px; }
.tool .lk2 a { display:inline-block; margin:2px 14px 0 0; font-size:13.5px; font-weight:700; color:#0B7F5B; }
.tool .rv { margin:18px 0; font-size:14.5px; }
.tool .md { margin-top:24px; font-size:13px; color:#666A70; }
.tool .md summary { cursor:pointer; font-weight:700; }

/* 上の進み具合（4つのステップ） */
.tool .sp { list-style:none; margin:0 0 6px; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; counter-reset:none; }
.tool .sp li { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11.5px; color:#5B6068; text-align:center; line-height:1.3; }
.tool .sp li b { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#F3F4F6; color:#5B6068; font-size:14px; }
.tool .sp li.done b { background:#111; color:#fff; }
.tool .sp li.done { color:#111; }
.tool .sp li.cur b { background:#5EE6B0; color:#111; box-shadow:0 0 0 2px #111; }
.tool .sp li.cur { color:#111; font-weight:700; }
.tool .sp li.skip { opacity:.7; }
.tool .sh { display:flex; flex-direction:column; gap:2px; }
.tool .sh span { font-size:12.5px; color:#0B7F5B; font-weight:700; }

/* 結果 */
.tool .rh { display:none; justify-content:space-between; align-items:baseline; border-bottom:2px solid #111; padding-bottom:6px; margin-bottom:8px; }
.tool .rbrand { margin:0; font-weight:900; letter-spacing:.14em; }
.tool .rdate { margin:0; font-size:12px; color:#666A70; }
.tool .rwhy { margin-top:10px !important; font-size:13.5px !important; color:#333; }
.tool .rwhy b { display:block; font-size:12px; color:#0B7F5B; }
.tool .ty { background:#111; color:#fff; border-radius:12px; padding:14px 16px; margin:12px 0; }
.tool .ty p { margin:0; font-size:14px; }
.tool .ty .rl { color:#D1D5DB; }
.tool .tt { font-size:20px !important; font-weight:900; margin:2px 0 6px !important; color:#5EE6B0; }
.tool .rs { font-size:17px; margin:28px 0 8px; padding-bottom:6px; border-bottom:1px solid #E5E7EB; }
.tool .ad { border:1px solid #E5E7EB; border-radius:12px; padding:12px 14px; margin:12px 0; }
.tool .adt { margin:0; font-weight:900; font-size:15.5px; display:flex; justify-content:space-between; gap:8px; }
.tool .adt span { font-size:12.5px; font-weight:700; color:#0B7F5B; }
.tool .adm { margin:4px 0 6px; font-size:13.5px; color:#666A70; }
.tool .qv { border-top:1px dashed #E5E7EB; padding-top:8px; margin-top:8px; font-size:13.5px; }
.tool .qv p { margin:0; }
.tool .qvq { font-weight:700; margin-bottom:2px !important; }
.tool .vdt { margin:0; font-size:12.5px; color:#666A70; font-weight:700; }
.tool .vdk { margin:0 0 6px !important; font-size:17px !important; font-weight:900; }
.tool .al { list-style:none; margin:8px 0; padding:0; font-size:13px; }
.tool .al li { display:flex; gap:8px; align-items:baseline; padding:4px 0; }
.tool .al li span { flex:0 0 auto; font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:999px; background:#F3F4F6; }
.tool .al li.y span { background:#5EE6B0; }
.tool .al li.n span { background:#111; color:#fff; }
.tool .iq { border:1.5px solid #111; border-radius:10px; padding:10px 12px; }
.tool .iq b { display:block; font-size:12px; color:#0B7F5B; margin-bottom:2px; }
.tool .pl { border:2px solid #111; border-radius:12px; padding:6px 16px 12px; }
.tool .plt { margin:12px 0 4px; font-weight:900; font-size:14.5px; }
.tool .pl ul { margin:0; padding-left:1.2em; font-size:14px; line-height:1.8; }
.tool .rfoot { margin:18px 0 0; font-size:12px; color:#666A70; }
.tool .sv { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 6px; }

/* 画像の保存 */
.imgov { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; display:grid; place-items:center; padding:16px; }
.imgbox { background:#fff; border-radius:14px; padding:16px; max-width:480px; width:100%; max-height:92vh; max-height:92dvh; overflow:auto; }
.imgbox img { width:100%; height:auto; border:1px solid #E5E7EB; border-radius:8px; }
.imgt { margin:0 0 8px; font-weight:900; }
.imgbox .nv { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.imgbox .pri { font:inherit; background:#111; color:#fff; border:0; border-radius:999px; padding:12px 22px; font-weight:700; font-size:14px; text-decoration:none; }
.imgbox .sec { font:inherit; background:#F3F4F6; color:#111; border:0; border-radius:999px; padding:12px 20px; font-weight:700; font-size:14px; cursor:pointer; }
.imgbox .left { font-size:12.5px; color:#666A70; margin:8px 0 0; }
.imgbox .left[hidden] { display:none; }

/* 印刷・PDFで保存：結果があるときだけ、結果だけをA4に出す */
@page { size:A4; margin:14mm; }
@media print {
  body:has(#rep) * { visibility:hidden; }
  body:has(#rep) #rep, body:has(#rep) #rep * { visibility:visible; }
  body:has(#rep) #rep { position:absolute; left:0; top:0; width:100%; }
  .tool .rh { display:flex; }
  .tool .sp, .tool .sv, .tool .nv, .imgov { display:none !important; }
  .tool .ad, .tool .vd, .tool .pl, .tool .res, .tool .ev, .tool .hero { break-inside:avoid; }
  .tool .bt i, .tool .al li span, .tool .hero, .tool .fc { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* 名前の欄 */
.tool .nm label { display:block; font-size:14px; font-weight:700; margin-bottom:6px; }
.tool .nm input { box-sizing:border-box; width:100%; font:inherit; font-size:16px; padding:10px 12px; border:1.5px solid #C9CDD2; border-radius:10px; }
.tool .nm input:focus-visible { outline:3px solid #0B7F5B; outline-offset:1px; border-color:#0B7F5B; }
/* 名前入りの結果カード */
.tool .hero { background:#111; color:#fff; border-radius:16px; padding:20px 18px 18px; margin:10px 0 16px; }
.tool .hero p { margin:0; }
.tool .hn { font-size:15px; font-weight:900; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.tool .hn span { font-size:12px; font-weight:500; color:#D1D5DB; }
.tool .hl2 { margin-top:14px !important; font-size:12px; color:#D1D5DB; }
.tool .ht { font-size:30px; font-weight:900; color:#5EE6B0; line-height:1.3; }
.tool .hd { margin-top:6px !important; font-size:14px; line-height:1.8; color:#F3F4F6; }
.tool .hv { margin-top:14px; background:#fff; color:#111; border-radius:10px; padding:10px 12px; }
.tool .hv span { display:block; font-size:12px; color:#666A70; }
.tool .hv b { font-size:18px; font-weight:900; }
.tool .hc { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tool .hc span { font-size:12.5px; font-weight:700; background:#2A2B2F; border-radius:999px; padding:4px 12px; }
.tool .hc i { font-style:normal; color:#5EE6B0; margin-left:6px; }
/* 根拠と読み解き */
.tool .basis { font-size:13px; color:#333; background:#F3F4F6; border-radius:10px; padding:10px 12px; margin:10px 0; }
.tool .basis b { display:block; font-size:12px; color:#0B7F5B; }
.tool .ev { border-left:0; border:1px solid #E5E7EB; border-radius:12px; padding:12px 14px; margin:10px 0; }
.tool .ev p { margin:0; font-size:14px; line-height:1.85; }
.tool .evt { font-weight:900; font-size:15px !important; margin-bottom:4px !important; }
.tool .fc { display:inline-block; margin-left:8px; font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:999px; }
.tool .fc.hyg { background:#F3F4F6; color:#111; }
.tool .fc.mot { background:#5EE6B0; color:#111; }
.tool .mdl { margin:8px 0 0; font-size:12.5px; color:#666A70; }
.tool .src2 { margin-top:24px; font-size:12.5px; color:#444; }
.tool .src2 summary { cursor:pointer; font-weight:700; }
.tool .src2 ul { padding-left:1.2em; line-height:1.8; }
.tool .src2 li { margin:6px 0; }

/* スマホで、1〜2文字だけが次の行に落ちないように、言葉の切れ目で折り返す */
.tool { word-break:auto-phrase; text-wrap:pretty; overflow-wrap:anywhere; }
.tool .rs + .vd { border-top:0; padding-top:4px; }

/* レビュー後の追加 */
.tool .note3 { font-size:12.5px; color:#5B6068; margin:0 0 4px; }
.tool .ed { display:block; margin-top:6px; font-size:13.5px; color:#333; }
.tool .bnote { font-size:11.5px !important; color:#5B6068; margin:0 0 6px !important; }
.tool .warnline { color:#CC4A24; font-weight:700; }
.tool .fc.both { background:linear-gradient(90deg, #F3F4F6 50%, #5EE6B0 50%); color:#111; }
dialog.imgov { border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; }
dialog.imgov::backdrop { background:rgba(0,0,0,.6); }
dialog.imgov .imgbox { margin:auto; }
dialog.imgov[open] { display:grid; place-items:center; width:100vw; height:100vh; height:100dvh; padding:16px; box-sizing:border-box; }
/* スマホで画面の端に付かないよう、左右に余白を残す（サイトの共通の指定に頼らない） */
dialog.imgov .imgbox { box-sizing:border-box; }

/* 集計のための任意の問いと、同意のチェック */
.tool .op { display:flex; flex-wrap:wrap; gap:6px; }
.tool .op .ch { flex-direction:row; padding:9px 14px; font-size:13.5px; font-weight:700; }
.tool .consent { display:flex; gap:10px; align-items:flex-start; margin:22px 0 0; padding:12px 14px; background:#F3F4F6; border-radius:10px; font-size:13.5px; line-height:1.7; }
.tool .consent input { width:20px; height:20px; margin-top:2px; accent-color:#0B7F5B; flex:0 0 auto; }

/* 相談先（PR） */
.tool .prl { display:inline-block; margin-left:8px; font-size:11.5px; font-weight:900; padding:1px 8px; border-radius:4px; border:1.5px solid #5B6068; color:#5B6068; vertical-align:3px; }
.tool .pt { border:1.5px solid #111; border-radius:12px; padding:14px 16px; margin:10px 0; }
.tool .pt p { margin:0 0 8px; font-size:14px; }
.tool .ptn { font-weight:900; font-size:16px !important; }
.tool .pt .pri { display:inline-block; text-decoration:none; }
