/* =========================
   全体の基本設定
========================= */
body {
  font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #eee !important;
  background-color: #131f33;
  background-image: none;
}

/* =========================
   ヘッダー
========================= */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.8rem 1.2rem;
  background: linear-gradient(90deg, #0d2755, #28529e);
  color: #eee;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-sizing: border-box;
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  border-bottom: 3px solid #f68b1e;
}

header h1 {
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif !important;
  font-size: 1.6rem !important;
  color: #eee !important;
  margin: 0 !important;
  font-weight: bold !important;
}

header h1 a {
  color: inherit;
  text-decoration: none;
}

/* =========================
   ナビ（共通）
========================= */
#nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* PCでは横並び */
}
#nav-menu ul li { position: relative; }

#nav-menu ul li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease;
  font-weight: bold;
}
#nav-menu ul li a:hover,
#nav-menu ul li a:focus,
#nav-menu ul li a.active {
  background-color: #1e90ff;
  color: #fff;
}

/* サブメニュー（ベースは非表示） */
#nav-menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 150px;
  border: 1px solid #ccc;
  z-index: 10;
}
#nav-menu .submenu li a {
  color: #000;
  padding: 8px 12px;
  font-size: 13px;
}
#nav-menu .submenu li a:hover { background: #1e90ff; }

/* PC: hoverで表示（#nav-menuにスコープ） */
@media (min-width: 768px) {
  #menu-toggle { display: none; }
  #nav-menu { display: block !important; width: auto; margin-top: 0; }
  #nav-menu ul { flex-direction: row; justify-content: flex-end; gap: 1rem; }
  header { flex-direction: row; align-items: center; }

  #nav-menu ul li:hover > .submenu { display: block; }
}

/* =========================
   モバイル（≤767px）
   — nav本体は固定、#nav-menu.open > ul で開閉 —
========================= */
@media (max-width: 767px) {
  header { flex-direction: column; align-items: flex-start; }

  /* ハンバーガー */
  #menu-toggle {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    background: #333;
    color: #fff;
    padding: 10px 15px;
    border: none;
    font-size: 20px;
    cursor: pointer;
    margin-left: auto;
    transition: transform .2s ease, color .2s ease;
    color: #e03e2f; /* 閉：赤 */
  }
  #menu-toggle.is-open {
    color: #f68b1e;          /* 開：オレンジ */
    transform: rotate(90deg);/* 開いた時の回転 */
  }

  /* 過去の nav{display:none} などを無効化して固定配置へ */
  #nav-menu {
    position: static !important;
    display: block !important;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
  }

  /* 最上位ULのみ開閉（直下 > が重要） */
  #nav-menu > ul {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0;
  }
  #nav-menu.open > ul { display: flex; }

  #nav-menu ul li {
    width: 100%;
    list-style: none;
    border-bottom: 1px solid #333;
  }
  #nav-menu ul li a {
    display: block;
    padding: 0.75rem 1rem;
    color: #eee;
    text-decoration: none;
    position: relative;
    border-radius: 4px;
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;
  }
  #nav-menu ul li a:hover,
  #nav-menu ul li a:focus {
    background: linear-gradient(90deg, #e03e2f, #f68b1e);
    color: #fff;
    box-shadow: 0 0 8px #f68b1e;
    text-shadow: 0 0 4px #e03e2f;
  }

  /* 入れ子UL（サブメニューUL）はデフォで非表示に固定 */
  #nav-menu ul ul { display: none !important; }

  /* サブメニューは縦積み。open時だけ表示 */
  #nav-menu .submenu { position: static; width: 100%; box-sizing: border-box; }
  #nav-menu .submenu.open { display: block !important; }

  .has-submenu > a { cursor: pointer; }

  /* ヘッダー内の他要素 */
  #cart-toggle { align-self: flex-end; margin-top: 0.5rem; width: 100%; }
  #nav-menu ul { gap: 0.5rem; }
}

/* =========================
   カートボタン等（既存の見た目維持）
========================= */
#cart-toggle {
  background: linear-gradient(to right, #ff7e00, #ff3d00);
  color: white;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s;
  font-size: 0.8rem;
  white-space: nowrap;
  max-width: 160px;
}
#cart-toggle:hover {
  background: linear-gradient(to right, #ff9900, #ff5722);
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(255, 87, 34, 0.5);
}
@media (min-width: 768px) {
  #cart-toggle { font-size: 0.9rem; padding: 0.4rem 1rem; }
}

/* =========================
   セクション・ヒーロー・フッター（既存）
========================= */
section {
  padding: 4rem 2rem;
  border-bottom: 1px solid #eee;
  max-width: 960px;
  margin: 0 auto;
}
section h2 {
  position: relative;
  font-size: 2rem;
  font-weight: 800;
  color: #e03e2f;
  margin-bottom: 1rem;
}
section h2::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%) rotate(-15deg);
  width: 10px;
  height: 40px;
  background-color: #f68b1e;
  border-radius: 2px;
}

