/* ============================================================
   風の巡礼｜プレミアムサバニ体験 特設ページ
   写真背景は固定せず、各シーンと一緒に自然スクロールさせる。

   構成：PC（基本）→ タブレット → スマホ の順。
   クラス単位でメディアクエリを都度挟まず、ブレークポイントごとに
   まとめて記述する（レスポンシブ＝比率縮小アーキテクチャの2フェーズに対応）。
============================================================ */

/* ==== このページ専用トークン（Figma実値 / 全体キャプチャからの実測値） ==== */
:root {
  /* このページはstatic側のタイプスケールを基準に作られており、本番のtokens.css（--font-size-*）
     とは値がずれている（本番は他ページの既存表示を変えないため据え置き）。このページの
     :root上書きはCSS自体がkaze-no-junreiページでしか読み込まれないため、他ページには影響しない。 */
  --font-size-2xs: 11.67px;
  --font-size-xs: 12.8px;
  --font-size-sm: 14.22px;
  --font-size-base: 16px;
  --font-size-md: 18.29px;
  --font-size-lg: 21.33px;
  --font-size-xl: 24px;
  --font-size-xl-plus: 25.6px;
  --font-size-2xl: 32px;
  --font-size-3xl: 42.67px;
  --font-size-3xl-plus: 56px;
  --kaze-header-pill-bg: rgba(63, 63, 63, 0.5);
  --kaze-header-pill-width: 11.125rem;
  --kaze-card-bg: #19222b; /* 全体キャプチャからの実測値（カード背景はベタ塗り、写真なし） */
  --kaze-tint-p1: #202724;
  --kaze-tint-p7: #142330;
  --kaze-wave-reveal-half-height: 180px; /* 波形リビール帯の境界からの片側の高さ（帯全体は2倍、参考サイトの--space-180相当） */
  --kaze-scene-height-pc-01: 1200px;
  --kaze-scene-height-pc-03: 1680px; /* section03-bg.webp更新（2880x3360, @2x）に合わせて高さ÷2で再計算 */
  --kaze-scene-height-pc-04: 100vh; /* 100vh未満だと直後の波形境界(04→05)が画面上でこのシーンとまだ重なった状態で起動してしまうため、画面いっぱい以上を確保する */
  --kaze-scene-height-pc-05: 1467px;
  --kaze-scene-height-pc-06: 1040px; /* section06-bg.webp更新（2880x2080, @2x）に合わせて高さ÷2で再計算 */
  --kaze-scene-height-pc-07: 960px;
  --kaze-scene-height-pc-08: 1200px;
  --kaze-scene-height-pc-09: 100vh; /* 直後の波形境界(09→10)との重なりを避けるため、画面いっぱい以上を確保する */
  --kaze-scene-height-pc-10: 960px;
  --kaze-scene-height-sp-01: 1120px;
  --kaze-scene-height-sp-03: 1360px;
  --kaze-scene-height-sp-04: 100vh;
  --kaze-scene-height-sp-05: 976px;
  --kaze-scene-height-sp-06: 1250px;
  --kaze-scene-height-sp-07: 100vh; /* section07-bg-sp.webpを画面いっぱいに表示 */
  --kaze-scene-height-sp-08: 1610px;
  --kaze-scene-height-sp-09: 100vh;
  --kaze-scene-height-sp-10: 100vh; /* section10-bg-sp.webpを画面いっぱいに表示 */
}

/* ============================================================
   PC（基本）
============================================================ */

/* ==== ページ全体 ==== */
/* 横方向へはみ出す装飾だけをクリップする。 */
html {
  overflow-x: clip;
}

.p-kaze {
  background: #0b0f10; /* 画像読み込み前のフォールバック（Figma実値ではなく安全色） */
  overflow-x: clip;
}

.p-kaze main {
  position: relative;
}

/* ==== ヘッダー（このページ専用：背景なし・ハンバーガー＋予約ピルを右側にまとめて配置） ==== */
.p-kaze-header {
  background: transparent;
}

.p-kaze-header.is-scrolled {
  /* 他ページはスクロールで背景が付くが、本ページは常に背景なしで追従させる */
  background: transparent;
}

.p-kaze-header .l-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 30px;
  box-sizing: content-box;
  padding: var(--space-24) var(--space-48);
}

