/* ==========================================================================
   style.css — 案件固有スタイル
   このファイルにページ・コンポーネントのスタイルを書く。

   ルール：
   - 命名はBEM（block__element--modifier）
   - 色・余白・フォントは base.css の変数を使う（ハードコード禁止）
   - モバイルファースト：SP基準で書き、min-width で上書き
   - セクションごとにコメント見出しを付ける
   ========================================================================== */

/* --------------------------------------------------------------------------
   loading-screen（画像読み込み完了までの読み込み中画面）
   window の load イベント（全画像を含む全リソース読み込み完了）で
   is-hiddenを付与しフェードアウトする（main.jsで制御）
   -------------------------------------------------------------------------- */

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-screen__logo {
  width: 24rem;
  height: auto;
}

/* --------------------------------------------------------------------------
   nav-toggle / nav-panel（ハンバーガーメニュー）
   常に画面右上40pxの位置に固定表示する。
   メニュー本体はdialog要素で実装（表示/非表示・フォーカストラップ・
   Escキーでの閉じるをブラウザ標準機能に任せ、開閉のトリガーのみJSで行う）。
   中身のデザインは未確定のため、既存のページ内アンカーへのリンクのみ設置。
   -------------------------------------------------------------------------- */

/* 1560px未満：画像側と同じ係数（px ÷ 15.6）でvw縮小する */
.nav-toggle {
  position: fixed;
  top: min(40px, 2.5641vw);
  right: min(40px, 2.5641vw);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100px, 6.4103vw);
  height: min(100px, 6.4103vw);
  border-radius: 50%;
  background-color: var(--color-blue);
  border: 2px solid #fff;
}

.nav-toggle img {
  width: min(37px, 2.3718vw);
}

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  overflow: hidden;
}

.nav-panel::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 開いた瞬間はtranslateY(100%)で画面下に隠れており、
   is-openクラス付与（JS側でshowModal直後にrequestAnimationFrameで付与）
   と同時に上へスライドする。波（::before）はこの要素の直上（bottom:100%）に
   固定されて一緒に動くため、動いている間だけ画面内に見え、
   静止時（translateY(0)）には画面外に出て見えなくなり、最終的に青一色になる */
.nav-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-blue);
  transform: translateY(100%);
  transition: transform 0.9s ease;
}

.nav-panel__bg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  /* 高さを基準に、実寸比率（210:3000）を保ったまま横に繰り返す。
     幅を直接指定すると縦横比が崩れて不自然になるため、
     高さ基準のauto幅＋repeat-xで歪みなくサイズだけ変える */
  height: 5.6vw;
  background-image: url("../img/bg_nav_nami.png");
  background-repeat: repeat-x;
  background-position: top;
  background-size: auto 100%;
}

.nav-panel.is-open .nav-panel__bg {
  transform: translateY(0);
}

.nav-panel__close {
  position: fixed;
  top: min(40px, 2.5641vw);
  right: min(40px, 2.5641vw);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100px, 6.4103vw);
  height: min(100px, 6.4103vw);
  border-radius: 50%;
  background-color: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 背景が上まで上がりきる（0.5s）のを待ってからバッテンを表示する */
.nav-panel.is-open .nav-panel__close {
  opacity: 1;
  transition-delay: 0.9s;
}

/* バッテン画像（波モチーフ）を少し大きめに表示する（ブレークポイント問わず） */
.nav-panel__close img {
  width: min(42px, 2.6923vw);
  height: auto;
}

.nav-panel__nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.3s ease;
}

/* 背景が上まで上がりきる（0.5s）のを待ってからメニュー文字を表示する */
.nav-panel.is-open .nav-panel__nav {
  opacity: 1;
  transition-delay: 0.9s;
}

.nav-panel__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

.nav-panel__link {
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* サイト内の他セクションで使っている白の点線デザインを流用 */
.nav-panel__list li {
  padding-bottom: 2.4rem;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.6);
}

.nav-panel__item--last {
  padding-bottom: 0;
  border-bottom: none;
}

/* PC：2カラム（5:5）表示にする。SPは非表示のli（display:none）が
   グリッドに参加しないため、可視の10項目（TOP + pc用9項目）だけで
   自動的に5行×2列に分かれる */
