@charset "UTF-8";

/* ============================================
   public_all.css（全ページ共通スタイル - 完全最適化版）
   
   【概要】
   - 全ページで読み込まれる共通CSS
   - CSS変数による一元管理
   - ヘッダー、フッター、ナビゲーションなど
   - 汎用的なユーティリティクラス
   - リセットCSS、フォント設定
   
   【主なセクション構成】
   0. CSS変数定義
   1. 共通ベース設定（リセット+フォント）
   2. 汎用フォントユーティリティ
   3. PCヘッダー
   4. グローバルナビ（1段目）
   5. グローバルナビ（2段目ドロップダウン）
   6. ヘッダー右上ボタン（予約・LINE）
   7. SPヘッダー
   8. SPナビゲーション
   9. ハンバーガーメニュー
   10. フッター
   
   【対象ブラウザ】
   - モダンブラウザ（Chrome, Firefox, Safari, Edge）
   - レスポンシブ対応（840px以下でSP切替）
   
   【依存関係】
   - Noto Sans JPフォント（Google Fonts）
   - ページ固有CSS（各ページで追加読み込み）
   ============================================ */


/* ============================================
   0. CSS変数定義（全ページ共通）
   
   【使用方法】
   color: var(--color-text-main);
   background: var(--color-bg-beige);
   font-size: var(--font-size-base);
   
   【利点】
   - 色やサイズを一箇所で管理
   - テーマ変更が簡単
   - メンテナンス性向上
   ============================================ */
:root {
  /* ────────────────────────────────
     カラーパレット - ベース
     ──────────────────────────────── */
  --color-bg-main: #ffffff;              /* メイン背景色（白） */
  --color-bg-beige: #F0E8DF;             /* サブ背景色（RADOHREベージュ） */
  --color-bg-black: #000000;             /* ダーク背景 */
  
  /* ────────────────────────────────
     カラーパレット - テキスト
     ──────────────────────────────── */
  --color-text-main: #000000;            /* メインテキスト（黒） */
  --color-text-body: #000000;            /* 本文テキスト（濃いグレー） */
  --color-text-sub: rgba(0, 0, 0, 0.65); /* サブテキスト（半透明黒） */
  --color-text-muted: #aaa;              /* 控えめテキスト（薄いグレー） */
  --color-text-light: #666;              /* ライトテキスト（グレー） */
  --color-text-dark: #666;            /* ダークテキスト（濃いグレー） */ 
  --color-text-red: #D32F2F;            /* 赤色テキスト */
  
  /* ────────────────────────────────
     カラーパレット - アクセント
     ──────────────────────────────── */
  --color-accent-main: #735A54;          /* メインアクセント（RADOHREブラウン） */
  --color-accent-soft: #F0E8DF;          /* ソフトアクセント（ベージュ） */
  --color-accent-light: #33D37A;         /* ライトアクセント（明るい緑） */
  
  /* ────────────────────────────────
     カラーパレット - ボーダー
     ──────────────────────────────── */
  --color-border-main: #B1B1B1;              /* メインボーダー */
  --color-border-soft: rgba(0,0,0,0.18);     /* ソフトボーダー */
  --color-border-dark: rgba(0,0,0,0.3);      /* ダークボーダー */
  --color-border-light: #ccc;                /* ライトボーダー */
  --color-border-medium: #aaa;               /* ミディアムボーダー */
  
  /* ────────────────────────────────
     カラーパレット - ボタン
     ──────────────────────────────── */
  --color-btn-dark: #000000;                 /* ダークボタン背景 */
  --color-btn-dark-hover: #735A54;           /* ダークボタンホバー */
  --color-btn-line: #00B900;                 /* LINEボタン背景 */
  --color-btn-line-hover: #33D37A;           /* LINEボタンホバー */
  --color-btn-line-text: #ffffff;            /* LINEボタンテキスト */
  
  /* ────────────────────────────────
     フォントサイズ
     ──────────────────────────────── */
  --font-size-tiny: 0.65rem;         /* 極小サイズ（注釈用） */
  --font-size-small: 0.7rem;         /* 小サイズ（補足テキスト） */
  --font-size-medium: 0.8rem;        /* 中サイズ（本文） */
  --font-size-base: 1rem;            /* 基本サイズ */
  --font-size-large: 1.2rem;         /* 大サイズ（見出し） */
  --font-size-xlarge: 1.5rem;        /* 特大サイズ（タイトル） */
  --font-size-xxlarge: 1.75rem;      /* 超特大サイズ */
  
  /* ────────────────────────────────
     スペーシング（余白・間隔）
     ──────────────────────────────── */
  --spacing-xs: 5px;                 /* 極小 */
  --spacing-sm: 10px;                /* 小 */
  --spacing-md: 20px;                /* 中 */
  --spacing-lg: 30px;                /* 大 */
  --spacing-xl: 50px;                /* 特大 */
  
  /* ────────────────────────────────
     トランジション（アニメーション速度）
     ──────────────────────────────── */
  --transition-fast: 0.15s;          /* 高速（クイックホバー） */
  --transition-normal: 0.25s;        /* 通常（一般的なアニメーション） */
  --transition-slow: 0.35s;          /* 低速（ゆっくり見せる効果） */
  
  /* ────────────────────────────────
     その他
     ──────────────────────────────── */
  --border-radius-pill: 9999px;      /* 完全な丸型ボタン用 */
  --header-height: 60px;             /* ヘッダーの高さ */
  --shadow-default: 0 0 10px rgba(0,0,0,0.2);  /* デフォルトシャドウ */
  --shadow-button: 0 3px 10px rgba(0,0,0,0.18); /* ボタンシャドウ */
}


