/* ========================================
   S01 ヒーロー（FV・3バッジ・対応4カード・CTA）
   Locofy実順序：エリアバッジ→メインコピー→価格カード→3バッジ→サブコピー→CTA→症状ブロック
   ======================================== */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* Figma 2026-07-30（旧20） */
  padding: 24px 16px 72px; /* 2026-08-01ユーザー指定：下72px（保証バンドの吹き出し-60px分を確保・旧40） */
  background: var(--grad-hero);
  text-align: center;
}

.hero > * { position: relative; z-index: 3; }
/* sr-onlyはフロー外に置く（.hero > * のposition上書きでflexアイテム化＝gap24px分ズレるのを防ぐ） */
.hero > .sr-only { position: absolute; }

/* 背景写真レイヤー（414×427・z0）＋洗濯機写真2点：画像化予定＝チェック柄
   ※.hero > * より高い詳細度で absolute を確実に効かせる */
.hero .hero-bg-photo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* 書き出し実画像=390×427基準（旧推定414pxを是正・2026-07-16） */
  height: 427px;
  z-index: 0;
  object-fit: cover;
}
/* 洗濯機写真：2点→1枚に統合（Figma Group2688:38・2026-07-16）
   レンダリング実寸=165.5×153。画像右端まで洗濯機本体が写っているため、
   中央基準(left)だと390px以下で右が見切れる→右端基準に変更（2026-07-21） */
.hero .hero-machine {
  position: absolute;
  top: 8px; /* 2026-08-12ユーザー指定：10px下げ（旧-2px） */
  left: calc(50% + 54px);
  width: 163px;
  height: auto;
  z-index: 1;
}

/* ── FV上部4点（エリアバッジ→メインコピー→価格カード→3バッジ）──
   2026-08-02：絶対配置(top固定)をやめ通常フローへ。.hero の gap:24px で常に24px間隔を保つ。
   ⚠️画像には白フチ・影が焼き込まれているため、その余白ぶんを負マージンで相殺して
     「見た目の間隔」が24pxになるようにする（余白率はcanvasでの実測値）。
   ※パーセント指定のマージンは .hero のコンテンツ幅(100vw−32px)を基準に解決される＝画像幅に比例する */
.hero .hero-area-badge {
  align-self: flex-start;
  margin-left: -20.4px; /* コンテンツ左端16px → 画面左-4.4pxへ（左スピル4.4px込みの書き出し） */
  margin-bottom: -6px; /* 画像下端12.5%＝影の余白（47.9px×0.125）を相殺 */
  width: 261.2px;
  height: auto;
}
/* メインコピー＝画像化（2026-07-30 ユーザー指定で画像方式に戻す）
   Figma 2223:60「キャッチコピー」（-8度スキュー・白フチ・影を焼き込み）
   焼き込み余白の実測：左2.419% 右2.823% 上下7.83% → 字面が左右16px・上下24pxに揃うよう外へ広げる */
.hero .hero-maincopy {
  /* ⚠️align-items:center のままだと負マージンぶん中央寄せが狂うため左端基準にする */
  align-self: flex-start;
  width: calc(100% * 1.0553); /* 字面幅を(100vw−32px)にするための画像幅 */
  max-width: none; /* ⚠️base.cssの img{max-width:100%} が328pxに切り詰めるため解除 */
  height: auto;
  margin-left: -2.5527%;
  margin-right: -2.979%;
  margin-top: -2.5544%; /* 上下の焼き込み余白（画像高の7.83%）を相殺 */
  margin-bottom: -2.5544%;
}
.hero .hero-person {
  position: absolute;
  top: 191px; /* 2026-08-12ユーザー指定：8px下げ（旧183px） */
  left: calc(50% + 36px);
  width: 174px;
  /* 2026-08-12ユーザー指定：下に5pxはみ出るため底を5pxトリミング（自然高240px→235px・object-fitで下端をカット） */
  height: 235px;
  object-fit: cover;
  object-position: top;
  z-index: 1;
}
/* 波トランジション（SVG・人物の足元に被せる）
   ※SVGは width:100% で高さが画面幅に比例するため、top固定だと背景写真の下端(427px)とズレる。
     「下端を背景写真の下端に合わせる」＝top:427px + translateY(-100%) で全幅に追従させる */
.hero .hero-wave {
  position: absolute;
  top: 427px;
  transform: translateY(-100%);
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
}

/* ※旧 margin-top:343px は 2026-08-02 のフロー化で不要（.hero の gap:24px が間隔を担う） */

/* ── 3バッジ（白円×3・テキストはHTML実装／月桂樹あしらいは画像予定） ── */
.hero-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 354px;
  max-width: 100%;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}
