/* =================================================================
   wakuwaku.css ―― 「わくわく楽しく・画像多め・読みやすい」見本テーマ
   位置づけ：css/beige.css の上に重ねる追加レイヤー（本番色は変えない）
   適用範囲：body.theme-wakuwaku 配下にのみ効く（既存ページへの影響ゼロ）
   配色：beige.css の既存パレット（コーラル/ピーチ/レモン/ミント/ラベンダー）のみを使用。
         新色・ビビッドなピンクは一切追加しない（メンズサロン方針）。
   読み込み順：style.css → beige.css → wakuwaku.css（このファイル）
   ================================================================= */

body.theme-wakuwaku {
  /* --- 可読性：薄いグレー文字を全廃し、コントラスト比4.5:1以上を確保 ---
     #6B5C4C on #FBF4E4 ≒ 5.7:1（旧 --ink-b-soft の #8A7B69 は約3.7:1で不足） */
  --ink-b-soft: #6B5C4C;

  /* --- セクション背景に使う「淡い」パステル4色（既存パレットを薄めた同トーン） --- */
  --tint-peach:    #FCE9DD;
  --tint-mint:     #E2F2E9;
  --tint-lemon:    #FCF1D7;
  --tint-lavender: #F0E8F7;

  /* --- 見出し用フォント（丸ゴシック・わくわく感） --- */
  --font-rounded: "M PLUS Rounded 1c", var(--sans);
}

/* =================================================================
   1. 可読性の底上げ（本文サイズ・行間・見出し小見出し）
   ================================================================= */
body.theme-wakuwaku { font-size: 17px; line-height: 1.9; }
.theme-wakuwaku .section-head .lead,
.theme-wakuwaku .hero--pop .hero__sub,
.theme-wakuwaku .concept__copy p { font-size: 1.05rem; }
.theme-wakuwaku .concept__copy p { line-height: 1.9; }

.theme-wakuwaku .section-head .en,
.theme-wakuwaku .concept__copy .en {
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .32em;
}

/* =================================================================
   2. 見出しフォント（M PLUS Rounded 1c・丸ゴシックで親しみやすく）
      本文の引用・一言（.sign 等）は明朝のまま残す＝上書きしない
   ================================================================= */
.theme-wakuwaku h1,
.theme-wakuwaku h2,
.theme-wakuwaku h3 {
  font-family: var(--font-rounded);
}
.theme-wakuwaku .hero--pop h1 {
  font-size: clamp(2.4rem, 9vw, 4.6rem);
}

/* =================================================================
   3. セクション見出しの「レモンのマーカー下線」
      既存 .deco-line（細い金線）を、わくわく版だけ太いマーカー風に。
   ================================================================= */
.theme-wakuwaku .deco-line {
  width: 88px;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--lemon), var(--peach));
  margin: 16px auto 0;
  transform: rotate(-1.4deg);
  box-shadow: 0 3px 0 rgba(74, 59, 48, .06);
}

/* =================================================================
   4. ステッカー風バッジ（角丸札＋rotate(-3deg)＋やわらかい影）
      ヒーローのバッジ／コンセプト写真の数字バッジ／
      数字カードのラベル／「今週のおはなし」の話数バッジに使用
   ================================================================= */
.theme-wakuwaku .hero--pop .hero__badge {
  transform: rotate(-3deg);
  box-shadow: 0 10px 22px rgba(74, 59, 48, .18);
}
.theme-wakuwaku .concept__visual-badge {
  transform: rotate(-4deg);
}
.theme-wakuwaku .pop-stat span {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 253, 248, .72);
  color: var(--ink-b);
  font-weight: 800;
  transform: rotate(-3deg);
  box-shadow: 0 4px 10px rgba(74, 59, 48, .12);
}
.theme-wakuwaku .ehon-weekly-card__no {
  transform: rotate(-3deg);
}

/* =================================================================
   5. ボタン：ひとまわり大きく／ホバーでぷるんと弾む
   ================================================================= */
.theme-wakuwaku .btn { padding: 18px 34px; }
.theme-wakuwaku .btn--lg { padding: 21px 42px; font-size: 1.02rem; }
/* ボタン拡大padding適用時、文言が長いボタン（例：クーポンの「Googleの口コミを見る・投稿する」）が
   375px幅でカードからはみ出し横スクロールを起こすのを防ぐ（2行折返しを許可） */
