/* ============================================================
   THE丼 共通スタイルシート
   ============================================================ */

/* ===== モバイルナビ ===== */
#mobileNav {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}
#mobileNav.open { transform: translateX(0); }

#navOverlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#navOverlay.open { opacity: 1; pointer-events: auto; }


/* ===== HERO SLIDER (index.html) ===== */
.slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}
.slide.active { opacity: 1; pointer-events: auto; }

/* ===== DOTS (index.html) ===== */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ccc;
  display: inline-block;
  cursor: pointer;
  transition: background 0.3s;
}
.dot.active { background: #AE1E31; }

/* ===== NEWS hover (index.html / news.html) ===== */
.news-item:hover  { background-color: #fdf5f0; }
.news-row:hover   { background-color: #fdf5f0; }

/* ===== LINK CARD hover (index.html) ===== */
.link-card:hover { background-color: #f5ebe0; }

/* ===== CAMPAIGN CARD hover (campaign.html) ===== */
.campaign-card:hover .card-img { transform: scale(1.03); }
.card-img { transition: transform 0.3s ease; }

/* ===== SHOP タブスタイル (shoplist/index.html) ===== */
.tab-btn {
  transition: background-color 0.2s, color 0.2s;
  border-radius: 8px 8px 0 0;
  position: relative;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.12), 2px 0 6px rgba(0,0,0,0.08), -2px 0 6px rgba(0,0,0,0.08);
}
#tabHeader {
  clip-path: inset(-50px -50px 0 -50px);
}
.tab-btn.active-kinki,
.tab-btn.active-chugoku,
.tab-btn.active-shikoku {
  background-color: #ffffff;
  color: #AE1E31;
  border-top: 3px solid #AE1E31;
}
.tab-btn.active-uofuji {
  background-color: #ffffff;
  color: #1E2B5E;
  border-top: 3px solid #1E2B5E;
}
.store-card-arrow { transition: transform 0.2s; }
.store-card:hover .store-card-arrow { transform: translateX(3px); }

/* ===== SHOP 詳細ページ ===== */
section#detail { margin-bottom: 6em; }

/* --- スマホ・タブレット対応（〜1023px） --- */
@media (max-width: 1023px) {
  section#detail      { margin-bottom: 3em; }
  /* menu-section-label font-size: Tailwindクラスで管理（text-[18px] lg:text-[24px]） */
  .note-box           { margin-top: 2rem; margin-bottom: 2rem; }
}

/* --- スマホ（〜639px） --- */
@media (max-width: 639px) {
  .info-label,
  .info-label-w       { font-size: 13px; }
  .svc-card-label     { font-size: 13px; }
}

/* メニューアイテムカード：Figma仕様 280×280pxフレーム・#FAF6EF背景 */
.menulist .flame {
  background-color: #FAF6EF;
  overflow: hidden;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}
.menulist .flame img {
  width: 100%;
  object-fit: contain;
}


/* ===== SHOP 詳細ページ コンポーネント ===== */

/* --- テーマ変数 --- */
.theme-red  { --store-color: #AE1E31; --svc-box-bg: #CF7E79; }
.theme-blue { --store-color: #1E2B5E; --svc-box-bg: #799dcf; }

/* --- サービス内容ボックス --- */
.svc-box  { background-color: var(--svc-box-bg); }
.svc-btn  { background-color: var(--store-color); }
.svc-bar  { background-color: var(--store-color); }
.store-tag { border-color: var(--store-color); color: var(--store-color); }

/* --- 店舗情報行 --- */
.info-border { border-color: #CFC1B5; }
.info-label  { color: var(--store-color); min-width: 4.5em; }

/* --- メニューセクションカード --- */
.menu-section-card  { background-color: #FAF6EF; }
.menu-section-cell  { border-color: #CFC1B5; width: 20%; }
.menu-section-label { color: #AE1E31; }
.set-img { width: auto; height: auto; }

/* menu-section-cell: スマホ・タブレット（〜1023px）で横幅100% */
@media (max-width: 1023px) {
  .menu-section-cell { width: 100%; }
}

/* --- サービス詳細カード --- */
.svc-card       { border-color: var(--store-color); border-radius: 0.5rem; }
.svc-card-label { color: var(--store-color); }

/* --- CTAボタン --- */
.cta-primary,
.cta-outline { font-family: 'Zen Kaku Gothic New', sans-serif; }
.cta-primary { background-color: var(--store-color); }
.cta-outline { background-color: var(--store-color); color: white; }

/* --- 注釈 --- */
.note-box {
  border-color: #AE1E31;
  max-width: min(500px, 90%);
  margin-left: auto;
  margin-right: auto;
}
.note-text { color: #AE1E31; }

/* --- Google Map iframe --- */
.map-iframe { border: 0; }

/* --- 住所ラベル最小幅（awaji-sa等 色がTailwindクラス化済みの場合） --- */
.info-label-w { min-width: 4.5em; }


/* ===== お問い合わせフォーム (contact.html) ===== */
.form-input,
.form-textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  padding: 8px 4px;
  font-family: inherit;
  font-size: 14px;
  color: #231815;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus,
.form-textarea:focus {
  border-bottom-color: #AE1E31;
}
.form-textarea {
  border: 1px solid #ccc;
  padding: 10px;
  resize: vertical;
  min-height: 120px;
  border-radius: 2px;
}
.form-textarea:focus {
  border-color: #AE1E31;
}
.form-btn{
  font-weight: bold;
  font-size:15px;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  opacity: 0.85;
  background-color: #AE1E31;
  min-width:220px;
  cursor: pointer;
}
.form-btn.back {
  background-color: #fff;
  color: #AE1E31;
  border: 2px solid #AE1E31;
}
/* CF7は非表示で使用（メール送信エンジンとして裏で動作） */
#cf7-hidden-wrap {
  display: none;
}
/* 確認画面・サンクスは JS で表示切替 */
#confirmation-screen,
#thanks-screen {
  display: none;
}

/* ── プライバシーポリシー セクション見出し ── */
.policy-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.75rem;
}
.policy-section-heading::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #AE1E31;
  flex-shrink: 0;
}