/* ==========================================================================
   和モダン デザインオーバーライド - Studio Age
   既存CSSの上書きスタイル（ロールバック時はこのファイルの読み込みを削除するだけ）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS変数の上書き
   -------------------------------------------------------------------------- */
:root {
  /* 配色: 落ち着いた朱色 + ゴールドアクセント */
  --color-primary: #b33a3a;
  --color-primary-light: #c94e4e;
  --color-primary-dark: #8e2d2d;
  --color-secondary: #b33a3a;
  --color-secondary-light: #c94e4e;
  --color-secondary-dark: #8e2d2d;
  --color-accent-gold: #c9a66b;
  --color-accent-gold-light: #d4b98a;
  --color-accent-gold-dark: #a8884e;
  --color-bg: #f8f5ef;
  --color-bg-alt: #faf8f3;
  --color-text: #3d3d3d;
  --color-text-muted: #6b6b6b;
  --btnBeforeBackgroundColor: #b33a3a;

  /* フォント: 見出しに明朝体を使用 */
  --font-heading: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  --font-main: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* グラデーション */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
}

/* --------------------------------------------------------------------------
   2. 全体のベース調整
   -------------------------------------------------------------------------- */
body {
  color: var(--color-text);
  font-family: var(--font-main);
  background-color: var(--color-bg);
  line-height: 1.9;
}

a:visited,
a:link {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   3. 見出しスタイル（和モダン）
   -------------------------------------------------------------------------- */

/* h2: 明朝体 + ゴールドライン */
h2 {
  font-family: var(--font-heading);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-accent-gold);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  padding: 0.5rem 0 0.8rem 0;
  padding-left: 0;
  text-align: center;
  margin-block: 2.5rem 1.5rem;
}

h2::after {
  border-bottom-color: var(--color-accent-gold-dark);
  width: 40%;
}

/* h3, h4 も明朝体に */
h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: 0.05em;
}

h4 {
  color: var(--color-primary);
}

/* h3.no-bg の装飾的なバー色変更 */
h3.no-bg {
  color: var(--color-primary);
}

h3.no-bg::before,
h3.no-bg::after {
  background: var(--color-accent-gold);
}

/* --------------------------------------------------------------------------
   4. セクション余白の拡大
   -------------------------------------------------------------------------- */
section:nth-child(1n) {
  padding-block: 2.5rem;
  background-color: var(--color-bg);
}

section:nth-child(2n) {
  padding-block: 2.5rem;
  background-color: var(--color-bg-alt);
}

@media (min-width: 768px) {
  section:nth-child(1n),
  section:nth-child(2n) {
    padding-block: 3.5rem;
  }
}

.row {
  background-color: transparent;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .row {
    margin-bottom: 3rem;
  }
}

/* --------------------------------------------------------------------------
   5. ファーストビュー（h1）の和モダン化
   -------------------------------------------------------------------------- */
.sample_view .sample_title {
  font-family: var(--font-heading);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: none;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 2;
  padding: 1rem 1.5rem;
  border-bottom: 2px solid var(--color-accent-gold);
  border-radius: 0 0 0 12px;
}

@media (min-width: 768px) {
  .sample_view .sample_title {
    font-size: 1.6rem;
    padding: 1.5rem 2.5rem;
    letter-spacing: 0.12em;
    border-radius: 12px;
    border-bottom: 2px solid var(--color-accent-gold);
    border-left: none;
    background: rgba(255, 255, 255, 0.8);
  }
}

/* --------------------------------------------------------------------------
   6. メニューカード 和モダン化
   -------------------------------------------------------------------------- */
