/*****************************
 * Base CSS
 * ✅ VARIABLES ブロック：案件ごとに値を差し替える（値は DESIGN.md から転記）
 * ⚠️ BASE STYLES ブロック：原則触らない
 * デザイン基準幅：PC 1440px / SP 375px
 *****************************/

/* ============================================================
   VARIABLES（オフィシャル光 個人向けLP：DESIGN.md より転記）
   ============================================================ */
:root {
  /* Color -------------------------------------------------- */
  --color-primary:   #22aee4; /* Speed Blue：メイン／信頼・CTA */
  --color-accent:    #ffd400; /* Light Yellow：アクセント（最重要1〜2箇所のみ） */
  --color-text:      #111111; /* 本文テキスト（ink） */
  --color-bg:        #ffffff; /* Clean White：背景 */
  --color-border:    #070202; /* Logo Black：黒枠ボーダー・ポップ影 */

  /* Typography ---------------------------------------------
     ※Zen Kaku Gothic Newはカタカナ小書き文字（ィ・ャ等）の
       字間が広く見えるFBによりNoto Sans JPへ変更（2026-08-06） */
  --font-base:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-heading: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-en:      'Outfit', 'Arial Black', sans-serif; /* 英字見出し・ラベル用 */
  --font-num:     -apple-system, BlinkMacSystemFont, 'Meiryo', 'Hiragino Kaku Gothic ProN', 'Roboto', sans-serif; /* 価格・数字はシステムフォント（カンマの比率が整った定番の見え方。とくとくBB方式） */

  /* Layout ------------------------------------------------- */
  --inner-width:     1180px; /* コンテンツ幅（デザインシステム --max-width） */
  --padding-pc:      40px;   /* PC左右padding（最小ガター） */
  --padding-sp:      20px;   /* SP左右padding */
  --design-width-pc: 1440px; /* PCデザイン基準幅（vwスケーリングの上限） */
  --design-width-sp: 375px;  /* SPデザイン基準幅 */

  /* Spacing（セクション余白）
     rem指定にすることで768〜1440pxのvwスケーリングに追従させ、
     どの画面幅でも中身と余白の比率を一定に保つ */
  --spacing-section-pc: 6rem; /* 1440pxで96px */
  --spacing-section-sp: 4rem; /* 64px */
}

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

/* ルートフォントサイズ
   ～375px     : 375px基準のvw（SP最小デザイン幅で16px＝100%になる）
   376px〜767px: 16px固定（100%）＝リキッドレイアウト
   768px〜1440px: 1440px基準のvw（PCデザイン基準幅で16px＝100%になる）
   1441px〜     : 16px固定（拡大なし）
   ※基準幅を変える場合は 16 / 基準幅 * 100 で vw を再計算する
   ---------------------------------------------------------- */
html {
  font-size: 100%;
}
@media (max-width: 375px) {
  html {
    font-size: 4.267vw; /* 16 / 375 * 100 */
  }
}
@media (min-width: 768px) and (max-width: 1440px) {
  html {
    font-size: 1.1111vw; /* 16 / 1440 * 100 */
  }
}
@media (min-width: 1441px) {
  html {
    font-size: 100%;
  }
}

/* フォント・カラー */
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;
  }
  a:hover,
  button:hover {
    opacity: 0.7;
  }
}

/* インナー幅（共通ラッパー）
   1440px時の視覚的な左右ガターは、inner(1180px)を中央寄せすることで自動的に生成される。
   全体を1440pxで固定したい場合のみ、最上位ラッパーに max-width:1440px を付与する。
   ---------------------------------------------------------- */
.inner {
  max-width: var(--inner-width);
  margin-inline: auto;
  padding-inline: var(--padding-sp);
}
@media (min-width: 768px) {
  .inner {
    padding-inline: var(--padding-pc);
  }
}