.p-kaze-header__toggle {
  position: static;
  z-index: 6;
  display: flex; /* PC幅でも常時表示（Figma仕様） */
  flex-shrink: 0;
  width: 1.75rem;
  height: 1rem;
  padding: 0;
  gap: 0.5rem;
  margin-left: 0;
  margin-right: calc(var(--kaze-header-pill-width) + var(--space-24));
}

.p-kaze-header__toggle .l-header__toggle-bar {
  flex-shrink: 0;
  width: 100%;
  height: 1px;
}

.p-kaze-header.is-open .p-kaze-header__toggle .l-header__toggle-bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.p-kaze-header.is-open .p-kaze-header__toggle .l-header__toggle-bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* 予約ピルは .l-header（position:fixed）が作る重なりコンテキストの外に
   独立レイヤーとして配置する。.l-header の子孫のままだと mix-blend-mode が
   .l-header 内の要素としか合成されず、下層の背景写真と混ざらないため。
   さらに mix-blend-mode は「position:fixed 自身」に付ける必要がある。
   fixed要素は必ず新しい重なりコンテキストを作るため、子孫に付けても
   その要素自身の透明な背景としか合成されず外の背景と混ざらない。
   位置合わせは .p-kaze-header .l-header__inner と同じ padding 値を
   そのまま再利用し、見た目のズレが出ないようにしている。

   背景色だけ差分反転させ、文字は常に白のまま固定したいため、
   同じ位置・同じ形のピルを2枚重ねている（mix-blend-modeは要素全体
   ＝背景も文字も込みでしか適用できず、文字だけ除外できないため）。
   ・reserve-bg-layer : 背景色の「形」だけの複製（文字は transparent）。
     これ自身に mix-blend-mode: difference を付け、背景色だけを反転させる。
   ・reserve-layer     : 実際にクリックできる表示用。背景は透明にし、
     白文字だけを重ねて乗せる（mix-blend-modeなしなので常に白）。 */
.p-kaze-header-reserve-bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  /* .l-header本体がz-index:30のため、それより低いとタップが.l-header側に
     奪われてしまう（表示上は見えていてもクリックできない）。それより
     確実に高くする。 */
  z-index: 39;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: var(--space-24) var(--space-48);
  pointer-events: none;
  mix-blend-mode: difference;
}

.p-kaze-header-reserve-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: var(--space-24) var(--space-48);
  pointer-events: none;
}

.p-kaze-header__reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kaze-header-pill-width);
  padding: 0 var(--space-32) 2px;
  border-radius: var(--radius-full);
  background: var(--kaze-header-pill-bg);
  color: var(--color-white);
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-lg);
  line-height: 2.1;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}

.p-kaze-header-reserve-bg-layer .p-kaze-header__reserve {
  color: transparent;
  pointer-events: none;
}

.p-kaze-header-reserve-layer .p-kaze-header__reserve {
  background: transparent;
}

.p-kaze-header__reserve:hover {
  opacity: 0.75;
}

.p-kaze-header.is-open ~ .p-kaze-header-reserve-bg-layer,
.p-kaze-header.is-open ~ .p-kaze-header-reserve-layer {
  opacity: 0;
  visibility: hidden;
}

/* PC幅でもハンバーガーのみを表示するため、PCの展開表示だけをページ専用に定義する。
   1024px以下の展開メニューは共通の header.css を使用する。 */