.menu-card {
  border: 1px solid rgba(201, 166, 107, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-card:hover {
  box-shadow: 0 8px 32px rgba(201, 166, 107, 0.25);
  border-color: var(--color-accent-gold);
}

.menu-card-title {
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   7. 本文ブロックの洗練
   -------------------------------------------------------------------------- */
p {
  line-height: 2;
  color: var(--color-text);
}

figcaption {
  font-family: var(--font-heading);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

/* 引用風テキストブロック用 */
.index__information p {
  line-height: 2;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   8. ボタン・リンクの色調整
   -------------------------------------------------------------------------- */
.orange,
.cyan {
  color: var(--color-primary);
}

h2 .orange {
  color: #fff;
}

/* CTA ボタン */
.buttons a {
  background: var(--gradient-primary);
  box-shadow: 0 4px 0 var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   9. フローティングメニュー（dock）の視認性向上
   -------------------------------------------------------------------------- */
.liquidGlass-wrapper.dock {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
}

.liquidGlass-wrapper.dock .liquidGlass-tint {
  background: rgba(255, 255, 255, 0.35);
}

/* 予約ボタンを目立たせる */
.liquidGlass-wrapper.dock a[href="/menu_form/"] {
  color: var(--color-primary) !important;
  font-weight: bold;
}

/* 価格表ボタンの調整 */
.liquidGlass-wrapper.dock .price-btn {
  background: linear-gradient(
    -75deg,
    rgba(179, 58, 58, 0.5),
    rgba(179, 58, 58, 0.65),
    rgba(179, 58, 58, 0.5)
  );
}

/* --------------------------------------------------------------------------
   10. フッターの和モダン化
   -------------------------------------------------------------------------- */
footer {
  background: linear-gradient(135deg, #4a2020 0%, #3d1a1a 50%, #2e1414 100%);
}

.Footer__Menu__List li h2 {
  color: #fff;
  font-family: var(--font-heading);
  border-bottom-color: var(--color-accent-gold);
}

.Footer__Menu__List li h2::after {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   11. FAQ アコーディオンの色調整
   -------------------------------------------------------------------------- */
summary {
  background-color: var(--color-primary);
}

summary:hover {
  background-color: var(--color-accent-gold-dark);
}

details {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   12. ヘッダーの微調整
   -------------------------------------------------------------------------- */
.hidden_header .menu-btn span,
.hidden_header .menu-btn span::before,
.hidden_header .menu-btn span::after {
  background: var(--gradient-primary);
}

nav.pc-menu > ul > li > a,
.flex .pc-menu ul li a {
  color: var(--color-primary);
}

.flex .pc-menu ul li a span {
  color: var(--color-primary);
  background-image: linear-gradient(var(--color-accent-gold));
}

/* ヘッダーの価格表ボタン */
a.price-btn {
  background: linear-gradient(
    -75deg,
    rgba(179, 58, 58, 0.5),
    rgba(179, 58, 58, 0.65),
    rgba(179, 58, 58, 0.5)
  );
}

/* 問い合わせボタン */
.glass-button-form {
  color: rgba(179, 58, 58, 0.85);
}

/* --------------------------------------------------------------------------
   13. モバイルメニューの和モダン化
   -------------------------------------------------------------------------- */
@media (max-width: 1025px) {
  .menu-content {
    background-color: #2e1414;
  }

  .visual-nav-title {
    border-left-color: var(--color-accent-gold);
    font-family: var(--font-heading);
    letter-spacing: 0.05em;
  }

  .visual-nav-links a span {
    color: var(--color-accent-gold-light);
  }
}

/* --------------------------------------------------------------------------
   14. スタッフカードの微調整
   -------------------------------------------------------------------------- */
.staff-card-index-role {
  color: var(--color-primary);
}

.staff-card-index-name {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   15. コラムカードのオーバーレイ調整
   -------------------------------------------------------------------------- */
.column-overlay {
  background: linear-gradient(
    135deg,
    rgba(62, 45, 35, 0.8) 0%,
    rgba(62, 45, 35, 0.7) 50%,
    rgba(62, 45, 35, 0.85) 100%
  );
}

/* --------------------------------------------------------------------------
   16. 更新履歴セクション
   -------------------------------------------------------------------------- */
.row h2[style*="color: #6c757d"] {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   17. 価格ボタン・CTA ボタンの統一
   -------------------------------------------------------------------------- */
a.index__tel {
  background: var(--gradient-primary);
  box-shadow: 0 4px var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   18. スムーズなフェードイン強化
   -------------------------------------------------------------------------- */
.fade-in-element {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* --------------------------------------------------------------------------
   19. 全体的なリンクスタイル
   -------------------------------------------------------------------------- */
a {
  color: var(--color-primary);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary-light);
}

/* --------------------------------------------------------------------------
   20. Container Queries for menu cards (where supported)
   -------------------------------------------------------------------------- */
@supports (container-type: inline-size) {
  .menu-cards {
    container-type: inline-size;
  }

  @container (max-width: 500px) {
    .menu-card {
      min-height: 200px;
    }
  }
}