/* ============================================================================
   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.7rem, 4.8vw, 4.3rem); line-height: 1.28; }
.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(2.1rem, 3.7vw, 3.25rem);
  color: var(--color-text); line-height: 1.32; margin-top: 0; letter-spacing: -0.015em;
}
:root { --container-max: 1120px; }

/* ── 左右マージンの漂うイラスト（Apple風スクロール視差） ── */
body { position: relative; }
.scroll-decor { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
/* 外側 = スクロール視差（GSAPがyを操作）／内側 = 風にゆれるアニメーション */
.decor { position: absolute; display: block; will-change: transform; }
.decor img { display: block; width: 100%; height: auto;
  animation: decorSway var(--dur, 9s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s); transform-origin: 50% 92%; }

@keyframes decorSway {
  from { transform: rotate(calc(var(--tilt) - 3.5deg)) translateY(0) scale(1); }
  to   { transform: rotate(calc(var(--tilt) + 3.5deg)) translateY(-10px) scale(1.03); }
}

.decor--1 { top: 13%; left: -0.8vw;  width: 150px; opacity: 0.55; --tilt: -7deg;  --dur: 8.5s;  --delay: -1s; }
.decor--2 { top: 30%; right: -0.8vw; width: 164px; opacity: 0.48; --tilt: 8deg;   --dur: 11s;   --delay: -3s; }
.decor--3 { top: 49%; left: 0.2vw;   width: 92px;  opacity: 0.5;  --tilt: -13deg; --dur: 9.5s;  --delay: -5s; }
.decor--4 { top: 64%; right: -0.6vw; width: 138px; opacity: 0.55; --tilt: 10deg;  --dur: 12s;   --delay: -2s; }
.decor--5 { top: 82%; left: -0.8vw;  width: 120px; opacity: 0.52; --tilt: 5deg;   --dur: 10.5s; --delay: -6s; }

@media (max-width: 1479px) { .scroll-decor { display: none; } }
@media (prefers-reduced-motion: reduce) { .decor img { animation: none; transform: rotate(var(--tilt)); } }

/* ── 脱AI: 英語の飾りラベルを全撤去し、日本語見出しだけで語る（エディトリアル） ── */
.section-heading__en, .page-title-en, .cp-section-en, .pf-header-en, .pf-sec-en { display: none !important; }
.page-title { font-size: clamp(2.5rem, 4.4vw, 3.9rem) !important; font-weight: 900 !important; line-height: 1.28; letter-spacing: -0.015em; }
.content-section h2 { font-size: clamp(1.85rem, 3.1vw, 2.6rem); font-weight: 900; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: var(--space-md); }
.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.5rem; line-height: 1.45; letter-spacing: -0.01em; }
.about-title, .cta-card__title, .promise-card__title { font-weight: 900; }
.about-title { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.35; letter-spacing: -0.015em; }
.cta-card__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.5; }
.leader-card__name { font-size: clamp(1.5rem, 2vw, 1.8rem) !important; }
.stat-card__number, .incense-why__stat-num { letter-spacing: -0.02em; }
.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背景に */
.hero-bg {
  display: block; inset: 0; opacity: 1;
  background: url('/assets/hero-painted.webp?v=20260724') center bottom / cover no-repeat;
  transform-origin: center bottom;
}
/* 左に薄いクリームのスクリムを敷き、濃紺テキストの可読性を確保 */
.hero-overlay {
  display: block; inset: 0;
  background: linear-gradient(100deg, rgba(253,251,247,0.82) 0%, rgba(253,251,247,0.55) 34%, rgba(253,251,247,0.12) 58%, rgba(253,251,247,0) 78%);
}
/* フラットSVGの前景シーン・空レイヤーは引退（ペインテッドに一本化） */
.hero-scene, .hero-sky { display: none !important; }
@media (max-width: 767px) {
  .hero-scene--inline { display: none !important; } /* ペインテッド背景に一本化 */
  .hero-bg { background-position: center bottom; }
  .hero-overlay { background: linear-gradient(180deg, rgba(253,251,247,0.9) 0%, rgba(253,251,247,0.62) 38%, rgba(253,251,247,0.22) 100%); }
}

/* ══════════════════════════════════════════════════════════════
   会社案内資料のダウンロード — メール1項目の軽いゲート
   ══════════════════════════════════════════════════════════════ */