@media (min-width: 1025px) {
  /* 展開メニューの構造・挙動はスマホ版（header.css の max-width:1024px）を踏襲する。
     お問い合わせボタンをposition:fixedで別配置にすると、「ツアー予約」の子メニューを
     開いた状態が初期状態になったことで一覧が長くなり、最後の項目とボタンが重なって
     いたため、スマホ版と同じくメニュー本体の直後に通常のドキュメントフローで続ける。 */
  .p-kaze-header .l-header__nav {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    gap: var(--space-24);
    margin-left: 0;
    background: var(--color-section-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
  }

  .p-kaze-header.is-open .l-header__nav {
    padding: var(--space-120) var(--space-240) var(--space-40);
    gap: var(--space-40);
    opacity: 1;
    visibility: visible;
  }

  /* スマホ版と同様、PCでもメニュー内にトップページへのリンクを表示する */
  .p-kaze-header .u-sp-only {
    display: block;
  }

  .p-kaze-header .l-header__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .p-kaze-header .l-header__link {
    font-size: var(--font-size-base);
    text-align: left;
  }

  /* このページはPCでも縦積みのフルスクリーンメニューのため、「ツアー予約」の
     子メニューもホバードロップダウン（header.css標準のPC仕様）ではなく、
     スマホと同じクリック開閉のアコーディオンにする。 */
  .p-kaze-header .l-header__item--has-children {
    position: static;
  }

  .p-kaze-header .l-header__item-row {
    cursor: pointer;
  }

  .p-kaze-header .l-header__submenu-toggle {
    display: flex;
  }

  .p-kaze-header .l-header__submenu {
    position: static;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
    margin: var(--space-8) 0 0;
    padding: 0;
    border: none;
    background: none;
  }

  .p-kaze-header .l-header__submenu::before {
    content: none;
  }

  .p-kaze-header .l-header__sublink {
    font-size: var(--font-size-xs);
    text-align: left;
  }

  /* header.css標準のホバー展開・PC用is-submenu-open抑制を、このページでは
     どちらも打ち消してクリック開閉だけにする（詳細度をどちらより高くして勝たせる）。 */
  .p-kaze-header .l-header__item--has-children:hover .l-header__submenu {
    display: none;
  }

  .p-kaze-header .l-header__item--has-children.is-submenu-open .l-header__submenu {
    display: flex;
  }

  /* タブレット・スマホ版（header.css標準のmax-width:1024px）と同じ角丸・サイズにする。
     ただしPCは横幅に余裕があるため、width:100%ではなく内容に応じた自然な幅とし、
     最大幅だけ広がりすぎないよう指定する。 */
  .p-kaze-header .l-header__cta {
    display: none;
    width: auto;
    max-width: 320px;
    margin-left: 0;
    border-radius: var(--radius-base);
  }

  .p-kaze-header.is-open .l-header__cta {
    display: inline-flex;
  }
}

/* ============================================================
   背景シーン（共通）
   .p-kaze-scene       : 背景写真＋詩を含む通常フローの外枠
   .p-kaze-scene__pin   : シーン内だけに配置され、一緒にスクロールする背景写真
   .p-kaze-curtain      : シーンとシーンの間に挟む、写真固定ではない通常フローのセクション
                          （.p-kaze-band と同じ構造。単色のものと写真つきのものがある）
============================================================ */
/* 各シーンの高さは画面幅にかかわらず固定値（--kaze-scene-height-pc-* / -sp-*）にする。
   画像は@2xで書き出しているため、実寸表示高さ（＝画像高さの半分）をそのまま height に
   設定し、縦横比は保持しない。.p-kaze-scene__pin img 側の object-fit: cover /
   object-position: center により、幅いっぱい・上下中央基準でクロップ表示される。 */
.p-kaze-scene {
  position: relative;
  width: 100%;
}

.p-kaze-scene__pin {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.p-kaze-scene__pin img {
  width: 100%;
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: center;
}

.p-kaze-scene__pin picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==== シーン境界の波形マスク ==== */
[data-kaze-wave-host] {
  position: relative;
  isolation: auto;
}

/* シーンの外に置く独立したスペーサー（通常のドキュメントフロー、高さ100vh）。
   canvas自体はposition:fixedで常に画面いっぱいに描画するため、coverの計算が
   崩れて縞模様になる問題を回避できる。このスペーサーの高さぶんスクロールする
   間だけcanvasを表示する。 */
.p-kaze-wave-reveal {
  position: relative;
  width: 100%;
  height: 50vh; /* dvh非対応ブラウザ向けフォールバック。canvas自体は常に100vh(position:fixed)
                   のままなので、ここを縮めても波形演出そのものは変わらず、スクロール量だけ減る */
  height: 50dvh; /* iOS Safari等のアドレスバー出し引きに追従する動的ビューポート単位 */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.p-kaze-wave-reveal.is-active {
  visibility: visible;
  opacity: 1;
}

/* アニメーション無効設定時は、canvas自体をJS側で起動しないため、
   帯の余白も0にしてシーン同士が普通のスクロールで直接つながるようにする
   （切り替え演出なし＝自然なスクロール）。 */
@media (prefers-reduced-motion: reduce) {
  .p-kaze-wave-reveal {
    height: 0;
  }
}

.p-kaze-wave-reveal__media {
  position: absolute;
  inset: 0;
}

.p-kaze-wave-reveal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-kaze-wave-reveal__media--base img {
  object-position: center bottom;
}

.p-kaze-wave-reveal__canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh; /* dvh非対応ブラウザ向けフォールバック */
  height: 100dvh; /* iOS Safari等のアドレスバー出し引きに追従する動的ビューポート単位 */
  z-index: 20; /* .l-header(30)・予約ピル(39/40)より下、通常のシーンより上 */
  opacity: 0;
}

.p-kaze-wave-reveal__canvas.is-ready {
  opacity: 1;
}

/* 幕（curtain）：sticky写真固定の.p-kaze-sceneとは別の、通常フローで流れるセクション。 */
.p-kaze-curtain {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-80);
  overflow: hidden;
}

.p-kaze-curtain__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-kaze-curtain__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-kaze-curtain .p-kaze-poem {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin-top: 0.75em; /* 縦書きの句読点グリフが字送りボックス内で上寄りに描画されるため、
                          見た目の上下中央に近づける視覚補正 */
}

/* ==== ヒーロー（風の巡礼／竹富島の自然がひらく…） ==== */
/* hero.webp(3840x2160=16:9)を高さ100vh・幅100%で敷き詰める。aspect-ratio指定
   ではなく高さを直接100vhに固定することで、一般的なデスクトップ画面比率
   （16:9前後）ではファーストビュー内に画像全体がほぼ収まる。 */
.p-kaze-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.p-kaze-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-kaze-hero__catch {
  position: absolute;
  z-index: 21; /* .p-kaze-wave-reveal__canvas(20)より前面にして、波形アニメーション中も文字を隠さない */
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-120) var(--space-120) 0;
  margin: 0 auto;
}

