/* =========================================================
   Membershipの仕組み③「RPを活用した予約方法」
   実装パック 04_RP予約方法_slider.css を .rp-booking 配下へ移植。
   グローバルCSSは変更しない。
   併せて、差し替え対象となった既存③（PCキャンバスの確定画像／
   スマホの確定画像）をこのファイル内で非表示にする。
   HTMLからは削除していない。
========================================================= */

/* 差し替え前の③をPC・スマホとも非表示にする */
#incruises-fee-safety .fs-canvas .fs-rp-booking{ display: none; }
#incruises-fee-safety .fs-sp .fs-sp-fig.is-rp-booking{ display: none; }

/* =========================================================
   RP予約方法 3カード
   重要：このセクションだけに効くスコープCSS。
   背景は白系。グローバルCSSは変更しない。
========================================================= */
.rp-booking {
  --rp-bg: #fffcfa;   /* 既存キャンバス背景 #fffcfa と完全に一致させ、境目を出さない */
  --rp-card: #ffffff;
  --rp-ivory: #fdfbf7;
  --rp-gold: #c58c22;
  --rp-gold-soft: #ead8b6;
  --rp-brown: #3f2d24;
  --rp-orange: #d96d16;
  --rp-blue: #1c5f9e;
  --rp-line: #eadfce;
  --rp-muted: #776c63;
  --rp-danger: #c83e2c;
  background: var(--rp-bg);
  color: var(--rp-brown);
  padding: 48px 0 56px;
}

.rp-booking * { box-sizing: border-box; }

.rp-booking__inner {
  width: min(1600px, calc(100% - 40px));
  margin: 0 auto;
}

.rp-booking__header {
  text-align: center;
  margin-bottom: 28px;
}

.rp-booking__eyebrow {
  margin: 0 0 6px;
  color: #9b6c22;
  font-size: 18px;
  letter-spacing: .04em;
}

.rp-booking__title {
  margin: 0;
  font-family: var(--cruise-mincho, "Yu Mincho", "Hiragino Mincho ProN", serif);
  font-size: clamp(34px, 3vw, 52px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .03em;
}

.rp-booking__lead {
  margin: 14px auto 0;
  max-width: 900px;
  font-size: 18px;
  line-height: 1.7;
}

.rp-booking__swipe-hint {
  display: none;
  margin: 14px 0 0;
  color: #ad761c;
  font-size: 15px;
}

.rp-booking__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.rp-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--rp-card);
  border: 1px solid var(--rp-gold-soft);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(83, 63, 37, .07);
  overflow: hidden;
}