/* ============================================
   1. 共通ベース設定（リセット+フォント）
   ============================================ */

/* 全要素のマージン・パディングをリセット、box-sizingをborder-boxに統一 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* body要素の基本設定:フォントファミリー、行間、文字色 */
body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.8;
  color: var(--color-text-body);
}

/* スクロールバーを非表示にする(Webkit系ブラウザ) */
body::-webkit-scrollbar {
  display: none;
}

/* 画像の基本設定:最大幅100%、高さ自動、ブロック要素化 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リンクの基本設定:色を継承、下線なし */
a {
  color: inherit;
  text-decoration: none;
}

/* ボタンの基本設定:枠線なし、背景なし、カーソルポインター */
button {
  border: none;
  background: none;
  cursor: pointer;
}

/* ============================================
   2. 汎用フォントユーティリティ
   ============================================ */

/* 小さめの説明文 - グレー色、左マージン付き */
.letterfont {
  font-size: clamp(0.68em, calc(0.175em + 0.625vw), 0.875em);
  line-height: 1.3;
  margin-left: var(--spacing-sm);
  font-weight: 400;
  color: var(--color-text-main);
  text-decoration: none;
}

/* ボタンなど強調テキスト用 */
.buttonfont {
  font-size: clamp(0.815em, calc(0.175em + 0.625vw), 0.875em);
  line-height: 1.6;
}

/* 細字スタイル */
.thinfont {
  font-size: clamp(0.815em, calc(0.175em + 0.625vw), 0.875em);
  line-height: 1.6;
  font-weight: 100;
}

/* 太字スタイル */
.textbold {
  font-weight: 700;
}

/* セクションの見出し */
.section-heading {
  width: 100%; 
  margin: 0 auto;
  text-align: center;
  font-weight: 700;
  font-size: var(--font-size-xxlarge);
  border-bottom: 1px solid var(--color-text-light);
  padding: 0 0 var(--spacing-sm) 0;
}

/* 注意書き */
.note-small {
  font-size: var(--font-size-tiny);
  font-weight: 400;
  line-height: 1.3;
}

/* 色付きバー */
.title-icon {
  display: inline-block;
  width: 8px;
  height: 1.0em;    
  margin: auto 8px auto 0;
  background: var(--color-accent-main);
  flex-shrink: 0;
}

/* ============================================
   3. PCヘッダー
   ============================================ */

/* SPヘッダーとSPナビはPC表示では非表示 */
.sp-header,
#sp-nav {
  display: none;
}

/* 固定ヘッダー本体 - ベージュ背景、上部固定、影付き */
.header {
  background: var(--color-bg-beige);
  height: var(--header-height);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: var(--shadow-default);
}

