/* =============================================================
   styles.css — ほけん百花 LP（コメント付き）

   ● ゴール
     - ヘッダー/フッターは固定表示（スクロールしても消えない）
     - 中央は「画像のみ」を表示（テキストなし）
     - 画像は画面の横幅にフィット（左右トリミングなし）
     - ヘッダーのロゴは中央配置、フッターは予約ボタン
     - 全体は淡いピンク基調

   ● 使い方（差し替え）
     - 画像やリンク先は index.html の CONFIG で変更可能
     - 色やサイズの微調整は下記の CSS 変数を変更

   ● 注意点
     - 画像は横幅 1920px 以上を推奨（拡大時の粗さ防止）
     - iOS等のセーフエリア（顔認証エリア）を考慮し env(safe-area-inset-*) を使用
   ============================================================= */

/* -------------------------------------------------------------
   1) CSS 変数（ブランドカラーやサイズを一括管理）
   ------------------------------------------------------------- */
:root{
  /* テキストと背景色 */
  --ink: #1a1a1a;
  --bg:  #ffffff;

  /* ロゴサイズ（PC）。数字を変えるだけで簡単に調整可能 */
  --logo-h: 80px;  /* 例: 100px にすればより大きく表示 */

  /* ヘッダー高さ：ロゴの高さ + 余白（上下合計 約24px想定） */
  --header-h: calc(var(--logo-h) + 24px);

  /* フッター高さ：予約ボタン分のスペースを確保 */
  --footer-h: 84px;

  /* カラー（淡いピンク基調） */
  --header-bg: #ffeaf4;  /* ヘッダー背景。より淡く→ #fff3f8 等 */
  --footer-bg: #ffeaf4;  /* フッター背景 */
  --cta:       #ff5ca9;  /* 予約ボタンの色 */
  --cta-hover: #ff72b4;  /* 予約ボタンのホバー色 */
  --cta-ink:   #ffffff;  /* 予約ボタンの文字色 */
  --border:    rgba(0,0,0,0.06); /* ヘッダー/フッターの境界線 */
}

/* 画面幅が狭い（スマホ等）場合の上書き */
@media (max-width: 768px){
  :root{
    --logo-h: 48px;                        /* スマホでは少し小さめに */
    --header-h: calc(var(--logo-h) + 20px);/* 余白も少し小さめに      */
    --footer-h: 76px;                      /* フッター高さも微調整     */
  }
}

/* -------------------------------------------------------------
   2) ベーススタイル（全体の土台）
   ------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body{
  height: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  overflow-x: hidden; /* 画像を横幅100%で表示するため横スクロールを抑止 */
}

/* キーボード操作時のフォーカスを見やすく（アクセシビリティ向上） */
:focus-visible{
  outline: 3px solid rgba(255,92,169,0.45);
  outline-offset: 2px;
}

/* 可能ならアニメーションを控えめに（ユーザー設定を尊重） */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------
   3) 固定ヘッダー（ロゴ中央）
   - 常に上部に固定
   - ロゴは CSS 変数 --logo-h でサイズ調整
   ------------------------------------------------------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  display: grid;             /* 中央寄せを簡単に行うため grid を使用 */
  place-items: center;       /* 要素を縦横中央に配置 */
  z-index: 1000;             /* コンテンツより前面に */
}
.header-inner{
  width: 100%;
  display: grid;
  place-items: center;       /* ロゴリンク自体も中央に */
}
.brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;     /* ロゴリンク下線を消す */
}
.brand img{
  height: var(--logo-h);     /* ← ロゴの表示サイズ（PC/SPは上の :root / @media で制御） */
  width: auto;               /* 縦横比を保持 */
  object-fit: contain;       /* 万一の比率差でも収まりよく */
  display: block;            /* 画像下の隙間対策 */
}

/* -------------------------------------------------------------
   4) 固定フッター（予約ボタン）
   - 常に下部に固定
   - iPhone 等のセーフエリアも考慮
   ------------------------------------------------------------- */
.site-footer{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--footer-h) + env(safe-area-inset-bottom));
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
  display: grid;
  place-items: center;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); /* セーフエリア分 余白を追加 */
  z-index: 1000;
}
.footer-inner{
  width: 100%;
  display: grid;
  place-items: center;
}

/* 予約ボタン（CTA） */
.cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;          /* ある程度の幅を確保（必要なら調整） */
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;      /* しっかり丸みを出す */
  text-decoration: none;     /* 下線なし */
  font-weight: 700;          /* 視認性アップ */
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: 0 6px 18px rgba(255,92,169,0.25); /* やわらかい影 */
  transition: filter .2s ease, transform .05s ease;
  cursor: pointer;           /* クリック可能であることを示す */
}
.cta:hover{  filter: brightness(1.05); }
.cta:active{ transform: translateY(1px); }
.cta:focus-visible{ outline: 3px solid rgba(255,92,169,0.45); outline-offset: 2px; }

/* -------------------------------------------------------------
   5) メイン領域（固定帯に隠れないよう上下に余白）
   ------------------------------------------------------------- */
main{
  min-height: 100vh;
  padding-top: var(--header-h);                                      /* ヘッダー分の余白 */
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));/* フッター分の余白 */
}

/* -------------------------------------------------------------
   6) メイン画像（横幅フィット・左右を切らない）
   - width:100% + height:auto で横幅に合わせ縦を自動調整
   - 背景画像の cover を使わないのは「左右トリミング回避」のため
   ------------------------------------------------------------- */
.hero{
  width: 100%;
  padding: 0;                /* 画像を端まで表示するため余白なし */
}
.hero-inner{
  width: 100%;
}
.hero img{
  display: block;            /* 下のわずかな隙間対策 */
  width: 100%;               /* 画面の横幅にフィット */
  height: auto;              /* アスペクト比を維持 → 左右が切れない */
}