/* =========================================================
   Studist 共通スタイル（SSOT）
   パシャ勤怠 LP のトークンに準拠：クリーム地 × 白カード × 朱
   トップページと各資格アプリで共有する。
   ページ固有の装飾は各ページ側に置き、ここには置かない。
   ========================================================= */

:root{
  /* ブランド */
  --ink:#E34234;
  --ink-dark:#C73628;
  --ink-light:#FF6B5A;
  --ink-subtle:rgba(227,66,52,.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:#b8860b;

  /* 形 */
  --radius:18px;
  --radius-sm:12px;
  --radius-xs:8px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --shadow-glow:0 10px 44px rgba(227,66,52,.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;
}

/* 端末のダークモードには追従しない（ライト固定）。手動切替のときだけ使う */
:root[data-theme="dark"]{
  --paper:#0a0a0a;--paper-2:#121212;--elevated:#1a1a1a;--card:#171717;--card-hover:#1e1e1e;
  --text:#f5f5f7;--sub:#a1a1a6;--muted:#6e6e73;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
  --maru:#5bb893;--maru-bg:rgba(91,184,147,.12);
  --batu:#e0705f;--batu-bg:rgba(224,112,95,.12);
  --gold:#d4af5a;
  --shadow:0 4px 18px rgba(0,0,0,.45);
}

/* ---- 土台 ---- */
*{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:12px;padding:2px 9px;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line);color:var(--sub);
}
.badge{display:inline-block;font-size:11px;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:10px;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:13px;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}}