/* ヘッダー:ロゴ+メニューの横並び配置 */
.site-header__wrapper {
  height: var(--header-height);
  padding: 0 var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================================
   4. グローバルナビ（1段目）
   ============================================ */

/* ナビゲーションメニューのリスト - 横並び配置 */
.nav__wrapper {
  list-style: none;
  display: flex;
  height: var(--header-height);
  margin: 0 3px;
}

/* 各メニュー項目 - 縦並び(日本語→英語)、中央揃え */
.nav__item {
  position: relative;
  height: var(--header-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* STAY・BBQ 等、幅固定のメニュー項目 */
.nav__item.stay,
.nav__item.bbq {
  width: 96px;
  transform: scaleX(0.95);
}

/* その他メニュー項目:左右パディングで調整 */
.nav__item:not(.stay):not(.bbq) {
  padding: 0 12px;
}

/* 日本語ラベル(小文字) */
.nav-jp,
.nav-jp-1 {
  text-align: center;
  margin: 5px 0 0;
  font-size: 0.57rem;
  font-weight: 500;
}

/* 長体(細長スタイル)の日本語ラベル */
.nav-jp-1 {
  transform: scaleX(0.95);
}

/* 英語ラベル(メイン文字) */
.nav__item > a,
.nav-list-p-1,
.nav-list-p-2 {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--color-text-main);
  white-space: nowrap;
  padding: 0 4px;
  margin-bottom: 4px;
  text-decoration: none;
}

/* メニュー項目の下線(ホバー時に表示) - li 全幅 */
.nav__wrapper > li.nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 1px;
  background-color: var(--color-text-main);
  opacity: 0;
  transition: var(--transition-fast);
}

/* ホバー時に下線を表示 */
.nav__wrapper > li.nav__item:hover::after {
  opacity: 1;
}

/* ホバー時の文字色変更 */
.nav__item:hover > * {
  color: var(--color-text-muted) !important;
}

/* ============================================
   5. グローバルナビ（2段目ドロップダウン）
   ============================================ */

/* ドロップダウンメニュー本体 - 初期状態では非表示 */
.nav__wrapper_second {
  list-style: none;
  position: absolute;
  top: 100%;
  width: 100%;
  background: var(--color-bg-beige);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
  z-index: 1000;
  text-align: center;
}

/* 親li ホバーで開く */
.nav__item:hover .nav__wrapper_second {
  opacity: 1;
  visibility: visible;
}

/* ドロップダウン内のリンク */
.nav__wrapper_second a {
  display: block;
  padding: 8px 0;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-main);
  text-decoration: none;
  position: relative;
}

/* ドロップダウン内リンクの下線(ホバー時のみ) */
.nav__wrapper_second a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-text-main);
  opacity: 0;
}

/* ホバー時に下線を表示 */
.nav__wrapper_second a:hover::after {
  opacity: 1;
}

/* ホバー時の背景反転効果 */
.nav__wrapper_second a:hover {
  color: var(--color-text-muted);
  background: var(--color-bg-main);
}

/* ============================================
   6. ヘッダー右上ボタン（予約・LINE）
   ============================================ */

/* ボタンエリアの配置 - 右揃え、横並び */
#hr-button-area {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-md);
  padding-right: 0px;
}

/* 汎用ボタンスタイル - カプセル型 */
.hr-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-pill);
  font-weight: 600;
  transition: var(--transition-normal);
  text-decoration: none;
}

/* カプセル型サイズ */
.imglike {
  min-height: 30px;
  min-width: 160px;
  padding: 0 var(--spacing-sm) 2px;
  font-size: var(--font-size-medium);
}

/* 黒ボタン(予約用) */
.hr-primary {
  background: var(--color-btn-dark);
  color: var(--color-bg-main);
  min-width: 130px;
}

/* 黒ボタンホバー時 - ブラウン系に変化、上に浮く */
.hr-primary:hover {
  background: var(--color-btn-dark-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-button);
}

/* LINEボタン - 緑背景 */
.hr-line {
  background: var(--color-btn-line);
  color: var(--color-bg-main);
}

/* LINEボタンホバー時 - 明るい緑に変化、上に浮く */
.hr-line:hover {
  background: var(--color-btn-line-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-button);
}

/* キーボードフォーカス時のアウトライン表示 */
.hr-button:focus-visible {
  outline: 2px solid var(--color-text-main);
  outline-offset: 2px;
}

.hr-button:focus-visible {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* ============================================
   7. トップへ戻るボタン（PC版）
   ============================================ */

/* トップへ戻るボタン全体 - SP版と同じスタイル */
#page-top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
  text-decoration: none;
  background: var(--color-bg-main);
}

