/* ==========================================================================
   s-hero-03 — 施術詳細 MV（メインビジュアル）
   メタ情報ベース: バッジ・タイトル・価格・CTA・画像・クイック情報
   ========================================================================== */

.s-hero-03 {
  background: var(--color-bg);
}

/* ── 2カラム: テキスト左 + 画像右 ── */
.s-hero-03__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-3-xl) var(--space-3-xl) 0;
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: var(--space-4-xl);
  align-items: start;
}

/* ── バッジ行 ── */
.s-hero-03__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

/* ── 悩みタグ行（アウトライン） ── */
.s-hero-03__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-2-xl);
}

/* ── タイトル（h1はパンくず内、ここはp表示） ── */
.s-hero-03__title {
  font-size: var(--font-size-6-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

/* ── キャッチコピー — プライマリカラー ── */
.s-hero-03__catchcopy {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-xl);
}

/* ── 説明文 ── */
.s-hero-03__desc {
  font-size: var(--font-size-md);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2-xl);
}

/* ── 画像エリア ── */
.s-hero-03__media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.s-hero-03__media img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.s-hero-03__media-empty {
  width: 100%;
  min-height: 28rem;
  background: var(--color-bg-sub);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-hero-03__media-empty .material-icons {
  font-size: var(--icon-xl, 48px);
  color: var(--color-text-lighter, #ccc);
}

/* ================================================================
   価格エリア — 各プラン個別行 + 区切り線 + カラーコード
   ================================================================ */
.s-hero-03__prices {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-2-xl) var(--space-3-xl);
  margin-bottom: var(--space-2-xl);
}

.s-hero-03__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border-light, #e8e8e8);
}

.s-hero-03__price-row:first-child {
  padding-top: 0;
}

.s-hero-03__price-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.s-hero-03__price-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.s-hero-03__price-label .material-icons {
  font-size: var(--font-size-lg);
}