/* バッジ＝画像化（2026-07-16・Figma2266:917 月桂樹入り・影はCSS側drop-shadow）
   ※月桂樹素材の青背景が四隅に残るため円形クリップ必須 */
.hero-badge {
  /* 2026-08-12：固定110x110を撤去（幅はfluid.cssのflex:1 1 0で可変・gap12pxのみ固定） */
  flex-shrink: 0;
  border-radius: 50%;
}

/* ========================================
   2026-08-10 エアコン福岡v1：S01コード実装（Figma 2989:505準拠）
   波の位置・heroパディング・人物写真・3バッジは洗濯機v2のまま変更しない
   ======================================== */
.hero { gap: 20px; } /* 24→20（2026-08-10決定） */

/* エアコン製品写真（Figma 2989:1332「Rectangle 100」 180x97 @x217,y6）
   2026-08-17：影なしで再ベイク（360x194@2x）し、影はCSSで再現＝Figma DROP_SHADOW(0,4,blur10,#000 25%)
   ※画像はアルファ付きなので drop-shadow はエアコンの輪郭に沿う（Figmaと同じ挙動） */
.hero .hero-machine {
  width: 180px;
  left: calc(50% + 22px);
  top: 6px; /* 2026-08-17 Figma実測y=6（旧8px） */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}


/* ── お約束カード＝1枚画像化（2026-08-10・Figma 2990:1334ベイク版。旧2層+テキスト実装を置換） ── */
.hero-promise-full {
  display: block;
  width: 100%; /* 2026-08-12ユーザー指定：固定358pxキャップを撤去しvw追従 */
  height: auto;
  position: relative;
  margin-bottom: -68px; /* 画像高189px・症状カードをカード上端+141pxに重ねる（gap20込み） */
}

/* ── 2026-08-17 Figma実測で全面再計算（エリアバッジ2989:571・メインコピー2989:568・価格カード2989:517） ──
   Figma 2989:505（390幅）でのbbox実測：
     エリアバッジ  x=-6   y=24   256.85x41.98
     キャッチコピー x=10   y=81   371x115.08
     価格カード    x=18   y=216  355x112
     3バッジ       x=18   y=348  354x110
   ＝要素間ギャップは バッジ↔コピー15px、以降すべて20px（.hero の gap:20px と一致）。
   ⚠️ベイク画像には影が焼き込まれているものがあるため、そのスピルぶんを負マージンで相殺し
     "bbox（字面）"が上の座標に来るようにする。%はコンテンツ幅(100vw−32px)基準で解決＝可変幅に追従。 */

/* エリアバッジ：2026-08-17に影なしで再ベイク（514x84@2x＝スピル0）。白影はCSSで再現 */
.hero .hero-area-badge {
  align-self: flex-start;
  width: 71.746%; /* 256.85px ÷ 358px */
  max-width: none;
  height: auto;
  margin-left: -6.1453%; /* 帯左端を hero内x=-6 へ（16px − 22px） */
  margin-bottom: -1.3966%; /* -5px：次のコピー字面まで15pxにする（gap20 − 5） */
  filter: drop-shadow(1px 2px 2px #fff); /* Figma DROP_SHADOW(1,2,blur2,#FFF 100%) */
}
/* メインコピー：影込みベイク768x258（render 767.33x257.66@2x）
   bbox 741.92x230.15@2x ＝ スピル@1x 左8.235 上3.265 右4.475 下10.49 */
.hero .hero-maincopy {
  align-self: flex-start;
  width: 107.182%; /* 字面幅が371pxになる画像幅 383.71px */
  max-width: none; /* base.cssのimg{max-width:100%}を解除 */
  height: auto;
  margin-left: -3.9765%; /* -14.236px：字面左端を x=10 へ */
  margin-right: -3.2050%; /* -11.474px */
  margin-top: -0.9120%; /* -3.265px */
  margin-bottom: -2.9302%; /* -10.49px */
}
/* 価格カード：2026-08-17に再ベイク（710x246@2x。旧710x256は影の仕様変更前で古かった）
   bbox 710x224@2x ＝ スピル@1x 上6 下4.82・左右0 */
.hero .hero-price-card-img {
  align-self: flex-start;
  width: 99.162%; /* 355px ÷ 358px */
  max-width: none;
  height: auto;
  margin: -1.6760% 0 -1.3464% 0.5587%; /* 上-6px／下-4.82px／左+2px（x=18へ） */
}

/* ── 症状カード＝1枚画像化（2026-08-10・Figma 2989:590影なしベイク。影はCSSで再現） ── */
.care-full {
  display: block;
  width: 100%; /* 2026-08-12ユーザー指定：固定358pxキャップを撤去しvw追従 */
  height: auto;
  position: relative;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #1E7FC2; /* Figma DROP_SHADOW(4,4,blur0,#1E7FC2) */
}

/* ── 3バッジ＝個別透過ベイク＋CSS影（2026-08-10・Figma 2989:543/551/558） ──
   Figma DROP_SHADOW: バッジ1=(0,2,b10) / バッジ2・3=(0,4,b10)・色#0E3A66 25% */
/* ⚠️幅は fluid.css の .hero-badge（カラム幅で縮む正円）に任せる＝ここで width を指定しない
   （.hero .hero-badge の詳細度で上書きすると375px幅で溢れる） */
.hero-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%; /* 2026-08-12ユーザー指定：固定354pxキャップを撤去しvw追従（左右16pxはheroのpaddingで担保） */
}
/* Figma実測の影：バッジ1=(0,2,b10) / バッジ2・3=(0,4,b10)・#0E3A66 25% */
/* 2026-08-12：シャドウ統一（旧：バッジごとにY2/Y4・紺色の個別値） */
.hero-badge { filter: drop-shadow(var(--shadow-card)); }

