@charset "UTF-8";
/* =========================================================
   夜遊びサロンLP｜定期購入者向け 夜遊びサロン無料特典
   ・詳細版　　：.jpsb で始まるクラス（html/detailed.html）
   ・コンパクト版：.jpsc で始まるクラス（html/compact.html）
   ・すべてのスタイルは .jpsb／.jpsc の内側だけに効きます。
     body・h2・p・a などへの全体指定はありません。
   ・既存LPと同じく、スマホの値を基準に PC（751px以上）で拡大表示します。
   ========================================================= */

/* =========================================================
   詳細版（1回目の決済ブロックの下に1か所）
   ========================================================= */
.jpsb{
  --u: 1px;
  --jpsb-yellow: #ffee00;
  --jpsb-pink: #e4027b;
  --jpsb-deep: #261134;
  --jpsb-navy: #01091f;
  position: relative;
  padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u));
  background: linear-gradient(to bottom right, #9347e1, #b53979 46%, #636fb1);
  color: #fff;
  font-family: "noto-sans-cjk-jp", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: calc(14 * var(--u));
  line-height: 1.5;
  text-align: center;
  line-break: strict;
  -webkit-text-size-adjust: 100%;
}
.jpsb *, .jpsb *::before, .jpsb *::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.jpsb img{ display: block; max-width: 100%; height: auto; }
.jpsb .jpsb-nw{ display: inline-block; }

/* ---------- 冒頭 ---------- */
.jpsb-lead{
  font-size: calc(15 * var(--u));
  font-weight: 700;
  letter-spacing: .06em;
}
.jpsb-title{
  margin-top: calc(4 * var(--u));
  font-family: "Hiragino Sans", "noto-sans-cjk-jp", sans-serif;
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .03em;
  color: var(--jpsb-yellow);
}

/* ---------- 本体パネル（既存「会員特典」の枠と同じ黄枠×濃紫） ---------- */
.jpsb-panel{
  margin-top: calc(14 * var(--u));
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  background: var(--jpsb-deep);
  border: calc(4 * var(--u)) solid var(--jpsb-yellow);
}
.jpsb-products{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: calc(4 * var(--u));
}
.jpsb-product-name{
  font-family: "Hiragino Sans", "noto-sans-cjk-jp", sans-serif;
  font-size: calc(22 * var(--u));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .05em;
}
.jpsb-product-desc{
  margin-top: calc(3 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #ddd5ef;
  white-space: nowrap;
}
.jpsb-products-sep{
  font-size: calc(22 * var(--u));
  font-weight: 400;
  line-height: 1;
  color: var(--jpsb-yellow);
}
.jpsb-visual{
  width: 88%;
  margin: calc(8 * var(--u)) auto 0;
}
.jpsb-visual img{
  width: 100%;
  aspect-ratio: 1376 / 768;
  object-fit: contain;
  background: #000;
}

/* ---------- 0円訴求 ---------- */
.jpsb-offer{
  margin-top: calc(12 * var(--u));
}
.jpsb-cond{
  font-size: calc(15 * var(--u));
  font-weight: 700;
}
.jpsb-price{
  margin-top: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));
  background: var(--jpsb-navy);
}
.jpsb-price-label{
  font-size: calc(17 * var(--u));
  font-weight: 800;
}
.jpsb-price-label em{
  font-style: normal;
  color: var(--jpsb-yellow);
}
.jpsb-price-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  margin-top: calc(2 * var(--u));
}
.jpsb-price-old{
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  color: #e8e2f5;
  text-align: center;
}
/* 取り消し線：数字の中心より少し下を通る細い1本線（文字にかぶりすぎない） */
.jpsb-price-old s{
  position: relative;
  display: block;
  font-size: calc(16 * var(--u));
  text-decoration: none;
}
.jpsb-price-old s::after{
  content: "";
  position: absolute;
  left: -.1em;
  right: -.1em;
  top: 57%;
  height: 1px;
  background: var(--jpsb-pink);
}
.jpsb-price-arrow{
  font-size: calc(20 * var(--u));
  font-weight: 800;
  color: var(--jpsb-yellow);
}
.jpsb-price-new{
  font-family: "Hiragino Sans", "noto-sans-cjk-jp", sans-serif;
  font-weight: 800;
  line-height: 1;
  color: var(--jpsb-yellow);
  text-shadow: 0 0 calc(14 * var(--u)) rgba(255, 238, 0, .35);
  white-space: nowrap;
}
.jpsb-price-zero{
  font-size: calc(76 * var(--u));
  letter-spacing: -.02em;
}
.jpsb-price-yen{
  font-size: calc(32 * var(--u));
}
.jpsb-forever{
  margin-top: calc(8 * var(--u));
  padding: calc(7 * var(--u)) calc(8 * var(--u));
  background: var(--jpsb-pink);
  font-size: calc(18 * var(--u));
  font-weight: 800;
  letter-spacing: .03em;
}
.jpsb-forever em{
  font-style: normal;
  color: var(--jpsb-yellow);
}

