@charset "UTF-8";
/* ==============================================
   BENEFITS (公式サイト予約特典 / 会員特典)
   ============================================== */
.p-benefits {
  background-color: #1f3134;
  padding-bottom: 13rem;
}

/* ================= イントロ ================= */
.p-benefits__intro {
  padding-top: 11rem;
}
.p-benefits__intro-texts {
  margin-top: 3.2rem;
}
.p-benefits__intro-texts .u-text {
  color: #fff;
}

/* ================= ゴールドの小見出し（公式サイト予約特典 / （1）会員プログラム 等） ================= */
.p-benefits__subtitle {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--c-gold, #a98f54);
}

/* ================= 公式サイト予約特典 ================= */
.p-benefits__official {
  margin-top: 6.3rem;
}

/* 円形画像 */
.p-benefits__circle-list {
  display: flex;
  gap: 4rem;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}
.p-benefits__circle-item {
  width: 16rem;
}
.p-benefits__circle-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.p-benefits__circle-caption {
  margin-top: 1.2rem;
  font-size: 1.7rem;
  line-height: 1.88;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
/* PCでは1行内の全角スペース、SPでは改行になるためスペース自体を消す */
@media (max-width: 1000px) {
  .p-benefits__caption-space {
    display: none;
  }
}
.p-benefits__upper-table-texts-area {
  margin-top: 4.7rem;
}
.p-benefits__upper-table-title {
  margin-bottom: 0.6rem;
  font-size: 1.9rem;
  line-height: 1.78;
  letter-spacing: 0.05em;
  color: #fff;
}

/* ================= テーブル共通 ================= */
.p-benefits__table,
.p-benefits__rank-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1px; /* 行間に背景色(#1f3134)の1px線を見せる */
}
.p-benefits__table th,
.p-benefits__table td,
.p-benefits__rank-table th,
.p-benefits__rank-table td {
  background-color: #2b3d40;
  color: #fff;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.05em;
  padding: 1.4rem 1rem 1.5rem;
  vertical-align: top;
}
/* グレー表示のセル（×、0% 等） */
.p-benefits__table .is-gray,
.p-benefits__rank-table .is-gray {
  color: rgba(255, 255, 255, 0.45);
}

/* 比較テーブル（他社サイト予約 / 公式サイト予約） */
.p-benefits__table-area {
  margin-top: 6.7rem;
}
.p-benefits__table thead th {
  font-size: 1.5rem;
  text-align: center;
}
.p-benefits__table tbody th {
  width: 37%;
  text-align: left;
  padding-left: 2rem;
}
.p-benefits__table tbody td {
  text-align: center;
}

/* 会員プログラムテーブル */
.p-benefits__rank-table-area {
  margin-top: 2.1rem;
}
.p-benefits__rank-table th,
.p-benefits__rank-table td {
  text-align: left;
  padding-left: 2rem;
}
.p-benefits__rank-table thead th {
  font-size: 1.6rem;
}
.p-benefits__rank-table--pc tbody th {
  width: 17.5%;
}
.p-benefits__rank-table--pc thead th:nth-child(2) {
  width: 8.5%;
}
.p-benefits__rank-table--pc thead th:nth-child(3) {
  width: 11.5%;
}
/* SP用の転置テーブルはPCでは非表示 */
.p-benefits__rank-table--sp {
  display: none;
}

/* 注釈（※〜） */
.p-benefits__note {
  display: flex;
  margin-top: 3.3rem;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}
.p-benefits__note-mark {
  flex-shrink: 0;
  margin-right: 0.6em;
}
.p-benefits__rank-table-area + .p-benefits__note {
  margin-top: 3.2rem;
}
.p-benefits__note + .p-benefits__note {
  margin-top: 0;
}
/* ================= 会員特典 ================= */
.p-benefits__member {
  margin-top: 11rem;
}
.p-benefits__member-block {
  margin-top: 3.7rem;
}
.p-benefits__member-block + .p-benefits__member-block {
  margin-top: 4.6rem;
}
.p-benefits__member-block .u-text {
  margin-top: 1.8rem;
  color: #fff;
}
.p-benefits__member > .l-wrapper > .p-benefits__note {
  margin-top: 5rem;
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 1000px) {
  /* KVタイトルが2行になるため行間を広げる（benefitsのみ）。
     行間を広げた分だけ下の余白が広がって見えるので bottom を詰める（共通値 6.8rem → 6.3rem） */
  .p-benefits .c-page-title {
    line-height: 1.4;
  }
  .p-benefits .c-page-head__content {
    bottom: 6.3rem;
  }

  .p-benefits {
    padding-bottom: 7rem;
  }

  .p-benefits__intro {
    padding-top: 6.3rem;
  }
  .p-benefits__intro-texts {
    margin-top: 2.8rem;
  }

  .p-benefits__subtitle {
    font-size: 1.9rem;
  }

  .p-benefits__official {
    margin-top: 3.7rem;
  }
  .p-benefits__circle-list {
    gap: 2.5rem;
    margin-top: 2.3rem;
  }
  .p-benefits__circle-item {
    width: 14rem;
  }
  .p-benefits__circle-caption {
    margin-top: 1.5rem;
    font-size: 1.5rem;
  }

  .p-benefits__upper-table-texts-area {
    margin-top: 2.9rem;
  }
  .p-benefits__upper-table-title {
    margin-bottom: 1rem;
    font-size: 1.6rem;
  }

  .p-benefits__table th,
  .p-benefits__table td,
  .p-benefits__rank-table th,
  .p-benefits__rank-table td {
    font-size: 1.4rem;
    padding: 1.3rem 0.5rem 1.4rem;
  }

  .p-benefits__table-area {
    margin-top: 4.5rem;
  }
  .p-benefits__table thead th {
    font-size: 1.4rem;
  }
  .p-benefits__table tbody th {
    width: 30%;
    padding-left: 1.4rem;
  }

  .p-benefits__rank-table-area {
    margin-top: 2.1rem;
  }
  /* 各行の左端セルだけ左余白を確保。他のセルはSP共通のpadding(0.5rem)のまま */
  .p-benefits__rank-table tr > :first-child {
    padding-left: 1.4rem;
  }
  .p-benefits__rank-table thead th {
    font-size: 1.4rem;
  }
  /* 1000px以下は転置版（ランクを行に持つ）に切り替え */
  .p-benefits__rank-table--pc {
    display: none;
  }
  .p-benefits__rank-table--sp {
    display: table;
  }
  .p-benefits__rank-table--sp tbody th {
    width: 22%;
    vertical-align: top;
  }
  .p-benefits__rank-table--sp thead th:nth-child(2) {
    width: 38%;
  }
  .p-benefits__rank-table--sp thead th:nth-child(3) {
    width: 18%;
  }
  /* 各行の右端セルだけ右余白を確保（比較テーブル・会員プログラムSP版） */
  .p-benefits__table tr > :last-child,
  .p-benefits__rank-table--sp tr > :last-child {
    padding-right: 0.7rem;
  }

  .p-benefits__note {
    margin-top: 2.3rem;
    font-size: 1.3rem;
  }
  .p-benefits__rank-table-area + .p-benefits__note {
    margin-top: 1.9rem;
  }

  .p-benefits__member {
    margin-top: 5.8rem;
  }
  .p-benefits__member-block {
    margin-top: 2.8rem;
  }
  .p-benefits__member-block + .p-benefits__member-block {
    margin-top: 4rem;
  }
  .p-benefits__member-block .u-text {
    margin-top: 1.5rem;
  }
  .p-benefits__member > .l-wrapper > .p-benefits__note {
    margin-top: 4rem;
  }
}