/* "TOPへ戻る"テキスト */
.page-p {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-text-main);
}

/* 上向き矢印の配置用コンテナ */
.page-flow {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin-bottom: 8px;
}

/* 上向き三角形(黒) */
.triangle-1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 var(--spacing-md) 15px var(--spacing-md);
  border-color: transparent transparent var(--color-text-main) transparent;
}

/* 上向き三角形(白・内側) */
.triangle-2 {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 var(--spacing-md) 15px var(--spacing-md);
  border-color: transparent transparent var(--color-bg-main) transparent;
}

/* トップへ戻るボタンホバー時 - 半透明化 */
#page-top:hover {
  opacity: 0.7;
}


/* ============================================
   8. フッター
   ============================================ */

/* フッター全体 */
footer {
  width: 100%;
  background: var(--color-bg-beige);
}

/* フッター上部エリア（ボタン＋リンク） */
#upper-link {
  background: var(--color-bg-beige);
  padding: 0px auto;
}

/* フッターリンクブロック全体 */
#footer-link-block {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* フッターリンク内側コンテナ - 左右配置 */
.footer-link-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 80px;
  margin: 50px 0px 0px 40px; 
}

/* フッター左側（ボタンエリア） */
.footer-link-left {
  display: block;
  flex: 0 0 300px;
}

/* ボタン縦並びエリア - 左側配置 */
.footer-btn-area {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 黒ボタン(予約用) - 角丸、縦並び中央配置 */
.ft-footer-black {
  width: 100%;
  height: 80px;
  background: var(--color-text-main);
  color: var(--color-bg-main);
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.3s;
}

/* 黒ボタンホバー時 - ブラウン系に変化、上に浮く、影追加 */
.ft-footer-black:hover {
  background: var(--color-accent-main);
  transform: translateY(-1px);
  box-shadow: 0 3px var(--spacing-sm) rgba(0,0,0,0.16);
}

/* ボタン内メインテキスト */
.ft-btn-main {
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0px auto;
  letter-spacing: 0.15rem;
}

/* ボタン内サブテキスト */
.ft-btn-sub {
  font-size: 0.72rem;
  margin: 0px auto;
}

/* LINEボタン - 緑背景、横並び配置 */
.ft-line-button {
  width: 100%;
  height: 80px;
  line-height: var(--font-size-xlarge);
  background: var(--color-btn-line);
  border-radius: 12px;
  color: var(--color-bg-main);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  text-decoration: none;
}

/* LINEボタン左側テキストエリア */
.ft-line-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing-md);
  font-size: var(--font-size-large);
  font-weight: 700;
}

/* LINEボタン右側の白いカプセル */
.ft-line-pill {
  width: 43%;
  font-weight: 700;
  height: 55%;
  margin-right: var(--spacing-md);
  background: var(--color-bg-main);
  color: var(--color-btn-line);
  border-radius: var(--border-radius-pill);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* LINEボタンホバー時のオーバーレイ効果 */
.ft-line-button:hover::after {
  background: rgba(255,255,255,0.25);
}

/* LINEボタンのオーバーレイレイヤー(疑似要素) */
.ft-line-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: 0.3s;
}

/* ============================================
   ▪ フッターリンク（3カラムレイアウト）
   ============================================ */

/* フッターリンク右側（3カラムグリッド） */
.footer-link-right {
  flex: 1;
 max-width: 650px;
}

/* フッターのカテゴリ列(3列) - グリッドレイアウト */
.footer-link-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg) var(--spacing-lg);
  width: 100%;
}

/* 各カテゴリ列 */
.footer-link-col {
  margin-top: -17px;
}

/* カテゴリタイトル(日本語+英語) - ベースライン揃え */
.footer-link-title {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 15px 0px 2px ;
  color: var(--color-text-main);
}

/* カテゴリタイトルの英語部分 */
.footer-link-title-en {
  font-size: 0.55rem;
  font-weight: 400;
  color: var(--color-text-light);
  text-transform: uppercase;
}

/* リンク項目のリスト */
.footer-link-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* リンク項目 */
.footer-link-col li {
  width: 100%;
  font-weight: 400;
  padding: 0px;
  margin: 2px 0;
  line-height: 0.9;
}

