/* ==========================================================
   lp-hero-v2.css — トップページ Hero V2 (LOCKED)

   ルール:
   - 本ファイルは index.html(トップページ)のみが読み込む。
     下層16ページは css/style.css のみを読み込むため影響を受けない。
   - すべてのセレクタを `.lp-hero-v2` 配下にスコープする。
     Hero 以外(Header / Builder / Preview / 下部セクション)へは波及しない。
   - Header は LOCK 済み。本ファイルは Header に一切触れない。
   - css/lp-builder-v2.css (commit e2be05d) には触れない。

   視覚権威:
     reference/desktop-master-v2-header-hero-LOCKED.png  (1440 x 853, 1:1)
     reference/hero-right-authority-v2.png               (右ビジュアル唯一の原典)
   ========================================================== */

/* ---------- 共通(全幅) — 旧Heroの装飾を除去 ---------- */

/* 旧: ピンクの radial-gradient 背景 + 白いアーチ装飾 → 権威画像には存在しない */
.hero.lp-hero-v2 {
  position: relative;
  overflow: hidden;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-font);
}
.hero.lp-hero-v2::before { content: none; }

/* 旧: hero-visual の ✦ 装飾 → 権威画像(右ビジュアル)に内包されるため除去 */
.lp-hero-v2 .hero-visual::before,
.lp-hero-v2 .hero-visual::after { content: none; }
.lp-hero-v2 .hero-visual { min-height: 0; }

.lp-hero-v2 .hv2-hero-art {
  display: block;
  width: 100%;
  height: auto;
}

.lp-hero-v2 h1 {
  color: var(--lp-text);
  font-weight: 700;
  letter-spacing: 0;
}
.lp-hero-v2 h1 span { color: var(--lp-coral); }

.lp-hero-v2 .hero-lead {
  color: var(--lp-text);
  font-weight: 500;
}

/* 特長カード 4枚 — アイコン + ラベルの縦積み */
.lp-hero-v2 .hero-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.lp-hero-v2 .hero-badges li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 16px 8px;
  background: var(--lp-surface);
  border: 1px solid #f3ece9;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(130, 110, 105, 0.13);
  color: var(--lp-text);
  font-weight: 700;
  text-align: center;
}
.lp-hero-v2 .hero-badges li::before { content: none; }

.lp-hero-v2 .hv2-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}
.lp-hero-v2 .hv2-icon svg { width: 100%; height: 100%; }
.lp-hero-v2 .hv2-icon-yen {
  color: var(--lp-coral);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}
