/* ================================================================
   Common: Header / Footer / Utility
   ================================================================ */

/* ===== Site Header ===== */
/* Figma: 右上固定ナビ（PC） / 横並びナビ（SP） */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-header);
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  overflow: hidden;
}

/* Safe Area（ステータスバー）対応 */
@media (max-width: 767px) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 16.539vw; /* 65px / 393 */
    z-index: calc(var(--z-header) - 1);
    pointer-events: none;
    background: #fff;
  }

  body.page-template-top-ja::before,
  body.page-template-top-en::before {
    background: #fff;
  }

  body.page-template-room-ja::before,
  body.page-template-room-en::before {
    background: #fff;
  }

  body.page-template-ipponsugi-ja::before,
  body.page-template-ipponsugi-en::before {
    background: #fff;
  }
}


/* SP: ヘッダー背面の波形 */
.site-header__wave {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0; /* nav（z-index:1）の背面 */
  line-height: 0;
  pointer-events: none;
}

.site-header__wave svg {
  display: none;
  width: 100%;
  height: auto;
}

.site-nav {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  /* 波形の高さ分をヘッダーに確保 */
  .site-header {
    min-height: 27.4vw;
  }


  /* 全ページ: 波形コンテナを表示・上端に固定・scaleX(-1) で左→右方向に統一 */
  .page-template-top-ja .site-header__wave,
  .page-template-top-en .site-header__wave,
  .page-template-room-ja .site-header__wave,
  .page-template-room-en .site-header__wave,
  .page-template-ipponsugi-ja .site-header__wave,
  .page-template-ipponsugi-en .site-header__wave {
    display: block;
    top: 0;
    bottom: auto;
    transform: scaleX(-1);
  }

  /* top: 赤 */
  .page-template-top-ja .site-header__wave svg,
  .page-template-top-en .site-header__wave svg {
    display: block;
    color: #C40805;
  }
  /* room: 黄 */
  .page-template-room-ja .site-header__wave svg,
  .page-template-room-en .site-header__wave svg {
    display: block;
    color: #FFFFA3;
  }
  /* 一本杉: 緑 */
  .page-template-ipponsugi-ja .site-header__wave svg,
  .page-template-ipponsugi-en .site-header__wave svg {
    display: block;
    color: #D8E8BF;
  }
}

.site-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6.107vw 7.888vw 0 4.835vw; /* 上24px 右31px 下0 左19px (基準393px) */
}

/* ===== ロゴ ===== */
/* Figma: 赤いblobに「Design Your own Trip」テキスト */
/* Mobile: 左上, w≈67px / PC: 左上 */
.site-logo {
  display: block;
  text-decoration: none;
  position: relative;
}

/* ロゴ: SP は inverted（白blob・赤文字）、それ以外は通常（赤blob・白文字）*/
.site-logo__img {
  display: block;
  width: 17.049vw; /* 67px / 393 */
  height: auto;
  transition: opacity 0.2s;
}

.site-logo__img--inverted {
  display: none;
  transition: opacity 0.2s;
}

/* ホバー版ロゴ: 常にposition:absoluteで重ね、opacity:0 */
.site-logo__img--default-hover,
.site-logo__img--inverted-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 17.049vw; /* 67px / 393 */
  height: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* ホバー: PC通常ロゴ → logo-default-hover */
.site-logo:hover .site-logo__img {
  opacity: 0;
}
.site-logo:hover .site-logo__img--default-hover {
  opacity: 1;
}

@media (max-width: 767px) {
  .page-template-top-ja .site-logo__img,
  .page-template-top-en .site-logo__img {
    display: none;
  }
  .page-template-top-ja .site-logo__img--inverted,
  .page-template-top-en .site-logo__img--inverted {
    display: block;
  }
  /* SPトップ: default-hoverは表示しない */
  .page-template-top-ja .site-logo:hover .site-logo__img--default-hover,
  .page-template-top-en .site-logo:hover .site-logo__img--default-hover {
    opacity: 0;
  }
  /* SPトップ: inverted → inverted-hover */
  .page-template-top-ja .site-logo:hover .site-logo__img--inverted,
  .page-template-top-en .site-logo:hover .site-logo__img--inverted {
    opacity: 0;
  }
  .page-template-top-ja .site-logo:hover .site-logo__img--inverted-hover,
  .page-template-top-en .site-logo:hover .site-logo__img--inverted-hover {
    opacity: 1;
  }
}

/* ===== ナビアクション（右側グループ） ===== */
/* SP: [予約][ハンバーガー] 1行目 / [JP|EN] 2行目 */
.site-nav__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.763vw 2.036vw; /* 3px 8px / 393 */
}

@media (max-width: 767px) {
  .site-nav__actions {
    margin-top: 3.053vw; /* 36px - site-nav padding-top(24px) = 12px */
  }
}

