@charset "utf-8";
/* CSS Document */

/* =========================================================
 * SYSTEM（料金システム）
 * AREA/DATE と同系統のポップかわいいデザイン
 * =======================================================*/

.system-wrapper {
  max-width: 960px;
  margin: 32px auto;
  padding: 24px 16px 32px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background-image: radial-gradient(circle at 0 0, #ffe7f5 0, transparent 55%),
    radial-gradient(circle at 100% 100%, #fff2fa 0, transparent 45%);
}

/* SYSTEM タイトル（黒バッジは左、ピンク文字は中央） */
.system-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;

  font-weight: 900;
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff2a9f;
  text-shadow: 0 0 18px rgba(255, 42, 159, 0.8);
}

/* 黒背景 SYSTEM バッジ（左寄せ） */
.system-title::before {
  content: "SYSTEM";
  display: inline-block;
  padding: 3px 14px 2px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  align-self: flex-start; /* ★ 黒バッジだけ左寄せ */
}

/* ピンク文字は中央寄せに戻す */
.system-title {
  text-align: center; /* ★ タイトル中央寄せに */
}

/* 各ボックス（営業時間・注意事項・料金表など） */
.system-box {
  margin-top: 18px;
  padding: 16px 14px 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 192, 219, 0.7);
}

.system-box span {
  color: #d50074;
  font-weight: bold;
}

/* ボックスの見出し */
.system-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffb7dd, #ffe6f4);
  color: #5a1440;
}

.system-heading::before {
  content: "●";
  font-size: 0.7rem;
}

/* 本文テキスト */
.system-box p {
  margin: 4px 0;
  font-size: 0.9rem;
  line-height: 1.7;
}

/* 注意書きリスト */
.notice-list {
  margin: 4px 0 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.7;
}

.notice-list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 4px;
}

.notice-list li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1em;
  text-align: center;
  font-size: 0.8rem;
  color: #ff2a9f;
}

/* 料金テーブル */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.9rem;
}

.price-table th,
.price-table td {
  padding: 10px 8px;
  text-align: center;
}

.price-table thead th,
.price-table tr:first-child th {
  background: linear-gradient(90deg, #ffe3f3, #fff8f0);
  font-weight: 700;
  border-bottom: 2px solid #ffc7e3;
}

.price-table tbody tr:nth-child(odd),
.price-table tr:nth-child(2n + 1) {
  background: #fffdfb;
}

.price-table tbody tr:nth-child(even),
.price-table tr:nth-child(2n) {
  background: #fff7fd;
}

.price-table td:nth-child(1) {
  font-weight: 700;
}

.price-table td:nth-child(2) {
  font-weight: 800;
  color: #ff2a9f;
}

/* オプションリスト */
.option-list {
  margin-top: 12px;
  padding-left: 0;
  list-style: none;
  font-size: 0.9rem;
}

.option-list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 4px;
}

.option-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.8rem;
  color: #ffb400;
}

/* SYSTEM スマホ向け微調整 */
@media (max-width: 640px) {
  .system-wrapper {
    margin: 24px auto;
    padding: 18px 12px 24px;
  }
  .system-title {
    font-size: 1.6rem;
  }
}

/* =========================================================
 * AREA（交通費） / DATE COURSE / 禁止事項 セクション
 * =======================================================*/