.rp-card__head {
  min-height: 148px;
  padding: 20px 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.rp-card__pattern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 122px;
  min-height: 34px;
  padding: 6px 18px;
  margin-bottom: 8px;
  color: #fff;
  background: linear-gradient(180deg, #d6a84a 0%, #b97b14 100%);
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  font-size: 16px;
  letter-spacing: .05em;
}

.rp-card__title {
  min-height: 48px;
  margin: 0;
  font-family: var(--cruise-mincho, "Yu Mincho", "Hiragino Mincho ProN", serif);
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.2;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rp-card__sub {
  min-height: 42px;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: #59483b;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.rp-card__photo {
  display: block;
  margin: 0 16px;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}

.rp-card__photo img {
  display: block;
  width: 100%;
  /* height属性(287)が presentational hint として効いてしまい aspect-ratio が
     無視されるため、明示的に auto を指定して比率どおりに拡縮させる */
  height: auto;
  aspect-ratio: 2.51 / 1;
  object-fit: cover;
}

.rp-card__image-note {
  display: block;
  margin: 5px 18px 0;
  color: var(--rp-muted);
  text-align: right;
  font-size: 11px;
}

.rp-card__example {
  margin: 7px 0 8px;
  text-align: center;
  font-family: var(--cruise-mincho, "Yu Mincho", "Hiragino Mincho ProN", serif);
  font-size: 20px;
  letter-spacing: .02em;
}

.rp-card__payment {
  min-height: 124px;
  margin: 0 16px;
  padding: 12px 12px;
  border: 1px solid var(--rp-gold-soft);
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  background: #fff;
}

.rp-card__pay {
  min-width: 0;
  text-align: center;
}

.rp-card__pay-label {
  display: block;
  margin-bottom: 2px;
  color: #634d3c;
  font-size: 14px;
}

.rp-card__pay strong {
  display: block;
  font-size: clamp(28px, 2.2vw, 40px);
  line-height: 1.05;
  font-weight: 600;
}

.rp-card__pay small {
  display: block;
  margin-top: 5px;
  min-height: 34px;
  font-size: 12px;
  line-height: 1.35;
}

.rp-card__pay--rp strong { color: var(--rp-orange); }
.rp-card__pay--cash strong { color: var(--rp-blue); }

.rp-card__plus {
  font-size: 28px;
  color: #967148;
}

.rp-card__burden {
  min-height: 106px;
  margin: 10px 16px 0;
  padding: 10px 12px;
  border: 1px solid var(--rp-gold-soft);
  border-radius: 11px;
  background: #fffdfa;
  text-align: center;
}

.rp-card__burden > span {
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
}

.rp-card__burden > strong {
  display: block;
  color: #b65b16;
  font-family: var(--cruise-mincho, "Yu Mincho", "Hiragino Mincho ProN", serif);
  font-size: clamp(28px, 2.25vw, 40px);
  line-height: 1.1;
}

.rp-card__burden > small {
  display: block;
  margin-top: 6px;
  color: #5e544b;
  font-size: 11px;
  line-height: 1.45;
}

.rp-card__info {
  display: grid;
  grid-template-rows: 1fr auto auto;
  flex: 1;
  margin: 12px 16px 0;
  border: 1px solid var(--rp-line);
  border-radius: 11px;
  overflow: hidden;
}

.rp-card__info-block {
  padding: 13px 14px;
  border-bottom: 1px solid var(--rp-line);
}

.rp-card__info-block:last-child { border-bottom: 0; }

.rp-card__info-block h4 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.3;
}

.rp-card__info-block p,
.rp-card__info-block ul {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

.rp-card__info-block ul { padding-left: 1.3em; }
.rp-card__warning { color: var(--rp-danger); }

.rp-card__details {
  margin: 12px 16px 16px;
  border: 1px solid var(--rp-gold-soft);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.rp-card__details summary {
  list-style: none;
  cursor: pointer;
  min-height: 46px;
  padding: 12px 42px 12px 14px;
  position: relative;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}

.rp-card__details summary::-webkit-details-marker { display: none; }

.rp-card__details summary::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-55%);
  color: #b57a17;
  font-size: 24px;
  transition: transform .18s ease;
}

.rp-card__details[open] summary::after {
  transform: translateY(-45%) rotate(180deg);
}

.rp-card__details-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--rp-line);
  background: var(--rp-ivory);
}

.rp-card__details-body p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.65;
}

.rp-card__details-body p:last-child { margin-bottom: 0; }

/* 折りたたみ内に移した解説ブロック（実質自己負担額の直下に配置） */
.rp-card__details { margin-top: 12px; }
.rp-card__info--in {
  display: block;
  flex: none;
  margin: 0 0 12px;
  background: #fff;
}
.rp-card__details-calc { }


.rp-booking__dots {
  display: none;
}

.rp-booking__footnote {
  margin: 18px auto 0;
  max-width: 1320px;
  color: #5e564f;
  font-size: 13px;
  line-height: 1.65;
}

/* Smartphone: horizontal swipe. Pattern 1 is initial card. */
@media (max-width: 768px) {
  .rp-booking {
    padding: 34px 0 42px;
    background: #fffcfa;
  }

  .rp-booking__inner {
    width: 100%;
  }

  .rp-booking__header {
    padding: 0 18px;
    margin-bottom: 20px;
  }

  .rp-booking__eyebrow { font-size: 16px; }
  .rp-booking__title { font-size: 32px; }
  .rp-booking__lead { font-size: 17px; line-height: 1.65; }
  .rp-booking__swipe-hint { display: block; }

  .rp-booking__viewport {
    overflow: hidden;
  }

  .rp-booking__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 18px 14px;
    scroll-padding-left: 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .rp-booking__track::-webkit-scrollbar { display: none; }

  .rp-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(83, 63, 37, .08);
  }

  .rp-card__head {
    min-height: 138px;
    padding: 18px 14px 12px;
  }

  .rp-card__title {
    min-height: 46px;
    font-size: 28px;
  }

  .rp-card__sub {
    min-height: 42px;
    font-size: 14px;
  }

  .rp-card__photo { margin-inline: 12px; }
  .rp-card__image-note { margin-inline: 14px; }

  .rp-card__payment {
    min-height: 116px;
    margin-inline: 12px;
  }

  .rp-card__burden {
    min-height: 104px;
    margin-inline: 12px;
  }

  .rp-card__info {
    margin-inline: 12px;
  }

  .rp-card__details {
    margin-inline: 12px;
    margin-bottom: 12px;
  }

  .rp-booking__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
  }

  .rp-booking__dots button {
    appearance: none;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ead7b2;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease;
  }

  .rp-booking__dots button.is-active {
    background: #bf841d;
    transform: scale(1.25);
  }

  .rp-booking__footnote {
    padding: 0 18px;
    font-size: 12px;
  }
}

