/* NICOBAY 定期便 申込ページ：プランカード＋フレーバー2段階ピッカー（公式パレット：#138808 / #3f8627 / #e8f5e6 / #f4f9f2）
 * 1.1.4（9/29）: 9/28 に2セッションが同じファイルを交互に上書きしていた（別セッション「シリーズ大・フレーバー小」と本セッション「プランカード・STEP見出し」）。
 *   両方を合わせたのがこのファイル。以後は追記で。 */
.nbfp-hidden-select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; margin: -1px !important; }
.nbfp { margin: 8px 0 4px; font-family: inherit; }
.nbfp *, .nbfp *::before, .nbfp *::after { box-sizing: border-box; }
.nbfp__label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #505050; }
.nbfp__label--flavor { margin-top: 16px; }

/* シリーズ（横スクロールのチップ）。プランのカードも同じ枠 */
.nbfp__series { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.nbfp__tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 104px; padding: 8px 6px; border: 2px solid #e8f5e6; border-radius: 12px; background: #fff; color: #121212; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; }
.nbfp__tab img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; }
.nbfp__tab-name { font-size: 11px; font-weight: 700; line-height: 1.25; }
.nbfp__tab-ml { font-size: 10px; color: #505050; }
.nbfp__tab:hover { border-color: #3f8627; }
.nbfp__tab.is-active { border-color: #138808; background: #f4f9f2; box-shadow: 0 0 0 2px rgba(19, 136, 8, 0.15); }

/* プラン（本数・月額）。画像の代わりに本数を大きく出す。幅はシリーズのカード（.nbfp__tab）に合わせる */
.nbfp--plans { margin-bottom: 8px; }
.nbfp__plan { padding-top: 10px; position: relative; }
.nbfp__plan-qty { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 8px; background: #f4f9f2; color: #138808; font-size: 26px; font-weight: 800; line-height: 1; }
.nbfp__plan-qty small { font-size: 12px; font-weight: 700; margin-left: 1px; }
.nbfp__plan.is-active .nbfp__plan-qty { background: #138808; color: #fff; }
.nbfp__plan-price { font-size: 13px; font-weight: 700; color: #121212; line-height: 1.2; }
.nbfp__plan-price small { font-size: 10px; font-weight: 400; color: #505050; }
.nbfp__plan.is-soldout { opacity: .45; cursor: not-allowed; }
.nbfp__plan.is-active::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #138808; color: #fff; font-size: 12px; line-height: 20px; }

/* フレーバー（B2 カード：和名太字＋英名、在庫切れは最後尾でグレー） */
.nbfp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nbfp__card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border: 2px solid #e8f5e6; border-radius: 12px; background: #fff; color: #121212; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; position: relative; }
.nbfp__img { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #f4f9f2; }
.nbfp__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbfp__ja { font-size: 13px; font-weight: 700; line-height: 1.3; }
.nbfp__en { font-size: 10px; color: #505050; line-height: 1.3; word-break: break-word; }
.nbfp__card:hover { border-color: #3f8627; }
.nbfp__card.is-selected { border-color: #138808; background: #f4f9f2; box-shadow: 0 0 0 2px rgba(19, 136, 8, 0.15); }
.nbfp__card.is-selected::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #138808; color: #fff; font-size: 12px; line-height: 20px; }
.nbfp__card.is-soldout { opacity: .45; cursor: not-allowed; filter: grayscale(1); }
.nbfp__soldout { font-size: 10px; font-weight: 700; color: #505050; }
.nbfp__status { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: #e8f5e6; color: #138808; font-size: 13px; font-weight: 700; }
.nbfp__status.is-empty { background: #fff7d6; color: #6b5200; }

@media (max-width: 767px) {
  .nbfp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nbfp__tab { width: 96px; }
}
@media (min-width: 1100px) {
  .nbfp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 9/28 ユーザー指示：シリーズのカードを大きく、フレーバーのカードを小さく（シリーズが主、フレーバーが従の見た目に） */
.nbfp__tab { width: 150px; padding: 12px 8px 10px; gap: 6px; border-radius: 14px; }
.nbfp__tab img { width: 100px; height: 100px; border-radius: 10px; }
.nbfp__tab-name { font-size: 13px; }
.nbfp__tab-ml { font-size: 11px; }
.nbfp__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.nbfp__card { padding: 6px 4px 8px; gap: 3px; border-radius: 10px; }
.nbfp__ja { font-size: 11px; line-height: 1.25; }
.nbfp__en { font-size: 9px; }
.nbfp__card.is-selected::after { width: 18px; height: 18px; font-size: 11px; line-height: 18px; top: 4px; right: 4px; }
@media (min-width: 1100px) {
  .nbfp__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .nbfp__tab { width: 124px; padding: 10px 6px 8px; }
  .nbfp__tab img { width: 80px; height: 80px; }
  .nbfp__tab-name { font-size: 12px; }
  .nbfp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .nbfp__ja { font-size: 10.5px; }
  .nbfp__en { font-size: 8.5px; }
}

/* 9/28 ユーザー指示：フレーバーのカードをさらに小さく（PC 7〜8 列・SP 4 列、画像は横長で高さを抑える） */
.nbfp__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.nbfp__card { padding: 5px 3px 6px; gap: 2px; border-radius: 8px; border-width: 1.5px; }
.nbfp__img { aspect-ratio: 4 / 3; border-radius: 6px; }
.nbfp__ja { font-size: 10px; line-height: 1.2; }
.nbfp__en { font-size: 8px; line-height: 1.2; }
.nbfp__card.is-selected::after { width: 16px; height: 16px; font-size: 10px; line-height: 16px; top: 3px; right: 3px; }
@media (min-width: 1100px) {
  .nbfp__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .nbfp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .nbfp__ja { font-size: 9.5px; }
  .nbfp__en { font-size: 7.5px; }
}

/* プランカードの本数の箱をシリーズの画像（100px／SP 80px）と同じ大きさに */
.nbfp__plan-qty { width: 100px; height: 100px; border-radius: 10px; font-size: 40px; }
.nbfp__plan-qty small { font-size: 16px; }
.nbfp__plan-price { font-size: 15px; }
.nbfp__plan-price small { font-size: 11px; }
@media (max-width: 767px) {
  .nbfp__plan-qty { width: 80px; height: 80px; font-size: 32px; }
  .nbfp__plan-qty small { font-size: 14px; }
  .nbfp__plan-price { font-size: 14px; }
}

/* STEP 見出し（Composite の部品タイトル。標準は .8em で小さい）を大きく目立たせる（9/28 ユーザー依頼「もっと大きく」×2） */
.single-product .composite_form .component_title_toggled { margin: 4px 0 12px; }
.single-product .composite_form .component_title_toggled .component_title_text { font-size: 26px; font-weight: 800; line-height: 1.3; color: #121212; padding-left: 1.1em; letter-spacing: .01em; }
.single-product .composite_form .component_title_toggled .component_title_text .step_index { color: #138808; }
.single-product .composite_form .component_title_toggled .component_title_text:before { font-size: .65em; top: .45em; }
@media (max-width: 767px) {
  .single-product .composite_form .component_title_toggled .component_title_text { font-size: 22px; }
}

/* 1.2.0（9/29）: キャンペーン中のプランカード＝通常（打ち消し）→ 初月（赤 #d32f2f は割引後の価格だけ。LP と同じルール）→ 2回目以降 */
.nbfp__plan-regular { font-size: 11px; font-weight: 700; line-height: 1.2; color: #505050; }
.nbfp__plan-regular s { font-size: 12px; text-decoration-thickness: 2px; text-decoration-color: #d32f2f; margin: 0 1px; }
.nbfp__plan-regular small { font-size: 9px; font-weight: 400; }
.nbfp__plan-price--camp { display: flex; align-items: center; justify-content: center; gap: 4px; color: #d32f2f; font-size: 17px; line-height: 1.2; white-space: nowrap; }
.nbfp__plan-first { display: inline-block; flex: none; padding: 1px 6px; border-radius: 999px; background: #138808; color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: 0; }
.nbfp__plan-after { font-size: 9px; font-weight: 500; line-height: 1.2; color: #505050; white-space: nowrap; }
@media (min-width: 768px) {
  .nbfp__plan-regular s { font-size: 13px; }
  .nbfp__plan-price--camp { font-size: 19px; }
  .nbfp__plan-after { font-size: 10px; }
}

/* 1.4.0（9/30 ユーザー指示）==================================================
   ① シリーズのカードにニコチン濃度 ② 味の一覧を2行のカルーセルに ③ プランのカードに VAPE の絵 */

/* ① ニコチン濃度。シリーズのカードは3行目、濃度が混ざるシリーズでは味のカードにも出す */
.nbfp__tab-nic { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #e8f5e6; color: #138808; font-size: 11px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.nbfp__nic { font-size: 9px; font-weight: 700; line-height: 1.2; color: #138808; }
@media (max-width: 767px) {
  .nbfp__tab-nic { font-size: 10px; padding: 1px 6px; }
  .nbfp__nic { font-size: 8.5px; }
}

/* ② 味の一覧：2行で横に送る。列の幅は枠の 28%（SP で約3.4列＝次のカードが少し見えて、横に送れることが伝わる）、上限 112px（PC で約5.3列）。
   それまでの「N列の格子」（grid-template-columns）は打ち消す */
.nbfp__carousel { position: relative; }
.nbfp__grid { position: relative; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: clamp(92px, 28%, 112px); gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #9fcf99 transparent; padding: 3px 3px 10px; }
.nbfp__grid::-webkit-scrollbar { height: 6px; }
.nbfp__grid::-webkit-scrollbar-thumb { background: #9fcf99; border-radius: 999px; }
.nbfp__grid::-webkit-scrollbar-track { background: #f4f9f2; border-radius: 999px; }
.nbfp__card { scroll-snap-align: start; min-width: 0; }
@media (max-width: 767px) {
  .nbfp__grid { grid-template-columns: none; gap: 5px; }
}
@media (min-width: 1100px) {
  .nbfp__grid { grid-template-columns: none; }
}
/* 矢印：マウスで使う端末だけ。送れるときだけ出し、端では薄くする */
.nbfp__arrow { display: none; position: absolute; top: calc(50% - 5px); transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 1px solid #cfe6cc; border-radius: 50%; background: #fff; color: #138808; box-shadow: 0 2px 8px rgba(18, 18, 18, 0.14); cursor: pointer; z-index: 2; }
.nbfp__arrow::before { content: ""; display: block; width: 9px; height: 9px; margin: 0 auto; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.nbfp__arrow--prev { left: -10px; }
.nbfp__arrow--prev::before { transform: translateX(2px) rotate(45deg); }
.nbfp__arrow--next { right: -10px; }
.nbfp__arrow--next::before { transform: translateX(-2px) rotate(-135deg); }
.nbfp__arrow:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .nbfp__carousel.is-scrollable .nbfp__arrow { display: block; }
}

/* ③ プランのカード：本数の文字の箱を、LP のプランカードと同じ VAPE の絵に（1本は1つ、2本以上は重ねて本数分）。
   絵は緑なので、選択中も箱は淡い地のまま（選択中は枠の色と ✓ で分かる） */
.nbfp__plan-icons { --nbfp-iw: 44px; --nbfp-ov: -18px; gap: 0; }
.nbfp__plan-icons[data-count="3"] { --nbfp-iw: 38px; --nbfp-ov: -16px; }
.nbfp__plan-icons[data-count="4"] { --nbfp-iw: 34px; --nbfp-ov: -14px; }
.nbfp__tab .nbfp__plan-icons img { width: var(--nbfp-iw); height: auto; aspect-ratio: 56 / 80; object-fit: contain; border-radius: 0; margin-right: var(--nbfp-ov); }
.nbfp__tab .nbfp__plan-icons img:last-child { margin-right: 0; }
.nbfp__plan.is-active .nbfp__plan-icons { background: #e8f5e6; }
@media (max-width: 767px) {
  .nbfp__plan-icons { --nbfp-iw: 36px; --nbfp-ov: -15px; }
  .nbfp__plan-icons[data-count="3"] { --nbfp-iw: 31px; --nbfp-ov: -13px; }
  .nbfp__plan-icons[data-count="4"] { --nbfp-iw: 27px; --nbfp-ov: -11px; }
}

/* PC：右側の列（テーマの .product-redesign__info）の幅が、開いているステップによって変わっていた（テーマの指定は 1.8fr 1fr で、中身の幅に引っぱられる）。
   プランの欄を開いているとき 696px、味の欄を開くと 1012px に広がって画面の外へ出て、ページ全体が横に動いた（1280px の画面でページ幅 1381px。1.3.3 以前から）。
   列の幅を 696px（画面が狭いときは全体の 58%）に固定し、中身は列の中で横に送る。768px 以下（1列）はテーマのまま */
@media (min-width: 769px) {
  .product-redesign.type-product { grid-template-columns: minmax(0, 1fr) minmax(0, min(696px, 58%)); }
}

/* ==INFO-20260930== 1.4.6（9/30 ユーザー指示）：シリーズのカードの下に、選んでいる機種の説明文と製品仕様。
   説明文は1文ずつ改行（.nbfp__info-p は block）。製品仕様は SP 2列・PC 3列。PC は説明文（左）と製品仕様（右）を横に並べる */
.nbfp__info { margin: 4px 0 4px; padding: 12px 14px; border: 1.5px solid #e8f5e6; border-radius: 12px; background: #fff; color: #121212; }
.nbfp__info[hidden] { display: none; }
.nbfp__info-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.4; color: #138808; }
.nbfp__info-body { font-size: 12px; line-height: 1.7; color: #333; }
.nbfp__info-p { display: block; }
.nbfp__info-p + .nbfp__info-p { margin-top: 4px; }
.nbfp__spec { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #cfe6cc; }
.nbfp__spec-title { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: #505050; }
.nbfp__spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 0; }
.nbfp__spec-row { display: flex; gap: 6px; align-items: baseline; font-size: 12px; line-height: 1.5; min-width: 0; }
.nbfp__spec-row dt { flex: none; color: #505050; }
.nbfp__spec-row dt::after { content: "："; }
.nbfp__spec-row dd { margin: 0; font-weight: 700; word-break: break-all; }
@media (min-width: 768px) {
  .nbfp__info { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4px 20px; padding: 14px 18px; }
  .nbfp__info-title { grid-column: 1 / -1; font-size: 15px; }
  .nbfp__spec { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 20px; border-left: 1px dashed #cfe6cc; }
  .nbfp__spec-list { grid-template-columns: 1fr; gap: 3px; }
}
.nbfp__nw { display: inline-block; }

/* ==INFO2-20260930== 1.4.7（9/30 ユーザー指示）：見出しは機種名（1行目・緑）→ キャッチコピー（2行目） */
.nbfp__info-model { display: block; font-size: 16px; font-weight: 800; line-height: 1.35; color: #138808; }
.nbfp__info-catch { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.4; color: #121212; }
@media (min-width: 768px) {
  .nbfp__info-model { font-size: 17px; }
  .nbfp__info-catch { font-size: 14px; }
}

/* ==IMG-FIT-20260930== 1.4.9（9/30 ユーザー指示「画像の見切れがなくなるように画像サイズを調整して」）：
   味のカードの絵は 4:3 の箱に cover で入れていたので、縦長の VAPE の上下が切れていた。箱を正方形にして contain（全体を入れる）に。地は絵と同じ白 */
.nbfp__img { aspect-ratio: 1 / 1; background: #fff; }
.nbfp__img img { object-fit: contain; padding: 2px; }
.nbfp__card.is-selected .nbfp__img { background: #fff; }

/* ==WRAP-20261002== 1.4.19（10/2 ユーザー指示「SP のサブスク商品ページの改行が変になっていないか確認して」）
   ・味の名前：語の切れ目（JS が入れる <wbr>）でだけ折る。keep-all でカタカナの途中では折らず、1語が枠より長いときだけ anywhere で折る
   ・製品仕様：値（51×25×101mm・900mAh・Type-C）を途中で折らない。374px 以下は1列
   ・STEP の見出し：320px で「1本目のフレーバ｜ー」と折れていた → 374px 以下は 19px・折らない
   ・説明文：行頭に「ー」などが来ない禁則（strict）、Chrome では文節で折る（Safari は通常の折り返し） */
.nbfp__ja { word-break: keep-all; overflow-wrap: anywhere; }
.nbfp__spec-row dd { word-break: normal; white-space: nowrap; }
.nbfp__info-p, .nbfp__info-catch, .product-redesign__accordion li, .product-redesign__accordion p, .composite_form .woocommerce-info li, .composite_form .composite_message li { line-break: strict; word-break: auto-phrase; }
@media (max-width: 374px) {
  .nbfp__spec-list { grid-template-columns: 1fr; }
  body .composite_form .step_title_wrapper .step_title_text { font-size: 19px; white-space: nowrap; }
}

/* STEP-FADE-20261008（1.4.21）：Composite は操作中でないステップ（.disabled／.blocked）の中身を半透明（0.5）にする。
   定期便の申込ページは STEP を開いたまま使う（1.4.12）ので、薄く見えて不具合に見えた（10/8 ユーザー指摘）。薄くしない。 */
body .composite_form .component.disabled .component_selections_inner,
body .composite_form .multistep.blocked .component_selections > div { opacity: 1; }

/* PLAN-STD-20261008（1.4.22）：通常時のプランカードを LP のカードに合わせて目立たせる（10/8 ユーザー指示「キャンペーン時を参考に目立たせて」）。
   価格は赤 #d32f2f で大きく（LP の通常時と同じ）、区切りの点線、単品で買うと（灰）、毎月○○おトク（緑）、会員価格の札（薄緑）。
   2本＝金の枠と「おすすめ」、4本＝深い赤 #c8102e の枠と「最安値」（LP 1.4.27 と同じ色）。選んだカードは従来どおり緑の枠と ✓ */
.nbfp__plan--std { justify-content: flex-start; }
.nbfp__plan-price--std { color: #d32f2f; font-size: 19px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.nbfp__plan-price--std small { color: #505050; font-size: 9px; font-weight: 500; letter-spacing: -.02em; }
.nbfp__plan-single { display: block; width: 100%; margin-top: 2px; padding-top: 6px; border-top: 1px dashed #b9dcb3; font-size: 10px; color: #505050; line-height: 1.3; white-space: nowrap; }
.nbfp__plan-single b { color: #121212; font-size: 12px; }
.nbfp__plan-save { font-size: 10px; font-weight: 700; color: #138808; line-height: 1.3; white-space: nowrap; }
.nbfp__plan-save b { font-size: 13px; }
.nbfp__plan-perk { display: inline-block; margin-top: 2px; padding: 2px 6px; border-radius: 999px; background: #e8f5e6; color: #138808; font-size: 9px; font-weight: 700; line-height: 1.35; }
.nbfp__plan.is-reco { border-color: #c9a400; }
.nbfp__plan.is-best { border-color: #c8102e; }
.nbfp__plan.is-reco.is-active, .nbfp__plan.is-best.is-active { border-color: #138808; }
.nbfp__plan-badge { position: absolute; z-index: 1; top: 50px; right: 4px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.nbfp__plan-badge--reco { background: #c9a400; }
.nbfp__plan-badge--best { background: #c8102e; }
@media (min-width: 768px) {
  .nbfp__plan-price--std { font-size: 22px; }
  .nbfp__plan-price--std small { font-size: 10px; }
  .nbfp__plan-single { font-size: 11px; }
  .nbfp__plan-single b { font-size: 13px; }
  .nbfp__plan-save { font-size: 11px; }
  .nbfp__plan-save b { font-size: 14px; }
  .nbfp__plan-perk { font-size: 10px; padding: 2px 8px; }
  .nbfp__plan-badge { top: 78px; right: 6px; width: 46px; height: 46px; font-size: 10px; }
}