/* ==========================================================================
   base.css — 変数・共通スタイル
   案件開始時：ここの :root の変数だけを案件に合わせて調整する。
   個別のスタイルは style.css に書くこと。
   ========================================================================== */

:root {
  /* ---- 色（案件ごとに調整） ---- */
  --color-text: #333333;
  --color-bg: #ffffff;
  --color-primary: #1a5fb4;   /* メインカラー（focus-visibleで使用） */
  --color-border: #e0e0e0;

  /* ---- ブランドカラー（Figma変数より） ---- */
  --color-blue: #1fa3dc;      /* ブランドブルー */
  --color-blue2: #1696ce;     /* 開催概要テーブルの項目名など */
  --color-pink: #f09191;      /* CTA：アクセス */
  --color-orange: #f48e00;    /* CTA：宿泊者特典 / 入場料無料バッジ */
  --color-green: #269b74;     /* CTA：SNS */
  --color-badge-green: #8bc34a; /* ペット同伴OKバッジ（Figma実データ未取得のため近似値） */
  --color-cream: #f9f7ef;     /* セクション背景のクリーム色 */

  /* ---- タイポグラフィ ---- */
  --font-base: "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo,
    sans-serif;
  --font-jp: "Zen Kaku Gothic New", var(--font-base);
  --letter-spacing-base: 0.1em; /* 字間10%（H2・本文・注釈共通） */
  --line-height-base: 1.5;      /* line-height 150%（H2・本文・注釈共通） */

  /* フォントサイズ（役割ごと。SP基準、PCはブレイクポイントで上書き）
     Tabletは実装時にPC/SPの中間としてバランスを見て調整する */
  --font-size-h2-sp: 3.2rem;    /* 32px */
  --font-size-h2-pc: 4.6rem;    /* 46px */
  --font-size-body-sp: 1.4rem;  /* 14px */
  --font-size-body-pc: 1.8rem;  /* 18px */
  --font-size-note-sp: 1.3rem;  /* 13px */
  --font-size-note-pc: 1.4rem;  /* 14px */

  /* ---- 余白スケール（原則この変数のみ使用） ---- */
  --space-xs: 0.8rem;   /*  8px */
  --space-s: 1.6rem;    /* 16px */
  --space-m: 2.4rem;    /* 24px */
  --space-l: 4rem;      /* 40px */
  --space-xl: 6.4rem;   /* 64px */
  --space-2xl: 9.6rem;  /* 96px */

  /* ---- ブレイクポイント（メモ用：メディアクエリでは変数が使えないため値を直接書く） ----
     --bp-md: 768px   タブレット以上
     --bp-lg: 1080px  PC以上
  ------------------------------------------------------------------------ */
}

/* ==========================================================================
   共通スタイル
   ========================================================================== */

body {
  font-family: var(--font-base);
  font-size: var(--font-size-body-sp);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

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

/* キーボード操作時のフォーカスリング（消さない） */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* スムーススクロール（JS不要） */
html {
  scroll-behavior: smooth;
}

/* 固定ヘッダーがある場合のアンカーずれ対策：ヘッダー高に合わせて調整 */
:target {
  scroll-margin-top: 80px;
}