#hero {
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('https://source.unsplash.com/1600x600/?racecar') no-repeat center/cover;
  color: #fff;
  text-align: center;
  padding: 6rem 2rem;
  text-shadow: 2px 4px 10px rgba(0,0,0,0.7);
}
#hero h2 {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 3px;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, #e03e2f 0%, #f68b1e 40%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#hero p { font-size: 1.3rem; font-weight: 600; color: #ddd; }

footer {
  background-color: #131f33;
  color: #666;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

/* モバイルのセクション縮小 */
@media screen and (max-width: 768px) {
  section { padding: 2rem 1rem; }
  #hero { padding: 3rem 1rem; }
  #hero h2 { font-size: 1.8rem; }
  #hero p { font-size: 1rem; }
}

/* =========================
   ボタン類（既存の見た目維持）
========================= */
.btn-primary {
  background: linear-gradient(to right, #ff7e00, #ff3d00);
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(to right, #ff9900, #ff5722);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 87, 34, 0.5);
  outline: none;
}

/* 追加ボタン系（既存） */
.add-to-cart {
  background: linear-gradient(45deg, #ff7e00, #ffae00);
  color: white;
  transition: background 0.3s ease;
  box-shadow: 0 4px 8px rgba(255, 140, 0, 0.5);
  min-height: 40px;
  padding: 0 1.2rem;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0; border: none; border-radius: 10px;
}
.add-to-cart:hover {
  background: linear-gradient(45deg, #ffae00, #ff7e00);
  box-shadow: 0 6px 12px rgba(255, 165, 0, 0.7);
}
.cart-button {
  background: linear-gradient(to right, #ff7e00, #ff3d00);
  color: white; border: none; padding: 0.6rem 1rem;
  border-radius: 10px; font-weight: bold; cursor: pointer; font-size: 1rem;
  transition: transform 0.2s, box-shadow 0.3s; box-shadow: 0 4px 8px rgba(255, 87, 34, 0.4);
  display: flex; align-items: center; gap: 0.5rem;
}
.cart-button:hover { transform: scale(1.05); box-shadow: 0 6px 12px rgba(255, 87, 34, 0.6); }

/* リップル（既存） */
.btn-ripple {
  position: relative; overflow: hidden; display: inline-block;
  padding: 0.8em 2em; font-size: 1.1rem; font-weight: 700;
  color: #fff; background: linear-gradient(90deg, #e03e2f, #f68b1e);
  border: none; border-radius: 30px; cursor: pointer; user-select: none;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(224,62,47,0.6);
}
.btn-ripple:hover, .btn-ripple:focus { box-shadow: 0 6px 20px rgba(246,139,30,0.9); transform: scale(1.05); outline: none; }
.btn-ripple .ripple {
  position: absolute; border-radius: 50%; background-color: rgba(255,255,255,0.6);
  transform: scale(0); animation: ripple-effect 600ms linear; pointer-events: none; z-index: 10;
}
@keyframes ripple-effect { to { transform: scale(4); opacity: 0; } }

/* =========================
   商品カード・プラン等（既存）
========================= */
.product-list { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.product-card {
  background-color: #111; border: 2px solid #e03e2f; border-radius: 10px;
  padding: 1rem; width: 280px; text-align: center;
  box-shadow: 0 4px 12px rgba(224,62,47,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(246,139,30,0.8); }
.product-card img { width: 100%; border-radius: 6px; object-fit: cover; height: 180px; margin-bottom: 1rem; }
.product-card h3 { color: #e03e2f; font-weight: 800; margin-bottom: 0.5rem; }
.product-card .price { color: #f68b1e; font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; }
@media screen and (max-width: 768px) {
  .product-list { flex-direction: column; align-items: center; }
  .product-card { width: 90%; max-width: 320px; }
}

.plans-container { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.plan-card {
  background-color: #111; border: 2px solid #e03e2f; border-radius: 10px;
  padding: 1rem; width: 300px; box-shadow: 0 4px 12px rgba(224,62,47,0.5);
  text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: default;
}
.plan-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(246,139,30,0.8); }
.plan-card img { width: 100%; border-radius: 6px; object-fit: cover; height: 180px; margin-bottom: 1rem; }
.plan-card h3 { color: #e03e2f; font-weight: 800; margin-bottom: 0.5rem; }
.plan-card .price { color: #f68b1e; font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; }

/* 別バリエーション（既存） */
.plan-card { border-radius: 12px; padding: 1rem 1.5rem; box-shadow: 0 4px 12px rgba(246,139,30,0.4); color: #eee; }
.plan-card h3 { color: #f68b1e; margin-bottom: 0.5rem; font-size: 1.2rem; }
.plan-card .price { color: #e03e2f; font-weight: bold; margin-bottom: 0.5rem; }
.plan-card ul { padding-left: 1.2rem; margin: 0; }
.special-offers { margin-top: 3rem; background-color: #1a1a1a; padding: 1.5rem; border-left: 5px solid #e03e2f; border-radius: 10px; }
.special-offers h3 { color: #f68b1e; margin-top: 1rem; }
.special-offers ul { padding-left: 1.2rem; margin-bottom: 1rem; }
@media screen and (max-width: 768px) {
  .plans-container { flex-direction: column; align-items: center; }
  .plan-card { width: 90%; max-width: 320px; }
}

/* スポンサー */
.sponsor-logos { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1rem; padding: 1rem 0; }
.sponsor-logos img { max-height: 80px; max-width: 160px; object-fit: contain; filter: grayscale(100%); transition: filter 0.3s ease, transform 0.3s ease; }
.sponsor-logos img:hover { filter: grayscale(0%); transform: scale(1.05); }

/* =========================
   予約テーブル
========================= */
#reservationSection { overflow-x: auto; }
.styled-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.styled-table th, .styled-table td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; }
.styled-table th { background-color: #333; color: #fff; }

/* どの幅でも .submenu.open は必ず表示（他の display:none !important を打ち消す） */
#nav-menu .submenu.open { 
  display: block !important;
}

/* スマホ幅では縦積み（既存と同じ見え方を強制） */
@media (max-width: 767px) {
  /* 入れ子ULの常時表示を抑止（より強いセレクタで） */
  #nav-menu ul ul { 
    display: none !important;
  }
  /* open のときだけ表示（さらに強いセレクタで上書き） */
  #nav-menu .has-submenu > .submenu.open {
    display: block !important;
    position: static !important;
    width: 100%;
    box-sizing: border-box;
  }
}

/* PCでは hover ドロップダウン（既存維持） */
@media (min-width: 768px) {
  #nav-menu ul li:hover > .submenu { display: block; }
}
/* ==== スマホでもPC小画面と同じ動きにする最終パッチ ==== */

/* タッチ端末では :hover は効かないので、.open を表示トリガーにする */
@media (hover: none), (pointer: coarse) {
  #nav-menu .submenu {           /* 初期は非表示 */
    display: none;
    position: static;            /* 縦積み（PC小画面と同じ見た目）*/
    width: 100%;
    box-sizing: border-box;
  }
  #nav-menu .submenu.open {      /* JSで .open が付いたら表示 */
    display: block !important;
  }
}

/* PCマウス環境では従来通り hover で表示（小画面時の見え方に一致） */
@media (hover: hover) and (pointer: fine) {
  #nav-menu ul li:hover > .submenu {
    display: block;
  }
}

/* タップ対象を明示（見た目は変えない） */
.has-submenu > a { cursor: pointer; }
/* ==== NAV 最終最終パッチ（必ず style.css の最後） ==== */

/* 基本：サブメニューは閉じておく（スコープを #nav-menu に限定） */
#nav-menu .has-submenu > .submenu {
  display: none;
}

/* 「.open」になったサブメニューは必ず表示（他の display:none !important を打ち消す） */
#nav-menu .has-submenu > .submenu.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* PC（マウス環境）は従来どおり hover で表示 */
@media (hover: hover) and (pointer: fine) {
  #nav-menu ul li:hover > .submenu {
    display: block !important;
  }
}

/* スマホ（タッチ環境）：小画面と同じ“縦積みドロップダウン”に固定 */
@media (hover: none), (pointer: coarse) {
  /* nav 全体の古い position/absolute などの影響を無効化 */
  #nav-menu {
    position: static !important;
    display: block !important;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
  }

  /* 最上位ULはハンバーガー開閉で表示 */
  #nav-menu > ul {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0;
  }
  #nav-menu.open > ul {
    display: flex !important;
  }

  /* 入れ子ULのデフォは非表示（強い競合対策） */
  #nav-menu ul ul {
    display: none !important;
  }

  /* サブメニューは縦積みで表示（open のときだけ出す） */
  #nav-menu .has-submenu {
    position: static; /* 親も静的配置にして崩れ防止 */
  }
  #nav-menu .has-submenu > .submenu {
    position: static !important;
    width: 100%;
    box-sizing: border-box;
  }
  #nav-menu .has-submenu > .submenu.open {
    display: block !important;
  }

  /* タップ対象っぽさだけ付与（見た目はほぼ変わらない） */
  .has-submenu > a {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
/* モバイル時のサブメニューだけ少し下げ＆字下げ（PC影響なし） */
@media (max-width: 767px) {
  #nav-menu .has-submenu > .submenu {
    position: static;      /* 既存方針を維持 */
    margin-top: 2px;       /* 親リンクとの間隔をほんの少し */
  }
  #nav-menu .has-submenu > .submenu li a {
    padding-left: 1.25rem; /* 軽いインデントで階層が分かる */
  }
  /* 仕切り線を入れて“別行”感を出す（お好みで） */
  #nav-menu .has-submenu > .submenu li + li a {
    border-top: 1px solid #333;
  }
}
/* ===== FINAL: スマホでサブメニューが必ず開く／PCはhoverのまま ===== */

/* PC（マウス環境）: 従来どおり hover で表示 */
@media (hover: hover) and (pointer: fine) {
  #nav-menu ul li:hover > .submenu {
    display: block !important;
  }
}

