/*****************************
 * Base CSS
 * ✅ VARIABLES ブロック：案件ごとに値を差し替える
 * ⚠️ BASE STYLES ブロック：原則触らない
 *****************************/

/* ============================================================
   VARIABLES（案件ごとに差し替え）
   ============================================================ */
:root {
  /* Color -------------------------------------------------- */
  --color-primary:   #1a84e8; /* メインカラー（ブルー） */
  --color-accent:    #FFD740; /* アクセントカラー（イエロー） */
  --color-text:      #333333; /* 本文テキスト */
  --color-bg:        #ffffff; /* 背景 */
  --color-border:    #e5e7eb; /* ボーダー */

  /* Typography --------------------------------------------- */
  --font-base:    'Noto Sans JP', sans-serif;
  --font-heading: 'Noto Sans JP', sans-serif;
  --font-en:      'Outfit', sans-serif; /* 英字・数字用 */

  /* Layout ------------------------------------------------- */
  --inner-width:      1440px; /* コンテンツ幅 */
  --padding-pc:       40px;   /* PC左右余白 */
  --padding-sp:       20px;   /* SP左右余白 */
  --breakpoint-inner: 1520px; /* inner-width + padding-pc * 2 */

  /* Spacing（セクション余白） ------------------------------- */
  --spacing-section-pc: 96px;  /* style.css --section-pt/pb 6rem相当 */
  --spacing-section-sp: 64px;  /* style.css --section-pt/pb 4rem相当 */
}

/* ============================================================
   BASE STYLES（原則触らない）
   ============================================================ */

/* ルートフォントサイズ
   375px以下   : 375px基準のvw（最小保証）
   376px〜767px: 16px固定（SP）
   768px〜      : 20px固定（PC / 0.8rem=16px を最小保証）
   ---------------------------------------------------------- */
html {
  font-size: 100%; /* 16px */
}
@media (max-width: 375px) {
  html {
    font-size: 4.267vw; /* vw(375, 16) = 16/375*100 */
  }
}
@media (min-width: 768px) {
  html {
    font-size: 20px;
  }
}

/* フォント・カラー */
body {
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ホバー（PC のみ） */
@media (min-width: 768px) {
  a,
  button {
    transition: opacity 0.3s;
  }
}

/* インナー幅（共通ラッパー） */
.inner {
  max-width: var(--inner-width);
  margin-inline: auto;
  padding-inline: var(--padding-sp);
}
@media (min-width: 768px) {
  .inner {
    padding-inline: var(--padding-pc);
  }
}