/* ==========================================================================
   base.css
   リセット・CSS変数・基本要素のスタイル（全ページ共通）
   ========================================================================== */


/* --------------------------------------------------------------------------
   CSS変数
   値は docs/figma-links.md「カラー・テキストスタイル」と Figma から抽出。
   rem は 16px 基準（例：14px = 0.875rem）
   -------------------------------------------------------------------------- */
:root {
  /* カラー：ブランド */
  --color-main: #5eafd2;
  --color-main-hover: #5ecbbe;      /* サブボタンのホバー */
  --color-main-light: #ccedfd;      /* 背景の装飾円など */
  --color-accent: #e6ad0f;          /* 黄色の強調（メインボタン、「長期利用がお得!」など） */
  --color-accent-dark: #e77710;     /* メインボタンのホバー（グラデーションの下側） */
  --color-emphasis: #fb3f3d;        /* 料金の強調ラベル */
  --color-line: #06c755;            /* LINEボタン */

  /* カラー：テキスト */
  --color-text: #4d4d4d;
  --color-text-white: #fff;
  --color-text-placeholder: #cdcdcd; /* 入力欄のプレースホルダー */
  --color-text-muted: #9a9a9a;       /* セレクトボックスの未選択表示 */
  --color-text-number: #b9b9b9;      /* ステップ番号（01, 02...） */
  --color-error: #ca0000;            /* エラーテキスト・注意書き */

  /* カラー：背景 */
  --color-bg-white: #fff;
  --color-bg-gray: #f3f3f3;          /* グレー背景・チェックボックス */
  --color-bg-disabled: #e1e1e1;      /* 非アクティブの入力欄 */
  --color-shape-gray: #d9d9d9;       /* ヒーローなどの背景装飾 */
  --color-overlay: rgb(0 0 0 / 0.6); /* ポップアップ背景 */

  /* カラー：線 */
  --color-border: #d0d0d0;           /* 区切り線・入力欄の枠 */
  --color-border-light: #ededed;     /* 表のセル枠 */
  --color-border-checkbox: #c7c7c7;
  --color-border-modal: #bfbfbf;

  /* フォント */
  --font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-family-number: "Oswald", var(--font-family-base); /* 数字・英字の見出し（Figma では DIN 2014） */

  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* フォントサイズ（変数名の数字は Figma 上の px 値） */
  --font-size-9: 0.5625rem;
  --font-size-10: 0.625rem;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;          /* SPベース */
  --font-size-16: 1rem;              /* PCベース */
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  --font-size-40: 2.5rem;
  --font-size-42: 2.625rem;
  --font-size-48: 3rem;
  --font-size-50: 3.125rem;
  --font-size-55: 3.4375rem;
  --font-size-60: 3.75rem;

  /* 行間 */
  --line-height-tight: 1.4;
  --line-height-heading: 1.5;
  --line-height-body: 1.8;
  --line-height-loose: 2;

  /* 余白（変数名の数字は Figma 上の px 値） */
  --space-5: 0.3125rem;
  --space-7: 0.4375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-15: 0.9375rem;
  --space-20: 1.25rem;
  --space-23: 1.4375rem;      /* 通常セクションの左右の余白 */
  --space-24: 1.5rem;
  --space-25: 1.5625rem;
  --space-28: 1.75rem;
  --space-30: 1.875rem;
  --space-33: 2.0625rem;
  --space-35: 2.1875rem;
  --space-38: 2.375rem;
  --space-40: 2.5rem;
  --space-44: 2.75rem;
  --space-45: 2.8125rem;
  --space-50: 3.125rem;
  --space-53: 3.3125rem;
  --space-58: 3.625rem;
  --space-60: 3.75rem;
  --space-62: 3.875rem;
  --space-76: 4.75rem;
  --space-77: 4.8125rem;
  --space-110: 6.875rem;

  /* 角丸 */
  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 20px;
  --radius-pill: 999px;

  /* 線の太さ */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  --border-width-heavy: 4px;
  --border-width-heaviest: 5px;

  /* アニメーション */
  --duration-fade: 0.6s;
  --delay-step: 0.2s;                /* 順番にフェードインするときのずらし幅 */
}


/* --------------------------------------------------------------------------
   リセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

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

ul,
ol {
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  border: none;
  min-width: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   基本要素
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  font-family: var(--font-family-base);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body {
    font-size: var(--font-size-16);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
}

a {
  color: inherit;
  text-decoration: none;
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

:focus-visible {
  outline: var(--border-width-medium) solid var(--color-main);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   ユーティリティ
   -------------------------------------------------------------------------- */
/* 画面には表示せず、読み上げソフトにだけ伝える */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ポップアップ表示中、背景をスクロールさせない。
   overflow: hidden だけだとiOS Safariでは背景が動いてしまうため、
   bodyをposition: fixedにして固定する（js/main.jsがスクロール位置を
   top に退避し、閉じるときに window.scrollTo で元の位置へ戻す） */
.is-popup-open {
  overflow: hidden;
}

body.is-popup-open {
  position: fixed;
  left: 0;
  right: 0;
}


/* --------------------------------------------------------------------------
   動きを減らす設定の利用者向け
   フェードインなどのアニメーションも、各ブロックで同じメディアクエリを使って止める
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}