/* 390–430px: senior-friendly readability */
@media (max-width: 430px) {
  .rp-card { flex-basis: 87%; }
  .rp-card__pay strong { font-size: 31px; }
  .rp-card__burden > strong { font-size: 31px; }
  .rp-card__info-block h4 { font-size: 17px; }
  .rp-card__info-block p,
  .rp-card__info-block ul,
  .rp-card__details-body p { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-booking__track { scroll-behavior: auto; }
  .rp-card__details summary::after { transition: none; }
}

/* =========================================================
   3カードの情報ブロック位置を厳密に揃える（PC 3列時）
   カードの各パーツをトラック側のグリッド行へsubgridで共有させ、
   「解説とメリット」「こんな方におすすめ」「条件」の開始位置を
   3カードで完全に一致させる。
========================================================= */
@media (min-width: 769px) {
  /* 解説を折りたたみへ移したため subgrid は不要。
     head / payment / burden の min-height で3カードの高さが揃う。 */
  .rp-card__info-block { min-width: 0; }
  /* 3カードの各パーツを同じ行に載せ、折りたたみの位置を完全に揃える */
  .rp-booking__track { grid-template-rows: repeat(var(--rp-rows, 7), auto); }
  .rp-card { display: grid; grid-row: span var(--rp-rows, 7); grid-template-rows: subgrid; }
  .rp-card__details { align-self: start; }
}

/* =========================================================
   RP予約方法：スマホ縦間延び修正
   目的：元デザインのコンパクトな縦リズムへ戻す
   注意：既存RP予約CSSの最後に追記すること
========================================================= */

@media (max-width: 768px) {

  /* 余った高さをカードや情報欄へ強制配分しない */
  .rp-booking__track {
    align-items: flex-start !important;
  }

  .rp-booking .rp-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
  }

  /* ヘッダー：固定高さを解除 */
  .rp-booking .rp-card__head {
    min-height: 0 !important;
    padding: 12px 12px 8px !important;
  }

  .rp-booking .rp-card__pattern {
    min-height: 30px !important;
    margin-bottom: 5px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .rp-booking .rp-card__title {
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.18 !important;
  }

  .rp-booking .rp-card__sub {
    min-height: 0 !important;
    margin-top: 4px !important;
    line-height: 1.38 !important;
  }

  /* 写真〜金額の間隔を元画像に近づける */
  .rp-booking .rp-card__image-note {
    margin-top: 3px !important;
  }

  .rp-booking .rp-card__example {
    margin-top: 5px !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }

  /* 支払内訳：固定高さを解除 */
  .rp-booking .rp-card__payment {
    min-height: 0 !important;
    padding: 8px 9px !important;
    gap: 6px !important;
  }

  .rp-booking .rp-card__pay-label {
    margin-bottom: 1px !important;
  }

  .rp-booking .rp-card__pay small {
    min-height: 0 !important;
    margin-top: 2px !important;
    line-height: 1.28 !important;
  }

  /* 実質自己負担：固定高さを解除 */
  .rp-booking .rp-card__burden {
    min-height: 0 !important;
    margin-top: 7px !important;
    padding: 7px 9px !important;
  }

  .rp-booking .rp-card__burden > span {
    margin-bottom: 1px !important;
    line-height: 1.25 !important;
  }

  .rp-booking .rp-card__burden > strong {
    line-height: 1.04 !important;
  }

  .rp-booking .rp-card__burden > small {
    margin-top: 4px !important;
    line-height: 1.32 !important;
  }

  /* 最重要：
     flex:1 と 1fr を解除して、
     解説欄へ余白を押し込まない */
  .rp-booking .rp-card__info {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    grid-template-rows: none !important;
    margin-top: 8px !important;
  }

  .rp-booking .rp-card__info-block {
    min-height: 0 !important;
    padding: 8px 10px !important;
  }

  .rp-booking .rp-card__info-block h4 {
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
  }

  .rp-booking .rp-card__info-block p,
  .rp-booking .rp-card__info-block ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.43 !important;
  }

  .rp-booking .rp-card__info-block ul {
    padding-left: 1.25em !important;
  }

  /* 詳細バーをカード下部へ寄せる */
  .rp-booking .rp-card__details {
    margin-top: 7px !important;
    margin-bottom: 9px !important;
  }

  .rp-booking .rp-card__details summary {
    min-height: 0 !important;
    padding: 9px 38px 9px 10px !important;
    line-height: 1.3 !important;
  }

  .rp-booking .rp-card__details-body {
    padding: 9px 10px 10px !important;
  }

  .rp-booking .rp-card__details-body p {
    line-height: 1.45 !important;
    margin-bottom: 6px !important;
  }

  /* スライダー周辺の余白も圧縮 */
  .rp-booking__track {
    padding-bottom: 8px !important;
  }

  .rp-booking__dots {
    margin-top: 6px !important;
  }

  .rp-booking__footnote {
    margin-top: 10px !important;
  }
}