.site-nav__actions .btn-book   { order: 1; }
.site-nav__actions .hamburger-btn { order: 2; }
.site-nav__actions .lang-and-book {
  order: 3;
  flex-basis: 100%; /* 2行目に折り返す */
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .site-nav__actions .lang-and-book {
    transform: translateX(2.545vw); /* 10px / 393 */
  }
  .lang-and-book {
    gap: 2.545vw; /* 10px / 393 */
  }
}

.lang-and-book {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== JP/EN 言語切替 ===== */
/* Figma: "JP ｜ EN" – アクティブ言語が赤 */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 1.018vw; /* 4px / 393 */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 2.545vw; /* 10px / 393 */
  line-height: 7.634vw; /* 30px / 393 */
}

.lang-switcher__current {
  color: var(--color-red);
  font-size: inherit;
  font-weight: inherit;
}

@media (max-width: 767px) {
  /* トップページのみ：波が赤のためアクティブ言語を白に */
  .page-template-top-ja .lang-switcher__current,
  .page-template-top-en .lang-switcher__current {
    color: #fff;
  }
  /* トップページのみ：非アクティブ言語を暗赤に */
  .page-template-top-ja .lang-switcher__btn,
  .page-template-top-en .lang-switcher__btn {
    color: #800300;
  }
  /* トップページのみ：ハンバーガーを白に */
  .page-template-top-ja .hamburger-btn img,
  .page-template-top-en .hamburger-btn img {
    filter: brightness(0) invert(1);
  }
}

.lang-switcher__sep {
  color: #bebebe;
}

.lang-switcher__btn {
  color: #bebebe;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.lang-switcher__btn:hover {
  color: var(--color-text);
}

/* ===== Roomのご予約 / BOOK Room ボタン ===== */
/* Figma: 黄色の3Dボタン（#fff947）w=70, h=26 (SP) */
.btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 2.036vw; /* 8px / 393 */
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-btn-book);
  border-radius: 2.545vw; /* 10px / 393 */
  padding: 0 2.036vw; /* 8px / 393 */
  height: 6.107vw; /* 24px / 393 */
  position: relative;
  /* 3D シャドウ効果 */
  box-shadow: 0 0.509vw 0 var(--color-btn-book-shadow); /* 2px / 393 */
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  min-width:10em;
}

.btn-book:hover {
  background: #d9d8ac;
  box-shadow: 0 0.509vw 0 #cccbcb; /* SP: 2px / 393 */
}

@media (min-width: 768px) {
  .btn-book:hover {
    box-shadow: 0 4px 0 #cccbcb; /* PC */
  }
}

/* ===== ハンバーガーボタン ===== */
.hamburger-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-btn img {
  width: 6.107vw; /* 24px / 393 */
  height: auto;
}

/* ===== モバイルメニュー（Figma: iPhone 16 - Top menu 782:1207） ===== */
/* 背景: #fffdf3（クリーム）/ 左上 x=52px からナビ */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: #fffdf3;
  z-index: calc(var(--z-header) + 1);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  padding: 28px var(--gutter) var(--sp-xl);
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

/* 閉じるボタン（Figma: top=28px, right=~35px） */
.mobile-menu__close {
  position: absolute;
  top: 28px;
  right: var(--gutter);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu__close img {
  width: 9.513vw; /* 37.38/393 */
  height: auto;
  display: block;
  max-width: 60px;
}

/* ナビ全体（Figma: top=134px から開始） */
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  margin-top: 106px; /* 134px - 28px(padding) */
  gap: 0;
}

/* トップレベルリンク（Figma: bold 18px, 左端 x=52px） */
.mobile-menu__link {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  line-height: 50px;
  display: block;
}

/* セクション（Room / 一本杉） */
.mobile-menu__section {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

/* サブメニュー（Figma: regular 18px, left=67px → 15px インデント） */
.mobile-menu__sub {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
  display: flex;
  flex-direction: column;
}

.mobile-menu__sub li a {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  line-height: 50px;
  display: block;
}

/* ===== Site Footer ===== */
.site-footer {
  padding: var(--sp-md) var(--gutter);
}

/* フッター波形 */
.site-footer__wave {
  display: none;
  line-height: 0;
  pointer-events: none;
}

.site-footer__wave-img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  /* 全ページ: フッターを relative にして波形とコピーライトを重ねる */
  .page-template-top-ja .site-footer,
  .page-template-top-en .site-footer,
  .page-template-room-ja .site-footer,
  .page-template-room-en .site-footer,
  .page-template-ipponsugi-ja .site-footer,
  .page-template-ipponsugi-en .site-footer {
    position: relative;
    padding: 0;
    z-index: 2;
  }

  /* 波形をフロー内に置いてフッター高さを決める */
  .page-template-top-ja .site-footer__wave,
  .page-template-top-en .site-footer__wave,
  .page-template-room-ja .site-footer__wave,
  .page-template-room-en .site-footer__wave,
  .page-template-ipponsugi-ja .site-footer__wave,
  .page-template-ipponsugi-en .site-footer__wave {
    display: block;
  }

  /* footer-inner: 波形の上に絶対位置で重ねて右下にコピーライトを配置 */
  .page-template-top-ja .footer-inner,
  .page-template-top-en .footer-inner,
  .page-template-room-ja .footer-inner,
  .page-template-room-en .footer-inner,
  .page-template-ipponsugi-ja .footer-inner,
  .page-template-ipponsugi-en .footer-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: flex-end;
    padding: 0 7.888vw 3.307vw;
  }

  /* コピーライト: 白文字 */
  .page-template-top-ja .footer-copy,
  .page-template-top-en .footer-copy,
  .page-template-ipponsugi-ja .footer-copy,
  .page-template-ipponsugi-en .footer-copy {
    color: #fff;
  }

}

