@charset "utf-8";
/* ================================================================
 * 函館・湯の川温泉 LP / style.css
 * ----------------------------------------------------------------
 * 命名規則  : BEM（Block__Element--Modifier）
 * 読み込み  : reset.css → common.css → style.css
 * ラッパー  : <div class="lp" id="lp-main">
 *             ID は reset.css（#lp-main 配下のみ対象）を効かせるため付与
 * ブレイク  : 1200 / 1024 / 768 / 480 / 420
 * 数値根拠  : PCカンプ 1980px 幅／SPカンプ 680px 幅を実測して clamp 化
 * ================================================================ */


/* ================================================================
   1. 変数定義
   ================================================================ */
.lp {
  /* --- カラー（デザインカンプから抽出） --- */
  --c-red:        #aa272d;  /* 見出し赤・縦見出し・タクシーボタン */
  --c-purple:     #a975a6;  /* 宿泊ボタン */
  --c-blue:       #5285c6;  /* 体験ボタン */
  --c-navy:       #15325e;  /* 旅の過ごし方ボタン */
  --c-cream:      #f8eeca;  /* タクシーセクション背景 */
  --c-black:      #000000;  /* プラン一覧ボタン */
  --c-text:       #231815;  /* 基本文字色 */
  --c-rule:       #a9a49a;  /* 見出し罫線 */

  /* --- フォント --- */
  --f-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* --- フォントサイズ（PC1980px時にカンプ実寸へ到達する clamp） --- */
  --fs-body:     clamp(15px, calc(8px + 0.60vw), 20px);
  --fs-h2:       clamp(19px, calc(8px + 1.30vw), 34px);
  --fs-lead:     clamp(16px, calc(6px + 1.15vw), 29px);
  --fs-btn-main: clamp(19px, calc(9px + 1.05vw), 30px);
  --fs-btn-ttl:  clamp(15px, calc(8px + 0.72vw), 22px);
  --fs-btn-term: clamp(14px, calc(8px + 0.70vw), 22px);
  --fs-caption:  clamp(11px, calc(7px + 0.45vw), 16px);
  --fs-note:     clamp(11px, calc(7px + 0.40vw), 15px);
  --fs-vttl:     clamp(24px, calc(8px + 1.95vw), 47px);

  /* --- レイアウト --- */
  --lp-inner:    1200px;   /* メインコンテンツ最大幅 */
  --col-gap:     4%;       /* 2カラムの溝（カンプ48/1200） */

  font-family: var(--f-sans);
  color: var(--c-text);
  font-feature-settings: "palt";
  /* 画面外へ配置した装飾による横スクロール防止（clip未対応環境は hidden） */
  overflow-x: hidden;
  overflow-x: clip;
}


/* ================================================================
   2. LP内ローカルリセット
   （reset.css で未定義の余白のみ補完。重複指定はしない）
   ================================================================ */
/* :where() で詳細度を 0 にし、以降のBEMクラス指定を常に優先させる */
:where(.lp) :where(h2, h3, p, figure, figcaption) {
  margin: 0;
}

.at_head--bar {
  background-color: #f5f5f5;
}

.kkrs-breadcrumb .kkrs-breadcrumb__list {
  margin: 0;
  padding-inline: 0;
}

@media screen and (min-width: 768px) {
  .kkrs-breadcrumb .kkrs-breadcrumb__list,
  .kkrs-breadcrumb .kkrs-breadcrumb__list a,
  .kkrs-breadcrumb .kkrs-breadcrumb__list span {
    font-size: clamp(12px, 1.1vw, 14px); /* ← ここを変更 */
  }

  /* 区切り「>」も本文サイズに追従させる（common.css は 0.8rem 固定） */
  .kkrs-breadcrumb .kkrs-breadcrumb__list > li:not(:last-child)::before {
    font-size: .85em;
  }
}


/* ページ見出しバー（#at_head）
   ※ 文字サイズ・余白はJTB共通CSS側の指定に左右されるため、
     ここで明示的に上書きして固定しています（絶対パス／相対パスのどちらでも同じ見た目）。
   ・左端：パンくず（.kkrs-breadcrumb / max-width:1236px・左右padding:0）と揃える
   ・天地：.pagetitle の margin を打ち消し、padding-block で制御 */
