/* ==== 02_tour-plans：c-tour-plan をそのまま流用 ==== */
.p-tour-plans {
  padding: var(--space-120) 0;
  background: var(--color-cream);
}

@media (max-width: 767px) {
  .p-tour-plans {
    padding: var(--space-56) 0;
  }
}

.p-tour-plans .c-tour-plan__body {
  gap: var(--space-8);
}

.p-tour-plans .c-tour-plan__desc-row {
  margin-top: var(--space-16);
}

.p-tour-plans .c-tour-plan__duration {
  display: inline-block;
  padding-inline: var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: 4px;
  margin-bottom: var(--space-16);
}

@media (max-width: 767px) {
  .p-tour-plans .c-tour-plan__body {
    gap: 0;
  }
  .p-tour-plans .c-tour-plan__desc-row {
    margin-top: var(--space-24);
  }
  .p-tour-plans .c-tour-plan__duration {
    font-size: var(--font-size-base);
  }
}

/* ==== 03〜05_tour-01/02/03 共通：ツアー詳細セクション ==== */
/* 背景画像はic_tour投稿の管理画面（PC/SP）から選び、--tour-bg-pc / --tour-bg-sp としてこの要素に
   インラインstyleで渡している（ID別のCSSルールは廃止。SP側は::before疑似要素で使うため
   CSSカスタムプロパティ経由にする必要がある）。 */
.p-tour-detail {
  position: relative;
  background-repeat: no-repeat, no-repeat;
  /* グラデーションはセクション自体の高さ基準（scroll）、写真はビューポート基準で固定表示（fixed）にするため個別指定 */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 13%), var(--tour-bg-pc);
  background-size: 100% 100%, cover;
  background-position: top, center;
  background-attachment: scroll, fixed;
}

.p-tour-detail__inner {
  padding-top: var(--space-144);
}

.p-tour-detail__content-wrap {
  position: relative;
}

.p-tour-detail__panel {
  position: absolute;
  top: 0;
  bottom: 320px;
  left: calc(50% - 240px);
  right: 0;
  z-index: 0;
  background: var(--color-section-dark);
}

.p-tour-detail__head {
  padding-bottom: var(--space-80);
  border-bottom: 1px solid var(--color-white);
}

.p-tour-detail__eyebrow {
  margin-bottom: var(--space-8);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-white);
}

.p-tour-detail__name {
  font-size: var(--font-size-3xl-plus);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-white);
}

/* p-tour.jsのIntersectionObserverが、このツアーのsectionのTOP（高さ0）を検知するための目印。
   画面上端に達した＝このツアーのTOPに来た瞬間を表す（レイアウトには影響させない）。 */
.p-tour-detail__top-marker {
  height: 0;
}

/* スマホ専用のスクロール追従バー（ツアー名＋予約ボタン）。PCは.l-headerが常時固定表示のため不要。
   .p-tour-detailの直下に置き、position:stickyの基準（containing block）をこのツアーのsection
   全体にすることで、このツアーを見ている間だけ上部に貼り付き、次のツアーのsectionに入ったら
   自然に入れ替わる。常時表示ではなく、各ツアーのTOP（.p-tour-detail__top-marker）に
   スクロールで達したタイミングでふわっと現れるようにするため、表示のON/OFFはJS
   （p-tour.js、IntersectionObserverでTOP通過を検知）が[data-tour-mobile-bar]に
   付け外しする.is-visibleクラスで制御し、CSS側はopacityのtransitionでフェードさせる。 */
.p-tour-detail__mobile-bar {
  display: none;
}

.p-tour-detail__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 80%; /* 960/1200。タブレット幅でもcontainer内に収まるよう%で流動化 */
  margin-left: 20%; /* 240/1200 */
  padding-top: var(--space-64);
  padding-bottom: var(--space-120);
}

/* セクション間の余白：アコーディオンが閉じている間は詰め、開くと通常間隔に戻す。
   flexのgapは全ペア一律にしか効かないため、直下要素のmargin-bottomで持たせ、
   :has()で自身が抱える開閉パネルの状態を見て動的に切り替える。 */
.p-tour-detail__content > *:not(:last-child) {
  margin-bottom: var(--space-80);
  transition: margin-bottom 0.3s ease;
}