.footer-inner {
  display: flex;
  justify-content: flex-end;
}

.footer-copy {
  font-family: 'Inter', sans-serif;
  font-size: 8px;   /* Figma mobile: 8px */
  color: var(--color-text-sub);
  white-space: pre;
}

@media (max-width: 767px) {
  .footer-copy {
    font-size: 2.036vw; /* Figma mobile: 8px / 393 */
  }
}

/* ===== Utility ===== */
.sp-only   { display: block!important; }
.pc-only   { display: none; }
.sp-br     { display: block; }  /* SP専用改行: <br class="sp-br"> */

/* ページトップへ戻るボタン: SP（ヘッダー下・右）*/
.page-template-top-ja .back-to-top,
.page-template-top-en .back-to-top {
  display: none;
}

.back-to-top {
  position: fixed;
  top: 32.316vw; /* 127px / 393 */
  right: 1.527vw; /* 6px / 393 */
  width: 5.089vw; /* 20px / 393 */
  height: 5.089vw; /* 20px / 393 */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  z-index: calc(var(--z-header) - 1);
  transition: opacity var(--transition-fast);
}

.back-to-top:hover {
  opacity: 0.7;
}

.back-to-top img {
  width: 100%;
  height: 100%;
}


/* ================================================================
   PC layout (≥768px)
   ================================================================ */
@media (min-width: 768px) {
  .site-header {
    width: auto;
    left: auto;
  }

  /* PC: ロゴ (Figma: 144.57px / 1920 = 7.53vw) */
  .site-logo__img {
    width: clamp(75px, 7.53vw, 145px);
  }

  .site-logo__img--default-hover,
  .site-logo__img--inverted-hover {
    width: clamp(75px, 7.53vw, 145px);
  }

  /* PC: ナビ全体を縦一列・中央揃え */
  .site-nav {
    padding: 4.95vw 2.34vw 0.31vw;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.98vw;
  }

  .page-template-room-ja .site-nav,
  .page-template-room-en .site-nav,
  .page-template-ipponsugi-ja .site-nav,
  .page-template-ipponsugi-en .site-nav {
    padding: 2.760vw 2.344vw 0.31vw 2.34vw; /* 上53px 右45px 下・左は現状維持 */
  }

  /* PC: actions 縦並び（ハンバーガー→JP/EN→予約）*/
  .site-nav__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
  }

  /* PC order: hamburger(1) → lang-and-book(2) → btn-book(3)
     margin: 57/1920=2.97vw, 17/1920=0.885vw */
  .site-nav__actions .hamburger-btn { order: 1; margin-bottom: 0.97vw; }
  .site-nav__actions .lang-and-book { order: 2; margin-bottom: 1.885vw; flex-basis: auto; }
  .site-nav__actions .btn-book      { order: 3; }

  /* ハンバーガー (Figma: 35.72px / 1920 = 1.86vw) */
  .hamburger-btn img {
    width: clamp(24px, 1.86vw, 36px);
  }

  /* JP/EN (PC) */
  .lang-and-book {
    flex-direction: row;
    align-items: center;
  }

  /* PC: 予約ボタン (Figma: 121×42px → 6.30vw × 2.19vw) */
  .btn-book {
    font-size: clamp(10px, 0.73vw, 14px);
    height: clamp(28px, 2.19vw, 42px);
    min-width: clamp(80px, 6.30vw, 121px);
    padding: 0 clamp(10px, 0.83vw, 16px);
    border-radius: clamp(10px, 0.78vw, 15px);
    box-shadow: 0 4px 0 var(--color-btn-book-shadow);
  }

  .lang-switcher {
    font-size: 20px;  /* Figma PC: 20px */
    line-height: 40px;
  }

  .footer-copy {
    font-size: 12px;  /* Figma PC: 12px */
  }

  .page-template-ipponsugi-ja .site-footer,
  .page-template-ipponsugi-en .site-footer {
    background-color: #fffbf5;
  }

  .sp-only   { display: none!important; }
  .pc-only   { display: inline-block; }
  .sp-br     { display: none; }

  /* ===== ページトップへ戻るボタン: PC（nav直下・中央揃え）===== */
  .back-to-top {
    position: static;
    align-self: center;
    margin-top: 30px;
    width: 1.875vw; /* 36px / 1920 */
    height: 1.875vw; /* 36px / 1920 */
  }
}