/* 一般公開版のデザイントークン（指示書 §6 / §7）。
   Pro版とは別アプリなので衝突しないが、念のため意味のある接頭辞を付けている。 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Outfit:wght@500;600;700&display=swap');

:root {
  --public-bg: #F7FAFC;
  --public-surface: #FFFFFF;
  --public-surface-soft: #F0F9F8;
  --public-text: #17324D;
  --public-text-sub: #61758A;
  --public-line: #DCE8EF;

  --public-primary: #087E8B;
  --public-primary-hover: #066975;
  --public-primary-soft: #DDF5F3;

  --public-blue: #2F80ED;
  --public-blue-soft: #EAF3FF;
  --public-green: #22A06B;
  --public-green-soft: #E6F7EF;
  --public-yellow: #D99A18;
  --public-yellow-soft: #FFF6D9;
  --public-red: #D64545;
  --public-red-soft: #FDECEC;

  --radius-card: 16px;
  --radius-control: 12px;
  --shadow-card: 0 8px 28px rgba(30, 80, 100, .08);
  --shadow-hover: 0 12px 32px rgba(30, 80, 100, .12);

  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  /* 和文は1系統だけ（Mac・iPhone はヒラギノ、それ以外は Noto Sans JP）。書体は混ぜず、太さと字詰めで表情をつける。
     数字だけ欧文の書体にする（国内サービスのサイトの実測に合わせた。リサーチ/2026-09-25_…書体.md） */
  --font-display: var(--font);
  --font-num: "Outfit", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --maxw: 1200px;

  /* アクセントのバー（3か所だけで使う）。青緑を軸に、藍→青緑→ミント→灯りの黄がなめらかにつながる */
  --brand-indigo: #4F5BD5;
  --brand-teal:   #087E8B;
  --brand-mint:   #2BC4A9;
  --brand-sun:    #F2B53A;
  --grad-brand: linear-gradient(90deg, #4F5BD5 0%, #087E8B 38%, #2BC4A9 70%, #F2B53A 100%);
}
@supports (background: linear-gradient(in oklab, red, blue)) {
  :root { --grad-brand: linear-gradient(90deg in oklab, #4F5BD5 0%, #087E8B 38%, #2BC4A9 70%, #F2B53A 100%); }
}

/* 明るい配色のみ。Pro版のような暗い画面にはしない（指示書 §5） */

*, *::before, *::after { box-sizing: border-box; }

/* class に display 指定があると [hidden] が負けるので、明示的に勝たせる。
   （.failure { display:flex } のせいでエラー表示が消えなかった） */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--public-bg);
  color: var(--public-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.45; margin: 0; }
h1 { font-size: clamp(26px, 5vw, 40px); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(20px, 3.4vw, 28px); font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }

a { color: var(--public-primary); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--public-primary);
  outline-offset: 2px;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

.sub { color: var(--public-text-sub); font-size: 14px; }
.tnum { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (max-width: 767px) {
  .container { padding: 0 16px; }
  body { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}