/* =================================================
   PRICE PAGE – FINAL (TOP基準 / 完全確定版)
================================================= */

/* =========================
   PAGE BASE
========================= */
.price-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px 120px;
}

/* =========================
   HEADER
========================= */
.page-header {
  text-align: center;
  margin-bottom: 100px;
}

.page-header .page-lead {
  margin-top: 24px;
  line-height: 2;
  opacity: 0.9;
}

/* =========================
   SECTION
========================= */
.price-section {
  margin-bottom: 140px;
  text-align: center;
}

.price-section-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 32px;
}

/* セクション説明 */
.section-lead {
  margin-bottom: 56px;
  line-height: 2;
  opacity: 0.9;
}

/* =========================
   GRID
========================= */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

/* =========================
   CARD BASE
========================= */
.price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 36px 28px;
  border-radius: 28px;
  text-align: center;

  background: linear-gradient(
    180deg,
    rgba(20,20,40,0.94),
    rgba(10,10,20,0.94)
  );

  border: 1px solid rgba(180,160,255,0.18);

  box-shadow:
    0 26px 80px rgba(0,0,0,0.85),
    inset 0 0 30px rgba(255,255,255,0.04);

  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* =========================
   CARD TEXT
========================= */
.price-card h3 {
  font-size: 1.35rem;
  margin-bottom: 14px;
}

.price-card .card-sub {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 18px;
  opacity: 0.9;
}

.price-card p {
  margin: 6px 0;
  line-height: 1.8;
}

.price-card .price {
  margin-top: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* =========================
   COLOR VARIATIONS
========================= */

/* Luna：月光 */
.luna-title {
  color: #d9d2ff;
  text-shadow:
    0 0 12px rgba(180,160,255,0.9),
    0 0 32px rgba(150,130,255,0.6);
}

.luna-card {
  border-color: rgba(200,190,255,0.35);
  box-shadow:
    0 26px 80px rgba(0,0,0,0.85),
    inset 0 0 30px rgba(200,190,255,0.12);
}

.luna-card .price {
  color: #e6ddff;
}

/* Venus：官能ゴールド */
.venus-title {
  color: #ffe2a6;
  text-shadow:
    0 0 14px rgba(255,210,120,0.9),
    0 0 36px rgba(255,190,90,0.6);
}

.venus-card {
  background: linear-gradient(
    180deg,
    rgba(30,30,60,0.95),
    rgba(15,15,30,0.95)
  );

  border: 1px solid rgba(255,220,160,0.4);

  box-shadow:
    0 28px 90px rgba(0,0,0,0.9),
    0 0 40px rgba(255,200,120,0.25),
    inset 0 0 40px rgba(255,255,255,0.06);
}

.venus-card .price {
  color: #ffe6a8;
}

/* =========================
   Luvena – Celeste（最上位）
========================= */
.luvena-title {
  color: #f2f7ff;
  font-size: 2.1rem;
  letter-spacing: 0.1em;

  text-shadow:
    0 0 18px rgba(220,235,255,1),
    0 0 40px rgba(160,200,255,0.9),
    0 0 80px rgba(120,160,255,0.7);
}

.luvena-card {
  background:
    radial-gradient(
      circle at top,
      rgba(200,220,255,0.45),
      rgba(40,50,90,0.85),
      rgba(10,10,20,0.98) 75%
    );

  border: 1px solid rgba(220,235,255,0.7);

  box-shadow:
    0 0 60px rgba(220,235,255,0.9),
    0 0 140px rgba(160,200,255,0.6),
    0 45px 140px rgba(0,0,0,0.95),
    inset 0 0 60px rgba(255,255,255,0.18);

  transform: translateY(-10px);
}

.luvena-card .price {
  color: #ffffff;
  font-weight: 800;
  text-shadow:
    0 0 12px rgba(220,235,255,0.9),
    0 0 28px rgba(180,210,255,0.8);
}

/* =========================
   NOTES
========================= */
.price-note,
.night-fee {
  max-width: 720px;
  margin: 0 auto 48px;
  line-height: 2;
  opacity: 0.9;
}

/* =========================
   CTA
========================= */
.price-cta {
  max-width: 900px;
  margin: 120px auto 100px;
  padding: 60px 36px;
  text-align: center;

  background: radial-gradient(
    circle at top,
    rgba(70,90,160,0.28),
    rgba(10,10,20,0.94) 70%
  );

  border-radius: 36px;

  box-shadow:
    0 40px 120px rgba(0,0,0,0.9),
    inset 0 0 60px rgba(180,200,255,0.1);
}

.price-cta .cta-text {
  font-size: 1.05rem;
  line-height: 2.2;
  margin-bottom: 40px;
}

.price-cta .cta-button {
  display: inline-block;
  padding: 22px 76px;
  border-radius: 999px;

  background: linear-gradient(135deg,#fff7d4,#ffd87a);
  color: #1a1a1a;

  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-decoration: none;

  box-shadow:
    0 0 40px rgba(255,216,122,0.7),
    0 0 110px rgba(255,216,122,0.45);

  transition: all 0.4s ease;
}

.price-cta .cta-button:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 60px rgba(255,216,122,1),
    0 0 160px rgba(255,216,122,0.75);
}

/* =========================
   OPTION SECTION
========================= */
.option-section {
  max-width: 900px;
  margin: 120px auto 0;
  padding: 56px 36px;
  text-align: center;

  background: linear-gradient(
    180deg,
    rgba(20,20,40,0.9),
    rgba(10,10,20,0.95)
  );

  border-radius: 32px;

  box-shadow:
    0 35px 120px rgba(0,0,0,0.9),
    inset 0 0 50px rgba(180,200,255,0.08);
}

/* タイトル */
.option-title {
  font-size: 1.8rem;
  letter-spacing: 0.12em;
  margin-bottom: 18px;

  color: #e6ecff;
  text-shadow:
    0 0 14px rgba(180,210,255,0.9),
    0 0 36px rgba(120,160,255,0.6);
}

/* 説明文 */
.option-lead {
  margin-bottom: 46px;
  line-height: 2;
  opacity: 0.9;
}

/* リスト */
.option-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 60px;
}

