/* =========================================================
   minipass 共通スタイル（SSOT）
   パシャ勤怠 LP のトークンに準拠：クリーム地 × 白カード × 朱
   トップページと各資格アプリで共有する。
   ページ固有の装飾は各ページ側に置き、ここには置かない。
   ========================================================= */

:root{
  /* ブランド */
  /* 看板の朱色。明暗で動かさない。ロゴの印と押しボタンが同じ色に見えるよう、
     ここだけは夜モードでも明るくしない（利用者の指示 2026-08-06）。
     値は --ink と同じ #CF3C2F。宅建セッションが実測して **#E34234 から変えた**値で、
     昼の地(#faf8f5)で4.56・白カードで4.84と、読みやすさの基準4.5を満たす。
     前の #E34234 は3.89しか無く、白文字を載せた押しボタンでも4.10で足りなかった。 */
  --brand:#CF3C2F;
  --ink:#CF3C2F;
  --ink-dark:#CF3C2F;
  --ink-light:#CF3C2F;
  --ink-subtle:rgba(207,60,47,.10);

  /* 面 */
  --paper:#faf8f5;
  --paper-2:#f3f0ea;
  --elevated:#ffffff;
  --card:#ffffff;
  --card-hover:#f7f4ef;

  /* 文字 */
  --text:#1d1d1f;
  --sub:#555555;
  --muted:#888888;

  /* 罫線 */
  --line:rgba(0,0,0,.09);
  --line-strong:rgba(0,0,0,.18);

  /* 意味色（○×判定・警告） */
  --maru:#2e7d32;
  --maru-bg:rgba(46,125,50,.10);
  --batu:#d32f2f;
  --batu-bg:rgba(211,47,47,.09);
  --gold:#936B09;
  --gold-bg:rgba(147,107,9,.10);

  /* 形 */
  --radius:18px;
  --radius-sm:12px;
  --radius-xs:8px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --shadow-glow:0 10px 44px rgba(207,60,47,.14);

  /* 書体 */
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --font-sans:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans',sans-serif;

  --ease:cubic-bezier(.25,.46,.45,.94);
  --tap:44px;
  /* 画面の骨組み（R-9 見る場所と押す場所を動かさない）。
     試験アプリが使う。以前は app.tpl.html の中だけに書いてあったため、
     配色の札を base.css から流し込むようにしたときに一緒に消え、
     PCの左ナビが崩れた（実測 2026-08-06）。骨組みは資格をまたいで同じなので、
     配色と同じくここを正本にする。 */
  --navh:61px;          /* 上のヘッダー / スマホの下タブ の高さ */
  --sidebar-w:240px;    /* PCの左ナビの幅 */
}

/* 端末のダークモードには追従しない（ライト固定）。手動切替のときだけ使う */
/* 端末が夜モードなら、何も設定していなくても夜にする。
   ただし利用者が明るいを選んだときは、そちらを優先する（下の data-theme が勝つ）。 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  /* 純黒は使わない。暗い地に白字だと明暗差が強すぎて、字がにじんで見える。
     赤も昼と同じままだと暗い地の上で滲むので、明るめ・やや淡くする。 */
  --paper:#14161a;--paper-2:#1b1e24;--elevated:#22262d;--card:#1b1e24;--card-hover:#242830;
  --text:#f2f3f6;--sub:#c8ccd6;--muted:#a3a9b6;
  --line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.20);
  --ink:#CF3C2F;--ink-dark:#CF3C2F;--ink-light:#CF3C2F;--ink-subtle:rgba(207,60,47,.16);
  --maru:#6fc79f;--maru-bg:rgba(111,199,159,.14);
  --batu:#ef8375;--batu-bg:rgba(239,131,117,.14);
  --gold:#d9b96a;--gold-bg:rgba(217,185,106,.14);
  --shadow:0 4px 18px rgba(0,0,0,.55);
  --shadow-glow:0 10px 44px rgba(207,60,47,.16);
  }
}
:root[data-theme="dark"]{
  /* 純黒は使わない。暗い地に白字だと明暗差が強すぎて、字がにじんで見える。
     赤も昼と同じままだと暗い地の上で滲むので、明るめ・やや淡くする。 */
  --paper:#14161a;--paper-2:#1b1e24;--elevated:#22262d;--card:#1b1e24;--card-hover:#242830;
  --text:#f2f3f6;--sub:#c8ccd6;--muted:#a3a9b6;
  --line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.20);
  --ink:#CF3C2F;--ink-dark:#CF3C2F;--ink-light:#CF3C2F;--ink-subtle:rgba(207,60,47,.16);
  --maru:#6fc79f;--maru-bg:rgba(111,199,159,.14);
  --batu:#ef8375;--batu-bg:rgba(239,131,117,.14);
  --gold:#d9b96a;--gold-bg:rgba(217,185,106,.14);
  --shadow:0 4px 18px rgba(0,0,0,.55);
  --shadow-glow:0 10px 44px rgba(207,60,47,.16);
}

/* ---- 土台 ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--paper);color:var(--text);
  font-size:17px;line-height:1.85;letter-spacing:.01em;
}
h1,h2,h3{font-weight:700;line-height:1.5}
a{color:var(--ink)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- SVGアイコン（絵文字は使わない） ---- */
.ic{
  width:1.15em;height:1.15em;flex:none;vertical-align:-.18em;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.ic.fill{fill:currentColor;stroke:none}

/* ---- 共通部品 ---- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--card);color:var(--text);
  font-family:inherit;font-size:15.5px;font-weight:700;
  padding:11px 20px;cursor:pointer;text-decoration:none;
  transition:transform .15s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:none;border:1.5px solid var(--ink);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pill{
  display:inline-block;font-size:14.5px;padding:2px 9px;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line);color:var(--sub);
}
.badge{display:inline-block;font-size:14.5px;font-weight:700;border-radius:999px;padding:2px 9px}
.badge.open{color:var(--maru);border:1px solid var(--maru)}
.badge.soon{color:var(--muted);border:1px solid var(--line-strong)}

/* ---- 自社サービスの案内（全ページ共通） ---- */
.ownad{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;margin:16px 0;
  text-decoration:none;color:inherit;box-shadow:var(--shadow);
}
.ownad:active{background:var(--card-hover)}
.ownad .adlabel{
  display:inline-block;font-size:14.5px;font-weight:800;letter-spacing:.1em;
  color:var(--muted);border:1px solid var(--line-strong);border-radius:3px;
  padding:1px 5px;margin-bottom:9px;
}
.ownad b{display:block;font-size:17.5px;line-height:1.6}
.ownad p{font-size:14.5px;color:var(--sub);line-height:1.8;margin-top:6px}
.ownad .adprice{
  display:inline-block;font-size:14.5px;color:var(--ink);font-weight:700;
  background:var(--ink-subtle);border-radius:999px;padding:4px 12px;margin-top:10px;
}
.ownad .adcta{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:15px;font-weight:700;color:var(--ink)}
.ownad .adart{display:block;margin-top:12px;border-radius:var(--radius-sm);overflow:hidden}
.ownad .adart svg{display:block;width:100%;height:auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}