@charset "UTF-8";

/* =========================================================
   Design tokens
   色・フォント・余白はここで一元管理する（各ファイルで :root を定義しない）

   ブレークポイント（CSS 変数は media query に使えないため値で記載）
     1280px : ヘッダーを詰める
     1100px : ハンバーガーメニューに切り替え / タブレット
      900px : 一覧の列数を減らす
      768px : スマホ
      480px : 小さいスマホ
   ========================================================= */
:root {
  /* ---------- Color : brown ---------- */
  --c-brown: #856b5b;         /* 基本の文字色 */
  --c-brown-dark: #765a4a;    /* 記事・口コミの文字色、枠線 */
  --c-brown-light: #82756d;   /* ページ送り・カテゴリ */

  /* ---------- Color : blue ---------- */
  --c-blue: #6994ad;          /* 英字見出し・リンク */
  --c-blue-btn: #97b7c9;      /* 予約ボタン・フッター・カテゴリ枠 */
  --c-blue-border: #7ca1b7;
  --c-blue-line: #8bc1e1;     /* 区切り線 */
  --c-blue-line-light: #b7d8ec;
  --c-blue-pale: #bed4e1;
  --c-blue-insta: #83b1c8;
  --c-blue-mist: #dee8ed;     /* 記事 h3 背景・口コミのページ送り */

  /* ---------- Color : beige ---------- */
  --c-beige: rgba(249, 236, 224, 0.8);  /* SALON INFO 背景 */
  --c-beige-pale: #faf0e6;    /* 口コミ返信・ページ送り */
  --c-beige-line: #f8eee4;    /* MENU 見出しライン */
  --c-beige-gray: #dbd0c4;    /* カテゴリ枠（メニュー）・点線 */

  /* ---------- Color : background ---------- */
  --c-gray: #e4e4e4;          /* 画像の読み込み前の背景 */
  --c-photo-bg: #dbd8d8;
  --c-hero-bg: #e1dddd;
  --c-style-bg: rgba(200, 216, 225, 0.6);
  --c-loading-bg: #5a4436;    /* ローディング画面 */

  /* ---------- Font ---------- */
  --f-en: "Aboreto", serif;
  --f-en-sans: "Jost", "Brandon Grotesque", sans-serif; /* Brandon Grotesque の代替 */
  --f-num: "Montserrat", sans-serif;
  --f-mincho: "Shippori Mincho B1", serif;
  --f-old-mincho: "Zen Old Mincho", serif;
  --f-maru: "Zen Maru Gothic", sans-serif;
  --f-noto: "Noto Sans JP", sans-serif;

  /* ---------- Layout ---------- */
  --gutter: 40px;             /* 画面端の余白 */
  --header-h: 143px;
}

@media (max-width: 1100px) {
  :root {
    --header-h: 90px;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --header-h: 72px;
  }
}