/* ==========================================================================
   taste-pop.css
   イメージテイスト: 3-3. ポップ・元気（賑やか・アクティブ・親しみ）
   common.css の構造はそのままに、色・フォント・装飾のみをここで定義する。
   Google Fonts（M PLUS Rounded 1c）を使用するため、
   このCSSを読み込むHTMLの<head>には合わせてfontsリンクが必要（各HTML参照）。
   ========================================================================== */

:root {
  /* カラーパレット: イエロー / オレンジ / ディープターコイズ */
  --color-primary: #008090;
  --color-primary-dark: #00636f;
  --color-accent: #ff6b00;
  --color-accent-contrast: #ffd000;

  --color-bg: #ffffff;
  --color-bg-alt: #fff8e8;
  --color-text: #2b2b2b;
  --color-text-light: #6b7280;
  --color-border: #ffe3ad;

  --color-header-bg: #ffffff;
  --color-footer-bg: #008090;
  --color-footer-text: #ffffff;

  --color-cta-bg: #ff6b00;
  --color-cta-text: #ffffff;

  /* フォント: 太い丸ゴシック体 */
  --font-heading: "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-body: "M PLUS Rounded 1c", system-ui, sans-serif;
  --letter-spacing-heading: 0.02em;

  /* 装飾: 角丸12〜20px、カプセルボタン */
  --radius: 16px;
  --radius-lg: 20px;

  /* 影: ぼかしの少ないはっきりとした「おもちゃのような」影 */
  --shadow-sm: 4px 4px 0 rgba(0, 128, 144, 0.14);
  --shadow-md: 6px 6px 0 rgba(0, 128, 144, 0.2);
  --border-style: 2px solid #ffe3ad;
}

body {
  font-weight: 500;
}

h1, h2, h3 {
  font-weight: 800;
}

/* ドット柄の背景パターン */
.section--alt {
  background-color: var(--color-bg-alt);
  background-image: radial-gradient(rgba(0, 128, 144, 0.14) 1.6px, transparent 1.6px);
  background-size: 18px 18px;
}

/* カプセル型ボタン + 強めのホバー上昇 */
.btn {
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn--primary,
.form-submit .btn {
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  transform: translateY(-4px);
}

.btn--primary:hover,
.form-submit .btn:hover {
  box-shadow: var(--shadow-md);
}

.header-cta {
  border-radius: 999px;
}

/* カード類：はっきりとした角丸＋くっきり影 */
.feature-card,
.service-card,
.voice-card,
.menu-category,
.special-card .photo-block,
.gallery-grid__item .photo-block {
  border-radius: var(--radius-lg);
  border: var(--border-style);
}

.feature-card,
.service-card,
.voice-card {
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.feature-card:hover,
.voice-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.news-list__tag {
  border-radius: 999px;
}

/* MVキャッチコピーの強調ワード */
.mv__catch em {
  color: var(--color-accent-contrast);
}

/* モバイル固定アクションバーもカプセル寄りの丸みに */
.mobile-action-bar {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}