.p-kaze-hero__mark {
  writing-mode: vertical-rl;
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-normal);
  color: var(--color-white);
  opacity: 0.7;
  letter-spacing: var(--letter-spacing-4xl);
  line-height: 1.4;
}

/* 縦書き中の半角数字を横倒れさせず1文字分に収めて正立させる（例：「10組」の「10」） */
.p-kaze-upright {
  text-combine-upright: all;
}

.p-kaze-hero__tagline {
  margin-top: 56px;
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  opacity: 0.7;
  letter-spacing: var(--letter-spacing-xl);
  line-height: 2.1;
}

/* ==== P1帯（風が吹いている…風の巡礼。）：背景写真つきセクション ==== */
.p-kaze-band {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-80);
  background: var(--kaze-tint-p1); /* 画像読み込み前のフォールバック */
  overflow: hidden;
}

.p-kaze-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-kaze-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ==== 詩（縦書きテキスト） ====
   .p-kaze-poem        : 1つの詩全体（横方向にColumnを並べる＝行送り）
   .p-kaze-poem__group : スペーサーが無い＝行間が詰まっている行のまとまり
   .p-kaze-poem__line  : 1行（＝縦書きの1列）
============================================================ */
.p-kaze-poem {
  position: absolute;
  z-index: 21; /* .p-kaze-wave-reveal__canvas(20)より前面にして、波形アニメーション中も文字を隠さない */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row-reverse; /* 縦書きの読み順（右→左）に合わせる */
  align-items: flex-start;
  gap: var(--space-48);
  max-width: calc(100% - var(--container-padding) * 2);
}

.p-kaze-band .p-kaze-poem {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin-top: 1em; /* 縦書きの句読点グリフが字送りボックス内で上寄りに描画されるため、
                      見た目の上下中央に近づける視覚補正 */
}

.p-kaze-poem__group {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--space-24);
}

.p-kaze-poem__block {
  display: contents;
}

.p-kaze-poem__line {
  writing-mode: vertical-rl;
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-4xl);
  line-height: 1.1;
  white-space: nowrap;
}

.p-kaze-poem__sp-prefix {
  display: none;
}

/* ==== 英語ページ：縦書きの見出し・詩を横書きに戻す（TranslatePressがhtmlのlangを切り替える） ==== */
html[lang="en-US"] .p-kaze-hero__mark {
  writing-mode: horizontal-tb;
  text-orientation: initial;
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-relaxed);
}

html[lang="en-US"] .p-kaze-poem {
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: 0 var(--space-24);
}

html[lang="en-US"] .p-kaze-poem__group {
  flex-direction: column;
  align-items: center;
  gap: 0;
}

html[lang="en-US"] .p-kaze-poem__line {
  writing-mode: horizontal-tb;
  text-orientation: initial;
  white-space: normal;
  letter-spacing: var(--letter-spacing-none);
  line-height: var(--line-height-relaxed);
  text-align: center;
}