#at_head .lp-inner {
  max-width: 1236px;
  padding-inline: 0;
  margin-inline: auto;
}

#at_head .pagetitle {
    margin: 0;
    padding: 0px 0px 10px;
    font-size: clamp(14px, 1.25vw, 16px);
    line-height: 1.4;
}

/* 共通インナー：PCは1200px固定・SPは左右5%の余白 */
.lp-container {
  width: min(var(--lp-inner), 90%);
  margin-inline: auto;
}

/* ----------------------------------------------------------------
   reset.css の ID セレクタ（#lp-main a / img / figure）を上書きする
   宣言のみ、ここに集約しています。
   ・#lp-main a      { color: inherit }  → リンク配色
   ・#lp-main img    { display: block }  → 文中アイコンのみ inline-block
   ・#lp-main figure { margin: 0 }       → 旅の過ごし方の写真オフセット
   これ以外のスタイルはすべて BEM クラスのみで定義しています。
   ---------------------------------------------------------------- */
#lp-main .btn-stay              { color: #fff; }
#lp-main .btn-plan              { color: #fff; }
#lp-main .hero__nav-link        { color: #3e3b34; }
#lp-main .plansearch__law-link  { color: var(--c-text); }
#lp-main .btn-group--red  .btn-term { color: var(--c-red); }
#lp-main .btn-group--blue .btn-term { color: var(--c-blue); }
#lp-main .btn-group--navy .btn-term { color: var(--c-navy); }

/* reset.css の #lp-main ul { margin: 0 } に上書きされて左寄せになるため */
#lp-main .plan-list {
  margin-inline: auto;
}

/* 旅の過ごし方マーク：文字が読める高さを確保するため height 基準で指定 */
#lp-main .note__icon {
  display: inline-block;
  width: auto;
  height: clamp(25px, 2vw, 30px);
  max-width: 100%;
  vertical-align: middle;
  margin-inline: .2em;
}


/* ================================================================
   3. 共通パーツ
   ================================================================ */

/* ---- セクション見出し（明朝／上下罫線） ---- */
.section-ttl {
  width: fit-content;
  margin-inline: auto;
  padding-block: clamp(10px, 1.2vw, 22px);
  padding-inline: clamp(8px, 1.1vw, 20px);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--f-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-indent: .12em; /* letter-spacing による右余りを視覚的に相殺 */
  text-align: center;
  color: var(--c-text);
}

/* SP（767px以下）でのみ有効にする改行 */
.br-sp {
  display: none;
}

/* ---- リード（明朝・赤・中央揃え） ---- */
.lead {
  font-family: var(--f-serif);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.75;
  color: var(--c-red);
  text-align: center;
  margin-bottom: clamp(12px, 1.4vw, 24px);
}

/* ---- 本文 ---- */
.txt {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  /* 両端揃え（inter-ideograph で和文の字間を均等に調整） */
  text-align: justify;
  text-justify: inter-ideograph;
}

.txt + .txt {
  margin-top: .35em;
}

.txt--strong {
  font-weight: 700;
  color: var(--c-red);
}

/* ---- 注釈 ---- */
.note {
  margin-top: clamp(8px, 0.8vw, 14px);
  font-size: var(--fs-note);
  line-height: 1.75;
  padding-left: 1em;
  text-indent: -1em;
}

/* ---- 図版キャプション ---- */
.media__caption,
.stay__caption {
  display: block;
  margin-top: .55em;
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.media__caption {
  text-align: right;
}

/* ---- 2カラム（テキスト＋写真） ---- */
.media {
  display: grid;
  grid-template-columns: 48.75% 1fr;
  column-gap: var(--col-gap);
  align-items: start;
}

.media__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 580 / 460;
  object-fit: cover;
  border-radius: 8px;
}


/* ================================================================
   4. ボタン
   ================================================================ */

/* 共通ホバー挙動 */
.btn-stay,
.btn-term,
.btn-plan,
.plansearch__law-link {
    transition: opacity .3s, transform .3s;
    border-radius: 5px;
}

.btn-stay:hover,
.btn-term:hover,
.btn-plan:hover,
.plansearch__law-link:hover {
  opacity: .8;
}

