/* ==========================================================================
   OTO dESIGN - Core Modern Standard Reset
   ========================================================================== */
:root {
  --header-height: 6rem; /* 固定ヘッダーの想定高さ（.site-mainの余白とhero系の打ち消しマージンで共有） */
  --section-spacing: clamp(
    3rem,
    6vw,
    5rem
  ); /* セクション同士の標準余白（marginなのでブロック同士を連続配置しても相殺されて重複しない） */
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* outline: 1px solid #ea00ff; */ /* デバッグ用 */
}

html {
  font-size: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: var(
    --header-height
  ); /* 固定ヘッダー分、アンカー着地点をずらす */
}

body {
  font-family: sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
}

/* ==========================================================================
   Hero Section (WordPress対応・完全版)
   ========================================================================== */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #111; /* ロード時の白飛び防止 */
  margin: 0 !important;
}

/* 1. 画像・動画を囲む背景グループ */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
}

/* WordPressが自動付与するレイアウト（is-layout-flow等）を無効化 */
.hero-bg,
.hero-bg.is-layout-flow,
.hero-bg.is-layout-constrained {
  display: block !important;
}

.hero-bg > * + * {
  margin-block-start: 0 !important;
}

/* 白文字を読ませるためのダークオーバーレイ */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
  pointer-events: none; /* マウス操作を邪魔しない */
}

/* -------------------------------------------
   WordPressブロック（画像・動画）のハック
   ------------------------------------------- */
/* wp:image や wp:video は figure タグになるため、ここで吸収して全画面化 */
.hero-slide,
.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important; /* WP標準の余白を強制リセット */
  opacity: 0; /* JSで動かすため初期は透明 */
  z-index: 0; /* JSでのz-index制御のベースライン */
}

.hero-slide img,
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* JSオフ時の保険（1枚目だけ表示） */
/* :first-child はWPが追加要素を挿入すると外れるため :nth-of-type(1) を使用 */
.hero-slide:nth-of-type(1),
.hero-video {
  opacity: 1;
  z-index: 1;
}

/* -------------------------------------------
   テキストコンテンツ
   ------------------------------------------- */
.hero-content {
  position: relative;
  text-align: center;
  color: #ffffff;
  z-index: 20; /* オーバーレイより手前へ */
  padding: 0 1rem;
  margin: 0 !important;
}

/* oklchフォールバック */
@supports (color: oklch(0 0 0)) {
  .hero-content,
  .hero-scroll {
    color: oklch(0.98 0.01 90);
  }
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}

.hero-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: 0.1em;
  margin: 0 !important;
}

/* -------------------------------------------
   Scroll インジケーター
   ------------------------------------------- */