/* 共通ラッパー（前回の .system-section と同系統） */
.fee-section {
  max-width: 960px;
  margin: 32px auto;
  padding: 24px 16px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* セクションタイトル（AREA / DATE COURSE / 禁止事項） */
.fee-title-main {
  text-align: center;
  margin-bottom: 16px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 2rem;
  color: #ff2a9f;
  text-shadow: 0 0 14px rgba(255, 42, 159, 0.7);
}

.fee-title-sub {
  display: inline-block;
  margin: 0 auto 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 説明テキスト */
.fee-note {
  background: #fff9f4;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
  border-left: 4px solid #ff79b0;
}

/* 2カラム風テーブル */
.fee-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.fee-table th,
.fee-table td {
  padding: 10px 8px;
  text-align: center;
}

.fee-table thead th {
  background: linear-gradient(90deg, #ffe3f3, #fff8f0);
  font-weight: 700;
  border-bottom: 2px solid #ffc7e3;
}

.fee-table tbody tr:nth-child(odd) {
  background: #fffdfb;
}

.fee-table tbody tr:nth-child(even) {
  background: #fff7fd;
}

.fee-table .col-distance {
  font-weight: 700;
}

.fee-table .col-price {
  font-weight: 800;
  color: #ff2a9f;
}

/* 「無料」バッジ風 */
.fee-free {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #ff2a9f;
  color: #fff;
  font-weight: 800;
}

/* DATE COURSE テーブル */
.date-course-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.date-course-table th,
.date-course-table td {
  padding: 10px 8px;
  text-align: center;
}

.date-course-table thead th {
  background: linear-gradient(90deg, #ffe5fb, #fdf7ff);
  font-weight: 700;
  border-bottom: 2px solid #f8cfff;
}

.date-course-table tbody tr:nth-child(odd) {
  background: #fffdfd;
}

.date-course-table tbody tr:nth-child(even) {
  background: #fff7ff;
}

.date-course-table .col-time {
  font-weight: 700;
}

.date-course-table .col-price {
  font-weight: 800;
  color: #ff2a9f;
}

/* DATE COURSE 注釈 */
.date-note {
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 16px;
  color: #555;
}

/* 禁止事項ブロック */
.prohibit-box {
  margin-top: 24px;
  padding: 16px 14px 14px;
  border-radius: 16px;
  background: #f8f8f8;
  border: 2px solid #f3c8c8;
}

.prohibit-title {
  text-align: center;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 8px;
  letter-spacing: 0.12em;
}

.prohibit-lead {
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 12px;
}

.prohibit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.prohibit-list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 6px;
  font-size: 0.9rem;
  line-height: 1.6;
}

.prohibit-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #ff2a9f;
  font-size: 0.8rem;
}

.prohibit-note {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #d40000;
  text-align: center;
}

/* 画像サムネを横に並べたいとき用（任意） */
.fee-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

.fee-thumbs img {
  display: block;
  width: 120px;
  max-width: 32%;
  border-radius: 12px;
  object-fit: cover;
}

/* スマホ向け微調整 */
@media (max-width: 640px) {
  .fee-section {
    margin: 24px auto;
    padding: 18px 12px;
  }
  .fee-title-main {
    font-size: 1.6rem;
  }
  .fee-table th,
  .fee-table td,
  .date-course-table th,
  .date-course-table td {
    padding: 8px 4px;
    font-size: 0.85rem;
  }
}

/* ======================================
 * OPTION タイトル（柔らかいピンク版）
 * ====================================*/
.option-title-wrap {
  text-align: center;
  margin: 30px auto 12px;
}

.option-title {
  display: inline-block;
  padding: 6px 26px 7px;
  font-size: 1rem;
  letter-spacing: 0.18em;
  font-weight: 900;

  color: #ff2a8e;
  background: linear-gradient(135deg, #ffeaf5 0%, #ffd5ec 45%, #ffeaf5 100%);
  border-radius: 999px;

  box-shadow: 0 1px 4px rgba(255, 120, 180, 0.25),
    inset 0 0 6px rgba(255, 255, 255, 0.65);
}

/* ======================================
   OPTION PRICE（淡ピンク・コンパクト）
   ※ HTMLは <div class="option-price-banner"> のままでOK
====================================== */
.option-price-banner {
  display: flex;
  align-items: center;
  justify-content: center;

  /* ページ中央寄せの決め手 */
  width: fit-content;
  margin: 0 auto;

  /* 横幅にゆとりを持たせる */
  padding: 12px 32px;
  gap: 16px;

  border-radius: 42px;

  background: linear-gradient(135deg, #ffeaf5 0%, #ffd5ec 40%, #ffeaf5 100%);
  box-shadow: 0 2px 6px rgba(255, 120, 180, 0.22),
    inset 0 0 6px rgba(255, 255, 255, 0.7);

  color: #ff5aa8;
  font-weight: bold;
  text-align: center;
}

/* 中央の金額 */
.option-price-main {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ff2a8e;
  letter-spacing: 0.02em;
}

.price-num {
  font-size: 2.2rem;
  font-weight: 900;
}

/* 矢印（左右） */
.option-arrow {
  font-size: 1.2rem;
  opacity: 0.7;
  color: #ff8cc4;
}

.arrow-left {
  transform: scaleX(-1);
}

/* スマホ調整 */
@media (max-width: 640px) {
  .option-price-banner {
    padding: 10px 24px;
    gap: 12px;
  }
  .option-price-main {
    font-size: 1.6rem;
  }
  .price-num {
    font-size: 2rem;
  }
}

/* ======================================
 * BASIC PLAY / 基本メニュー
 * ====================================*/
.basicplay-section {
  max-width: 960px;
  margin: 40px auto 0px auto;
  padding: 24px 16px 28px;
  border-radius: 20px;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.95),
      rgba(244, 247, 255, 0.96)
    ),
    repeating-linear-gradient(
      60deg,
      #f5f5f8 0,
      #f5f5f8 12px,
      #ececf3 12px,
      #ececf3 24px
    );
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* 上の黒ラベル「基本メニュー」 */
.basicplay-title-sub {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 4px 18px 5px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(255, 42, 159, 0.7), 0 0 16px rgba(255, 42, 159, 0.6);
}

/* 大きな BASIC PLAY ロゴ */
.basicplay-title-main {
  margin: 0 0 20px;
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #ff2a9f;
  text-shadow: 0 0 6px rgba(255, 180, 220, 0.9),
    0 0 18px rgba(255, 42, 159, 0.9), 0 0 32px rgba(255, 42, 159, 0.8);
}

/* プレイ内容グリッド */
.basicplay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

/* 各ボックス */
.basicplay-item {
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 下の一行メッセージ */
.basicplay-note {
  max-width: 360px;
  margin: 10px auto 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 0 10px rgba(255, 42, 159, 0.7), 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* スマホ向け調整 */
@media (max-width: 640px) {
  .basicplay-title-main {
    font-size: 2.3rem;
    letter-spacing: 0.12em;
  }
  .basicplay-section {
    padding: 20px 12px 22px;
  }
  .basicplay-item {
    font-size: 0.9rem;
    padding: 9px 6px;
  }
}

/* ======================================
 * BASIC PLAY 見出しパーツ（単体利用用）
 * ====================================*/

.basicplay-title-sub {
  display: inline-block;
  padding: 5px 18px 7px;
  background: linear-gradient(135deg, #ff64c8, #ff2a9f, #ff6fcf);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  border-radius: 999px;
  text-align: center;
  text-transform: uppercase;

  box-shadow: 0 0 8px rgba(255, 42, 159, 0.7), 0 0 18px rgba(255, 42, 159, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.25);
}

/* BASIC PLAY の大きなピンクロゴ */
.basicplay-title-main {
  margin: 0;
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #ff2a9f;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255, 180, 220, 0.9),
    0 0 18px rgba(255, 42, 159, 0.9), 0 0 32px rgba(255, 42, 159, 0.8);
}

/* センタリング用: この div はコピー先で削除してもOK */
.basicplay-heading-wrap {
  text-align: center;
  margin: 20px 0 24px;
}

/* スマホ調整 */
@media (max-width: 640px) {
  .basicplay-title-main {
    font-size: 2.3rem;
    letter-spacing: 0.12em;
  }
}

/* プレイ料金タイトル */
.play-fee-label {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 10px;
  text-align: left;
  color: #ff2a9f;
  letter-spacing: 0.06em;
}

/* ==========================================
   内容サイズに“ジャストフィット”する背景
========================================== */
.play-fee-row {
  display: inline-flex; /* ← 横幅を内容に合わせる最重要ポイント */
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 10px 18px; /* ← 少し広めにして綺麗に */
  border-radius: 14px;
  background: linear-gradient(135deg, #fff3f9, #ffe8f3);
  box-shadow: 0 4px 10px rgba(255, 42, 159, 0.08);

  /* 左寄せでOK（中央寄せしたい場合は text-align:center の外ラッパ必要） */
  margin-left: 0;
}

.play-fee-row.left-mode {
  justify-content: flex-start;
  text-align: left;
}

/* 各項目チップ */
.play-fee-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: #ffffff;
  border-radius: 999px;
  border: 1px solid #ffcce8;
}

/* 小ラベル（入会金など） */
.play-fee-item-label {
  background: #ffeef7;
  color: #ff2a9f;
  font-size: 0.78rem;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
}

/* 金額部分 */
.play-fee-item-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: #d50074;
}

.play-fee-spacer {
  height: 12px; /* ← この数値が margin-top と同じ役割 */
}

/* 注意書き（上部の余白を広く） */
.play-fee-note {
  font-size: 0.8rem;
  text-align: left;
  color: #666;
}

/* スマホは100%幅でも見栄え良し */
@media (max-width: 640px) {
  .play-fee-row {
    display: flex; /* スマホでは段が変わりやすいのでflexに戻す */
    max-width: 100%;
    padding: 10px 14px;
  }
  .play-fee-item {
    padding: 5px 8px;
  }
}