.theme-wakuwaku .btn { white-space: normal; text-align: center; }
.theme-wakuwaku .btn:hover,
.theme-wakuwaku .btn--pop:hover,
.theme-wakuwaku .btn--pop-line:hover,
.theme-wakuwaku .btn--primary:hover,
.theme-wakuwaku .btn--outline:hover,
.theme-wakuwaku .btn--gold:hover,
.theme-wakuwaku .btn--line:hover {
  transform: scale(1.04);
}
.theme-wakuwaku .btn--pop:hover { box-shadow: 0 16px 32px rgba(244, 160, 136, .55); }
.theme-wakuwaku .btn--line:hover { box-shadow: 0 16px 32px rgba(6, 199, 85, .40); }
@media (prefers-reduced-motion: reduce) {
  .theme-wakuwaku .btn:hover,
  .theme-wakuwaku .btn--pop:hover,
  .theme-wakuwaku .btn--pop-line:hover,
  .theme-wakuwaku .btn--primary:hover,
  .theme-wakuwaku .btn--outline:hover,
  .theme-wakuwaku .btn--gold:hover,
  .theme-wakuwaku .btn--line:hover { transform: none; }
}

/* =================================================================
   6. カード：角丸を大きく／ホバーでふわっと浮く量を増やす
   ================================================================= */
.theme-wakuwaku .feature,
.theme-wakuwaku .menu-card,
.theme-wakuwaku .voice-card,
.theme-wakuwaku .staff-card,
.theme-wakuwaku .faq-item,
.theme-wakuwaku .process-item,
.theme-wakuwaku .coupon-card,
.theme-wakuwaku .ehon-weekly-card,
.theme-wakuwaku .shindan-card,
.theme-wakuwaku .shindan-result__primary,
.theme-wakuwaku .shindan-result__secondary,
.theme-wakuwaku .line-merit {
  border-radius: 20px;
}
.theme-wakuwaku .feature:hover,
.theme-wakuwaku .menu-card:hover,
.theme-wakuwaku .coupon-card:hover {
  transform: translateY(-6px);
}

/* =================================================================
   7. 数字カード（98.6% / 30年 / 個室）：数字を特大＋丸ゴシック
   ================================================================= */
.theme-wakuwaku .pop-stat b {
  font-family: var(--font-rounded);
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 800;
}

/* =================================================================
   8. セクションごとの薄い背景色（交互に・単調さを消す）
      すべて beige.css の既存パレットを薄めた色（新色なし）
   ================================================================= */
.theme-wakuwaku #news.section--teal        { background: var(--tint-peach); }
.theme-wakuwaku #ehon-weekly               { background: var(--tint-mint); }
.theme-wakuwaku #features.section--teal    { background: var(--tint-lemon); }
.theme-wakuwaku #line-promo.section--teal  { background: var(--tint-lemon); }
.theme-wakuwaku #staff.section--teal       { background: var(--tint-lavender); }
.theme-wakuwaku #faq.section--teal         { background: var(--tint-mint); }
.theme-wakuwaku .features__grid .feature { border-top-color: var(--coral); }
.theme-wakuwaku .features__grid .feature:nth-child(2) { border-top-color: var(--lavender); }
.theme-wakuwaku .features__grid .feature:nth-child(3) { border-top-color: var(--mint); }
.theme-wakuwaku .features__grid .feature:nth-child(4) { border-top-color: var(--peach); }
.theme-wakuwaku .features__grid .feature:nth-child(5) { border-top-color: var(--lemon); }
.theme-wakuwaku .features__grid .feature:nth-child(6) { border-top-color: var(--coral-d); }

/* =================================================================
   9. こだわり6カード：実写真のサムネイル帯を追加
   ================================================================= */
.theme-wakuwaku .feature--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; } /* 写真つきカード専用（写真なしの.featureは通常余白のまま＝2026-07-11修正） */
.theme-wakuwaku .feature__photo {
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden; flex: none;
  border-bottom: 4px solid var(--line);
}
.theme-wakuwaku .feature__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-wakuwaku .feature__body { padding: 22px 24px 26px; }
.theme-wakuwaku .feature__body .feature__icon { margin-bottom: 14px; }

/* =================================================================
   10. 人気メニュー3カード：上部に写真を追加
   ================================================================= */
