/* ==========================================================================
   theme-warm.css
   デザインパターン: 「密着・あたたかみ」
   配色: ベージュ/オレンジ / フォント: 丸ゴシック / 写真量: 多め / レイアウト: ゆるい配置・角丸多用

   base.css・main.js はシンプルパターンと完全共通(コピーしただけで無編集)。
   このファイルの値だけを差し替えて雰囲気を変えている。
   ========================================================================== */

:root {
  /* ---- ベースカラー(ベージュ系) ---- */
  --color-bg: #FFFBF5;           /* ページ背景:あたたかい生成り色 */
  --color-surface: #FBEEDD;      /* カード等の背景:薄いベージュ */
  --color-text: #4A3B2C;         /* 本文文字色:こげ茶 */
  --color-text-sub: #8B7360;     /* 補足文字色:あたたかみのあるグレーブラウン */
  --color-border: #EFDFC7;       /* 罫線・区切り線:淡いベージュ */

  /* ---- キーカラー(オレンジ系) ---- */
  --color-primary: #D9793B;      /* ボタン・強調:テラコッタオレンジ */
  --color-accent: #C9622B;       /* アイコン・価格・アクセント:濃いオレンジ */

  /* ---- ヒーロー(ファーストビュー) ---- */
  --color-hero-overlay: rgba(74, 39, 12, 0.32);
  --color-hero-text: #FFF8EF;

  /* ---- フッター ---- */
  --color-footer-bg: #4A3323;    /* 深めのこげ茶 */
  --color-footer-text: #FFF3E6;

  /* ---- フォント ----
     丸ゴシックを想定。「M PLUS Rounded 1c」を指定(やわらかい印象)。
     本番導入時は google Fonts の <link> をheadに追加すること
     (このパターンではNoto Sans JPではなくM PLUS Rounded 1cに変更している)。 */
  --font-heading: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;

  /* ---- 形状・余白・影 ---- */
  --radius: 22px;                 /* 角丸多用。カード・ボタン全てが丸みを帯びる */
  --spacing-unit: 1.15rem;        /* 余白はシンプルよりやや広め+ゆるい配置感を出す */
  --shadow-style: 0 10px 26px rgba(201, 98, 43, 0.16); /* オレンジがかった柔らかい影 */
  --image-filter: saturate(1.08) sepia(6%); /* 写真をわずかに暖色寄りに補正 */
}

/* 密着・あたたかみパターン固有の微調整 */
body {
  font-weight: 400;
  letter-spacing: 0; /* 丸ゴシックは字間を詰めた方がやわらかく見える */
}
h1, h2, h3, h4 {
  font-weight: 700; /* 丸ゴシックは太めに出した方が可愛らしさが出る */
}

/* カード類の角をより丸く、少しランダムな余白感を出す(ゆるい配置) */
.reasons__item,
.menu-card,
.reviews__card,
.commitment__photo,
.gallery__item,
.sns-feed__item {
  border-radius: var(--radius);
}

/* ボタンもしっかり丸める(ピル形状に近づける) */
.btn {
  border-radius: 999px;
}

/* 選ばれる理由アイコンの背景に丸いベージュの円を敷いて、あたたかみを強調 */
.reasons__icon {
  background: var(--color-surface);
  border-radius: 50%;
  padding: 14px;
  box-sizing: border-box;
}

/* ヘッダーロゴを丸ゴシックの太字で少し大きめに */
.site-header__logo {
  font-weight: 700;
  font-size: 1.4rem;
}