.p-tour-detail__content > *:has(> .p-tour-detail__accordion-panel.is-collapsed):not(:last-child) {
  margin-bottom: 0;
}

/* ---- リード文 ---- */
.p-tour-detail__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

.p-tour-detail__intro-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-white);
}

.p-tour-detail__intro-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-loose);
  color: var(--color-white);
  white-space: pre-line;
  text-align: left;
}

/* 撮影オプションのリード文（c-section-heading__lead流用・白文字化） */
.p-tour-detail .c-section-heading__lead {
  color: var(--color-white);
}

/* ---- 共通見出し（c-section-heading流用・白文字化） ----
   タイトル文字色・下線色の共通スタイル。見出し〜コンテンツの間隔は、開閉式セクションは
   .p-tour-detail__accordion-heading 側で、開閉なしのセクションは直下のルールで持つ。 */
.p-tour-detail .c-section-heading {
  margin-bottom: 0;
}

.p-tour-detail .c-section-heading__inner {
  padding-bottom: var(--space-24);
  border-bottom-color: var(--color-white);
}

.p-tour-detail .c-section-heading__title {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-relaxed);
  color: var(--color-white);
}

/* 開閉ボタンを持たないセクション（例：ツアー概要）の見出し。
   親.p-tour-detail__sectionにflex gapが無いため、margin-bottomがそのまま下線→コンテンツの距離になる。
   子孫セレクタではなく直接の子だけに絞る（本文側に独自のc-section-headingを持つ
   ショートコードを埋め込むことがあり、子孫セレクタだと詳細度が同点でそちらの余白まで書き換えてしまうため）。 */
.p-tour-detail__section > .c-section-heading {
  margin-bottom: var(--space-56);
}

/* ic_tour投稿のセクション繰り返し／よくあるご質問／持ち物・参加条件等で共通のアコーディオン見出し。
   タイトルと開閉ボタンを同じ下線の行に並べる。親（.p-tour-detail__section等）にflex gapが
   無いため、margin-bottomがそのまま下線→パネルの距離になる。 */
.p-tour-detail__accordion-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  padding-bottom: var(--space-24);
  margin-bottom: var(--space-56);
  border-bottom: 1px solid var(--color-white);
}

.p-tour-detail__accordion-heading .c-section-heading {
  margin-bottom: 0;
}

.p-tour-detail__accordion-heading .c-section-heading__inner {
  padding-bottom: 0;
  border-bottom: none;
}

/* ---- ツアー概要 ---- */
.p-tour-detail__overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.p-tour-detail__box-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}

.p-tour-detail__box {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.p-tour-detail__box-head {
  padding: var(--space-8) var(--space-40);
  background: var(--color-cream);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  text-align: center;
}

.p-tour-detail__box-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-24);
  text-align: center;
}

.p-tour-detail__box-value {
  overflow-wrap: break-word;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

.p-tour-detail__box-note {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

.p-tour-detail__price-head {
  padding: var(--space-8) var(--space-40);
  background: var(--color-cream);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  text-align: center;
}

.p-tour-detail__price-body {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-tour-detail__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-16) var(--space-24);
}

.p-tour-detail__price-item,
.p-tour-detail__price-sep {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

.p-tour-detail__price-notes {
  display: flex;
  flex-direction: column;
}

.p-tour-detail__price-note {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

/* ---- 見出しの開閉ボタン／折りたたみパネル（アコーディオン共通） ---- */
.p-tour-detail__accordion-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
  letter-spacing: 0.05em;
  color: var(--color-white);
  cursor: pointer;
}

.p-tour-detail__accordion-toggle-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  transition: transform 0.3s ease;
}

.p-tour-detail__accordion-toggle[aria-expanded="false"] .p-tour-detail__accordion-toggle-icon {
  transform: rotate(180deg);
}

.p-tour-detail__accordion-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}

.p-tour-detail__accordion-panel.is-collapsed {
  grid-template-rows: 0fr;
}

.p-tour-detail__accordion-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.p-tour-detail__spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-tour-detail__spec-row {
  display: flex;
  gap: var(--space-48);
  padding: var(--space-16) 0;
  border-bottom: 1px dashed var(--color-white);
}

.p-tour-detail__spec-row:first-child {
  padding-top: 0;
}

