/* ==============================================
   base.css — リセット & CSS変数定義
   ここを変えるとサイト全体の色・フォントが変わります
   ============================================== */

/* --- CSS変数（デザイントークン） --- */
:root {
  /* 色 */
  --color-bg:            #eaf2f333;
  --color-surface:       #FFFFFF;
  --color-text:          #222222;
  --color-muted:         #777777;
  --color-border:        #E6E6E6;
  --color-orange:        #EB6C2F;
  --color-orange-hover:  #d45a1f;
  --color-blue:          #2E5590;
  --color-blue-dark:     #1e3d6e;
  --color-red:           #D84B4B;
  --color-green:         #40BF13;
  --color-btn-gray:      #4B4B4B;
  --color-primary:       #2b579a;
  --color-inputtext:     #6c6c6c;

  /* 角丸 */
  --radius-card:   10px;
  --radius-btn:    5px;
  --radius-pill:   999px;


  /* 影 */
  --shadow-card: 0 2px 10px rgba(0,0,0,0.06);

  /* フォント */
  --font: system-ui, -apple-system, 'Hiragino Kaku Gothic ProN',
          'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif;
  /* 楷書フォント — 新規追加 */
  --font-mincho:
    "A-OTF 正楷書CB1 Std",
    "A-OTF 正楷書CB1 StdN",
    "A-OTF 正楷書CB1 Std R",
    "Yuji Syuku",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS Mincho",
    serif;

  /* フォントサイズ */
  --fs-titlepc: 26px; 
  --fs-titlesp: 22px;
  --fs-textpc: 14px;
  --fs-textsp: 13px;
  --fs-p2titlepc: 36px;
  --fs-p2titletb: 30px; 
  --fs-p2titlesp: 24px;
  --fs-p2textpc: 20px;
  --fs-p2texttb: 16px;
  --fs-p2textsp: 14px;
  --fs-kanjibig: 60px;
  --fs-kanjimedium: 42px;
  --fs-kanjismall: 32px;
  --fs-textinputpc: 26px;
  --fs-textinputtb: 20px;
  --fs-textinputsp: 13px;
  --fs-textinputssp: 12px;

  /* レイアウト */
  --container-max: 980px;
  --header-height: 96px;   /* ヘッダー + ステップナビ */
}

@font-face {
  font-family: "AoyagiKouzan";
  src: url("../fonts/AoyagiKouzanFont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* --- リセット --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button, select, input, textarea {
  font-family: var(--font);
  font-size: 14px;
}
button { cursor: pointer; border: none; background: transparent; }

/* --- Google Icons (Material Symbols) --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
}

/* --- コンテナ（中央寄せ） --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* --- ページ本体の上マージン（ヘッダー分） --- */
.page-body {
  padding-bottom: 2%;
  min-height: 100vh;
}