/* リンク項目の前の「ー」 */
.footer-link-col li::before {
  content: "ー ";
  color: var(--color-text-light);
  font-weight: 300;
}

/* リンク項目のテキスト - グレー色 */
.footer-link-col ul li a {
  font-size: var(--font-size-small);
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}

/* リンク項目ホバー時 - ブラウン色に変化 */
.footer-link-col ul li a:hover {
  color: var(--color-accent-main);
}

/* カテゴリタイトル内のリンク（日本語部分）- 黒色 - より詳細度を高く */
.footer-link-col .footer-link-title a {
  color: var(--color-text-main) !important;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}

.footer-link-col .footer-link-title a:hover {
  color: var(--color-accent-main) !important;
}

/* ============================================
   ▪ 他サイトバナー
   ============================================ */
/* 他サイトのバナー */
#upper-link { margin: 0px auto;  max-width: 100%; }

/* 他サイトバナーエリア - 横並び */
#lower_link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin: 50px auto var(--spacing-lg);
  padding: 0px;
}

/* 各バナー項目 - 表示 */
.another-site {
  flex: 0 0 auto;
  max-width: 2var(--spacing-md);
  height: auto;
}

/* バナー画像 */
.another-site img {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

/* バナー画像ホバー時 - 半透明化 */
.another-site img:hover {
  opacity: 0.7;
}

/* ============================================
   ▪ コピーライトエリア
   ============================================ */

/* コピーライトエリア全体 - 左右配置 */
#logocl {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) 40px;
  background: var(--color-bg-main);
}

/* ロゴ画像 - 左寄せ */
#logocl img {
  max-width: 100px;
  max-width: 1var(--spacing-md);
  margin: 0;
}

/* コピーライトテキスト - 右寄せ */
#logocl p {
  font-size: var(--font-size-tiny);
  font-weight: 400;
  letter-spacing: 0.05rem;
  text-align: right;
  margin: 0;
  color: var(--color-text-main);
}

/* ============================================
   ▪ レスポンシブ(ヘッダー 1100px以下)
   ============================================ */
@media screen and (max-width: 1100px) {
  /* ボタン間隔を狭める */
  #hr-button-area { gap: 15px; }
  /* ボタンサイズを小さくする */
  .imglike { min-width: 140px; }
  .hr-primary { min-width: 1var(--spacing-sm); }
}

/* ============================================
   ▪ レスポンシブ(SPヘッダー&SPナビ 1000px以下)
   ============================================ */
