/* ============================================================================
   warm-theme.css — キャンジョ「あたたかいイラスト世界」テーマ
   火の山山麓キャンプ場のデザインDNA（極太ゴシック・濃紺・朱色・ピル型・
   フラットイラスト）を、キャンジョ流（女性らしいテラコッタ×桜×クリーム）に翻訳。
   既存 base/components/home.css の後に読み込み、変数とコンポーネントを上書きする。
   ========================================================================== */

:root {
  /* --- カラーパレット（女性らしい温かさ × 濃紺の読みやすさ） --- */
  --color-text: #24334d;             /* 黒 → 濃紺 */
  --color-text-light: #4a5670;
  --color-text-muted: #8c94a6;
  --color-bg: #fdfbf7;               /* クリーム白 */
  --color-bg-alt: #f6efe6;           /* 温かいベージュ */
  --color-bg-card: #ffffff;
  --color-bg-dark: #22334e;          /* ダーク面も黒→夜のネイビー */
  --color-primary: #c96f4a;          /* テラコッタ（主役の暖色） */
  --color-primary-light: #e29a77;
  --color-gold: #c96f4a;             /* 旧ゴールド → テラコッタへ寄せる */
  --color-gold-light: #e29a77;
  --color-border: #eadfd2;
  --color-border-light: #f2eadf;
  --warm-sky: #eaf3fa;               /* 空色 */
  --warm-sky-deep: #cfe4f2;
  --warm-sakura: #f5d9cd;            /* 桜・コーラルの淡色 */
  --warm-grass: #a8c39a;             /* 草原 */
  --warm-grass-deep: #86a877;
  --warm-navy: #24334d;
}

/* --- タイポグラフィ体系（fwh流）---
   ・日本語見出しが主役（本文の約2.4倍のジャンプ率）
   ・英語は小さな飾りラベルに降格
   ・本文は行間2.0でゆったり読ませる */
.hero-title { font-weight: 900; letter-spacing: 0.01em; font-size: clamp(2.3rem, 3.8vw, 3.4rem); }
.section-heading__en {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; line-height: 1.4;
}
.section-heading__ja {
  font-weight: 900; font-size: clamp(1.65rem, 2.6vw, 2.3rem);
  color: var(--color-text); line-height: 1.4; margin-top: var(--space-xs);
}
:root { --container-max: 1120px; }
/* 下層ページの見出しも同じ体系（英語=小ラベル・日本語=主役） */
.page-title-en {
  font-size: 0.85rem !important; font-weight: 700 !important;
  letter-spacing: 0.24em; color: var(--color-primary) !important; line-height: 1.4;
}
.page-title { font-size: clamp(2rem, 3.4vw, 2.8rem) !important; font-weight: 900 !important; }
.content-section h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 900; }
.partners-desc, .services-intro__desc, .incense-why__body p,
.promise-card__desc, .about-desc, .sns-hero__desc, .service-item__desc {
  font-size: 0.95rem; line-height: 2;
}
.promise-card__title, .service-item__title { font-size: 1.35rem; line-height: 1.5; }
.about-title, .cta-card__title, .promise-card__title { font-weight: 900; }
.section-heading__en { color: var(--color-primary); font-weight: 700; letter-spacing: 0.18em; }

/* --- ボタンを完全ピル型に --- */
.btn, .hero-cta, .floating-cta__btn, .hero-flagship__cta {
  border-radius: 999px !important;
}
.btn--primary, .hero-cta--primary, .hero-flagship__cta {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(201, 111, 74, 0.28);
}
.btn--primary:hover, .hero-cta--primary:hover, .hero-flagship__cta:hover {
  background: #b85f3c;
  box-shadow: 0 10px 26px rgba(201, 111, 74, 0.36);
}

/* --- カードはふんわり角丸に --- */
.promise-card, .leader-card, .case-card, .magazine-card, .sns-card,
.hero-flagship, .cta-card, .news-item, .service-item {
  border-radius: 22px;
}
.promise-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  box-shadow: 0 4px 20px rgba(36, 51, 77, 0.05);
  padding: var(--space-xl);
}
.promise-card__num { color: var(--color-primary); font-weight: 900; }

/* ============================================================
   HERO — ダーク写真 → 明るい空とイラストの世界
   ============================================================ */
