/*
 * 定期便の導線バナー（トップ・商品ページ）。mu-plugins/astra-subscription-banner.php から読み込む。
 * 画像の上に HTML の文字とボタンを重ねる（画像に文字は焼き込んでいない）。
 * 文字は暗い余白に置き、足りないところだけ薄い半透明の下地と影で読みやすくしている。
 * 幅は container query（cqw）で追従する。767px 以下はスマホ（画像もSP用に切り替わる）。
 */
.astra-sbn{position:relative;display:block;width:100%;background:#000;color:#fff;overflow:hidden;container-type:inline-size;line-height:1.4}
.astra-sbn__img{display:block;width:100%;height:auto}
.astra-sbn__body{position:absolute;inset:0;display:flex;color:#fff;text-shadow:0 0 12px rgba(0,0,0,.55)}
.astra-sbn__title{margin:0;font-family:var(--astra-roboto),"Noto Sans JP",sans-serif;font-weight:300;letter-spacing:.04em;color:#fff}
.astra-sbn__lead{margin:0;font-family:var(--astra-gen-interface-jp),"Noto Sans JP",sans-serif;font-weight:400;color:#fff}
.astra-sbn__btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1.5px solid #4ec3e1;border-radius:60px;
  font-family:var(--astra-source-code-pro),"Noto Sans JP",monospace;font-weight:500;line-height:1;color:#4ec3e1;text-decoration:none;white-space:nowrap;
  background:rgba(0,0,0,.28);box-shadow:0 0 14px rgba(78,195,225,.45),inset 0 0 10px rgba(78,195,225,.18);text-shadow:none;transition:background-color .2s}
/* バナー全体をリンクにする透明な面。absolute で十分に広げ、.astra-sbn の overflow:hidden でバナーの枠に切り取る。
 * ★ fixed にすると画面全体を覆い、ページ中のどこを押しても /subscription/ へ飛んでしまう（10/13 本番で発生）。 */
.astra-sbn__btn::after{content:"";position:absolute;inset:-200vw;opacity:0}
.astra-sbn__btn:hover,.astra-sbn__btn:focus-visible{background:rgba(78,195,224,.2);color:#4ec3e1}
.astra-sbn__btn svg{flex:0 0 auto;height:auto}

/* ---- トップ ---- */
.astra-sbn--top .astra-sbn__body{align-items:center;justify-content:space-between;padding:0 clamp(24px,8cqw,140px) 2.2cqw}
.astra-sbn--top .astra-sbn__title{font-size:clamp(30px,3.9cqw,60px);line-height:1.2}
.astra-sbn--top .astra-sbn__lead{font-size:clamp(14px,1.35cqw,21px);margin-top:.7em}
.astra-sbn--top .astra-sbn__btn{min-width:clamp(160px,14.5cqw,230px);height:clamp(44px,3.9cqw,58px);padding:0 1.2em 0 1.6em;font-size:clamp(14px,1.25cqw,19px)}
.astra-sbn--top .astra-sbn__btn svg{width:clamp(34px,3.4cqw,52px)}
@media (max-width:767px){
  .astra-sbn--top .astra-sbn__body{flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:4.2cqw 5cqw 5.5cqw}
  .astra-sbn--top .astra-sbn__title{font-size:max(26px,6.9cqw)}
  .astra-sbn--top .astra-sbn__lead{font-size:max(13px,3.4cqw);margin-top:.35em}
  .astra-sbn--top .astra-sbn__btn{min-width:max(150px,38cqw);height:max(38px,9.4cqw);font-size:max(14px,3.6cqw);border-width:1px;padding:0 .9em 0 1.3em}
  .astra-sbn--top .astra-sbn__btn svg{width:max(32px,8cqw)}
}

/* ---- 商品ページ ---- */
.astra-sbn--pdp{margin-top:20px;border-radius:6px}
.astra-sbn--pdp .astra-sbn__body{display:block;padding:7cqw 3cqw 0 34cqw}
.astra-sbn--pdp .astra-sbn__title{font-family:var(--astra-gen-interface-jp),"Noto Sans JP",sans-serif;font-weight:700;font-size:max(14px,3.8cqw);line-height:1.25;letter-spacing:.02em}
.astra-sbn--pdp .astra-sbn__lead{font-size:max(12px,3cqw);margin-top:.35em;color:#f2f2f2}
.astra-sbn--pdp .astra-sbn__btn{background:rgba(6,4,20,.5);position:absolute;right:4cqw;bottom:6cqw;min-width:max(104px,27cqw);height:max(26px,7.2cqw);padding:0 .8em 0 1.1em;font-size:max(12px,2.9cqw);border-width:1px}
.astra-sbn--pdp .astra-sbn__btn svg{width:max(22px,5.6cqw)}
@media (max-width:767px){
  .astra-sbn--pdp{margin-top:16px}
  .astra-sbn--pdp .astra-sbn__body{padding-top:5cqw}
  .astra-sbn--pdp .astra-sbn__btn{bottom:4cqw;height:24px;min-width:100px;background:rgba(6,4,20,.6);font-size:12px}
}

/* ======== 初回限定50%OFF（文言・文字色・文字サイズ・位置・可読性のための下地） ======== */
.astra-sbn__eyebrow{margin:0;font-family:var(--astra-gen-interface-jp),"Noto Sans JP",sans-serif;font-weight:700;color:#8fe3f5;letter-spacing:.1em;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.7)}
.astra-sbn__title{display:flex;align-items:baseline;gap:.25em;margin:0;font-family:var(--astra-gen-interface-jp),"Noto Sans JP",sans-serif;font-weight:800;line-height:1;white-space:nowrap}
.astra-sbn__sub{font-weight:800}
.astra-sbn__off{font-style:normal;font-family:var(--astra-roboto),var(--astra-gen-interface-jp),"Noto Sans JP",sans-serif;font-weight:900;letter-spacing:-.01em;white-space:nowrap}
.astra-sbn__off small{font-size:.6em;font-weight:900;margin:0 .03em}
.astra-sbn__lead{font-weight:700}

/* ---- トップ PC：左の暗い余白へ。明るい水平線（弧）と製品に重ならない高さ・幅に収める ---- */
.astra-sbn--top .astra-sbn__body{padding:0 clamp(24px,8cqw,140px) 3cqw clamp(24px,6cqw,110px);
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.38) 30%,rgba(0,0,0,0) 46%)}
.astra-sbn--top .astra-sbn__eyebrow{font-size:clamp(14px,1.45cqw,22px);margin-bottom:.7em}
.astra-sbn--top .astra-sbn__title{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.6)}
.astra-sbn--top .astra-sbn__sub{font-size:clamp(20px,2.2cqw,34px)}
.astra-sbn--top .astra-sbn__off{font-size:clamp(54px,5.4cqw,86px);text-shadow:0 0 18px rgba(78,195,225,.7),0 1px 3px rgba(0,0,0,.8)}
.astra-sbn--top .astra-sbn__lead{font-size:clamp(16px,1.6cqw,25px);margin-top:.65em;letter-spacing:.06em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.7)}
.astra-sbn--top .astra-sbn__btn{font-size:clamp(14px,1.3cqw,20px);background:rgba(0,0,0,.5)}
@media (max-width:767px){
  .astra-sbn--top .astra-sbn__body{padding:2.2cqw 5cqw 5cqw;
    background:linear-gradient(180deg,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 50%)}
  .astra-sbn--top .astra-sbn__eyebrow{font-size:max(13px,3.4cqw);margin-bottom:.1em;line-height:1.2}
  .astra-sbn--top .astra-sbn__title{justify-content:center}
  .astra-sbn--top .astra-sbn__sub{font-size:max(16px,4.3cqw)}
  .astra-sbn--top .astra-sbn__off{font-size:max(40px,10.4cqw)}
  .astra-sbn--top .astra-sbn__lead{font-size:max(14px,3.6cqw);margin-top:.2em}
  .astra-sbn--top .astra-sbn__btn{font-size:max(14px,3.6cqw);background:rgba(0,0,0,.55)}
}

/* ---- 商品ページ：白文字をやめ、淡いシアンへ。文字の後ろに暗い半透明の下地を敷く ---- */
.astra-sbn--pdp .astra-sbn__body{padding:3.4cqw 3cqw 0 34cqw;
  background:linear-gradient(90deg,rgba(6,4,24,0) 0,rgba(6,4,24,0) 25%,rgba(6,4,24,.5) 36%,rgba(6,4,24,.56) 100%)}
.astra-sbn--pdp .astra-sbn__eyebrow{font-size:max(11px,3cqw);margin-bottom:.2em;letter-spacing:.05em}
.astra-sbn--pdp .astra-sbn__title{color:#b4f3ff;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.65)}
.astra-sbn--pdp .astra-sbn__sub{font-size:max(12px,3.2cqw)}
.astra-sbn--pdp .astra-sbn__off{font-size:max(26px,8.2cqw)}
.astra-sbn--pdp .astra-sbn__lead{font-size:max(11px,2.9cqw);margin-top:.35em;color:#e3f9fd;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.7)}
.astra-sbn--pdp .astra-sbn__btn{font-size:max(11px,2.8cqw);min-width:max(100px,26cqw);background:rgba(6,4,24,.78);color:#8fe3f5;box-shadow:0 0 10px rgba(78,195,225,.4)}
.astra-sbn--pdp .astra-sbn__btn svg{width:max(22px,5.6cqw)}
@media (max-width:767px){
  .astra-sbn--pdp .astra-sbn__body{padding-top:1.9cqw}
  .astra-sbn--pdp .astra-sbn__eyebrow{margin-bottom:0;line-height:1.15}
  .astra-sbn--pdp .astra-sbn__off{font-size:max(25px,7.8cqw)}
  .astra-sbn--pdp .astra-sbn__lead{letter-spacing:0;margin-top:.2em;line-height:1.2}
  .astra-sbn--pdp .astra-sbn__btn{font-size:11px;min-width:88px;height:22px;right:3cqw;bottom:2cqw;padding:0 .7em 0 .9em}
  .astra-sbn--pdp .astra-sbn__btn svg{width:20px}
}

/* ---- トップ：メインビジュアルとバナーの間の縦の空きを詰める ----
 * ヒーロー（.hero-image-wrapper）は画面いっぱいの高さ（100svh）で、PCは文字が縦の中央、SPは文字が
 * 下端から積まれている。高さを変えると文字・ボタンの位置が動くので、ヒーローには触らず、
 * バナーの上マージンだけで、ボタン下端からバナー上端までを詰める（ヒーローの空いた下端に重ねる）。
 *
 * 余白の決まり方（本番の実測。文字の下端〜ヒーロー下端）
 *   PC（1024px〜）: 高さの半分 − 約216u（u = min(1px, 100vw/1920)）。狭い幅では文字の下限サイズで
 *                   大きくなるので、下限として165pxを使う（実測との差は±6px）
 *   SP（〜1023px）: max(136px, 136u)（u = min(1.35px, 100vw/375, 100svh/812)）
 * そこから目標の余白（PC 56px / SP 32px）を引いた分だけ引き上げる。足りない（背の低い画面）ときは 0。
 *
 * ヒーロー内の端末の動画（z-index:2）・文字（z-index:3）より手前に出す（z-index:4）。
 * svh が使えないブラウザでは、このブロック全体が無効になり、従来どおりの余白になる。
 */
.astra-sbn--top {
  z-index: 4;
}
@supports (height: 100svh) {
  @media (min-width: 1024px) {
    .astra-sbn--top {
      margin-top: calc(-1 * max(0px, 50svh - max(216 * min(1px, 100vw / 1920), 165px) - 56px));
    }
  }
  @media (max-width: 1023px) {
    .astra-sbn--top {
      margin-top: calc(-1 * max(0px, max(136px, 136 * min(1.35px, 100vw / 375, 100svh / 812)) - 32px));
    }
  }
}