@media (max-width: 950px) {

  /* PCヘッダーを非表示 */
  .site-header__wrapper { display: none; }

  /* メニュー表示中は背景のスクロールを停止 */
  body.menu-open { overflow: hidden; }

  /* SPヘッダー(ロゴ+ハンバーガー) */
  /* スマホ用ヘッダー - 上部固定、半透明ベージュ背景 */
  .sp-header {
    display: flex;
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-height);
    padding: 0 var(--spacing-md);
    align-items: center;
    justify-content: space-between;
    background: rgba(240,232,223,.95);
    z-index: 1002;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  /* ロゴエリア - 横並び配置 */
  .sp-logo { display: flex; align-items: center; }

  /* ロゴ画像 - 高さ34px */
  .sp-logo-img { height: 34px; width: auto; }

  /* ハンバーガーボタン  */
  /* ハンバーガーボタン - 3本の横線 */
  #hamburger {
    width: var(--spacing-lg);
    height: var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1003;
  }

  /* ハンバーガーの各バー - 黒色 */
  #hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-text-main);
    transition: all 0.3s ease;
  }

  /* メニュー開いた時は黒い× */
  #hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background: var(--color-text-main);
  }

  #hamburger.active span:nth-child(2) { opacity: 0; }

  #hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background: var(--color-text-main);
  }

  /* SPナビ(全画面オーバーレイメニュー)  */
  /* SPナビ本体 - 全画面、暗い半透明背景、中央配置 */
  #sp-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1001;
    overflow-y: auto;
    padding: 100px var(--spacing-lg) 150px;
  }

  /* メニュー表示状態 */
  #sp-nav.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ============================================
     ▪ 閉じるボタン(白い×) 
     ============================================ */

  /* 閉じるボタンを右上に配置 */
  #sp-close {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1003;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 白い×の2本の線 */
  #sp-close span {
    position: absolute;
    display: block;
    width: var(--spacing-lg);
    height: 2px;
    background: var(--color-bg-main);
    transition: opacity .2s ease;
  }

  #sp-close span:nth-child(1) {
    transform: rotate(45deg);
  }

  #sp-close span:nth-child(2) {
    transform: rotate(-45deg);
  }

  #sp-close:hover span {
    opacity: 0.7;
  }

  /* ============================================
     ▪ SPナビメニューリスト - 中央揃え
     ============================================ */

  /* メニューリスト全体 - 中央配置、縦並び */
  .sp-nav-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 400px;
    width: 100%;
  }

  /* 各リスト項目 */
  .sp-nav-list > li {
    width: 100%;
    text-align: center;
    border-bottom: solid 1px var(--color-bg-main);
  }

  /* 通常リンク項目 - 白文字、中央揃え */
  .sp-nav-list > li > a {
    display: block;
    color: var(--color-bg-main);
    font-size: var(--font-size-base);
    font-weight: 400;
    letter-spacing: .12em;
    padding: 12px 0;
    transition: opacity .2s ease;
  }

  .sp-nav-list > li > a:hover {
    opacity: 0.7;
  }

  /* ドロップダウンメニュー(サブメニュー) */
  /* ドロップダウン親ボタン - 白文字、中央揃え */
  .sp-nav-toggle {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    color: var(--color-bg-main);
    font-size: var(--font-size-base);
    font-weight: 400;
    letter-spacing: .12em;
    padding: 12px 0;
    transition: opacity .2s ease;
  }

  .sp-nav-toggle:hover {
    opacity: 0.7;
  }

  /* 矢印アイコン - 白色、下向き */
  .sp-nav-toggle .arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-bg-main);
    border-bottom: 2px solid var(--color-bg-main);
    transform: rotate(45deg);
    transition: transform .25s ease;
  }

  /* ドロップダウン開いた時の矢印 - 上向きに回転 */
  .has-sub.open .arrow {
    transform: rotate(-135deg);
  }

  /* サブメニューリスト - 初期状態では非表示、中央配置 */
  .sp-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    text-align: center;
    gap: 0;
  }

  /* ドロップダウン開いた時にサブメニューを表示 */
  .has-sub.open .sp-submenu {
    display: flex;
    flex-direction: column;
  }

  /* サブメニューのリンク - やや小さめ、白背景に黒文字 */
  .sp-submenu a {
    display: block;
    font-size: var(--font-size-medium);
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--color-text-main);
    padding: var(--spacing-sm) 0;
    transition: background-color .2s ease;
    background-color: var(--color-bg-main);
  }

  .sp-submenu a:hover {
    color: var(--color-text-main);
    background-color: #ddd;
  }

  /* ============================================
     ▪ 下部固定CTA(予約・LINEボタン) 
     ============================================ */

  /* 下部固定エリア - 画面下部、左右var(--spacing-lg)余白 */
  .sp-nav-footer {
    position: fixed;
    left: var(--spacing-lg);
    right: var(--spacing-lg);
    bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 1002;
  }

  /* ボタン共通スタイル - カプセル型、中央配置 */
  .sp-nav-btn {
    height: 52px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 0.75rem;
    transition: opacity .2s ease;
  }

  .sp-nav-btn:hover {
    opacity: 0.85;
  }

  /* 予約ボタン - 白背景、黒文字 */
  .sp-nav-reserve {
    background: var(--color-bg-main);
    color: var(--color-text-main);
  }

  /* LINEボタン - 緑ベタ塗り、白文字 */
  .sp-nav-line {
    background: var(--color-btn-line);
    color: var(--color-bg-main);
  }
}

/* ============================================
   ▪ タブレット版フッターレイアウト（841px〜415px）
   - PCとSPの中間デザイン
   ============================================ */
@media (max-width: 840px) and (min-width: 416px) {

  /* フッターリンクエリア */
  #upper-link {
    background: var(--color-bg-beige);
    padding: var(--spacing-lg) var(--spacing-lg) 0px;
  }

  #footer-link-block {
    margin: 0 auto;
    max-width: 750px;
  }

  .footer-link-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    gap: var(--spacing-sm);
  }

/* フッター左側（ボタンエリア） */
.footer-link-left {
  display: block;
  margin: 0 auto;
  flex: 0px;
}