.hero-scroll {
  position: absolute;
  bottom: clamp(2rem, 4vw, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  z-index: 20;
  color: #ffffff;
  margin: 0 !important;
}

.scroll-text {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl; /* モダンな縦書き */
  margin: 0 !important;
}

.scroll-line {
  width: 1px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  margin: 0 !important;
}

/* 下へ動く白い線 */
.scroll-line-inner {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  transform: translateY(-100%);
  margin: 0 !important;
}

/* ==========================================================================
   Gutenberg Layout & Encapsulated Component Styles
   ========================================================================== */
/* コンテナ全体の最大幅を制御し、レイアウトを中央寄せにする */
.wp-block-columns {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

/* FAQアコーディオンのモダンCSSカプセル（oklchフォールバック付き） */
/* concept-section/highlight-sectionと同じ構造に統一：
   外側(.faq-container)が padding を全部持ち、内側(.faq-container-inner)は
   max-width + margin:auto のみ（concept-grid/highlight-gridと同じ役割） */
.faq-container {
  --faq-bg: #f9f9f9;
  --faq-border: #e0e0e0;
  --faq-text: #222222;

  width: 100%;
  padding: clamp(1rem, 2.5vw, 2.5rem) 1rem;
}

.faq-container-inner {
  max-width: 800px;
  margin: 0 auto !important;
}

/* 最新のoklchをサポートしているブラウザへの適用 */
@supports (color: oklch(0 0 0)) {
  .faq-container {
    --faq-bg: oklch(0.98 0.01 90); /* ほんのり温かみのある超薄グレー */
    --faq-border: oklch(0.88 0.01 90); /* 上品な薄い境界線 */
    --faq-text: oklch(0.25 0.01 90); /* 日本の墨色に近い黒 */
  }
}

.faq-item {
  background-color: var(--faq-bg);
  border: 1px solid var(--faq-border);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}

/* 質問テキスト（アイコン追加版） */
.faq-question {
  position: relative;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(3rem, 5vw, 4rem)
    clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
  color: var(--faq-text);
  font-weight: bold;
  cursor: pointer;
  position: relative; /* アイコンの基準位置 */
  user-select: none;
}

/* ＋アイコンをCSSで描画 */
.faq-question::after {
  content: "+";
  position: absolute;
  right: clamp(1rem, 2vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  font-weight: normal;
}

/* 開いたとき（.is-open クラスが付いたとき）は×に回転 */
.faq-item.is-open .faq-question::after {
  content: "X";
  /* GSAPではなくCSSで回転させてもOKですが、今回は文字を切り替えるだけでも綺麗です */
}

.faq-answer {
  padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
  color: var(--faq-text);
  overflow: hidden; /* はみ出し防止だけ残す */
}

/* ==========================================================================
   【重要】エディター専用の親切設計（Gutenbergでの編集を可能にする）
   ========================================================================== */
/* エディター画面 (.editor-styles-wrapper) のみ、フロント用の複雑なレイアウトを解除します */
.editor-styles-wrapper .hero-section {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  background: transparent !important;
  overflow: visible !important;
}

/* 画像グループを縦並びのFlexboxにして、中の画像を順番に積み上げる */
.editor-styles-wrapper .hero-bg {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  padding: 1rem !important;
  background: #f5f5f5 !important;
  border: 2px dashed #ccc !important;
  border-radius: 8px !important;
  margin-bottom: 1rem !important;
}

/* 画像ブロック（figure）を絶対配置から解放し、普通のブロック要素として表示 */
.editor-styles-wrapper .hero-slide,
.editor-styles-wrapper .hero-video {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  z-index: 1 !important;
  margin: 0 !important;
}

/* 画像自体のobject-fitを解除し、自然なアスペクト比で表示 */
.editor-styles-wrapper .hero-slide img,
.editor-styles-wrapper .hero-video video {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 4px !important;
}

/* テキストコンテンツをエディターでも見やすく（白→黒に変更） */
.editor-styles-wrapper .hero-content {
  color: #1a1a1a !important;
  padding: 1.5rem 0 !important;
}

.editor-styles-wrapper .hero-title {
  color: #1a1a1a !important;
}

.editor-styles-wrapper .hero-subtitle {
  color: #444 !important;
}

/* エディターでは、画像を選択しやすくするために暗い膜（オーバーレイ）を消す */
.editor-styles-wrapper .hero-bg::after {
  display: none !important;
}

/* ==========================================================================
   Concept Section (コンセプトセクション)
   ========================================================================== */
.concept-section {
  width: 100%;
  padding: clamp(4rem, 8vw, 8rem) 1rem;
  background-color: #ffffff; /* フォールバック */
  overflow: hidden;
}

/* oklchによる、カフェらしい微かなアイボリー背景 */
@supports (color: oklch(0 0 0)) {
  .concept-section {
    background-color: oklch(0.99 0.01 90);
  }
}

.concept-grid {
  max-width: 1000px;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* PC表示では、画像(5) : テキスト(6) の美しい比率に */
@media (min-width: 768px) {
  .concept-grid {
    grid-template-columns: 5fr 6fr;
  }
}

/* JSで動かすため、初期状態は少し下げて透明にしておく */
.concept-image,
.concept-title,
.concept-text {
  opacity: 0;
  transform: translateY(30px);
  margin: 0 !important;
}

.concept-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.concept-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.4;
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  color: #333333;
}

.concept-text {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.8;
  color: #555555;
}

/* -------------------------------------------
   エディター専用の親切設計（表示の復元）
   ------------------------------------------- */
.editor-styles-wrapper .concept-image,
.editor-styles-wrapper .concept-title,
.editor-styles-wrapper .concept-text {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   Site Header（サイトヘッダー・固定ナビゲーション）
   ========================================================================== */
/* ヘッダー告知バー（任意）とナビをまとめて画面上部に固定する外枠。
   告知バーが無い場合は高さ0なので、見た目は従来と変わらない */
.site-header-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.site-header {
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease;
  background-color: transparent;
}

/* スクロール時にJSで付与されるクラス。背景色は外観 → カスタマイズ → ヘッダー/フッターの配色 から変更可能 */
.site-header.is-scrolled {
  background-color: var(--header-bg-color, rgba(17, 17, 17, 0.92));
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 固定ページ編集画面の「ヘッダー表示設定」がオンの場合、スクロール前から背景色を表示する */
body.header-is-solid .site-header {
  background-color: var(--header-bg-color, rgba(17, 17, 17, 0.92));
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1rem, 3vw, 2rem);
}

/* ロゴ。文字色は外観 → カスタマイズ → ヘッダー/フッターの配色 から変更可能 */
.header-logo {
  display: flex;
  z-index: 1001;
}
.header-logo a {
  text-decoration: none;
  color: var(--header-text-color, #ffffff);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: bold;
  letter-spacing: 0.05em;
}

.header-logo img {
  max-height: 40px;
  width: auto;
}

/* ヘッダーCTA（ボタン・画像等を自由配置）。空の場合は何も表示されない。
   PCではナビの右側に並び、スマホ展開時はナビ項目の下に縦並びで表示される */
.header-cta-zone .wp-block-buttons {
  margin: 0;
}

/* ナビ本体。PCではナビ項目とヘッダーCTAを横並びにする */
.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* ナビリスト */
.nav-list {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li a {
  color: var(--header-text-color, #ffffff);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  transition: opacity 0.3s;
}

.nav-list li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--header-text-color, #ffffff);
  transition: width 0.3s ease;
}

.nav-list li a:hover::after {
  width: 100%;
}

.nav-list li a:hover {
  opacity: 0.8;
}

/* ハンバーガーボタン */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--header-text-color, #ffffff);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* ハンバーガー開いた状態 */
.hamburger.is-active .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* モバイル対応 */
@media (max-width: 767px) {
  .hamburger {
    display: flex;
  }

  .header-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    /* max-width: 320px; */
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background-color: var(--header-bg-color, rgba(17, 17, 17, 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 5rem 2rem 2rem;
    overflow-y: auto;
    transition: right 0.4s ease;
    z-index: 999;
  }

  /* メニュー展開時、ナビ項目の下にヘッダーCTAを表示 */
  .header-cta-zone {
    margin-top: 2rem;
  }

  .header-cta-zone .wp-block-buttons {
    justify-content: center;
  }

  .header-nav.is-open {
    right: 0;
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .nav-list li a {
    display: block;
    padding: 1rem 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ==========================================================================
   Site Footer（サイトフッター）
   ========================================================================== */
/* 背景色・文字色は外観 → カスタマイズ → ヘッダー/フッターの配色 から変更可能 */
.site-footer {
  background-color: var(--footer-bg-color, #1a1a1a);
  color: var(--footer-text-color, #cccccc);
  padding-top: clamp(3rem, 6vw, 5rem);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr 1.2fr 1fr;
  }
}

/* フッターロゴ */
.footer-brand a {
  text-decoration: none;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
}

.footer-brand img {
  max-height: 36px;
  width: auto;
}

.footer-tagline {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* フッター見出し */
.footer-heading {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1rem;
}

/* 店舗情報 */
.footer-dl {
  font-size: 0.875rem;
  line-height: 1.8;
}

.footer-dl dt {
  font-weight: bold;
  color: #999999;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.75rem;
}

.footer-dl dt:first-child {
  margin-top: 0;
}

.footer-dl dd {
  margin: 0;
}

.footer-dl a {
  color: inherit;
  text-decoration: none;
}

.footer-dl a:hover {
  color: #ffffff;
}

/* SNSリスト */
.sns-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sns-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #cccccc;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.3s;
}

.sns-list a:hover {
  color: #ffffff;
}

.sns-list svg {
  flex-shrink: 0;
}

/* フッターボトム */
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer-nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav-list a {
  color: #999999;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}

.footer-nav-list a:hover {
  color: #ffffff;
}

.copyright {
  font-size: 0.75rem;
  color: #666666;
  margin: 0;
}

/* ==========================================================================
   自由編集ゾーン（ヘッダー告知バー / フッター追加コンテンツ）
   外観 → 固定ページ「【パーツ】ヘッダー告知バー」「【パーツ】フッター追加コンテンツ」
   をブロックエディターでパターン挿入して編集できる領域
   ========================================================================== */
.theme-zone-site-header-banner .header-banner {
  width: 100%;
  background-color: #2a2118;
  color: #ffffff;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 0.6rem 1rem;
}

.theme-zone-site-header-banner .header-banner a {
  color: #ffffff;
  text-decoration: underline;
}

.theme-zone-site-footer-extra .footer-extra {
  max-width: 1200px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem);
  color: #cccccc;
  font-size: 0.875rem;
  text-align: center;
}

.theme-zone-site-footer-extra .footer-extra a {
  color: inherit;
}

/* フッター上部（ご予約・お問い合わせ等の最終CTA） */
.theme-zone-site-footer-top .footer-top-cta {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) 1rem;
  text-align: center;
}

.theme-zone-site-footer-top .footer-top-cta-title {
  color: #ffffff;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}

/* フッター最下部（決済対応マーク・認証バッジ等） */
.theme-zone-site-footer-bottom .footer-bottom-extra {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2rem);
  color: var(--footer-text-color, #cccccc);
  font-size: 0.75rem;
  text-align: center;
}

/* エディター専用：告知バー/フッター追加コンテンツの編集画面表示を復元 */
.editor-styles-wrapper .header-banner {
  color: #1a1a1a !important;
  background-color: #f5f0e6 !important;
}

.editor-styles-wrapper .footer-top-cta-title {
  color: #1a1a1a !important;
}

.editor-styles-wrapper .footer-extra {
  color: #1a1a1a !important;
}

/* ==========================================================================
   下層ページヒーロー（Page Header）
   ========================================================================== */
.page-header {
  position: relative;
  width: 100%;
  height: 40vh;
  min-height: 280px;
  max-height: 450px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #111;
  margin: 0 !important;
}

.page-header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
}

.page-header-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  pointer-events: none;
}

.page-header-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.page-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-header-content {
  position: relative;
  text-align: center;
  z-index: 20;
  color: #ffffff;
  margin: 0 !important;
}

.page-header-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem !important;
}

.page-header-sub {
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 !important;
}

/* ==========================================================================
   セクション共通タイトル
   ========================================================================== */
.section-title {
  text-align: center;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: 0.1em;
  margin-bottom: 1.75rem !important;
  color: #333333;
}

.section-subtitle {
  text-align: center;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  color: #555555;
  letter-spacing: 0.05em;
  margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

/* ==========================================================================
   メニューハイライト（3カラムカード）
   ========================================================================== */
.highlight-section {
  width: 100%;
  padding: clamp(4rem, 8vw, 7rem) 1rem;
  background-color: #f9f9f9;
}

@supports (color: oklch(0 0 0)) {
  .highlight-section {
    background-color: oklch(0.97 0.005 90);
  }
}

.highlight-grid {
  max-width: 1100px;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 768px) {
  .highlight-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.highlight-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  margin: 0 !important;
}

.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.highlight-card-image {
  margin: 0 !important;
  overflow: hidden;
}

.highlight-card-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.highlight-card:hover .highlight-card-image img {
  transform: scale(1.05);
}

.highlight-card-title {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  padding: 1.25rem 1.25rem 0.5rem;
  color: #333333;
  margin: 0 !important;
}

.highlight-card-text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #666666;
  padding: 0 1.25rem 1.5rem;
  margin: 0 !important;
}

/* ==========================================================================
   メニューリスト（DRINK / FOOD）
   ========================================================================== */
.menu-section {
  width: 100%;
  padding: clamp(4rem, 8vw, 7rem) 1rem;
}

.menu-section-inner {
  max-width: 800px;
  margin: 0 auto !important;
}

.menu-category {
  margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.menu-category-title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: 0.15em;
  color: #333333;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #333333;
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}

.menu-item {
  padding: clamp(1rem, 2vw, 1.25rem) 0;
  /* border-bottom: 1px solid #e8e8e8; */
  margin: 0 !important;
}

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

.menu-item-header {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 !important;
}

/* WordPressのis-layout-flowを解除してflexに */
.menu-item-header,
.menu-item-header.is-layout-flow,
.menu-item-header.is-layout-constrained {
  display: flex !important;
  flex-direction: row !important;
}

.menu-item-header > * + * {
  margin-block-start: 0 !important;
}

.menu-item-name {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: bold;
  color: #333333;
  margin: 0 !important;
}

.menu-item-price {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: #333333;
  white-space: nowrap;
  margin: 0 !important;
}

.menu-item-desc {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #777777;
  margin-top: 0.375rem !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   アクセス・店舗情報
   ========================================================================== */

.access-section {
  width: 100%;
  padding: clamp(4rem, 8vw, 7rem) 1rem;
}

.access-section-inner {
  max-width: 1100px;
  margin: 0 auto !important;
}

.access-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  margin: 0 !important;
}

@media (min-width: 768px) {
  .access-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* is-layout-flow 解除 */
.access-grid,
.access-grid.is-layout-flow,
.access-grid.is-layout-constrained {
  display: grid !important;
}

.access-grid > * + * {
  margin-block-start: 0 !important;
}

/* テーブル */
.access-table table {
  width: 100%;
  border-collapse: collapse;
}

.access-table th,
.access-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #333333;
  text-align: left;
  font-size: 0.9rem;
  vertical-align: top;
}

/* 縦線。横線(1px)より太くすることで、角で交差しても縦線が途切れず
   常に手前に重なって見えるようにする */
.access-table th {
  width: 30%;
  color: #666666;
  font-weight: bold;
  white-space: nowrap;
  border-right: 2px solid #333333;
}

.access-table td {
  color: #333333;
}

/* 最後の行だけ、横線の色を縦線と同じ色に統一する */
.access-table tr:last-child th,
.access-table tr:last-child td {
  border-bottom-color: #333333;
}

/* マップ */
.map-responsive {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.map-responsive iframe {
  display: block;
  width: 100%;
  min-height: 350px;
}

/* ==========================================================================
   お問い合わせフォーム（Snow Monkey Forms）
   ========================================================================== */
.contact-form-section {
  width: 100%;
  padding: clamp(4rem, 8vw, 6rem) 1rem;
}

.contact-form-wrap {
  max-width: 700px;
  margin: 0 auto !important;
}

/* ==========================================================================
   CTAセクション
   ========================================================================== */
.cta-section {
  position: relative;
  width: 100%;
  min-height: 350px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0 !important;
}

.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
}

.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 10;
  pointer-events: none;
}

.cta-bg-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.cta-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-content {
  position: relative;
  text-align: center;
  z-index: 20;
  color: #ffffff;
  padding: clamp(3rem, 6vw, 5rem) 1rem;
  margin: 0 !important;
}

.cta-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: bold;
  margin-bottom: 1rem !important;
}

.cta-text {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem) !important;
  opacity: 0.9;
}

/* CTAボタン */
.cta-button .wp-block-button__link {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid #ffffff !important;
  padding: 0.875rem 2.5rem !important;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  letter-spacing: 0.05em !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
}

.cta-button .wp-block-button__link:hover {
  background-color: transparent !important;
  color: #ffffff !important;
}

.cta-button-outline .wp-block-button__link {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
}

.cta-button-outline .wp-block-button__link:hover {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #ffffff !important;
}

/* ボタン内アイコン（Font Awesome）。currentColorで文字色に自動追従する */
.cta-button .wp-block-button__link i,
.cta-button-outline .wp-block-button__link i {
  margin-right: 0.4em;
  color: inherit;
}

/* ==========================================================================
   汎用スクロールフェードイン（.scroll-fade）
   ========================================================================== */
.scroll-fade {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.scroll-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   ヘッダー分の余白調整
   ========================================================================== */
/* 固定ヘッダーがコンテンツに重なるのを防ぐため、常に余白を確保しておく。
   hero-section / page-header はこの余白を打ち消して画面最上部まで届かせる
   （404・検索結果など、ヒーローが無いページでも本文が隠れないようにするため） */
.site-main {
  padding-top: var(--header-height);
}

.hero-section,
.page-header {
  margin-top: calc(-1 * var(--header-height)) !important;
}

/* ==========================================================================
   【エディター専用】新規パーツの表示復元
   ========================================================================== */

/* 下層ヒーロー */
.editor-styles-wrapper .page-header {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  background: transparent !important;
}

.editor-styles-wrapper .page-header-bg {
  position: relative !important;
}

.editor-styles-wrapper .page-header-bg::after {
  display: none !important;
}

.editor-styles-wrapper .page-header-image {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
}

.editor-styles-wrapper .page-header-image img {
  height: auto !important;
  max-height: 250px;
  object-fit: cover;
}

.editor-styles-wrapper .page-header-content {
  color: #1a1a1a !important;
}

.editor-styles-wrapper .page-header-title {
  color: #1a1a1a !important;
}

.editor-styles-wrapper .page-header-sub {
  color: #666 !important;
  opacity: 1 !important;
}

/* CTA */
.editor-styles-wrapper .cta-section {
  display: block !important;
  min-height: auto !important;
}

.editor-styles-wrapper .cta-bg {
  position: relative !important;
}

.editor-styles-wrapper .cta-bg::after {
  display: none !important;
}

.editor-styles-wrapper .cta-bg-image {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
}

.editor-styles-wrapper .cta-bg-image img {
  height: auto !important;
  max-height: 200px;
  object-fit: cover;
}

.editor-styles-wrapper .cta-content {
  color: #1a1a1a !important;
}

.editor-styles-wrapper .cta-title {
  color: #1a1a1a !important;
}

.editor-styles-wrapper .cta-text {
  color: #444 !important;
}

/* メニューリスト - menu-item-headerをflexに */
.editor-styles-wrapper .menu-item-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

/* 汎用フェード - エディターでは常に表示 */
.editor-styles-wrapper .scroll-fade {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   お知らせ（カスタム投稿タイプ）
   concept-section/highlight-sectionと同じ構造：
   外側(.news-section)が padding を全部持ち、内側(.news-section-inner)は
   max-width + margin:auto のみ
   ========================================================================== */
.news-section {
  width: 100%;
  padding: clamp(4rem, 8vw, 6rem) 1rem;
}

.news-section-inner {
  max-width: 1100px;
  margin: 0 auto !important;
}

/* カード一覧（highlight-card と同系デザイン） */
.news-grid {
  max-width: 1100px;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-card {
  display: block;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.news-card-image {
  position: relative;
  overflow: hidden;
}

.news-card-image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-card-image img {
  transform: scale(1.05);
}

.news-card-body {
  padding: 1.25rem;
}

.news-card-date {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #999999;
  margin-bottom: 0.5rem;
}

.news-card-title {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: #333333;
  line-height: 1.5;
  margin: 0;
}

.news-empty-notice {
  text-align: center;
  color: #888888;
  padding: 2rem 1rem;
}

/* ==========================================================================
   お知らせ アーカイブ
   ========================================================================== */
.archive-title-bar {
  position: relative;
  width: 100%;
  margin-top: calc(-1 * var(--header-height)) !important;
  padding: calc(var(--header-height) + clamp(2rem, 5vw, 3rem)) 1rem clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  background-color: var(--header-bg-color, #1a1a1a);
  background-image: var(--news-title-bg-image, none);
  background-size: cover;
  background-position: center;
}

/* 背景画像の上に薄暗いオーバーレイを重ねて、画像の明暗に関わらず文字を読みやすくする */
.archive-title-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.archive-title-bar-eyebrow,
.archive-title-bar-title {
  position: relative;
  z-index: 1;
}

.archive-title-bar-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--header-text-color, #ffffff);
  opacity: 0.6;
  margin-bottom: 0.5rem !important;
}

.archive-title-bar-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: 0.05em;
  color: var(--header-text-color, #ffffff);
  margin: 0;
}

/* フィルターバー（カテゴリ・年） */
.news-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid #e8e8e8;
}

.news-filter-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-filter-cats a {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: 50px;
  border: 1px solid #e0e0e0;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: #333333;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.news-filter-cats a:hover {
  border-color: #1a1a1a;
}

.news-filter-cats a.is-active {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}

.news-filter-year select {
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 50px;
  border: 1px solid #e0e0e0;
  font-size: 0.8rem;
  color: #333333;
  background-color: #ffffff;
}

/* カテゴリバッジ（カード画像の左上） */
.news-card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: 50px;
  background-color: rgba(26, 26, 26, 0.8);
  color: #ffffff;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  z-index: 2;
}

.news-archive-section {
  width: 100%;
  padding: clamp(4rem, 8vw, 6rem) 1rem;
}

.news-archive-inner {
  max-width: 1100px;
  margin: 0 auto !important;
}

/* ページネーション */
.news-pagination {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.news-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 50px;
  font-size: 0.875rem;
  color: #333333;
  text-decoration: none;
  border: 1px solid #e8e8e8;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.news-pagination .page-numbers:hover {
  background-color: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}

.news-pagination .page-numbers.current {
  background-color: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}

.news-pagination .page-numbers.dots {
  border: none;
}

/* ==========================================================================
   お知らせ 詳細
   ========================================================================== */
.news-single {
  width: 100%;
  padding: calc(var(--section-spacing) / 2) 1rem;
}

.news-single-inner {
  max-width: 800px;
  margin: 0 auto !important;
}

.news-single-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.news-single-date {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #999999;
}

.news-single-header .news-card-badge {
  position: static;
}

.news-single-thumbnail {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  border-radius: 8px;
  overflow: hidden;
}

.news-single-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

.news-single-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #333333;
}

.news-single-content > * + * {
  margin-top: 1.25em;
}

/* 前・一覧に戻る・次 のナビゲーション */
.news-single-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid #e8e8e8;
}

.news-single-nav a {
  font-size: 0.875rem;
  color: #333333;
  text-decoration: none;
}

.news-single-nav a:hover {
  text-decoration: underline;
}

.news-single-nav-prev {
  text-align: left;
}

.news-single-nav-next {
  text-align: right;
}

.news-single-nav-list {
  text-align: center;
}

.news-single-nav-list a {
  font-weight: bold;
}

/* ==========================================================================
   汎用ボタン（予約・お問い合わせ等）
   文字色・背景色はコアの「ボタン」ブロックの色設定からそのまま変更可能。
   ホバー時は選んだ色に応じて自動的に明暗が変化する（色そのものは指定しない）
   ========================================================================== */
.theme-button .wp-block-button__link {
  padding: 0.875rem 2.5rem;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 50px;
  transition:
    filter 0.3s ease,
    background-color 0.3s ease,
    transform 0.2s ease;
}

.theme-button .wp-block-button__link:hover {
  filter: brightness(0.88);
  transform: translateY(-2px);
}

/* アウトラインスタイル：背景は透明なのでbrightnessではなく薄いcurrentColorを重ねる */
.theme-button.is-style-outline .wp-block-button__link {
  border-width: 2px;
}

.theme-button.is-style-outline .wp-block-button__link:hover {
  filter: none;
  background-color: rgba(
    0,
    0,
    0,
    0.06
  ); /* color-mix未対応ブラウザ向けフォールバック */
}

@supports (background-color: color-mix(in srgb, red 10%, transparent)) {
  .theme-button.is-style-outline .wp-block-button__link:hover {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
  }
}

/* ==========================================================================
   トップへ戻るボタン
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 900;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 2.75rem;
  line-height: 1;
  color: #1a1a1a;
  mix-blend-mode: difference;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    color 0.3s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  color: var(--header-bg-color, #1a1a1a);
  transform: translateY(-3px);
}

@media (max-width: 767px) {
  .back-to-top {
    font-size: 2.25rem;
    right: 1rem;
    bottom: 1rem;
  }
}