/* ==========================================================================
   theme-natural.css
   デザインパターン: 「ナチュラル」
   配色: グリーン/アース / フォント: 手書き風混在 / 写真量: 自然光・素材感 / レイアウト: 曲線・有機的な区切り

   base.css・main.js はシンプルパターンと完全共通(コピーしただけで無編集)。
   このファイルの値+末尾のオーガニックな装飾(波形divider・ブロブ型写真フレーム)だけで
   雰囲気を変えている。
   ========================================================================== */

:root {
  /* ---- ベースカラー(アース系) ---- */
  --color-bg: #FAF7EE;           /* ページ背景:生成りの紙のような色 */
  --color-surface: #EFEADA;      /* カード等の背景:淡いグリーンベージュ */
  --color-text: #3A3A2C;         /* 本文文字色:深いオリーブブラウン */
  --color-text-sub: #75765F;     /* 補足文字色:くすんだセージグレー */
  --color-border: #DEDAC2;       /* 罫線・区切り線:淡いアースカラー */

  /* ---- キーカラー(グリーン/アース) ---- */
  --color-primary: #5E7A4C;      /* ボタン・強調:natural green */
  --color-accent: #A9784F;       /* アイコン・価格・アクセント:テラコッタブラウン */

  /* ---- ヒーロー(ファーストビュー) ---- */
  --color-hero-overlay: rgba(38, 48, 22, 0.30);
  --color-hero-text: #FDFBF2;

  /* ---- フッター ---- */
  --color-footer-bg: #33402A;    /* 深い森のグリーン */
  --color-footer-text: #EDE8D6;

  /* ---- フォント ----
     「手書き風混在」を想定。見出しは手書き風の「Klee One」、本文は
     やわらかい丸ゴシックの「Zen Maru Gothic」を組み合わせる。
     本番導入時は google Fonts の <link> をheadに追加すること
     (このパターンではNoto Sans JPではなくKlee One + Zen Maru Gothicに変更している)。 */
  --font-heading: "Klee One", "Yomogi", cursive;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;

  /* ---- 形状・余白・影 ---- */
  --radius: 28px;                 /* 有機的な丸みを持たせる */
  --spacing-unit: 1.2rem;
  --shadow-style: 0 10px 26px rgba(74, 90, 50, 0.14); /* グリーンがかった柔らかい影 */
  --image-filter: saturate(1.05) contrast(0.97) brightness(1.03); /* 自然光っぽい軽やかなトーン */
}

/* ナチュラルパターン固有の微調整 */
body {
  font-weight: 400;
}
h1, h2, h3, h4 {
  font-weight: 600;
}
.section__label {
  color: var(--color-accent);
  letter-spacing: 0.15em;
}

/* ==========================================================================
   曲線・有機的な区切り(ヒーロー下部を波形カーブでつなぐ)
   ========================================================================== */
.hero {
  overflow: visible; /* 波カーブがはみ出て見えるようにbase.cssのoverflow:hiddenを上書き */
}
.hero::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -1px;
  height: 70px;
  background: var(--color-bg);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 3;
}

/* ==========================================================================
   ブロブ型(有機的な形)の写真フレーム
   選ばれる理由アイコンとこだわりポイント写真を、あえて非対称な丸みにする
   ========================================================================== */
.reasons__icon {
  background: var(--color-surface);
  padding: 16px;
  box-sizing: border-box;
  border-radius: 62% 38% 55% 45% / 45% 55% 42% 58%;
}
.commitment__photo {
  border-radius: 60% 40% 30% 70% / 55% 35% 65% 45%;
}
.commitment__photo:nth-child(odd) {
  border-radius: 35% 65% 55% 45% / 45% 55% 35% 65%;
}

/* ギャラリー・メニュー写真も直角ではなく緩やかな有機曲線に */
.gallery__item,
.menu-card__photo,
.sns-feed__item {
  border-radius: 45% 55% 52% 48% / 55% 45% 55% 45%;
}

/* カードは曲線を活かして影を柔らかく大きめに */
.menu-card,
.reviews__card,
.reasons__item {
  box-shadow: var(--shadow-style);
}