/* ボタン縦並びエリア - 左側配置 */
.footer-btn-area {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 黒ボタン(予約用) - 角丸、縦並び中央配置 */
.ft-footer-black {
  width: 100%;
  height: 80px;
  background: var(--color-text-main);
  color: var(--color-bg-main);
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.3s;
}

/* 黒ボタンホバー時 - ブラウン系に変化、上に浮く、影追加 */
.ft-footer-black:hover {
  background: var(--color-accent-main);
  transform: translateY(-1px);
  box-shadow: 0 3px var(--spacing-sm) rgba(0,0,0,0.16);
}

/* ボタン内メインテキスト */
.ft-btn-main {
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0px auto;
  letter-spacing: 0.15rem;
}

/* ボタン内サブテキスト */
.ft-btn-sub {
  font-size: 0.72rem;
  margin: 0px auto;
}

/* LINEボタン - 緑背景、横並び配置 */
.ft-line-button {
  width: 100%;
  height: 80px;
  line-height: var(--font-size-xlarge);
  background: var(--color-btn-line);
  border-radius: 12px;
  color: var(--color-bg-main);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  text-decoration: none;
}

/* LINEボタン左側テキストエリア */
.ft-line-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing-md);
  font-size: var(--font-size-large);
  font-weight: 700;
}

/* LINEボタン右側の白いカプセル */
.ft-line-pill {
  width: 43%;
  font-weight: 700;
  height: 55%;
  margin-right: var(--spacing-md);
  background: var(--color-bg-main);
  color: var(--color-btn-line);
  border-radius: var(--border-radius-pill);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* LINEボタンホバー時のオーバーレイ効果 */
.ft-line-button:hover::after {
  background: rgba(255,255,255,0.25);
}

/* LINEボタンのオーバーレイレイヤー(疑似要素) */
.ft-line-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: 0.3s;
}
 

  /* フッターリンク右側 - タブレット版（2列レイアウト） */
  .footer-link-right {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
  }

  .footer-link-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md) 40px;
    width: 100%;
  }

  .footer-link-col {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .footer-link-title {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    margin: var(--spacing-sm) 0 5px;
    color: var(--color-text-main);
  }

  .footer-link-title-en {
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--color-text-light);
  }

  .footer-link-col ul {
    list-style: none;
    padding-left: 0;
    margin-top: 5px;
    margin-bottom: 0;
  }

  .footer-link-col li {
    width: 100%;
    padding-left: 15px;
    margin-top: 2px;
    line-height: 1.6;
    font-size: 0.75rem;
  }

  .footer-link-col li::before {
    content: "ー ";
    color: var(--color-text-light);
    font-weight: 300;
  }

  .footer-link-col ul li a {
    font-size: 0.75rem;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-fast) ease;
  }

  .footer-link-col ul li a:hover {
    color: var(--color-accent-main);
  }

  .footer-link-col .footer-link-title a {
    color: var(--color-text-main) !important;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-fast) ease;
  }

  .footer-link-col .footer-link-title a:hover {
    color: var(--color-accent-main) !important;
  }

  /* 他サイトバナー - タブレット版（2列×2行または横並び） */
  #lower_link {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin: 35px auto var(--spacing-lg);
    padding: 0 var(--spacing-lg);
  }

  .another-site {
    flex: 0 1 auto;
    max-width: 200px;
    width: calc(50% - 15px);
    min-width: 1var(--header-height);
    margin: 0;
  }

  .another-site img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
  }

  .another-site img:hover {
    opacity: 0.7;
  }

  /* コピーライトエリア - タブレット版 */
  #logocl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 15px var(--spacing-lg);
    background: var(--color-bg-main);
  }

  #logocl img {
    max-width: 1var(--spacing-sm);
    margin: 0;
  }

  #logocl p {
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
    text-align: right;
    margin: 0;
    color: var(--color-text-main);
  }
}

/* ============================================
   ▪ SP版フッターレイアウト（415px以下）
   - 完全なスマートフォン向けレイアウト
   ============================================ */