.docgate[hidden] { display: none; }
.docgate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.docgate__backdrop { position: absolute; inset: 0; background: rgba(36, 51, 77, 0.42); animation: dgFade .25s ease both; }
.docgate__card {
  position: relative; width: 100%; max-width: 440px; background: #fff;
  border-radius: 24px; padding: 34px 32px 28px; box-shadow: 0 24px 60px rgba(36, 51, 77, 0.22);
  animation: dgPop .32s cubic-bezier(.4,.4,0,1) both;
}
.docgate__x {
  position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; line-height: 1;
  border: none; background: transparent; color: var(--color-text-muted); font-size: 26px;
  cursor: pointer; border-radius: 50%;
}
.docgate__x:hover { background: var(--color-bg-alt); color: var(--color-text); }
.docgate__title { font-size: 1.25rem; font-weight: 900; color: var(--warm-navy); line-height: 1.5; }
.docgate__lead { font-size: .9rem; line-height: 1.9; color: var(--color-text-light); margin-top: 10px; }
.docgate__label { display: block; font-size: .78rem; font-weight: 700; color: var(--color-text-light); margin: 22px 0 6px; }
.docgate__input {
  width: 100%; box-sizing: border-box; padding: 13px 16px; font-size: 1rem;
  border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg);
  color: var(--color-text); font-family: inherit;
}
.docgate__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(201,111,74,.14); }
.docgate__error { color: #b3402c; font-size: .8rem; margin-top: 8px; }
.docgate__hp { position: absolute; left: -9999px; }
.docgate__submit {
  display: block; width: 100%; box-sizing: border-box; margin-top: 18px; padding: 15px 20px;
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: .98rem;
  border: none; border-radius: 999px; cursor: pointer; font-family: inherit; text-align: center;
  text-decoration: none; box-shadow: 0 6px 18px rgba(201,111,74,.28); transition: background .25s, transform .25s;
}
.docgate__submit:hover { background: #b85f3c; transform: translateY(-2px); }
.docgate__submit:disabled { opacity: .6; cursor: default; transform: none; }
.docgate__note { font-size: .74rem; line-height: 1.8; color: var(--color-text-muted); margin-top: 16px; }
@keyframes dgFade { from { opacity: 0; } }
@keyframes dgPop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (max-width: 480px) { .docgate__card { padding: 30px 22px 24px; border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .docgate__backdrop, .docgate__card { animation: none; } }

/* ══════════════════════════════════════════════════════════════
   FVの動き — CSSのみ（JSライブラリ非依存・最初の描画から即再生）
   fill-mode: backwards → 万一アニメが動かなくても要素は必ず見える
   ══════════════════════════════════════════════════════════════ */
@keyframes fvUp    { from { opacity: 0; transform: translateY(18px); } }
@keyframes fvRight { from { opacity: 0; transform: translateX(30px) scale(0.97); } }
@keyframes fvDrift { from { transform: scale(1.03); } to { transform: scale(1.10) translate3d(-1.2%, -0.8%, 0); } }

.hero-label      { animation: fvUp .7s cubic-bezier(.4,.4,0,1) .05s backwards; }
.hero-title      { animation: fvUp .85s cubic-bezier(.4,.4,0,1) .14s backwards; }
.hero-subtitle   { animation: fvUp .85s cubic-bezier(.4,.4,0,1) .26s backwards; }
.hero-cta-group  { animation: fvUp .85s cubic-bezier(.4,.4,0,1) .38s backwards; }
.hero-doc-link   { animation: fvUp .85s cubic-bezier(.4,.4,0,1) .48s backwards; }
.hero-flagship   { animation: fvRight .95s cubic-bezier(.4,.4,0,1) .2s backwards; }
.hero-flagship__founder { animation: fvUp .6s cubic-bezier(.4,.4,0,1) backwards; }
.hero-flagship__founder:nth-child(1) { animation-delay: .62s; }
.hero-flagship__founder:nth-child(2) { animation-delay: .74s; }
.hero-scroll-indicator { animation: fvUp .8s cubic-bezier(.4,.4,0,1) .9s backwards; }
/* 背景の風景がごくゆっくり動き続ける（transformのみ＝GPU処理で軽い） */
.hero-bg { animation: fvDrift 28s ease-in-out infinite alternate; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .hero-label, .hero-title, .hero-subtitle, .hero-cta-group, .hero-doc-link,
  .hero-flagship, .hero-flagship__founder, .hero-scroll-indicator, .hero-bg { animation: 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; } }