/* =========================================================
   FVオファー帯（男性 hrm2）
   2026-11 FVオファー帯ABの勝ちパターンを本実装へ移行（ab-test.css から移設。値は無変更）
   読み込み: parts/common/extbanner_offer.php
   対象: header_basic に header_banner => common/extbanner_offer を渡した入口（gl／ms）
   女性 doctor は AB 継続中のため lp-aga-ladies/css/ab-test.css のまま
   ========================================================= */

/* 告知帯（SP ≤768px）: 1行表示。文字サイズは画面幅に比例（vw）させ、320〜768pxで1行に収める
   幅の目安 … 1行目 全角21字×3.5vw ＋「20％OFF」約4.3字×4.6vw ≒ 93vw（左右余白6pxずつ）
   元の指定差 … 男性=2つともinline 14px／女性=1つ目block 15px・2つ目inline 14px → 男女とも inline に揃える
   数値は body の変数だけ触る。MVの位置補正も同じ変数から計算する：
     MV上余白 = 元の上余白 − 消した電話CTAの高さ − 元の告知帯の高さ ＋ 新しい帯の高さ
   幅ごとに違うのは --fv-offer-mv-base / --fv-offer-tel-h / --fv-offer-old-h の3つだけ */
@media only screen and (max-width: 768px) {
  body:has(.fv-offer-ab) {
    --fv-offer-fs1: clamp(10px, 3.5vw, 16px);  /* 「1週間以内に〜総額から」 */
    --fv-offer-fs2: clamp(13px, 4.6vw, 22px);  /* 「20％OFF」 */
    --fv-offer-lh: 1;                           /* 大小の文字が混ざるため1にして上下の空きを均等にする */
    --fv-offer-pad-t: 6px;                      /* 帯の上余白（見た目で揃わなければ上下別に調整） */
    --fv-offer-pad-b: 6px;                      /* 帯の下余白 */
    --fv-offer-fs1-y: -2px;                     /* 「1週間〜から」の縦位置の微調整（−で上へ。20％OFFと見た目で揃える） */
    /* 481〜768px（601〜768も同値: MV上余白0・元の告知帯は非表示・電話CTA同寸） */
    --fv-offer-mv-base: 0px;                    /* .mv__renew 元の margin-top（指定なし） */
    --fv-offer-tel-h: 88px;                     /* 電話CTA（style.css: 余白15px×2＋42px＋16px） */
    --fv-offer-old-h: 0px;                      /* 元の告知帯（renew 1400px以下で非表示） */
  }
  .header__new.fv-offer-ab {
    display: block;            /* 元の告知帯は 481〜1400px で非表示のため出す */
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    margin: 0;
    padding: var(--fv-offer-pad-t) 6px var(--fv-offer-pad-b);
    position: relative;
    left: 0;
    font-size: var(--fv-offer-fs2);  /* 行の基準を大きい方の文字に合わせる（親の18pxで行が膨らまないように） */
    line-height: var(--fv-offer-lh);
    white-space: nowrap;
  }
  .header__new.fv-offer-ab > .header__schedule,
  .header__new.fv-offer-ab > .header__text {
    display: inline;
    padding: 0;
    line-height: var(--fv-offer-lh);
  }
  .header__new.fv-offer-ab > .header__schedule {
    font-size: var(--fv-offer-fs1);
    position: relative;
    top: var(--fv-offer-fs1-y);
  }
  .header__new.fv-offer-ab > .header__text {
    font-size: var(--fv-offer-fs2);
  }

  /* MVの位置補正
     ≤600 のMVは中身が absolute/top・margin-top の固定値（ヒロミ写真 481〜600=margin-top:190px／≤480=top:80px）で、
     ヘッダーからはみ出した 告知帯＋電話CTA＋4ボタン の下に来る前提。
     MV一枚画像化AB（.mv-doctor）は .mv__renew を margin:0 で組み直すため対象外 */
  body:has(.fv-offer-ab) .mv__renew:not(:has(.mv-doctor)) {
    margin-top: calc(
      var(--fv-offer-mv-base)
      - var(--fv-offer-tel-h)
      - var(--fv-offer-old-h)
      + var(--fv-offer-pad-t) + var(--fv-offer-pad-b)
      + var(--fv-offer-fs2) * var(--fv-offer-lh)  /* 1行の高さ＝大きい方の文字×行高 */
    );
  }
}
@media only screen and (max-width: 480px) {
  body:has(.fv-offer-ab) {
    --fv-offer-mv-base: 80px;                   /* .mv__renew margin-top:80px（renew ≤480） */
    --fv-offer-tel-h: 54px;                     /* 電話CTA（style.css ≤480: 余白5px×2＋32px＋12px） */
    --fv-offer-old-h: 28px;                     /* 元の告知帯 height:28px（renew ≤480） */
  }
}

/* SPの電話CTA「まずは電話問診 0120-433-488」＋受付時間（header .header__tel.sp）を非表示
   ※PCヘッダー右端の li.header__item--tel と、SPの4ボタン .header__nav--sp1 は残す */
body:has(.fv-offer-ab) .header__tel {
  display: none;
}

/* PC（1401px以上）: 告知帯はロゴとナビの間に入るため、1行目を「〜方は」で改行して幅を抑える
   （769〜1400 は非表示／≤768 は1行表示のため改行しない） */
.fv-offer-ab__br {
  display: none;
}
@media only screen and (min-width: 1401px) {
  .fv-offer-ab__br {
    display: inline;
  }
}

/* PC（1401px以上）: 帯が広がった分、右のナビを縮めて1列に収める
   元は .header__renew が flex-wrap:wrap のため、入りきらないとナビが次の行に落ちる。
   → 折り返しをやめ、ロゴ・帯・電話番号は固定、ナビ4項目（ご予約／クリニック情報／LINE／男女切替）だけ縮める */
@media only screen and (min-width: 1401px) {
  .header__renew:has(.fv-offer-ab) {
    flex-wrap: nowrap;
  }
  .header__renew:has(.fv-offer-ab) .header__title__renew,
  .header__renew:has(.fv-offer-ab) .header__new.fv-offer-ab,
  .header__renew:has(.fv-offer-ab) .header__nav__renew--pc .header__item--tel {
    flex-shrink: 0;
  }
  .header__renew:has(.fv-offer-ab) .header__nav__renew--pc,
  .header__renew:has(.fv-offer-ab) .header__nav__renew--pc .header__item1__renew,
  .header__renew:has(.fv-offer-ab) .header__nav__renew--pc .header__item__renew--line,
  .header__renew:has(.fv-offer-ab) .header__nav__renew--pc .header__item__renew--ladies {
    flex-shrink: 1;
    min-width: 0;
  }
}
/* 1401〜1600px: 男女切替ボタンが縮むので、イラストを ≤1400 と同じサイズにして文字との重なりを避ける */
@media only screen and (min-width: 1401px) and (max-width: 1600px) {
  .header__renew:has(.fv-offer-ab) .header__nav__renew--pc .header__item__renew--ladies a img {
    left: 6px;
    width: 60px;
  }
}

/* 「1週間以内に〜総額から」を太字に（元は renew の font-weight:400） */
.header__new.fv-offer-ab > .header__schedule {
  font-weight: bold;
}

/* PC（1401px以上）: 高さ80pxの箱の中で文字が上寄せになるため、上下中央に揃える */
@media only screen and (min-width: 1401px) {
  .header__new.fv-offer-ab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}