@charset "UTF-8";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

#menuTableOuter {
  min-height: 300px !important;
}

/* ==================================
   スクロールでふわっと表示するアニメーション
================================== */

/* 初期状態：透明で、少し下に下げておく */
.fade-in-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 画面に入ったら付与される 表示＆元の位置へ */
.fade-in-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================
   ヘッダー
========================================== */
.header {
  background-color: rgba(255, 255, 255, 0.822);
  color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110px;
  /* PC版の高さ */
  font-size: 25px;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.header-logo {
  height: 110px;
  width: auto;
  display: block;
}

/* PC版の通常リンクはクリックできるように設定 */
.header .nav-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  line-height: 1.1;
}

.nav ul {
  display: flex;
  justify-content: space-evenly;
  gap: clamp(20px, 8vw, 120px);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* リンクカラー設定 */
.header a:link {
  color: rgb(7, 7, 7);
  text-decoration: none;
}

.header a:hover {
  color: rgba(48, 48, 48, 0.694);
  text-decoration: none;
}

.header a:active {
  color: rgb(48, 48, 48);
}

.header a:visited {
  color: rgb(7, 7, 7);
}

/* 基本の余白（PC基準） */
body {
  font-family: "Kiwi Maru", serif;
  background: #ffffff;
  padding-top: 130px;
  /* PCヘッダー分の余白 */
  color: #222;
}

/* ==========================================
   ドロップダウンメニュー
========================================== */
.nav-links>li {
  padding: 10px 0;
}

.dropdown-menu {
  position: fixed;
  top: 110px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(100% - 40px);
  max-width: 1000px;
  background-color: #ffffffc3;
  border-top: 3px solid #5a5a5a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 30px 40px;
  border-radius: 0 0 12px 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999;
}

.dropdown-menu ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.dropdown-menu ul li a {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.nav-links>li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.dropdown-group {
  flex: 1;
  text-align: left;
}

.dropdown-group h4 {
  font-size: 16px;
  color: #5a5a5a;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
}

.dropdown-group ul li {
  margin-bottom: 10px;
}

.dropdown-group ul li a {
  font-size: 17px;
  color: #444;
  font-weight: normal;
}

.dropdown-group ul li a:hover {
  color: #5a5a5a;
  text-decoration: underline;
}

/* 通常時はスマホ用ボタン・スマホロゴは隠す */
.hamburger-btn,
.sp-header-logo {
  display: none;
  z-index: 1 !important;
}

/* フォント指定 */
.great-vibes-regular {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
}

.kiwi-maru-regular {
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
}

.business-status-container {
  text-align: center;
  margin: 15px 0;
}

/* 営業の基本スタイル */
.status-badge {
  display: inline-block;
  padding: 6px 16px;
  font-weight: bold;
  font-size: 0.9rem;
  border-radius: 20px;
  color: #fff;
  margin-bottom: 5px;
}

/* 営業中の色（緑） */
.status-badge.open {
  background-color: #2e7d32;
}

/* 営業時間外・休業日の色（グレー/赤） */
.status-badge.closed {
  background-color: #757575;
}

/* お知らせ詳細カード */
.news-detail-card {
  max-width: 700px;
  margin: 40px auto;
  padding: 32px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.news-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.news-detail-title {
  font-size: 1.6rem;
  line-height: 1.4;
  color: #333;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.news-detail-body {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 32px;
  white-space: pre-wrap;
  /* 改行をそのまま反映させる */
}

/* 補足情報ボックス */
.news-meta-box {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 32px;
}

/* 戻るボタン */
.back-btn-wrap {
  text-align: center;
  margin-top: 24px;
}

/* ==========================================
自動スライド（縦横サイズ完全統一版）
========================================= */
.auto-slider {
  width: calc(100% - 40px);
  max-width: 1000px;
  /* 週間メニューの幅に合わせる */

  /* 全体の高さを「350px」に固定 */
  aspect-ratio: 1000 / 430;
  height: auto;
  margin: 40px auto;
  /* 左右中央寄せ */
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

/* スライドを同じ場所に重ねる設定 */
.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 親要素の高さ（350px）に合わせる */
  opacity: 0;
  transition: opacity 1.0s ease-in-out;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

/* 表示中のスライド */
.slide-item.active {
  opacity: 1;
  z-index: 2;
}

/* 画像のサイズを枠に強制的に合わせる */
.slide-item img {
  width: 100%;
  height: 100%;

  /* 枠に合わせる
  縦横に引き伸ばして歪ませることなくフィットさせる */
  object-fit: cover;

  display: block;
}

/* ドット */
.slider-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.slider-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);

  /* ★追加：マウスを乗せたときに指マーク（クリック可能）にする */
  cursor: pointer;

  transition: background-color 0.3s, transform 0.3s;
}

/* マウスホバー時、ちょっとだけドットを大きくして反応をよくする */
.slider-dots .dot:hover {
  background-color: rgba(0, 0, 0, 0.4);
  transform: scale(1.2);
}

.slider-dots .dot.active {
  background-color: rgba(255, 174, 221, 0.757);
  /* メインのピンク */
  transform: scale(1.2);
}

.congestion {
  text-align: center;
}

/* =======================
テーブル（週間メニュー）
======================= */
table {
  border-collapse: collapse;

  /* ★修正：画面いっぱいに広がらないよう、最大幅を1000pxに制限 */
  width: calc(100% - 80px);
  max-width: 1000px;

  /* ★修正：これでテーブル自体が画面の「真ん中」に寄り、左右に綺麗な隙間が空きます */
  margin: 0 auto 30px auto;

  table-layout: fixed;
  background-color: #ffffff;
}

th,
td {
  border: 1px solid #333;
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

/* 見出し（曜日） */
th {
  background-color: #ff92a284;
  color: rgb(0, 0, 0);
}

h1 {
  width: calc(100% - 80px);
  max-width: 1000px;
  margin: 40px auto 10px auto;
  /* 左右中央寄せ */
  text-align: left;
  /* 文字自体は左揃え */
}

/* 今日のヘッダーとセルの背景色を変更 */
.today-highlight {
  background-color: #fff3f8 !important;
  font-weight: bold;
  /* 文字を少し太く */
  border: 2px solid #ffb6c1;
  /* 枠線を少し強調 */
}

th.today-highlight {
  background-color: #ffb6c1 !important;
}

/* 月曜日 */
table.w-day1 th:nth-child(2),
table.w-day1 .col-1mon {
  background-color: #fff2f6 !important;
  color: #d15b7d;
}

/* 火曜日*/
table.w-day2 th:nth-child(3),
table.w-day2 .col-2tue {
  background-color: #fff2f6 !important;
  color: #d15b7d;
}

/* 水曜日*/
table.w-day3 th:nth-child(4),
table.w-day3 .col-3wed {
  background-color: #fff2f6 !important;
  color: #d15b7d;
}

/* 木曜日 */
table.w-day4 th:nth-child(5),
table.w-day4 .col-4thu {
  background-color: #fff2f6 !important;
  color: #d15b7d;
}

/* 金曜日*/
table.w-day5 th:nth-child(6),
table.w-day5 .col-5fri {
  background-color: #fff2f6 !important;
  color: #d15b7d;
}

/* PC.table横スクロール表示しない */
.scroll-hint {
  display: none;
}

#menuTable {
  scroll-margin-top: 60px;
}

/* =======================
メニュー切替ボタンエリア
======================= */
.menu-nav {
  display: flex;
  justify-content: center;
  /* 中央揃え */
  gap: 20px;
  /* ボタン間の余白 */
  flex-wrap: nowrap;
  overflow-x: auto;
  /* 横スクロール可能 */
}

.menu-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 通常のリンクボタン */
.menu-nav a {
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

/* ホバー時 */
.menu-nav a:hover {
  color: white;
}

/* カード枠の位置を基準（親）にする */
.menu-card {
  position: relative;
}

/* 親要素のオーバーフロー（はみ出し隠し）を解除 */
.menu-card {
  position: relative;
  overflow: visible !important;
  /* バッジを枠線の上に飛び出させる */
}




/* =======================
画像ボタン（おすすめ・通常・限定）
======================= */

/* おすすめ */
/* .btn-recommended {
  display: inline-block;
  background-image: url('../pic/ossm.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  width: 150px;
  height: 150px;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  cursor: pointer;
} */

/* 通常 */
/* .btn-normal {
  display: inline-block;
  background-image: url('../pic/tuzyo.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  width: 150px;
  height: 150px;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  cursor: pointer;
} */

/* 期間限定 */
/* .btn-limited {
  display: inline-block;
  background-image: url('../pic/gnti.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  width: 150px;
  height: 150px;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  cursor: pointer;
} */

/* 共通ホバー */
/* .btn-recommended:hover,
.btn-normal:hover,
.btn-limited:hover {
  opacity: 0.8;
} */

.menu-nav {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* 細丸ボタンのスタイル */
.btn-subtle-round {
  display: inline-block;
  padding: 12px 35px;
  background-color: #fff5f7;
  color: #d81b60;
  border: 2px solid #ffb6c1;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
}

.btn-subtle-round:hover {
  background-color: #ff92a2b8;
  color: #ffffff;
  border-color: #ff92a2b8;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 107, 129, 0.4);
}

/* =======================
   メニューカード一覧
   ======================= */
/* カードが横並びに綺麗に並ぶ設定 */
.menu-card-container {
  display: grid !important;
  justify-content: center !important;
  gap: 20px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;

  grid-template-columns: repeat(4, 260px) !important;
}

.menu-card {
  position: relative;
  border: 2px solid #e889a0;
  border-radius: 20px;
  background-color: #ffffff;
  overflow: visible !important;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-card>a {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* カードの縦幅いっぱいに伸ばす */
  border-radius: 18px;
  /* 外枠のの内側に沿わせる */
  overflow: hidden;
}

.menu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(232, 137, 160, 0.25);
}

/* 上半分の写真エリア */
.card-img-box {
  width: 100%;

  padding-top: 20px;
  padding-right: 15px;
  padding-left: 15px;

  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #ffffff;
}

.card-img-box img {
  width: 100%;
  height: auto;
  display: block;
}

.menu-card.is-hiyashi .card-img-box img {
  transform: scale(0.75);
  margin: 0 auto;
}

/* 下半分の文字エリア */
.card-info-box {
  margin-top: auto;
  /* 画像の下に押し下げる */
  background-color: #fff0f5;
  /* 薄ピンク背景（既にある場合はそのまま） */
  padding: 12px 8px;
  text-align: center;
  border-radius: 0 !important;
}

.card-info-box h3 {
  margin: 0;
  font-size: 16px;
  color: #d15b7d;
  font-weight: bold;
}

.detail-container {
  display: flex;
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.detail-img-box {
  flex: 1;
  min-width: 300px;
  max-width: 450px;
}

.detail-img-box img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.detail-info-box {
  flex: 1;
  min-width: 300px;
  text-align: left;
}

.badge-summer {
  position: absolute;
  top: -12px;
  /* 枠線の上に少し跨がせる */
  right: -6px;
  /* 右枠線の上に少し跨がせる */
  background: linear-gradient(135deg, #ff758c, #ff7eb3);
  /* かわいらしいピンクグラデ */
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 11px;
  border-radius: 20px;
  /* カプセル型 */
  border: 2px solid #ffffff;
  /* 白のフチ取りでピンク枠から独立させる */
  box-shadow: 0 3px 6px rgba(255, 117, 140, 0.4);
  z-index: 99;
  /* 最前面に表示 */
  white-space: nowrap;
  pointer-events: none;
}

.menu-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 3px solid #ff6b81;
  padding-bottom: 10px;
}

.menu-description {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 30px;
  background: #fff5f7;
  padding: 20px;
  border-radius: 10px;
}

.price-box {
  font-size: 1.3rem;
  font-weight: bold;
  color: #d81b60;
  margin-bottom: 30px;
}

.price-box span {
  font-size: 1.2rem;
  color: #666;
}


/* =======================
    戻るボタン（丸＋矢印）
    ======================= */
#backButton {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 丸にする */
  background-color: rgb(255, 174, 221);
  border: none;
  position: relative;
  cursor: pointer;
  font-size: 0;
  /* テキスト消す */
}

/* 矢印（CSSで作成） */
#backButton::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 3px solid white;
  border-left: 3px solid white;
  transform: translate(-30%, -50%) rotate(-45deg);
}

/* 混雑 */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 1.5rem;
}

.card {
  background: #ececec;
  border-radius: 8px;
  padding: 1rem;
}

.card-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

.card-value {
  font-size: 28px;
  font-weight: 500;
}

.card-value.big {
  font-size: 40px;
}

.card-value.green {
  color: #1D9E75;
}

.card-value.coral {
  color: #D85A30;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.5rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1D9E75;
}

.badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
}

.badge.live {
  background: #EAF3DE;
  color: #3B6D11;
}

.badge.alert {
  background: #FAECE7;
  color: #993C1D;
}

.section-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

canvas {
  width: 100% !important;
}

/* ==========================================
   通知カードの横並びレイアウト
========================================== */
.notification-card {
  background-color: #ffffff;
  border: 2px dashed #ffb6c1;
  border-radius: 16px;
  padding: 24px 20px;
  max-width: 420px;
  margin: 40px auto 30px auto;

  text-align: center;
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.1);
}