.hero {
  background: linear-gradient(180deg, var(--warm-sky) 0%, #f3f8fc 46%, #eef4ea 78%, var(--warm-grass) 100%);
  min-height: 92vh;
}
.hero-bg { display: none; }        /* 水彩写真は引退 */
.hero-overlay { display: none; }   /* ダークオーバーレイ廃止 */

.hero-text { color: var(--warm-navy); }
.hero-label { color: var(--color-primary); font-weight: 700; letter-spacing: 0.22em; }
.hero-title { color: var(--warm-navy); }
.hero-title-accent { color: var(--color-primary); }
.hero-subtitle { color: var(--color-text-light); }
.hero-cta--secondary {
  background: #fff;
  color: var(--warm-navy);
  border: 2px solid var(--warm-navy);
  font-weight: 700;
}
.hero-cta--secondary:hover { background: var(--warm-navy); color: #fff; border-color: var(--warm-navy); }

.hero-flagship { box-shadow: 0 24px 60px rgba(36, 51, 77, 0.16); }
.hero-scroll-indicator__text { color: rgba(36,51,77,0.45); }
.hero-scroll-indicator__line { background: rgba(36,51,77,0.2); }

/* --- Heroの前景イラスト（丘・テント・焚き火・木・雲・鳥） --- */
.hero-scene {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  pointer-events: none; line-height: 0;
}
.hero-scene svg { width: 100%; height: auto; display: block; }
.hero-content { z-index: 2; }

/* --- 空レイヤー（雲と鳥はHero上部の"本物の空"に置く） --- */
.hero-sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sky-cloud {
  position: absolute; background: #fff; border-radius: 999px; opacity: 0.85;
  animation: cloudDrift 16s ease-in-out infinite alternate;
}
.sky-cloud--1 { width: 130px; height: 34px; top: 15%; left: 6%;
  box-shadow: 38px -16px 0 -6px #fff, -34px -10px 0 -10px #fff; }
.sky-cloud--2 { width: 170px; height: 40px; top: 9%; right: 20%; opacity: 0.7;
  box-shadow: 48px -18px 0 -8px #fff; animation-duration: 22s; animation-delay: -8s; }
.sky-cloud--3 { width: 90px; height: 26px; top: 6%; left: 38%; opacity: 0.55;
  box-shadow: -28px -10px 0 -6px #fff; animation-duration: 19s; animation-delay: -4s; }
.sky-birds { position: absolute; top: 20%; left: 57%; width: 84px; }
.bird { animation: birdFloat 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bird--2 { animation-delay: -2.2s; }
/* 太陽（火の山オマージュのテラコッタの陽） */
.hero-sun {
  position: absolute; top: 13%; right: 7%;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--color-primary); opacity: 0.9;
  animation: sunBreath 6s ease-in-out infinite;
}
@keyframes sunBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .hero-sun { animation: none; } }

@media (max-width: 767px) {
  /* モバイルでは太陽・鳥・雲はイラストSVG内に描くので、浮遊レイヤーは消す */
  .sky-cloud--1, .sky-cloud--2, .sky-cloud--3, .hero-sun, .sky-birds { display: none; }
  .svg-sun { animation: sunBreath 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

  /* ── モバイルFV最適化 ──
     長文を1行に絞り、イラストを大きく切り出して
     「テント・焚き火のいる世界」をファーストビューに入れる */
  .hero-subtitle__l1, .hero-subtitle__l3 { display: none; }
  .hero-subtitle { font-size: 0.95rem; line-height: 1.9; margin-bottom: var(--space-lg); }

  /* 帯状の全幅シーンはモバイルでは非表示にし、本文内のコンパクト版を主役に */
  .hero-scene { display: none; }
  .hero-scene--inline { display: block; margin: 4px 0 var(--space-md); line-height: 0; }
  .hero-scene--inline svg { width: 100%; height: auto; max-height: 200px; }
  .hero { padding-top: calc(var(--header-height) + var(--space-md)); padding-bottom: var(--space-2xl); }
  .hero-label { margin-bottom: var(--space-sm); }
  .hero-title { margin-bottom: var(--space-md); }
  .hero-subtitle { margin-bottom: var(--space-sm); }
  .hero-scroll-indicator { display: none; }
}
/* デスクトップではコンパクト版は出さない（従来の全幅シーンが主役） */
@media (min-width: 768px) { .hero-scene--inline { display: none; } }
/* 炎：ゆらめき */
.flame { animation: flameFlicker 0.9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.flame--inner { animation-duration: 0.7s; animation-delay: -0.3s; }
/* 煙：立ち上って消える（焚き火とお香、両方の煙に効く） */
.smoke { animation: smokeRise 4.2s ease-out infinite; transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; }
.smoke--2 { animation-delay: 1.4s; }
.smoke--3 { animation-delay: 2.8s; }
/* テントの旗：はためく */
.flag { animation: flagWave 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }

@keyframes cloudDrift { from { transform: translateX(0); } to { transform: translateX(46px); } }
@keyframes birdFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes flameFlicker {
  from { transform: scaleY(1) scaleX(1) rotate(-2deg); }
  to   { transform: scaleY(1.18) scaleX(0.94) rotate(2.5deg); }
}
@keyframes smokeRise {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  20%  { opacity: 0.55; }
  100% { transform: translateY(-54px) scale(1.25); opacity: 0; }
}
@keyframes flagWave { 0%,100% { transform: skewY(0deg); } 50% { transform: skewY(-7deg); } }

@media (prefers-reduced-motion: reduce) {
  .cloud, .bird, .flame, .smoke, .flag { animation: none; }
}

/* ============================================================
   セクションの表情
   ============================================================ */
.logo-section { background: #fff; }
.promises-section { background: var(--color-bg-alt); }
section.leadership-section { background: #fff; }
.incense-why { background: linear-gradient(180deg, #fdf9f4 0%, #f9efe7 100%); }
.services { background: var(--color-bg-alt); }
.stats-section { background: #fff; }
.media-section { background: var(--warm-sky) !important; }
.news-section { background: #fff; }
.partners-section.cases-section { background: var(--color-bg-alt); }
.magazine-preview { background: #fff; }
.sns-section { background: var(--warm-sky); }
.about-preview { background: #fff; }

/* 統計数字・強調 */
.stat-card__number { color: var(--warm-navy); }
.incense-why__stat-num { color: var(--color-primary); }
.sns-hero__number { color: var(--warm-navy); }

/* リーダーカードのタグをピルの桜色に */
.leader-card .leader-card__tags span {
  background: var(--warm-sakura);
  border: none;
  color: #9c4f33;
  border-radius: 999px;
}
.leader-card__role { color: var(--color-primary); }

/* メディアバッジもふんわり */
.media-badge { border-radius: 999px; }
.media-badge--product { background: var(--color-primary); }
.media-badge--stage { background: #7da26a; }
.media-badge--media { background: #5b87c5; }

/* CTA：夜のネイビー（星空の温かい夜） */
.cta-section { background: var(--warm-navy); }
.cta-section::before { opacity: 0.12; }
.cta-card { border-radius: 26px; }

/* フッターバー・フローティング */
#footer-contact-bar { background: #1b2940 !important; }

/* FAQカードも角丸に */
.faq-section details { border-radius: 18px !important; }

/* Hero下・LEADERSHIPの導線リンク */
.hero-doc-link {
  display: inline-block; margin-top: var(--space-lg);
  font-size: var(--text-sm); font-weight: 700; color: var(--warm-navy);
  text-decoration: none; border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px; transition: color .25s;
}
.hero-doc-link:hover { color: var(--color-primary); }
.leader-card__more {
  display: inline-block; margin-top: var(--space-md);
  font-size: 0.85rem; font-weight: 700; color: var(--color-primary);
  text-decoration: none;
}
.leader-card__more:hover { text-decoration: underline; }
.nav-doc { color: var(--color-primary) !important; font-weight: 700; }

/* ヘッダーのCTAをピル型テラコッタに */
.nav-cta {
  border-radius: 999px !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(201, 111, 74, 0.3);
}
.nav-cta:hover { background: #b85f3c !important; }

/* Hero本文がイラストと重ならないよう下に余白を確保しつつ、
   右のCRYSTALカードがヘッダーに めり込まない縦バランスに調整 */
@media (min-width: 1024px) {
  .hero-content { padding-top: 56px; padding-bottom: 150px; }
  .hero-flagship { max-width: 375px; justify-self: end; }
  .hero-flagship__media { aspect-ratio: 3 / 2; }
  .hero-flagship__body { padding: var(--space-lg) var(--space-xl); }
}
@media (min-width: 768px) and (max-width: 1023px) { .hero-content { padding-bottom: 150px; } }
@media (max-width: 767px) { .hero { padding-bottom: 110px; } }