/* .p-kaze-poem__blockは本来display:contents（透明）だが、scene06/08（SP限定）・scene09（PC/SP共通）は
   独自にdisplay:flex + row-reverse（横並び）へ切り替える特殊レイアウトを持っており、
   .p-kaze-poem__groupの縦積み指定だけでは効かない。シーン別に個別対応せず、
   .p-kaze-poem__block自体を英語版では一律で縦積みのflexコンテナにして統一的に上書きする
   （詳細度 0,2,1 が各シーン・SP側の 0,1,0～0,2,0 を確実に上回る）。 */
html[lang="en-US"] .p-kaze-poem__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* SP専用のnowrap（日本語の短いキャッチコピー用）が英訳の長い文で折り返されず溢れるため解除する */
html[lang="en-US"] .p-kaze-hero__tagline {
  white-space: normal;
  margin-top: 0;
}

/* 出現アニメーションは他ページと同じ汎用の仕組み（.u-fade-in/.u-fade-slow、
   assets/js/animation.js）に統一している。このページ専用の独自実装
   （is-kaze-reveal-pending・p-kaze-reveal等）は、外部CSSの読み込み待ちで
   一瞬コンテンツが見えてしまう競合を起こしていたため廃止した。 */

/* ---- 各シーンの背景高さ・詩の位置
       （番号は背景画像ファイル名 section**-bg.webp に対応。.p-kaze-scene / .p-kaze-poem の
       共通定義より後ろに置き、height・top の上書きが確実に効くようにしている） ---- */
/* 固定pxの高さではなく画像そのもののアスペクト比を箱の形にすることで、
   object-fit: coverが縦横どちらの方向にもクロップしない（画面幅が変わっても
   画像の縦方向が必ず全部表示される）。 */
.p-kaze-scene--01 {
  isolation: auto;
  z-index: auto;
  aspect-ratio: 2880 / 2400; /* section01-bg.webpの実寸比率 */
}

.p-kaze-poem--01a {
  top: auto;
  bottom: var(--space-80);
  transform: translateX(-50%);
}

.p-kaze-scene--03 {
  height: var(--kaze-scene-height-pc-03);
}

.p-kaze-poem--03-intro {
  top: var(--space-240);
  transform: translateX(-50%);
}

.p-kaze-poem--03 {
  top: auto;
  bottom: var(--space-40); /*var(--space-180); アニメーション分調整*/
  transform: translateX(-50%);
}

.p-kaze-scene--04 {
  height: var(--kaze-scene-height-pc-04);
}

.p-kaze-scene--05 {
  aspect-ratio: 2880 / 2934; /* section05-bg.webpの実寸比率。coverでも縦が全部表示されるようにする */
  min-height: 100vh; /* タブレット幅などで100vh未満になると波形canvasのcover計算で縞模様が出るため */
}

.p-kaze-poem--05 {
  top: auto;
  bottom: var(--space-240);
  transform: translateX(-50%);
}

.p-kaze-scene--06 {
  aspect-ratio: 2880 / 2080; /* section06-bg.webpの実寸比率。coverでも縦が全部表示されるようにする */
  min-height: 100vh; /* タブレット幅などで100vh未満になると波形canvasのcover計算で縞模様が出るため */
}

.p-kaze-poem--06 {
  top: var(--space-200);
  transform: translateX(-50%);
}

/* 幕(curtain--07)が独立セクションとして外に出た分、写真のみを見せる時間として暫定値。
   全体キャプチャに正確な高さの目印が無いため、他の詩なしシーン（60vh/100vh）を参考にした
   暫定値。実機で確認して必要なら調整すること。 */
.p-kaze-scene--07 {
  height: var(--kaze-scene-height-pc-07);
}

.p-kaze-curtain--07 {
  /* linear-gradientを同色2点にして、--kaze-tint-p7の上に黒30%の単色オーバーレイを重ねる */
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), var(--kaze-tint-p7);
}

.p-kaze-scene--08 {
  height: var(--kaze-scene-height-pc-08);
}

.p-kaze-poem--08 {
  top: auto;
  bottom: var(--space-24); /*var(--space-80); アニメーション分調整*/
  transform: translateX(-50%);
}

.p-kaze-scene--09 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--kaze-scene-height-pc-09);
  padding-block: var(--space-180);
}