.btn-stay:active,
.btn-term:active,
.btn-plan:active {
  transform: scale(.98);
}

/* ---- 宿泊ボタン（紫） ---- */
.btn-stay {
  display: block;
  position: relative;
  width: 100%;
  max-width: 456px;
  padding: clamp(9px, 1vw, 14px);
  background-color: var(--c-purple);
  border-radius: 10px;
}

.btn-stay__label {
  display: block;
  background-color: #fff;
  color: var(--c-purple);
  font-size: clamp(13px, calc(8px + 0.50vw), 18px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  padding-block: clamp(8px, .8vw, 13px);
}

.btn-stay__main {
  display: block;
  font-size: var(--fs-btn-main);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  padding-block: clamp(8px, .9vw, 14px) 0;
}

.btn-stay__note {
  display: block;
  margin-top: 10px;
  font-size: clamp(10px, calc(6px + 0.40vw), 14px);
  line-height: 1.4;
}

/* 右向き矢印 */
.btn-stay::after {
  content: "";
  position: absolute;
  right: clamp(12px, 1.2vw, 20px);
  top: 62%;
  width: .5em;
  height: .5em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  font-size: var(--fs-btn-main);
}

/* ---- 期間ボタングループ（赤／青／紺） ---- */
.btn-group {
  margin-top: clamp(16px, 2vw, 34px);
  padding: clamp(12px, 1.4vw, 22px);
  color: #fff;
  border-radius: 10px;
}

.btn-group--red  { background-color: var(--c-red); }
.btn-group--blue { background-color: var(--c-blue); }
.btn-group--navy { background-color: var(--c-navy); }

.btn-group__ttl {
  font-size: var(--fs-btn-ttl);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  margin-bottom: clamp(10px, 1.1vw, 18px);
}

.btn-group__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, .9vw, 14px);
}

.btn-term {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: clamp(42px, 3.4vw, 62px);
  padding: .4em 2em .4em 1em;
  background-color: #fff;
  font-size: var(--fs-btn-term);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.btn-term::after {
  content: "";
  position: absolute;
  right: clamp(10px, 1vw, 18px);
  top: 50%;
  width: .45em;
  height: .45em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* ---- プラン一覧ボタン（黒） ---- */
.plan-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 16px) clamp(20px, 2.5vw, 48px);
}

.plan-list__item--full {
  grid-column: 1 / -1;
}

.btn-plan {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: clamp(48px, 3.6vw, 62px);
  padding: .5em 2.2em .5em 1em;
  background-color: var(--c-black);
  font-size: clamp(13px, calc(8px + 0.50vw), 18px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.btn-plan::after {
  content: "";
  position: absolute;
  right: clamp(14px, 1.4vw, 24px);
  top: 50%;
  width: .45em;
  height: .45em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}


/* ================================================================
   5. イントロ（ロゴ＋キャッチ）
   ================================================================ */
.intro {
  /* 上余白5px。#at_head .pagetitle の padding-bottom:10px と合わせて計15px */
  padding-block: 5px clamp(6px, .6vw, 10px);
  background-color: #fff;
}

.intro__inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 32px);
}

.intro__logo {
  flex: 0 0 auto;
  width: clamp(110px, 10vw, 175px);
}

.intro__logo-link {
  display: block;
  transition: opacity .3s;
}

.intro__logo-link:hover {
  opacity: .8;
}

.intro__text {
  flex: 1 1 auto;
  min-width: 0;
}

.intro__link {
  font-size: var(--fs-note);
  line-height: 1.6;
  padding-bottom: clamp(3px, .4vw, 7px);
  border-bottom: 1px solid #cfcbc4;
}

.intro__catch {
  margin-top: clamp(5px, .5vw, 10px);
  font-family: var(--f-serif);
  font-size: clamp(15px, calc(6px + 1.02vw), 26px);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  /* 約物（「」・！）のアキを詰める。本番のNoto Serif JPで有効になります */
  font-feature-settings: "palt";
}

.intro__em {
  font-style: normal;
  color: var(--c-red);
  /* 強調のため地の文より大きく */
  font-size: 1.12em;
  /* 「」の途中で改行させない */
  white-space: nowrap;
  /* 前後の地の文とのアキを軽く詰める */
  margin-inline: -.1em;
}