/* ── ヒーロー背景（2026-08-10・Figma 2989:505 fillsを同じ重ね順で再現） ──
   Figmaは配列の後ろが上／CSSのbackgroundは先頭が上：
   [上] GRADIENT_LINEAR 100%：#1E7FC2 49.04% → #FFFFFF(a50) 84.13%（上→下）
   [下] IMAGE opacity 0.5：vw幅の等倍高さ・セクション下揃え
   ※画像の50%不透明は「白50%のベール」を画像の直上に重ねて再現（下地は白） */
.hero {
  background:
    linear-gradient(180deg,
      #1E7FC2 0%,
      #1E7FC2 49.04%,
      rgba(255, 255, 255, 0.5) 84.13%,
      rgba(255, 255, 255, 0.5) 100%),
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    url(../../images/s01_hero/sky-bg.webp) center bottom / 100% auto no-repeat,
    #fff;
  padding-bottom: 80px; /* 2026-08-10：40→60→80px */
}
/* 白タイル壁写真は上部レイヤーとして復活（2026-08-10：青空は下部・壁紙は上部で共存） */

/* ── S01 CTA（2026-08-10・Figma 2989:616 全深度準拠） ──
   構成：罫線付きリード → 電話ボタン → フォームボタン → 夏期受付時間
   Frame460: VERTICAL gap32 pad上12 / S01-CTA: gap16 */
/* 2026-08-13 Figma 2989:617 再取得：全体gap24・pad上24。
   中身は[リード＋受付時間]=gap12 と [電話＋フォーム]=gap16 の2グループ構成に変更 */
.cta-stack--hero {
  gap: 24px;
  padding-top: 24px;
}
.cta-lead-group,
.cta-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.cta-lead-group { gap: 12px; }
.cta-btn-group { gap: 16px; }
/* リード「お急ぎの方､ご相談はコチラから」＋左右20pxの紺罫線（Figma 3069:251） */
.cta-lead-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-navy, #0E3A66);
  white-space: nowrap;
}
.cta-lead-rule::before,
.cta-lead-rule::after {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--c-navy, #0E3A66);
  border-radius: 1px; /* Figma strokeCap: ROUND */
  flex-shrink: 0;
}
/* Figma実測の傾き：左＝-60°（＼）／右＝-120°（／） */
.cta-lead-rule::before { transform: rotate(60deg); }
.cta-lead-rule::after { transform: rotate(-60deg); }
/* ボタン色・影（2026-08-12ユーザー指定：電話CTAは#FF5C5Cで全箇所統一／影 0 4 10 rgba(0,0,0,.25)） */
.cta-stack--hero .cta-pill--tel { background: var(--c-cta-tel); }
.cta-stack--hero .cta-pill--form { background: var(--c-primary, #1E7FC2); }
.cta-stack--hero .cta-pill {
  box-shadow: var(--shadow-card); /* 2026-08-12：シャドウ統一（旧0 4px 10px） */
}
/* 夏期受付時間（Figma 3069:268・22px Bold・上32px＝Frame460のgap32） */
.cta-hours {
  margin: 0; /* 2026-08-10：ボタン群の上へ移動・間隔はgap16に一本化 */
  font-size: 20px; /* Figma 3069:268（旧22px） */
  font-weight: 700;
  line-height: 22px;
  color: var(--c-navy, #0E3A66);
  text-align: center;
  white-space: nowrap;
}