/* ---------- 3つの特徴 ---------- */
.jpsb-feat{
  margin-top: calc(18 * var(--u));
}
.jpsb-feat-title{
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 800;
  color: var(--jpsb-yellow);
}
.jpsb-feat-title::before, .jpsb-feat-title::after{
  content: "";
  flex: 1;
  height: calc(2 * var(--u));
  background: var(--jpsb-yellow);
}
.jpsb-feat-list{
  margin-top: calc(4 * var(--u));
  list-style: none;
  text-align: left;
}
.jpsb-feat-item{
  display: grid;
  grid-template-columns: calc(26 * var(--u)) 1fr;
  column-gap: calc(10 * var(--u));
  align-items: start;
  padding: calc(12 * var(--u)) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.jpsb-feat-item:last-child{ border-bottom: 0; padding-bottom: calc(4 * var(--u)); }
.jpsb-feat-no{
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin-top: calc(1 * var(--u));
  border-radius: 50%;
  background: var(--jpsb-yellow);
  color: var(--jpsb-deep);
  font-size: calc(14 * var(--u));
  font-weight: 900;
  line-height: calc(26 * var(--u));
  text-align: center;
}
.jpsb-feat-head{
  font-size: calc(16 * var(--u));
  font-weight: 800;
  line-height: calc(28 * var(--u));
}
/* ③の実績：見出しを一回り大きくし、「5万袋」「400人以上」を黄色で強調 */
.jpsb-feat-head--stat{
  font-size: calc(17 * var(--u));
}
.jpsb-feat-num{
  margin: 0 .04em;
  font-family: "Hiragino Sans", "noto-sans-cjk-jp", sans-serif;
  font-size: calc(23 * var(--u));
  line-height: 1;
  color: var(--jpsb-yellow);
}
.jpsb-feat-text strong{
  margin: 0 .05em;
  font-size: calc(16 * var(--u));
  font-weight: 800;
  color: var(--jpsb-yellow);
}
.jpsb-feat-note{
  margin-top: calc(3 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: 1.5;
  color: #cdc4e2;
}
.jpsb-feat-text{
  margin-top: calc(5 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.75;
  letter-spacing: .02em;
  color: #ece7f6;
}

/* ---------- 締め・CTA ---------- */
.jpsb-close{
  margin-top: calc(14 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 800;
  line-height: 1.5;
}
.jpsb-close em{
  margin: 0 .05em;
  font-style: normal;
  font-size: calc(23 * var(--u));
  line-height: 1;
  color: var(--jpsb-yellow);
}
.jpsb-ctas{
  display: grid;
  gap: calc(10 * var(--u));
  margin-top: calc(10 * var(--u));
}
.jpsb-cta{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(52 * var(--u));
  padding: calc(8 * var(--u)) calc(44 * var(--u));
  background: #0b1230;
  border: calc(2 * var(--u)) solid var(--jpsb-yellow);
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .45);
  color: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .3s, color .3s, transform .15s, box-shadow .15s;
}
.jpsb-cta-name{
  font-family: "Hiragino Sans", "noto-sans-cjk-jp", sans-serif;
  font-size: calc(20 * var(--u));
  letter-spacing: .02em;
  color: var(--jpsb-yellow);
  transition: color .3s;
}
/* 「＞」を黄色の丸に入れて、押せることを分かりやすく */
.jpsb-cta-arrow{
  position: absolute;
  top: 50%;
  right: calc(12 * var(--u));
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  margin-top: calc(-12 * var(--u));
  border-radius: 50%;
  background: var(--jpsb-yellow);
  color: var(--jpsb-deep);
  font-size: calc(12 * var(--u));
  font-weight: 900;
  line-height: calc(24 * var(--u));
  text-align: center;
  transition: background-color .3s, color .3s, right .3s;
}
.jpsb-cta:active{
  transform: translateY(calc(3 * var(--u)));
  box-shadow: 0 calc(1 * var(--u)) 0 rgba(0, 0, 0, .45);
}
@media (hover: hover){
  .jpsb-cta:hover{ background: var(--jpsb-yellow); color: var(--jpsb-deep); }
  .jpsb-cta:hover .jpsb-cta-name{ color: var(--jpsb-deep); }
  .jpsb-cta:hover .jpsb-cta-arrow{ right: calc(8 * var(--u)); background: var(--jpsb-deep); color: var(--jpsb-yellow); }
}

/* ---------- 注意事項（ボックスにせず、パネル最下部に小さくまとめる） ---------- */
.jpsb-notes{
  margin-top: calc(14 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, .3);
  color: #dcd4ec;
  font-size: calc(11.5 * var(--u));
  line-height: 1.6;
  text-align: left;
}
.jpsb-notes p{
  padding-left: 1em;
  text-indent: -1em;
  letter-spacing: .02em;
}
.jpsb-notes p + p{ margin-top: calc(3 * var(--u)); }
.jpsb-notes strong{
  font-weight: 700;
  color: #fff;
}

/* ---------- 画面幅ごとの調整 ---------- */
@media screen and (max-width: 359px){
  .jpsb{ --u: .88px; }
  .jpsb-notes{ font-size: 11px; }
}
@media screen and (min-width: 751px){
  .jpsb{ --u: 2px; }
  .jpsb-notes{ font-size: calc(10 * var(--u)); }
}

/* =========================================================
   コンパクト版（2回目・3回目の決済ブロックの下に2か所）
   ========================================================= */
.jpsc{
  --u: 1px;
  --jpsc-yellow: #ffee00;
  --jpsc-pink: #ff5fae;
  --jpsc-deep: #261134;
  position: relative;
  padding: calc(11 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  background: linear-gradient(to bottom right, #9347e1, #b53979 46%, #636fb1);
  color: #fff;
  font-family: "noto-sans-cjk-jp", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: calc(14 * var(--u));
  line-height: 1.5;
  text-align: center;
  line-break: strict;
  -webkit-text-size-adjust: 100%;
}
.jpsc *, .jpsc *::before, .jpsc *::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- 小見出し ---------- */
.jpsc-lead{
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: .06em;
}

/* ---------- 本体パネル（詳細版と同じ黄枠×濃紫） ---------- */
.jpsc-panel{
  margin-top: calc(7 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u));
  background: var(--jpsc-deep);
  border: calc(4 * var(--u)) solid var(--jpsc-yellow);
}

/* ---------- メインコピー ---------- */
.jpsc-cond{
  font-family: "Hiragino Sans", "noto-sans-cjk-jp", sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 800;
  line-height: 1.4;
}
.jpsc-cond em{
  font-style: normal;
  color: var(--jpsc-yellow);
}
.jpsc-main{
  margin-top: calc(2 * var(--u));
  font-family: "Hiragino Sans", "noto-sans-cjk-jp", sans-serif;
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
}
.jpsc-main em{
  margin-left: .08em;
  font-style: normal;
  font-size: calc(38 * var(--u));
  letter-spacing: 0;
  color: var(--jpsc-yellow);
}
.jpsc-forever{
  margin-top: calc(4 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--jpsc-pink);
}

/* ---------- CTA（商品名＋説明をボタン内にまとめる） ---------- */
.jpsc-ctas{
  display: grid;
  gap: calc(10 * var(--u));
  margin-top: calc(12 * var(--u));
}
.jpsc-cta{
  position: relative;
  display: block;
  padding: calc(7 * var(--u)) calc(48 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u));
  background: #0b1230;
  border: calc(2 * var(--u)) solid var(--jpsc-yellow);
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .45);
  color: #fff;
  text-align: left;
  text-decoration: none;
  transition: background-color .3s, color .3s, transform .15s, box-shadow .15s;
}
.jpsc-cta-name{
  display: block;
  font-family: "Hiragino Sans", "noto-sans-cjk-jp", sans-serif;
  font-size: calc(20 * var(--u));
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--jpsc-yellow);
  transition: color .3s;
}
.jpsc-cta-desc{
  display: block;
  margin-top: calc(1 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1.35;
  color: #e6e0f3;
  white-space: nowrap;
  transition: color .3s;
}
.jpsc-cta-arrow{
  position: absolute;
  top: 50%;
  right: calc(14 * var(--u));
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin-top: calc(-13 * var(--u));
  border-radius: 50%;
  background: var(--jpsc-yellow);
  color: var(--jpsc-deep);
  font-size: calc(13 * var(--u));
  font-weight: 900;
  line-height: calc(26 * var(--u));
  text-align: center;
  transition: background-color .3s, color .3s, right .3s;
}
.jpsc-cta:active{
  transform: translateY(calc(3 * var(--u)));
  box-shadow: 0 calc(1 * var(--u)) 0 rgba(0, 0, 0, .45);
}
@media (hover: hover){
  .jpsc-cta:hover{ background: var(--jpsc-yellow); }
  .jpsc-cta:hover .jpsc-cta-name,
  .jpsc-cta:hover .jpsc-cta-desc{ color: var(--jpsc-deep); }
  .jpsc-cta:hover .jpsc-cta-arrow{ right: calc(10 * var(--u)); background: var(--jpsc-deep); color: var(--jpsc-yellow); }
}

/* ---------- 注意事項（最下部に小さく） ---------- */
.jpsc-notes{
  margin-top: calc(11 * var(--u));
  color: #dcd4ec;
  font-size: calc(11 * var(--u));
  line-height: 1.55;
  text-align: left;
}
.jpsc-notes p{
  padding-left: 1em;
  text-indent: -1em;
  letter-spacing: .02em;
  word-break: keep-all;      /* 文の途中ではなく「。」の後で改行させる */
  overflow-wrap: anywhere;   /* 1文が長すぎる場合だけ途中で改行 */
}

/* ---------- 画面幅ごとの調整 ---------- */
@media screen and (max-width: 359px){
  .jpsc{ --u: .88px; }
  .jpsc-notes{ font-size: 10.5px; }
}
/* PC：一律2倍だと縦に長くなるため、拡大率を1.6倍に抑える（スマホの値は変えない） */
@media screen and (min-width: 751px){
  .jpsc{ --u: 1.6px; }
  .jpsc-notes{ font-size: calc(10.5 * var(--u)); }
}