@media (max-width: 415px) {

  /* TOPへ戻るボタン - SP版 */
  #page-top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
    text-decoration: none;
    background: var(--color-bg-main);
  }

  /* 上向き三角形 - SP版 */
  .page-flow {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 8px;
  }

  .triangle-1 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--spacing-md) 15px var(--spacing-md);
    border-color: transparent transparent var(--color-text-main) transparent;
  }

  .triangle-2 {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--spacing-md) 15px var(--spacing-md);
    border-color: transparent transparent var(--color-bg-main) transparent;
  }

  /* "TOPへ戻る"テキスト - SP版 */
  .page-p {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--color-text-main);
  }

  /* フッター全体の背景色調整 - SP版 */
  footer {
    background: var(--color-bg-beige);
  }

  /* フッターリンクエリア - SP版 */
  #upper-link {
    background: var(--color-bg-beige);
    padding: var(--spacing-lg) var(--spacing-md) 0px;
  }

  #footer-link-block {
    margin: 0 auto;
    max-width: 100%;
  }

  .footer-link-inner {
    display: block;
	width: 100%;
	margin: 0 auto;
  }

  /* フッターボタンエリア - SP版（中央配置を維持） */
  .footer-link-left {
    display: block;
    margin: 0 auto;
    width: 100%;
  }

  .footer-btn-area {
	max-width: 310px;
    width: 100%;
	margin: 0px auto var(--spacing-sm);
	padding: 0px var(--spacing-md);
	gap: 12px;
  }

  /* 黒ボタン（予約） - SP版 */
  .ft-footer-black {
    height: var(--header-height);
    border-radius: 8px;
  }

  .ft-btn-main {
    font-size: 1.var(--font-size-base);
  }

  .ft-btn-sub {
    font-size: var(--font-size-tiny);
  }
	
/* LINEボタン - SP版 */
  .ft-line-button {
    height: var(--header-height);
    border-radius: 8px;
    justify-content: space-around;
    padding: 0 3px;
  }

  .ft-line-left {
    font-size: var(--font-size-base);
    flex: 0 0 auto;
	line-height: 1.3;
  }

  .ft-line-pill {
    font-size: 0.85rem;
    padding: 8px 15px;
    flex: 0 0 auto;
  }

/* フッターリンク右側 - SP版（1列縦並びレイアウト） */
  .footer-link-right {
    margin: 0 auto;
    width: 100%;
	max-width: 300px;
	padding-left: 60px;
  }

  .footer-link-columns {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0px;
    align-items: flex-start;
  }

  .footer-link-col {
    margin: 0;
	padding: 0;
    width: 100%;
  }

  .footer-link-title {
    font-size: var(--font-size-medium);
    font-weight: 700;
    margin: 0px;
	padding-top: 5px;
    color: var(--color-text-main);
  }

  .footer-link-title-en {
    font-size: 0.55rem;
    font-weight: 400;
    color: var(--color-text-light);
  }

  .footer-link-col ul {
    padding-left: 0;
    margin-top: 4px;
    margin-bottom: 0;
  }

  .footer-link-col li {
    width: 100%;
    padding-left: 15px;
    margin-top: 0px;
    line-height: 1.6;
    font-size: var(--font-size-small);  
  }

  .footer-link-col li::before {
    content: "ー ";
    color: var(--color-text-light); 
	font-weight: 300;
  }

  /* リンク項目のテキスト - グレー色 */
  .footer-link-col ul li a {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
  }

  .footer-link-col ul li a:hover {
    color: var(--color-accent-main);
  }

  /* カテゴリタイトル内のリンク（日本語部分）- 黒色 - より詳細度を高く */
  .footer-link-col .footer-link-title a {
    color: var(--color-text-main) !important;
    font-size: var(--font-size-medium);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-fast) ease;
  }

  .footer-link-col .footer-link-title a:hover {
    color: var(--color-accent-main) !important;
  }

	
 /* 他サイトバナー - SP版（横並び・折り返し） */
  #lower_link {  
	justify-content: space-evenly;  
	margin: 20px 0 30px;            
    padding: 0 30px;               
    width: 100%;                  
    box-sizing: border-box;      
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .another-site {
    flex: 0 1 auto;
    max-width: 170px;
    width: calc(50% - var(--spacing-sm));
    margin: 0;
  }

  /* コピーライトエリア - SP版 */
  #logocl {
    flex-direction: column;
    padding: 15px;
    gap: 5px;
	background: var(--color-bg-main);
  }

  #logocl img {
    margin: 0 auto;
  }

  #logocl p {
    font-size: 0.6rem;
	font-weight: 400;
    text-align: center;
    margin: 0 auto;
  }
}


/* ============================================
   END OF FILE
   ============================================ */