/* ============================================================
   NICOBAY サブスク LP（Figma「NICOBAY サブスクLP」node 95:2）
   - このファイルは slug=subscription の固定ページだけで読み込まれる
   - PC は Figma の 1440px カンバス通り。SP/タブレットはこちらで組んだ
   - 接頭辞 nbs- 。テーマ(nicobay)の共通ヘッダー・告知バーは body.nbs-body で隠す
   ============================================================ */

.nbs {
  /* 9/24 公式サイトの配色に統一（テーマCSS実測）：ブランド緑 #138808（ロゴ・見出し・セクション背景）、ボタン rgb(63,134,39)／hover rgb(50,107,31)、淡い地 #e8f5e6、二次テキストは公式どおり灰色 #505050 */
  --nbs-g: #138808;
  --nbs-btn: #3f8627;
  --nbs-btn-hover: #326b1f;
  --nbs-g-dark: #0f6e06;
  --nbs-ink: #121212;
  --nbs-mute: #505050;
  --nbs-pale: #f4f9f2;
  --nbs-mint: #e8f5e6;
  --nbs-y: #ffff5f;
  --nbs-gold: #cfaa01;
  --nbs-line: rgba(19, 136, 8, 0.15);
  /* Figma は Gen Interface JP（英数字も同じ書体）。テーマ(nicobay-genfont.css)が jsdelivr から読み込み、プラグイン側も未登録なら同じ CSS を読む。無い環境は Noto Sans JP に落とす */
  --nbs-font: "Gen Interface JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --nbs-en: "Gen Interface JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  /* セクションの上下余白（Figma PC は各セクション 80px。SP は 64px＝Figma SP の見出し位置 y=65） */
  --nbs-sec: 80px;
  --nbs-num-grad: linear-gradient(90deg, #138808 0%, #3f8627 15%, #3abb1e 40%, #4ed530 60%, #c7db56 80%, #ffff5f 100%);
  font-family: var(--nbs-font);
  color: var(--nbs-ink);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  background: #fff;
}
.nbs *, .nbs *::before, .nbs *::after { box-sizing: border-box; }
/* リセットは :where で詳細度を (0,1,0) に抑える。.nbs h3 のような (0,1,1) だと .nbs-about__two 等の余白指定に勝ってしまい、見出しと段落の余白が全部ゼロになる（9/22 本番で発覚） */
.nbs :where(h1, h2, h3, p, ul) { margin: 0; }
/* テーマ base.css の h1/h2/h3 要素ルール（見出しフォント・色・字間・word-break）を打ち消し、LP 側の指定に戻す */
.nbs :where(h1, h2, h3) { font-family: inherit; font-style: normal; color: inherit; letter-spacing: normal; word-break: normal; text-transform: none; }
.nbs :where(ul) { padding: 0; list-style: none; }
.nbs img { display: block; max-width: 100%; height: auto; }
/* :where で詳細度を (0,1,0) に抑え、後続の .nbs-btn--white 等のクラス指定が必ず勝つようにする（.nbs a だと (0,1,1) でボタン色を潰す） */
.nbs :where(a) { color: inherit; text-decoration: none; }
.nbs button { font-family: inherit; }

/* テーマ共通ヘッダー・告知バーはこのページだけ隠す（LP専用ヘッダーで置き換え） */
body.nbs-body .nicobay-campaign-bar,
body.nbs-body .shopify-section-group-header-wrapper,
body.nbs-body .nicobay-header { display: none !important; }
body.nbs-body #MainContent { padding-top: 0 !important; margin-top: 0 !important; }
html.nbs-menu-open { overflow: hidden; }

/* ---- 共通 ---- */
.nbs-container { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.nbs-container--narrow { max-width: 948px; }
.nbs-container--faq { max-width: 896px; }

.nbs-heading { text-align: center; }
.nbs-heading__en { font-family: var(--nbs-en); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--nbs-g); margin-bottom: 15px; }
.nbs-heading__ja { font-weight: 400; font-size: 36px; line-height: 54px; letter-spacing: -0.02em; color: var(--nbs-ink); }
.nbs-heading__big { font-weight: 700; font-size: 50px; color: var(--nbs-g); }
.nbs-heading__accent { color: var(--nbs-y); }
.nbs-heading__sub { font-weight: 500; font-size: 16px; line-height: 24px; color: var(--nbs-mute); margin-top: 12px; }
.nbs-heading--dark .nbs-heading__en { color: var(--nbs-y); }
.nbs-heading--dark .nbs-heading__ja { color: #fff; }
.nbs-heading--dark .nbs-heading__big { color: var(--nbs-y); }

.nbs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 24px; border: 2px solid var(--nbs-g);
  font-weight: 700; font-size: 16px; line-height: 20px; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.nbs-btn img { width: 16px; height: 16px; flex: none; }
.nbs-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(19, 136, 8, 0.22); }
.nbs-btn--primary { background: var(--nbs-btn); border-color: var(--nbs-btn); color: #fff; }
.nbs-btn--primary:hover { background: var(--nbs-btn-hover); border-color: var(--nbs-btn-hover); }
.nbs-btn--outline { background: #fff; color: var(--nbs-g); }
.nbs-btn--white { background: #fff; color: var(--nbs-g); border-color: #fff; }
.nbs-btn--block { width: 100%; font-size: 14px; padding: 9px 20px; border-radius: 20px; border-width: 1px; }
.nbs-btn--block img { width: 14px; height: 14px; }

.nbs-pill {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); font-weight: 700; font-size: 14px; line-height: 20px; color: var(--nbs-g); white-space: nowrap;
  transition: box-shadow .2s ease;
}
.nbs-pill:hover { box-shadow: 0 2px 10px rgba(19, 136, 8, 0.3); }

.nbs-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: rgba(19, 136, 8, 0.09); font-weight: 700; font-size: 12px; line-height: 16px; color: #138808; }
.nbs-note { font-size: 12px; line-height: 16px; color: var(--nbs-mute); text-align: center; }

/* 黄色マーカー（Figma の #ffff5f 6px バー） */
.nbs-ul {
  background-image: linear-gradient(var(--nbs-y), var(--nbs-y));
  background-size: 100% 6px; background-repeat: no-repeat; background-position: 0 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 1px;
}
.nbs-ul--thin { background-size: 100% 4px; }
/* 9/25：マーカーが文字に重なって読みにくかったので、文字の下（padding 分）に敷く */
.nbs-ul--y { background-size: 100% 6px; background-position: 0 100%; padding-bottom: 5px; }

/* ---- 告知バー ---- */
.nbs-notice { background: var(--nbs-g); color: #fff; text-align: center; padding: 8px 16px; }
.nbs-notice p { font-weight: 700; font-size: 12px; line-height: 20px; }

/* ---- LP専用ヘッダー ---- */
.nbs-header { position: sticky; top: 0; z-index: 60; background: rgba(244, 249, 242, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: box-shadow .2s ease; }
.nbs-header.is-scrolled { box-shadow: 0 1px 4px rgba(19, 136, 8, 0.12); }
.nbs-header__inner { position: relative; max-width: 1280px; height: 64px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 32px; }
.nbs-header__logo { display: flex; align-items: center; gap: 8px; flex: none; }
.nbs-header__logo img { width: 138px; height: 30px; }
.nbs-header__badge { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--nbs-g); color: #fff; font-family: var(--nbs-en); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; }
.nbs-header__nav { flex: 1; display: flex; align-items: center; gap: 24px; padding-left: 16px; min-width: 0; }
.nbs-header__nav a { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--nbs-mute); white-space: nowrap; transition: color .2s ease; }
.nbs-header__nav a:hover { color: var(--nbs-g); }
.nbs-header__cta { display: flex; gap: 15px; flex: none; }
.nbs-header__burger { display: none; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nbs-header__burger span { display: block; width: 22px; height: 2px; background: var(--nbs-g); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nbs-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nbs-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nbs-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nbs-menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 8px 24px 24px; display: flex; flex-direction: column; box-shadow: 0 12px 24px rgba(19, 136, 8, 0.12); max-height: calc(100vh - 64px); overflow-y: auto; }
.nbs-menu[hidden] { display: none; }
.nbs-menu__link { padding: 14px 0; border-bottom: 1px solid var(--nbs-line); font-weight: 700; font-size: 15px; color: var(--nbs-ink); }
.nbs-menu .nbs-btn { margin-top: 12px; }
.nbs-menu .nbs-btn + .nbs-btn { margin-top: 8px; }

/* ---- HERO ---- */
.nbs-hero { position: relative; overflow: hidden; background: #f4f9f2 linear-gradient(157deg, #e8f5e6 0%, #f4f9f2 50%, #fff 100%); }
/* 9/29 ユーザー指示：PC の背景写真を Figma のように大きく（Figma は 1440×960 の全幅写真を top:-251px＝ヒーロー全高で置き、最上段の機種がヘッダー直下に触れる）。
   現行写真（1350×900）は Figma の写真より機種が左まで広がっているため、全幅にすると左端の INFLAVE がボタンと会員カードに被る。
   高さ 773（709+64）・幅 1160 を右寄せ・下端揃えにすると、最上段の KEYSTONE がヘッダー直下、左端の INFLAVE が「30%」の直下＝Figma と同じ位置関係になる。
   上端は画面外なので上のフェードは外し、左端だけフェード。1280〜1439px では右端が切れないよう right を 0 で止める */
.nbs-hero__bg { position: absolute; left: auto; right: max(0px, calc(50% - 720px)); top: auto; bottom: 0; width: 1160px; height: 773px; pointer-events: none; }
.nbs-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, #000 16%); }
/* 1280〜1439px は左右の余白が詰まって「%OFF」が黄色い IPLAY に重なるので、写真を 1080×720 に少し縮める（右端の IPLAY が切れない上限） */
@media (min-width: 1280px) and (max-width: 1439px) {
  .nbs-hero__bg { width: 1080px; height: 720px; }
}
/* 1441px 以上は写真の右端が 1440 枠の端（画面の内側）に来るので、右端も 50px だけフェードして継ぎ目を消す（右端の IPLAY は端から 52px 内側） */
@media (min-width: 1441px) {
  .nbs-hero__bg img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 calc(100% - 50px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 calc(100% - 50px), transparent 100%); }
}
.nbs-hero__inner { position: relative; max-width: 1440px; height: 709px; margin: 0 auto; }
.nbs-hero__copy { position: absolute; left: calc(50% - 568px); top: 48px; width: 584px; }
.nbs-hero__title { font-weight: 400; font-size: 51.2px; line-height: 64px; letter-spacing: -0.02em; color: var(--nbs-ink); white-space: nowrap; }
.nbs-hero__title span { color: var(--nbs-g); }
.nbs-hero__lead { font-weight: 500; font-size: 16px; line-height: 26px; color: var(--nbs-mute); margin-top: 14px; padding-left: 4px; }
.nbs-hero__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 38px; }

.nbs-hero__off { position: absolute; left: calc(50% - 108px); top: 164px; color: var(--nbs-g); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: start; }
.nbs-hero__off-label { grid-column: 1 / -1; font-weight: 500; font-size: 25.2px; line-height: 1.2; letter-spacing: -0.04em; padding-left: 12px; margin-bottom: 6px; }
/* 9/25：background-clip:text は要素の箱の外を塗らないので line-height .86 だと数字の上下が欠ける。line-height 1 ＋ padding で箱を広げ、margin で位置は元のまま */
.nbs-hero__off-num { font-family: var(--nbs-en); font-weight: 800; font-size: 148px; line-height: 1; letter-spacing: -0.075em; padding: 0.04em 0.08em 0.06em 0.02em; margin: -0.11em -0.08em -0.06em -0.02em; background: var(--nbs-num-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nbs-hero__off-unit { display: flex; flex-direction: column; align-items: flex-start; padding-top: 2px; }
.nbs-hero__off-unit span:first-child { font-weight: 500; font-size: 51.2px; line-height: 1; letter-spacing: -0.02em; }
.nbs-hero__off-unit span:last-child { font-weight: 500; font-size: 33.2px; line-height: 1; letter-spacing: -0.02em; }

.nbs-hero__cards { position: absolute; left: calc(50% - 592px); top: 456px; width: 372px; height: 252px; }
.nbs-passcard {
  width: 310px; height: 196px; padding: 20px; border-radius: 8px; color: #fff;
  background-size: cover; background-position: center; box-shadow: 0 0 4px rgba(19, 136, 8, 0.2);
  display: flex; flex-direction: column; font-weight: 700; line-height: 1;
}
.nbs-hero__cards .nbs-passcard { position: absolute; }
.nbs-hero__cards .nbs-passcard--expert { left: 0; top: 0; transform: rotate(-7.05deg); z-index: 2; }
.nbs-hero__cards .nbs-passcard--starter { left: 47px; top: 32px; transform: rotate(-4.42deg); z-index: 1; }
.nbs-passcard__ja { font-size: 16px; }
.nbs-passcard__en { font-family: var(--nbs-en); font-size: 24px; margin-top: 4px; padding-bottom: 13px; }
.nbs-passcard__all { font-size: 16px; line-height: 16px; }
.nbs-passcard__pct { display: flex; align-items: flex-end; gap: 4px; padding-bottom: 20px; }
.nbs-passcard__pct b { font-size: 32px; }
.nbs-passcard__pct span { font-weight: 500; font-size: 28px; }
.nbs-passcard__price { font-size: 18px; margin-top: auto; padding-bottom: 6px; }
.nbs-passcard__price b { font-size: 28px; }
.nbs-passcard--static { position: static; transform: none; height: auto; min-height: 196px; }
/* 会員特典カード（PASS を特典に畳んだので1枚だけ。ヒーローでは少し傾ける） */
.nbs-hero__cards .nbs-passcard--perk { left: 24px; top: 16px; transform: rotate(-5deg); z-index: 2; }
.nbs-passcard--perk .nbs-passcard__price { font-size: 14px; }
.nbs-prcard__rate { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--nbs-en); font-weight: 800; font-size: 26px; line-height: 1; color: var(--nbs-g); }
.nbs-prcard__rate small { font-size: 11px; margin-left: 2px; font-weight: 700; }
.nbs-passcard__btn { align-self: center; margin-top: 16px; padding: 4px 24px; border-radius: 24px; background: #fff; color: var(--nbs-g); font-weight: 700; font-size: 14px; line-height: 24px; }

.nbs-hero__features {
  position: absolute; left: calc(50% - 145px); top: 579px; width: 596px; height: 100px; padding: 20px 22px;
  border-radius: 16px; background: var(--nbs-pale); box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  display: flex; align-items: flex-end; justify-content: center; gap: 30px;
}
.nbs-hero__features li { display: flex; flex-direction: column; align-items: center; }
.nbs-hero__features img { width: 42px; height: 42px; }
.nbs-hero__features span { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--nbs-mute); white-space: nowrap; }

/* ---- ABOUT ---- */
.nbs-about { position: relative; background: #fff; padding: var(--nbs-sec) 0 0; }
.nbs-about__smog { position: absolute; right: calc(50% - 720px + 145px); top: 25px; width: 322px; height: 494px; overflow: hidden; pointer-events: none; border-radius: 24px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%); }
.nbs-about__smog img { position: absolute; left: -1822px; top: -740px; width: 2220px; max-width: none; height: 1480px; }
/* 左側の煙（9/22）：右のものを左右反転し、カードの中ほどの高さに */
/* 左の煙：カード（幅540・中央）の左側余白の真ん中に置く。余白の中心＝(50% − 270px)/2、煙の幅322pxの半分を引く。画面が狭くてもはみ出さないよう 0px 以上（9/22） */
.nbs-about__smog--left { right: auto; left: max(0px, calc(25% - 135px - 161px)); top: 420px; transform: scaleX(-1); }
.nbs-about__lead { text-align: center; font-weight: 500; font-size: 16px; line-height: 26px; color: var(--nbs-mute); margin-top: 10px; }
.nbs-about__two { text-align: center; font-weight: 400; font-size: 36px; line-height: 40px; margin: 64px 0 40px; }
.nbs-about__two b { font-weight: 700; font-size: 50px; color: var(--nbs-g); }
.nbs-about__cards { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: -25px; }
/* カードは定期便の1枚だけ（9/22）。PC は Figma のカード幅 540 のまま中央に置く（広げる案は 9/22 に取り下げ） */
.nbs-about__cards--single { grid-template-columns: minmax(0, 540px); justify-content: center; }
.nbs-about__band { height: 103px; background: var(--nbs-g); margin-top: -78px; }
.nbs-acard { position: relative; display: flex; flex-direction: column; height: 551px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(19, 136, 8, 0.25); background: var(--nbs-pale) center / cover no-repeat; }
.nbs-acard__visual { position: relative; }
.nbs-acard__visual img { width: 100%; height: 304px; object-fit: cover; }
.nbs-acard__title { position: absolute; left: 67px; top: 89px; font-weight: 500; font-size: 27px; line-height: 28.8px; color: var(--nbs-ink); white-space: nowrap; }
.nbs-acard__list { padding: 24px 32px 0; }
.nbs-acard__list li { position: relative; padding-left: 21px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--nbs-mute); }
.nbs-acard__list li + li { margin-top: 14px; }
.nbs-acard__list li::before { content: "—"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--nbs-g); }
.nbs-acard__list b { font-weight: 700; color: var(--nbs-ink); }
.nbs-acard__list big { font-size: 20px; }
.nbs-acard .nbs-btn--block { margin: auto 34px 40px; width: auto; }
.nbs-acard--pass { color: #fff; }
.nbs-acard--pass .nbs-acard__list li { color: #fff; }
.nbs-acard--pass .nbs-acard__list li::before { color: rgba(255, 255, 255, 0.6); }
.nbs-acard--pass .nbs-acard__list b { color: #fff; }
.nbs-acard--pass .nbs-acard__list li + li { margin-top: 12px; }
.nbs-acard--pass .nbs-btn--block { margin-bottom: 28px; }

/* ---- MERIT ---- */
.nbs-merit { background: var(--nbs-g); color: #fff; padding: 40px 0 65px; }
.nbs-merit__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 30px; }
.nbs-mitem { position: relative; display: flex; align-items: center; gap: 20px; padding: 33px 34px 33px 60px; }
.nbs-mitem__no { position: absolute; left: 0; top: 14px; font-family: var(--nbs-en); font-weight: 600; font-size: 30px; line-height: 54px; letter-spacing: -0.02em; }
.nbs-mitem__icon { width: 100px; height: 100px; flex: none; }
.nbs-mitem__text h3 { font-weight: 500; font-size: 24px; line-height: 1.4; }
.nbs-mitem__text p { font-weight: 500; font-size: 14px; line-height: 20px; margin-top: 8px; }

/* ---- PLAN ---- */
.nbs-plan { position: relative; background: #fff; padding: var(--nbs-sec) 0; }
.nbs-plan__smog { position: absolute; left: 0; top: -217px; width: 486px; height: 543px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 70%); }
.nbs-plan__smog img { position: absolute; left: -1300px; top: -560px; width: 2220px; max-width: none; height: 1480px; transform: scaleX(-1); opacity: .9; }
.nbs-tabs { display: flex; width: max-content; max-width: 100%; margin: 40px auto 0; gap: 4px; padding: 4px; border-radius: 24px; background: var(--nbs-mint); }
.nbs-tabs__btn { border: 0; background: transparent; padding: 10px 32px; border-radius: 20px; font-weight: 700; font-size: 18px; line-height: 20px; color: var(--nbs-mute); cursor: pointer; white-space: nowrap; transition: color .2s ease; }
.nbs-tabs__btn.is-active { background: var(--nbs-btn); color: #fff; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); }
.nbs-plan__panel { position: relative; margin-top: 40px; padding: 32px 32px 0; border-radius: 16px; }
.nbs-plan__lead { text-align: center; font-weight: 700; font-size: 14px; line-height: 22.75px; color: var(--nbs-mute); }
.nbs-plan__title { text-align: center; font-weight: 700; font-size: 36px; line-height: 54px; letter-spacing: -0.02em; color: var(--nbs-g); }
.nbs-circles { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.nbs-circles li { width: 160px; height: 160px; border-radius: 50%; background: var(--nbs-mint); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--nbs-g); padding: 12px; flex: none; }
.nbs-plan__cards { display: flex; justify-content: center; gap: 40px; margin-top: 24px; }
.nbs-plan-card { position: relative; width: 180px; min-height: 236px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 8px rgba(19, 136, 8, 0.15); display: flex; flex-direction: column; align-items: center; text-align: center; }
.nbs-plan-card.is-recommend { border: 2px solid var(--nbs-gold); padding: 16px 16px 14px; }
.nbs-plan-card__icons { position: relative; display: flex; height: 80px; }
.nbs-plan-card__icons img { width: 56px; height: 80px; margin-right: -24px; }
.nbs-plan-card__icons img:last-of-type { margin-right: 0; }
.nbs-plan-card__reco { position: absolute; right: -32px; top: 40px; width: 52px; height: 52px; border-radius: 50%; background: var(--nbs-gold); color: #fff; font-weight: 700; font-size: 10px; line-height: 1.2; display: flex; align-items: center; justify-content: center; }
.nbs-plan-card__label { font-weight: 700; font-size: 14px; line-height: 16px; margin-top: 10px; }
.nbs-plan-card__price { font-weight: 800; font-size: 32px; line-height: 32px; margin-top: 6px; color: var(--nbs-sale); letter-spacing: -0.02em; } /* 1.4.36（10/8 ユーザー指示）：キャンペーン時と同じ赤で強調 */
.nbs-plan-card__price small { font-size: 13px; font-weight: 700; color: var(--nbs-mute); margin-left: 2px; letter-spacing: 0; }
.nbs-plan-card__unit { font-weight: 500; font-size: 11px; line-height: 16px; color: var(--nbs-mute); margin-top: 6px; margin-bottom: 12px; }
.nbs-plan-card__pct { font-weight: 700; font-size: 20px; line-height: 24px; margin: -6px 0 10px; }
.nbs-plan-card__pct span { font-size: 12px; margin-left: 2px; }
.nbs-plan-card__btn { margin-top: auto; width: 120px; padding: 2px 12px; border-radius: 24px; background: var(--nbs-btn); color: #fff; font-weight: 700; font-size: 14px; line-height: 24px; transition: box-shadow .2s ease; }
.nbs-plan-card__btn:hover { background: var(--nbs-btn-hover); box-shadow: 0 4px 12px rgba(19, 136, 8, 0.3); }
.nbs-plan__actions { display: flex; justify-content: center; gap: 20px; margin-top: 24px; }
.nbs-plan__passes { display: flex; justify-content: center; gap: 40px; margin-top: 24px; }

/* ---- LINEUP ---- */
.nbs-lineup { background: var(--nbs-pale); padding: var(--nbs-sec) 0; }
.nbs-lineup .nbs-note { margin-top: 12px; }
.nbs-band { margin-top: 40px; }
.nbs-band + .nbs-band { margin-top: 68px; }
.nbs-band__label { display: flex; align-items: center; justify-content: center; gap: 2px; font-weight: 700; font-size: 16px; line-height: 16px; color: var(--nbs-g); padding-top: 20px; }
.nbs-band__label img { width: 21px; height: 96px; transform: rotate(34deg); margin: -32px 6px -28px 0; }
.nbs-pgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; }
.nbs-pcard { display: block; background: #fff; border: 1px solid var(--nbs-line); border-radius: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.nbs-pcard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(19, 136, 8, 0.14); }
.nbs-pcard__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.nbs-pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.nbs-pcard__badge { position: absolute !important; left: 0; top: 0; width: 61% !important; height: auto !important; }
.nbs-pcard__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.nbs-pcard__meta { display: flex; align-items: center; gap: 8px; }
.nbs-pcard__ml { font-size: 12px; line-height: 12px; color: var(--nbs-mute); }
.nbs-pcard__name { font-weight: 700; font-size: 14px; line-height: 19.25px; color: var(--nbs-ink); }
.nbs-pcard__note { display: inline-block; align-self: flex-start; margin-top: -2px; padding: 1px 7px; border-radius: 999px; background: var(--nbs-mint); font-size: 11px; line-height: 16px; font-weight: 700; color: var(--nbs-g); }
.nbs-band__more { display: flex; justify-content: center; margin-top: 40px; }
.nbs-ranking { margin-top: 68px; }
.nbs-ranking .nbs-pgrid { margin-top: 48px; }
.nbs-ranking__cta { display: flex; justify-content: center; margin-top: 40px; }
.nbs-ranking .nbs-note { margin-top: 12px; }

/* ---- PRESENT ---- */
.nbs-present { position: relative; background: var(--nbs-g); color: #fff; padding: var(--nbs-sec) 0; overflow: hidden; }
.nbs-present__smoke { position: absolute; left: 0; right: 0; top: 167px; height: 576px; pointer-events: none; }
.nbs-present__smoke img { width: 100%; height: 100%; object-fit: cover; opacity: .52; }
.nbs-present .nbs-container { position: relative; }
.nbs-present__cards { display: flex; justify-content: center; gap: 20px; margin-top: 20px; padding-top: 20px; }
.nbs-prcard { position: relative; width: 258px; padding: 51px 18px 25px; border: 1px solid #fff; border-radius: 12px; background: center / cover no-repeat; text-align: center; }
.nbs-prcard__icon { position: absolute; left: 50%; top: -49px; width: 96px; height: 96px; transform: translateX(-50%); }
.nbs-prcard__circle { position: absolute; inset: 0; width: 96px; height: 96px; }
.nbs-prcard__glyph { position: absolute; left: 13px; top: 16px; width: 69px; height: 64px; object-fit: contain; }
.nbs-prcard__glyph--wide { left: 5px; top: 20px; width: 86px; height: 58px; }
.nbs-prcard h3 { font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; padding-top: 8px; }
.nbs-prcard__line { display: block; width: 60px; height: 1px; background: #fff; margin: 10px auto; }
.nbs-prcard p { font-weight: 500; font-size: 14px; line-height: 1.4; }

/* ---- FLOW ---- */
.nbs-flow { position: relative; background: var(--nbs-pale); padding: var(--nbs-sec) 0; overflow: hidden; }
.nbs-flow__people { position: absolute; left: 0; right: 0; top: -97px; height: 747px; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 80%, transparent 100%); }
.nbs-flow__people img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.nbs-flow .nbs-container { position: relative; }
.nbs-steps { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; gap: 16px; align-items: start; margin-top: 40px; }
.nbs-step { min-height: 274px; padding: 25px; background: #fff; border: 1px solid var(--nbs-line); border-radius: 12px; box-shadow: 0 2px 6px rgba(19, 136, 8, 0.06); }
.nbs-step__icon { width: 36px; height: 36px; margin: 0 auto; }
.nbs-step h3 { display: flex; align-items: center; gap: 8px; margin-top: 25px; font-weight: 700; font-size: 15.2px; line-height: 21.28px; color: var(--nbs-ink); }
.nbs-step__no { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--nbs-g); color: #fff; font-size: 14px; line-height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.nbs-step p { margin-top: 8px; font-weight: 500; font-size: 14px; line-height: 22.75px; color: var(--nbs-mute); }
.nbs-step ul { margin-top: 8px; }
.nbs-step li { position: relative; padding-left: 16px; font-size: 14px; line-height: 20px; color: var(--nbs-mute); }
.nbs-step li + li { margin-top: 6px; }
.nbs-step li::before { content: "·"; position: absolute; left: 2px; top: 0; color: var(--nbs-g); font-weight: 700; }
.nbs-steps__arrow { width: 0; height: 0; border-left: 18px solid var(--nbs-g); border-top: 17px solid transparent; border-bottom: 17px solid transparent; margin-top: 120px; justify-self: center; }
.nbs-flow__note { text-align: center; margin-top: 40px; }
.nbs-flow__note-title { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--nbs-g); }
.nbs-flow__note-body { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--nbs-mute); margin-top: 4px; }

/* ---- USER'S VOICE ---- */
.nbs-voice { position: relative; background: #fff; padding: var(--nbs-sec) 0; overflow: hidden; }
.nbs-voice__bg { position: absolute; inset: 0; pointer-events: none; }
.nbs-voice__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.nbs-voice .nbs-container { position: relative; }
.nbs-voice__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.nbs-vcard { display: flex; flex-direction: column; gap: 12px; padding: 25px; background: #fff; border: 1px solid var(--nbs-line); border-radius: 12px; box-shadow: 0 2px 6px rgba(19, 136, 8, 0.06); }
.nbs-vcard__stars { display: flex; gap: 4px; }
.nbs-vcard__stars img { width: 14px; height: 14px; }
.nbs-vcard__text { font-weight: 700; font-size: 14px; line-height: 22.75px; color: var(--nbs-mute); }
.nbs-vcard__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--nbs-line); }
.nbs-vcard__avatar { flex: none; width: 45px; height: 45px; border-radius: 50%; background-repeat: no-repeat; background-size: 200.7px 133.8px; background-color: var(--nbs-mint); }
.nbs-vcard__who b { display: block; font-weight: 700; font-size: 14px; line-height: 20px; color: var(--nbs-ink); }
.nbs-vcard__who small { display: block; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--nbs-g); margin-top: 2px; }

/* ---- FAQ ---- */
.nbs-faq { background: #fff; padding: var(--nbs-sec) 0 120px; }
.nbs-faq__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.nbs-faq__cat { border: 0; padding: 8px 16px; border-radius: 8px; background: var(--nbs-mint); color: var(--nbs-mute); font-weight: 500; font-size: 14px; line-height: 20px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.nbs-faq__cat.is-active { background: var(--nbs-btn); color: #fff; }
.nbs-faq__list { margin-top: 32px; }
.nbs-faq__list[hidden] { display: none; }
.nbs-qa { border: 1px solid var(--nbs-line); border-radius: 12px; background: #fff; overflow: hidden; }
.nbs-qa + .nbs-qa { margin-top: 8px; }
.nbs-qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; font-weight: 500; font-size: 14px; line-height: 22.75px; color: var(--nbs-ink); }
.nbs-qa summary::-webkit-details-marker { display: none; }
.nbs-qa__q b { font-weight: 500; color: var(--nbs-g); }
.nbs-qa summary img { flex: none; width: 16px; height: 16px; transition: transform .2s ease; }
.nbs-qa[open] summary img { transform: rotate(180deg); }
.nbs-qa__a { padding: 0 20px 16px; }
.nbs-qa__a p { font-size: 14px; line-height: 1.8; color: var(--nbs-mute); }

/* ---- PAGE TOP ---- */
.nbs-pagetop { position: fixed; right: 58px; bottom: 40px; z-index: 40; display: flex; align-items: flex-start; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.nbs-pagetop.is-visible { opacity: 1; pointer-events: auto; }
.nbs-pagetop img { width: 21px; height: 96px; }
.nbs-pagetop span { writing-mode: vertical-rl; font-family: var(--nbs-en); font-weight: 700; font-size: 12px; color: var(--nbs-g); margin-top: 28px; }

/* ============================================================
   レスポンシブ（Figma は PC のみ。以下はこちらで組んだもの）
   ============================================================ */
/* ヘッダー：ロゴ＋ナビ6項目＋ボタン2つで約1,270px要る。1,400px未満は余白を詰め、1,280px未満はハンバーガーに切り替える（ナビがボタンの下に潜らないように） */
@media (max-width: 1399px) {
  .nbs-header__inner { gap: 20px; }
  .nbs-header__nav { gap: 14px; padding-left: 8px; }
  .nbs-header__nav a { font-size: 13px; }
  .nbs-header__cta { gap: 10px; }
  .nbs-header__cta .nbs-pill { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 1279px) {
  .nbs-header__nav, .nbs-header__cta { display: none; }
  .nbs-header__burger { display: flex; }
  .nbs-hero__bg { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; height: auto; }
  .nbs-hero__bg img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-position: center; -webkit-mask-image: none; mask-image: none; }
  .nbs-hero__inner { height: auto; padding: 32px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px; align-items: start; }
  .nbs-hero__copy, .nbs-hero__off, .nbs-hero__cards, .nbs-hero__features { position: static; width: auto; }
  .nbs-hero__copy { grid-column: 1; grid-row: 1 / span 2; }
  .nbs-hero__off { grid-column: 2; grid-row: 1; }
  /* relative にすると PC 用の left/top（calc(50% - 592px)／456px）が効いてしまうので必ず解除する（9/25 768px で発覚） */
  .nbs-hero__cards { grid-column: 2; grid-row: 2; position: relative; left: auto; top: auto; width: 372px; height: 252px; justify-self: end; }
  .nbs-hero__features { grid-column: 1 / -1; height: auto; max-width: 596px; margin: 0 auto; flex-wrap: wrap; }
}
@media (max-width: 989px) {
  .nbs-hero__inner { grid-template-columns: 1fr; }
  .nbs-hero__copy { grid-row: auto; }
  .nbs-hero__off { grid-column: 1; grid-row: auto; }
  .nbs-hero__cards { grid-column: 1; grid-row: auto; justify-self: start; }
  .nbs-about__smog { display: none; }
  .nbs-about__cards { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; }
  .nbs-merit__grid { grid-template-columns: 1fr; }
  .nbs-plan__smog { display: none; }
  .nbs-plan__panel { padding: 24px 0 0; }
  .nbs-circles { flex-wrap: wrap; }
  .nbs-circles li { width: 140px; height: 140px; font-size: 14px; }
  .nbs-plan__cards, .nbs-plan__passes { flex-wrap: wrap; gap: 24px; }
  .nbs-pgrid { grid-template-columns: repeat(3, 1fr); }
  .nbs-steps { grid-template-columns: 1fr; gap: 12px; max-width: 480px; margin-left: auto; margin-right: auto; }
  .nbs-step { min-height: 0; }
  .nbs-steps__arrow { transform: rotate(90deg); margin: 0; }
  .nbs-voice__grid { grid-template-columns: repeat(2, 1fr); }
  .nbs-pagetop { right: 16px; bottom: 24px; }
}
@media (max-width: 767px) {
  .nbs-heading__en { font-size: 22px; margin-bottom: 10px; }
  .nbs-heading__ja { font-size: 28px; line-height: 40px; }
  .nbs-heading__big { font-size: 38px; }
  .nbs-hero__title { font-size: 36px; line-height: 50px; }
  .nbs-hero__off-num { font-size: 108px; }
  .nbs-hero__off-unit span:first-child { font-size: 40px; }
  .nbs-hero__off-unit span:last-child { font-size: 26px; }
  .nbs-hero__cards { width: 100%; max-width: 372px; height: 232px; transform-origin: left top; }
  .nbs-hero__features { gap: 12px 24px; padding: 16px; }
  .nbs-hero__features li { width: calc(50% - 12px); }
  .nbs-about__two { font-size: 28px; margin: 32px 0 24px; }
  .nbs-about__two b { font-size: 40px; }
  .nbs-acard { height: auto; }
  .nbs-acard__visual img { height: auto; aspect-ratio: 540 / 304; }
  .nbs-acard__title { left: 24px; top: 24px; font-size: 22px; }
  .nbs-acard__list { padding: 20px 20px 0; }
  .nbs-acard .nbs-btn--block { margin: 24px 20px; }
  .nbs-acard--pass .nbs-btn--block { margin-bottom: 24px; }
  .nbs-mitem { padding: 24px 0 24px 44px; gap: 14px; }
  .nbs-mitem__no { font-size: 24px; top: 10px; }
  .nbs-mitem__icon { width: 72px; height: 72px; }
  .nbs-mitem__text h3 { font-size: 19px; }
  .nbs-mitem__text p br, .nbs-about__lead br { display: none; }
  .nbs-tabs__btn { padding: 8px 18px; font-size: 15px; }
  .nbs-plan__title { font-size: 28px; line-height: 40px; }
  .nbs-circles { gap: 8px; }
  .nbs-circles li { width: 124px; height: 124px; font-size: 12px; padding: 8px; }
  .nbs-plan-card { width: calc(50% - 12px); max-width: 180px; }
  .nbs-plan__actions { flex-direction: column; align-items: center; gap: 12px; }
  .nbs-pgrid { grid-template-columns: repeat(2, 1fr); }
  .nbs-present__cards { flex-direction: column; align-items: center; gap: 60px; }
  .nbs-voice__grid { grid-template-columns: 1fr; }
  .nbs-flow__note-body br { display: none; }
  .nbs-faq { padding-bottom: 100px; }
}
@media (max-width: 479px) {
  .nbs-container { padding: 0 16px; }
  .nbs-hero__inner { padding: 24px 16px 32px; }
  .nbs-hero__title { font-size: 32px; line-height: 44px; }
  .nbs-hero__btns .nbs-btn { width: 100%; }
  .nbs-passcard { width: 280px; }
  .nbs-hero__cards .nbs-passcard--starter { left: 30px; top: 30px; }
  .nbs-plan-card { width: calc(50% - 8px); padding: 12px; }
  .nbs-plan-card__icons img { width: 44px; height: 64px; margin-right: -20px; }
  .nbs-plan-card__reco { right: -22px; top: 30px; width: 44px; height: 44px; font-size: 9px; }
  .nbs-plan-card__btn { width: 100%; }
  .nbs-prcard { width: 100%; }
}

/* ---- 対象機種が6シリーズになった（9/22）ので、一覧は3列×2段で大きめに。ランキングは5列のまま ---- */
.nbs-band--all .nbs-pgrid { grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin-left: auto; margin-right: auto; }
.nbs-band--all .nbs-pcard__body { padding: 18px 20px; }
.nbs-band--all .nbs-pcard__name { font-size: 16px; line-height: 22px; }
@media (max-width: 767px) {
  .nbs-band--all .nbs-pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .nbs-band--all .nbs-pcard__body { padding: 14px 16px; }
  .nbs-band--all .nbs-pcard__name { font-size: 14px; line-height: 19px; }
}

/* ============================================================
   9/25 改修（最大25%・$価格・会員価格の率は未決・ランキング非表示・キャンペーン枠・SP を Figma SP(95:1618) に合わせる）
   ============================================================ */
/* 見出しの SP だけ改行（「NICOBAY」「SUBSCRIPTIONとは」の2行） */
.nbs-br-sp { display: none; }
.nbs-nowrap { white-space: nowrap; }

/* 会員特典カード：率が未決の間は数字の代わりに「会員価格」 */
.nbs-passcard__pct--word b { font-size: 26px; letter-spacing: 0.02em; }

/* Present：導入文・3枚目のアイコン（SVG）・会員価格表 */
.nbs-present__lead { text-align: center; font-weight: 500; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, 0.9); margin-top: 12px; }
.nbs-prcard__glyph--svg { left: 18px; top: 18px; width: 60px; height: 60px; }
.nbs-mprice { max-width: 640px; margin: 48px auto 0; padding: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.35); }
.nbs-mprice__title { text-align: center; font-weight: 700; font-size: 18px; line-height: 1.4; }
.nbs-mprice__table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.nbs-mprice__table th, .nbs-mprice__table td { padding: 10px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); text-align: left; }
.nbs-mprice__table th { font-weight: 700; font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.nbs-mprice__table td small { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.7); }
.nbs-mprice__table a { text-decoration: underline; text-underline-offset: 2px; }
.nbs-mprice__member { font-weight: 800; font-size: 18px; color: var(--nbs-y); white-space: nowrap; }
.nbs-mprice__regular { color: rgba(255, 255, 255, 0.75); text-decoration: line-through; white-space: nowrap; }
.nbs-mprice__cond { margin-top: 12px; font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, 0.85); }

/* Plan：カード下の注記、キャンペーンのラベル */
.nbs-plan__note { text-align: center; font-size: 12px; line-height: 18px; color: var(--nbs-mute); margin-top: 16px; }
.nbs-plan-card.is-camp { box-shadow: 0 0 0 2px var(--nbs-g), 0 0 8px rgba(19, 136, 8, 0.15); }
.nbs-plan-card.is-recommend.is-camp { box-shadow: 0 0 8px rgba(19, 136, 8, 0.15); }
.nbs-plan-card__camp { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--nbs-g); color: #fff; font-weight: 700; font-size: 11px; line-height: 16px; white-space: nowrap; }

/* Lineup：ランキング非表示のあと、一覧の下に置く CTA */
.nbs-lineup__cta { display: flex; justify-content: center; margin-top: 40px; }

/* キャンペーン枠（ヒーロー／プラン共通。キャンペーン OFF のときは要素ごと出ないので余白は残らない） */
.nbs-camp { border-radius: 12px; background: #fff; border: 2px solid var(--nbs-g); color: var(--nbs-ink); text-align: center; }
.nbs-camp__eyebrow { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--nbs-g); color: #fff; font-weight: 700; font-size: 12px; line-height: 18px; }
.nbs-camp__title { font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--nbs-g); margin-top: 6px; }
.nbs-camp__lead { font-weight: 700; font-size: 14px; line-height: 1.5; margin-top: 2px; }
.nbs-camp__body { font-weight: 500; font-size: 12px; line-height: 18px; color: var(--nbs-mute); margin-top: 6px; }
.nbs-hero__camp { position: absolute; left: calc(50% - 108px); top: 362px; width: 336px; z-index: 3; }
.nbs-camp--hero { padding: 10px 14px 12px; box-shadow: 0 4px 14px rgba(19, 136, 8, 0.18); background: rgba(255, 255, 255, 0.96); }
.nbs-camp--hero .nbs-camp__title { font-size: 18px; }
.nbs-camp--hero .nbs-camp__lead { font-size: 13px; }
.nbs-camp--plan { max-width: 640px; margin: 32px auto 0; padding: 16px 20px 18px; background: var(--nbs-mint); border-color: var(--nbs-g); }
.nbs-plan__cards { margin-top: 28px; }
.nbs-camp--plan + .nbs-plan__cards { margin-top: 36px; }

/* FAQ：キャンペーンの Q に小さなタグ */
.nbs-qa__tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--nbs-g); color: #fff; font-weight: 700; font-size: 11px; line-height: 16px; vertical-align: middle; }
.nbs-qa--camp { border-color: var(--nbs-g); }

/* ---- タブレット（ヒーローのグリッドにキャンペーン枠を入れる） ---- */
@media (max-width: 1279px) {
  .nbs-hero__camp { position: static; width: auto; }
  /* 9/25 ユーザー指摘：static になると grid の auto 列が横いっぱいに伸びて「%OFF」が右端に離れる。列を内容幅にして数字の隣に寄せる */
  .nbs-hero__off { grid-template-columns: max-content max-content; justify-content: start; }
  .nbs-hero__copy { grid-row: 1 / span 3; }
  .nbs-hero__camp { grid-column: 2; grid-row: 2; }
  .nbs-hero__cards { grid-row: 3; }
}
@media (max-width: 989px) {
  .nbs-hero__camp { grid-column: 1; grid-row: auto; }
  /* 1列のときは DOM 順（文言→25%→キャンペーン→特典カード→特徴）で自動配置。上の 1279px 用 grid-row:3 を戻さないと特典カードが特徴カードに重なる（9/25 768px で発覚） */
  .nbs-hero__cards { grid-row: auto; }
}

/* ---- SP（Figma SP 95:1618 に合わせる） ---- */
@media (max-width: 767px) {
  .nbs { --nbs-sec: 64px; }
  .nbs-br-sp { display: inline; }
  .nbs-heading__ja { letter-spacing: -0.01em; }

  /* ヒーロー：文言 → 最大25%OFF → 画像（右寄せ）→ 特徴カード（画像の下端に重ねる）。PC の特典カードは Figma SP に無いので出さない。
     .nbs-hero__bg は .nbs-hero__inner の兄弟なので、inner を display:contents にして hero 直下の flex で order を効かせる（PC の全幅背景はそのまま） */
  /* 9/25 ユーザー指示「KV の範囲は Figma を参考に」：画像を KV 全面の背景にし、文言・25%・特徴カードをその上に載せる。
     製品が文字に重ならないよう object-position で左寄りの空き（画像の上 26% は明るい地）を文言側に持ってくる。画像は引き伸ばさない（Figma は横に潰しているが再現しない） */
  .nbs-hero { display: flex; flex-direction: column; padding: 28px 16px 16px; min-height: clamp(620px, 176vw, 720px); }
  /* 9/25 ユーザー指示：KV と About の間は、About 本文と「定期便のしくみ」の間（.nbs-about__two の margin-top 32px）と同じにする */
  .nbs-about { padding-top: 16px; }  /* KV 下 16 ＋ About 上 16 ＝ 32（About 本文→しくみ と同じ） */
  .nbs-hero__inner { display: contents; }
  .nbs-hero__copy { order: 1; }
  .nbs-hero__off { order: 2; position: relative; left: auto; top: auto; z-index: 2; margin-top: 20px; }
  /* PC 用の left/top/width が relative で効くので解除（9/25 文言が画面外に飛んだ） */
  .nbs-hero__copy, .nbs-hero__camp { position: relative; left: auto; top: auto; width: auto; z-index: 2; }
  .nbs-hero__camp { order: 3; margin-top: 16px; }
  .nbs-hero__bg { order: 0; position: absolute; inset: 0; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; margin: 0; z-index: 0; }
  .nbs-hero__bg { overflow: hidden; }
  /* 9/27 新写真：製品が画像の上下いっぱいなので、幅 115% で右下に置き（製品は x≈80px 以降・y は「25%」より下）、上 12% だけフェード */
  .nbs-hero__bg img { position: absolute; right: -30%; bottom: 64px; width: 135%; max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: fill; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); -webkit-mask-composite: source-over; mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-composite: add; }
  /* 文言側を Figma SP の高さに近づけ、「25%」が製品より上に収まるようにする */
  .nbs-hero__title { font-size: 34px; line-height: 40px; }
  .nbs-hero__btns { margin-top: 20px; gap: 8px; }
  .nbs-hero__btns .nbs-btn { padding: 10px 20px; }
  .nbs-hero__off { margin-top: 12px; }
  .nbs-hero__cards { display: none; }
  .nbs-hero__features { order: 5; position: relative; left: auto; top: auto; z-index: 2; margin: 24px 0 0; margin-top: auto; width: 100%; max-width: none; height: auto; padding: 10px 6px 12px; gap: 0; flex-wrap: nowrap; align-items: flex-start; }
  .nbs-hero__features li { width: 25%; padding: 0 2px; }
  .nbs-hero__features img { width: 35px; height: 35px; }
  .nbs-hero__features span { font-size: 11px; line-height: 15px; white-space: normal; text-align: center; margin-top: 4px; }
  .nbs-hero__lead { font-size: 14px; line-height: 24px; margin-top: 10px; }
  .nbs-hero__btns { margin-top: 24px; }
  .nbs-hero__off-label { font-size: 20px; padding-left: 8px; }
  .nbs-hero__off-num { font-size: 88px; }
  .nbs-hero__off-unit span:first-child { font-size: 36px; }
  .nbs-hero__off-unit span:last-child { font-size: 22px; }

  /* メリット：番号は左上、アイコンと文字は中央寄せ（Figma SP） */
  .nbs-merit { padding: 40px 0 48px; }
  .nbs-mitem { flex-direction: column; text-align: center; padding: 36px 0 24px; gap: 16px; }
  .nbs-mitem__no { left: 8px; top: 8px; font-size: 30px; line-height: 1; }
  .nbs-mitem__icon { width: 100px; height: 100px; }
  .nbs-mitem__text h3 { font-size: 22px; line-height: 1.5; }
  .nbs-mitem__text p { font-size: 14px; line-height: 20px; margin-top: 10px; }

  /* プラン：2×2（Figma SP）。max-width を外して半分ずつ */
  .nbs-plan__cards { gap: 20px 16px; }
  .nbs-plan-card { width: calc(50% - 8px); max-width: none; min-height: 0; padding: 20px 12px 16px; }
  .nbs-plan-card__price { font-size: 28px; line-height: 30px; }
  .nbs-plan-card__unit { font-size: 10px; }
  .nbs-plan-card__btn { width: 100%; margin-top: 4px; }
  .nbs-camp--plan { margin-top: 24px; padding: 14px 16px 16px; }

  /* Present：カードは幅いっぱいに縦積み、アイコンは上に重ねる（Figma SP） */
  .nbs-present__cards { gap: 64px; margin-top: 16px; padding-top: 24px; }
  .nbs-prcard { width: 100%; max-width: 420px; }
  .nbs-present__lead br { display: none; }
  .nbs-mprice { padding: 16px; }
  .nbs-mprice__table th, .nbs-mprice__table td { padding: 8px 4px; }
  .nbs-mprice__member { font-size: 16px; }

  .nbs-lineup__cta { margin-top: 32px; }
  .nbs-lineup__cta .nbs-btn { width: 100%; }
  .nbs-faq { padding-bottom: 96px; }
}
@media (max-width: 479px) {
  .nbs-hero { padding: 24px 16px 16px; }
  .nbs-hero__btns .nbs-btn { width: auto; }  /* Figma SP はボタン幅 148（内容幅） */
  .nbs-hero__title { font-size: 32px; line-height: 44px; }
  .nbs-hero__off-num { font-size: 88px; }
  .nbs-plan-card { padding: 18px 10px 14px; }
  .nbs-plan-card__icons img { width: 40px; height: 58px; margin-right: -18px; }
  .nbs-plan-card__reco { right: -18px; top: 26px; width: 42px; height: 42px; font-size: 9px; }
}
@media (max-width: 359px) {
  .nbs-hero__title { font-size: 28px; line-height: 40px; }
  .nbs-hero__off-num { font-size: 76px; }
  .nbs-hero__features span { font-size: 10px; }
  .nbs-plan-card__icons img { width: 34px; height: 50px; margin-right: -16px; }
  .nbs-plan-card__price { font-size: 24px; }
  .nbs-circles li { width: 112px; height: 112px; font-size: 11px; }
}

/* ---- 9/27 会員価格の率確定（1・2本 15%／3・4本 20%）：レンジ表記と、プランカード・価格表の列 ---- */
.nbs-passcard__pct--range b { font-size: 26px; letter-spacing: -0.01em; }
.nbs-prcard__rate--range { font-size: 18px; letter-spacing: -0.02em; }
.nbs-prcard__rate--range small { font-size: 10px; }
.nbs-plan-card__perk { margin: -6px 0 10px; padding: 2px 8px; border-radius: 999px; background: var(--nbs-mint); font-size: 11px; line-height: 16px; font-weight: 500; color: var(--nbs-g); white-space: nowrap; }
.nbs-plan-card__perk b { font-weight: 800; }
.nbs-mprice__table th small { display: block; font-weight: 800; font-size: 11px; color: var(--nbs-y); }
.nbs-mprice__table th:first-child { min-width: 9em; }
.nbs-mprice { max-width: 760px; }
@media (max-width: 767px) {
  .nbs-plan-card__perk { font-size: 10px; padding: 2px 6px; white-space: normal; }
  .nbs-mprice__table { font-size: 12px; }
  .nbs-mprice__table th:first-child { min-width: 0; }
  .nbs-mprice__member { font-size: 14px; }
}

/* 9/27 ユーザー指示：SP の KV 文言（見出し・リード・ボタン）を中央揃え */
@media (max-width: 767px) {
  .nbs-hero__copy { text-align: center; }
  .nbs-hero__lead { padding-left: 0; }
  .nbs-hero__btns { align-items: center; }
}

/* 9/28 ユーザー指示：About→Merit の接合部をグラデーションで滑らかに。
   元の緑の帯 .nbs-about__band（aria-hidden="true"）はテーマ側の規則で display:none になっており本番では一度も描画されていなかった＝カードの下端 25px が Merit の緑に直接乗って「継ぎ目」に見えていた。
   帯の役目を ::after に移し、白→淡い緑→ブランド緑の縦グラデーションにする（高さ・位置は Figma の帯と同じ 103px／-78px。色は公式パレットのみ） */
.nbs-about__band { display: none; }
.nbs-about::after { content: ""; display: block; height: 103px; margin-top: -78px; background: linear-gradient(to bottom, #fff 0%, #e8f5e6 28%, #138808 100%); }
/* カードの影は緑の上で濁らないよう緑系のまま、少し弱める */
.nbs-acard--pass { box-shadow: 0 4px 10px rgba(19, 136, 8, 0.18); }

/* 9/28 ユーザー指示：会員価格の表は出さず、条件文だけ残す */
.nbs-mprice--cond-only { max-width: 760px; margin-top: 32px; padding: 16px 20px; }
.nbs-mprice--cond-only .nbs-mprice__cond { margin-top: 0; text-align: center; }

/* 9/28 ユーザー指示：Present の導入文とカード上のアイコン（-49px にはみ出す）が重なるので、カード群の上余白を広げる */
.nbs-present__cards { margin-top: 44px; padding-top: 49px; }
@media (max-width: 767px) {
  .nbs-present__cards { margin-top: 36px; padding-top: 49px; }
}

/* 9/28 フォント監査：<b> の既定 bolder で 900 になる箇所が1つ（ヒーロー特典カードの率）。Gen Interface JP は 800 までなので 800 に固定（見た目は同じ、フォールバック要因を消すため） */
.nbs-passcard__pct b { font-weight: 800; }

/* 9/28 ユーザー指示：プランカードの「1本あたり」行を撤去。会員価格チップは価格の下に少し間を空ける */
.nbs-plan-card__perk { margin: 10px 0 14px; }

/* 9/28 ユーザー指示：「定期便で選べる6シリーズ」のラベルをもう少し上に（帯の上余白とラベルの padding を詰め、グリッドとの間は保つ） */
.nbs-band { margin-top: 24px; }
.nbs-band__label { padding-top: 0; }
.nbs-band__label img { margin: -32px 6px -20px 0; }
.nbs-band .nbs-pgrid { margin-top: 32px; }
/* アイコンの煙が注記に触れないよう、アイコンの上へのはみ出しを抑える */
.nbs-band { margin-top: 30px; }
.nbs-band__label img { margin: -18px 6px -26px 0; }

/* 9/28 ユーザー指示：SP の KV を Figma SP（95:1618）と同じ配置に＝文言・ボタン・「最大25%OFF」は左寄せ、製品写真は右〜下に広く敷き、特徴カードは写真の上に重ねる */
@media (max-width: 767px) {
  .nbs-hero { padding: 24px 16px 16px; min-height: clamp(640px, 184vw, 760px); }
  .nbs-hero__copy { text-align: left; }
  .nbs-hero__btns { align-items: flex-start; }
  .nbs-hero__btns .nbs-btn { width: auto; }
  .nbs-hero__off { margin-top: 16px; }
  .nbs-hero__bg img { right: -34%; bottom: 40px; width: 150%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%); }
  .nbs-hero__features { margin-top: auto; }
}
/* 写真をもう少し上に上げ、上段の製品がボタン〜25% の右横に来るように（Figma SP の見え方に寄せる） */
@media (max-width: 767px) {
  .nbs-hero { min-height: clamp(660px, 190vw, 780px); }
  .nbs-hero__bg img { right: -38%; bottom: 56px; width: 160%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%); mask-image: linear-gradient(to bottom, transparent 0, #000 8%); }
}

/* 9/28 ユーザー指示：Merit→Plan の接合部にも About→Merit と同じグラデーション（緑→淡い緑→白、103px） */
.nbs-merit { padding-bottom: 0; }
.nbs-merit::after { content: ""; display: block; height: 103px; margin-top: 40px; background: linear-gradient(to bottom, #138808 0%, #e8f5e6 72%, #fff 100%); }
@media (max-width: 767px) {
  .nbs-merit { padding-bottom: 0; }
  .nbs-merit::after { margin-top: 16px; }
}

/* 9/28 ユーザー依頼（dell-ec 経由）：SP でプランカードの「申し込む」の高さを揃える。SP 用に付けていた margin-top:4px が auto を打ち消していた。チップは2行分の高さを確保して4枚とも同じ高さに */
@media (max-width: 767px) {
  .nbs-plan-card { display: flex; flex-direction: column; }
  .nbs-plan-card__perk { min-height: 34px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 15px; }
  .nbs-plan-card__btn { margin-top: auto; }
}
/* おすすめカードは 2px の枠がある分、下 padding を 2px 減らしてボタンの縦位置を他と完全に揃える */
@media (max-width: 767px) { .nbs-plan-card.is-recommend { padding-bottom: 14px; } }
@media (max-width: 479px) { .nbs-plan-card.is-recommend { padding-bottom: 12px; } }
/* 4枚とも同じ箱にする：非おすすめにも透明の 2px 枠を持たせ、padding を統一（おすすめだけ枠色を付ける） */
@media (max-width: 767px) {
  .nbs-plan-card, .nbs-plan-card.is-recommend { border: 2px solid transparent; padding: 20px 12px 16px; }
  .nbs-plan-card.is-recommend { border-color: var(--nbs-gold); }
}
@media (max-width: 479px) {
  .nbs-plan-card, .nbs-plan-card.is-recommend { padding: 18px 10px 14px; }
}

/* 9/28 ユーザー指摘「修正されていない」（dell-ec）：SP のチップが flex だと「通常のお買い物」＋「も」＋「15%OFF」と崩れ、
   カードごとに行数が変わってボタンの縦位置もずれた。4枚とも「通常のお買い物も／15%OFF」の2行に固定する */
@media (max-width: 767px) {
  .nbs-plan-card__perk { display: block; min-height: 0; text-align: center; white-space: normal; line-height: 15px; padding: 4px 8px; border-radius: 12px; }
  .nbs-plan-card__perk b { display: block; }
}

/* 9/28 ユーザー指示（dell-ec）：SP の About 本文を4行で折る（方のための／です。／身近に／ご用意しています。）。PC は従来どおり「です。」の後だけで改行 */
.nbs-about__lead br.nbs-lead-br-sp { display: none; }
@media (max-width: 767px) {
  .nbs-about__lead br.nbs-lead-br, .nbs-about__lead br.nbs-lead-br-sp { display: inline; }
}

/* 9/28 ユーザー指示（dell-ec）：SP の改行を Figma の見本に合わせる（メリット01〜03 本文・Plan 見出しの説明文）。
   br.nbs-lead-br-sp は SP だけ、br.nbs-lead-br（PC の元の改行）は PC と SP の両方で出す */
br.nbs-lead-br-sp { display: none; }
@media (max-width: 767px) {
  .nbs-mitem__text p br.nbs-lead-br, .nbs-mitem__text p br.nbs-lead-br-sp, .nbs-heading__sub br.nbs-lead-br-sp { display: inline; }
}

/* 9/28 ユーザー指示：SP のお客様の声を Figma SP 通りの1枚ずつのカルーセル（左右矢印）に。PC はグリッドのまま */
@media (max-width: 767px) {
  .nbs-voice__wrap { position: relative; margin-top: 32px; padding: 0 28px; }
  .nbs-voice__wrap .nbs-voice__grid { display: flex; gap: 16px; margin-top: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0 12px; }
  .nbs-voice__wrap .nbs-voice__grid::-webkit-scrollbar { display: none; }
  .nbs-voice__wrap .nbs-vcard { flex: 0 0 100%; scroll-snap-align: center; min-height: 240px; }
  .nbs-voice__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--nbs-g); z-index: 2; }
  .nbs-voice__arrow::before { content: ""; display: block; width: 12px; height: 12px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; margin: 8px auto 0; }
  .nbs-voice__arrow--prev { left: 0; }
  .nbs-voice__arrow--prev::before { transform: rotate(45deg); }
  .nbs-voice__arrow--next { right: 0; }
  .nbs-voice__arrow--next::before { transform: rotate(-135deg); }
  .nbs-voice__dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
  .nbs-voice__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(19, 136, 8, 0.25); }
  .nbs-voice__dots span.is-active { background: var(--nbs-g); }
}

/* 9/28 dell-ec 指摘：SP で Plan の説明文「…におすすめ！」の「め！」だけが2行目に落ちるので、「方／」の後で折る */
@media (max-width: 767px) {
  .nbs-plan__lead br.nbs-lead-br-sp { display: inline; }
}

/* 9/29 ユーザー指示：PC のメリット本文の改行を Figma に合わせる。文字列が折り返さないよう本文の列を広げ（338→約414px）、句読点の位置で改行する */
@media (min-width: 768px) {
  .nbs-mitem { padding: 33px 0 33px 48px; gap: 14px; }
  .nbs-mitem__text { min-width: 0; flex: 1 1 auto; }
  .nbs-mitem__text p br.nbs-lead-br { display: inline; }
}

/* 9/28 ユーザー指示：Present の上下の接合部にもグラデーション（Merit→Plan と同じ 103px）。
   上＝Lineup（淡い緑 #f4f9f2）→ Present（緑）は Lineup の ::after、下＝Present（緑）→ How to start（淡い緑）は Present の ::after。
   Present の煙（absolute・top 基準）と Flow の人物（top:-97px）は位置が変わらないよう、どちらも自分の下端側に付ける */
.nbs-lineup { padding-bottom: 0; }
.nbs-lineup::after { content: ""; display: block; height: 103px; margin-top: 40px; background: linear-gradient(to bottom, #f4f9f2 0%, #e8f5e6 28%, #138808 100%); }
.nbs-present { padding-bottom: 0; }
.nbs-present::after { content: ""; display: block; height: 103px; margin-top: 40px; background: linear-gradient(to bottom, #138808 0%, #e8f5e6 72%, #f4f9f2 100%); }
@media (max-width: 767px) {
  .nbs-lineup, .nbs-present { padding-bottom: 0; }
  .nbs-lineup::after, .nbs-present::after { margin-top: 16px; }
}

/* 9/29 ユーザー指示：Plan→Lineup と How to start→User's Voice の接合部にもグラデーション（Present 上下と同じ 103px）。
   Plan（白）→ Lineup（淡い緑 #f4f9f2）は Plan の ::after、Flow（淡い緑）→ Voice（白）は Flow の ::after。
   Plan の煙（top:-217px）と Flow の人物（top:-97px）はどちらも上端基準の absolute なので、下端に付けても位置は変わらない */
.nbs-plan { padding-bottom: 0; }
.nbs-plan::after { content: ""; display: block; height: 103px; margin-top: 40px; background: linear-gradient(to bottom, #fff 0%, #f4f9f2 100%); }
.nbs-flow { padding-bottom: 0; }
.nbs-flow::after { content: ""; display: block; height: 103px; margin-top: 40px; background: linear-gradient(to bottom, #f4f9f2 0%, #fff 100%); }
@media (max-width: 767px) {
  .nbs-plan, .nbs-flow { padding-bottom: 0; }
  .nbs-plan::after, .nbs-flow::after { margin-top: 16px; }
}

/* ---- 9/29 ユーザー指示：キャンペーンの期間を明記、KV 内の枠はポップアップに ---- */
.nbs-camp__period { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 3px 12px 3px 4px; border-radius: 999px; background: #fff; border: 1px solid var(--nbs-g); color: var(--nbs-g); font-weight: 700; font-size: 13px; line-height: 20px; }
.nbs-camp__period span { white-space: nowrap; font-size: 11px; padding: 0 8px; border-radius: 999px; background: var(--nbs-g); color: #fff; line-height: 18px; }
.nbs-plan-card__camp { font-size: 11px; }
.nbs-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.nbs-popup[hidden] { display: none; }
.nbs-popup__backdrop { position: absolute; inset: 0; background: rgba(18, 18, 18, 0.55); }
.nbs-popup__box { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border: 3px solid var(--nbs-g); border-radius: 20px; padding: 36px 28px 28px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: nbs-pop .35s ease-out; }
@keyframes nbs-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
.nbs-popup__close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--nbs-mint); color: var(--nbs-g); font-size: 24px; line-height: 36px; padding: 0; cursor: pointer; }
.nbs-popup__eyebrow { display: inline-block; padding: 3px 14px; border-radius: 999px; background: var(--nbs-g); color: #fff; font-weight: 700; font-size: 12px; line-height: 18px; }
.nbs-popup__title { font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--nbs-ink); margin-top: 12px; }
.nbs-popup__off { display: flex; align-items: baseline; justify-content: center; gap: 4px; color: var(--nbs-sale); margin-top: 2px; }
.nbs-popup__off span { font-weight: 700; font-size: 18px; }
.nbs-popup__off b { font-weight: 700; font-size: 72px; line-height: 1.1; letter-spacing: -0.03em; }
.nbs-popup__lead { font-weight: 700; font-size: 14px; line-height: 1.6; color: var(--nbs-ink); margin-top: 6px; }
.nbs-popup__period { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--nbs-mint); color: var(--nbs-g); font-weight: 700; font-size: 14px; line-height: 20px; }
.nbs-popup__period span { white-space: nowrap; font-size: 11px; padding: 0 9px; border-radius: 999px; background: var(--nbs-g); color: #fff; line-height: 20px; }
.nbs-popup__body { font-size: 12px; line-height: 18px; color: var(--nbs-mute); margin-top: 12px; }
.nbs-popup__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; }
html.nbs-popup-open { overflow: hidden; }
@media (max-width: 767px) {
  .nbs-popup__box { padding: 32px 20px 22px; }
  .nbs-popup__title { font-size: 19px; }
  .nbs-popup__off b { font-size: 60px; }
  /* SP はタグ（期間限定／期間）を上、日時を下に縦積み。タグは折らない */
  .nbs-popup__period { flex-direction: column; gap: 4px; padding: 8px 16px 10px; border-radius: 14px; font-size: 13px; }
  .nbs-camp__period { flex-direction: column; gap: 4px; padding: 6px 12px 8px; border-radius: 12px; font-size: 12px; }
  .nbs-popup__period span, .nbs-camp__period span { white-space: nowrap; }
}

/* ---- 9/29 ユーザー指示：キャンペーン期間中はプランカードの価格を 通常（打ち消し）→ 初月 の2段に ---- */
.nbs-plan-card__regular { margin-top: 8px; font-weight: 700; font-size: 12px; line-height: 16px; color: var(--nbs-mute); }
.nbs-plan-card__regular s { font-size: 15px; text-decoration-thickness: 2px; text-decoration-color: var(--nbs-sale); margin: 0 1px; }
.nbs-plan-card__regular span { font-size: 11px; }
.nbs-plan-card__price--camp { margin-top: 0; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 28px; line-height: 32px; white-space: nowrap; color: var(--nbs-sale); }
.nbs-plan-card__first { display: inline-block; flex: none; padding: 1px 7px; border-radius: 999px; background: var(--nbs-g); color: #fff; font-size: 11px; line-height: 16px; letter-spacing: 0; white-space: nowrap; }
.nbs-plan-card__after { margin: 4px 0 2px; font-weight: 500; font-size: 10px; line-height: 14px; color: var(--nbs-mute); }
.nbs-plan-card__after + .nbs-plan-card__perk { margin-top: 6px; }
@media (max-width: 767px) {
  .nbs-plan-card__price--camp { font-size: 24px; line-height: 28px; gap: 4px; }
  .nbs-plan-card__regular s { font-size: 14px; }
  .nbs-plan-card__after { font-size: 9px; }
}
@media (max-width: 374px) {
  .nbs-plan-card__price--camp { font-size: 20px; }
}

/* ---- 9/29 ユーザー承認：赤い数字＝割引後の価格（カードの初月価格・ポップアップの 50%OFF・打ち消し線）。タグ・バッジ・ボタンは緑のまま ---- */
.nbs { --nbs-sale: #d32f2f; }

/* 9/29 ユーザー指示：Lineup ラベルのイラストの位置を調整。Figma（95:461）ではアイコンの中心が文字の中心より約8px上、アイコン下端とカードの間は約25px。
   9/28 の -18/-26 で 5px 下がりカードまで 9px しか無かったので 13px 上げる。煙が注記（※ 対象機種は…）に触れないよう帯の上余白を 8px 足す */
.nbs-band { margin-top: 38px; }
.nbs-band__label img { margin: -31px 6px -13px 0; }

/* 9/29 ユーザー指示：Present の初回クーポンカード。円の中の「50%OFF」は他のカードの白いアイコンと同じく白で（緑だと円の上で読めない） */
.nbs-prcard__rate { color: #fff; font-size: 28px; }
.nbs-prcard__rate small { font-size: 12px; }

/* 9/29 ユーザー指示：KV の「定期便は最大 25%OFF」を左へ（右端の OFF が製品写真の IPLAY と重なっていた）。
   PC の絶対配置だけ 64px 左（1440px：612→548px、1280px：532→468px。製品との間は約70px、左の見出し文とは重ならない）。1279px 以下は grid 配置なので対象外 */
@media (min-width: 1280px) {
  .nbs-hero__off { left: calc(50% - 172px); }
}

/* 9/29 ユーザー指示：Present の円（96px）に対して「50%OFF」が大きすぎる → 「50%」24px の下に「OFF」11px を重ねる2段に */
.nbs-prcard__rate { flex-direction: column; gap: 3px; font-size: 24px; line-height: 1; letter-spacing: -0.02em; }
.nbs-prcard__rate small { font-size: 11px; line-height: 1; margin-left: 0; letter-spacing: 0.06em; }

/* 9/29：ポップアップの暗い背景が出ていなかった。テーマ base.css の div:empty{display:none} に消されていたので display を明示 */
.nbs-popup__backdrop { display: block !important; }

/* ==KV-PC-20260929== */
/* 9/29 ユーザー指示：PC 版の KV を新しい写真（16:9、製品は右 42〜98%・上 11〜89%、左は余白）に差し替え。1280px 以上だけ。
   テンプレートの <img>（hero-bg.webp）は SP・タブレット用に残し、PC では隠して背景画像で出す。
   置き方：幅 1380px（1280〜1439px は画面幅の 95.8%）を 1440 枠の右端に揃え、上に幅の 6.1% だけはみ出させる
   ＝最上段の KEYSTONE がヘッダー直下に触れ、下段（VOZOL・RIFBAR・IPLAY・NASTY）が特徴カードの上に見える（全幅 1440 だと下段がカードに半分隠れた）。
   写真の左端と下端（ヒーローの下端より少し上で終わる）はフェードで地の色につなぐ。1441px 以上は右端もフェード */
@media (min-width: 1280px) {
  .nbs-hero__bg { --nbs-kv-w: min(1380px, 95.8vw); left: auto; right: max(0px, calc(50% - 720px)); top: calc(var(--nbs-kv-w) * -0.061); bottom: auto; width: var(--nbs-kv-w); height: auto; aspect-ratio: 16 / 9; transform: none;
    background-image: url(hero-bg-pc.webp); background-image: -webkit-image-set(url(hero-bg-pc-1920.webp) 1x, url(hero-bg-pc.webp) 2x); background-image: image-set(url(hero-bg-pc-1920.webp) 1x, url(hero-bg-pc.webp) 2x);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, #000 calc(100% - 70px), transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, #000 calc(100% - 70px), transparent 100%); mask-composite: intersect; }
  .nbs-hero__bg img { visibility: hidden; -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 1441px) {
  .nbs-hero__bg { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 calc(100% - 80px), transparent 100%), linear-gradient(to bottom, #000 calc(100% - 70px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 calc(100% - 80px), transparent 100%), linear-gradient(to bottom, #000 calc(100% - 70px), transparent 100%); }
}

/* 9/29 ユーザー指示：プランカードのバッジ「初月50%OFF」の「50」を目立たせる（数字だけ大きく・黄色。JS が数字を b.nbs-plan-card__camp-num に包む） */
.nbs-plan-card__camp { display: inline-flex; align-items: baseline; top: -15px; padding: 3px 12px 4px; font-size: 12px; line-height: 20px; box-shadow: 0 2px 6px rgba(19, 136, 8, 0.25); }
.nbs-plan-card__camp-num { margin: 0 1px 0 2px; font-family: var(--nbs-en); font-weight: 800; font-size: 21px; line-height: 20px; letter-spacing: -0.02em; color: #ffe600; }

/* 9/29 ユーザー指示：キャンペーン枠の「…初月のお届けが50%OFF」の 50 を目立たせる（「50%OFF」を赤、数字は約2倍。赤い数字＝割引のルールどおり） */
.nbs-camp__lead-off { display: inline-block; margin-left: 4px; color: var(--nbs-sale); font-weight: 800; white-space: nowrap; }
.nbs-camp__lead-off b { margin-right: 1px; font-family: var(--nbs-en); font-weight: 800; font-size: 2em; line-height: 1; letter-spacing: -0.03em; vertical-align: -0.08em; }
.nbs-camp--plan .nbs-camp__lead { margin-top: 0; }

/* 9/29 ユーザー指示：Present のカード本文の「15%OFF」「20%OFF」「50%OFF」を目立たせる（緑の地なので黄色。数字と % は約1.6倍） */
.nbs-prcard__off { display: inline-block; margin-left: 2px; color: #ffe600; font-weight: 800; white-space: nowrap; }
.nbs-prcard__off b { margin-right: 1px; font-family: var(--nbs-en); font-weight: 800; font-size: 1.6em; line-height: 1; letter-spacing: -0.02em; vertical-align: -0.06em; }
.nbs-prcard p { line-height: 1.55; }

/* 9/29 SP の折り返し（ユーザー依頼「SP版の改行がおかしくないか確認」）：JS が文を区切りごとに span.nbs-ph に包む。SP ではその単位で折る。
   あわせて見出しは行の長さをそろえ（1文字だけ次の行に落ちない）、本文は最後の行が極端に短くならないようにする（対応ブラウザのみ。非対応でも崩れない） */
.nbs-ph { display: inline; }
.nbs-ph, .nbs-phs { font-style: normal; }
@media (max-width: 767px) {
  .nbs-ph { display: inline-block; max-width: 100%; }
  .nbs-heading__ja, .nbs-heading__sub, .nbs-qa__q, .nbs-flow h3, .nbs-pcard__name, .nbs-prcard h3, .nbs-mitem h3 { text-wrap: balance; }
  .nbs-qa__a p, .nbs-vcard__text, .nbs-mitem p, .nbs-flow li, .nbs-flow p, .nbs-mprice__cond, .nbs-acard__list li { text-wrap: pretty; }
  /* ポップアップの期間：タグの下に「9月30日（水）20:00 〜」「10月7日（水）23:59」の2行 */
  .nbs-popup__period .nbs-phs, .nbs-camp__period .nbs-phs { display: block; text-align: center; }
}

/* 9/29 U-21：「はじめの3か月コース」の解約の注記（しくみカード・ご利用の流れ）。本文より小さく控えめに */
.nbs-course-note { display: block; margin-top: 2px; font-size: 11px; line-height: 1.5; font-weight: 500; opacity: 0.85; text-decoration: none; }
/* 会員特典の説明：SP でも文の間の改行（br）を効かせ、文の途中では区切り（、や（）の位置で折る */
@media (max-width: 767px) { .nbs-present__lead br { display: inline !important; } .nbs-present__lead { text-wrap: wrap; } }

/* ==KV-SP-20260929== */
/* 9/29 ユーザー指示：SP 版の KV。縦長の新しい写真（3072×5504）を、Figma SP（95:1625）の感じで置く。767px 以下だけ。
   Figma の感じ＝写真が KV 全体の地になり、製品はボタンと「25%OFF」の右側から始まって、下の段が「25%OFF」の下に来る。そのすぐ下に特徴カード。
   テンプレートの <img>（hero-bg.webp）は 768〜1279px 用に残し、SP では隠して背景画像で出す。
   画像 hero-bg-sp2.webp は、写真の左（幅の 32%）・上（50%）・下（20%）に地を延ばしたもの（scratchpad の build_canvas.py）。写真そのものの幅を P とする。
   写真の中の製品の位置（幅・高さに対する比）：INFLAVE の左端 33.6%／右上の緑の右端 93%／左下の段（VOZOL）の上端 65.4%／製品の下端 81%。高さは幅の 179.17%。
   置き方：
     横  INFLAVE の左端を「25%OFF」の右端＋6px（--nbs-kv-l）に、緑の右端を画面の右端−4px に合わせる → P =（100vw − 4px − l）÷ 0.594。P は画面幅まで
     縦  左下の段の上端を「25」の下端（--nbs-kv-ob）に合わせる → 写真の上端 y = ob − 1.1718P
     高さ 製品の下端（y ＋ 1.4513P）＋ 6px ＋ 特徴カード 91px ＋ 下の余白 16px ＝ ob ＋ 113px ＋ 0.2795P
   359px 以下は文字が小さくなる（「25」が 76px）ので、l と ob をその寸法に合わせる */
@media (max-width: 767px) {
  .nbs-hero {
    --nbs-kv-l: 170px;
    --nbs-kv-ob: 443px;
    --nbs-kv-p: min(calc((100vw - 4px - var(--nbs-kv-l)) / 0.594), 100vw);
    --nbs-kv-x: calc(100vw - 4px - 0.93 * var(--nbs-kv-p));
    --nbs-kv-y: calc(var(--nbs-kv-ob) - 1.1718 * var(--nbs-kv-p));
    min-height: calc(var(--nbs-kv-ob) + 113px + 0.2795 * var(--nbs-kv-p));
  }
  .nbs-hero__bg { background-image: url(hero-bg-sp2-750.webp); background-image: -webkit-image-set(url(hero-bg-sp2-750.webp) 1x, url(hero-bg-sp2.webp) 2x); background-image: image-set(url(hero-bg-sp2-750.webp) 1x, url(hero-bg-sp2.webp) 2x);
    background-size: calc(1.32 * var(--nbs-kv-p)) auto; background-position: calc(var(--nbs-kv-x) - 0.32 * var(--nbs-kv-p)) calc(var(--nbs-kv-y) - 0.5 * var(--nbs-kv-p)); background-repeat: no-repeat;
    -webkit-mask-image: none; mask-image: none; }
  .nbs-hero__bg img { visibility: hidden; }
}
@media (max-width: 359px) {
  .nbs-hero { --nbs-kv-l: 157px; --nbs-kv-ob: 419px; }
}

/* ==SP-NARROW-20260929== */
/* 9/29 ユーザー指示「直して」：幅の狭い画面のヘッダー。ロゴ＋SUBSCRIPTION＋メニューボタンが 372px 無いと収まらず、
   メニューボタンが押しつぶされる（360px）・右端で切れる（320px）。余白と間隔を詰め、343px 以下はロゴとバッジも少し小さくする */
@media (max-width: 374px) {
  .nbs-header__inner { padding: 0 16px; gap: 8px; }
  .nbs-header__burger { flex: none; }
}
@media (max-width: 343px) {
  .nbs-header__logo { gap: 6px; }
  .nbs-header__logo img { width: 118px; height: auto; }
  .nbs-header__badge { padding: 2px 6px; font-size: 11px; letter-spacing: 0.04em; }
}

/* ==PLAN-20260930== */
/* 9/30 ユーザー指示：SP 版の PLAN の5つの円を五角形に並べる（767px 以下。PC・タブレットは横一列のまま）。
   正五角形の頂点に円の中心を置く＝上1・中2・下2。隣り合う円のすき間はどこも --nbs-pg。HTML の順番（読み上げ順）は変えず、上 → 中段の左右 → 下段の左右 に置く。
   辺 s = 円の直径 d ＋ すき間、外接円の半径 R = s ÷ (2·sin36°) = s × 0.85065。
   頂点（中心からの比）：上 (0, −1)／中段 (±0.95106, −0.30902)／下段 (±0.58779, +0.80902)。全体の幅 = 1.90211R + d、高さ = 1.80902R + d。
   d は画面幅から逆算（幅 = 2.618d + 1.618×すき間 が、左右の余白 16px×2 を引いた幅に収まる最大）。上限 124px（これまでの SP の円と同じ）。320px で 106px */
@media (max-width: 767px) {
  .nbs-circles {
    --nbs-pg: 6px;
    --nbs-pd: clamp(96px, calc((100vw - 42px) / 2.618), 124px);
    --nbs-pr: calc((var(--nbs-pd) + var(--nbs-pg)) * 0.85065);
    position: relative; display: block; flex-wrap: nowrap; gap: 0;
    width: calc(var(--nbs-pr) * 1.90211 + var(--nbs-pd)); height: calc(var(--nbs-pr) * 1.80902 + var(--nbs-pd));
    margin-left: auto; margin-right: auto;
  }
  .nbs-circles li { position: absolute; width: var(--nbs-pd); height: var(--nbs-pd); left: calc(50% - var(--nbs-pd) / 2 + var(--nbs-pr) * var(--nbs-px)); top: calc(var(--nbs-pr) * (1 + var(--nbs-py))); }
  .nbs-circles li:nth-child(1) { --nbs-px: 0; --nbs-py: -1; }
  .nbs-circles li:nth-child(2) { --nbs-px: -0.95106; --nbs-py: -0.30902; }
  .nbs-circles li:nth-child(3) { --nbs-px: 0.95106; --nbs-py: -0.30902; }
  .nbs-circles li:nth-child(4) { --nbs-px: -0.58779; --nbs-py: 0.80902; }
  .nbs-circles li:nth-child(5) { --nbs-px: 0.58779; --nbs-py: 0.80902; }
}

/* 9/30 ユーザー指示：「定期便をはじめる」の移動先を、4つのプランカードが並ぶ位置（#plan-cards）に。
   固定ヘッダー（64px）とカードの上にはみ出すバッジ（15px）に隠れないよう、その分だけ手前で止める */
#plan-cards { scroll-margin-top: 104px; }

/* 9/30 ユーザー指示：プランカードに、単品で買った場合の金額と差額を出す。
   打ち消し線と赤は使わない（打ち消し＝キャンペーン中の定期便の通常月額、赤＝割引後の価格、という 9/29 のルールと混ざらないように）。金額は灰色、差額は緑 */
.nbs-plan-card__single { width: 100%; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(19, 136, 8, 0.3); font-weight: 500; font-size: 11px; line-height: 16px; color: var(--nbs-mute); }
.nbs-plan-card__single-price, .nbs-plan-card__save { display: block; white-space: nowrap; }
.nbs-plan-card__single-price b { font-weight: 700; font-size: 13px; color: var(--nbs-ink); margin-left: 1px; }
.nbs-plan-card__save { margin-top: 1px; font-weight: 700; font-size: 12px; color: var(--nbs-g); }
.nbs-plan-card__save b { font-weight: 800; font-size: 15px; margin: 0 1px; }
.nbs-plan-card__single + .nbs-plan-card__perk, .nbs-plan-card__after + .nbs-plan-card__single + .nbs-plan-card__perk { margin-top: 8px; }
.nbs-plan-card__after + .nbs-plan-card__single { margin-top: 6px; }
@media (max-width: 767px) {
  .nbs-plan-card__single { font-size: 10px; line-height: 15px; }
  .nbs-plan-card__single-price b { font-size: 12px; }
  .nbs-plan-card__save { font-size: 11px; }
  .nbs-plan-card__save b { font-size: 14px; }
}
@media (max-width: 359px) {
  .nbs-plan-card__save { font-size: 10px; letter-spacing: -0.02em; }
  .nbs-plan-card__save b { font-size: 13px; }
}
/* 注記（単品の金額の条件）。1文ずつ行を分け（.nbs-nl）、幅が足りないときは意味のまとまり（.nbs-nw）でだけ折る */
.nbs-plan__note--single { margin-top: 6px; font-size: 11px; line-height: 17px; }
.nbs-nl { display: block; }
.nbs-nw { display: inline-block; white-space: nowrap; }
/* 比較表（config 'display' が table／both のとき。カードの下） */
.nbs-single { max-width: 520px; margin: 24px auto 0; padding: 16px 16px 12px; border-radius: 16px; background: var(--nbs-mint); }
.nbs-single__title { text-align: center; font-weight: 700; font-size: 14px; line-height: 20px; color: var(--nbs-g); }
.nbs-single__table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; line-height: 18px; text-align: center; background: #fff; border-radius: 10px; overflow: hidden; }
.nbs-single__table th, .nbs-single__table td { padding: 8px 4px; border-bottom: 1px solid var(--nbs-line); font-weight: 500; white-space: nowrap; }
.nbs-single__table thead th { font-size: 11px; font-weight: 700; color: var(--nbs-mute); background: #fff; }
.nbs-single__table tbody tr:last-child th, .nbs-single__table tbody tr:last-child td { border-bottom: 0; }
.nbs-single__table tbody th { font-weight: 700; }
.nbs-single__table td { color: var(--nbs-mute); }
.nbs-single__table .nbs-single__sub { font-weight: 800; font-size: 15px; color: var(--nbs-ink); }
.nbs-single__table .nbs-single__save { font-weight: 800; color: var(--nbs-g); }
@media (max-width: 359px) {
  .nbs-single { padding: 12px 8px 8px; }
  .nbs-single__table { font-size: 12px; }
}

/* ==LP2-20260930== */
/* 9/30 ユーザー指示（1.2.3）：右下の「ページの先頭へ」（VAPE の絵）と、テーマの「上へ」ボタン（.nicobay-scroll-to-top・緑の丸）が重なっていた。
   役割が同じなので、LP では VAPE の絵だけを残し、テーマのボタンは LP のページだけ隠す（テーマは触らない）。
   VAPE の絵は緑なので、緑の地（Merit・Present）の上でも見えるように白い地を敷く */
body.nbs-body .nicobay-scroll-to-top { display: none !important; }
.nbs-pagetop { padding: 10px 8px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 10px rgba(18, 18, 18, 0.14); }

/* 9/30 ユーザー指示：Present の条件を箇条書きに。折り返しは意味のまとまり（.nbs-nw）でだけ */
.nbs-mprice__cond-title { text-align: center; font-weight: 700; font-size: 13px; line-height: 20px; color: #fff; }
.nbs-mprice__cond-list { display: grid; gap: 6px; width: fit-content; max-width: 100%; margin: 8px auto 0; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, 0.92); text-align: left; }
.nbs-mprice__cond-list li { position: relative; padding-left: 14px; text-wrap: balance; }
.nbs-mprice__cond-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--nbs-y); }
@media (max-width: 767px) {
  .nbs-mprice__cond-list { font-size: 12px; line-height: 19px; }
  .nbs-mprice__cond-list li::before { top: 7px; }
}

/* 9/30 ユーザー指示：ご利用の流れの改行位置。文は1文ずつ行を分け（.nbs-nl）、幅が足りないときは意味のまとまり（.nbs-nw）でだけ折る。
   PC はカードが狭く（文字の幅 215px＝約15字）1行に入る語が少ないので、1200px 以上ではこのセクションだけ枠を広げる（カード 267px → 約335px） */
.nbs-step__title { display: block; min-width: 0; }
.nbs-step p .nbs-nl, .nbs-step li { text-wrap: balance; }
@media (min-width: 1200px) {
  .nbs-flow .nbs-container--narrow { max-width: 1152px; }
}
/* 990〜1199px はカードが狭いまま（267px）。いちばん長いまとまり（16字＝224px）が入るよう、左右の余白を 25px → 20px に */
@media (min-width: 990px) and (max-width: 1199px) {
  .nbs-step { padding-left: 20px; padding-right: 20px; }
}
.nbs-flow__note-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 470px; margin: 12px auto 0; }
.nbs-flow__note-list li { padding: 4px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--nbs-line); font-weight: 500; font-size: 13px; line-height: 20px; color: var(--nbs-mute); white-space: nowrap; }
@media (max-width: 767px) {
  .nbs-flow__note-list { gap: 6px; }
  .nbs-flow__note-list li { padding: 3px 12px; font-size: 12px; }
}
@media (max-width: 359px) {
  .nbs-flow__note-list li { padding: 3px 9px; font-size: 11.5px; }
}

/* 9/30 ユーザー指示：Present の「50%OFF」を少し大きく。2段のまま（9/29 に1行 28px が円に対して大きすぎたので2段にした）。
   ほかの2枚の絵（幅 69〜86px）と同じくらいの大きさに＝「50%」の幅 約68px */
.nbs-prcard__rate { font-size: 32px; gap: 2px; }
.nbs-prcard__rate small { font-size: 13px; }

/* 9/30 ユーザー指示：Merit の上の余白を広げる（40px → PC 80px／SP 64px）。上の About との境目のグラデーションはそのまま */
.nbs-merit { padding-top: 80px; }
@media (max-width: 767px) {
  .nbs-merit { padding-top: 64px; }
}

/* 9/30 ユーザー指示：対象機種のカードはリンクにしない。押せるように見える動き（浮き上がり・影）も外す */
.nbs-pcard--static { cursor: default; }
.nbs-pcard--static:hover { transform: none; box-shadow: none; }

/* 9/30 ユーザー指示（1.2.4）：単品の金額を1本 $29 で計算。決まった価格の例なので、金額の後ろに注記の印（※）を付ける */
.nbs-plan-card__ref { margin-left: 1px; font-size: 9px; line-height: 1; font-weight: 500; color: var(--nbs-mute); vertical-align: super; }

/* 9/30 ユーザー指示（1.2.4）：ご利用の流れの見出し（番号＋見出し）をカードの中央に。本文は左ぞろえのまま */
.nbs-step h3 { justify-content: center; }
/* 2行の見出し（ステップ1）は、まとまりごとに行を分ける。見出しの幅がいちばん長い行の幅になり、番号と見出しの組がカードの中央に来る */
.nbs-step__title .nbs-nw { display: block; }

/* 9/30 ユーザー指示（1.2.5）：KV 下の特徴カードの錠のアイコンが横に伸びていた。元の形は縦長（30×42）なのに、正方形の枠（42×42）いっぱいに引き伸ばされていた
   （Figma から書き出した SVG の preserveAspectRatio="none" が原因）。枠の中で元の形のまま収める。ヘッドセット（35×32）も同じ原因で少し縦に伸びていた。
   SVG のファイルからも引き伸ばしの指定を外した */
.nbs-hero__features img { object-fit: contain; }

/* 9/30 ユーザー指示（1.2.6）：LP の大見出しをすべて太字に。KV の見出し・各セクションの見出し（8つ）・「定期便のしくみ」は 400、Merit の4つの見出しは 500 だった。
   Plan の「NICOBAY定期便」・Present のカード・ご利用の流れの見出しは元から 700。太字にしても折り返しは変わらない（320／375／430／1280px で確認） */
.nbs .nbs-hero__title, .nbs .nbs-heading__ja, .nbs .nbs-about__two, .nbs .nbs-merit h3 { font-weight: 700; }

/* 9/30 ユーザー指示（1.2.10）：セクションのつなぎ目に出る明るい細い線を消す。
   画面の拡大率が 125%・175% など（Windows の既定は 125% が多い）のとき、セクションの境目が1画素の途中に来て、下の白い地が透けて線に見えていた。
   緑の地のつなぎ目（About → Merit、Lineup → Present）で目立つ。100%・150%・200% では出ない。
   次のセクションを 1px 上に重ねて、境目の画素を次のセクションの地で埋める。Merit と Lineup は、前のセクション（position: relative）より上に描かれるようにする */
.nbs-merit, .nbs-plan, .nbs-lineup, .nbs-present, .nbs-flow, .nbs-voice { margin-top: -1px; }
.nbs-merit, .nbs-lineup { position: relative; }

/* ==TERMS-20260930== */
/* 9/30 ユーザー指示（1.3.0）：「はじめの3か月コース」の継続の条件と、利用規約へのリンク。
   見せ方は MyMoods の規約のドキュメント「変更箇所」に沿う＝条件を申し込みの前に目に入る場所へ、はっきり書く */
.nbs-camp__cond { max-width: 520px; margin: 14px auto 0; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--nbs-line); text-align: left; }
.nbs-camp__cond-title { font-weight: 700; font-size: 13px; line-height: 20px; color: var(--nbs-g); text-align: center; }
.nbs-camp__cond-list { display: grid; gap: 4px; margin-top: 6px; font-weight: 500; font-size: 13px; line-height: 20px; color: var(--nbs-ink); }
.nbs-camp__cond-list li { position: relative; padding-left: 14px; text-wrap: balance; }
.nbs-camp__cond-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--nbs-g); }
.nbs-camp__cond-link { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--nbs-mute); text-align: center; }
.nbs .nbs-camp__cond-link a, .nbs .nbs-plan__terms a, .nbs .nbs-qa__link a { color: var(--nbs-g); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.nbs-plan__terms { margin-top: 4px; }
.nbs-qa__link { margin-top: 8px; font-size: 14px; }
.nbs-popup__cond { margin-top: 8px; font-weight: 500; font-size: 12px; line-height: 18px; color: var(--nbs-mute); text-align: center; text-wrap: balance; }
@media (max-width: 767px) {
  .nbs-camp__cond { padding: 10px 12px; }
  .nbs-camp__cond-list { font-size: 12px; line-height: 19px; }
  .nbs-camp__cond-list li::before { top: 7px; }
  .nbs-popup__cond { font-size: 11px; line-height: 17px; }
}

/* ==POPUP-20260930== */
/* 9/30 ユーザー指示（1.3.2）：ポップアップの期間の改行。PC では「期間限定」の印と日付を横に並べていて、日付が入りきらず「（水）／23:59」で折れていた。
   どの幅でも印を上・日付を下に積み、日付は「〜」の後ろでだけ折る（入りきる幅なら1行）。プランの枠の期間も同じく「〜」の後ろでだけ折る */
.nbs-popup__period { flex-direction: column; gap: 4px; padding: 8px 18px 10px; border-radius: 14px; }
.nbs-popup__period .nbs-phs, .nbs-camp__period .nbs-phs { display: block; text-align: center; }
.nbs-popup__period .nbs-ph, .nbs-camp__period .nbs-ph { display: inline-block; white-space: nowrap; }

/* 9/30 ユーザー指示（1.3.2）：単品で買うより最大いくら安いか。金額は緑の地に黄色（緑の地では黄色、の 9/29 のルール） */
.nbs-popup__save { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px; margin-top: 10px; padding: 7px 18px 8px; border-radius: 12px; background: var(--nbs-g); color: #fff; font-weight: 700; font-size: 14px; line-height: 22px; }
.nbs-popup__save-l, .nbs-popup__save-v { white-space: nowrap; }
.nbs-popup__save b { margin: 0 2px; font-family: var(--nbs-en); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.01em; color: #ffe600; }
.nbs-popup__save-note { margin-top: 6px; font-weight: 500; font-size: 11px; line-height: 16px; color: var(--nbs-mute); }
@media (max-width: 767px) {
  .nbs-popup__save { font-size: 13px; padding: 6px 14px 7px; }
  .nbs-popup__save b { font-size: 24px; }
  .nbs-popup__save-note { font-size: 10px; line-height: 15px; }
}
/* ポップアップの説明文も、どの幅でも文の切れ目でだけ折る（PC で「自動更新／で、」と折れていた） */
.nbs-popup__body .nbs-ph, .nbs-popup__lead .nbs-ph { display: inline-block; }
/* 画面の高さが低い端末（iPhone SE 第1世代など）：ポップアップが画面に収まり、ボタンが見えるように詰める。説明文（2回目・3回目は…）は LP の本文にあるので省く */
@media (max-height: 600px) {
  .nbs-popup__box { padding: 26px 18px 18px; }
  .nbs-popup__title { margin-top: 8px; }
  .nbs-popup__off b { font-size: 46px; }
  .nbs-popup__period { margin-top: 10px; }
  .nbs-popup__body { display: none; }
  .nbs-popup__cta { margin-top: 12px; }
}

/* ==KV-CAMP-20260930== */
/* 9/30 ユーザー指示（1.3.5）：KV の「定期便は最大 25%OFF」の上に、キャンペーン中だけ「今だけ初月は最大 64%OFF」の帯を足す。
   色はプランカードの印「初月50%OFF」と同じ（緑の地・白い字・数字は黄色）。
   帯は数字のかたまり（.nbs-hero__off）の上の余白に、絶対配置で置く（格子の列の幅に影響させない＝「25」と「%OFF」の間が広がらない）。
   余白の分だけ数字が下がるので：
     PC（1280px 以上・かたまりが絶対配置）は、かたまりごと同じだけ上へ＝数字の位置は変わらない。
     SP は製品写真も同じだけ下へ（--nbs-kv-ob。写真は「25」の下端に合わせて置いている）。KV の高さも同じだけ増える。
   1.3.6（9/30 ユーザー指示「もう少し大きく」）：帯を一回り大きく。PC 字 13 → 16px・数字 22 → 30px・高さ 28 → 42px（余白 36 → 50px）／
     SP 字 12 → 14px・数字 20 → 26px・高さ 26 → 36px（余白 34 → 44px）。帯と「定期便は最大」の間は 8px */
.nbs-hero--off-camp .nbs-hero__off { padding-top: 50px; }
.nbs-hero__off-camp { position: absolute; left: 8px; top: 0; display: inline-flex; align-items: baseline; margin: 0; padding: 6px 20px; border-radius: 999px; background: var(--nbs-g); color: #fff; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: 0; white-space: nowrap; box-shadow: 0 2px 8px rgba(19, 136, 8, 0.28); }
.nbs-hero__off-camp b { margin: 0 2px 0 4px; font-family: var(--nbs-en); font-weight: 800; font-size: 30px; line-height: 24px; letter-spacing: -0.02em; color: #ffe600; }
.nbs-hero__off-camp span { font-size: 14px; }
@media (min-width: 1280px) {
  .nbs-hero--off-camp .nbs-hero__off { top: 114px; }
}
@media (max-width: 1279px) {
  /* left・top は打ち消す（PC 用の絶対配置の値が残っていて、relative にすると横にずれる） */
  .nbs-hero--off-camp .nbs-hero__off { position: relative; left: auto; top: auto; }
}
@media (max-width: 767px) {
  .nbs-hero--off-camp .nbs-hero__off { padding-top: 44px; }
  .nbs-hero__off-camp { left: 4px; padding: 5px 16px; font-size: 14px; line-height: 22px; }
  .nbs-hero__off-camp b { font-size: 26px; line-height: 22px; }
  .nbs-hero__off-camp span { font-size: 13px; }
  .nbs-hero.nbs-hero--off-camp { --nbs-kv-ob: 487px; }
}
@media (max-width: 359px) {
  .nbs-hero__off-camp { padding: 5px 14px; font-size: 13px; }
  .nbs-hero__off-camp b { font-size: 24px; }
  .nbs-hero__off-camp span { font-size: 12px; }
  .nbs-hero.nbs-hero--off-camp { --nbs-kv-ob: 463px; }
}

/* ==HEADER-CTA-20260930== */
/* 9/30 ユーザー指示（1.4.0）：PC のヘッダーの右のボタン2つ（定期便をはじめる／会員特典を見る）を一回り大きく、背景を緑に。
   白い地・緑の字（字 14px・高さ 36px）→ 緑の地・白い字（字 15px・高さ 40px）。色はサイトのヘッダーの「定期便（サブスク）」のピルと同じ。
   1400px 以上はヘッダーの横の余りが 6px しかないので、ロゴ・ナビ・ボタンの間（32 → 24px）とナビの項目の間（24 → 20px）を詰めて場所を作る。
   1280〜1399px はナビが詰めてあり余りがあるので、字 14px・左右 18px。1279px 以下はハンバーガー（ボタンは出ない） */
.nbs-header__cta .nbs-pill { padding: 10px 20px; border-radius: 20px; background: var(--nbs-g); color: #fff; font-size: 15px; line-height: 20px; box-shadow: 0 2px 8px rgba(19, 136, 8, 0.28); transition: background .2s ease, box-shadow .2s ease; }
.nbs-header__cta .nbs-pill:hover, .nbs-header__cta .nbs-pill:focus-visible { background: #0f6d06; color: #fff; box-shadow: 0 4px 12px rgba(19, 136, 8, 0.38); }
@media (min-width: 1400px) {
  .nbs-header__inner { gap: 24px; }
  .nbs-header__nav { gap: 20px; }
}
@media (max-width: 1399px) {
  .nbs-header__cta .nbs-pill { padding: 10px 18px; font-size: 14px; }
}

/* ==HEADER-NAV-20260930== */
/* 9/30 ユーザー指示（1.4.4）：ヘッダーのナビに「利用規約」を足した（7項目）。
   1400px 以上は横の余りが 12px しかなかったので、ロゴ・ナビ・ボタンの間（24 → 20px）、ナビの項目の間（20 → 16px）、
   ナビの左の余白（16 → 8px）、ナビの字（14 → 13px＝1280〜1399px と同じ）で、項目1つ分（約 76px）の場所を作る。余りは 13px */
@media (min-width: 1400px) {
  .nbs-header__inner { gap: 20px; }
  .nbs-header__nav { gap: 16px; padding-left: 8px; }
  .nbs-header__nav a { font-size: 13px; }
}

/* ==CIRCLE-SHIP-20260930== */
/* 9/30 ユーザー指示（1.4.5）：PLAN の円「送料無料」に、小さい字で「1点あたり送料$10と／基本送料$10が／無料に！」の3行を足す。
   円は PC 160px・タブレット 140px・SP 124px（359px 以下は 106px）なので、行ごとに字を小さく。1行 10〜11字が円の幅（弦）に収まる大きさ */
.nbs-circles .nbs-circles__ship { flex-direction: column; padding: 8px; }
.nbs-circles__ship b { display: block; font-size: 17px; line-height: 1.3; }
.nbs-circles__ship small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; font-weight: 700; }
@media (max-width: 1023px) {
  .nbs-circles__ship b { font-size: 15px; }
  .nbs-circles__ship small { font-size: 10.5px; }
}
@media (max-width: 767px) {
  .nbs-circles .nbs-circles__ship { padding: 6px; }
  .nbs-circles__ship b { font-size: 14px; }
  .nbs-circles__ship small { font-size: 10px; margin-top: 3px; }
}
@media (max-width: 359px) {
  .nbs-circles .nbs-circles__ship { padding: 4px; }
  .nbs-circles__ship b { font-size: 12px; }
  .nbs-circles__ship small { font-size: 9px; }
}

/* ==PLAN-RECO-20260930== */
/* 9/30 ユーザー指示（1.4.6）：SP のプランカードの「おすすめ」の丸い印が VAPE の絵に重なっていた（右に 22px はみ出す置き方で、絵と 24×32px 重なる）。
   SP では、絵を左に寄せて（絵の右に印の分の余白）、印は絵の右横・上下の中央に。印は 42 → 50px（359px 以下は 46px）、字は 9 → 11px。
   PC・タブレットは Figma どおり（絵の右下に少し重なる）のまま */
@media (max-width: 767px) {
  .nbs-plan-card.is-recommend .nbs-plan-card__icons { margin-right: 44px; }
  .nbs-plan-card__reco { right: auto; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 11px; }
}
@media (max-width: 359px) {
  .nbs-plan-card.is-recommend .nbs-plan-card__icons { margin-right: 40px; }
  .nbs-plan-card__reco { width: 46px; height: 46px; font-size: 10px; }
}

/* ==CIRCLE-SHIP2-20260930== */
/* 9/30 ユーザー指示（1.4.7）：円の「送料無料」を目立たせる。題 17／15／14／12px → 21／18／17／14px（PC／タブレット／SP／359px 以下） */
.nbs-circles__ship b { font-size: 21px; }
.nbs-circles__ship small { margin-top: 5px; }
@media (max-width: 1023px) { .nbs-circles__ship b { font-size: 18px; } }
@media (max-width: 767px) { .nbs-circles__ship b { font-size: 17px; } .nbs-circles__ship small { margin-top: 4px; } }
@media (max-width: 359px) { .nbs-circles__ship b { font-size: 14px; } }

/* ==CAMP-OFF-20260930== */
/* 9/30 ユーザー指示（1.4.7）：キャンペーン枠（PLAN の枠とポップアップ）の「50%OFF」をもっと大きく。数字 2em → 2.86em（14px の枠で 28 → 40px）、「%OFF」1em → 1.3em（14 → 18px） */
.nbs-camp__lead-off { font-size: 1.3em; margin-left: 6px; }
.nbs-camp__lead-off b { font-size: 2.2em; }

/* ==PCARD-FLIP-20260930== */
/* 9/30 ユーザー指示（1.4.8）：対象シリーズのカードは、押すと裏返って（Y 軸に 180°）シリーズの説明を出す。
   表（.nbs-pcard__front）は従来の中身のまま。裏（.nbs-pcard__back）は表と同じ大きさ（absolute で重ねる）で、文が入り切らないときは中で縦にスクロール。
   枠線・角丸・白い地は表と裏それぞれに持たせ、外側のカードは透明にする（回転しても枠がずれないように）。
   「動きを減らす」設定でも回す（9/30 ユーザー方針：お客様の声と同じ） */
.nbs-pcard--flip { position: relative; background: transparent; border: 0; border-radius: 0; overflow: visible; cursor: pointer; perspective: 1200px; -webkit-tap-highlight-color: transparent; }
.nbs-pcard--flip:hover { transform: none; box-shadow: none; }
.nbs-pcard--flip:focus-visible { outline: 2px solid var(--nbs-g); outline-offset: 3px; border-radius: 12px; }
.nbs-pcard__inner { position: relative; display: block; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1), height .3s ease; }
.nbs-pcard--flip.is-flipped .nbs-pcard__inner { transform: rotateY(180deg); }
.nbs-pcard__front, .nbs-pcard__back { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 1px solid var(--nbs-line); border-radius: 12px; background: #fff; overflow: hidden; }
.nbs-pcard__front { position: relative; transition: box-shadow .2s ease; }
.nbs-pcard--flip:hover .nbs-pcard__front { box-shadow: 0 10px 24px rgba(19, 136, 8, 0.14); }
.nbs-pcard__back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px; background: var(--nbs-mint); border-color: var(--nbs-g); color: var(--nbs-ink); text-align: left; overflow: hidden; }
.nbs-pcard__back-meta { display: flex; align-items: center; gap: 8px; flex: none; }
.nbs-pcard__back-name { font-weight: 700; font-size: 13px; line-height: 16px; color: var(--nbs-ink); }
.nbs-pcard__back-title { display: block; flex: none; font-weight: 700; font-size: 15px; line-height: 1.45; color: var(--nbs-g); text-wrap: pretty; }
.nbs-pcard__back-body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 13px; line-height: 1.75; text-wrap: pretty; }  /* 入り切らないときは本文だけ縦にスクロール（「戻る」は下に残る） */
.nbs-pcard__back-close { display: block; flex: none; margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 12px; line-height: 16px; color: var(--nbs-g); text-align: right; }
.nbs-pcard__back-close::before { content: "↺ "; }
/* 表の右下の「詳しく見る」（押せると分かるように） */
.nbs-pcard__flip-hint { position: absolute; right: 8px; bottom: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--nbs-g); color: var(--nbs-g); font-weight: 700; font-size: 11px; line-height: 16px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.nbs-pcard__flip-hint::before { content: "↻ "; }
@media (max-width: 767px) {
  .nbs-pcard__back { gap: 6px; padding: 12px 12px 10px; }
  .nbs-pcard__back-name { font-size: 12px; }
  .nbs-pcard__back-title { font-size: 13px; }
  .nbs-pcard__back-body { font-size: 11px; line-height: 1.6; }
  .nbs-pcard__back-close { font-size: 11px; }
  .nbs-pcard__flip-hint { right: 6px; bottom: 6px; padding: 2px 8px; font-size: 10px; }
}

/* 320px で2列の幅がそろっていなかった（1fr は min-content より狭くならず、「KEYSTONE 18ml」の行の分だけ右の列が広がる）。列を minmax(0, 1fr) に */
@media (max-width: 767px) {
  .nbs-band--all .nbs-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==PERIOD-LABEL-20260930== */
/* 9/30 ユーザー指示（1.4.9）：限定感を出すため、キャンペーンの「期間」の日時を大きく（PLAN の枠 13 → 17px・SP 12 → 16px、ポップアップ 14 → 17px・SP 13 → 16px。タグは 11 → 12px）。
   プランカードの「N本プラン」も大きく（14 → 20px、SP 18px） */
.nbs-camp__period { font-size: 17px; line-height: 24px; padding: 4px 14px 4px 5px; gap: 10px; }
.nbs-camp__period span { font-size: 12px; line-height: 20px; padding: 0 10px; }
.nbs-popup__period { font-size: 17px; line-height: 24px; }
.nbs-popup__period span { font-size: 12px; }
.nbs-plan-card__label { font-size: 20px; line-height: 24px; margin-top: 12px; }
@media (max-width: 767px) {
  .nbs-camp__period { font-size: 16px; line-height: 22px; padding: 7px 14px 9px; gap: 5px; }
  .nbs-popup__period { font-size: 16px; line-height: 22px; }
  .nbs-plan-card__label { font-size: 18px; line-height: 22px; margin-top: 10px; }
}
@media (max-width: 359px) {
  .nbs-camp__period, .nbs-popup__period { font-size: 14px; line-height: 20px; }
  .nbs-plan-card__label { font-size: 16px; line-height: 20px; }
}

/* ==COND-LINK-20260930== */
/* 9/30 ユーザー指示（1.4.10）：キャンペーン枠の「くわしくは「NICOBAY定期便 利用規約」をご確認ください」は左詰め（条件の箇条書きの文字の位置にそろえる） */
.nbs-camp__cond-link { text-align: left; padding-left: 14px; }

/* ==PCARD-FLIP2-20260930== */
/* 9/30 ユーザー指示（1.4.15）：対象シリーズの裏面の本文は、文ごとに改行（1文＝1ブロック、文と文の間は 4px） */
.nbs-pcard__back-body .nbs-nl { display: block; }
.nbs-pcard__back-body .nbs-nl + .nbs-nl { margin-top: 12px; }  /* 1.4.17（9/30 ユーザー指示）：段落の間の余白 4 → 12px（SP 8px） */
@media (max-width: 767px) { .nbs-pcard__back-body .nbs-nl + .nbs-nl { margin-top: 8px; } }

/* 9/30 ユーザー指示（1.4.19）：裏面の題を大きく（PC 15 → 18px、SP 13 → 15px） */
.nbs-pcard__back-title { font-size: 18px; line-height: 1.4; }
@media (max-width: 767px) { .nbs-pcard__back-title { font-size: 15px; } }

/* ==PLAN-BEST-20260930== 1.4.27（9/30 ユーザー指示）：4本プランに「最安値」の印。おすすめ（金）と同じ構成で、色は深い赤（--nbs-best）。
   キャンペーンの赤（#d32f2f＝初月の価格）より少し深くして、価格の赤と区別する */
.nbs { --nbs-best: #c8102e; }
.nbs-plan-card.is-best { border-color: var(--nbs-best); }
.nbs-plan-card__reco--best { background: var(--nbs-best); }
.nbs-plan-card.is-best.is-camp { box-shadow: 0 0 8px rgba(200, 16, 46, 0.18); }

/* ==NOTICE-ROT-20261002== 1.4.30（10/2 ユーザー決定）：告知バーを回転表示に。1本ずつ、フェードで切り替え。高さは1行分で固定（文の長さで上下しない） */
.nbs-notice--rot { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 40px; }
.nbs-notice__list { position: relative; list-style: none; margin: 0; padding: 0; width: 100%; height: 20px; }
.nbs-notice__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.nbs-notice__item.is-active { opacity: 1; visibility: visible; }
.nbs-notice__item a, .nbs-notice__item p { display: block; max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 700; font-size: 12px; line-height: 20px; text-decoration: none; }
.nbs-notice__item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nbs-notice__arrow { position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 0; border: 0; background: transparent; cursor: pointer; color: #fff; opacity: .85; }
.nbs-notice__arrow::before { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.nbs-notice__arrow--prev { left: 6px; }
.nbs-notice__arrow--prev::before { transform: translateX(2px) rotate(45deg); }
.nbs-notice__arrow--next { right: 6px; }
.nbs-notice__arrow--next::before { transform: translateX(-2px) rotate(-135deg); }
.nbs-notice__arrow:hover { opacity: 1; }
@media (min-width: 768px) {
  .nbs-notice__item a, .nbs-notice__item p { font-size: 13px; }
}
/* SP：1行に入らない文は意味のまとまりで2行に（…で切らない）。高さは2行分で固定（文によって上下しない） */
.nbs-notice__item a, .nbs-notice__item p { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; }
.nbs-notice__item .nbs-nw { display: inline-block; white-space: nowrap; }
@media (max-width: 767px) {
  .nbs-notice--rot { padding: 6px 30px; }
  .nbs-notice__list { height: 34px; }
  .nbs-notice__item a, .nbs-notice__item p { font-size: 11.5px; line-height: 17px; }
  .nbs-notice__arrow { width: 24px; }
  .nbs-notice__arrow--prev { left: 3px; }
  .nbs-notice__arrow--next { right: 3px; }
}

/* ==WRAP-20261002== 1.4.31（10/2 ユーザー指示「SP で変な改行が起きていないか確認して」）
   ・本文（FAQ の答え・お客様の声・注記）は、行頭に「ー」「ッ」などが来ない禁則（strict）と、Chrome では文節で折る（auto-phrase。Safari は未対応で通常の折り返し）
   ・対象シリーズのカード：320px で KEYSTONE の「18ml」がカードからはみ出し、「一部フレーバーのみ」が「の｜み」と折れていた */
#nbs-lp p, #nbs-lp li, #nbs-lp small, #nbs-lp dd { line-break: strict; }
#nbs-lp .nbs-qa p, #nbs-lp .nbs-qa__a, #nbs-lp .nbs-vcard__text, #nbs-lp .nbs-course-note, #nbs-lp .nbs-pcard__back p { word-break: auto-phrase; }
.nbs-pcard__note { white-space: nowrap; }
@media (max-width: 374px) {
  .nbs-pcard__meta { flex-wrap: wrap; row-gap: 4px; }
  .nbs-pcard__note { font-size: 10px; padding: 1px 6px; }
}

/* ==NOTICE-LINK-20261002== 1.4.32（10/2 ユーザー指示「リンクついてないので、リンクをつけて」）
   リンクだと分かるように下線（まとまりごと。inline-block には親の下線が届かないので .nbs-nw に付ける）と「›」。
   移動先の見出しが sticky のヘッダー（64px）の下に隠れないように */
.nbs-notice__item a .nbs-nw { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nbs-notice__item a:hover .nbs-nw { text-decoration-thickness: 2px; }
.nbs-notice__go { display: inline-block; margin-left: 5px; font-weight: 700; text-decoration: none; }
#about, #present, #flow, #faq { scroll-margin-top: 64px; }

/* ==PLAN-RECO-CORNER-20261002== 1.4.33 で丸をカードの右上に置いたが、1.4.34（10/3 ユーザー指示「元の位置に戻してほしい」）で取り消した。PC は絵の右下・SP は絵の右横（PLAN-RECO-20260930）のまま */