.s-hero-03__price-label--initial {
  color: var(--color-initial, #9b7bb8);
}

.s-hero-03__price-label--special {
  color: var(--color-limited, #d4546a);
}

.s-hero-03__price-label--monitor {
  color: var(--color-monitor, #8b6ba8);
}

.s-hero-03__price-label--regular {
  color: var(--color-text);
}

.s-hero-03__price-value {
  font-size: var(--font-size-3-xl);
  font-weight: var(--font-weight-bold);
}

.s-hero-03__price-value--initial {
  color: var(--color-initial, #9b7bb8);
}

.s-hero-03__price-value--special {
  color: var(--color-limited, #d4546a);
}

.s-hero-03__price-value--monitor {
  color: var(--color-monitor, #8b6ba8);
}

.s-hero-03__price-value--regular {
  color: var(--color-text);
  font-size: var(--font-size-xl);
}

.s-hero-03__price-tax-note {
  margin-top: var(--space-2-xs);
  text-align: right;
  font-size: var(--font-size-2-xs);
  color: var(--color-text-light);
}

/* ================================================================
   クイック情報 — 見出し＋内容の縦積みグリッド
   ================================================================ */
.s-hero-03__quick-info {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-2-xl) var(--space-3-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2-xl);
}

.s-hero-03__quick-item {
  display: grid;
  grid-template-columns: var(--font-size-xl) minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    ". value";
  column-gap: var(--space-xs);
  row-gap: var(--space-3-xs);
  align-items: center;
}

.s-hero-03__quick-item .material-icons {
  font-size: var(--font-size-xl);
  color: var(--color-text-light);
}

.s-hero-03__quick-icon {
  grid-area: icon;
  width: var(--font-size-xl);
  height: var(--font-size-xl);
  display: block;
}

.s-hero-03__quick-label {
  grid-area: label;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  white-space: nowrap;
}

.s-hero-03__quick-value {
  grid-area: value;
  min-width: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* ================================================================
   CTA — inner幅に揃えた 3カラムバー + サブテキスト
   ================================================================ */
.s-hero-03__cta {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-2-xl) var(--space-3-xl) var(--space-3-xl);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

/* 電話2系統ぶんボタンが4つになるため、幅が取れるときだけ1行4カラムにする。 */
@media (min-width: 1024px) {
  .s-hero-03__cta {
    grid-template-columns: repeat(4, 1fr);
  }
}

.s-hero-03__cta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: center;
  transition: opacity var(--transition-fast, 0.2s);
}

.s-hero-03__cta-btn:hover {
  opacity: 0.85;
}

.s-hero-03__cta-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4-xs) var(--space-xs);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: inherit;
}

/* 電話は美容診療・保険診療の2系統。狭い幅では区分ラベルを次行へ折り返す。 */
.s-hero-03__cta-note {
  font-size: var(--font-size-2-xs);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-normal);
}

.s-hero-03__cta-main .material-icons {
  font-size: var(--font-size-2-xl);
}

.s-hero-03__cta-icon {
  width: var(--font-size-2-xl);
  height: auto;
  display: block;
}

.s-hero-03__cta-sub {
  font-size: var(--font-size-2-xs);
  line-height: var(--line-height-compact);
  opacity: 0.85;
  color: inherit;
}

.s-hero-03__cta-btn--booking {
  background: var(--color-primary-dark, #8b7b7b);
  color: var(--color-white);
}

.s-hero-03__cta-btn--line {
  background: var(--color-cta-line);
  color: var(--color-white);
}

.s-hero-03__cta-btn--phone {
  background: var(--color-text-dark, #3a3a3a);
  color: var(--color-white);
}

/* ================================================================
   MV スコープ: バッジ・タグのオーバーライド
   ================================================================ */

/* バッジ: MV内では角丸ピル + 色調整 */
.s-hero-03 .c-badge-01 {
  border-radius: var(--radius-pill);
}

/* 価格行アイコン: 白SVGをmaskで currentColor 化（ラベル色と同色） */
.s-hero-03__price-icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--space-lg);
  height: var(--space-lg);
  background-color: currentColor;
  mask: no-repeat center / contain;
  -webkit-mask: no-repeat center / contain;
}

.s-hero-03__price-icon--initial {
  mask-image: url("../../images/icon/icon--badge-initial.svg");
  -webkit-mask-image: url("../../images/icon/icon--badge-initial.svg");
}

.s-hero-03__price-icon--limited {
  mask-image: url("../../images/icon/icon--badge-limited.svg");
  -webkit-mask-image: url("../../images/icon/icon--badge-limited.svg");
}

.s-hero-03__price-icon--monitor {
  mask-image: url("../../images/icon/icon--badge-monitor.svg");
  -webkit-mask-image: url("../../images/icon/icon--badge-monitor.svg");
}

.s-hero-03__price-icon--regular {
  mask-image: url("../../images/icon/icon--price-regular.svg");
  -webkit-mask-image: url("../../images/icon/icon--price-regular.svg");
}

/* バッジ色は c-badge-01 の --color-badge-*（Figma正規値）に任せる。
   寸法のみFigma準拠（高さ22px = アイコン14px + 上下padding 4px） */
.s-hero-03 .c-badge-01--initial,
.s-hero-03 .c-badge-01--limited,
.s-hero-03 .c-badge-01--monitor {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3-xs) var(--space-sm);
}

/* タグ: MV内ではアウトライン(枠線)表示 */
.s-hero-03 .c-tag-01 {
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-pill);
  padding: var(--space-3-xs) var(--space-md);
  color: var(--color-text-light);
  background: transparent;
}

/* ================================================================
   SP レスポンシブ
   ================================================================ */
@media (max-width: 767px) {
  .s-hero-03__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2-xl);
    padding: var(--space-2-xl) var(--space-xl) 0;
  }

  .s-hero-03__title {
    font-size: var(--font-size-4-xl);
  }

  .s-hero-03__quick-info {
    padding: var(--space-xl) var(--space-xl);
  }

  .s-hero-03__cta {
    grid-template-columns: 1fr;
    padding: var(--space-xl) var(--space-xl) var(--space-2-xl);
  }

  .s-hero-03__prices {
    padding: var(--space-xl) var(--space-xl);
  }

  .s-hero-03__price-value {
    font-size: var(--font-size-2-xl);
  }
}