/* SP（767px以下）でのみ有効にする改行 */
.intro__br {
  display: none;
}

/* 「」同士が隣接する箇所（」「）のアキを詰める ← 調整はこの値で */
.intro__em + .intro__em {
  margin-left: -.3em;
}


/* ================================================================
   6. Hero（メインビジュアル）
   ================================================================ */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2050 / 700;
  overflow: hidden;
}

/* ---- スライド（CSSのみのクロスフェード／JS不使用） ---- */
.hero__slider {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: block;
}

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

.hero__slide--01 { animation: heroFade 16s infinite; }
.hero__slide--02 { animation: heroFade 16s infinite -8s; }

@keyframes heroFade {
  0%   { opacity: 1; }
  43%  { opacity: 1; }
  50%  { opacity: 0; }
  93%  { opacity: 0; }
  100% { opacity: 1; }
}

/* 端末の「視差効果を減らす」設定時はスライドを停止 */
@media (prefers-reduced-motion: reduce) {
  .hero__slide--01,
  .hero__slide--02 { animation: none; }
  .hero__slide--01 { opacity: 0; }
}

/* ---- タイトル ---- */
.hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.hero__title {
  width: clamp(230px, 33vw, 640px);
  /* スライド下端からの余白。1980px時で約48px（従来96pxの半分）。
     pc_title.png(720x356) の下部透明余白は約1%のため、ほぼ実値で指定。 */
  margin-bottom: clamp(6px, 2.42vw, 48px);
  margin-left: clamp(-50px, -2.5vw, 0px); /* カンプ同様、わずかに左へ張り出す */
}

/* ---- 縦組みコピー ---- */
.hero__vertical {
  position: absolute;
  /* ページ内ナビの下端を基準にし、残りの領域へ中央配置する
     （ナビ = padding-top 15px ＋ リンク高さ。1980px時で約50px下がる） */
  top: calc(15px + clamp(56px, 3.95vw, 78px));
  bottom: 0;
  right: clamp(24px, 7vw, 140px);
  width: clamp(48px, 6.6vw, 130px);
  display: flex;
  align-items: center;
}

/* ヒーローの高さが足りない画面幅では縦方向に収まるよう縮小 */
.hero__vertical img {
  max-height: 100%;
  object-fit: contain;
}

/* ---- ページ内リンク ---- */
.hero__nav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--lp-inner), 90%);
  display: flex;
  justify-content: flex-end;
  padding-top: 15px; /* スライド画像上端とのアキ */
}

.hero__nav-list {
  display: flex;
  border-left: 1px solid rgba(90, 80, 70, .5);
}

.hero__nav-item {
  border-right: 1px solid rgba(90, 80, 70, .5);
}

.hero__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(130px, 9.8vw, 194px);
  height: clamp(56px, 3.95vw, 78px);
  padding: .2em .4em;
  font-size: clamp(12px, calc(6px + 0.50vw), 17px);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  transition: opacity .3s;
}

.hero__nav-link:hover {
  opacity: .7;
}


/* ================================================================
   7. 宿泊（旅館・ホテルに泊まる）
   ================================================================ */