/* スマホ（タッチ環境＆小画面）: .open で縦積み表示 */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  /* nav 本体は固定配置・ハンバーガーで最上位ULだけ開閉 */
  #nav-menu {
    position: static !important;
    display: block !important;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
  }
  #nav-menu > ul {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0;
  }
  #nav-menu.open > ul {
    display: flex !important;
  }

  /* サブメニューのデフォは閉じる（強制） */
  #nav-menu ul ul {
    display: none !important;
  }

  /* サブメニューは縦積み＆親リンクと重ならないように “下にズラす” */
  #nav-menu .has-submenu { position: static !important; }
  #nav-menu .has-submenu > .submenu {
    display: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;            /* ← 親「レッスン▼」と少し間を空ける */
  }
  #nav-menu .has-submenu > .submenu.open {
    display: block !important;  /* ← JSが .open を付けたら表示 */
  }

  /* 階層の見やすさ（見た目はほぼ変えず軽く字下げ） */
  #nav-menu .has-submenu > .submenu li a {
    padding-left: 1.25rem;
  }

  /* タップ対象を明示（見た目は変えない） */
  .has-submenu > a {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
/* ===== NAV 最終強制レイヤー（style.css の一番最後）===== */

/* PC（マウス環境）は従来どおり hover で表示 */
@media (hover: hover) and (pointer: fine) {
  #nav-menu ul li:hover > .submenu {
    display: block !important;
  }
}