/* 各オプション */
.option-list li {
  padding: 18px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(180,200,255,0.2);

  font-size: 0.95rem;
  letter-spacing: 0.05em;

  box-shadow:
    inset 0 0 20px rgba(255,255,255,0.05);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .option-list {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 600px) {
  .option-list {
    grid-template-columns: 1fr;
  }
}

  .option-section {
    padding: 44px 20px;
  }

  .option-title {
    font-size: 1.5rem;
  }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {
  .price-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .price-grid {
    grid-template-columns: 1fr;
  }

  .price-page {
    padding: 60px 16px 100px;
  }

  .price-section-title {
    font-size: 1.7rem;
  }
}
/* =========================
   OPTION TEXT DETAIL
========================= */

.option-list li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px;
}

.option-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e6ecff;

  text-shadow:
    0 0 8px rgba(180,210,255,0.8),
    0 0 18px rgba(120,160,255,0.5);
}

.option-desc {
  font-size: 0.9rem;
  line-height: 1.8;
  opacity: 0.9;
}

.option-price {
  margin-top: 6px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: #ffe6a8;

  text-shadow:
    0 0 8px rgba(255,220,160,0.8);
}
/* =========================
   QR LABEL（下の文字）
========================= */

.qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.qr-label {
  margin-top: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;

  color: #0b0b0b; /* ← 明るめの上品ホワイトブルー */
  opacity: 0.95;

  text-shadow:
    0 0 4px rgba(255,255,255,0.6),
    0 0 10px rgba(180,200,255,0.55);
}

/* hover時：やりすぎない発光 */
.qr-item:hover .qr-label {
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(255,255,255,0.9),
    0 0 16px rgba(180,200,255,0.75);
}
/* =========================
   OPTION LIST VISUAL TUNING
   ※ 文言・HTMLは一切変更なし
========================= */

.option-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 60px;
}

.option-list li {
  background: linear-gradient(
    180deg,
    rgba(20,20,40,0.92),
    rgba(10,10,20,0.92)
  );
  border-radius: 26px;
  padding: 32px 28px;
  border: 1px solid rgba(180,160,255,0.18);

  box-shadow:
    0 22px 55px rgba(0,0,0,0.75),
    inset 0 0 28px rgba(255,255,255,0.04);

  text-align: center;
}

/* 英文タイトル */
.option-name {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #f0eaff;

  margin-bottom: 12px;

  text-shadow:
    0 0 8px rgba(200,180,255,0.6);
}

/* 日本語説明 */
.option-desc {
  display: block;
  font-size: 0.9rem;
  line-height: 2;
  color: rgba(220,230,255,0.85);

  margin-bottom: 18px;
}

/* 価格 */
.option-price {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;

  color: #ffe6a8;

  text-shadow:
    0 0 6px rgba(255,220,160,0.7),
    0 0 18px rgba(255,200,120,0.45);
}
/* =========================
   OPTION LIST GRID : FORCE 3
========================= */

.option-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px;
}
@media (max-width: 900px) {
  .option-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .option-list {
    grid-template-columns: 1fr !important;
  }
}
/* =========================
   OPTION LIST mobile fix（ズレ/横はみ出し防止）
========================= */
.option-section{
  overflow-x: hidden;
}

.option-list{
  /* ulのデフォ余白を確実に殺す */
  margin: 0 auto;
  padding: 0;
  list-style: none;

  /* gridが当たってる前提で安定化 */
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;

  /* 画面端に吸い付かないように */
  width: min(680px, 100%);
}

.option-list li{
  /* liが横に広がって見切れないように */
  width: 100%;
  box-sizing: border-box;
}

/* スマホだけ：左右余白を揃えて、カードを中央で安定させる */
@media (max-width: 600px){
  .option-section{
    padding-left: 14px;
    padding-right: 14px;
  }

  .option-list{
    width: 100%;
    gap: 16px;
  }

  /* もし li に padding: 18px 14px; が効いて窮屈なら少し緩める */
  .option-list li{
    padding: 16px 16px;
    border-radius: 18px;
  }
}