/* ============================================================
   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 タブスタイル (shop/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); }

/* ===== お問い合わせフォーム (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;
}