/* タイトル（アイコンと文字） */
.notice-title {
  font-family: 'Kiwi Maru', serif;
  font-weight: 700;
  color: #d15b7d;
  font-size: 1.15rem;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ベルのアイコン */
.notice-title i {
  transform: rotate(15deg);
  display: inline-block;
}

/* 説明文のテキスト */
.notice-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  color: #555555;
  line-height: 1.6;
  /* 行間を広げて読みやすく */
  margin: 0 0 18px 0;
}

/* 通知ボタンのスタイル */
.notice-btn {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  font-family: 'Kiwi Maru', serif;
  background-color: #ffb6c1;
  color: #ffffff;
  box-shadow: 0 4px 0 #e69da7;
  border: none;

  font-weight: 700 !important;
  border-radius: 30px !important;
  padding: 12px 32px !important;
  font-size: 0.95rem !important;

  cursor: pointer;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

/* ボタンにマウスを乗せたとき */
.notice-btn:hover {
  background-color: #ffa4b2;
  transform: translateY(2px);
  box-shadow: 0 2px 0 #e69da7;
}

/* 通知カードの一番下の補足文 */
.notice-footer {
  font-size: 0.8rem;
  color: #888888;
  line-height: 1.5;
  margin-top: 15px;
  text-align: center;
  border-top: 1px dotted #e0e0e0;
  padding-top: 12px;
}

.twin-cards-container {
  display: flex;
  justify-content: center;
  /* 中央寄せ */
  gap: 25px;
  /* カードとカードの間のすきま */
  width: calc(100% - 40px);
  max-width: 900px;
  /* 2つ並んで綺麗に収まるサイズ */
  margin: 30px auto 10px auto;
  flex-wrap: wrap;
  /* スマホなどの狭い画面では自動で縦並びになる */
}

/* 2. カードの幅自動引き伸ばし*/
.notification-card {
  flex: 1;
  /* 2つのカードが同じ幅で均等に広がる */
  min-width: 320px;
  /* これ以上狭くなったら縦並びに切り替わる */
  max-width: 430px;
  margin: 0;
}

/* 3. 右側カード */
.interval-card {
  border: 2px dashed #ffb6c1;
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.1);
}