.theme-wakuwaku .menu-card__photo { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; flex: none; }
.theme-wakuwaku .menu-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =================================================================
   11. スタイルギャラリー帯（新設・ヒーロー下）
        横スクロール＋スナップ。手持ちのスタイル写真8枚。
   ================================================================= */
.theme-wakuwaku .wk-gallery__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  margin: 0 -20px;
}
.theme-wakuwaku .wk-gallery__track {
  display: flex; gap: 14px; padding: 2px 20px;
}
.theme-wakuwaku .wk-gallery__item {
  flex: none; width: 178px; aspect-ratio: 3 / 4;
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-pop);
  scroll-snap-align: start;
}
.theme-wakuwaku .wk-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 720px) {
  .theme-wakuwaku .wk-gallery__item { width: 210px; }
}

/* =================================================================
   12. 波形の区切り（セクション境界・2〜3箇所）
   ================================================================= */
.theme-wakuwaku .wk-wave { line-height: 0; overflow: hidden; }
.theme-wakuwaku .wk-wave svg { display: block; width: 100%; height: 44px; }
/* ①お知らせ(ピーチ) → 今週のおはなし(ミント) */
.theme-wakuwaku .wk-wave--news-to-ehon { background: var(--tint-peach); }
.theme-wakuwaku .wk-wave--news-to-ehon path { fill: var(--tint-mint); }
/* ②こだわり(レモン) → 人気メニュー(クリーム) */
.theme-wakuwaku .wk-wave--features-to-menu { background: var(--tint-lemon); }
.theme-wakuwaku .wk-wave--features-to-menu path { fill: var(--cream); }
/* ③アクセス(クリーム) → 予約CTA(モカの暗色帯) */
.theme-wakuwaku .wk-wave--access-to-cta { background: var(--cream); }
.theme-wakuwaku .wk-wave--access-to-cta path { fill: #4A3B30; }

/* =================================================================
   13. こだわりカード写真とアイコンの重なり調整・脱毛/接客カードの見出し順
   ================================================================= */
@media (max-width: 480px) {
  .theme-wakuwaku .feature__photo { aspect-ratio: 4 / 3; }
}

/* =================================================================
   14. 「男の清潔感は顔で決まる」バナー（GALLERY差し替え・2026-07-11）
   ================================================================= */
.theme-wakuwaku .wk-banner { padding-top: 34px; padding-bottom: 10px; }
.theme-wakuwaku .wk-banner__figure {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(74, 56, 44, .16);
}
.theme-wakuwaku .wk-banner__figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* =================================================================
   15. サブページ（menu/datsumo/coupon/ehon/shindan/kiwami）への展開
        （2026-07-11 西川様承認「この路線でOK」・全ページ採用）
   ================================================================= */

/* 15-1. ページヒーローの見出しも丸ゴシックに（h1は共通ルールで既に丸ゴシック化済み。
   ここでは行間・余白だけ本文と同じ基準に整える） */
.theme-wakuwaku .page-hero h1 { line-height: 1.3; }

/* 15-2. 価格表：本文17px化で375px幅が窮屈になりやすいため、価格表の内側だけ
   15.5〜16px相当に下げて折返し崩壊を防ぐ（数字・行構造は一切変更しない） */
.theme-wakuwaku .price-row { font-size: 15.5px; }
.theme-wakuwaku .price-row__price { font-size: 1.05rem; }
.theme-wakuwaku .price-row--rank1 .price-row__name { font-size: 1rem; }

/* 15-3. 工程アコーディオン（process-item）・FAQ（faq-item）は
   6.カードの角丸ルールに合流済み。見出しの「Q」「STEP」マーカーは既存のまま維持 */

/* 15-4. クーポンカード：数字を丸ゴシックで少し大きく・角丸は6.に合流済み */
.theme-wakuwaku .coupon-card__price b { font-family: var(--font-rounded); }

/* 15-5. 30秒診断カード：結果の価格を丸ゴシックに統一 */
.theme-wakuwaku .shindan-result__price { font-family: var(--font-rounded); }

/* 15-6. kiwami.html の状況チップ・価値の積み上げも角丸を大きめに */
.theme-wakuwaku .kiwami-chip,
.theme-wakuwaku .kiwami-situ {
  border-radius: 999px;
}
.theme-wakuwaku .kiwami-value-total {
  border-radius: 20px;
}
.theme-wakuwaku .kiwami-value-total__final b { font-family: var(--font-rounded); }