.stay {
  position: relative;
  /* マップ幅（縦見出しの位置算出にも使用） */
  --map-w: clamp(230px, 28.7vw, 568px);
  /* 下余白は .taxi::before の波形（最大210px）と重ならない値を確保 */
  padding-block: clamp(30px, 5vw, 100px) clamp(60px, 12.2vw, 241px);
  background-color: #fff;
  /* 和紙風の雲装飾 */
  background-image: url("../images/common/cloud_bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

/* エリアマップ：セクション右上（画面端まで） */
.stay__map {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--map-w);
  pointer-events: none;
}

.stay__ttl {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(20px, 4.9vw, 97px);
}

/* ---- 各ブロック ---- */
.stay__item {
  position: relative;
  display: grid;
  align-items: start;
  column-gap: clamp(16px, 2.6vw, 32px);
}

/* 湯の川温泉：写真 → 本文 → 縦見出し
   3列目は「縦見出しの実配置位置＋文字幅」を確保する可変トラック。
   1・2列目は残り幅を 36:38 の比率で分け合うため、どの画面幅でも
   本文がマップや縦見出しに潜り込みません。 */
.stay__item--onsen {
  --vttl-offset: max(0px, calc(var(--map-w) - (100vw - 100%) / 2 + 24px));
  grid-template-columns:
    minmax(0, 36fr)
    minmax(0, 38fr)
    calc(var(--vttl-offset) + var(--fs-vttl) * 1.4);
  margin-bottom: clamp(30px, 3.9vw, 77px);
}

/* 縦見出し「湯の川温泉」はマップ左端の 24px 手前に絶対配置する。
   グリッド任せだとコンテナ幅（最大1200px固定）とマップ幅（vw連動）で
   縮み方が異なり、中間幅でマップと重なるため。 */
.stay__item--onsen .stay__vttl {
  position: absolute;
  top: 0;
  right: var(--vttl-offset);
}

/* 函館市内ホテル：縦見出し → 本文 → 写真（全体をやや右寄せ） */
.stay__item--hotel {
  grid-template-columns: 1fr 38% 36%;
}

.stay__item--hotel .stay__vttl {
  justify-self: end;
}

.stay__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 433 / 318;
  object-fit: cover;
  border-radius: 8px;
}

.stay__body {
  padding-top: clamp(0px, .7vw, 14px);
}

.stay__text {
  font-size: var(--fs-body);
  line-height: 1.65;
  margin-bottom: clamp(12px, 1.3vw, 24px);
  text-align: justify;
  text-justify: inter-ideograph;
}

/* 縦組みの見出し（カンプ同様、本文側へ寄せて配置） */
.stay__vttl {
  writing-mode: vertical-rl;
  font-family: var(--f-serif);
  font-size: var(--fs-vttl);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
  color: var(--c-red);
}


/* ================================================================
   8. タクシー観光
   ================================================================ */
.taxi {
  position: relative;
  padding-block: clamp(14px, 1.7vw, 34px) clamp(30px, 3.6vw, 70px);
  background-color: var(--c-cream);
}