/* スマホ（タッチ環境 or 小画面）は .open でのみ表示（hoverは無効化） */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  /* まず既存の hover 表示を打ち消す（ここが重要） */
  #nav-menu ul li:hover > .submenu {
    display: none !important;
  }

  /* nav は固定配置、最上位ULだけハンバーガーで開閉 */
  #nav-menu {
    position: static !important;
    display: block !important;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
  }
  #nav-menu > ul {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: .5rem;
    margin: 0;
    padding: .5rem 0;
  }
  #nav-menu.open > ul {
    display: flex !important;
  }

  /* 入れ子ULはデフォ隠す（競合対策で !important） */
  #nav-menu ul ul {
    display: none !important;
  }

  /* サブメニューは縦積み。open のときだけ表示 */
  #nav-menu .has-submenu { position: static !important; }
  #nav-menu .has-submenu > .submenu {
    display: none !important;
    position: static !important;   /* 親と重ならない（同じ位置に出ない） */
    top: auto !important;
    left: auto !important;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;               /* 親リンクとの間に少し余白 */
  }
  #nav-menu .has-submenu > .submenu.open {
    display: block !important;
  }

  /* 見た目はほぼそのまま、階層だけ少し分かるように */
  #nav-menu .has-submenu > .submenu li a { padding-left: 1.25rem; }
  .has-submenu > a { cursor: pointer; -webkit-tap-highlight-color: transparent; }
}
/* ==== 最終パッチ：スマホで hover を無効化し、.open を常に勝たせる ==== */

/* 1) PC(マウス)は従来通り hover 表示 */
@media (hover: hover) and (pointer: fine) {
  #nav-menu ul li:hover > .submenu {
    display: block !important;
  }
}

/* 2) スマホ/タブ(タッチ)と小画面では hover を確実に無効化 */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  /* どこかに残っている hover 表示を全面否定 */
  /* （強いセレクタ＋!important で潰します） */
  html body header nav#nav-menu ul li:hover > .submenu {
    display: none !important;
  }

  /* サブメニューは縦積み配置に固定（親と重ならない） */
  html body header nav#nav-menu .has-submenu { position: static !important; }
  html body header nav#nav-menu .has-submenu > .submenu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;           /* 親リンクとの被り防止の余白 */
    display: none !important;  /* 初期は閉じる */
  }

  /* 3) .open が付いたときだけ必ず表示（最強で上書き） */
  html body header nav#nav-menu .has-submenu > .submenu.open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  /* タップ対象感（見た目はほぼ変えない） */
  html body header nav#nav-menu .has-submenu > a {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}