.p-tour-detail__spec-row:last-child {
  border-bottom: 0;
}

.p-tour-detail__spec-label {
  padding-left: var(--space-24);
  flex: 0 0 256px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-relaxed);
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.p-tour-detail__spec-value {
  padding-right: var(--space-24);
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  color: var(--color-white);
}

.p-tour-detail__spec-value p + p,
.p-tour-detail__spec-value p + ul {
  margin-top: 1.8em;
}

.p-tour-detail__spec-value ul {
  list-style: disc;
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.p-tour-detail__spec-value a {
  color: inherit;
}

/* 予約CTAボタンは「持ち物・参加条件等」アコーディオンの本文内に置く
   （閉じている間はリストと一緒に隠れる）。リスト最後の項目との間隔を空ける。 */
.p-tour-detail__reserve-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-32);
}

/* ---- ツアーの魅力（c-photo-text流用・白文字化） ---- */
.p-tour-detail .c-photo-text-list {
  margin-left: 0;
}

.p-tour-detail .c-photo-text__image {
  aspect-ratio: 460 / 325;
}

.p-tour-detail .c-photo-text__body {
  gap: var(--space-16);
}

.p-tour-detail .c-photo-text__title,
.p-tour-detail .c-photo-text__text {
  color: var(--color-white);
}

/* ---- 体験の流れ（c-flow流用） ----
   .c-flowは見出しmargin-bottom:0＋自身のgapで間隔を作る共通コンポーネントのため、
   このページだけgapを56px（SP:40px）に上書きする（他ページのc-flow利用箇所には影響しない）。 */
.p-tour-detail__flow .c-flow {
  gap: var(--space-56);
}

.p-tour-detail .c-flow__list {
  width: 100%;
}

.p-tour-detail .c-flow__card-left {
  align-items: center;
  gap: var(--space-32);
}

.p-tour-detail .c-flow__card {
  gap: var(--space-40);
}

.p-tour-detail .c-flow__step-content {
  gap: var(--space-8);
}


.p-tour-detail .c-flow__connector {
  background-image: radial-gradient(circle, var(--color-white) 2px, transparent 2px);
}

/* ---- 撮影オプション ---- */
.p-tour-detail__option-row {
  display: flex;
  gap: var(--space-56);
  align-items: stretch;
}

.p-tour-detail__option-boxes {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-tour-detail__option-box {
  background: var(--color-white);
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.p-tour-detail__option-box-head {
  padding: var(--space-8) var(--space-40);
  background: var(--color-cream);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-align: center;
}

.p-tour-detail__option-box-body {
  padding: var(--space-16) var(--space-24);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-align: center;
}

.p-tour-detail__option-video {
  flex: 1 1 444px;
  min-width: 0;
  align-self: flex-start; /* 親.p-tour-detail__option-rowのalign-items:stretchで高さが伸ばされると、
    aspect-ratioにより幅も連動して広がり縦横比が崩れるため、伸びないようにする */
  aspect-ratio: 444 / 320; /* 固定heightではなくaspect-ratioにして、幅が変わっても常にPCと同じ縦横比を保つ */
}

.p-tour-detail__option-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-base);
}

.p-tour-detail__option-notes {
  margin-top: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.p-tour-detail__option-note {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-white);
}

/* ---- よくあるご質問（c-faq流用・白文字化） ---- */
/* c-faq__bodyはコンポーネント既定でwidth:824px固定だが、このページではコンテンツ幅いっぱいに広げる */
.p-tour-detail .c-faq__body {
  width: 100%;
}

.p-tour-detail .c-faq__question,
.p-tour-detail .c-faq__answer {
  color: var(--color-white);
}

/* 回答文中のc-text-linkは既定で緑（--color-secondary）だが、写真背景のこのセクションでは
   緑が背景に重なって読みづらいため、白文字に統一する（下線で判別） */
.p-tour-detail .c-text-link {
  color: var(--color-white);
}

.p-tour-detail .c-faq__icon {
  color: var(--color-white);
}

.p-tour-detail .c-faq__btn-wrap {
  justify-content: flex-end;
}

/* ---- 日時を予約する ----
   親.p-tour-detail__reserveに親gapが無いため、見出しのmargin-bottomがそのまま下線→コンテンツの距離になる。 */