.p-kaze-poem--09 {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

.p-kaze-poem--09 > .p-kaze-poem__group {
  gap: var(--space-120);
}

.p-kaze-poem--09 .p-kaze-poem__block {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: var(--space-24);
}

.p-kaze-poem--09 .p-kaze-poem__block:first-child .p-kaze-poem__line {
  font-size: var(--font-size-xl);
}

.p-kaze-poem--09 .p-kaze-poem__block:last-child .p-kaze-poem__line {
  font-size: var(--font-size-md);
}

.p-kaze-scene--10 {
  aspect-ratio: 2880 / 1920; /* section10-bg.webpの実寸比率。coverでも縦が全部表示されるようにする */
  min-height: 100vh; /* タブレット幅などaspect-ratio計算結果が100vh未満になる場合、
                         波形canvasのcover計算で縞模様が出るため、100vhを下回らせない */
  background: var(--kaze-card-bg); /* 直後の.p-kaze-card-sectionとの境目にサブピクセルの
                                       丸め誤差で1px隙間ができても、同色の下敷きで目立たなくする */
}

/* ============================================================
   風の巡礼カード（04_flow：概要・巡礼の道のり・ご予約）
   全体キャプチャ実測：写真固定ではなく単色べた塗りの通常セクション
============================================================ */
.p-kaze-card-section {
  position: relative;
  z-index: 22; /* .p-kaze-hero__catch(21・position:fixedで常時追従)より前面にして、
                  このセクションに入ったらヒーローのキャッチが透けて見えないようにする。
                  .l-header(30)・予約ピル(39/40)よりは低いまま */
  background: var(--kaze-card-bg);
}

.p-kaze .l-footer {
  position: relative;
  z-index: 22; /* card-sectionと同じ理由：position:fixedのヒーローキャッチより前面にする */
}

.p-kaze-card {
  padding-block: var(--space-180);
}

.p-kaze-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  max-width: calc(1120px + var(--container-padding) * 2);
}

.p-kaze-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
  color: var(--color-white);
}

.p-kaze-card__title {
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-lg);
  line-height: 1.6;
}

.p-kaze-card__lead {
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-xl);
  line-height: 2;
}

/* ---- 巡礼の道のり：4スポットグリッド ---- */
.p-kaze-path__title {
  margin-bottom: var(--space-16);
  text-align: left;
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-xl);
  color: var(--color-white);
}

.p-kaze-path__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-32);
}

.p-kaze-path__spot-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: var(--space-16);
}

.p-kaze-path__spot-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-kaze-path__spot-title {
  margin-bottom: var(--space-4);
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  line-height: 1.7;
}

.p-kaze-path__spot-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  color: var(--color-white);
  line-height: 1.7;
}

/* ---- ご予約はこちら（下線リンク） ---- */
.p-kaze-cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-white);
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-lg);
  color: var(--color-white);
  margin: var(--space-16) 0 0 auto;
  transition: opacity 0.2s ease;
}

.p-kaze-cta-link:hover {
  opacity: 0.7;
}

/* ---- 概要（定員・所要時間…の仕様リスト＋動画） ---- */
.p-kaze-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-40) var(--space-56);
  align-items: start;
}

.p-kaze-overview__title {
  grid-column: 1 / -1;
  text-align: left;
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-xl-plus);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-lg);
  color: var(--color-white);
}

.p-kaze-spec-list {
  display: flex;
  flex-direction: column;
}

.p-kaze-spec-row {
  padding-block: var(--space-24);
  border-bottom: 0.5px solid var(--color-white);
  color: var(--color-white);
}

.p-kaze-spec-row:first-child {
  padding-top: 0;
}

.p-kaze-spec-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.p-kaze-spec-row__label {
  font-family: var(--font-family-jp-serif);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.p-kaze-spec-row__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-16);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-lg);
  line-height: 1.6;
}

.p-kaze-spec-row__summary-ol {
  display: flex;
  gap: var(--space-8);
}

.p-kaze-spec-row__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  border: 0;
  background: none;
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  cursor: pointer;
}

.p-kaze-spec-row__toggle-icon {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.p-kaze-spec-row.is-open .p-kaze-spec-row__toggle-icon {
  transform: rotate(-90deg);
}

.p-kaze-spec-row__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.p-kaze-spec-row.is-open .p-kaze-spec-row__panel {
  grid-template-rows: 1fr;
}

.p-kaze-spec-row__panel-inner {
  overflow: hidden;
}

.p-kaze-spec-row__detail {
  margin-top: var(--space-16);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-lg);
  line-height: 1.6;
}

.p-kaze-spec-row__detail p + p {
  margin-top: var(--space-16);
}

.p-kaze-spec-row__detail li {
  display: flex;
}
.p-kaze-spec-row__detail li::before {
  content: "・";
  flex-shrink: 0;
}