@media (min-width: 768px) {
  .nav-panel__list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    column-gap: min(80px, 5.1282vw);
    row-gap: 2.4rem;
  }

  .nav-panel__list li {
    width: 240px;
    text-align: center;
  }

  /* 左カラムの最後（タイムスケジュール）は南熱海の魅力と同様に線を消す */
  .nav-panel__item--col-break {
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* ページ内アンカー先がPC/SPで別画像になるため、リンクも出し分ける
   （temp-page__pc / __sp の切り替えと同じ767pxを基準にする） */
.nav-panel__item--sp {
  display: none;
}

@media (max-width: 767px) {
  .nav-panel__item--pc {
    display: none;
  }
  .nav-panel__item--sp {
    display: block;
  }
}

/* SP：ナビゲーションのボタン（開く/閉じる）を40%縮小する */
@media (max-width: 767px) {
  .nav-toggle,
  .nav-panel__close {
    right: 20px;
    width: 60px;
    height: 60px;
  }

  .nav-toggle img {
    width: 22.2px;
  }

  .nav-panel__close img {
    width: 28.8px;
    height: auto;
  }

  .nav-panel__link {
    font-size: 1.6rem;
  }

  /* SPは波が小さく見えるため拡大する */
  .nav-panel__bg::before {
    height: 12.6vw;
  }

  /* 項目が多く画面に収まらない時のみ縦スクロールできるように、
     収まる時は中央寄せのまま・溢れる時は上端から表示する */
  .nav-panel__nav {
    align-items: safe center;
    padding-top: 80px;
    padding-bottom: 20px;
  }
}

/* --------------------------------------------------------------------------
   page-nav（1セクション通過後に左上へ表示する簡易ナビゲーション）
   表示切り替えはIntersectionObserverで行う（main.js）
   -------------------------------------------------------------------------- */

/* 1560px未満：画像側と同じ係数（px ÷ 15.6）でvw縮小する */
.page-nav {
  position: fixed;
  top: min(40px, 2.5641vw);
  left: min(40px, 2.5641vw);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: min(16px, 1.0256vw);
  padding: min(12px, 0.7692vw) min(20px, 1.2821vw);
  border-radius: min(40px, 2.5641vw);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* 高さ1pxはIntersectionObserverの交差判定を安定させるためのもの。
   margin-bottom:-1pxで自身の分の余白を打ち消し、前後の画像間に
   隙間ができないようにする */
.page-nav-sentinel,
.page-nav-theme-sentinel,
.page-top-btn-stop {
  display: block;
  height: 1px;
  margin-bottom: -1px;
}

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

.page-nav__title {
  display: block;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(16px, 1.4103vw, 22px);
  letter-spacing: 0.1em;
  color: var(--color-blue);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* 現在スクロール中のセクションが暗い背景色の時、main.jsが
   page-navに付与するクラス。区間の境目はpage-nav-theme-sentinelで判定する */
.page-nav.page-nav--dark .page-nav__title {
  color: #fff;
}

.page-top-btn {
  position: fixed;
  right: min(40px, 2.5641vw);
  bottom: min(40px, 2.5641vw);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(4px, 0.2564vw);
  width: min(130px, 8.3333vw);
  aspect-ratio: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

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

.page-top-btn__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.page-top-btn__arrow {
  position: relative;
  top: -10px;
  z-index: 1;
  display: block;
  width: min(30px, 1.9231vw);
  height: min(30px, 1.9231vw);
  transform: rotate(-90deg);
}

.page-top-btn__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--color-blue);
  stroke: var(--color-blue);
  stroke-width: 1px;
  stroke-linejoin: round;
}

.page-top-btn__label {
  position: relative;
  top: -10px;
  z-index: 1;
  color: var(--color-blue);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: min(16px, 1.0256vw);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .page-nav {
    display: none;
  }

  .page-top-btn {
    right: 20px;
    bottom: 20px;
    width: 90px;
    gap: 2px;
  }

  .page-top-btn__arrow {
    width: 20px;
    height: 20px;
  }

  .page-top-btn__label {
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------------------------------
   temp-page（仮アップ用：書き出し画像を並べるだけ）
   -------------------------------------------------------------------------- */

/* 767px以下：sp頭文字の書き出し画像に切り替える */
.temp-page__sp {
  display: none;
}

@media (max-width: 767px) {
  .temp-page__pc {
    display: none;
  }
  .temp-page__sp {
    display: block;
  }
}

/* SP画像はPCのような1560px基準のトリミングは行わず、
   単純に画面幅いっぱいに縮小する */
.temp-page__sp .temp-page__img {
  position: static;
  left: auto;
  width: 100%;
  max-width: 100%;
  transform: none;
}

.temp-page__sp .temp-page__img-wrap {
  left: auto;
  width: 100%;
  max-width: 100%;
  transform: none;
}

/* SP用ボタン：PC用のmin(px,vw)はPCのトリミング挙動に合わせた係数のため
   小さい画面幅では文字が潰れてしまう。rem基準の固定サイズに差し替える */
.temp-page__sp .temp-page__hotel-btn {
  gap: 1.6rem;
  padding: 1rem 1.6rem 1rem 2.4rem;
  border-radius: 4rem;
  font-size: 1.4rem;
}

.temp-page__sp .temp-page__hotel-btn-arrow {
  width: 2.2rem;
  height: 2.2rem;
}

/* 開始位置（左上）だけ画像に対する%で指定し、
   ボタン同士の間隔はflexのgap（固定px）で保つことで、
   画面幅が変わってもボタン同士が重ならないようにする */
.temp-page__hotel-btn-group {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
}

/* SP：南熱海の観光情報はこちら。PC横並びではなく縦積みにし、
   文字サイズもmin(px,vw)ではなくrem固定にする（767px以下専用のため） */
.temp-page__sp .temp-page__hotel-links {
  padding-block: 4rem;
  padding-inline: 2rem;
}

.temp-page__sp .temp-page__hotel-links-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 2rem;
  max-width: none;
}

.temp-page__sp .temp-page__hotel-links-title {
  align-self: center;
  gap: 1rem;
  padding-bottom: 1rem;
  font-size: 1.8rem;
}

.temp-page__sp .temp-page__hotel-links-buttons {
  flex-direction: column;
  gap: 0.8rem;
}

.temp-page__hotel-btn-group .temp-page__hotel-btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   sp-menu-list（SP：sp1の下に置く4項目リストボタン。見どころ/宿泊者特典/SNS/アクセス）
   -------------------------------------------------------------------------- */

.sp-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2rem;
  background-color: #34A4DF;
}

.sp-menu-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 6rem;
  padding: 1rem 2rem;
  background-color: #fff;
  border-radius: 4rem;
}

.sp-menu-list__body {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.sp-menu-list__icon {
  position: relative;
  flex-shrink: 0;
  width: 6.5rem;
  height: 4rem;
}

.sp-menu-list__icon-img {
  position: absolute;
  display: block;
}

.sp-menu-list__icon-img--highlights-1 {
  left: 2.033rem;
  top: 0.636rem;
  width: 4.00437rem;
  height: 2.41824rem;
  transform: rotate(13.58deg);
}

.sp-menu-list__icon-img--highlights-2 {
  left: 0.409rem;
  top: 1.262rem;
  width: 2.2749rem;
  height: 2.37265rem;
  transform: rotate(-9.11deg);
}

.sp-menu-list__icon-img--campaign {
  left: 1rem;
  top: 0;
  width: 4.5rem;
  height: 4rem;
}

.sp-menu-list__icon-img--sns {
  left: 0;
  top: 0;
  width: 6.5rem;
  height: 4rem;
}

.sp-menu-list__icon-img--access-1 {
  left: 0.9368rem;
  top: 0.3998rem;
  width: 3.50843rem;
  height: 1.77349rem;
}

.sp-menu-list__icon-img--access-2 {
  left: 3.1728rem;
  top: 1.9038rem;
  width: 2.39036rem;
  height: 1.69639rem;
}

.sp-menu-list__label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.sp-menu-list__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sp-menu-list__item:hover .sp-menu-list__arrow {
  transform: translateX(0.5rem);
}

.sp-menu-list__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 南熱海の宿泊者限定は一番上に配置し、PCのキャンペーンボタンと
   同じ上下バウンドアニメーションを付ける */
.sp-menu-list__item--campaign {
  animation: temp-page-hop 1.3s ease-in-out infinite;
}

/* 1560px以上：デザイン原寸（1920px基準）で固定。
   1560px未満：ビューポート幅に比例して縮小しつつ、
   トリミングされた見た目の比率をそのまま保つ。
   min(固定px, 比例vw) の形で、1560pxを境に自然に切り替わる
   （1560px = 100vw になるよう、px値 ÷ 15.6 でvw値を算出） */
.temp-page__hotel-links {
  width: 100%;
  background-color: #fff;
  padding-block: min(60px, 3.8462vw);
}

.temp-page__hotel-links-inner {
  display: flex;
  align-items: center;
  gap: min(80px, 5.1282vw);
  max-width: min(1400px, 89.7436vw);
  margin-inline: auto;
}

.temp-page__hotel-links-title {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 1.2821vw);
  padding-bottom: min(20px, 1.2821vw);
  border-bottom: 2px dashed var(--color-blue2);
  color: var(--color-blue2);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: min(24px, 1.5385vw);
  letter-spacing: 0.15em;
  text-align: center;
  white-space: nowrap;
}

.temp-page__hotel-links-buttons {
  display: flex;
  flex: 1;
  gap: min(10px, 0.641vw);
}

.temp-page__hotel-btn--flex {
  flex: 1;
}

.temp-page__pet-info-btn {
  position: absolute;
  width: fit-content;
  transform: translateX(-50%);
  text-align: left;
  line-height: 1.6;
}

.temp-page__hotel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(20px, 1.2821vw);
  padding: min(10px, 0.641vw) min(20px, 1.2821vw) min(10px, 0.641vw) min(30px, 1.9231vw);
  background-color: #fff;
  border: 2px solid var(--color-border);
  border-radius: min(40px, 2.5641vw);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: min(16px, 1.0256vw);
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.temp-page__hotel-btn--overlay {
  position: absolute;
}

.temp-page__hotel-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(22px, 1.4103vw);
  height: min(22px, 1.4103vw);
  border-radius: 50%;
  background-color: var(--color-text);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.temp-page__hotel-btn:hover .temp-page__hotel-btn-arrow {
  transform: translateX(min(5px, 0.3205vw));
}

.temp-page__hotel-btn-arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

.temp-page__star-g {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3vw;
}

.temp-page__star-g-icon {
  position: relative;
  width: 3.3vw;
  height: auto;
}

.temp-page__star-g-text {
  position: relative;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.1vw;
  line-height: 1.25;
  text-align: center;
}

.temp-page {
  overflow-x: hidden;
}

/* 1560px以上：実寸(1920px)固定で中央基準に左右をトリミングする。
   margin:autoはコンテナより広い固定幅要素だと左端に寄ってしまうため、
   left:50%+translateXで中央基準にする。
   1560px未満：min()により、トリミング比率を保ったままビューポート幅に
   比例して縮小する（1920÷15.6＝123.0769vwが1560pxで1920pxと一致する） */
.temp-page__img {
  display: block;
  position: relative;
  left: 50%;
  width: min(1920px, 123.0769vw);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

.temp-page__img.temp-page__img--responsive {
  position: static;
  left: auto;
  width: 100%;
  transform: none;
}

.temp-page__map-section {
  width: 100%;
  background-color: var(--color-cream);
}

.temp-page__map {
  width: min(920px, 58.9744vw);
  aspect-ratio: 920 / 400;
  margin-inline: auto;
  border-radius: 30px;
  overflow: hidden;
}

/* SP：min(px,vw)はPCのトリミング挙動に合わせた係数のため使わず、
   単純に画面幅いっぱい（左右2remの余白）に表示する。角Rは10px */
.temp-page__sp .temp-page__map-section {
  padding-inline: 2rem;
}

.temp-page__map--sp {
  width: 100%;
  border-radius: 10px;
}

.temp-page__map iframe {
  display: block;
}

.temp-page__img-wrap {
  position: relative;
  left: 50%;
  width: min(1920px, 123.0769vw);
  max-width: none;
  transform: translateX(-50%);
}

.temp-page__img-wrap.temp-page__img-wrap--responsive {
  left: auto;
  width: 100%;
  transform: none;
}

/* 1枚の画像内の途中（開催概要など）にページ内リンクの着地点を作るための
   目に見えないアンカー */
.temp-page__anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
}

.temp-page__hotspot {
  position: absolute;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.temp-page__hotspot:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* フッターのInstagramリンクは暗い背景の上にあるため、白いホバー効果を出さない */
.temp-page__hotspot--no-hover:hover {
  background-color: transparent;
}

.temp-page__star {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.temp-page__star::before,
.temp-page__star-g::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: temp-page-spin 20s linear infinite;
}

.temp-page__star::before {
  background-image: url("../img/star_y.svg");
}

.temp-page__star-g::before {
  background-image: url("../img/star_g.svg");
}

@keyframes temp-page-spin {
  to {
    transform: rotate(360deg);
  }
}

.temp-page__star-text {
  position: relative;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.1vw;
  line-height: 1.25;
  text-align: center;
}

.temp-page__star--sp .temp-page__star-text {
  font-size: 1.4rem;
}

.temp-page__hotspot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.temp-page__btn-campaign {
  filter: drop-shadow(0 1px 70px #ECEBE7);
  animation: temp-page-hop 1.3s ease-in-out infinite;
}

.temp-page__hotspot--campaign::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.2s ease;
  pointer-events: none;
}

.temp-page__hotspot--campaign:hover::after {
  background-color: rgba(255, 255, 255, 0.2);
}

@keyframes temp-page-hop {
  0%, 23%, 100% {
    transform: translateY(0);
  }
  11.5% {
    transform: translateY(-10px);
  }
}