.lp-hero-v2 .hv2-badge-label {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* 主CTA 1本のみ — グラデーションをやめ、権威画像のフラットなコーラルへ */
.lp-hero-v2 .hero-actions { margin-top: 24px; }
.lp-hero-v2 .hv2-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--lp-coral);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(224, 96, 90, 0.26);
}
.lp-hero-v2 .hv2-cta:hover { background: var(--lp-coral-strong); }
.lp-hero-v2 .hv2-cta-paw { fill: #fff; flex: none; }

/* ==========================================================
   Desktop (1320px 以上) — 1440px の権威画像に一致させる実測値

   権威画像 reference/desktop-master-v2-header-hero-LOCKED.png (1440x853)
   から採寸した ink 位置:
     Header 下罫線 y=99 / Hero 上端 y=100 / 画像下端 y=853 → Hero 高 753px
     H1   1行目 ink y187-245 x59-533 / 2行目 y271-329 (送り84px)
     本文 1行目 ink y366-389 / 2行目 y408-431 (送り42px)
     カード帯 y481-650 (高170) / x53-201,231-379,409-557,587-735 (幅149 間隔29)
     CTA  x57-645 (588x96) y695-791
     右ビジュアル bbox x761-1435 y166-619 (674x453)
   ========================================================== */
@media screen and (min-width: 1320px) {

.hero.lp-hero-v2 {
  padding: 0;
  min-height: 753px;
}

/* Header と同じ有効コンテンツ幅(左右52px) */
.lp-hero-v2 .container {
  max-width: 1440px;
  padding-left: 52px;
  padding-right: 52px;
}

/* 左カラムのみのフローに戻し、右ビジュアルは Hero 基準で絶対配置する
   (権威画像では右ビジュアルが 1440px コンテンツ枠の外側まで届くため) */
.lp-hero-v2 .hero-grid {
  display: block;
  gap: 0;
}
.lp-hero-v2 .hero-copy {
  max-width: none;
  width: 735px;
}

/* H1: 60px / line-height 1.40 (送り84px) / 1行目 ink 天端 y=187 */
.lp-hero-v2 h1 {
  margin: 0 0 0 4px;
  padding-top: 75px;
  font-size: 60px;
  line-height: 1.4;
}

/* 本文: 22.5px / 送り42px / 1行目 ink 天端 y=366 */
.lp-hero-v2 .hero-lead {
  max-width: none;
  margin: 14px 0 0 5px;
  font-size: 22.5px;
  line-height: 1.867;
}

/* カード: 4枚 149x170 / 間隔29 / 帯 y481-650 */
.lp-hero-v2 .hero-badges {
  width: 683px;
  margin: 40px 0 0 1px;
  grid-template-columns: repeat(4, 149px);
  gap: 29px;
}
/* 権威画像ではアイコン天端(y498)とラベル天端(y592)が4枚とも揃う。
   ラベルが1行のカードと2行のカードで縦位置がずれないよう、
   中央揃えではなく上揃え + 固定の間隔で組む。 */
.lp-hero-v2 .hero-badges li {
  height: 170px;
  justify-content: flex-start;
  gap: 12px;
  padding: 17px 6px 12px;
  border-radius: 16px;
  box-shadow: 0 4px 13px rgba(130, 110, 105, 0.14);
}
.lp-hero-v2 .hv2-icon { width: 78px; height: 78px; }
/* ¥0 は他アイコンより光学的に下がった位置に置かれている (ink y521-563) */
.lp-hero-v2 .hv2-icon-yen { font-size: 56px; padding-top: 10px; }
.lp-hero-v2 .hv2-badge-label { font-size: 18px; line-height: 1.5; }

/* CTA: 588 x 96 / 左 x=57 / 上 y=695 */
.lp-hero-v2 .hero-actions { margin: 44px 0 0 5px; }
.lp-hero-v2 .hv2-cta {
  width: 588px;
  height: 96px;
  min-height: 0;
  padding: 0 36px 0 56px;
  justify-content: space-between;
  font-size: 25.5px;
}
.lp-hero-v2 .hv2-cta-paw { width: 38px; height: 38px; }

/* 右ビジュアル: hero-right-authority-v2.png を 0.47869 倍(=735px幅)で、
   Hero 上端から 44px、1440px 基準で左 723px に配置する。
   透明余白を含めた画像右端は 1458px となるが、
   .lp-hero-v2 の overflow:hidden で視覚的な影響なくクリップされる。 */
.lp-hero-v2 .hero-visual {
  position: absolute;
  top: 44px;
  left: calc(50% + 3px);
  width: 735px;
  margin: 0;
  pointer-events: none;
}

}

/* ---------- 1319px 以下 — 既存モバイル挙動の保守的な引き継ぎ ---------- */
@media (max-width: 1319px) {
  .hero.lp-hero-v2 { padding: 34px 0 44px; }
  .lp-hero-v2 .hero-grid { align-items: center; }
  .lp-hero-v2 h1 { font-size: clamp(1.9rem, 5.4vw, 3.2rem); line-height: 1.35; }
  .lp-hero-v2 .hero-lead { margin-top: 18px; font-size: 1rem; line-height: 1.9; }
  .lp-hero-v2 .hero-visual { max-width: 620px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .lp-hero-v2 .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .lp-hero-v2 .hero-copy { max-width: 720px; margin: 0 auto; text-align: center; }
  .lp-hero-v2 .hero-badges { max-width: 560px; margin-left: auto; margin-right: auto; }
  .lp-hero-v2 .hero-actions { justify-content: center; }
}

@media (max-width: 600px) {
  .lp-hero-v2 h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .lp-hero-v2 .hero-lead { font-size: 0.95rem; }
  .lp-hero-v2 .hero-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lp-hero-v2 .hero-badges li { padding: 14px 6px; gap: 8px; }
  .lp-hero-v2 .hv2-icon { width: 44px; height: 44px; }
  .lp-hero-v2 .hv2-icon-yen { font-size: 32px; }
  .lp-hero-v2 .hv2-badge-label { font-size: 0.85rem; }
  .lp-hero-v2 .hv2-cta { width: 100%; padding: 0 20px; font-size: 1rem; }
}