.p-kaze-spec-row__detail a {
  text-decoration: underline;
}

.p-kaze-overview__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
}

.p-kaze-overview__video {
  position: relative;
  aspect-ratio: 532 / 329;
  overflow: hidden;
}

.p-kaze-overview__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   PC調整
============================================================ */
@media (max-width: 1480px) {
  .p-kaze-hero__catch {
    padding-inline: var(--space-40);
  }
}

@media (min-width: 1200px) {
  .p-kaze-hero {
    overflow: visible;
  }

  .p-kaze-hero__catch {
    position: fixed;
    inset: 0 0 auto;
    z-index: 21; /* .p-kaze-wave-reveal__canvas(20)より前面にして、波形アニメーション中も文字を隠さない */
    width: 100%;
    height: 100vh;
    pointer-events: none;
  }
}

/* ============================================================
   タブレット
============================================================ */
@media (max-width: 1024px) {
  .p-kaze-header .l-header__nav {
    bottom: 0;
  }

  .p-kaze-header.is-open .l-header__cta {
    bottom: var(--space-64);
  }
}

/* ============================================================
   スマホ：Figma SP全体キャプチャに合わせたページ専用レイアウト
   PCの確定済みレイアウトへ影響させないため、SP範囲内だけで上書きする。
============================================================ */
@media (max-width: 767px) {
  /* ---- ヘッダー：ハンバーガーは左、予約ピルは右（全体キャプチャSP実測） ---- */
  .p-kaze-header {
    /* header.cssの標準スマホ挙動（position:absoluteでヒーローと一緒に流れる）を
       打ち消し、ヘッダー自体を常に追従させ続ける */
    position: fixed;
  }

  .p-kaze-header .l-header__inner {
    justify-content: flex-start;
    height: 28px;
    padding: var(--space-24) var(--space-16);
  }

  .p-kaze-header__toggle {
    margin-right: 0;
  }

  .p-kaze-header-reserve-bg-layer,
  .p-kaze-header-reserve-layer {
    padding: var(--space-24) var(--space-16);
  }

  /* ---- ヒーロー ---- */
  .p-kaze-hero__catch {
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--space-80);
    padding-top: var(--space-120);
    padding-inline: var(--space-24);
  }

  .p-kaze-hero__mark {
    font-size: var(--font-size-xl-plus);
  }

  html[lang="en-US"] .p-kaze-hero__mark {
    font-size: var(--font-size-xl-plus);
  }

  .p-kaze-hero__tagline {
    margin-top: 0;
    font-size: var(--font-size-base);
    text-align: center;
  }

  /* ---- 詩 ---- */
  .p-kaze-poem {
    gap: var(--space-24);
  }

  .p-kaze-poem__group {
    gap: 12px;
  }

  .p-kaze-poem__line {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
  }

  .p-kaze-poem__line--sp-hide {
    display: none;
  }

  .p-kaze-poem__sp-prefix {
    display: inline;
  }

  /* ---- 風の巡礼カード（概要・道のり） ---- */
  .p-kaze-card {
    padding-block: var(--space-64);
  }

  .p-kaze-card__title {
    font-size: var(--font-size-2xl);
  }

  .p-kaze-card__lead {
    font-size: var(--font-size-sm);
  }

  .p-kaze-path__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-40);
  }

  .p-kaze-overview {
    grid-template-columns: 1fr;
  }

  .p-kaze-overview__title {
    font-size: var(--font-size-xl);
  }

  /* ---- ヒーロー（SP専用の写真差し替え・寸法） ---- */
  .p-kaze-hero {
    height: calc(100vw * 2240 / 750);
    aspect-ratio: auto;
    background: url("../../img/tour/kaze-no-junrei/hero-upper-sp.webp") top center / 100vw auto no-repeat;
  }

  .p-kaze-hero picture {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(100vw * 960 / 750);
  }

  .p-kaze-hero__tagline {
    width: 100%;
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  .p-kaze-hero__tagline br:last-of-type {
    display: none;
  }

  /* ---- 各シーンの背景比率・演出用スクロール量・詩の位置（SP） ---- */
  .p-kaze-scene--01 {
    height: var(--kaze-scene-height-sp-01);
  }

  .p-kaze-scene--03 {
    height: var(--kaze-scene-height-sp-03);
  }

  .p-kaze-poem--03-intro {
    top: var(--space-160);
  }

  .p-kaze-poem--03 {
    bottom: var(--space-16);
  }

  .p-kaze-scene--04 {
    height: var(--kaze-scene-height-sp-04);
  }

  .p-kaze-scene--05 {
    height: var(--kaze-scene-height-sp-05);
  }

  .p-kaze-scene--06 {
    height: var(--kaze-scene-height-sp-06);
  }

  .p-kaze-poem--06 {
    inset: var(--space-120) 0 0;
    display: flex;
    flex-flow: row-reverse wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-160) var(--space-24);
    max-width: none;
    padding: var(--space-80) var(--space-120);
    transform: none;
  }

  .p-kaze-poem--06 .p-kaze-poem__block {
    position: static;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--space-24);
    transform: none;
  }

  .p-kaze-scene--07 {
    height: var(--kaze-scene-height-sp-07);
  }

  /* スマホでは単色帯を独立表示せず、直後のscene-08の背景に重ねてテキストだけ
     見せる。高さ0＋overflow:visibleにして自身のスクロール分を消し、詩は
     絶対配置にする。curtain--07がscene-08の直前でscene-08と同じ位置に
     来るため、top:80pxがそのままscene-08の背景内でのtop:80pxになる。 */
  .p-kaze-curtain--07 {
    height: 0;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .p-kaze-curtain--07 .p-kaze-poem {
    position: absolute;
    top: var(--space-80);
    left: 50%;
    transform: translateX(-50%);
  }

  .p-kaze-scene--08 {
    height: var(--kaze-scene-height-sp-08);
  }

  .p-kaze-poem--08 {
    display: flex;
    flex-flow: row-reverse wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-160) var(--space-24);
    width: 100%;
    padding: 0 var(--space-104);
    top: auto;
    bottom: var(--space-16);
    transform: translateX(-50%);
  }

  .p-kaze-poem--08 .p-kaze-poem__block {
    position: static;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--space-24);
    transform: none;
  }

  .p-kaze-scene--09 {
    height: var(--kaze-scene-height-sp-09);
    padding-block: var(--space-180);
  }

  .p-kaze-poem--09 {
    position: relative;
    inset: auto;
    display: flex;
    justify-content: center;
    width: 100%;
    transform: none;
  }

  .p-kaze-poem--09 > .p-kaze-poem__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-120);
  }

  .p-kaze-poem--09 .p-kaze-poem__block {
    position: static;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--space-24);
    transform: none;
  }

  .p-kaze-poem--09 .p-kaze-poem__line {
    font-size: var(--font-size-base);
  }

  .p-kaze-poem--09 .p-kaze-poem__block:first-child .p-kaze-poem__line {
    font-size: var(--font-size-md);
  }

  .p-kaze-poem--09 .p-kaze-poem__block:last-child .p-kaze-poem__line {
    font-size: var(--font-size-base);
  }

  .p-kaze-scene--10 {
    height: var(--kaze-scene-height-sp-10);
  }

  /* ---- 風の巡礼カード（SP寸法） ---- */
  .p-kaze-card {
    padding-block: var(--space-32) var(--space-40);
  }

  .p-kaze-card__inner {
    align-items: stretch;
    gap: var(--space-48);
    padding-inline: var(--space-16);
  }

  .p-kaze-card__head {
    align-items: flex-start;
    gap: var(--space-16);
    text-align: left;
  }

  .p-kaze-card__title {
    font-size: var(--font-size-lg);
  }

  .p-kaze-card__lead {
    font-size: var(--font-size-xs);
  }

  .p-kaze-path__grid {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

  .p-kaze-path__spot-img {
    aspect-ratio: 686 / 424;
    margin-bottom: var(--space-16);
  }

  .p-kaze-cta-link {
    font-size: var(--font-size-sm);
    margin-top: var(--space-32);
  }

  .p-kaze-overview {
    row-gap: var(--space-24);
  }

  .p-kaze-overview__title {
    font-size: var(--font-size-lg);
  }

  .p-kaze-spec-row {
    padding-block: var(--space-16);
  }

  .p-kaze-spec-row__label,
  .p-kaze-spec-row__summary {
    font-size: var(--font-size-sm);
  }

  .p-kaze-spec-row__toggle,
  .p-kaze-spec-row__detail {
    font-size: var(--font-size-xs);
  }

  .p-kaze-overview__media {
    gap: var(--space-32);
  }

  .p-kaze .l-footer {
    padding-block: var(--space-48);
  }

  .p-kaze .l-footer__link {
    font-size: var(--font-size-base);
  }
}