/* 390〜430px：
   文字を極端に縮小せず、余白中心で圧縮 */
@media (max-width: 430px) {
  .rp-booking .rp-card__head {
    padding-top: 10px !important;
  }

  .rp-booking .rp-card__info-block {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

/* =========================================================
   RP予約方法：折りたたみ位置を3カードで揃える（スマホ）
   解説を折りたたみへ移したため、その上のパーツだけ高さを固定する
========================================================= */
@media (max-width: 768px) {
  .rp-booking .rp-card__head    { min-height: 138px !important; }
  .rp-booking .rp-card__payment { min-height: 126px !important; }
  .rp-booking .rp-card__burden  { min-height: 132px !important; }
}

/* 開いた解説の末尾に控えめな「閉じる」（3つの特典と同じ流儀） */
.rp-card__close-wrap {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(212,160,74,.30);
  text-align: center;
}
.rp-card__close {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: #8a7460;
  font: 500 14px/1.2 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.rp-card__close-ic { font-size: 11px; line-height: 1; color: #b9903f; }
.rp-card__close:hover,
.rp-card__close:focus-visible { color: #8f5b0a; }


/* =========================================================
   スマートフォン：50〜70代向けの文字サイズ統一
   本文17px／注記14px／リード20px（PC 1600pxは変更しない）
   ========================================================= */
@media (max-width: 768px) {
  .rp-booking__lead { font-size: 20px; line-height: 1.6; }
  .rp-booking__swipe-hint { font-size: 14px; }

  /* カード見出し下の説明 */
  .rp-booking .rp-card__sub { font-size: 17px; }

  /* 支払内訳のラベルと補足 */
  .rp-booking .rp-card__pay-label { font-size: 16px; }
  .rp-booking .rp-card__pay small { font-size: 14px; }

  /* 実質自己負担額の注記 */
  .rp-booking .rp-card__burden > small { font-size: 14px; }

  /* 写真の注記 */
  .rp-booking .rp-card__image-note { font-size: 14px; }

  /* 解説の開閉バーと本文 */
  .rp-booking .rp-card__details summary { font-size: 17px; }
  .rp-booking .rp-card__info-block p,
  .rp-booking .rp-card__info-block ul,
  .rp-booking .rp-card__info-block li,
  .rp-booking .rp-card__details-body p { font-size: 17px; }
  .rp-booking .rp-card__close { font-size: 17px; }

  /* セクション最下部の注記 */
  .rp-booking__footnote { font-size: 14px; line-height: 1.6; }
}

/* スマートフォンのみ：通常予約「現金」下の「・クレジットカード等」を非表示
   （PC 1600pxは従来どおり表示。マークアップは削除していない） */
@media (max-width: 768px) {
  .rp-booking .rp-cash-note { display: none; }
}

/* ============================================================
   2026-09-07　PC版の文字サイズ統一（フォントサイズ統一ルール v1）
   PC基準：大見出し54 / 中見出し32 / 小見出し24 / リード22 / 本文20 / 注記15
   スマホ表示に影響を与えないため、min-width:769px の中だけに書いている。
   数値の表示（金額・パーセント）と装飾記号は、レイアウトが崩れるため変更しない。
   ============================================================ */
@media (min-width: 769px) {
  /* 大見出し（1600pxで54px。狭い画面では自動で縮む） */
  .rp-booking__title { font-size: clamp(34px, 3.375vw, 54px); }

  /* リード */
  .rp-booking__lead { font-size: 22px; }

  /* 小見出し */
  .rp-card__info-block h4 { font-size: 24px; }

  /* 本文 */
  .rp-card__sub { font-size: 20px; }
  .rp-card__info-block p,
  .rp-card__info-block ul { font-size: 20px; }
  .rp-card__details-body p { font-size: 20px; }
  .rp-card__details summary { font-size: 20px; }
  .rp-card__close { font-size: 20px; }
  .rp-card__warning { font-size: 20px; }

  /* ラベル */
  .rp-card__pattern { font-size: 18px; }
  .rp-card__pay-label { font-size: 18px; }

  /* 注記 */
  .rp-card__pay small { font-size: 15px; }
  .rp-card__burden > small { font-size: 15px; }
  .rp-card__image-note { font-size: 15px; }
  .rp-booking__footnote { font-size: 15px; }
  .rp-cash-note { font-size: 15px; }
}