/* 上下の波形区切り（上側には麻の葉パターンを含む） */
.taxi::before,
.taxi::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(40px, 10.6vw, 210px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.taxi::before {
  bottom: 100%;
  background-image: url("../images/common/wave_top.png");
}

.taxi::after {
  top: 100%;
  background-image: url("../images/common/wave_bottom.png");
  z-index: 1;
}

.taxi .section-ttl {
  margin-bottom: clamp(18px, 3.4vw, 67px);
}


/* ================================================================
   9. 遊ぶ・学ぶ・体験する
   ================================================================ */
.experience {
  position: relative;
  /* 上余白は .taxi::after の波形（最大210px）と重ならない値を確保 */
  padding-block: clamp(70px, 13.2vw, 260px) clamp(20px, 2.6vw, 50px);
  background-color: #fff;
  /* 青海波パターン */
  background-image: url("../images/common/wave_bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

.experience .section-ttl {
  margin-bottom: clamp(18px, 3.4vw, 67px);
}


/* ================================================================
   10. 旅の過ごし方
   ================================================================ */
.tabisugo {
  position: relative;
  padding-block: clamp(20px, 2.6vw, 50px) clamp(30px, 5.4vw, 106px);
  background-color: #fff;
  background-image: url("../images/common/wave_bg.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

.tabisugo__ttl {
  width: clamp(170px, 14.7vw, 290px);
  margin: 0 auto clamp(14px, 1.9vw, 38px);
}

.tabisugo__notes {
  margin-top: clamp(16px, 2vw, 36px);
}


/* ================================================================
   11. SP用ページ内メニュー（ハンバーガー）
   ※ JTB共通の #at_head 内に設置するため .lp 配下ではありません。
      CSS変数（--c-text 等）とreset.cssは #lp-main スコープのため、
      このブロックでは実値指定＋必要なリセットを自前で行います。
   ================================================================ */
.spnav {
  display: none; /* PCは .hero__nav を使用するため非表示 */
}

.spnav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 9.6vw, 46px);
  height: clamp(26px, 7vw, 34px);
  padding: 0;
  margin: 0;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* 3本線アイコン（中央の線を要素本体、上下を疑似要素で描画） */
.spnav__bars,
.spnav__bars::before,
.spnav__bars::after {
  display: block;
  width: clamp(34px, 9.6vw, 46px);
  height: clamp(3px, 0.9vw, 5px);
  background-color: #231815;
  transition: transform .3s, background-color .3s;
}

.spnav__bars {
  position: relative;
}

.spnav__bars::before,
.spnav__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.spnav__bars::before { top: clamp(-14px, -2.9vw, -10px); }
.spnav__bars::after  { top: clamp(10px, 2.9vw, 14px); }

/* 開いている状態は×アイコンへ */
.spnav__btn[aria-expanded="true"] .spnav__bars {
  background-color: transparent;
}

.spnav__btn[aria-expanded="true"] .spnav__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.spnav__btn[aria-expanded="true"] .spnav__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* スクリーンリーダー向けラベル */
.spnav__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 開閉パネル ---- */
.spnav__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: max-content;
  max-width: 76vw;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.spnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.spnav__item + .spnav__item {
  border-top: 1px solid #e6e6e6;
}

.spnav__link {
  display: block;
  position: relative;
  padding: .95em 2.6em .95em 1.2em;
  font-size: clamp(13px, 3.7vw, 16px);
  font-weight: 500;
  line-height: 1.4;
  color: #231815;
  text-decoration: none;
  transition: background-color .3s;
}

.spnav__link:hover,
.spnav__link:focus-visible {
  background-color: #f5f5f5;
}

.spnav__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.2em;
  width: .4em;
  height: .4em;
  border-top: 2px solid #aa272d;
  border-right: 2px solid #aa272d;
  transform: translateY(-50%) rotate(45deg);
}


/* ================================================================
   12. すべてのプランから探す
   ================================================================ */
.plansearch {
  padding-bottom: clamp(20px, 2.4vw, 48px);
  background-color: #fff;
}

.plansearch__ttl {
  margin-bottom: clamp(12px, 1.2vw, 24px);
}

.plansearch__band {
  display: block;
}

.plansearch__band img {
  width: 100%;
  height: auto;
  aspect-ratio: 1980 / 251;
  object-fit: cover;
}

/* プラン一覧・特商法表記はカンプ実測の1132pxで揃える */
.plansearch__inner {
  max-width: 1132px;
}

.plansearch__law {
  margin-top: clamp(16px, 2vw, 40px);
  font-size: clamp(13px, calc(8px + 0.45vw), 17px);
  font-weight: 700;
}

.plansearch__law-link {
  position: relative;
  padding-left: 1.4em;
}

.plansearch__law-link::before {
  content: "";
  position: absolute;
  left: .2em;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: .35em 0 .35em .55em;
  border-color: transparent transparent transparent var(--c-red);
}


/* ================================================================
   13. ページトップへ戻るボタン（.js-page-top）
   ※ hokkaido-sake-winery と同一仕様。
      #lp-main の外に置くため CSS変数は使わず実値で指定しています。
   ================================================================ */
.page-top {
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: 100;
  width: 68px;
  height: 68px;
  background-color: #aa272d;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background-color .3s ease;
  cursor: pointer;
  text-decoration: none;
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-top:hover {
  background-color: #8c1f24;
  opacity: 1;
}

/* 矢印アイコン */
.page-top__icon {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
  margin-top: 3px;
}

@media screen and (max-width: 767px) {
  .page-top {
    right: 16px;
    bottom: 20px;
    width: 40px;
    height: 40px;
  }
}


/* ================================================================
   14. フェードイン（script.js から .is-visible を付与）
   ================================================================ */
.js-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* JS無効時・IntersectionObserver非対応時は常時表示 */
.js-fade.is-static {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ================================================================
   15. レスポンシブ
   ================================================================ */

/* ---------------- 1200px以下 ---------------- */
@media screen and (max-width: 1200px) {
  .hero__nav-link {
    width: clamp(120px, 13vw, 170px);
  }

  .hero__vertical {
    right: 3vw;
  }
}

/* ---------------- 1024px以下 ---------------- */
@media screen and (max-width: 1024px) {
  .stay {
    background-size: 160% auto;
  }

  .stay__item--hotel {
    grid-template-columns: 10% 1fr 38%;
  }
}

/* ---------------- 768px以下（SPレイアウト） ---------------- */
@media screen and (max-width: 767px) {
  .lp {
    /* SPはカンプ（680px幅）実測値に準拠したスケールへ切り替え */
    --fs-body:     clamp(13px, 3.60vw, 17px);
    --fs-h2:       clamp(17px, 4.60vw, 22px);
    --fs-lead:     clamp(15px, 3.90vw, 18px);
    --fs-btn-main: clamp(18px, 5.20vw, 24px);
    --fs-btn-ttl:  clamp(13px, 3.60vw, 18px);
    --fs-btn-term: clamp(11px, 3.20vw, 17px);
    --fs-caption:  clamp(10px, 2.90vw, 14px);
    --fs-note:     clamp(10px, 2.90vw, 14px);
    --fs-vttl:     clamp(24px, 7.35vw, 34px);
  }

  /* SP専用の改行を有効化 */
  .br-sp {
    display: inline;
  }

  /* 2行になる見出し（体験セクション等）の行間を確保 */
  .section-ttl {
    line-height: 1.5;
  }

  /* --- Hero --- */
  .hero {
    aspect-ratio: 680 / 400;
  }

  .hero__title {
    width: 88%;
    margin-bottom: clamp(3px, 1.75vw, 8px);
    margin-left: -2.5%;
  }

  /* PC専用要素（SPカンプには存在しない） */
  .hero__vertical,
  .hero__nav {
    display: none;
  }

  /* --- SP用ページ内メニュー --- */
  /* パネルの絶対配置基準。JTB共通の #at_head 内で完結させています */
  #at_head .lp-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* SPは画面端に寄りすぎないよう左右に余白を確保 */
  #at_head .lp-inner {
    padding-inline: 12px;
  }

  /* 追従バーの天地に余白を確保 */
  #at_head .pagetitle {
    padding-block: clamp(12px, 3.6vw, 18px);
    font-size: clamp(16px, 4.94vw, 22px);
  }

  #at_head {
    overflow: visible; /* パネルが切れないよう保険 */
    /* common.css の #flexbox_at { flex-direction: column-reverse } により
       SPでは見出しバーが下部へ回るため、カンプ通り最上部へ戻す。
       本番の headfooter.css 側で既に制御されている場合は削除可。 */
    order: 1;
    /* ハンバーガーメニューを画面上部に追従させる */
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  }

  .spnav {
    display: block;
    position: relative;
    flex: 0 0 auto;
  }

  /* --- イントロ：注釈を最上段、ロゴとキャッチを横並び --- */
  .intro__inner {
    display: grid;
    grid-template-columns: 36% 1fr;
    grid-template-areas:
      "link  link"
      "logo  catch";
    align-items: center;
    column-gap: 3%;
    row-gap: 6px;
  }

  .intro__text  { display: contents; }
  .intro__logo  { grid-area: logo; width: 100%; }

  /* 罫線を画面幅いっぱいに伸ばす（文字位置は元のまま） */
  .intro__link {
    grid-area: link;
    margin-inline: calc((100% - 100vw) / 2);
    padding-inline: calc((100vw - 100%) / 2);
  }

  .intro__catch {
    grid-area: catch;
    margin-top: 0;
    white-space: normal;
  }

  /* キャッチコピーを「函館旅行の／「宿泊」〜を／まとめて検索・予約！」の3行に */
  .intro__br {
    display: inline;
  }

  /* --- 2カラム → 1カラム --- */
  .media {
    grid-template-columns: 1fr;
    row-gap: clamp(14px, 4vw, 26px);
  }

  .media__body   { order: 1; }
  .media__figure { order: 2; }

  /* --- 宿泊 --- */
  .stay {
    padding-block: clamp(20px, 5vw, 40px) clamp(40px, 12vw, 90px);
    background-size: 200% auto;
  }

  .stay__map {
    width: 52%;
  }

  .stay__ttl {
    margin-inline: 0;
    margin-bottom: clamp(18px, 5vw, 34px);
    max-width: 56%;
    font-size: clamp(14px, 3.7vw, 20px);
  }

  .stay__item--onsen {
    display: block;
    grid-template-columns: none;
  }

  /* カンプ準拠：写真 → 本文 → ボタンの順に並べ替え */
  .stay__item--hotel {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }

  .stay__item--hotel .stay__figure { order: 1; }
  .stay__item--hotel .stay__body   { order: 2; }

  .stay__item--onsen {
    margin-bottom: clamp(26px, 8vw, 60px);
  }

  .stay__item--onsen .stay__figure img {
    width: 50%;
  }

  .stay__item--onsen .stay__vttl {
    position: absolute;
    right: 0;
    top: clamp(46px, 17.4vw, 118px); /* SPカンプ実測：写真上端＋118px（680px時） */
  }

  /* 本文とキャプションのみ縦見出しの左で止める（ボタンは全幅＝2つ目と同じ幅） */
  .stay__item--onsen .stay__text,
  .stay__item--onsen .stay__caption {
    width: calc(100% - var(--fs-vttl) * 1.6);
  }

  .stay__item--onsen .stay__body {
    padding-top: clamp(10px, 3vw, 20px);
  }

  .stay__item--hotel {
    padding-left: 3.4em;
  }

  .stay__vttl {
    letter-spacing: .12em; /* SPカンプ実測 */
  }

  .stay__item--hotel .stay__vttl {
    position: absolute;
    left: 0;
    top: 0;
  }

  .stay__item--hotel .stay__figure {
    width: 62%;
    margin-left: auto;
  }

  .stay__item--hotel .stay__body {
    padding-top: clamp(10px, 3vw, 20px);
  }


  /* SPではボタンをインナー幅いっぱいに */
  .btn-stay {
    max-width: none;
  }

  .stay__item--hotel .btn-stay {
    margin-left: -3.4em;
    width: calc(100% + 3.4em);
  }

  /* --- 波形区切り --- */
  .taxi {
    padding-block: clamp(10px, 3vw, 24px) clamp(20px, 6vw, 46px);
  }

  .experience {
    padding-block: clamp(46px, 16vw, 120px) clamp(16px, 4vw, 32px);
  }

  .tabisugo {
    padding-block: clamp(16px, 4vw, 32px) clamp(24px, 8vw, 60px);
  }

  /* --- プラン一覧は1列 --- */
  .plan-list {
    grid-template-columns: 1fr;
    width: 82%;
    margin-inline: auto;
  }

  .plansearch__band img {
    aspect-ratio: 680 / 193;
  }

  .plansearch__law {
    text-align: center;
  }
}

/* ---------------- 480px以下 ---------------- */
/* ---------------- 620px以下 ----------------
   ロゴとキャッチの横並びを保ったまま3行に収めるため、
   ロゴ列を狭め、キャッチの文字サイズを画面幅に追従させる。 */
@media screen and (max-width: 620px) {
  .intro__inner {
    grid-template-columns: 21% 1fr;
    column-gap: 3%;
  }

  /* 「「宿泊」「タクシー観光」「遊ぶ・体験」を」が1行に収まる上限 */
  .intro__catch {
    font-size: clamp(10px, 2.85vw, 15px);
  }
}

/* ---------------- 480px以下 ---------------- */
@media screen and (max-width: 480px) {
  /* マップ（右上・52%）は767px以下の指定をそのまま継承。
     写真はマップ左端（右から52%）に届かない幅に抑え、横並びで共存させる */
  .stay__item--onsen .stay__figure img {
    width: 48%;
  }

  .stay__item--hotel .stay__figure {
    width: 70%;
  }

  .btn-group {
    padding-inline: 10px;
  }

  .plan-list {
    width: 100%;
  }
}

/* ---------------- 420px以下 ---------------- */
@media screen and (max-width: 420px) {
  /* この幅以下は可変をやめ、本文14px・注釈12px固定。
     キャプションはiPhone SE(375px)で余分な行送りが出ないよう10pxまで縮小 */
  .lp {
    --fs-body:    14px;
    --fs-caption: 10px;
    --fs-note:    12px;
  }

  .btn-term {
    min-height: 40px;
    padding-inline: .4em 1.6em;
  }
}