/* 右側カードのタイトル文字色 */
.interval-card .notice-title {
  color: #d15b7d;
}

/* 4. 共通の補足文の余白調整 */
.notice-footer {
  margin: 15px auto 30px auto;
  max-width: 900px;
  text-align: center;
}

/***************
 お知らせセクション
 ******************* */
.news-section {
  max-width: 800px;
  margin: 30px auto;
  padding: 0 15px;
}

.news-container {
  background-color: #ffffff;
  border: 1px solid #ffe4e6;
  border-radius: 12px;
  padding: 20px 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.news-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #333333;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* お知らせリスト */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #f1f5f9;
  font-size: 0.95rem;
  line-height: 1.5;
}

.news-item:last-child {
  border-bottom: none;
}

/* 日付 */
.news-date {
  color: #888888;
  font-size: 0.85rem;
  width: 90px;
  flex-shrink: 0;
}

/* ラベルバッジ（NEW / お知らせ など） */
.news-badge {
  font-size: 0.75rem;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
}

.news-badge-new {
  background-color: #ff6b81;
  color: #ffffff;
}

.news-badge-info {
  background-color: #e2e8f0;
  color: #475569;
}

/* 本文 */
.news-text {
  color: #333333;
  flex-grow: 1;
}

/* ==================================
   お知らせリンクのホバースタイル
================================== */
.news-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease, text-decoration 0.2s ease;
}

