/* ============================================================
   フォトン算数オンライン｜入塾申し込みフォーム
   1. 土台（トークン／ベース／ヘッダー）

   色・字送りの定義と、全ページ共通の最下層。
   ここだけは他のどのファイルより先に読む。

   【!important の方針】使わない。詳細度で解決する。
   （例外は c-motion.css の prefers-reduced-motion のみ）

   【読み込み順】c-base → c-shell → c-error → c-form → c-blocks
                → c-layout-full → c-motion →（ページ固有）
   順番を入れ替えると打ち消し関係が崩れる。
   ============================================================ */

/* ============================================================
   1. トークン
   ============================================================ */
:root {
  /* base */
  --green: #12a725;
  --green-deep: #056e02;
  --green-tint: #e7f6ea;
  --cream: #f5f8f6;
  --ink: #34403a;
  --muted: #7e867f;
  --line: #e3ece4;
  --page: #ffffff;
  --card: #ffffff;
  --req: #f4806e;
  /* 保護者情報 */
  --blue: #6ea2e5;
  --blue-deep: #2f6fc0;
  --blue-tint: #d9e9fb;
  /* アンケート・注意喚起 */
  --alert: #e8821e;
  --alert-deep: #c96b12;
  --alert-tint: #fdf1e3;
}

/* ============================================================
   2. ベース
   ============================================================ */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  max-width: 620px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

a {
  color: var(--green-deep);
}
a:hover {
  color: var(--green);
}

hr {
  border: none;
  height: 0;
  margin: 0;
}

/* ============================================================
   3. ヘッダー
   ============================================================ */
.c-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 0 22px;
}

.c-header__link {
  display: block;
  max-width: 100%;
  line-height: 0;
}

.c-header__icon {
  display: block;
  width: auto;
  max-width: 100%;
  height: 30px;
  object-fit: contain;
}