/* ==========================================================================
   taste-natural.css
   イメージテイスト: 3-7. ナチュラル・やさしい（自然・オーガニック・温もり）
   common.css の構造はそのままに、色・フォント・装飾のみをここで定義する。
   Google Fonts（Kiwi Maru / Zen Kaku Gothic New）を使用するため、
   このCSSを読み込むHTMLの<head>には合わせてfontsリンクが必要（各HTML参照）。
   ========================================================================== */

:root {
  /* カラーパレット: オリーブグリーン / アースブラウン / サンドベージュ */
  --color-primary: #6e8268;
  --color-primary-dark: #57654f;
  --color-accent: #6e8268;
  --color-accent-contrast: #f0d9a0; /* MVの強調ワード用。オリーブ背景でも読める明るいサンド系ゴールド */

  --color-bg: #fffdf9;
  --color-bg-alt: #efece6;
  --color-text: #4a453d;
  --color-text-light: #8c8478;
  --color-border: #ddd5c7;

  --color-header-bg: #fffdf9;
  --color-footer-bg: #57544a;
  --color-footer-text: #fdfbf6;

  --color-cta-bg: #6e8268;
  --color-cta-text: #ffffff;

  /* フォント: やさしい角ゴシック／ニュアンスのある見出し書体 */
  --font-heading: "Kiwi Maru", "Zen Kaku Gothic New", serif;
  --font-body: "Zen Kaku Gothic New", system-ui, sans-serif;
  --letter-spacing-heading: 0.04em;

  /* 装飾: 四角形を少し丸めた有機的な印象 */
  --radius: 16px;
  --radius-lg: 20px;

  /* 影: 自然光をイメージした柔らかくぼやけた影 */
  --shadow-sm: 0 8px 24px rgba(110, 130, 104, 0.10);
  --shadow-md: 0 12px 32px rgba(110, 130, 104, 0.16);
  --border-style: 1px solid #ddd5c7;
}

/* 背景にうっすらと和紙・麻のようなテクスチャを重ねる */
body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(rgba(124, 110, 98, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(110, 130, 104, 0.04) 1px, transparent 1px);
  background-size: 28px 28px, 44px 44px;
  background-position: 0 0, 14px 20px;
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* 写真・アイコンを有機的なブロブシェイプでマスク */
.gallery-grid__item .photo-block,
.mv--photo .mv__photo,
.feature-card__icon {
  border-radius: 63% 37% 54% 46% / 43% 37% 63% 57%;
  border: none;
}

.feature-card,
.voice-card,
.service-card {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-sm);
}

.btn--primary,
.header-cta,
.form-submit .btn {
  border-radius: 999px;
}

.btn--outline {
  border-radius: 999px;
}

.section__title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-accent);
  margin: 14px auto 0;
  border-radius: 2px;
}