.p-tour-detail__reserve .c-section-heading {
  margin-bottom: var(--space-56);
}

.p-tour-detail__reserve-embed {
  overflow: hidden;
  border-radius: var(--radius-base);
  line-height: 0;
}

.p-tour-detail__reserve-embed iframe {
  display: block;
  width: 100%;
  height: 800px;
  border: none;
}

@media (max-width: 1200px) {
  .p-tour-detail__content {
    width: 90%;
    margin-left: 10%;
  }

  .p-tour-detail__panel {
    left: calc(50% - 15vw);
  }

  .p-tour-detail__reserve-embed iframe {
    height: 700px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .p-tour-detail__price-row {
    gap: var(--space-16) var(--space-16);
  }
}

/* ==== スマホ（767px以下） ==== */
@media (max-width: 767px) {
  /* ---- 03〜05_tour-01/02/03 共通 ---- */
  /* iOS Safariのbackground-attachment:fixedは背景写真がぼやける既知の不具合があるため、
     SPのみ写真+グラデーションを::beforeに切り出し、position:stickyで固定表示に見せる
     （PCは既存のfixed背景のまま変更しない）。stickyはネイティブのスクロール描画に
     完全同期するため、JS(scrollイベント)で動かす方式のような遅延が原理的に発生しない。
     ::beforeは画面1枚分の高さのまま上端にstickyさせ、margin-bottomで同じ分だけ
     打ち消して後続コンテンツを押し下げないようにしている（定番のstickyパララックス手法）。 */
  /* overflow:hiddenだと.p-tour-detail自身がスクロールコンテナ扱いになり、
     直下のposition:stickyがページではなくこの要素基準になって動かなくなるため、
     stickyを壊さないoverflow-x:clipを使う（CLAUDE.md「はみ出す装飾」の方針と同じ） */
  .p-tour-detail {
    overflow-x: clip;
  }

  .p-tour-detail {
    background-image: none;
  }

  .p-tour-detail::before {
    content: "";
    display: block;
    position: sticky;
    top: 0;
    z-index: -1;
    height: 100vh;
    height: 100dvh;
    margin-bottom: -100vh;
    margin-bottom: -100dvh;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 13%), var(--tour-bg-sp);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, cover;
    background-position: top, center;
  }

  .p-tour-detail__inner {
    padding-top: 0;
  }

  /* 初期状態は非表示（opacity:0）。.p-tour-detail__headを過ぎたらp-tour.jsが
     .is-visibleを付け、ふわっとフェードインする。次のツアーのsectionに入ったら
     position:stickyの効果が切れて自然に隠れる（このsection内でだけ貼り付くため）。 */
  .p-tour-detail__mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    position: sticky;
    top: 0;
    z-index: 15;
    padding: var(--space-8) var(--space-16);
    background: var(--color-cream);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .p-tour-detail__mobile-bar.is-visible {
    opacity: 1;
    visibility: visible;
  }

  .p-tour-detail__mobile-bar-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: 0.1em;
  }

  .p-tour-detail__mobile-bar-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 40px;
    border-radius: var(--radius-base);
    background: var(--color-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    letter-spacing: 0.1em;
  }

  .p-tour-detail__head {
    padding-bottom: var(--space-24);
  }

  .p-tour-detail__eyebrow {
    font-size: var(--font-size-md);
  }

  .p-tour-detail__name {
    font-size: var(--font-size-3xl);
  }

  /* タブレットまでの帯状に写真を見せるパネル構成はSPでは崩れるため、全面ベタ塗りにして写真は覆う */
  .p-tour-detail__panel {
    left: 20%;
  }

  .p-tour-detail__content {
    width: 100%;
    margin-left: 0;
    padding-top: var(--space-24);
    padding-bottom: var(--space-56);
  }

  .p-tour-detail__content > *:not(:last-child) {
    margin-bottom: var(--space-48);
  }

  .p-tour-detail__content > *:has(> .p-tour-detail__accordion-panel.is-collapsed):not(:last-child) {
    margin-bottom: 0;
  }

  .p-tour-detail__intro {
    gap: var(--space-16);
  }

  .p-tour-detail__intro-title {
    font-size: var(--font-size-lg);
  }

  .p-tour-detail__intro-text {
    font-size: var(--font-size-sm);
  }

  .p-tour-detail .c-section-heading__inner {
    padding-bottom: var(--space-16);
  }
  .p-tour-detail .p-tour-detail__accordion-heading .c-section-heading__inner {
    padding-bottom: 0;
  }

  .p-tour-detail .c-section-heading__title {
    font-size: var(--font-size-lg);
  }

  /* ---- 開閉ボタンを持たないセクション（例：ツアー概要）の見出し ---- */
  .p-tour-detail__section > .c-section-heading {
    margin-bottom: var(--space-16);
  }

  /* アコーディオン見出し：タイトル行と開閉ボタン行を分け、開閉ボタン行は
     ラベル文字（左）とアイコン（右）をspace-betweenで振り分ける。 */
  .p-tour-detail__accordion-heading {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding-bottom: var(--space-16);
    margin-bottom: var(--space-32);
  }

  .p-tour-detail__accordion-toggle {
    width: 100%;
    justify-content: space-between;
    font-size: var(--font-size-base);
  }

  /* ---- ツアー概要 ---- */
  .p-tour-detail__overview {
    gap: var(--space-16);
  }

  .p-tour-detail__box-row {
    gap: var(--space-24) var(--space-8);
  }

  .p-tour-detail__box-head {
    font-size: var(--font-size-base);
    padding: var(--space-4) var(--space-8);
  }
  
  .p-tour-detail__box-body {
    font-size: var(--font-size-base);
    padding: var(--space-8) var(--space-8);
  }

  .p-tour-detail__box-value {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-base);
  }

  .p-tour-detail__box-value--sub {
    font-size: var(--font-size-xs);
  }
  
  .p-tour-detail__box-item {
    width: 100%;
    text-align: left;
  }

  .p-tour-detail__box-sep {
    display: none;
  }

  .p-tour-detail__price-head {
    font-size: var(--font-size-base);
    padding: var(--space-4) var(--space-16);
  }

  .p-tour-detail__price-body {
    font-size: var(--font-size-base);
    padding: var(--space-16) var(--space-16);
  }
  
  .p-tour-detail__price-item {
    font-size: var(--font-size-base);
  }

  .p-tour-detail__price-row {
    flex-direction: column;
    gap: var(--space-8);
  }

  .p-tour-detail__price-sep {
    display: none;
  }

  .p-tour-detail__price-note {
    font-weight: var(--font-weight-medium);
  }

  /* ---- 持ち物・参加条件等 ---- */
  .p-tour-detail__spec-row {
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-16) 0;
  }

  .p-tour-detail__spec-label {
    flex: none;
    padding-left: 0;
  }

  .p-tour-detail__spec-value {
    padding-right: 0;
  }

  /* ---- ツアーの魅力 ---- */
  .p-tour-detail .c-photo-text__title {
    font-size: var(--font-size-base);
  }

  /* ---- 体験の流れ ---- */
  .p-tour-detail__flow .c-flow {
    gap: var(--space-40);
  }

  /* SPのみ縦並びにし、ステップ番号（バッジ）を中央揃えに。本文(c-flow__step-content)は
     align-self:stretchで幅いっぱいのまま維持し、バッジだけが中央に来るようにする。 */
  .p-tour-detail .c-flow__card-left {
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
  }

  .p-tour-detail .c-flow__step-content {
    align-self: stretch;
  }

  .p-tour-detail .c-flow__step-title {
    line-height: var(--line-height-tight);
  }

  .p-tour-detail .c-flow__step-body {
    font-size: var(--font-size-sm);
  }

  .p-tour-detail .c-flow__card {
    gap: 12px;
  }

  /* ---- 撮影オプション ---- */
  .p-tour-detail__option-row {
    flex-direction: column;
    gap: var(--space-24);
  }

  .p-tour-detail__option-video {
    flex-basis: auto;
  }

  /* ---- 日時を予約する ---- */
  .p-tour-detail__reserve .c-section-heading {
    margin-bottom: var(--space-40);
  }

  .p-tour-detail__reserve {
    scroll-margin-top: var(--space-56);
    margin-top: var(--space-16);
  }

  .p-tour-detail__reserve-embed iframe {
    height: 140vw;
  }

  .p-tour-detail__reserve-cta {
    justify-content: center;
    margin-top: var(--space-24);
  }
}