/* マウスカーソルを上に置いた（ホバーした）とき */
.news-link:hover {
  opacity: 0.6;
  text-decoration: underline;
}

/* --- FAQ全体エリア --- */
.faq-section,
.faq-wrapper {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.faq-title,
.faq-page-title {
  text-align: center;
  color: #ff6b81;
  font-size: 1.8rem;
  margin-bottom: 30px;
}

.faq-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* --- FAQアコーディオン枠 --- */
.faq-item {
  border: 2px solid #ffccd5;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  outline: none;
  margin-bottom: 15px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item[open] {
  border-color: #e889a0;
  box-shadow: 0 4px 12px rgba(232, 137, 160, 0.15);
}

.faq-item:focus,
.faq-question:focus {
  outline: none;
}

/* 質問タイトル部分 */
.faq-question {
  outline: none;
  border: none;
  cursor: pointer;
  padding: 16px 20px;
  font-weight: bold;
  color: #444;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker,
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* 矢印アイコンの回転 */
.faq-icon {
  color: #ff6b81;
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}

/* --- 回答エリア（余白） --- */
.faq-answer {
  padding: 0 20px 16px 20px;
}

/* --- 中身のテキスト＆破線＆ふわっとアニメーション --- */
.faq-answer-content {
  border-top: 1px dashed #ffe0e6;
  /* 破線はここだけの1本！ */
  padding-top: 12px;
  margin-top: 4px;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
}

.faq-answer-content p {
  margin: 0;
}

/* ★ 開いた瞬間にふわっと上から降りてくるアニメーション ★ */
.faq-item[open] .faq-answer-content {
  animation: faqExpand 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes faqExpand {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スマホ表示（768px以下）での最適化 */
@media (max-width: 768px) {
  .news-item {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
  }

  .news-date {
    width: auto;
  }

  .news-text {
    width: 100%;
    margin-top: 2px;
  }
}


/* =======================
ふったー（丸＋矢印）
======================= */
footer {
  background-color: #F5F5F5;
  /* ご提案した薄いグレー */
  color: #333333;
  /* 文字の基本色（読みやすいダークグレー） */
  padding: 40px 20px;
  /* 上下に程よい余白を作る（お好みで調整してください） */
  text-align: center;
  /* フッター内の文字やアイコンを中央寄せにする */
}

.gotop {
  position: fixed;
  bottom: 30px;
  right: 30px;

  position: fixed;
  /* ←固定 */
  bottom: 30px;
  /* 下から */
  right: 30px;
  /* 右から */
  z-index: 1000;
  /* 前に出す */
}

/* 丸ボタン */
#topButton {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 174, 221, 0.757);
  position: relative;
}

/* 上矢印 */
#topButton::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;

  width: 15px;
  height: 15px;

  border-top: 4px solid white;
  border-left: 4px solid white;

  transform: translate(-50%, -40%) rotate(45deg);
}


/* SNSセクション全体 */
.sns-section {
  text-align: center;
  padding: 20px;
}

/* リンクの設定（ここで下線を消す） */
.sns-link {
  text-decoration: none;
  /* 下線を削除 */
  margin: 0 15px;
  /* アイコン同士の間隔 */
  display: inline-block;
  transition: transform 0.3s;
  font-size: 60px;
}

.sns-link:hover {
  transform: scale(1.1);
  /* ホバー時に少し大きく */
  opacity: 0.7;
  /* 少し薄く */
}

/* Xのアイコン色 */
.fa-x-twitter {
  color: #000;
  vertical-align: middle;
}

/* Instagramのアイコン色（グラデーション） */
.fa-instagram {
  vertical-align: middle;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-tiktok {
  vertical-align: middle;
  color: #ffffff;
  /* 左右に青と赤の影をずらして配置 */
  text-shadow:
    -2px -2px 0px #25F4EE,
    /* シアン（青緑） */
    2px 2px 0px #FE0979;
  /* マゼンタ（赤紫） */
}

/* PCの時はハンバーガー隠す */
.hamburger-btn {
  display: none;
}

/* =======================
スマホ対応
======================= */

@media (max-width: 1150px)and (min-width: 769px) {
  .menu-card-container {
    grid-template-columns: repeat(2, 280px) !important;
  }

  .menu-card {
    max-width: 280px !important;
  }
}

@media (max-width: 768px) {

  /* テーブルをコンパクトに */
  table {
    width: calc(100% - 20px);
    margin: 10px;
  }

  th,
  td {
    padding: 8px;
    font-size: 14px;
  }

  /* ボタンサイズ小さく */
  .btn-recommended,
  .btn-normal,
  .btn-limited {
    width: 100px;
    height: 100px;
  }

  table {
    margin-bottom: 25px !important;
  }

  .table-wrapper {
    margin-bottom: 25px !important;
  }


  .notice-btn {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    /* 下側の余裕はそのままキープ */
  }

  /* スマホは3列固定 */
  #menuList li {
    flex: 0 0 calc(33.333% - 14px);
  }

  /* 1. ヘッダーをスマホサイズ（白背景・固定・高さ60px）に統一 */
  .header,
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
  }

  .nav-links .header-logo {
    display: inline-block !important;
    height: 50px;
    width: auto;
  }

  /* 2. PC用の巨大ロゴをスマホヘッダー上から消し去る */
  .header .nav-links .header-logo,
  header .nav-links .header-logo,
  .header-logo {
    display: none !important;
  }

  /* スマホ版の時のコンテンツ下がり具合を調整 */
  body {
    padding-top: 80px !important;
  }

  /* テーブルをコンパクトに */
  table {
    width: calc(100% - 20px);
    margin: 10px;
    margin-bottom: 25px !important;
  }

  th,
  td {
    padding: 8px;
    font-size: 14px;
  }

  /* ボタンサイズ小さく */
  .btn-recommended,
  .btn-normal,
  .btn-limited {
    width: 100px;
    height: 100px;
  }

  .table-wrapper {
    margin-bottom: 25px !important;
  }

  .notice-btn {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
  }

  /* スマホは3列固定 */
  #menuList li {
    flex: 0 0 calc(33.333% - 14px);
  }

  /* 1. ヘッダーをスマホサイズ（白背景・固定・高さ60px）に統一 */
  .header,
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
  }

  /* スマホ版の時のコンテンツ下がり具合を調整 */
  body {
    padding-top: 80px !important;
  }

  /* 2. 左端：ハンバーガーボタン */
  .hamburger-btn {
    display: block !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 22px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 9999 !important;
  }

  /* 三本線のデザイン（メシどきピンク） */
  .hamburger-btn span {
    display: block !important;
    position: absolute !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #ffb6c1 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }

  .hamburger-btn span:nth-child(1) {
    top: 0 !important;
  }

  .hamburger-btn span:nth-child(2) {
    top: 9px !important;
  }

  .hamburger-btn span:nth-child(3) {
    top: 18px !important;
  }

  /* 三本線が「×」になるアニメーション */
  .hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
  }

  .hamburger-btn.is-active span:nth-child(2) {
    opacity: 0 !important;
  }

  .hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-46deg) !important;
  }

  /* 3. スマホ専用ヘッダーロゴ（通常時：画面中央） */
  .sp-header-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* 上下左右の真ん中にジャストフィットさせる魔法 */
    display: block !important;
    padding: 0 !important;
  }

  .sp-header-logo img {
    width: 130px !important;
    /* サイズ感はここで微調整してください */
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }


  /* メニューが開いたとき、通常時のヘッダー中央ロゴは完全に非表示 */
  .nav.is-active~.sp-header-logo {
    display: none !important;
  }

  /* 4. 左側から飛び出すナビゲーションメニュー本体 */
  .nav {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    right: auto !important;
    width: 75% !important;
    height: 100vh !important;
    background-color: #ffffff !important;

    padding: 45px 20px 20px 20px !important;

    transition: all 0.3s ease !important;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.05) !important;
    z-index: 9998 !important;
    overflow-y: auto !important;
  }

  .nav.is-active {
    left: 0 !important;
  }

  /* 5. スマホ版メニュー内のリンク縦並び＆中央寄せ */
  .nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  /* メニュー内のすべての <li> 要素の余白を一律でリセット */
  .nav-links>li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* メニュー内の一番最初にあるロゴ用の <li> を表示 */
  .nav-links>li:first-child {
    display: block !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
  }

  .nav-links>li:not(:first-child) {
    margin-top: 15px !important;
  }

  .nav-links>li:first-child>a {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }

  /* メニューの中のロゴ画像だけをピンポイントでサイズ調整 */
  .nav-links>li:first-child .header-logo {
    object-fit: contain !important;
    margin: 0 !important;
    width: 100px !important;
    height: auto !important;
    display: block !important;
  }

  /* メニュー内の通常ボタンの文字装飾 */
  .nav-links>li>a {
    font-size: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* 子メニュー（通常メニューなど）の調整 */
  .nav-links .dropdown-menu {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  /* 子メニューのリストを縦並び・中央寄せに */
  .nav-links .dropdown-menu ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 24px !important;
    gap: 15px !important;
  }

  /* 4. 子メニューの文字サイズを「少し小さめ」にする */
  .nav-links .dropdown-menu ul li a {
    font-size: 16px !important;
    color: #555555 !important;
    font-weight: normal !important;
  }

  .nav-links>li {
    width: 100% !important;
    padding: 0 !important;
  }

  .table-wrapper {
    width: 100%;
    overflow-x: auto;
    /* 横スクロールを許可 */
    -webkit-overflow-scrolling: touch;
    display: block;
    margin-bottom: 0;
  }

  .table-wrapper table {
    min-width: 600px;
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
  }

  .scroll-hint {
    display: block;
    text-align: right;
    margin-bottom: 5px;
  }

  .scroll-hint span {
    font-size: 11px;
    color: #e27ca1;
    background: #fff0f5;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .menu-card-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 10px !important;
  }

  .menu-card {
    max-width: 100% !important;
  }

  /* .card-img-box {
    height: 120px !important;
  } */

  .card-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 通知 */
  .twin-cards-container {
    gap: 10px;
    /* カード同士の隙間を狭く */
    width: calc(100% - 16px);
    margin: 15px auto;
  }

  /* カードの最小幅制限をなくし、ギッチリ横並びをキープ */
  .notification-card {
    min-width: 0 !important;
    /* 320pxの制限を解除 */
    padding: 16px 10px;
    /* カード内の余白をタイトに */
    border-radius: 12px;
  }

  /* タイトルの文字サイズを少し小さく */
  .notice-title {
    font-size: 0.85rem !important;
    gap: 4px;
    margin-bottom: 6px;
  }

  /* 説明文の文字サイズを小さくし、改行をリセット */
  .notice-text {
    font-size: 0.7rem !important;
    line-height: 1.4;
    margin-bottom: 12px;
  }

  /* 元の文章にある<br>タグ（強制改行）をスマホでは無視させる */
  .notice-text br {
    display: none;
  }

  /* ボタンを小さくしてカード内に収める */
  .notice-btn {
    font-size: 0.75rem !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    width: 100% !important;
  }

  #js-nav,
  .nav {
    width: 50% !important;
  }
}