/* =========================================================
   FluxCore Pro Generated Custom CSS
   Auto generated from fc_pages.layout_json advanced.custom_css
   Last updated: 2026-10-01 16:58:58
========================================================= */

/* =========================================================
   Page: header / HEADER ページ
========================================================= */

/* Block: global_header / sec_1782112078518 */
/* =========================================================
   bistro2 / global_header
   左固定サイドヘッダー（ワイン面 + 縦書きナビ + 縦書き装飾）
   1024px以下でトップ水平バー、768px以下でハンバーガー
========================================================= */
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: var(--side-header-width, 104px);
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: 22px 10px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(107, 31, 43, .96), rgba(63, 18, 26, .98)),
    var(--bg-wine, #6b1f2b);
  border-right: 1px solid rgba(255, 247, 234, .18);
  border-bottom: none;
  box-shadow: 16px 0 44px rgba(63, 18, 26, .18);
  backdrop-filter: none;
  color: var(--text-light, #fff7ea);
  overflow: hidden;
}

.global-header a {
  color: var(--text-light, #fff7ea);
  text-decoration: none;
}

.global-header i {
  color: inherit;
}

/* 内側の細枠 */
.global-header::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 247, 234, .16);
  pointer-events: none;
  z-index: 0;
}

/* 縦書きの装飾テキスト（透かし） */
/*.global-header::after {
  content: "BISTRO";
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(255, 247, 234, .13);
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}*/

/* SEO用H1（ページ見出し）を縦書きの小さなラベルとして最上部に置く */
.header-page-eyebrow {
  position: static;
  /*top: auto;*/
  right: auto;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  max-height: 20svh;
  overflow: hidden;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-sans, sans-serif);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  color: rgba(255, 247, 234, .66);
  opacity: 1;
  white-space: nowrap;
  text-overflow: clip;
  pointer-events: none;
}

/* ブランド名（縦書き。画像ロゴのときは画像を表示） */
.header-logo {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  margin: 2px 0 0;
  max-height: 32svh;
  overflow: hidden;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2em;
  color: var(--text-light, #fff7ea);
  white-space: nowrap;
}

.header-logo img {
  max-width: 100%;
  margin: 0 auto;
}

/* 縦書きナビ */
.desktop-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 6px 0 0;
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.desktop-nav::-webkit-scrollbar {
  display: none;
}

.desktop-nav a {
  position: relative;
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(255, 247, 234, .82);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .28s ease, transform .28s ease;
}

.desktop-nav a::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-gold, #c5a25a);
  opacity: 0;
  transform: translateX(-50%) scale(.4);
  transition: opacity .28s ease, transform .28s ease;
}

.desktop-nav a::after {
  display: none;
}

.desktop-nav a:hover,
.desktop-nav a.active {
  color: var(--accent-gold, #c5a25a);
  transform: translateY(-2px);
}

.desktop-nav a:hover::before,
.desktop-nav a.active::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* 電話・予約ボタン（最下部） */
.header-btns {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-bottom: 4px;
  flex: 0 0 auto;
}

.header-btns .fc-language-switcher {
  flex-direction: column;
  gap: 4px;
}

.btn-header-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--text-light, #fff7ea);
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
}

.btn-header-tel:hover {
  color: var(--accent-gold, #c5a25a);
}

.btn-header-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 20px 10px;
  border: 1px solid var(--fc-btn-border, #c5a25a);
  border-radius: 999px;
  background: var(--fc-btn-bg, #c5a25a);
  color: var(--fc-btn-fg, #111111);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(32, 23, 19, .28);
  transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.btn-header-reserve:hover {
  background: var(--fc-btn-bg-hover, #f6cf7a);
  border-color: var(--fc-btn-bg-hover, #f6cf7a);
  color: var(--fc-btn-fg-hover, #111111);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(32, 23, 19, .34);
}

/* ハンバーガー（PCでは非表示。オーバーレイ内の閉じるボタンは常に表示） */
.menu-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 247, 234, .34);
  border-radius: 4px;
  background: transparent;
  color: var(--text-light, #fff7ea);
  font-size: 18px;
  cursor: pointer;
  z-index: 1100;
}

.menu-trigger:hover {
  background: rgba(255, 247, 234, .1);
  color: var(--accent-gold, #c5a25a);
}

.mobile-nav-overlay .menu-trigger {
  display: inline-flex;
}

/* スマホメニュー（暗いワイン面 → 文字は明色） */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 76px 24px 40px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 30% 18%, rgba(197, 162, 90, .18), transparent 30%),
    rgba(63, 18, 26, .98);
  color: var(--text-light, #fff7ea);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.19, 1, .22, 1), opacity .32s ease, visibility .32s ease;
}

.mobile-nav-overlay.active,
.mobile-nav-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.mobile-nav-overlay a {
  margin: 10px 0;
  color: var(--text-light, #fff7ea);
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
}

.mobile-nav-overlay a:hover {
  color: var(--accent-gold, #c5a25a);
}

.mobile-nav-overlay .btn-header-reserve {
  writing-mode: horizontal-tb;
  margin-top: 20px;
  padding: 13px 30px;
  font-size: 13px;
  color: var(--fc-btn-fg, #111111);
}

.mobile-nav-overlay .btn-header-reserve:hover {
  color: var(--fc-btn-fg-hover, #111111);
}

/* =========================================================
   タブレット：トップ水平バー（高さ72px）に変換
========================================================= */
@media (max-width: 1024px) {
  .global-header {
    width: 100%;
    height: 72px;
    min-height: 72px;
    padding: 0 20px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background:
      linear-gradient(90deg, rgba(107, 31, 43, .97), rgba(63, 18, 26, .97)),
      var(--bg-wine, #6b1f2b);
    border-right: none;
    border-bottom: 1px solid rgba(255, 247, 234, .18);
    box-shadow: 0 12px 30px rgba(63, 18, 26, .2);
  }

  .global-header::before {
    inset: 7px;
  }

  .global-header::after {
    display: none;
  }

  /* 横バーには置き場所がないため視覚的に隠す（DOMには残す） */
  .header-page-eyebrow {
    position: absolute;
    width: 1px;
    height: 1px;
    max-height: none;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .header-logo {
    writing-mode: horizontal-tb;
    max-height: none;
    margin: 0;
    font-size: 17px;
    letter-spacing: .14em;
  }

  .desktop-nav {
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .desktop-nav a {
    writing-mode: horizontal-tb;
    font-size: 11px;
    letter-spacing: .08em;
  }

  .desktop-nav a::before {
    top: auto;
    bottom: -7px;
  }

  .header-btns {
    flex-direction: row;
    gap: 10px;
    margin-top: 0;
    padding-bottom: 0;
  }

  .header-btns .fc-language-switcher {
    flex-direction: row;
  }

  .btn-header-tel {
    writing-mode: horizontal-tb;
    font-size: 13px;
  }

  .btn-header-reserve {
    writing-mode: horizontal-tb;
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: .1em;
    box-shadow: none;
  }

  .menu-trigger {
    display: none;
  }

  .mobile-nav-overlay .menu-trigger {
    display: inline-flex;
  }
}

/* =========================================================
   スマホ：ハンバーガー
========================================================= */
@media (max-width: 768px) {
  .global-header {
    height: 64px;
    min-height: 64px;
    padding: 0 16px;
    gap: 10px;
  }

  .global-header::before {
    inset: 6px;
  }

  .header-logo {
    font-size: 15px;
    letter-spacing: .1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-nav,
  .header-btns {
    display: none;
  }

  .menu-trigger {
    display: inline-flex;
    margin-left: auto;
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .mobile-nav-overlay {
    padding: 72px 20px 36px;
    justify-content: flex-start;
  }

  .mobile-nav-overlay a {
    margin: 8px 0;
    font-size: 18px;
  }

  .mobile-nav-overlay .btn-header-reserve {
    margin-top: 18px;
    padding: 12px 26px;
  }
}

#sec_1782112078518 > div > a
{
    display: none;
}


/* =========================================================
   Page: index / トラットリア クラフト｜千代田区三番町・市ケ谷のイタリアン
========================================================= */

/* Block: hero_main / sec_1782110119323 */
/* ============================================================
   bistro2 / hero_main
   紙 #f8f1df 基調 × ワイン #6b1f2b アクセントの明色テーマ。
   【改修】MV動画が見切れないよう、写真ウィンドウを
   アーチ窓 → 16:9 の四角い額縁に変更。
   ・台紙の高さ固定をやめ、額縁（16:9）の高さに合わせて伸縮させる。
   ・YouTube iframe のインラインstyle（177.77vh / translate の cover 指定）を
     !important で打ち消し、額縁いっぱいに 16:9 で収める。
   ・color / font-size はPHPがインラインstyleで出すため一切書かない。
   ・キャッチ9方向配置（.hero-cap-*）は blocks.css 側の担当なので書かない。
   ・サイドヘッダー分のオフセットは global_css が担当。padding-left/margin-left は書かない。
   ============================================================ */

/* ── 台紙（ファーストビューの面） ───────────────────────── */
.hero-wrapper {
  position: relative;
  width: auto;
  /* 高さは中の16:9額縁で決まる（固定しない） */
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  /* 額縁の余白と枠の太さ（レスポンシブで差し替える） */
  --fc-hero-frame-y: clamp(28px, 4.6vh, 58px);
  --fc-hero-frame-x: clamp(20px, 4.6vw, 88px);
  --fc-hero-border: 12px;
  /* 額縁の最大高さ（画面に収まるように） */
  --fc-hero-max-h: min(84svh, 820px);
  padding: var(--fc-hero-frame-y) var(--fc-hero-frame-x);
  /* 旧: 紙 → クリーム → ピスタチオ の横グラデ */
  background: linear-gradient(100deg, #f8f1df 0%, #fffaf0 46%, #dbe2c4 100%);
  box-shadow: inset 0 -1px 0 rgba(36, 25, 20, 0.10);
}

/* 左下：ピスタチオの淡いにじみ */
.hero-wrapper::before {
  content: "";
  position: absolute;
  inset: auto auto -14vw -8vw;
  width: 36vw;
  height: 36vw;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(127, 141, 91, 0.30), rgba(127, 141, 91, 0) 68%);
  border: 1px solid rgba(107, 31, 43, 0.10);
  z-index: 1;
  pointer-events: none;
}

/* 右上：朱／ワインのにじみ。style.css の暗幕グラデを明色テーマ用に置換。 */
.hero-wrapper::after {
  content: "";
  position: absolute;
  inset: -10vw -8vw auto auto;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(179, 52, 61, 0.20), rgba(179, 52, 61, 0.06) 62%, rgba(179, 52, 61, 0) 100%);
  filter: blur(2px);
  z-index: 1;
  pointer-events: none;
}

.hero-wrapper.hero-has-slider::after {
  z-index: 1;
}

/* ── 写真ウィンドウ（16:9 の四角い額縁） ─────────────────── */
/* インラインstyle（position:relative; width:90%; height:90%）と
   style.css / blocks.css の width/height:100% を打ち消す。 */
.hero-wrapper > .hero-img-window,
.hero-wrapper > .hero-slider {
  position: relative !important;
  inset: auto !important;
  box-sizing: content-box;
  /* 画面幅いっぱい、ただし高さが --fc-hero-max-h を超えない幅まで */
  width: min(
    calc(100% - var(--fc-hero-border) * 2),
    calc((var(--fc-hero-max-h) - var(--fc-hero-frame-y) * 2 - var(--fc-hero-border) * 2) * 16 / 9)
  ) !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  z-index: 4;
  overflow: hidden;
  border-radius: 0;
  border: var(--fc-hero-border) solid rgba(255, 250, 240, 0.82);
  box-shadow: var(--shadow-strong, 0 34px 72px rgba(36, 25, 20, 0.28));
  background: #201713;
}

/* 動画・画像を額縁いっぱいに（見切れなし） */
.hero-wrapper > .hero-img-window iframe,
.hero-wrapper > .hero-img-window video,
.hero-wrapper > .hero-img-window img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
}

.hero-wrapper > .hero-img-window video,
.hero-wrapper > .hero-img-window img {
  object-fit: cover;
  object-position: center;
  filter: brightness(1.03) contrast(1.05) saturate(1.03);
}

/* 内側の細罫（四角） */
.hero-wrapper > .hero-img-window::before,
.hero-wrapper > .hero-slider::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 3;
  border: 1px solid rgba(255, 247, 234, 0.50);
  border-radius: 0;
  pointer-events: none;
}

/* 暗幕。写真の上の文字（既定 #fff7ea）のコントラスト確保用 */
.hero-wrapper > .hero-img-window::after,
.hero-wrapper > .hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(63, 18, 26, 0.34) 0%, rgba(63, 18, 26, 0.08) 46%, rgba(63, 18, 26, 0.08) 100%),
    linear-gradient(180deg, rgba(32, 23, 19, 0.44) 0%, rgba(32, 23, 19, 0.14) 32%, rgba(32, 23, 19, 0.20) 56%, rgba(32, 23, 19, 0.66) 100%);
}

.hero-slide-img {
  filter: brightness(1.03) contrast(1.05) saturate(1.03);
}

/* ── キャプション ─────────────────────────────────── */
.hero-slide-caption {
  padding: 0 6vw;
  text-shadow:
    0 2px 4px rgba(32, 23, 19, 0.55),
    0 10px 30px rgba(32, 23, 19, 0.50);
}

.hero-slide-caption::before {
  content: "";
  position: absolute;
  inset: -30px 0;
  z-index: -1;
  border-radius: 28px;
  background: radial-gradient(120% 130% at 50% 50%, rgba(32, 23, 19, 0.52) 0%, rgba(32, 23, 19, 0.34) 52%, rgba(32, 23, 19, 0) 100%);
  pointer-events: none;
}

.hero-slide-catch {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 14px;
  font-family: 'Cormorant Garamond', 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.24;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.10),
    0 8px 22px rgba(107, 31, 43, 0.42),
    0 18px 40px rgba(32, 23, 19, 0.48);
}

.hero-slide-catch::after {
  content: "";
  display: block;
  width: clamp(76px, 10vw, 150px);
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(169, 109, 19, 0) 0%,
    var(--accent-gold, #c5a25a) 22%,
    #e6c05a 50%,
    #a96d13 82%,
    rgba(169, 109, 19, 0) 100%);
  opacity: 0.92;
}

.hero-slide-sub {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 2;
  opacity: 0.96;
  text-shadow: 0 2px 12px rgba(32, 23, 19, 0.60);
}

/* ── ドット ───────────────────────────────────────── */
.hero-slider-dots {
  bottom: 26px;
  gap: 10px;
}

.hero-slider-dot {
  width: 30px;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 247, 234, 0.46);
  box-shadow: 0 1px 6px rgba(32, 23, 19, 0.40);
  transition: background 0.3s ease, width 0.3s ease;
}

.hero-slider-dot:hover {
  background: rgba(255, 247, 234, 0.78);
}

.hero-slider-dot.is-active {
  width: 52px;
  background: var(--accent-gold, #c5a25a);
  border-color: transparent;
}

/* ── タブレット ───────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-wrapper {
    --fc-hero-frame-y: clamp(20px, 3.2vh, 40px);
    --fc-hero-frame-x: clamp(16px, 3.4vw, 46px);
    --fc-hero-border: 9px;
    --fc-hero-max-h: min(74svh, 680px);
  }

  .hero-wrapper > .hero-img-window::before,
  .hero-wrapper > .hero-slider::before {
    inset: 12px;
  }

  .hero-slide-catch {
    letter-spacing: 0.10em;
  }
}

/* ── スマートフォン ─────────────────────────────────── */
@media (max-width: 768px) {
  .hero-wrapper {
    margin-top: 60px !important;
    /* 旧CSS踏襲：モバイルは縦グラデに切り替える */
    background: linear-gradient(180deg, #f8f1df 0%, #fffaf0 52%, #dbe2c4 100%);
    --fc-hero-frame-y: 14px;
    --fc-hero-frame-x: 14px;
    --fc-hero-border: 6px;
    --fc-hero-max-h: 100svh; /* スマホは横幅いっぱいを優先 */
  }

  .hero-wrapper::before {
    inset: auto auto -30vw -22vw;
    width: 58vw;
    height: 58vw;
  }

  .hero-wrapper::after {
    inset: -18vw -18vw auto auto;
    width: 52vw;
    height: 52vw;
  }

  /* 旧CSS踏襲：モバイルは内側罫線を出さない */
  .hero-wrapper > .hero-img-window::before,
  .hero-wrapper > .hero-slider::before {
    display: none;
  }

  .hero-slide-caption {
    padding: 0 8vw;
  }

  .hero-slide-caption::before {
    inset: -22px 0;
    border-radius: 22px;
  }

  .hero-slide-catch {
    margin-bottom: 10px;
    letter-spacing: 0.08em;
    line-height: 1.30;
  }

  .hero-slide-catch::after {
    width: clamp(60px, 22vw, 110px);
    height: 3px;
    margin-top: 12px;
  }

  .hero-slide-sub {
    letter-spacing: 0.10em;
    line-height: 1.85;
  }

  .hero-slider-dots {
    bottom: 16px;
    gap: 8px;
  }

  .hero-slider-dot {
    width: 22px;
    height: 3px;
  }

  .hero-slider-dot.is-active {
    width: 38px;
  }
}

/* Block: latest_news_bar / sec_1787973182253 */
/* ============================================================
   latest_news_bar ｜ ビストロ2テーマ
   紙/クリームの帯にワインのアクセント。横1行ピル型。
   base(blocks.base.css) の !important 打ちセレクタには必ず !important で上書き。
   base は var(--vermilion/--gold-light/--text-sub/--font-en) を参照するが
   ビストロ2 :root には未定義 → 実質デッド。有効値で必ず上書きする。
   ============================================================ */

/* 帯：紙/クリームのグラデ。隅に巨大な欧文透かし（本テーマの作法） */
.news-bar-section {
  padding: 60px 24px !important;
  background: linear-gradient(180deg, var(--bg-cream), var(--bg-paper)) !important;
  color: var(--text-main) !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
}
.news-bar-section::before {
  content: "NEWS";
  position: absolute;
  right: -1vw;
  bottom: -2.6rem;
  font-family: var(--font-serif), 'Cormorant Garamond', serif;
  font-size: clamp(6rem, 14vw, 12rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(107, 31, 43, 0.05);
  pointer-events: none;
  z-index: 0;
}

.news-bar-container {
  max-width: 940px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
  z-index: 1;
}

/* 1行ピル：クリーム面＋細いワイン罫＋柔らかい影 */
.news-bar-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 15px 26px !important;
  background: var(--bg-cream) !important;
  border: 1px solid var(--border-wine) !important;
  border-radius: 999px !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-soft) !important;
  text-align: left !important;
  position: relative;
  transition: transform .32s ease, box-shadow .32s ease, background .32s ease, border-color .32s ease;
}
/* カード内側の細い二重罫（本テーマの作法） */
.news-bar-link::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(107, 31, 43, 0.16);
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}
/* 上辺中央に小さな金のひし形スタッド（本テーマの作法） */
.news-bar-link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 8px;
  height: 8px;
  background: var(--accent-gold);
  border: 1px solid rgba(107, 31, 43, 0.28);
  transform: translateX(-50%) rotate(45deg);
  z-index: 2;
}
.news-bar-link + .news-bar-link {
  margin-top: 14px !important;
}
/* ホバーで淡くワインが差す */
.news-bar-link:hover {
  background: linear-gradient(90deg, #faeee7, #f6e2da) !important;
  border-color: rgba(107, 31, 43, 0.5) !important;
  box-shadow: var(--shadow-card) !important;
  transform: translateY(-3px) !important;
}

.news-bar-left {
  position: relative;
  z-index: 1;
}

/* NEWS バッジ：ワイン→朱のグラデ・白抜き・Cormorant */
.news-badge {
  background: linear-gradient(90deg, var(--bg-wine), var(--accent-red)) !important;
  color: #fff !important;
  font-family: var(--font-serif), 'Cormorant Garamond', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
}

/* 日付：深ワインの Cormorant（クリーム面で高コントラスト確保） */
.news-date {
  color: var(--text-wine) !important;
  font-family: var(--font-serif), 'Cormorant Garamond', serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* タイトル：本文濃色。伸縮して省略記号 */
.news-title {
  flex: 1 1 auto !important;
  min-width: 0;
  margin: 0 8px !important;
  color: var(--text-main) !important;
  font-size: 15px !important;
  text-align: left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

/* 矢印：朱。ホバーで右へ */
.news-arrow {
  color: var(--accent-red) !important;
  position: relative;
  z-index: 1;
  transition: transform .28s ease;
}
.news-bar-link:hover .news-arrow {
  transform: translateX(5px);
}

/* ─── タブレット（1024px 以下） ─── */
@media (max-width: 1024px) {
  .news-bar-section {
    padding: 52px 22px !important;
  }
  .news-bar-container {
    max-width: 760px !important;
  }
  .news-bar-link {
    padding: 14px 22px !important;
  }
  .news-bar-section::before {
    font-size: clamp(5rem, 16vw, 9rem);
  }
}

/* ─── スマホ（768px 以下）：縦積み・中央寄せ ─── */
@media (max-width: 768px) {
  .news-bar-section {
    padding: 46px 18px !important;
  }
  .news-bar-section::before {
    font-size: clamp(4rem, 22vw, 7rem);
    bottom: -1.4rem;
  }
  .news-bar-link {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 22px 22px !important;
    border-radius: 26px !important;
  }
  .news-bar-link::before {
    inset: 7px;
    border-radius: 20px;
  }
  .news-title {
    flex: 0 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal;
  }
}

/* Block: free_text_box / sec_1787973108731 */
/* ==========================================================
   業態テーマ「ビストロ2」 / free_text_box（自由テキスト）
   紙 #f8f1df の面にクリーム #fffaf0 のカードを置き、左端にワインの
   縦バー、内側に金のヘアライン、隅に大きな欧文の引用符を透かす。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css が !important を持つプロパティ
     （.free-text-section の padding/background/color/text-align、
      .free-text-container の max-width/margin/padding/background/
      border/border-left/border-radius/box-shadow/text-align、
      .free-text-title と .free-text-desc の各プロパティ）は
     こちらにも !important を付けて上書きする。
     .fc-block-btn 系は base に !important が無いため付けない。
   ========================================================== */

/* ---------- セクション面（紙のグラデーション） ---------- */
.free-text-section {
  position: relative;
  padding: 118px 24px 112px !important;
  background:
    radial-gradient(circle at 88% 6%, rgba(107, 31, 43, .07), transparent 30%),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, #f3e6cd 100%) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: center !important;
}

/* 右上の巨大な欧文引用符（本テーマの透かし作法）。
   低コントラストの装飾なので pointer-events / user-select は無効化する */
.free-text-section::before {
  content: "\201C";
  position: absolute;
  top: -.30em;
  right: 3vw;
  z-index: 0;
  color: rgba(107, 31, 43, .07);
  font-family: 'Cormorant Garamond', var(--font-serif, serif);
  font-size: clamp(11rem, 26vw, 23rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 左下のピスタチオ斜めストライプ（concept_split と同じ族の装飾） */
.free-text-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 26vw;
  height: 26vw;
  max-width: 320px;
  max-height: 320px;
  opacity: .6;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .16) 0,
    rgba(127, 141, 91, .16) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- カード（クリーム面＋ワインの縦バー） ---------- */
/* base は border-left: 4px solid var(--gold) !important を持つので、
   border → border-left の順に書いて確実に上書きする */
.free-text-container {
  position: relative;
  z-index: 5;
  max-width: 950px !important;
  margin: 0 auto !important;
  padding: 52px 56px 54px !important;
  background: var(--bg-cream, #fffaf0) !important;
  border: 1px solid var(--border-main, rgba(36, 25, 20, .16)) !important;
  border-left: 5px solid var(--bg-wine, #6b1f2b) !important;
  border-radius: 4px 20px 20px 4px !important;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, .12)) !important;
  text-align: left !important;
}

/* 内側の金のヘアライン枠（旧 .free-text-box::before の意匠） */
.free-text-container::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 0;
  border: 1px solid rgba(197, 162, 90, .40);
  border-radius: 2px 14px 14px 2px;
  pointer-events: none;
}

/* 右下の金の角線（手書きメニューの罫の名残）。
   カード padding の内側に収まるので本文には重ならない */
.free-text-container::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 0;
  width: 26px;
  height: 26px;
  border-right: 2px solid var(--accent-gold, #c5a25a);
  border-bottom: 2px solid var(--accent-gold, #c5a25a);
  border-radius: 0 0 6px 0;
  opacity: .55;
  pointer-events: none;
}

/* ---------- 見出し（深ワイン・字送り広め） ---------- */
/* コントラスト比 15.4:1（#3f121a on #fffaf0） */
.free-text-title {
  position: relative;
  z-index: 1;
  margin: 0 0 26px !important;
  padding: 0 0 18px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Cormorant Garamond', var(--font-serif, 'Noto Serif JP', serif) !important;
  font-size: clamp(1.4rem, 2.8vw, 2.05rem) !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  letter-spacing: .12em !important;
  overflow-wrap: break-word;
}

/* 見出し下の短い金〜ワインのグラデ罫（本テーマの作法） */
.free-text-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-gold, #c5a25a), var(--bg-wine, #6b1f2b));
}

/* ---------- 本文（行間ゆったり・可変長でも崩れない） ---------- */
/* コントラスト比 15.3:1（#2c1f18 on #fffaf0） */
.free-text-desc {
  position: relative;
  z-index: 1;
  display: block !important;
  margin: 0 !important;
  max-width: 100%;
  color: #2c1f18 !important;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 400;
  line-height: 2.05 !important;
  letter-spacing: .05em !important;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

/* ---------- ボタン（配色はサイト共通の --fc-btn-* に委ねる） ---------- */
/* base の .fc-block-btn 系には !important が無いため、
   .free-text-container を前置した詳細度（0,2,0 / 0,3,0）だけで上書きする */
.free-text-container .fc-block-btn-wrap {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  text-align: left;
}

.free-text-container .fc-block-btn {
  min-height: 52px;
  padding: 0 40px;
  border-radius: 2px;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, .12));
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}

.free-text-container .fc-block-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, .16));
}

/* ==========================================================
   タブレット（1024px 以下）
   ========================================================== */
@media (max-width: 1024px) {
  .free-text-section {
    padding: 92px 22px 88px !important;
  }

  .free-text-section::before {
    right: 1.5vw;
    font-size: clamp(9rem, 27vw, 17rem);
  }

  .free-text-container {
    max-width: 760px !important;
    padding: 44px 44px 46px !important;
  }

  .free-text-title {
    margin-bottom: 24px !important;
    font-size: clamp(1.34rem, 3.4vw, 1.8rem) !important;
  }

  .free-text-desc {
    font-size: .97rem !important;
    line-height: 2.02 !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   base の 768px 側にも !important があるので同じく !important を付ける
   ========================================================== */
@media (max-width: 768px) {
  .free-text-section {
    padding: 68px 16px 70px !important;
  }

  .free-text-section::before {
    top: -.24em;
    right: -1vw;
    color: rgba(107, 31, 43, .06);
    font-size: clamp(7rem, 34vw, 11rem);
  }

  .free-text-section::after {
    width: 46vw;
    height: 46vw;
    opacity: .45;
  }

  .free-text-container {
    padding: 34px 24px 38px !important;
    border-left-width: 4px !important;
    border-radius: 3px 14px 14px 3px !important;
  }

  .free-text-container::before {
    inset: 7px;
    border-radius: 2px 10px 10px 2px;
  }

  .free-text-container::after {
    right: 12px;
    bottom: 12px;
    width: 20px;
    height: 20px;
  }

  .free-text-title {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    font-size: clamp(1.22rem, 5.4vw, 1.55rem) !important;
    line-height: 1.55 !important;
    letter-spacing: .09em !important;
  }

  .free-text-title::after {
    width: 60px;
  }

  .free-text-desc {
    font-size: .94rem !important;
    line-height: 1.98 !important;
    letter-spacing: .04em !important;
  }

  .free-text-container .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .free-text-container .fc-block-btn {
    width: 100%;
    max-width: 320px;
    padding: 0 24px;
    letter-spacing: .1em;
  }
}

/* Block: concept_split / sec_1782110303957 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "OWNER" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}

#sec_1782110303957 > div > div.concept-content > h2,
#sec_1787974004079 > div > div.concept-content > h2
{
        font-size: clamp(1.55rem, 2.5vw, 2.65rem) !important;
}

/* Block: concept_split / sec_1787974004079 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "MENU" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}

/* Block: custom_html / sec_1787974334910 */
/* ============================================================
   custom_html（自由HTML埋め込み）— bistro2 theme
   このブロックは「器」だけ。blocks/custom_html.php が末尾で
   #id インライン<style>を出力し、.custom-html-wrapper /
   .custom-html-inner を padding:0 / max-width:none /
   background:transparent / width:100% に #id+!important で固定する
   （full-bleed 設計）。#id セレクタ(1,1,0)は class セレクタ(0,1,0)に
   !important 同士でも勝つため、コンテナの「余白・最大幅・中央寄せ」は
   テーマCSSから上書き不可＝あえて設定しない。よって base の !important
   2セレクタ(.custom-html-wrapper / .custom-html-inner)には触れない。
   紙#f8f1df × ワインの世界観に「馴染ませる」範囲で、店舗が入れる任意HTMLの
   リンク・見出し・区切り・引用のみ最小限で寄せる（base のこれら子孫向け
   セレクタは !important なし＝こちらも付けない。店舗のインライン/独自クラスで
   上書きできる弱い特定度に留め、見た目を強制しすぎない）。
   ============================================================ */

/* リンク：ワイン → ホバー朱。紙#f8f1df 上：wine 10.0:1 / 朱 5.4:1（本文4.5↑） */
/*.custom-html-inner a {
  color: var(--text-wine);
  text-decoration-color: var(--border-wine);
  text-underline-offset: 2px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.custom-html-inner a:hover,
.custom-html-inner a:focus {
  color: var(--accent-red);
  text-decoration-color: var(--accent-red);
}*/

/* 見出し：Cormorant Garamond・深ワイン・字送り広め。紙 上：14.2:1（大見出し3.0↑） */
.custom-html-inner h1,
.custom-html-inner h2,
.custom-html-inner h3,
.custom-html-inner h4,
.custom-html-inner h5,
.custom-html-inner h6 {
  font-family: var(--font-serif);
  color: var(--bg-wine-dark);
  letter-spacing: .04em;
  line-height: 1.4;
}

/* 区切り線：本テーマ作法の 金→ワイン グラデ罫（面ではなく細い罫なので文字対比の対象外） */
.custom-html-inner hr {
  border: 0;
  height: 2px;
  margin: 28px 0;
  background: linear-gradient(90deg, var(--accent-gold), var(--bg-wine));
  opacity: .85;
}

/* 引用：クリーム面＋細いワイン罫。面 cream#fffaf0 × 文字 ink#241914 = 16.5:1（本文4.5↑） */
.custom-html-inner blockquote {
  margin: 20px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--border-wine);
  background: var(--bg-cream);
  color: var(--text-main);
  line-height: 1.9;
}

/* レスポンシブ（1024px以下 / 768px以下） */
@media (max-width: 1024px) {
  .custom-html-inner hr { margin: 24px 0; }
}
@media (max-width: 768px) {
  .custom-html-inner hr { margin: 20px 0; }
  .custom-html-inner blockquote { padding: 12px 16px; }
}

/* 全体・フォント設定 */
.faq-section {
  background-color: #f2e5cd; /* 柔らかなベージュ背景 */
  padding: 60px 20px;
  font-family: "Shippori Mincho", "Yu Mincho", "游明朝", "MS PMincho", serif; /* 明朝体統一 */
  color: #333333;
  margin-left: var(--side-header-width);
}

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

/* タイトル */
.faq-title {
  text-align: center;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  margin-bottom: 40px;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: center !important;
}

/* Q&Aリスト */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq-item {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid #f0eae1;
}

/* 質問 (Q) */
.faq-question {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.5;
}

.faq-label {
  color: #800020; /* ワインレッド */
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: bold;
}

/* 回答 (A) */
.faq-answer {
  margin: 0;
  padding-left: 28px; /* Qの記号分インデント */
  font-size: 15px;
  line-height: 1.8;
  color: #555555;
}

/* View More ボタン */
.faq-btn-wrapper {
  text-align: center;
  margin-top: 40px;
}

.faq-btn {
  display: inline-block;
  padding: 14px 48px;
  background-color: transparent;
  color: #fff !important; 
  border: 1px solid #800020;
  border-radius: 50px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
}

.faq-btn:hover {
  background-color: #800020;
  color: #ffffff;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .faq-section {
    padding: 40px 16px;
  }
  
  .faq-item {
    padding: 20px;
  }
  
  .faq-question {
    font-size: 16px;
  }
  
  .faq-answer {
    padding-left: 0; /* スマホではインデントを外してスッキリ表現 */
    margin-top: 8px;
  }
}

/* Block: image_grid / sec_1787975022122 */
/* =========================================================
   image_grid（画像挿入パーツ ⑦）／ 業態テーマ「ビストロ2」
   旧 restaurant.fluxcore.store（Magic Closet 断面）の写真ギャラリーの
   世界観を現行マークアップで再現。
   紙 #f8f1df 基調 × ワイン #6b1f2b／強調は朱 #b3343d／細線は金 #c5a25a。
   写真は「クリームの薄い額装（マット）＋柔らかい影＋内側の細い罫＋
   隅の小さな金のひし形」で上品に見せ、ホバーで少し持ち上げつつ写真を寄る。

   ■ 実在クラス（blocks/image_grid.php で確認済み）
     .image-grid-section / .image-grid-container / .image-grid-header /
     .image-grid-title / .image-grid-desc /
     .image-grid（＋ .image-grid-pc-{2,3,4} / .image-grid-sp-{1,2} /
                    .image-grid-shape-{square,circle,rounded,free}）/
     .image-grid-item / .image-grid-empty
   ■ blocks.base.css の image_grid 節に !important は無い → こちらも一切付けない。
     custom.css は base より後に読み込まれるため、同スペシフィシティでも後勝ちで反映される。
   ■ サイドヘッダー分の padding-left / margin-left は書かない（global_css が一括オフセット済み）。

   ■ コントラスト（WCAG）
     見出し #3f121a on 紙 #f8f1df = 14.2:1（グラデ最暗 #f3e6cd でも 13.0:1）… 大見出し3.0以上 OK
     説明   #5d5148 on 紙 #f8f1df = 6.8:1（グラデ最暗 #f3e6cd でも 6.2:1）… 本文4.5以上 OK
     空状態の見出し ワイン #6b1f2b on クリーム #fffaf0 = 10.9:1 … 本文4.5以上 OK
     空状態の補足   #5d5148 on クリーム #fffaf0 = 7.4:1 … 本文4.5以上 OK
     欧文透かし rgba(107,31,43,.05) は装飾（z-index 0・本文の下）で可読対象外。
========================================================= */

/* ---- セクション面（紙＋薄い方眼＋巨大欧文透かし）---- */
.image-grid-section {
  position: relative;
  overflow: hidden;
  padding: 104px 24px 112px;
  background:
    linear-gradient(rgba(107, 31, 43, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.03) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, var(--bg-cream, #fffaf0) 60%, #f3e6cd 100%);
  background-size: 62px 62px, 62px 62px, auto;
  color: var(--text-main, #241914);
}

/* 巨大な欧文透かし（装飾のみ・可読対象外） */
.image-grid-section::before {
  content: "GALLERY";
  position: absolute;
  left: -1.4vw;
  bottom: -2.4rem;
  z-index: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(3rem, 9.5vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(107, 31, 43, 0.05);
  pointer-events: none;
}

.image-grid-container {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---- 見出し ---- */
.image-grid-header {
  position: relative;
  max-width: 860px;
  margin: 0 auto 46px;
  text-align: center;
}

/* 見出し上の朱〜橙の小罫 */
.image-grid-header::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 深ワイン #3f121a on 紙 #f8f1df = 14.2:1 */
.image-grid-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', 'Noto Serif JP', serif);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.16em;
  color: var(--bg-wine-dark, #3f121a);
}

/* 見出し下の金〜ワインのグラデ罫（本テーマの作法） */
.image-grid-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, rgba(197, 162, 90, 0), var(--accent-gold, #c5a25a) 34%, var(--accent-red, #b3343d) 78%, rgba(179, 52, 61, 0));
}

/* #5d5148 on 紙 #f8f1df = 6.8:1 */
.image-grid-desc {
  margin: 22px 0 0;
  font-size: 0.94rem;
  line-height: 2.05;
  letter-spacing: 0.06em;
  color: var(--text-sub, #5d5148);
}

/* ---- グリッド（列数は base と同じ実在クラスで指定・gap はテーマで少し広く）---- */
.image-grid {
  display: grid;
  gap: 22px;
}
.image-grid-pc-2 { grid-template-columns: repeat(2, 1fr); }
.image-grid-pc-3 { grid-template-columns: repeat(3, 1fr); }
.image-grid-pc-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- 各写真：クリームの薄い額装（マット）---- */
.image-grid-item {
  position: relative;
  padding: 10px;
  background: var(--bg-cream, #fffaf0);
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  border-radius: 18px;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12));
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* マットに浮かぶ内側の細い罫（二重罫の作法）。写真より上に置いて拡大しても残す */
.image-grid-item::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 2;
  border: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 13px;
  opacity: 0.4;
  pointer-events: none;
}

/* 隅に小さな金のひし形（マウント風） */
.image-grid-item::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 3;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.6;
  pointer-events: none;
}

.image-grid-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
  border-color: var(--border-wine, rgba(107, 31, 43, 0.28));
}

/* 写真本体（ホバーで少し寄る）。角丸・アスペクトは base の shape クラスに委ねる */
.image-grid-item img {
  transition: transform 0.5s ease, filter 0.5s ease;
}
.image-grid-item:hover img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.02);
}

/* ---- 画像未設定（空状態）---- */
.image-grid-empty {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 46px 28px;
  background: var(--bg-cream, #fffaf0);
  border: 1px dashed var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 18px;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12));
  color: var(--text-wine, #6b1f2b);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.9;
  text-align: center;
}

/* 空状態の上に小さな金のひし形 */
.image-grid-empty::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto 16px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.8;
}

/* =========================================================
   タブレット（〜1024px）
========================================================= */
@media (max-width: 1024px) {
  .image-grid-section {
    padding: 84px 20px 92px;
  }
  .image-grid-section::before {
    font-size: clamp(2.8rem, 12vw, 6.5rem);
  }
  .image-grid-header {
    margin-bottom: 40px;
  }
  .image-grid {
    gap: 18px;
  }
  .image-grid-item {
    padding: 9px;
    border-radius: 16px;
  }
  .image-grid-item::before {
    inset: 4.5px;
    border-radius: 11px;
  }
}

/* =========================================================
   スマートフォン（〜768px）※ SP 列数は base と同じ実在クラスで指定
========================================================= */
@media (max-width: 768px) {
  .image-grid-section {
    padding: 66px 16px 74px;
  }
  .image-grid-section::before {
    font-size: clamp(2.4rem, 20vw, 5rem);
    bottom: -1.4rem;
  }
  .image-grid-header {
    margin-bottom: 32px;
  }
  .image-grid-title {
    letter-spacing: 0.12em;
  }
  .image-grid-desc {
    font-size: 0.88rem;
    line-height: 1.95;
  }
  .image-grid {
    gap: 14px;
  }
  .image-grid-sp-1 { grid-template-columns: 1fr; }
  .image-grid-sp-2 { grid-template-columns: repeat(2, 1fr); }
  .image-grid-item {
    padding: 8px;
    border-radius: 14px;
  }
  .image-grid-item::before {
    inset: 4px;
    border-radius: 10px;
  }
  .image-grid-item::after {
    top: 6px;
    left: 6px;
    width: 5px;
    height: 5px;
  }
  .image-grid-empty {
    padding: 38px 20px;
    border-radius: 14px;
    font-size: 0.9rem;
  }
}

/* Block: instagram_feed / sec_1787975133253 */
/* ==========================================================================
   instagram_feed  ―  ビストロ2テーマ（紙 #f8f1df × ワイン #6b1f2b）
   base(blocks.base.css)の Instagram 系は !important 多数（940-1322 / 1440-1630）。
   base が同一セレクタ＋同一プロパティに !important を持つ箇所は全て !important で上書き。
   base に無いプロパティ(position/overflow/z-index/擬似要素)には !important を付けない。
   ボタン .fc-instagram-embed-action a は base の var(--fc-btn-*) を活かすため未指定
   （サイト共通ボタン配色に追従。直値で塗らない方針）。
   単一プロフィール埋め込み(--legacy)は Instagram 公式カードを活かし base のまま。
   ========================================================================== */

.fc-instagram-embed-section {
  position: relative;
  overflow: hidden;
  padding: 118px 24px !important;
  background:
    radial-gradient(circle at 88% 100%, rgba(174, 185, 139, 0.18), transparent 30%),
    linear-gradient(135deg, var(--bg-paper) 0%, var(--bg-cream) 50%, #f5ead2 100%) !important;
  color: var(--text-main) !important;
  margin-left: var(--side-header-width);
}
.fc-instagram-embed-section::before {
  content: "INSTAGRAM";
  position: absolute;
  right: -1vw;
  bottom: -1rem;
  z-index: 0;
  font-family: var(--font-serif);
  font-size: clamp(8rem, 3vw, 17rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(107, 31, 43, 0.05);
  pointer-events: none;
}
.fc-instagram-embed-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(107, 31, 43, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.55;
  pointer-events: none;
}
.fc-instagram-embed-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.fc-instagram-embed-heading {
  margin-bottom: 42px !important;
}
.fc-instagram-embed-label {
  margin-bottom: 14px !important;
  color: var(--text-wine) !important;
  font-family: var(--font-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
}
.fc-instagram-embed-label::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 11px;
  background: var(--accent-gold);
  transform: rotate(45deg);
}
.fc-instagram-embed-heading h2 {
  margin: 0 0 4px !important;
  color: var(--bg-wine-dark) !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(1.9rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  line-height: 1.34 !important;
  letter-spacing: 0.14em !important;
}
.fc-instagram-embed-heading h2::after {
  content: "";
  display: block;
  width: 66px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-gold), var(--bg-wine));
}
.fc-instagram-embed-heading p {
  max-width: 680px !important;
  margin: 18px auto 0 !important;
  color: #5f5147 !important;
  font-size: 14px !important;
  line-height: 2 !important;
}
.fc-instagram-post-card {
  background: var(--bg-cream) !important;
  border: 1px solid var(--border-wine) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-soft) !important;
}
.fc-instagram-display-photo .fc-instagram-post-card {
  background: var(--bg-cream) !important;
}
.fc-instagram-slider-arrow {
  background: var(--bg-cream) !important;
  color: var(--text-wine) !important;
  border: 1px solid var(--border-wine) !important;
  box-shadow: var(--shadow-soft) !important;
}
.fc-instagram-slider-arrow:hover {
  background: var(--bg-wine) !important;
  color: var(--text-light) !important;
}
.fc-instagram-slider-dot {
  border: 1px solid var(--border-wine) !important;
  background: transparent !important;
}
.fc-instagram-slider-dot.is-active {
  background: var(--bg-wine) !important;
}
@media (max-width: 1024px) {
  .fc-instagram-embed-section {
    padding: 96px 22px !important;
  }
  .fc-instagram-embed-section::before {
    font-size: clamp(5rem, 18vw, 12rem);
  }
}
@media (max-width: 768px) {
  .fc-instagram-embed-section::before {
    right: -2vw;
    bottom: -1.4rem;
    font-size: clamp(4rem, 26vw, 8rem);
  }
  .fc-instagram-embed-heading {
    margin-bottom: 30px !important;
  }
  .fc-instagram-embed-label {
    letter-spacing: 0.22em !important;
  }
  .fc-instagram-embed-heading h2 {
    letter-spacing: 0.08em !important;
  }
  .fc-instagram-embed-heading h2::after {
    width: 54px;
    margin-top: 12px;
  }
}

/* Block: store_info / sec_1785931790498 */
/* =========================================================
   store_info（店舗概要 ⑨）／ 業態テーマ「ビストロ2」
   旧 index_64.css の .shop-info（定義リスト表）＋ .concept-img-wrapper
   （厚いクリーム縁の額縁＋ピスタチオの敷き面）の意匠を現行マークアップで再現。
   紙 #f8f1df 基調 × ワイン #6b1f2b／強調は朱 #b3343d／細線は金 #c5a25a
   ※ blocks.base.css の store_info 節に !important は無いため付けない。
     ただし base と同一プロパティを扱う th/td/img だけは
     .store-info-section を前置（0,2,1）して読み込み順に依存せず勝たせる。
   ※ サイドヘッダー分の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
========================================================= */

/* ---- セクション面（紙＋方眼＋巨大欧文透かし）---- */
.store-info-section {
  position: relative;
  overflow: hidden;
  padding: 106px 24px 114px;
  background:
    linear-gradient(rgba(107, 31, 43, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.032) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, var(--bg-cream, #fffaf0) 58%, #f3e6cd 100%);
  background-size: 60px 60px, 60px 60px, auto;
  color: var(--text-main, #241914);
}

/* 旧 .drinks-section::before 系の巨大欧文透かし（装飾のみ・可読対象外） */
.store-info-section::before {
  content: "INFORMATION";
  position: absolute;
  right: -1.6vw;
  bottom: -2.2rem;
  z-index: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(3rem, 9vw, 8.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: rgba(107, 31, 43, 0.05);
  pointer-events: none;
}

.store-info-container {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---- 見出し ---- */
.store-info-header {
  position: relative;
  max-width: 860px;
  margin: 0 auto 52px;
  text-align: center;
}

/* 見出し上の朱〜橙の小罫 */
.store-info-header::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 深ワイン #3f121a on 紙 #f8f1df = 14.2:1（グラデ最暗 #f3e6cd でも 13.0:1） */
.store-info-title {
  position: relative;
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', 'Noto Serif JP', serif);
  font-size: clamp(1.7rem, 3.4vw, 2.65rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.16em;
  color: var(--bg-wine-dark, #3f121a);
}

/* 見出し下の金〜ワインのグラデ罫（本テーマの作法） */
.store-info-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, rgba(197, 162, 90, 0), var(--accent-gold, #c5a25a) 34%, var(--accent-red, #b3343d) 78%, rgba(179, 52, 61, 0));
}

/* #5d5148 on 紙 #f8f1df = 6.8:1（グラデ最暗 #f3e6cd でも 6.2:1） */
.store-info-desc {
  margin: 22px 0 0;
  font-size: 0.94rem;
  line-height: 2.05;
  letter-spacing: 0.06em;
  color: #5d5148;
}

/* ---- レイアウト（表 ＋ 写真）---- */
.store-info-layout {
  position: relative;
  z-index: 2;
  display: block;
}

.store-info-layout.has-image {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 48px;
  align-items: start;
}

/* 写真なしのときは表を読みやすい幅に絞って中央へ */
.store-info-layout:not(.has-image) .store-info-table-wrap {
  max-width: 860px;
  margin: 0 auto;
}

/* ---- 表の紙箱（クリーム＋上端グラデ＋二重罫＋金のひし形）---- */
.store-info-table-wrap {
  position: relative;
  padding: 44px 46px;
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  border-radius: 26px;
  background-color: var(--bg-cream, #fffaf0);
  background-image: linear-gradient(90deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941) 54%, var(--accent-gold, #c5a25a));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left top;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12));
}

/* 内側の細い二重罫 */
.store-info-table-wrap::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 18px;
  opacity: 0.42;
  pointer-events: none;
}

/* 隅の小さな金のひし形 */
.store-info-table-wrap::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 26px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.68;
  pointer-events: none;
}

/* ---- 定義リスト的な表 ---- */
.store-info-section .store-info-table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: collapse;
}

.store-info-section .store-info-table th,
.store-info-section .store-info-table td {
  padding: 17px 0;
  border-bottom: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  text-align: left;
  vertical-align: top;
  font-size: 0.92rem;
  line-height: 2;
}

/* 見出し列：ワイン文字＋淡いワインの面＋右の縦罫で値列と明確に分ける
   #6b1f2b on クリーム #fffaf0 = 10.88:1（5%ワインを重ねた #f8efe6 でも 9.96:1） */
.store-info-section .store-info-table th {
  width: 152px;
  padding-right: 20px;
  border-right: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  background: rgba(107, 31, 43, 0.05);
  color: var(--text-wine, #6b1f2b);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  white-space: nowrap;
  transition: color 0.28s ease;
}

/* 見出し先頭の小さな金のひし形 */
.store-info-section .store-info-table th::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 0 14px;
  vertical-align: middle;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.85;
}

/* 値列：本文色 #241914 on クリーム #fffaf0 = 16.49:1（ホバー面でも 15.29:1） */
.store-info-section .store-info-table td {
  padding-left: 26px;
  color: var(--text-main, #241914);
  letter-spacing: 0.04em;
  word-break: break-word;
}

.store-info-section .store-info-table tr:last-child th,
.store-info-section .store-info-table tr:last-child td {
  border-bottom: 0;
}

/* 行ホバー：面は 5% の朱、見出し文字は朱 #b3343d
   （クリーム比 5.81:1／ホバー時の見出し面 #fbf0e7 比でも 4.97:1） */
.store-info-section .store-info-table tbody tr {
  transition: background-color 0.28s ease;
}

.store-info-section .store-info-table tbody tr:hover {
  background-color: rgba(179, 52, 61, 0.05);
}

.store-info-section .store-info-table tbody tr:hover th {
  color: var(--accent-red, #b3343d);
}

/* ---- 写真枠（旧 .concept-img-wrapper の額縁）---- */
.store-info-image {
  position: relative;
  width: 100%;
  margin: 0;
}

/* 額の左上に載るワインのタグ（#fff7ea on #6b1f2b = 10.6:1） */
.store-info-image::before {
  content: "Information";
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  padding: 8px 16px;
  background: var(--bg-wine, #6b1f2b);
  color: var(--text-light, #fff7ea);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12));
  pointer-events: none;
}

/* 右下に敷くピスタチオの面（旧 .concept-img-wrapper::after） */
.store-info-image::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  z-index: -1;
  width: 66%;
  height: 54%;
  border-radius: 30px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* base は height:100% / max-height:420px / border-radius:8px を持つので解除。
   厚いクリームの縁＋非対称の角丸でビストロ2の額縁にする */
.store-info-section .store-info-image img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: none;
  min-height: 380px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 10px solid rgba(255, 250, 240, 0.86);
  border-radius: 32px 32px 132px 32px;
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
  filter: saturate(1.03) contrast(1.02);
  transition: transform 0.45s ease, filter 0.45s ease;
}

.store-info-image:hover img {
  transform: rotate(-0.6deg) scale(1.012);
  filter: saturate(1.08) contrast(1.04);
}

/* =========================================================
   タブレット
========================================================= */
@media (max-width: 1024px) {
  .store-info-section {
    padding: 84px 20px 92px;
  }

  .store-info-header {
    margin-bottom: 44px;
  }

  .store-info-layout.has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
  }

  .store-info-table-wrap {
    padding: 36px 30px;
  }

  .store-info-section .store-info-table th {
    width: 132px;
    padding-right: 16px;
  }

  .store-info-section .store-info-table th::before {
    margin-left: 8px;
  }

  .store-info-section .store-info-table td {
    padding-left: 20px;
  }

  .store-info-section .store-info-image img {
    min-height: 300px;
    border-width: 8px;
    border-radius: 26px 26px 104px 26px;
  }
}

/* =========================================================
   スマートフォン（表と写真を縦積み）
========================================================= */
@media (max-width: 768px) {
  .store-info-section {
    padding: 68px 16px 76px;
  }

  .store-info-section::before {
    font-size: clamp(2.6rem, 17vw, 5rem);
    bottom: -1.2rem;
  }

  .store-info-header {
    margin-bottom: 34px;
  }

  .store-info-title {
    letter-spacing: 0.12em;
  }

  .store-info-desc {
    font-size: 0.88rem;
    line-height: 1.95;
  }

  .store-info-layout.has-image {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  /* 写真を上、店舗概要の表を下に縦積み */
  .store-info-image {
    order: -1;
    margin-bottom: 6px;
  }

  .store-info-image::before {
    left: 12px;
    top: 12px;
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .store-info-image::after {
    right: -12px;
    bottom: -12px;
    border-radius: 22px;
  }

  .store-info-section .store-info-image img {
    min-height: 240px;
    aspect-ratio: 16 / 11;
    border-width: 7px;
    border-radius: 22px 22px 78px 22px;
  }

  .store-info-table-wrap {
    padding: 30px 20px;
    border-radius: 20px;
  }

  .store-info-table-wrap::before {
    inset: 7px;
    border-radius: 15px;
  }

  .store-info-table-wrap::after {
    top: 18px;
    right: 18px;
    width: 8px;
    height: 8px;
  }

  .store-info-section .store-info-table th,
  .store-info-section .store-info-table td {
    padding: 14px 0;
    font-size: 0.86rem;
    line-height: 1.95;
  }

  .store-info-section .store-info-table th {
    width: 108px;
    padding-right: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
  }

  .store-info-section .store-info-table th::before {
    width: 5px;
    height: 5px;
    margin: 0 7px 0 8px;
  }

  .store-info-section .store-info-table td {
    padding-left: 16px;
  }
}

/* =========================================================
   小さいスマホ（旧 .shop-info の縦積み定義リスト）
========================================================= */
@media (max-width: 520px) {
  .store-info-section .store-info-table,
  .store-info-section .store-info-table tbody,
  .store-info-section .store-info-table tr,
  .store-info-section .store-info-table th,
  .store-info-section .store-info-table td {
    display: block;
    width: 100%;
  }

  .store-info-section .store-info-table tbody tr {
    padding: 13px 0;
    border-bottom: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  }

  .store-info-section .store-info-table tbody tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .store-info-section .store-info-table th {
    width: 100%;
    padding: 0 0 3px;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    white-space: normal;
  }

  .store-info-section .store-info-table th::before {
    margin-left: 0;
  }

  .store-info-section .store-info-table td {
    padding: 0 0 0 21px;
    border-bottom: 0;
  }
}


#sec_1785931790498 > div > div > div.store-info-table-wrap > table > tbody > tr:nth-child(7),
#sec_1785931790498 > div > div > div.store-info-table-wrap > table > tbody > tr:nth-child(8)
{
    display: none;
}

/* Block: link_button / sec_1787975378719 */
/* =========================================================
   link_button ／ 業態テーマ「ビストロ2」
   任意の見出し＋説明＋複数リンクボタン（inline 横並び／PC・SP列数グリッド）
   旧 page_1_81.css の .lp-btn（pill 型ワインボタン・ホバーで沈む）と
   .lp-sec-title::before（見出し下の短いグラデ罫）の意匠を現行マークアップで再現。
   紙 #f8f1df 基調 × ワイン #6b1f2b／強調は朱 #b3343d／細線は金 #c5a25a
   ※ blocks.base.css の .link-button-* には !important が無いため、
      こちらにも付けない（同一/上位詳細度＋後読みで上書きされる）。
   ※ サイドヘッダー分の padding-left / margin-left は書かない
      （global_css が body [id^="sec_"] に一括オフセット済み）
========================================================= */

/* ---- セクション（紙のグラデ＋方眼＋隅の欧文透かし）---- */
.link-button-section {
  position: relative;
  overflow: hidden;
  padding: 96px 24px 100px;
  background:
    linear-gradient(rgba(107, 31, 43, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.03) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, var(--bg-cream, #fffaf0) 56%, #f3e6cd 100%);
  background-size: 60px 60px, 60px 60px, auto;
  color: var(--text-main, #241914);
}

/* 隅の巨大な欧文透かし（本テーマの作法。装飾なので操作対象にしない） */
/*.link-button-section::before {
  content: "LINK";
  position: absolute;
  right: -1.2vw;
  bottom: -2.2rem;
  z-index: 0;
  color: rgba(107, 31, 43, 0.05);
  font-family: var(--font-en, 'Cormorant Garamond', serif);
  font-size: clamp(4.2rem, 13vw, 11.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}*/

/* 上端の細い金〜ワインのヘアライン（紙を切り替える境目の作法） */
.link-button-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(197, 162, 90, 0) 0%,
    rgba(197, 162, 90, 0.5) 24%,
    rgba(107, 31, 43, 0.32) 62%,
    rgba(107, 31, 43, 0) 100%
  );
  pointer-events: none;
}

/* ---- コンテナ ---- */
.link-button-container {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}

/* ---- 見出し（深ワイン・Cormorant・字送り広め）----
   コントラスト比 14.2:1（#3f121a on #f8f1df）／12.96:1（同 on #f3e6cd） */
.link-button-title {
  position: relative;
  margin: 0 0 18px;
  padding: 14px 0 18px;
  color: var(--bg-wine-dark, #3f121a);
  font-family: 'Cormorant Garamond', var(--font-serif, 'Noto Serif JP', serif);
  font-size: clamp(1.42rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  overflow-wrap: break-word;
}

/* 見出し上の小さな金のひし形 */
.link-button-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.72;
  pointer-events: none;
}

/* 見出し下の短い金〜ワインのグラデ罫 */
.link-button-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 74px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-gold, #c5a25a), var(--bg-wine, #6b1f2b));
}

/* 配置（left / center / right）に合わせて装飾も寄せる */
.link-button-align-center .link-button-title::before {
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.link-button-align-center .link-button-title::after {
  left: 50%;
  transform: translateX(-50%);
}

.link-button-align-right .link-button-title::before {
  left: auto;
  right: 0;
}

.link-button-align-right .link-button-title::after {
  left: auto;
  right: 0;
}

/* ---- 説明文 ----
   base の opacity: 0.88 を解除し、面と文字をセットで指定する。
   紙の最も濃い端 #f3e6cd でも 6.18:1、最も明るい #f8f1df で 6.77:1（#5f5147）。
   ※ --text-muted(#75675c) は #f3e6cd 上で 4.42:1 と 4.5 を割るため使わない */
.link-button-desc {
  margin: 0 0 30px;
  max-width: 660px;
  color: #5f5147;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.92rem;
  line-height: 2.05;
  letter-spacing: 0.045em;
  opacity: 1;
  overflow-wrap: break-word;
}

.link-button-align-center .link-button-desc {
  margin-left: auto;
  margin-right: auto;
}

.link-button-align-right .link-button-desc {
  margin-left: auto;
  margin-right: 0;
}

/* ---- ボタン置き場（横並び／グリッド）---- */
.link-button-buttons.link-button-inline {
  gap: 16px 18px;
  margin-top: 6px;
}

.link-button-grid {
  gap: 16px 18px;
  margin-top: 6px;
}

/* ---- ボタン共通（pill 型）---- */
.link-button-btn {
  position: relative;
  min-height: 54px;
  padding: 0 42px;
  border-radius: 999px;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-align: center;
  transition:
    background 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

/* pill の内側に細い二重罫（本テーマのカード意匠をボタンへ） */
.link-button-btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  pointer-events: none;
  transition: border-color 0.28s ease;
}

/* グリッド時は幅いっぱい（base と同じ挙動を pill 用の余白で上書き） */
.link-button-grid .link-button-btn {
  width: 100%;
  padding: 0 24px;
}

/* キーボード操作の可視化（朱でリング） */
.link-button-btn:focus-visible {
  outline: 2px solid var(--accent-red, #b3343d);
  outline-offset: 3px;
}

/* ---- 塗り（primary）：ワインの pill、ホバーで深ワインへ沈む ----
   コントラスト比 10.6:1（#fff7ea on #6b1f2b）／ホバー 15.0:1（#fff7ea on #3f121a） */
.link-button-btn-primary {
  background: var(--fc-btn-bg, #6b1f2b);
  color: var(--fc-btn-fg, #fff7ea);
  border: 1px solid var(--fc-btn-border, #6b1f2b);
  box-shadow: 0 12px 26px rgba(63, 18, 26, 0.20);
}

.link-button-btn-primary::after {
  border-color: rgba(255, 247, 234, 0.30);
}

.link-button-btn-primary:hover {
  background: var(--fc-btn-bg-hover, #3f121a);
  color: var(--fc-btn-fg-hover, #fff7ea);
  border-color: var(--fc-btn-bg-hover, #3f121a);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(63, 18, 26, 0.28);
}

.link-button-btn-primary:hover::after {
  border-color: rgba(255, 247, 234, 0.44);
}

/* ---- 枠線（outline）：クリーム面に細いワイン罫＋ワイン文字 ----
   コントラスト比 10.9:1（#6b1f2b on #fffaf0）／ホバーは塗りと同じ 10.6:1 */
.link-button-btn-outline {
  background: var(--bg-cream, #fffaf0);
  color: var(--fc-btn-outline-fg, #6b1f2b);
  border: 1px solid var(--fc-btn-border, #6b1f2b);
  box-shadow: 0 8px 20px rgba(63, 18, 26, 0.08);
}

.link-button-btn-outline::after {
  border-color: rgba(107, 31, 43, 0.18);
}

.link-button-btn-outline:hover {
  background: var(--fc-btn-bg, #6b1f2b);
  color: var(--fc-btn-fg, #fff7ea);
  border-color: var(--fc-btn-border, #6b1f2b);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(63, 18, 26, 0.24);
}

.link-button-btn-outline:hover::after {
  border-color: rgba(255, 247, 234, 0.34);
}

/* ---- 外部リンクアイコン（控えめに・ホバーで少しだけ飛ぶ）---- */
.link-button-ext-icon {
  flex: 0 0 auto;
  font-size: 0.74em;
  opacity: 0.72;
  transform: translateY(-1px);
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.link-button-btn:hover .link-button-ext-icon {
  opacity: 1;
  transform: translate(2px, -3px);
}

/* =========================================================
   タブレット（1024px 以下）
   ※ 列数の間引きは 769px 以上に限定する。
      max-width:1024px だけで書くと base の .link-button-sp-* より
      後読みになり、スマホの列数指定を壊すため。
========================================================= */
@media (max-width: 1024px) {
  .link-button-section {
    padding: 78px 22px 84px;
  }

  .link-button-section::before {
    right: -0.8vw;
    bottom: -1.6rem;
    font-size: clamp(3.6rem, 15vw, 8.5rem);
  }

  .link-button-container {
    max-width: 820px;
  }

  .link-button-title {
    font-size: clamp(1.34rem, 3.4vw, 1.82rem);
    letter-spacing: 0.1em;
  }

  .link-button-desc {
    font-size: 0.9rem;
    line-height: 2;
  }

  .link-button-btn {
    min-height: 52px;
    padding: 0 34px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .link-button-pc-3,
  .link-button-pc-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   スマホ（768px 以下）
========================================================= */
@media (max-width: 768px) {
  .link-button-section {
    padding: 60px 18px 66px;
  }

  .link-button-section::before {
    right: -0.6rem;
    bottom: -1.1rem;
    color: rgba(107, 31, 43, 0.045);
    font-size: clamp(3rem, 26vw, 6.4rem);
  }

  .link-button-title {
    margin: 0 0 14px;
    padding: 13px 0 15px;
    font-size: clamp(1.2rem, 5.4vw, 1.52rem);
    line-height: 1.55;
    letter-spacing: 0.09em;
  }

  .link-button-title::before {
    width: 7px;
    height: 7px;
  }

  .link-button-title::after {
    width: 60px;
  }

  .link-button-desc {
    margin-bottom: 24px;
    font-size: 0.87rem;
    line-height: 1.95;
    letter-spacing: 0.035em;
  }

  .link-button-buttons.link-button-inline {
    gap: 12px;
  }

  .link-button-grid {
    gap: 12px;
  }

  .link-button-btn {
    min-height: 50px;
    font-size: 12.5px;
    letter-spacing: 0.1em;
  }

  .link-button-btn::after {
    inset: 3px;
  }

  /* 横並びは 1本ずつ積む。align に応じて左右へ寄る（flex の justify に従う） */
  .link-button-inline .link-button-btn {
    width: 100%;
    max-width: 340px;
    padding: 0 24px;
  }

  .link-button-grid .link-button-btn {
    padding: 0 16px;
  }

  /* SP 2列は文字が詰まるので字送りを締める */
  .link-button-sp-2 .link-button-btn {
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}

/* Block: custom_html / sec_1788430177899 */
/* ============================================================
   custom_html（自由HTML埋め込み）— bistro2 theme
   このブロックは「器」だけ。blocks/custom_html.php が末尾で
   #id インライン<style>を出力し、.custom-html-wrapper /
   .custom-html-inner を padding:0 / max-width:none /
   background:transparent / width:100% に #id+!important で固定する
   （full-bleed 設計）。#id セレクタ(1,1,0)は class セレクタ(0,1,0)に
   !important 同士でも勝つため、コンテナの「余白・最大幅・中央寄せ」は
   テーマCSSから上書き不可＝あえて設定しない。よって base の !important
   2セレクタ(.custom-html-wrapper / .custom-html-inner)には触れない。
   紙#f8f1df × ワインの世界観に「馴染ませる」範囲で、店舗が入れる任意HTMLの
   リンク・見出し・区切り・引用のみ最小限で寄せる（base のこれら子孫向け
   セレクタは !important なし＝こちらも付けない。店舗のインライン/独自クラスで
   上書きできる弱い特定度に留め、見た目を強制しすぎない）。
   ============================================================ */

/* リンク：ワイン → ホバー朱。紙#f8f1df 上：wine 10.0:1 / 朱 5.4:1（本文4.5↑） */
/*.custom-html-inner a {
  color: var(--text-wine);
  text-decoration-color: var(--border-wine);
  text-underline-offset: 2px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.custom-html-inner a:hover,
.custom-html-inner a:focus {
  color: var(--accent-red);
  text-decoration-color: var(--accent-red);
}

/* 見出し：Cormorant Garamond・深ワイン・字送り広め。紙 上：14.2:1（大見出し3.0↑） 
.custom-html-inner h1,
.custom-html-inner h2,
.custom-html-inner h3,
.custom-html-inner h4,
.custom-html-inner h5,
.custom-html-inner h6 {
  font-family: var(--font-serif);
  color: var(--bg-wine-dark);
  letter-spacing: .04em;
  line-height: 1.4;
}

/* 区切り線：本テーマ作法の 金→ワイン グラデ罫（面ではなく細い罫なので文字対比の対象外） 
.custom-html-inner hr {
  border: 0;
  height: 2px;
  margin: 28px 0;
  background: linear-gradient(90deg, var(--accent-gold), var(--bg-wine));
  opacity: .85;
}

/* 引用：クリーム面＋細いワイン罫。面 cream#fffaf0 × 文字 ink#241914 = 16.5:1（本文4.5↑） 
.custom-html-inner blockquote {
  margin: 20px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--border-wine);
  background: var(--bg-cream);
  color: var(--text-main);
  line-height: 1.9;
}

/* レスポンシブ（1024px以下 / 768px以下） 
@media (max-width: 1024px) {
  .custom-html-inner hr { margin: 24px 0; }
}
@media (max-width: 768px) {
  .custom-html-inner hr { margin: 20px 0; }
  .custom-html-inner blockquote { padding: 12px 16px; }
}*/





.top-yoyaku {
  background-image: url(../img/bg-yoyaku.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10rem 0 5rem;
}
.top-yoyaku h2 {
  color: #FFF;
  margin: 0 auto;
  position: relative;
  left: 2rem;
}
.top-yoyaku .top-heading::before {
  filter: invert(1);
}

.top-yoyaku__heading {
  margin: 0 auto;
  width: 14rem;
}


.calendar-wrapper {
  border: 16px solid #ccc;
  width: 100%;
  max-width: 900px;
  margin: 0rem auto 0 auto;
  display: flex;
  background: #fff;
}

.calendar-wrapper a {
  color: #000;
}

.reservation .calendar-wrapper {
  position: relative;
  outline: 1.3rem solid #ccc;
  max-width: 720px;
  width: 90vw;
  margin: 60px auto 0 auto;
  display: flex;
  flex-direction: row;
}

#calendar {
  text-align: center;
  width: 100%;
}

.reservation #calendar {
  text-align: center;
  width: 100%;
  line-height: 1.5;
}

table {
  /* outline: 16px solid #ccc; */
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.reservation table {
  outline: 16px solid #ccc;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
}

th {
  color: #000;
}

.calendar-wrapper th,
.calendar-wrapper td {
  outline: 1px solid #ddd;
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: center;
  color: #111111;
}

td:nth-child(6) .reservation-date,
td:nth-child(6) .reservation-date a {
  color: #8888ff;
}

td:last-child .reservation-date,
td:last-child .reservation-date a {
  color: #ff8888;
}

td.disabled {
  background-color: #eeeeee;
  color: #aaaaaa;
}

/* .reservation-date {
text-decoration: underline;
} */

.reservation-seat {
  font-size: 14px;
}

.reservation-seat.able {
  color: #dd8866;
}

.reservation-disabled {
  color: #aaaaaa;
}
.reservation-date a {
  text-decoration: underline;
  cursor: pointer;
}
.calendar-reservation {
  border-collapse: collapse;
  width: 100%;
  word-break: break-all;
  padding: 20px;
  line-height: 1.8;
  border-left: 1.3rem solid #ccc;
}

.calendar-reservation form {
  padding-top: 0;
  text-align: left;
}

.calendar_date,
.calendar_person,
.calendar_time  {
  font-size: 18px;
  border: 1px solid #000;
  border-radius: 2px;
  padding-left: 1rem;
}

.calendar_person,
.calendar_time {
  width: 100%;
  font-size: 18px;
  padding: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.calendar_button {
  width: 100%;
  font-size: 18px;
  padding: 12px;
  border-radius: 6px;
  background-color: #000;
  color: #fff;
  border: 1px solid #aaaaaa;
  cursor: pointer;
}

.calendar_button:hover {
  opacity: 0.8;
}

.calendar_info {
  font-size: 12px;
  margin: 20px;
  color: #000;
  text-align: left;
}

.calendar_ok {
  color: #dd8866;
}

@media screen and (max-width: 767px) {
  .top-yoyaku {
    padding: 0;
  }
  .reserve {
      margin-top: 0;
  }

  .reservation .reserve {
      margin-top: 0;
  }

  .calendar-wrapper {
      width: 100%;
      margin: 0 auto;
      flex-direction: column;
  }

  .calendar-wrapper {
      font-size: 12px;
  }

  .calendar-reservation {
      padding: 0;
      margin-left: 0;
      border-left: 0;
      border-top: 1.3rem solid #ccc;
  }

  .calendar-reservation form {
      padding: 20px;
  }

  .calendar-reservation form div {
      margin-bottom: 20px;
  }
}

@media screen and (max-width: 450px) {
  .reservation-date {
      font-size: 2.8vw;
  }
}


.reserve-btn {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 999999;
  transform: translateY(-50%);
}

.reserve-btn a {
  display: inline-block;
  padding: 3rem 2rem;
  color: #fff;
  font-size: 16px;
  background-color: #000;
  writing-mode: vertical-lr;
}

@media screen and (max-width: 767px) {
  .reserve-btn {
      right: auto;
      top: initial;
      bottom: 0;
      width: 100%;
      transform: translateY(0);
  }

  .reserve-btn a {
      writing-mode: initial;
      width: 100%;
      padding: 2rem 0;
      text-align: center;
  }

  .reservation {
      padding-left: 3.5rem;
  }

  .reservation .s-reservation {
      padding: 3rem 3.5rem 3rem 0;
  }

  .reservation .calendar-wrapper {
      flex-direction: column;
      outline: 4px solid #ccc;
  }
}

.s-reservation {
  padding: 12rem 0;
}

.s-reservation__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: start;
  justify-content: center;
}

.s-reservation__ttl {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
  margin-right: 1rem;
  position: relative;
}

.s-reservation__ttl__logo {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
  width: 24.4rem;
  max-width: 80%;
}

.s-reservation__ttl__txt {
  font-size: 60px;
  font-size: 6rem;
  font-size: 428.57143%;
  margin: 0 auto;
  text-align: center;
  line-height: 1.4;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
  font-weight: 400;
  position: relative;
  z-index: 2;
  padding-top: 1rem;
}

.s-reservation__content {
  width: 113rem;
  max-width: 75%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #fff;
  padding: 7.5rem 5.61797753% 14rem;
}

.s-reservation__content__list {
  width: 73rem;
  max-width: 100%;
}

.s-reservation__content__item {
  line-height: 1.85714286;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #ccc;
}

.calendar_title,
.calendar_date {
  color: #000;
  font-size: 16px;
}
.reservation-seat.able {
  color: #dd8866;
}
.pageTop .topMenu_content h3, .common__ttl {
  font-size: clamp(3rem, 4.3636363636vw, 4.8rem);
  font-family: "kokuryu", sans-serif;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.pageTop .topMenu_content h3 span, .common__ttl {
  display: block;
}
.pageTop .topMenu_content h3 strong, .common__ttl {
  font-size: clamp(4rem, 5.4545454545vw, 6rem);
  color: #9f917c;
}

#yoyaku > div > h2 > span
{
	text-align: center !important;
    font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
    margin-bottom: 0;
    color: var(--bg-wine-dark, #3f121a) !important;
    font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
}

#sec_1788430177899 > div > div > div
{
	margin-bottom: 5rem;
}

/*#sec_1788430177899
{
	margin-left: var(--side-header-width) !important;
}*/


/* =========================================================
   Page: menu / トラットリア クラフト｜千代田区三番町・市ケ谷のイタリアン_メニュー
========================================================= */

/* Block: hero_page / sec_1785931894365 */
/* =========================================================
   業態テーマ「ビストロ2」 / hero_page（下層ページ共通ヒーロー）
   紙 #f8f1df 基調のテーマだが、この面だけは「写真＋ワインの暗幕」。
   ・背景写真は blocks/hero_page.php がラッパーの inline style で、
     またはセクション背景画像として render.php が #sec_id に出す。
     → CSS 側で background-image を書くと写真を殺すので絶対に書かない。
       longhand（color / size / position / repeat）のみ指定する。
   ・オーバーレイは必ず半透明。単層の最大 α は .62（写真が透ける）。
   ・サイドヘッダー分の padding-left / margin-left は書かない
     （global_css の body [id^="sec_"] が一括オフセット済み）。
   ・style.css:179-196 の .page-hero-wrapper / .ph-* は !important 無し、
     blocks.base.css には .ph-* 系の定義自体が無いため、こちらも !important 不要。
========================================================= */

/* ---------- 台紙 ---------- */
.page-hero-wrapper {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  min-height: clamp(380px, 52svh, 620px);
  padding: 140px 28px 108px;
  overflow: hidden;
  text-align: center;
  color: var(--text-light, #fff7ea);
  background-color: var(--bg-wine-dark, #3f121a);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(197, 162, 90, .38);
  /* セクション背景画像(settings.bg_image)使用時の膜。テーマ既定の
     rgba(248,241,223,.72)（紙色）のままだと写真が白飛びするのでワインの薄膜へ */
  --fc-bg-overlay: rgba(63, 18, 26, .18);
}

/* ---------- 主膜：ワインの暗幕（写真は透ける） ---------- */
.ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    168deg,
    rgba(63, 18, 26, .62) 0%,
    rgba(107, 31, 43, .40) 46%,
    rgba(45, 16, 22, .64) 100%
  );
}

/* 右下の巨大な欧文透かし（本テーマの作法・低コントラスト） */
.ph-overlay::after {
  content: "BISTRO";
  position: absolute;
  right: -2.6vw;
  bottom: -3.2rem;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255, 247, 234, .10);
  pointer-events: none;
}

/* ---------- 副膜：中央のテキスト用スクリム＋周辺のヴィネット ---------- */
.page-hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 56% at 50% 50%,
      rgba(44, 20, 24, .50) 0%,
      rgba(44, 20, 24, .38) 54%,
      rgba(44, 20, 24, 0) 82%),
    radial-gradient(ellipse 118% 100% at 50% 46%,
      rgba(32, 23, 19, 0) 44%,
      rgba(32, 23, 19, .28) 100%);
}

/* ---------- 金の細枠（要所の金） ---------- */
.page-hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgba(255, 247, 234, .20);
  box-shadow: inset 0 0 0 1px rgba(197, 162, 90, .16);
  pointer-events: none;
}

/* ---------- 中身 ---------- */
.ph-container {
  position: relative;
  z-index: 4;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 8px;
}

/* 見出し上の小さな金のひし形 */
.ph-container::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 24px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  box-shadow: 0 0 0 1px rgba(255, 247, 234, .32);
}

/* タイトル（明色 #fff7ea・Cormorant・字送り広め） */
.ph-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: #fff7ea;
  text-shadow: 0 2px 16px rgba(32, 23, 19, .55), 0 0 42px rgba(32, 23, 19, .35);
}

/* 見出し下の短い金グラデ罫（本テーマの作法） */
.ph-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 26px auto 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-gold, #c5a25a) 22%,
    #f6cf7a 50%,
    var(--accent-gold, #c5a25a) 78%,
    transparent 100%
  );
}

/* 説明文 */
.ph-desc {
  max-width: 640px;
  margin: 22px auto 0;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: .92rem;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: .08em;
  color: rgba(255, 247, 234, .92);
  text-shadow: 0 1px 12px rgba(32, 23, 19, .55);
}

/* =========================================================
   タブレット（〜1024px）：ヘッダーが上部 72px の横バーになる
========================================================= */
@media (max-width: 1024px) {
  .page-hero-wrapper {
    min-height: 340px;
    min-height: clamp(340px, 46svh, 520px);
    padding: 124px 22px 88px;
  }

  .page-hero-wrapper::before {
    inset: 11px;
  }

  .ph-overlay::after {
    right: -2vw;
    bottom: -1.8rem;
    font-size: clamp(4.5rem, 18vw, 9rem);
  }

  .ph-container::before {
    margin-bottom: 20px;
  }

  .ph-title {
    font-size: clamp(2rem, 6.4vw, 3.2rem);
    letter-spacing: .15em;
    text-indent: .15em;
  }

  .ph-title::after {
    width: 78px;
    margin-top: 22px;
  }

  .ph-desc {
    font-size: .88rem;
    line-height: 2.05;
  }
}

/* =========================================================
   スマホ（〜768px）：ヘッダーは 64px
========================================================= */
@media (max-width: 768px) {
  .page-hero-wrapper {
    min-height: 300px;
    min-height: clamp(300px, 42svh, 460px);
    padding: 104px 16px 72px;
  }

  .page-hero-wrapper::before {
    inset: 8px;
  }

  /* 縦長画面ではテキスト帯を横に広げて読みやすさを確保 */
  .page-hero-wrapper::after {
    background:
      radial-gradient(ellipse 88% 60% at 50% 50%,
        rgba(44, 20, 24, .52) 0%,
        rgba(44, 20, 24, .40) 56%,
        rgba(44, 20, 24, 0) 86%),
      radial-gradient(ellipse 130% 108% at 50% 46%,
        rgba(32, 23, 19, 0) 46%,
        rgba(32, 23, 19, .30) 100%);
  }

  .ph-overlay::after {
    right: -3vw;
    bottom: -1.1rem;
    font-size: clamp(3.4rem, 26vw, 6.5rem);
    color: rgba(255, 247, 234, .10);
  }

  .ph-container {
    padding: 0 4px;
  }

  .ph-container::before {
    width: 6px;
    height: 6px;
    margin-bottom: 18px;
  }

  .ph-title {
    font-size: clamp(1.7rem, 8.6vw, 2.5rem);
    letter-spacing: .12em;
    text-indent: .12em;
  }

  .ph-title::after {
    width: 62px;
    margin-top: 18px;
  }

  .ph-desc {
    margin-top: 18px;
    font-size: .84rem;
    line-height: 2;
    letter-spacing: .05em;
  }
}

/* Block: link_button / sec_1787977395621 */
/* =========================================================
   link_button ／ 業態テーマ「ビストロ2」
   任意の見出し＋説明＋複数リンクボタン（inline 横並び／PC・SP列数グリッド）
   旧 page_1_81.css の .lp-btn（pill 型ワインボタン・ホバーで沈む）と
   .lp-sec-title::before（見出し下の短いグラデ罫）の意匠を現行マークアップで再現。
   紙 #f8f1df 基調 × ワイン #6b1f2b／強調は朱 #b3343d／細線は金 #c5a25a
   ※ blocks.base.css の .link-button-* には !important が無いため、
      こちらにも付けない（同一/上位詳細度＋後読みで上書きされる）。
   ※ サイドヘッダー分の padding-left / margin-left は書かない
      （global_css が body [id^="sec_"] に一括オフセット済み）
========================================================= */

/* ---- セクション（紙のグラデ＋方眼＋隅の欧文透かし）---- */
.link-button-section {
  position: relative;
  overflow: hidden;
  padding: 96px 24px 100px;
  background:
    linear-gradient(rgba(107, 31, 43, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.03) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, var(--bg-cream, #fffaf0) 56%, #f3e6cd 100%);
  background-size: 60px 60px, 60px 60px, auto;
  color: var(--text-main, #241914);
}

/* 隅の巨大な欧文透かし（本テーマの作法。装飾なので操作対象にしない） */
/*.link-button-section::before {
  content: "LINK";
  position: absolute;
  right: -1.2vw;
  bottom: -2.2rem;
  z-index: 0;
  color: rgba(107, 31, 43, 0.05);
  font-family: var(--font-en, 'Cormorant Garamond', serif);
  font-size: clamp(4.2rem, 13vw, 11.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}*/

/* 上端の細い金〜ワインのヘアライン（紙を切り替える境目の作法） */
.link-button-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(197, 162, 90, 0) 0%,
    rgba(197, 162, 90, 0.5) 24%,
    rgba(107, 31, 43, 0.32) 62%,
    rgba(107, 31, 43, 0) 100%
  );
  pointer-events: none;
}

/* ---- コンテナ ---- */
.link-button-container {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}

/* ---- 見出し（深ワイン・Cormorant・字送り広め）----
   コントラスト比 14.2:1（#3f121a on #f8f1df）／12.96:1（同 on #f3e6cd） */
.link-button-title {
  position: relative;
  margin: 0 0 18px;
  padding: 14px 0 18px;
  color: var(--bg-wine-dark, #3f121a);
  font-family: 'Cormorant Garamond', var(--font-serif, 'Noto Serif JP', serif);
  font-size: clamp(1.42rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  overflow-wrap: break-word;
}

/* 見出し上の小さな金のひし形 */
.link-button-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.72;
  pointer-events: none;
}

/* 見出し下の短い金〜ワインのグラデ罫 */
.link-button-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 74px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-gold, #c5a25a), var(--bg-wine, #6b1f2b));
}

/* 配置（left / center / right）に合わせて装飾も寄せる */
.link-button-align-center .link-button-title::before {
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.link-button-align-center .link-button-title::after {
  left: 50%;
  transform: translateX(-50%);
}

.link-button-align-right .link-button-title::before {
  left: auto;
  right: 0;
}

.link-button-align-right .link-button-title::after {
  left: auto;
  right: 0;
}

/* ---- 説明文 ----
   base の opacity: 0.88 を解除し、面と文字をセットで指定する。
   紙の最も濃い端 #f3e6cd でも 6.18:1、最も明るい #f8f1df で 6.77:1（#5f5147）。
   ※ --text-muted(#75675c) は #f3e6cd 上で 4.42:1 と 4.5 を割るため使わない */
.link-button-desc {
  margin: 0 0 30px;
  max-width: 660px;
  color: #5f5147;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.92rem;
  line-height: 2.05;
  letter-spacing: 0.045em;
  opacity: 1;
  overflow-wrap: break-word;
}

.link-button-align-center .link-button-desc {
  margin-left: auto;
  margin-right: auto;
}

.link-button-align-right .link-button-desc {
  margin-left: auto;
  margin-right: 0;
}

/* ---- ボタン置き場（横並び／グリッド）---- */
.link-button-buttons.link-button-inline {
  gap: 16px 18px;
  margin-top: 6px;
}

.link-button-grid {
  gap: 16px 18px;
  margin-top: 6px;
}

/* ---- ボタン共通（pill 型）---- */
.link-button-btn {
  position: relative;
  min-height: 54px;
  padding: 0 42px;
  border-radius: 999px;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-align: center;
  transition:
    background 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

/* pill の内側に細い二重罫（本テーマのカード意匠をボタンへ） */
.link-button-btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  pointer-events: none;
  transition: border-color 0.28s ease;
}

/* グリッド時は幅いっぱい（base と同じ挙動を pill 用の余白で上書き） */
.link-button-grid .link-button-btn {
  width: 100%;
  padding: 0 24px;
}

/* キーボード操作の可視化（朱でリング） */
.link-button-btn:focus-visible {
  outline: 2px solid var(--accent-red, #b3343d);
  outline-offset: 3px;
}

/* ---- 塗り（primary）：ワインの pill、ホバーで深ワインへ沈む ----
   コントラスト比 10.6:1（#fff7ea on #6b1f2b）／ホバー 15.0:1（#fff7ea on #3f121a） */
.link-button-btn-primary {
  background: var(--fc-btn-bg, #6b1f2b);
  color: var(--fc-btn-fg, #fff7ea);
  border: 1px solid var(--fc-btn-border, #6b1f2b);
  box-shadow: 0 12px 26px rgba(63, 18, 26, 0.20);
}

.link-button-btn-primary::after {
  border-color: rgba(255, 247, 234, 0.30);
}

.link-button-btn-primary:hover {
  background: var(--fc-btn-bg-hover, #3f121a);
  color: var(--fc-btn-fg-hover, #fff7ea);
  border-color: var(--fc-btn-bg-hover, #3f121a);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(63, 18, 26, 0.28);
}

.link-button-btn-primary:hover::after {
  border-color: rgba(255, 247, 234, 0.44);
}

/* ---- 枠線（outline）：クリーム面に細いワイン罫＋ワイン文字 ----
   コントラスト比 10.9:1（#6b1f2b on #fffaf0）／ホバーは塗りと同じ 10.6:1 */
.link-button-btn-outline {
  background: var(--bg-cream, #fffaf0);
  color: var(--fc-btn-outline-fg, #6b1f2b);
  border: 1px solid var(--fc-btn-border, #6b1f2b);
  box-shadow: 0 8px 20px rgba(63, 18, 26, 0.08);
}

.link-button-btn-outline::after {
  border-color: rgba(107, 31, 43, 0.18);
}

.link-button-btn-outline:hover {
  background: var(--fc-btn-bg, #6b1f2b);
  color: var(--fc-btn-fg, #fff7ea);
  border-color: var(--fc-btn-border, #6b1f2b);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(63, 18, 26, 0.24);
}

.link-button-btn-outline:hover::after {
  border-color: rgba(255, 247, 234, 0.34);
}

/* ---- 外部リンクアイコン（控えめに・ホバーで少しだけ飛ぶ）---- */
.link-button-ext-icon {
  flex: 0 0 auto;
  font-size: 0.74em;
  opacity: 0.72;
  transform: translateY(-1px);
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.link-button-btn:hover .link-button-ext-icon {
  opacity: 1;
  transform: translate(2px, -3px);
}

/* =========================================================
   タブレット（1024px 以下）
   ※ 列数の間引きは 769px 以上に限定する。
      max-width:1024px だけで書くと base の .link-button-sp-* より
      後読みになり、スマホの列数指定を壊すため。
========================================================= */
@media (max-width: 1024px) {
  .link-button-section {
    padding: 78px 22px 84px;
  }

  .link-button-section::before {
    right: -0.8vw;
    bottom: -1.6rem;
    font-size: clamp(3.6rem, 15vw, 8.5rem);
  }

  .link-button-container {
    max-width: 820px;
  }

  .link-button-title {
    font-size: clamp(1.34rem, 3.4vw, 1.82rem);
    letter-spacing: 0.1em;
  }

  .link-button-desc {
    font-size: 0.9rem;
    line-height: 2;
  }

  .link-button-btn {
    min-height: 52px;
    padding: 0 34px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .link-button-pc-3,
  .link-button-pc-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   スマホ（768px 以下）
========================================================= */
@media (max-width: 768px) {
  .link-button-section {
    padding: 60px 18px 66px;
  }

  .link-button-section::before {
    right: -0.6rem;
    bottom: -1.1rem;
    color: rgba(107, 31, 43, 0.045);
    font-size: clamp(3rem, 26vw, 6.4rem);
  }

  .link-button-title {
    margin: 0 0 14px;
    padding: 13px 0 15px;
    font-size: clamp(1.2rem, 5.4vw, 1.52rem);
    line-height: 1.55;
    letter-spacing: 0.09em;
  }

  .link-button-title::before {
    width: 7px;
    height: 7px;
  }

  .link-button-title::after {
    width: 60px;
  }

  .link-button-desc {
    margin-bottom: 24px;
    font-size: 0.87rem;
    line-height: 1.95;
    letter-spacing: 0.035em;
  }

  .link-button-buttons.link-button-inline {
    gap: 12px;
  }

  .link-button-grid {
    gap: 12px;
  }

  .link-button-btn {
    min-height: 50px;
    font-size: 12.5px;
    letter-spacing: 0.1em;
  }

  .link-button-btn::after {
    inset: 3px;
  }

  /* 横並びは 1本ずつ積む。align に応じて左右へ寄る（flex の justify に従う） */
  .link-button-inline .link-button-btn {
    width: 100%;
    max-width: 340px;
    padding: 0 24px;
  }

  .link-button-grid .link-button-btn {
    padding: 0 16px;
  }

  /* SP 2列は文字が詰まるので字送りを締める */
  .link-button-sp-2 .link-button-btn {
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}

/* Block: course_list / sec_1787977123940 */
/* =========================================================
   course_list ／ 業態テーマ「ビストロ2」
   旧 courses_75.css の .courses-container / .course-card
   「大判1カラム・左右交互」意匠を現行マークアップで再現
   紙 #f8f1df 基調 × ワイン #6b1f2b アクセント
   ※ サイドヘッダー分のオフセットは global_css が一括適用済み
      （padding-left / margin-left はここには書かない）
========================================================= */

/* ---- セクション（旧 .courses-container）---- */
.course-list-section {
  position: relative;
  overflow: hidden;
  padding: 112px 24px 124px;
  background:
    linear-gradient(rgba(107, 31, 43, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-cream, #fffaf0) 0%, var(--bg-paper, #f8f1df) 60%, #f3e6cd 100%);
  background-size: 64px 64px, 64px 64px, auto;
  color: var(--text-main, #241914);
}

/* 旧 .course-hero::before の巨大欧文透かしをセクション隅へ */
.course-list-section::before {
  content: "COURSE";
  position: absolute;
  right: -1.6vw;
  bottom: -2.6rem;
  z-index: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(5rem, 15vw, 15rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(107, 31, 43, 0.055);
  pointer-events: none;
}

/* ---- 見出し ---- */
.course-list-header {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto 62px;
  text-align: center;
}

.course-list-header::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

.course-list-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.17em;
  color: var(--bg-wine-dark, #3f121a);
}

/* セクション見出し下の短い金〜ワインのグラデ罫 */
.course-list-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 2px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-gold, #c5a25a) 32%, var(--accent-red, #b3343d) 72%, transparent);
}

.course-list-desc {
  max-width: 46em;
  margin: 22px auto 0;
  color: var(--text-wine, #6b1f2b);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 2.05;
  letter-spacing: 0.07em;
}

/* ---- カード列（旧 .courses-container 内の縦積み）---- */
.course-list-grid {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 52px;
}

/* ---- 大判カード（旧 .course-card）---- */
.course-list-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 40px;
  background: var(--bg-cream, #fffaf0);
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12));
  transition: transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
}

.course-list-card:hover {
  transform: translateY(-8px);
  border-color: rgba(107, 31, 43, 0.42);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
}

/* 偶数カードは写真を右へ（旧 .course-card:nth-child(even)）*/
.course-list-card:nth-child(even) .course-list-img {
  order: 2;
}

.course-list-card:nth-child(even) .course-list-body {
  order: 1;
}

/* ---- 写真面（旧 .course-img-box）表示領域を大きく確保 ---- */
.course-list-img {
  position: relative;
  aspect-ratio: auto;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--bg-pistachio, #dbe2c4) 0%, var(--bg-cream, #fffaf0) 58%, #e8dcbc 100%);
  color: var(--bg-wine, #6b1f2b);
  font-size: 58px;
}

.course-list-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(63, 18, 26, 0) 56%, rgba(63, 18, 26, 0.22) 100%);
}

/* 画像未設定時のアイコン（面=ピスタチオ、文字=ワイン） */
.course-list-img i {
  position: relative;
  z-index: 3;
  opacity: 0.5;
}

.course-list-img img {
  position: relative;
  z-index: 1;
  display: block;
  align-self: stretch;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  filter: brightness(1.01) contrast(1.04) saturate(1.04);
  transition: transform 0.55s ease, filter 0.55s ease;
}

.course-list-card:hover .course-list-img img {
  transform: scale(1.055);
  filter: brightness(1.05) contrast(1.06) saturate(1.08);
}

/* ---- テキスト面（旧 .course-info）---- */
.course-list-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 58px;
  background: var(--bg-cream, #fffaf0);
  color: var(--text-main, #241914);
}

.course-list-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941) 52%, var(--accent-gold, #c5a25a));
}

/* 人数メタ（旧デザインの小見出し扱い）*/
.course-list-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--text-wine, #6b1f2b);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.course-list-kicker::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--accent-gold, #c5a25a);
}

/* コース名（旧 .course-title）*/
.course-list-body h3 {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  color: var(--bg-wine-dark, #3f121a);
  font-family: 'Noto Serif JP', 'Shippori Mincho', serif;
  font-size: clamp(1.5rem, 2.7vw, 2.35rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.07em;
}

/* 見出し下の金〜ワイン グラデ罫 */
.course-list-body h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 68px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-gold, #c5a25a), var(--accent-red, #b3343d));
}

/* 説明文（旧 .course-desc）*/
.course-list-text {
  margin: 0 0 26px;
  min-height: 0;
  color: var(--text-muted, #75675c);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: 0.04em;
}

/* 価格（旧 .price-wrap / .price-ex）*/
.course-list-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
  color: var(--accent-red, #b3343d);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.course-list-price small {
  margin-left: 0;
  color: var(--text-muted, #75675c);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* 予約ボタン（旧 .btn-course-reserve／配色は店舗設定の --fc-btn-* を使用）*/
.course-list-reserve {
  align-self: flex-start;
  width: auto;
  min-width: 250px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 32px;
  border: 1px solid var(--fc-btn-border);
  border-radius: 999px;
  background: var(--fc-btn-bg);
  color: var(--fc-btn-fg);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

.course-list-reserve i {
  font-size: 14px;
  line-height: 1;
}

.course-list-reserve:hover {
  background: var(--fc-btn-bg-hover);
  border-color: var(--fc-btn-bg-hover);
  color: var(--fc-btn-fg-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(107, 31, 43, 0.20);
}

.course-list-reserve:focus-visible {
  outline: 2px solid var(--fc-btn-outline-fg);
  outline-offset: 3px;
}

/* =========================================================
   飲み放題・追加オプション（旧 .drinks-section のワイン暗面）
   暗面なので文字は必ず明色 #fff7ea 系
========================================================= */
.drink-option-list {
  position: relative;
  z-index: 2;
  overflow: hidden;
  max-width: 1140px;
  margin: 64px auto 0;
  padding: 66px 58px 58px;
  border: 1px solid rgba(255, 247, 234, 0.18);
  border-radius: 40px;
  background: linear-gradient(135deg, var(--bg-wine, #6b1f2b) 0%, var(--bg-wine-dark, #3f121a) 100%);
  color: var(--text-light, #fff7ea);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
}

/* ピスタチオの円装飾（面を明るくしないよう塗りなし＝コントラスト維持）*/
.drink-option-list::after {
  content: "";
  position: absolute;
  left: -6%;
  bottom: -34%;
  z-index: 0;
  width: 30%;
  aspect-ratio: 1 / 1;
  height: auto;
  border: 1px solid rgba(174, 185, 139, 0.24);
  border-radius: 999px;
  pointer-events: none;
}

.drink-option-list::before {
  content: "OPTION";
  position: absolute;
  right: -1vw;
  top: 1.4rem;
  z-index: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(4rem, 12vw, 12rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 247, 234, 0.055);
  pointer-events: none;
}

.drink-option-list h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 34px;
  padding: 0 0 0 28px;
  color: var(--text-light, #fff7ea);
  font-family: 'Noto Serif JP', 'Shippori Mincho', serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.09em;
}

.drink-option-list h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-gold, #c5a25a), var(--accent-orange, #d97941));
}

.drink-option-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(255, 247, 234, 0.16);
  color: var(--text-light, #fff7ea);
  transition: border-color 0.28s ease;
}

.drink-option-row:last-child {
  border-bottom: none;
}

.drink-option-row:hover {
  border-color: rgba(197, 162, 90, 0.55);
}

.drink-option-row span {
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--text-light, #fff7ea);
}

.drink-option-row strong {
  flex-shrink: 0;
  color: var(--accent-gold, #c5a25a);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}

/* =========================================================
   タブレット（1024px 以下）
========================================================= */
@media (max-width: 1024px) {
  .course-list-section {
    padding: 88px 20px 96px;
  }

  .course-list-section::before {
    font-size: clamp(4rem, 16vw, 11rem);
  }

  .course-list-header {
    margin-bottom: 48px;
  }

  .course-list-grid {
    gap: 40px;
  }

  .course-list-card,
  .course-list-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .course-list-card:nth-child(even) .course-list-img,
  .course-list-card:nth-child(even) .course-list-body {
    order: 0;
  }

  .course-list-img,
  .course-list-img img {
    min-height: 340px;
  }

  .course-list-body {
    padding: 44px 44px 48px;
  }

  .drink-option-list {
    margin-top: 52px;
    padding: 56px 44px 48px;
  }
}

/* =========================================================
   スマホ（768px 以下）
========================================================= */
@media (max-width: 768px) {
  .course-list-section {
    padding: 66px 16px 78px;
  }

  .course-list-section::before {
    right: -3vw;
    bottom: -1.4rem;
    font-size: clamp(3.4rem, 22vw, 7rem);
    color: rgba(107, 31, 43, 0.045);
  }

  .course-list-header {
    margin-bottom: 38px;
  }

  .course-list-header::before {
    width: 38px;
    margin-bottom: 18px;
  }

  .course-list-title {
    font-size: clamp(1.55rem, 7.5vw, 2.1rem);
    letter-spacing: 0.13em;
  }

  .course-list-title::after {
    width: 72px;
    margin-top: 16px;
  }

  .course-list-desc {
    margin-top: 18px;
    font-size: 0.88rem;
    line-height: 1.95;
  }

  .course-list-grid {
    gap: 30px;
  }

  .course-list-card {
    border-radius: 26px;
  }

  .course-list-img,
  .course-list-img img {
    min-height: 260px;
  }

  .course-list-img {
    font-size: 44px;
  }

  .course-list-body {
    padding: 32px 24px 36px;
  }

  .course-list-body h3 {
    margin-bottom: 18px;
    padding-bottom: 14px;
    font-size: 1.42rem;
  }

  .course-list-text {
    margin-bottom: 22px;
    font-size: 0.9rem;
    line-height: 2;
  }

  .course-list-price {
    margin-bottom: 24px;
    font-size: 2.1rem;
  }

  .course-list-reserve {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 14px 20px;
    font-size: 12.5px;
  }

  .drink-option-list {
    margin-top: 44px;
    padding: 44px 24px 36px;
    border-radius: 26px;
  }

  .drink-option-list::before {
    right: -3vw;
    top: 0.8rem;
    font-size: clamp(3.2rem, 20vw, 6rem);
  }

  .drink-option-list h3 {
    margin-bottom: 26px;
    padding-left: 20px;
    font-size: 1.35rem;
  }

  .drink-option-row {
    gap: 16px;
    padding: 16px 0;
  }

  .drink-option-row span {
    font-size: 0.9rem;
  }

  .drink-option-row strong {
    font-size: 1.25rem;
  }
}

/* =========================================================
   小型スマホ（480px 以下）
========================================================= */
@media (max-width: 480px) {
  .course-list-section {
    padding: 54px 12px 64px;
  }

  .course-list-img,
  .course-list-img img {
    min-height: 220px;
  }

  .course-list-body {
    padding: 26px 20px 30px;
  }

  .course-list-body h3 {
    font-size: 1.24rem;
  }

  .course-list-price {
    font-size: 1.9rem;
  }

  .drink-option-list {
    padding: 38px 18px 30px;
  }

  .drink-option-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Block: menu_category_grid / sec_1787989807846 */
/* ==========================================================
   BISTRO2 / menu_category_grid
   紙(#f8f1df〜#fffaf0)ベース + ワイン(#6b1f2b)アクセント
   旧 restaurant テンプレ menu_74.css の意匠を現行マークアップへ移植
   ========================================================== */

/* ---------- セクション全体：方眼紙テクスチャ ---------- */
.menu-grid-section {
  padding: 0;
  background:
    linear-gradient(rgba(107, 31, 43, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.045) 1px, transparent 1px),
    var(--bg-cream, #fffaf0);
  background-size: 56px 56px, 56px 56px, auto;
  color: var(--text-main, #241914);
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  line-height: 1.9;
  letter-spacing: 0.045em;
}

/* ---------- セクション見出し ---------- */
.menu-section-header {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 92px 40px 6px;
  text-align: center;
}

.menu-main-title {
  margin: 0;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg-wine-dark, #3f121a);
}

.menu-main-title::after {
  content: '';
  display: block;
  width: 84px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-red, #b3343d), transparent);
}

.menu-sub-text {
  max-width: 640px;
  margin: 18px auto 0;
  font-family: "Shippori Mincho", "Yu Mincho", serif !important;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--text-muted, #75675c);
}

/* ---------- カテゴリコンテナ（全幅化） ---------- */
.menu-cat-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------- カテゴリブロック：奇数=クリーム / 偶数=ピスタチオ淡 ---------- */
.menu-cat-block {
  position: relative;
  margin: 0;
  padding: 64px 60px 72px;
}

.menu-cat-block:nth-child(odd) {
  background: transparent;
}

.menu-cat-block:nth-child(even) {
  background:
    linear-gradient(rgba(127, 141, 91, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 141, 91, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, rgba(219, 226, 196, 0.5), rgba(255, 250, 240, 0.5)),
    var(--bg-cream, #fffaf0);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

/* ---------- カテゴリヘッダー（中央 + 左右ヘアライン） ---------- */
.menu-cat-header {
  max-width: 1200px;
  margin: 0 auto 34px;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}

.menu-cat-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.12em;
  color: var(--bg-wine-dark, #3f121a);
}

.menu-cat-name::before,
.menu-cat-name::after {
  content: '';
  flex: 1 1 auto;
  min-width: 24px;
  max-width: 240px;
  height: 1px;
}

.menu-cat-name::before {
  background: linear-gradient(90deg, transparent, var(--border-wine, rgba(107, 31, 43, 0.28)) 62%, var(--accent-red, #b3343d));
}

.menu-cat-name::after {
  background: linear-gradient(270deg, transparent, var(--border-wine, rgba(107, 31, 43, 0.28)) 62%, var(--accent-red, #b3343d));
}

.menu-cat-desc {
  max-width: 720px;
  margin: 14px auto 0;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.85rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text-muted, #75675c);
}

/* ---------- アイテムグリッド ---------- */
.menu-items-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* ---------- 写真ありカード（旧 .menu-card） ---------- */
.menu-item-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 250, 240, 0.96);
  color: var(--text-main, #241914);
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  border-radius: 26px;
  box-shadow: 0 8px 28px rgba(32, 23, 19, 0.08);
  transition: transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
}

.menu-item-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
  border-color: rgba(107, 31, 43, 0.38);
}

.mi-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-paper, #f8f1df);
}

.mi-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94) contrast(1.04) saturate(1.02);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.menu-item-card:hover .mi-img-box img {
  transform: scale(1.08);
  filter: brightness(1.04) contrast(1.05) saturate(1.08);
}

.mi-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}

.mi-title {
  margin: 0;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--bg-wine-dark, #3f121a);
  transition: color 0.28s ease;
}

.menu-item-card:hover .mi-title {
  color: var(--accent-red, #b3343d);
}

.mi-text {
  margin: 0;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 0.82rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-muted, #75675c);
  flex-grow: 0;
}

.menu-item-card:not(.no-image) .mi-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
}

.mi-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.mi-duration {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted, #75675c);
}

.mi-duration i {
  margin-right: 5px;
  color: var(--accent-red, #b3343d);
}

.mi-price {
  margin: 0 0 0 auto;
  text-align: right;
}

.price-in {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent-red, #b3343d);
}

/* ---------- 写真なし＝クラシックなお品書き行 ---------- */
.menu-item-card.no-image {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1 / -1;
  gap: 0;
  padding: 15px 6px;
  overflow: visible;
  background: transparent;
  color: var(--text-main, #241914);
  border: 0;
  border-bottom: 1px dashed var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 0;
  box-shadow: none;
  transition: background 0.28s ease;
}

.menu-item-card.no-image:hover {
  transform: none;
  box-shadow: none;
  background: rgba(107, 31, 43, 0.045);
}

.menu-item-card.no-image .mi-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 5px;
  align-items: baseline;
  padding: 0;
}

.menu-item-card.no-image .mi-title {
  grid-column: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.menu-item-card.no-image:hover .mi-title {
  color: var(--accent-red, #b3343d);
}

.menu-item-card.no-image .mi-text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.75;
 font-family: "Shippori Mincho", "Yu Mincho", serif;
}

.menu-item-card.no-image .mi-meta {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.menu-item-card.no-image .mi-price {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.menu-item-card.no-image .price-in {
  font-size: 1.2rem;
}

/* ---------- 売切れ ---------- */
/* PHP が inline style="opacity:0.6" を出力するが、0.6 では最も濃い文字でも
   クリーム地に対し 4.46:1 までしか出ず本文基準を満たさないため 0.8 に引き上げる。 */
.menu-item-card.is-sold-out {
  opacity: 0.8 !important;
  filter: saturate(0.72);
  border-color: rgba(107, 31, 43, 0.2);
}

.menu-item-card.is-sold-out:hover {
  transform: none;
  box-shadow: 0 8px 28px rgba(32, 23, 19, 0.08);
}

.menu-item-card.is-sold-out .mi-img-box img {
  filter: grayscale(0.62) brightness(0.88);
}

.menu-item-card.is-sold-out:hover .mi-img-box img {
  transform: none;
  filter: grayscale(0.62) brightness(0.88);
}

.menu-item-card.is-sold-out .mi-text {
  color: #4d4239;
}

.menu-item-card.is-sold-out .price-in {
  color: #8f2730;
}

/* 写真ありカードの SOLD OUT オーバーレイ（旧 .sold-out-overlay） */
.mi-sold-out {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(63, 18, 26, 0.78);
  color: #f6cf7a;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* 写真なし行は画像オーバーレイが無いのでタイトル横にバッジを付ける */
.menu-item-card.no-image.is-sold-out .mi-title::after {
  content: 'SOLD OUT';
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-wine-dark, #3f121a);
  color: var(--text-light, #fff7ea);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.5;
  vertical-align: middle;
}

/* ---------- タブレット ---------- */
@media (max-width: 1024px) {
  .menu-section-header {
    padding: 76px 32px 4px;
  }

  .menu-cat-block {
    padding: 56px 40px 60px;
  }

  .menu-cat-name {
    gap: 14px;
  }

  .menu-cat-name::before,
  .menu-cat-name::after {
    max-width: 160px;
  }

  .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
  }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .menu-grid-section {
    padding: 0;
    background-size: 44px 44px, 44px 44px, auto;
  }

  .menu-section-header {
    padding: 56px 20px 0;
  }

  .menu-main-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    letter-spacing: 0.14em;
  }

  .menu-sub-text {
    font-size: 0.82rem;
    line-height: 1.9;
  }

  .menu-cat-block {
    padding: 44px 20px 48px;
  }

  .menu-cat-block:nth-child(even) {
    background-size: 44px 44px, 44px 44px, auto, auto;
  }

  .menu-cat-header {
    margin-bottom: 26px;
  }

  .menu-cat-name {
    font-size: 1.12rem;
    gap: 10px;
    letter-spacing: 0.08em;
  }

  .menu-cat-name::before,
  .menu-cat-name::after {
    min-width: 14px;
    max-width: 80px;
  }

  .menu-cat-desc {
    font-size: 0.8rem;
    line-height: 1.85;
  }

  .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  .menu-item-card {
    padding: 0;
    gap: 0;
    border-radius: 20px;
  }

  .mi-img-box {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .mi-info {
    padding: 15px 16px 18px;
  }

  .mi-title {
    font-size: 0.94rem;
  }

  .mi-text {
    font-size: 0.79rem;
  }

  .mi-meta {
    padding-top: 10px;
  }

  .price-in {
    font-size: 1.3rem;
  }

  .menu-item-card.no-image {
    padding: 13px 2px;
  }

  .menu-item-card.no-image .mi-info {
    column-gap: 12px;
  }

  .menu-item-card.no-image .mi-title {
    font-size: 0.92rem;
  }

  .menu-item-card.no-image .mi-text {
    font-size: 0.76rem;
  }

  .menu-item-card.no-image .price-in {
    font-size: 1.08rem;
  }
}

/* ---------- 小さいスマホ ---------- */
@media (max-width: 480px) {
  .menu-cat-block {
    padding: 38px 16px 42px;
  }

  .menu-cat-name {
    font-size: 1.02rem;
    gap: 8px;
  }

  .menu-items-grid {
    grid-template-columns: 1fr;
  }

  .price-in {
    font-size: 1.24rem;
  }
}

/* Block: menu_category_grid / sec_1787990017515 */
/* ==========================================================
   BISTRO2 / menu_category_grid
   紙(#f8f1df〜#fffaf0)ベース + ワイン(#6b1f2b)アクセント
   旧 restaurant テンプレ menu_74.css の意匠を現行マークアップへ移植
   ========================================================== */

/* ---------- セクション全体：方眼紙テクスチャ ---------- */
.menu-grid-section {
  padding: 0;
  background:
    linear-gradient(rgba(107, 31, 43, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.045) 1px, transparent 1px),
    var(--bg-cream, #fffaf0);
  background-size: 56px 56px, 56px 56px, auto;
  color: var(--text-main, #241914);
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  line-height: 1.9;
  letter-spacing: 0.045em;
}

/* ---------- セクション見出し ---------- */
.menu-section-header {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 92px 40px 6px;
  text-align: center;
}

.menu-main-title {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg-wine-dark, #3f121a);
}

.menu-main-title::after {
  content: '';
  display: block;
  width: 84px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-red, #b3343d), transparent);
}

.menu-sub-text {
  max-width: 640px;
  margin: 18px auto 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--text-muted, #75675c);
}

/* ---------- カテゴリコンテナ（全幅化） ---------- */
.menu-cat-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------- カテゴリブロック：奇数=クリーム / 偶数=ピスタチオ淡 ---------- */
.menu-cat-block {
  position: relative;
  margin: 0;
  padding: 64px 60px 72px;
}

.menu-cat-block:nth-child(odd) {
  background: transparent;
}

.menu-cat-block:nth-child(even) {
  background:
    linear-gradient(rgba(127, 141, 91, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 141, 91, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, rgba(219, 226, 196, 0.5), rgba(255, 250, 240, 0.5)),
    var(--bg-cream, #fffaf0);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

/* ---------- カテゴリヘッダー（中央 + 左右ヘアライン） ---------- */
.menu-cat-header {
  max-width: 1200px;
  margin: 0 auto 34px;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}

.menu-cat-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  font-family: 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.12em;
  color: var(--bg-wine-dark, #3f121a);
}

.menu-cat-name::before,
.menu-cat-name::after {
  content: '';
  flex: 1 1 auto;
  min-width: 24px;
  max-width: 240px;
  height: 1px;
}

.menu-cat-name::before {
  background: linear-gradient(90deg, transparent, var(--border-wine, rgba(107, 31, 43, 0.28)) 62%, var(--accent-red, #b3343d));
}

.menu-cat-name::after {
  background: linear-gradient(270deg, transparent, var(--border-wine, rgba(107, 31, 43, 0.28)) 62%, var(--accent-red, #b3343d));
}

.menu-cat-desc {
  max-width: 720px;
  margin: 14px auto 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.85rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text-muted, #75675c);
}

/* ---------- アイテムグリッド ---------- */
.menu-items-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* ---------- 写真ありカード（旧 .menu-card） ---------- */
.menu-item-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 250, 240, 0.96);
  color: var(--text-main, #241914);
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  border-radius: 26px;
  box-shadow: 0 8px 28px rgba(32, 23, 19, 0.08);
  transition: transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
}

.menu-item-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
  border-color: rgba(107, 31, 43, 0.38);
}

.mi-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-paper, #f8f1df);
}

.mi-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94) contrast(1.04) saturate(1.02);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.menu-item-card:hover .mi-img-box img {
  transform: scale(1.08);
  filter: brightness(1.04) contrast(1.05) saturate(1.08);
}

.mi-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}

.mi-title {
  margin: 0;
  font-family: 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--bg-wine-dark, #3f121a);
  transition: color 0.28s ease;
}

.menu-item-card:hover .mi-title {
  color: var(--accent-red, #b3343d);
}

.mi-text {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.82rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-muted, #75675c);
  flex-grow: 0;
}

.menu-item-card:not(.no-image) .mi-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mi-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.mi-duration {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted, #75675c);
}

.mi-duration i {
  margin-right: 5px;
  color: var(--accent-red, #b3343d);
}

.mi-price {
  margin: 0 0 0 auto;
  text-align: right;
}

.price-in {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent-red, #b3343d);
}

/* ---------- 写真なし＝クラシックなお品書き行 ---------- */
.menu-item-card.no-image {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1 / -1;
  gap: 0;
  padding: 15px 6px;
  overflow: visible;
  background: transparent;
  color: var(--text-main, #241914);
  border: 0;
  border-bottom: 1px dashed var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 0;
  box-shadow: none;
  transition: background 0.28s ease;
}

.menu-item-card.no-image:hover {
  transform: none;
  box-shadow: none;
  background: rgba(107, 31, 43, 0.045);
}

.menu-item-card.no-image .mi-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 5px;
  align-items: baseline;
  padding: 0;
}

.menu-item-card.no-image .mi-title {
  grid-column: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.menu-item-card.no-image:hover .mi-title {
  color: var(--accent-red, #b3343d);
}

.menu-item-card.no-image .mi-text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.75;
}

.menu-item-card.no-image .mi-meta {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.menu-item-card.no-image .mi-price {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.menu-item-card.no-image .price-in {
  font-size: 1.2rem;
}

/* ---------- 売切れ ---------- */
/* PHP が inline style="opacity:0.6" を出力するが、0.6 では最も濃い文字でも
   クリーム地に対し 4.46:1 までしか出ず本文基準を満たさないため 0.8 に引き上げる。 */
.menu-item-card.is-sold-out {
  opacity: 0.8 !important;
  filter: saturate(0.72);
  border-color: rgba(107, 31, 43, 0.2);
}

.menu-item-card.is-sold-out:hover {
  transform: none;
  box-shadow: 0 8px 28px rgba(32, 23, 19, 0.08);
}

.menu-item-card.is-sold-out .mi-img-box img {
  filter: grayscale(0.62) brightness(0.88);
}

.menu-item-card.is-sold-out:hover .mi-img-box img {
  transform: none;
  filter: grayscale(0.62) brightness(0.88);
}

.menu-item-card.is-sold-out .mi-text {
  color: #4d4239;
}

.menu-item-card.is-sold-out .price-in {
  color: #8f2730;
}

/* 写真ありカードの SOLD OUT オーバーレイ（旧 .sold-out-overlay） */
.mi-sold-out {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(63, 18, 26, 0.78);
  color: #f6cf7a;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* 写真なし行は画像オーバーレイが無いのでタイトル横にバッジを付ける */
.menu-item-card.no-image.is-sold-out .mi-title::after {
  content: 'SOLD OUT';
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-wine-dark, #3f121a);
  color: var(--text-light, #fff7ea);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.5;
  vertical-align: middle;
}

/* ---------- タブレット ---------- */
@media (max-width: 1024px) {
  .menu-section-header {
    padding: 76px 32px 4px;
  }

  .menu-cat-block {
    padding: 56px 40px 60px;
  }

  .menu-cat-name {
    gap: 14px;
  }

  .menu-cat-name::before,
  .menu-cat-name::after {
    max-width: 160px;
  }

  .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
  }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .menu-grid-section {
    padding: 0;
    background-size: 44px 44px, 44px 44px, auto;
  }

  .menu-section-header {
    padding: 56px 20px 0;
  }

  .menu-main-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    letter-spacing: 0.14em;
  }

  .menu-sub-text {
    font-size: 0.82rem;
    line-height: 1.9;
  }

  .menu-cat-block {
    padding: 44px 20px 48px;
  }

  .menu-cat-block:nth-child(even) {
    background-size: 44px 44px, 44px 44px, auto, auto;
  }

  .menu-cat-header {
    margin-bottom: 26px;
  }

  .menu-cat-name {
    font-size: 1.12rem;
    gap: 10px;
    letter-spacing: 0.08em;
  }

  .menu-cat-name::before,
  .menu-cat-name::after {
    min-width: 14px;
    max-width: 80px;
  }

  .menu-cat-desc {
    font-size: 0.8rem;
    line-height: 1.85;
  }

  .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  .menu-item-card {
    padding: 0;
    gap: 0;
    border-radius: 20px;
  }

  .mi-img-box {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .mi-info {
    padding: 15px 16px 18px;
  }

  .mi-title {
    font-size: 0.94rem;
  }

  .mi-text {
    font-size: 0.79rem;
  }

  .mi-meta {
    padding-top: 10px;
  }

  .price-in {
    font-size: 1.3rem;
  }

  .menu-item-card.no-image {
    padding: 13px 2px;
  }

  .menu-item-card.no-image .mi-info {
    column-gap: 12px;
  }

  .menu-item-card.no-image .mi-title {
    font-size: 0.92rem;
  }

  .menu-item-card.no-image .mi-text {
    font-size: 0.76rem;
  }

  .menu-item-card.no-image .price-in {
    font-size: 1.08rem;
  }
}

/* ---------- 小さいスマホ ---------- */
@media (max-width: 480px) {
  .menu-cat-block {
    padding: 38px 16px 42px;
  }

  .menu-cat-name {
    font-size: 1.02rem;
    gap: 8px;
  }

  .menu-items-grid {
    grid-template-columns: 1fr;
  }

  .price-in {
    font-size: 1.24rem;
  }
}

#sec_1787990017515 > div.menu-cat-container > div:nth-child(5) > div.menu-items-grid > div:nth-child(-n+10) > div > div,
#sec_1787990017515 > div.menu-cat-container > div:nth-child(6) > div.menu-items-grid > div:nth-child(-n+10) > div > div,
#sec_1787990017515 > div.menu-cat-container > div:nth-child(7) > div.menu-items-grid > div:nth-child(-n+10) > div > div
{
        display: none;

}

/* Block: menu_category_grid / sec_1785931898698 */
/* ==========================================================
   BISTRO2 / menu_category_grid
   紙(#f8f1df〜#fffaf0)ベース + ワイン(#6b1f2b)アクセント
   旧 restaurant テンプレ menu_74.css の意匠を現行マークアップへ移植
   ========================================================== */

/* ---------- セクション全体：方眼紙テクスチャ ---------- */
.menu-grid-section {
  padding: 0;
  background:
    linear-gradient(rgba(107, 31, 43, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.045) 1px, transparent 1px),
    var(--bg-cream, #fffaf0);
  background-size: 56px 56px, 56px 56px, auto;
  color: var(--text-main, #241914);
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  line-height: 1.9;
  letter-spacing: 0.045em;
}

/* ---------- セクション見出し ---------- */
.menu-section-header {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 92px 40px 6px;
  text-align: center;
}

.menu-main-title {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg-wine-dark, #3f121a);
}

.menu-main-title::after {
  content: '';
  display: block;
  width: 84px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-red, #b3343d), transparent);
}

.menu-sub-text {
  max-width: 640px;
  margin: 18px auto 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--text-muted, #75675c);
}

/* ---------- カテゴリコンテナ（全幅化） ---------- */
.menu-cat-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------- カテゴリブロック：奇数=クリーム / 偶数=ピスタチオ淡 ---------- */
.menu-cat-block {
  position: relative;
  margin: 0;
  padding: 64px 60px 72px;
}

.menu-cat-block:nth-child(odd) {
  background: transparent;
}

.menu-cat-block:nth-child(even) {
  background:
    linear-gradient(rgba(127, 141, 91, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 141, 91, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, rgba(219, 226, 196, 0.5), rgba(255, 250, 240, 0.5)),
    var(--bg-cream, #fffaf0);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

/* ---------- カテゴリヘッダー（中央 + 左右ヘアライン） ---------- */
.menu-cat-header {
  max-width: 1200px;
  margin: 0 auto 34px;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}

.menu-cat-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  font-family: 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.12em;
  color: var(--bg-wine-dark, #3f121a);
}

.menu-cat-name::before,
.menu-cat-name::after {
  content: '';
  flex: 1 1 auto;
  min-width: 24px;
  max-width: 240px;
  height: 1px;
}

.menu-cat-name::before {
  background: linear-gradient(90deg, transparent, var(--border-wine, rgba(107, 31, 43, 0.28)) 62%, var(--accent-red, #b3343d));
}

.menu-cat-name::after {
  background: linear-gradient(270deg, transparent, var(--border-wine, rgba(107, 31, 43, 0.28)) 62%, var(--accent-red, #b3343d));
}

.menu-cat-desc {
  max-width: 720px;
  margin: 14px auto 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.85rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text-muted, #75675c);
}

/* ---------- アイテムグリッド ---------- */
.menu-items-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* ---------- 写真ありカード（旧 .menu-card） ---------- */
.menu-item-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 250, 240, 0.96);
  color: var(--text-main, #241914);
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  border-radius: 26px;
  box-shadow: 0 8px 28px rgba(32, 23, 19, 0.08);
  transition: transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
}

.menu-item-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
  border-color: rgba(107, 31, 43, 0.38);
}

.mi-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-paper, #f8f1df);
}

.mi-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94) contrast(1.04) saturate(1.02);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.menu-item-card:hover .mi-img-box img {
  transform: scale(1.08);
  filter: brightness(1.04) contrast(1.05) saturate(1.08);
}

.mi-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}

.mi-title {
  margin: 0;
  font-family: 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--bg-wine-dark, #3f121a);
  transition: color 0.28s ease;
}

.menu-item-card:hover .mi-title {
  color: var(--accent-red, #b3343d);
}

.mi-text {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.82rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-muted, #75675c);
  flex-grow: 0;
}

.menu-item-card:not(.no-image) .mi-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mi-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.mi-duration {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted, #75675c);
}

.mi-duration i {
  margin-right: 5px;
  color: var(--accent-red, #b3343d);
}

.mi-price {
  margin: 0 0 0 auto;
  text-align: right;
}

.price-in {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent-red, #b3343d);
}

/* ---------- 写真なし＝クラシックなお品書き行 ---------- */
.menu-item-card.no-image {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1 / -1;
  gap: 0;
  padding: 15px 6px;
  overflow: visible;
  background: transparent;
  color: var(--text-main, #241914);
  border: 0;
  border-bottom: 1px dashed var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 0;
  box-shadow: none;
  transition: background 0.28s ease;
}

.menu-item-card.no-image:hover {
  transform: none;
  box-shadow: none;
  background: rgba(107, 31, 43, 0.045);
}

.menu-item-card.no-image .mi-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 5px;
  align-items: baseline;
  padding: 0;
}

.menu-item-card.no-image .mi-title {
  grid-column: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.menu-item-card.no-image:hover .mi-title {
  color: var(--accent-red, #b3343d);
}

.menu-item-card.no-image .mi-text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.75;
}

.menu-item-card.no-image .mi-meta {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.menu-item-card.no-image .mi-price {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.menu-item-card.no-image .price-in {
  font-size: 1.2rem;
}

/* ---------- 売切れ ---------- */
/* PHP が inline style="opacity:0.6" を出力するが、0.6 では最も濃い文字でも
   クリーム地に対し 4.46:1 までしか出ず本文基準を満たさないため 0.8 に引き上げる。 */
.menu-item-card.is-sold-out {
  opacity: 0.8 !important;
  filter: saturate(0.72);
  border-color: rgba(107, 31, 43, 0.2);
}

.menu-item-card.is-sold-out:hover {
  transform: none;
  box-shadow: 0 8px 28px rgba(32, 23, 19, 0.08);
}

.menu-item-card.is-sold-out .mi-img-box img {
  filter: grayscale(0.62) brightness(0.88);
}

.menu-item-card.is-sold-out:hover .mi-img-box img {
  transform: none;
  filter: grayscale(0.62) brightness(0.88);
}

.menu-item-card.is-sold-out .mi-text {
  color: #4d4239;
}

.menu-item-card.is-sold-out .price-in {
  color: #8f2730;
}

/* 写真ありカードの SOLD OUT オーバーレイ（旧 .sold-out-overlay） */
.mi-sold-out {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(63, 18, 26, 0.78);
  color: #f6cf7a;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* 写真なし行は画像オーバーレイが無いのでタイトル横にバッジを付ける */
.menu-item-card.no-image.is-sold-out .mi-title::after {
  content: 'SOLD OUT';
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-wine-dark, #3f121a);
  color: var(--text-light, #fff7ea);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.5;
  vertical-align: middle;
}

/* ---------- タブレット ---------- */
@media (max-width: 1024px) {
  .menu-section-header {
    padding: 76px 32px 4px;
  }

  .menu-cat-block {
    padding: 56px 40px 60px;
  }

  .menu-cat-name {
    gap: 14px;
  }

  .menu-cat-name::before,
  .menu-cat-name::after {
    max-width: 160px;
  }

  .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
  }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .menu-grid-section {
    padding: 0;
    background-size: 44px 44px, 44px 44px, auto;
  }

  .menu-section-header {
    padding: 56px 20px 0;
  }

  .menu-main-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    letter-spacing: 0.14em;
  }

  .menu-sub-text {
    font-size: 0.82rem;
    line-height: 1.9;
  }

  .menu-cat-block {
    padding: 44px 20px 48px;
  }

  .menu-cat-block:nth-child(even) {
    background-size: 44px 44px, 44px 44px, auto, auto;
  }

  .menu-cat-header {
    margin-bottom: 26px;
  }

  .menu-cat-name {
    font-size: 1.12rem;
    gap: 10px;
    letter-spacing: 0.08em;
  }

  .menu-cat-name::before,
  .menu-cat-name::after {
    min-width: 14px;
    max-width: 80px;
  }

  .menu-cat-desc {
    font-size: 0.8rem;
    line-height: 1.85;
  }

  .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  .menu-item-card {
    padding: 0;
    gap: 0;
    border-radius: 20px;
  }

  .mi-img-box {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .mi-info {
    padding: 15px 16px 18px;
  }

  .mi-title {
    font-size: 0.94rem;
  }

  .mi-text {
    font-size: 0.79rem;
  }

  .mi-meta {
    padding-top: 10px;
  }

  .price-in {
    font-size: 1.3rem;
  }

  .menu-item-card.no-image {
    padding: 13px 2px;
  }

  .menu-item-card.no-image .mi-info {
    column-gap: 12px;
  }

  .menu-item-card.no-image .mi-title {
    font-size: 0.92rem;
  }

  .menu-item-card.no-image .mi-text {
    font-size: 0.76rem;
  }

  .menu-item-card.no-image .price-in {
    font-size: 1.08rem;
  }
}

/* ---------- 小さいスマホ ---------- */
@media (max-width: 480px) {
  .menu-cat-block {
    padding: 38px 16px 42px;
  }

  .menu-cat-name {
    font-size: 1.02rem;
    gap: 8px;
  }

  .menu-items-grid {
    grid-template-columns: 1fr;
  }

  .price-in {
    font-size: 1.24rem;
  }
}

/* ボタン表示調整 */
.insta-btn-wrapper {
  display: block;
  text-align: center;
  margin-top: 20px;
}

.insta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 32px;
  background-color: #800020;
  color: #ffffff !important;
  border-radius: 50px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(128, 0, 32, 0.15);
  transition: all 0.3s ease;
}

.insta-btn:hover {
  background-color: #5c0017;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(128, 0, 32, 0.25);
}

.insta-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Block: menu_category_grid / sec_1787989655083 */
/* ==========================================================
   BISTRO2 / menu_category_grid
   紙(#f8f1df〜#fffaf0)ベース + ワイン(#6b1f2b)アクセント
   旧 restaurant テンプレ menu_74.css の意匠を現行マークアップへ移植
   ========================================================== */

/* ---------- セクション全体：方眼紙テクスチャ ---------- */
.menu-grid-section {
  padding: 0;
  background:
    linear-gradient(rgba(107, 31, 43, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.045) 1px, transparent 1px),
    var(--bg-cream, #fffaf0);
  background-size: 56px 56px, 56px 56px, auto;
  color: var(--text-main, #241914);
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  line-height: 1.9;
  letter-spacing: 0.045em;
}

/* ---------- セクション見出し ---------- */
.menu-section-header {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 92px 40px 6px;
  text-align: center;
}

.menu-main-title {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg-wine-dark, #3f121a);
}

.menu-main-title::after {
  content: '';
  display: block;
  width: 84px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-red, #b3343d), transparent);
}

.menu-sub-text {
  max-width: 640px;
  margin: 18px auto 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--text-muted, #75675c);
}

/* ---------- カテゴリコンテナ（全幅化） ---------- */
.menu-cat-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------- カテゴリブロック：奇数=クリーム / 偶数=ピスタチオ淡 ---------- */
.menu-cat-block {
  position: relative;
  margin: 0;
  padding: 64px 60px 72px;
}

.menu-cat-block:nth-child(odd) {
  background: transparent;
}

.menu-cat-block:nth-child(even) {
  background:
    linear-gradient(rgba(127, 141, 91, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 141, 91, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, rgba(219, 226, 196, 0.5), rgba(255, 250, 240, 0.5)),
    var(--bg-cream, #fffaf0);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

/* ---------- カテゴリヘッダー（中央 + 左右ヘアライン） ---------- */
.menu-cat-header {
  max-width: 1200px;
  margin: 0 auto 34px;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}

.menu-cat-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  font-family: 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.12em;
  color: var(--bg-wine-dark, #3f121a);
}

.menu-cat-name::before,
.menu-cat-name::after {
  content: '';
  flex: 1 1 auto;
  min-width: 24px;
  max-width: 240px;
  height: 1px;
}

.menu-cat-name::before {
  background: linear-gradient(90deg, transparent, var(--border-wine, rgba(107, 31, 43, 0.28)) 62%, var(--accent-red, #b3343d));
}

.menu-cat-name::after {
  background: linear-gradient(270deg, transparent, var(--border-wine, rgba(107, 31, 43, 0.28)) 62%, var(--accent-red, #b3343d));
}

.menu-cat-desc {
  max-width: 720px;
  margin: 14px auto 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.85rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text-muted, #75675c);
}

/* ---------- アイテムグリッド ---------- */
.menu-items-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* ---------- 写真ありカード（旧 .menu-card） ---------- */
.menu-item-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 250, 240, 0.96);
  color: var(--text-main, #241914);
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  border-radius: 26px;
  box-shadow: 0 8px 28px rgba(32, 23, 19, 0.08);
  transition: transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
}

.menu-item-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
  border-color: rgba(107, 31, 43, 0.38);
}

.mi-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-paper, #f8f1df);
}

.mi-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94) contrast(1.04) saturate(1.02);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.menu-item-card:hover .mi-img-box img {
  transform: scale(1.08);
  filter: brightness(1.04) contrast(1.05) saturate(1.08);
}

.mi-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}

.mi-title {
  margin: 0;
  font-family: 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--bg-wine-dark, #3f121a);
  transition: color 0.28s ease;
}

.menu-item-card:hover .mi-title {
  color: var(--accent-red, #b3343d);
}

.mi-text {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.82rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-muted, #75675c);
  flex-grow: 0;
}

.menu-item-card:not(.no-image) .mi-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mi-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.mi-duration {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted, #75675c);
}

.mi-duration i {
  margin-right: 5px;
  color: var(--accent-red, #b3343d);
}

.mi-price {
  margin: 0 0 0 auto;
  text-align: right;
}

.price-in {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent-red, #b3343d);
}

/* ---------- 写真なし＝クラシックなお品書き行 ---------- */
.menu-item-card.no-image {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1 / -1;
  gap: 0;
  padding: 15px 6px;
  overflow: visible;
  background: transparent;
  color: var(--text-main, #241914);
  border: 0;
  border-bottom: 1px dashed var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 0;
  box-shadow: none;
  transition: background 0.28s ease;
}

.menu-item-card.no-image:hover {
  transform: none;
  box-shadow: none;
  background: rgba(107, 31, 43, 0.045);
}

.menu-item-card.no-image .mi-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 5px;
  align-items: baseline;
  padding: 0;
}

.menu-item-card.no-image .mi-title {
  grid-column: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.menu-item-card.no-image:hover .mi-title {
  color: var(--accent-red, #b3343d);
}

.menu-item-card.no-image .mi-text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.75;
}

.menu-item-card.no-image .mi-meta {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.menu-item-card.no-image .mi-price {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.menu-item-card.no-image .price-in {
  font-size: 1.2rem;
}

/* ---------- 売切れ ---------- */
/* PHP が inline style="opacity:0.6" を出力するが、0.6 では最も濃い文字でも
   クリーム地に対し 4.46:1 までしか出ず本文基準を満たさないため 0.8 に引き上げる。 */
.menu-item-card.is-sold-out {
  opacity: 0.8 !important;
  filter: saturate(0.72);
  border-color: rgba(107, 31, 43, 0.2);
}

.menu-item-card.is-sold-out:hover {
  transform: none;
  box-shadow: 0 8px 28px rgba(32, 23, 19, 0.08);
}

.menu-item-card.is-sold-out .mi-img-box img {
  filter: grayscale(0.62) brightness(0.88);
}

.menu-item-card.is-sold-out:hover .mi-img-box img {
  transform: none;
  filter: grayscale(0.62) brightness(0.88);
}

.menu-item-card.is-sold-out .mi-text {
  color: #4d4239;
}

.menu-item-card.is-sold-out .price-in {
  color: #8f2730;
}

/* 写真ありカードの SOLD OUT オーバーレイ（旧 .sold-out-overlay） */
.mi-sold-out {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(63, 18, 26, 0.78);
  color: #f6cf7a;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* 写真なし行は画像オーバーレイが無いのでタイトル横にバッジを付ける */
.menu-item-card.no-image.is-sold-out .mi-title::after {
  content: 'SOLD OUT';
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-wine-dark, #3f121a);
  color: var(--text-light, #fff7ea);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.5;
  vertical-align: middle;
}

/* ---------- タブレット ---------- */
@media (max-width: 1024px) {
  .menu-section-header {
    padding: 76px 32px 4px;
  }

  .menu-cat-block {
    padding: 56px 40px 60px;
  }

  .menu-cat-name {
    gap: 14px;
  }

  .menu-cat-name::before,
  .menu-cat-name::after {
    max-width: 160px;
  }

  .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
  }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .menu-grid-section {
    padding: 0;
    background-size: 44px 44px, 44px 44px, auto;
  }

  .menu-section-header {
    padding: 56px 20px 0;
  }

  .menu-main-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    letter-spacing: 0.14em;
  }

  .menu-sub-text {
    font-size: 0.82rem;
    line-height: 1.9;
  }

  .menu-cat-block {
    padding: 44px 20px 48px;
  }

  .menu-cat-block:nth-child(even) {
    background-size: 44px 44px, 44px 44px, auto, auto;
  }

  .menu-cat-header {
    margin-bottom: 26px;
  }

  .menu-cat-name {
    font-size: 1.12rem;
    gap: 10px;
    letter-spacing: 0.08em;
  }

  .menu-cat-name::before,
  .menu-cat-name::after {
    min-width: 14px;
    max-width: 80px;
  }

  .menu-cat-desc {
    font-size: 0.8rem;
    line-height: 1.85;
  }

  .menu-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  .menu-item-card {
    padding: 0;
    gap: 0;
    border-radius: 20px;
  }

  .mi-img-box {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .mi-info {
    padding: 15px 16px 18px;
  }

  .mi-title {
    font-size: 0.94rem;
  }

  .mi-text {
    font-size: 0.79rem;
  }

  .mi-meta {
    padding-top: 10px;
  }

  .price-in {
    font-size: 1.3rem;
  }

  .menu-item-card.no-image {
    padding: 13px 2px;
  }

  .menu-item-card.no-image .mi-info {
    column-gap: 12px;
  }

  .menu-item-card.no-image .mi-title {
    font-size: 0.92rem;
  }

  .menu-item-card.no-image .mi-text {
    font-size: 0.76rem;
  }

  .menu-item-card.no-image .price-in {
    font-size: 1.08rem;
  }
}

/* ---------- 小さいスマホ ---------- */
@media (max-width: 480px) {
  .menu-cat-block {
    padding: 38px 16px 42px;
  }

  .menu-cat-name {
    font-size: 1.02rem;
    gap: 8px;
  }

  .menu-items-grid {
    grid-template-columns: 1fr;
  }

  .price-in {
    font-size: 1.24rem;
  }
}


/* =========================================================
   Page: seats / ギャラリー｜市ヶ谷・九段下でランチならイタリアンの店「トラットリアクラフト」
========================================================= */

/* Block: hero_page / sec_1785932170350 */
/* =========================================================
   業態テーマ「ビストロ2」 / hero_page（下層ページ共通ヒーロー）
   紙 #f8f1df 基調のテーマだが、この面だけは「写真＋ワインの暗幕」。
   ・背景写真は blocks/hero_page.php がラッパーの inline style で、
     またはセクション背景画像として render.php が #sec_id に出す。
     → CSS 側で background-image を書くと写真を殺すので絶対に書かない。
       longhand（color / size / position / repeat）のみ指定する。
   ・オーバーレイは必ず半透明。単層の最大 α は .62（写真が透ける）。
   ・サイドヘッダー分の padding-left / margin-left は書かない
     （global_css の body [id^="sec_"] が一括オフセット済み）。
   ・style.css:179-196 の .page-hero-wrapper / .ph-* は !important 無し、
     blocks.base.css には .ph-* 系の定義自体が無いため、こちらも !important 不要。
========================================================= */

/* ---------- 台紙 ---------- */
.page-hero-wrapper {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  min-height: clamp(380px, 52svh, 620px);
  padding: 140px 28px 108px;
  overflow: hidden;
  text-align: center;
  color: var(--text-light, #fff7ea);
  background-color: var(--bg-wine-dark, #3f121a);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(197, 162, 90, .38);
  /* セクション背景画像(settings.bg_image)使用時の膜。テーマ既定の
     rgba(248,241,223,.72)（紙色）のままだと写真が白飛びするのでワインの薄膜へ */
  --fc-bg-overlay: rgba(63, 18, 26, .18);
}

/* ---------- 主膜：ワインの暗幕（写真は透ける） ---------- */
.ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    168deg,
    rgba(63, 18, 26, .62) 0%,
    rgba(107, 31, 43, .40) 46%,
    rgba(45, 16, 22, .64) 100%
  );
}

/* 右下の巨大な欧文透かし（本テーマの作法・低コントラスト） */
.ph-overlay::after {
  content: "BISTRO";
  position: absolute;
  right: -2.6vw;
  bottom: -3.2rem;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255, 247, 234, .10);
  pointer-events: none;
}

/* ---------- 副膜：中央のテキスト用スクリム＋周辺のヴィネット ---------- */
.page-hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 56% at 50% 50%,
      rgba(44, 20, 24, .50) 0%,
      rgba(44, 20, 24, .38) 54%,
      rgba(44, 20, 24, 0) 82%),
    radial-gradient(ellipse 118% 100% at 50% 46%,
      rgba(32, 23, 19, 0) 44%,
      rgba(32, 23, 19, .28) 100%);
}

/* ---------- 金の細枠（要所の金） ---------- */
.page-hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgba(255, 247, 234, .20);
  box-shadow: inset 0 0 0 1px rgba(197, 162, 90, .16);
  pointer-events: none;
}

/* ---------- 中身 ---------- */
.ph-container {
  position: relative;
  z-index: 4;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 8px;
}

/* 見出し上の小さな金のひし形 */
.ph-container::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 24px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  box-shadow: 0 0 0 1px rgba(255, 247, 234, .32);
}

/* タイトル（明色 #fff7ea・Cormorant・字送り広め） */
.ph-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: #fff7ea;
  text-shadow: 0 2px 16px rgba(32, 23, 19, .55), 0 0 42px rgba(32, 23, 19, .35);
}

/* 見出し下の短い金グラデ罫（本テーマの作法） */
.ph-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 26px auto 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-gold, #c5a25a) 22%,
    #f6cf7a 50%,
    var(--accent-gold, #c5a25a) 78%,
    transparent 100%
  );
}

/* 説明文 */
.ph-desc {
  max-width: 640px;
  margin: 22px auto 0;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: .92rem;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: .08em;
  color: rgba(255, 247, 234, .92);
  text-shadow: 0 1px 12px rgba(32, 23, 19, .55);
}

/* =========================================================
   タブレット（〜1024px）：ヘッダーが上部 72px の横バーになる
========================================================= */
@media (max-width: 1024px) {
  .page-hero-wrapper {
    min-height: 340px;
    min-height: clamp(340px, 46svh, 520px);
    padding: 124px 22px 88px;
  }

  .page-hero-wrapper::before {
    inset: 11px;
  }

  .ph-overlay::after {
    right: -2vw;
    bottom: -1.8rem;
    font-size: clamp(4.5rem, 18vw, 9rem);
  }

  .ph-container::before {
    margin-bottom: 20px;
  }

  .ph-title {
    font-size: clamp(2rem, 6.4vw, 3.2rem);
    letter-spacing: .15em;
    text-indent: .15em;
  }

  .ph-title::after {
    width: 78px;
    margin-top: 22px;
  }

  .ph-desc {
    font-size: .88rem;
    line-height: 2.05;
  }
}

/* =========================================================
   スマホ（〜768px）：ヘッダーは 64px
========================================================= */
@media (max-width: 768px) {
  .page-hero-wrapper {
    min-height: 300px;
    min-height: clamp(300px, 42svh, 460px);
    padding: 104px 16px 72px;
  }

  .page-hero-wrapper::before {
    inset: 8px;
  }

  /* 縦長画面ではテキスト帯を横に広げて読みやすさを確保 */
  .page-hero-wrapper::after {
    background:
      radial-gradient(ellipse 88% 60% at 50% 50%,
        rgba(44, 20, 24, .52) 0%,
        rgba(44, 20, 24, .40) 56%,
        rgba(44, 20, 24, 0) 86%),
      radial-gradient(ellipse 130% 108% at 50% 46%,
        rgba(32, 23, 19, 0) 46%,
        rgba(32, 23, 19, .30) 100%);
  }

  .ph-overlay::after {
    right: -3vw;
    bottom: -1.1rem;
    font-size: clamp(3.4rem, 26vw, 6.5rem);
    color: rgba(255, 247, 234, .10);
  }

  .ph-container {
    padding: 0 4px;
  }

  .ph-container::before {
    width: 6px;
    height: 6px;
    margin-bottom: 18px;
  }

  .ph-title {
    font-size: clamp(1.7rem, 8.6vw, 2.5rem);
    letter-spacing: .12em;
    text-indent: .12em;
  }

  .ph-title::after {
    width: 62px;
    margin-top: 18px;
  }

  .ph-desc {
    margin-top: 18px;
    font-size: .84rem;
    line-height: 2;
    letter-spacing: .05em;
  }
}

/* Block: image_grid / sec_1785932185748 */
/* =========================================================
   image_grid（画像挿入パーツ ⑦）／ 業態テーマ「ビストロ2」
   旧 restaurant.fluxcore.store（Magic Closet 断面）の写真ギャラリーの
   世界観を現行マークアップで再現。
   紙 #f8f1df 基調 × ワイン #6b1f2b／強調は朱 #b3343d／細線は金 #c5a25a。
   写真は「クリームの薄い額装（マット）＋柔らかい影＋内側の細い罫＋
   隅の小さな金のひし形」で上品に見せ、ホバーで少し持ち上げつつ写真を寄る。

   ■ 実在クラス（blocks/image_grid.php で確認済み）
     .image-grid-section / .image-grid-container / .image-grid-header /
     .image-grid-title / .image-grid-desc /
     .image-grid（＋ .image-grid-pc-{2,3,4} / .image-grid-sp-{1,2} /
                    .image-grid-shape-{square,circle,rounded,free}）/
     .image-grid-item / .image-grid-empty
   ■ blocks.base.css の image_grid 節に !important は無い → こちらも一切付けない。
     custom.css は base より後に読み込まれるため、同スペシフィシティでも後勝ちで反映される。
   ■ サイドヘッダー分の padding-left / margin-left は書かない（global_css が一括オフセット済み）。

   ■ コントラスト（WCAG）
     見出し #3f121a on 紙 #f8f1df = 14.2:1（グラデ最暗 #f3e6cd でも 13.0:1）… 大見出し3.0以上 OK
     説明   #5d5148 on 紙 #f8f1df = 6.8:1（グラデ最暗 #f3e6cd でも 6.2:1）… 本文4.5以上 OK
     空状態の見出し ワイン #6b1f2b on クリーム #fffaf0 = 10.9:1 … 本文4.5以上 OK
     空状態の補足   #5d5148 on クリーム #fffaf0 = 7.4:1 … 本文4.5以上 OK
     欧文透かし rgba(107,31,43,.05) は装飾（z-index 0・本文の下）で可読対象外。
========================================================= */

/* ---- セクション面（紙＋薄い方眼＋巨大欧文透かし）---- */
.image-grid-section {
  position: relative;
  overflow: hidden;
  padding: 104px 24px 112px;
  background:
    linear-gradient(rgba(107, 31, 43, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.03) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, var(--bg-cream, #fffaf0) 60%, #f3e6cd 100%);
  background-size: 62px 62px, 62px 62px, auto;
  color: var(--text-main, #241914);
}

/* 巨大な欧文透かし（装飾のみ・可読対象外） */
.image-grid-section::before {
  content: "GALLERY";
  position: absolute;
  left: -1.4vw;
  bottom: -2.4rem;
  z-index: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(3rem, 9.5vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(107, 31, 43, 0.05);
  pointer-events: none;
}

.image-grid-container {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---- 見出し ---- */
.image-grid-header {
  position: relative;
  max-width: 860px;
  margin: 0 auto 46px;
  text-align: center;
}

/* 見出し上の朱〜橙の小罫 */
.image-grid-header::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 深ワイン #3f121a on 紙 #f8f1df = 14.2:1 */
.image-grid-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', 'Noto Serif JP', serif);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.16em;
  color: var(--bg-wine-dark, #3f121a);
}

/* 見出し下の金〜ワインのグラデ罫（本テーマの作法） */
.image-grid-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, rgba(197, 162, 90, 0), var(--accent-gold, #c5a25a) 34%, var(--accent-red, #b3343d) 78%, rgba(179, 52, 61, 0));
}

/* #5d5148 on 紙 #f8f1df = 6.8:1 */
.image-grid-desc {
  margin: 22px 0 0;
  font-size: 0.94rem;
  line-height: 2.05;
  letter-spacing: 0.06em;
  color: var(--text-sub, #5d5148);
}

/* ---- グリッド（列数は base と同じ実在クラスで指定・gap はテーマで少し広く）---- */
.image-grid {
  display: grid;
  gap: 22px;
}
.image-grid-pc-2 { grid-template-columns: repeat(2, 1fr); }
.image-grid-pc-3 { grid-template-columns: repeat(3, 1fr); }
.image-grid-pc-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- 各写真：クリームの薄い額装（マット）---- */
.image-grid-item {
  position: relative;
  padding: 10px;
  background: var(--bg-cream, #fffaf0);
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  border-radius: 18px;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12));
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* マットに浮かぶ内側の細い罫（二重罫の作法）。写真より上に置いて拡大しても残す */
.image-grid-item::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 2;
  border: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 13px;
  opacity: 0.4;
  pointer-events: none;
}

/* 隅に小さな金のひし形（マウント風） */
.image-grid-item::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 3;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.6;
  pointer-events: none;
}

.image-grid-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
  border-color: var(--border-wine, rgba(107, 31, 43, 0.28));
}

/* 写真本体（ホバーで少し寄る）。角丸・アスペクトは base の shape クラスに委ねる */
.image-grid-item img {
  transition: transform 0.5s ease, filter 0.5s ease;
}
.image-grid-item:hover img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.02);
}

/* ---- 画像未設定（空状態）---- */
.image-grid-empty {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 46px 28px;
  background: var(--bg-cream, #fffaf0);
  border: 1px dashed var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 18px;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12));
  color: var(--text-wine, #6b1f2b);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.9;
  text-align: center;
}

/* 空状態の上に小さな金のひし形 */
.image-grid-empty::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto 16px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.8;
}

/* =========================================================
   タブレット（〜1024px）
========================================================= */
@media (max-width: 1024px) {
  .image-grid-section {
    padding: 84px 20px 92px;
  }
  .image-grid-section::before {
    font-size: clamp(2.8rem, 12vw, 6.5rem);
  }
  .image-grid-header {
    margin-bottom: 40px;
  }
  .image-grid {
    gap: 18px;
  }
  .image-grid-item {
    padding: 9px;
    border-radius: 16px;
  }
  .image-grid-item::before {
    inset: 4.5px;
    border-radius: 11px;
  }
}

/* =========================================================
   スマートフォン（〜768px）※ SP 列数は base と同じ実在クラスで指定
========================================================= */
@media (max-width: 768px) {
  .image-grid-section {
    padding: 66px 16px 74px;
  }
  .image-grid-section::before {
    font-size: clamp(2.4rem, 20vw, 5rem);
    bottom: -1.4rem;
  }
  .image-grid-header {
    margin-bottom: 32px;
  }
  .image-grid-title {
    letter-spacing: 0.12em;
  }
  .image-grid-desc {
    font-size: 0.88rem;
    line-height: 1.95;
  }
  .image-grid {
    gap: 14px;
  }
  .image-grid-sp-1 { grid-template-columns: 1fr; }
  .image-grid-sp-2 { grid-template-columns: repeat(2, 1fr); }
  .image-grid-item {
    padding: 8px;
    border-radius: 14px;
  }
  .image-grid-item::before {
    inset: 4px;
    border-radius: 10px;
  }
  .image-grid-item::after {
    top: 6px;
    left: 6px;
    width: 5px;
    height: 5px;
  }
  .image-grid-empty {
    padding: 38px 20px;
    border-radius: 14px;
    font-size: 0.9rem;
  }
}


/* =========================================================
   Page: news / トラットリア クラフト｜千代田区三番町・市ケ谷のイタリアン＿お知らせ
========================================================= */

/* Block: hero_page / sec_1787978016331 */
/* =========================================================
   業態テーマ「ビストロ2」 / hero_page（下層ページ共通ヒーロー）
   紙 #f8f1df 基調のテーマだが、この面だけは「写真＋ワインの暗幕」。
   ・背景写真は blocks/hero_page.php がラッパーの inline style で、
     またはセクション背景画像として render.php が #sec_id に出す。
     → CSS 側で background-image を書くと写真を殺すので絶対に書かない。
       longhand（color / size / position / repeat）のみ指定する。
   ・オーバーレイは必ず半透明。単層の最大 α は .62（写真が透ける）。
   ・サイドヘッダー分の padding-left / margin-left は書かない
     （global_css の body [id^="sec_"] が一括オフセット済み）。
   ・style.css:179-196 の .page-hero-wrapper / .ph-* は !important 無し、
     blocks.base.css には .ph-* 系の定義自体が無いため、こちらも !important 不要。
========================================================= */

/* ---------- 台紙 ---------- */
.page-hero-wrapper {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  min-height: clamp(380px, 52svh, 620px);
  padding: 140px 28px 108px;
  overflow: hidden;
  text-align: center;
  color: var(--text-light, #fff7ea);
  background-color: var(--bg-wine-dark, #3f121a);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(197, 162, 90, .38);
  /* セクション背景画像(settings.bg_image)使用時の膜。テーマ既定の
     rgba(248,241,223,.72)（紙色）のままだと写真が白飛びするのでワインの薄膜へ */
  --fc-bg-overlay: rgba(63, 18, 26, .18);
}

/* ---------- 主膜：ワインの暗幕（写真は透ける） ---------- */
.ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    168deg,
    rgba(63, 18, 26, .62) 0%,
    rgba(107, 31, 43, .40) 46%,
    rgba(45, 16, 22, .64) 100%
  );
}

/* 右下の巨大な欧文透かし（本テーマの作法・低コントラスト） */
.ph-overlay::after {
  content: "BISTRO";
  position: absolute;
  right: -2.6vw;
  bottom: -3.2rem;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255, 247, 234, .10);
  pointer-events: none;
}

/* ---------- 副膜：中央のテキスト用スクリム＋周辺のヴィネット ---------- */
.page-hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 56% at 50% 50%,
      rgba(44, 20, 24, .50) 0%,
      rgba(44, 20, 24, .38) 54%,
      rgba(44, 20, 24, 0) 82%),
    radial-gradient(ellipse 118% 100% at 50% 46%,
      rgba(32, 23, 19, 0) 44%,
      rgba(32, 23, 19, .28) 100%);
}

/* ---------- 金の細枠（要所の金） ---------- */
.page-hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgba(255, 247, 234, .20);
  box-shadow: inset 0 0 0 1px rgba(197, 162, 90, .16);
  pointer-events: none;
}

/* ---------- 中身 ---------- */
.ph-container {
  position: relative;
  z-index: 4;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 8px;
}

/* 見出し上の小さな金のひし形 */
.ph-container::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 24px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  box-shadow: 0 0 0 1px rgba(255, 247, 234, .32);
}

/* タイトル（明色 #fff7ea・Cormorant・字送り広め） */
.ph-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: #fff7ea;
  text-shadow: 0 2px 16px rgba(32, 23, 19, .55), 0 0 42px rgba(32, 23, 19, .35);
}

/* 見出し下の短い金グラデ罫（本テーマの作法） */
.ph-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 26px auto 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-gold, #c5a25a) 22%,
    #f6cf7a 50%,
    var(--accent-gold, #c5a25a) 78%,
    transparent 100%
  );
}

/* 説明文 */
.ph-desc {
  max-width: 640px;
  margin: 22px auto 0;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: .92rem;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: .08em;
  color: rgba(255, 247, 234, .92);
  text-shadow: 0 1px 12px rgba(32, 23, 19, .55);
}

/* =========================================================
   タブレット（〜1024px）：ヘッダーが上部 72px の横バーになる
========================================================= */
@media (max-width: 1024px) {
  .page-hero-wrapper {
    min-height: 340px;
    min-height: clamp(340px, 46svh, 520px);
    padding: 124px 22px 88px;
  }

  .page-hero-wrapper::before {
    inset: 11px;
  }

  .ph-overlay::after {
    right: -2vw;
    bottom: -1.8rem;
    font-size: clamp(4.5rem, 18vw, 9rem);
  }

  .ph-container::before {
    margin-bottom: 20px;
  }

  .ph-title {
    font-size: clamp(2rem, 6.4vw, 3.2rem);
    letter-spacing: .15em;
    text-indent: .15em;
  }

  .ph-title::after {
    width: 78px;
    margin-top: 22px;
  }

  .ph-desc {
    font-size: .88rem;
    line-height: 2.05;
  }
}

/* =========================================================
   スマホ（〜768px）：ヘッダーは 64px
========================================================= */
@media (max-width: 768px) {
  .page-hero-wrapper {
    min-height: 300px;
    min-height: clamp(300px, 42svh, 460px);
    padding: 104px 16px 72px;
  }

  .page-hero-wrapper::before {
    inset: 8px;
  }

  /* 縦長画面ではテキスト帯を横に広げて読みやすさを確保 */
  .page-hero-wrapper::after {
    background:
      radial-gradient(ellipse 88% 60% at 50% 50%,
        rgba(44, 20, 24, .52) 0%,
        rgba(44, 20, 24, .40) 56%,
        rgba(44, 20, 24, 0) 86%),
      radial-gradient(ellipse 130% 108% at 50% 46%,
        rgba(32, 23, 19, 0) 46%,
        rgba(32, 23, 19, .30) 100%);
  }

  .ph-overlay::after {
    right: -3vw;
    bottom: -1.1rem;
    font-size: clamp(3.4rem, 26vw, 6.5rem);
    color: rgba(255, 247, 234, .10);
  }

  .ph-container {
    padding: 0 4px;
  }

  .ph-container::before {
    width: 6px;
    height: 6px;
    margin-bottom: 18px;
  }

  .ph-title {
    font-size: clamp(1.7rem, 8.6vw, 2.5rem);
    letter-spacing: .12em;
    text-indent: .12em;
  }

  .ph-title::after {
    width: 62px;
    margin-top: 18px;
  }

  .ph-desc {
    margin-top: 18px;
    font-size: .84rem;
    line-height: 2;
    letter-spacing: .05em;
  }
}

/* Block: news_list_grid / sec_1787978028864 */
/* =========================================================
   news_list_grid ／ 業態テーマ「ビストロ2」
   紙 #f8f1df 基調 × ワイン #6b1f2b、見出しは深ワイン #3f121a
   旧 restaurant テンプレ news_78.css（お知らせ一覧）の意匠を
   現行の .nlg-* グリッドマークアップへ移植。
   ※ blocks.base.css に .news-list-grid-section / .news-section-header /
     .news-main-title / .news-sub-text / .nlg-* の !important が集中して
     いるため、同一プロパティはすべて !important で対にして上書きする。
   ※ サイドヘッダー分のオフセットは global_css が一括適用済み
========================================================= */

/* ---------- セクション（紙の下地＋方眼＋巨大透かし） ---------- */
.news-list-grid-section {
  position: relative;
  overflow: hidden;
  padding: 112px 24px 124px !important;
  background:
    linear-gradient(rgba(107, 31, 43, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.038) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-cream, #fffaf0) 0%, var(--bg-paper, #f8f1df) 62%, #f3e6cd 100%) !important;
  background-size: 60px 60px, 60px 60px, auto !important;
  color: var(--text-main, #241914) !important;
}

/* 隅の巨大な欧文透かし */
.news-list-grid-section::before {
  content: "JOURNAL";
  position: absolute;
  right: -1.8vw;
  bottom: -2.8rem;
  z-index: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(4.4rem, 13vw, 13rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(107, 31, 43, 0.05);
  pointer-events: none;
}

/* ---------- セクション見出し ---------- */
.news-section-header {
  position: relative;
  z-index: 2;
  max-width: 860px !important;
  margin: 0 auto 62px !important;
  text-align: center !important;
}

/* 金の小さなひし形 */
.news-section-header::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 22px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
}

.news-main-title {
  margin: 0 !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', 'Noto Serif JP', serif) !important;
  font-size: clamp(1.9rem, 4vw, 3.05rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2;
}

/* 見出し下の短い金〜ワインのグラデ罫 */
.news-main-title::after {
  content: "";
  display: block;
  width: 86px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-gold, #c5a25a) 42%, var(--bg-wine, #6b1f2b));
}

.news-sub-text {
  margin: 22px 0 0 !important;
  color: var(--text-sub, #5d5148) !important;
  font-size: 0.95rem !important;
  line-height: 2.05 !important;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  letter-spacing: 0.09em;
}

/* ---------- グリッド ---------- */
.nlg-grid {
  position: relative;
  z-index: 2;
  max-width: 1160px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)) !important;
  gap: 30px !important;
  align-items: stretch;
}

/* ---------- カード ---------- */
.nlg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  background: var(--bg-cream, #fffaf0) !important;
  color: var(--text-main, #241914) !important;
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16)) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(63, 18, 26, 0.09) !important;
  text-decoration: none;
  transition: transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
}

/* 上端のワイン→朱→金の細帯（旧 .news-card::before の左縦ラインを横帯へ） */
.nlg-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  height: 3px;
  background: linear-gradient(90deg, var(--bg-wine, #6b1f2b), var(--accent-red, #b3343d) 46%, var(--accent-gold, #c5a25a));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

.nlg-card:hover::before {
  transform: scaleX(1);
}

a.nlg-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--border-wine, rgba(107, 31, 43, 0.28)) !important;
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16)) !important;
}

/* ---------- 写真エリア（4:3 で面積をしっかり確保） ---------- */
.nlg-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3 !important;
  background: var(--bg-paper, #f8f1df) !important;
}

/* 写真内側の金の細枠（塗りを持たないので写真は透ける） */
.nlg-img::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid rgba(197, 162, 90, 0.5);
  pointer-events: none;
  transition: border-color 0.45s ease;
}

.nlg-card:hover .nlg-img::after {
  border-color: rgba(197, 162, 90, 0.85);
}

.nlg-img img {
  display: block;
  filter: brightness(0.94) contrast(1.04) saturate(1.02);
  transition: transform 0.55s ease, filter 0.55s ease;
}

.nlg-card:hover .nlg-img img {
  transform: scale(1.06);
  filter: brightness(1) contrast(1.06) saturate(1.08);
}

/* ---------- 写真なし記事のプレースホルダ ---------- */
.nlg-no-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(107, 31, 43, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.055) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-pistachio, #dbe2c4) 0%, var(--bg-paper, #f8f1df) 58%, #f3e6cd 100%) !important;
  background-size: 22px 22px, 22px 22px, auto !important;
  color: rgba(107, 31, 43, 0.62) !important;
  font-size: 2.5rem;
  line-height: 1;
}

/* アイコンの背後に金のひし形フレーム */
.nlg-no-img::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  transform: rotate(45deg);
  border: 1px solid rgba(197, 162, 90, 0.62);
  pointer-events: none;
}

.nlg-no-img i {
  position: relative;
  z-index: 2;
}

/* ---------- テキストエリア ---------- */
.nlg-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 24px 26px !important;
}

/* カード内側の細い二重罫（写真の内枠と対になる U 字の罫） */
.nlg-body::before {
  content: "";
  position: absolute;
  inset: 0 9px 9px;
  border: 1px solid rgba(107, 31, 43, 0.13);
  border-top: 0;
  pointer-events: none;
}

/* 写真とテキストの継ぎ目に置く小さな金のひし形 */
.nlg-body::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 22px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  box-shadow: 0 0 0 3px var(--bg-cream, #fffaf0);
  pointer-events: none;
}

.nlg-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px !important;
  padding-bottom: 11px;
  border-bottom: 1px dashed rgba(107, 31, 43, 0.24);
}

/* 日付は Cormorant の朱字（旧 .news-date） */
.nlg-date {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  color: var(--accent-red, #b3343d) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-en, 'Cormorant Garamond', serif) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4;
}

.nlg-date::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
}

.nlg-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', serif !important;
  font-size: 1.04rem !important;
  font-weight: 900 !important;
  line-height: 1.66 !important;
  letter-spacing: 0.07em;
  transition: color 0.28s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlg-card:hover .nlg-title {
  color: var(--accent-red, #b3343d) !important;
}

/* =========================================================
   タブレット（1024px 以下）
   ※ base の !important は base 階層で効くため、
     メディアクエリ内でも同プロパティには !important が必要
========================================================= */
@media (max-width: 1024px) {
  .news-list-grid-section {
    padding: 92px 24px 100px !important;
  }
  .news-list-grid-section::before {
    font-size: clamp(4rem, 16vw, 10rem);
    bottom: -2rem;
  }
  .news-section-header {
    margin: 0 auto 52px !important;
  }
  .nlg-grid {
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)) !important;
    gap: 24px !important;
  }
  .nlg-card {
    border-radius: 20px !important;
  }
  .nlg-body {
    padding: 21px 20px 24px !important;
  }
  .nlg-no-img::before {
    width: 66px;
    height: 66px;
    margin: -33px 0 0 -33px;
  }
}

/* =========================================================
   スマホ（768px 以下）
   ※ base の @media(max-width:768px) にも
     .news-list-grid-section{padding} / .nlg-grid{grid-template-columns} の
     !important があるため、同じプロパティを !important で再指定する
========================================================= */
@media (max-width: 768px) {
  .news-list-grid-section {
    padding: 68px 16px 78px !important;
  }
  .news-list-grid-section::before {
    font-size: clamp(3.2rem, 24vw, 7rem);
    right: -3.5vw;
    bottom: -1.2rem;
    color: rgba(107, 31, 43, 0.045);
  }
  .news-section-header {
    margin: 0 auto 42px !important;
  }
  .news-section-header::before {
    margin: 0 auto 18px;
  }
  .news-main-title {
    font-size: clamp(1.75rem, 8vw, 2.4rem) !important;
    letter-spacing: 0.12em !important;
  }
  .news-main-title::after {
    width: 64px;
    margin-top: 16px;
  }
  .news-sub-text {
    margin: 18px 0 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.95 !important;
  }
  .nlg-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .nlg-card {
    border-radius: 18px !important;
  }
  .nlg-img {
    aspect-ratio: 3 / 2 !important;
  }
  .nlg-img::after {
    inset: 9px;
  }
  .nlg-no-img {
    font-size: 2.2rem;
  }
  .nlg-no-img::before {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
  }
  .nlg-body {
    padding: 20px 19px 23px !important;
  }
  .nlg-body::after {
    right: 18px;
  }
  .nlg-meta {
    margin-bottom: 11px !important;
    padding-bottom: 10px;
  }
  .nlg-date {
    font-size: 0.9rem !important;
    letter-spacing: 0.12em !important;
  }
  .nlg-title {
    font-size: 0.99rem !important;
    line-height: 1.7 !important;
  }
}

/* =========================================================
   小型スマホ（480px 以下）
========================================================= */
@media (max-width: 480px) {
  .news-list-grid-section {
    padding: 58px 14px 68px !important;
  }
  .nlg-img {
    aspect-ratio: 16 / 10 !important;
  }
  .nlg-body {
    padding: 18px 16px 21px !important;
  }
  .nlg-title {
    font-size: 0.95rem !important;
  }
}


/* =========================================================
   Page: news_detail / NEWS_DETAIL ページ
========================================================= */

/* Block: news_article_body / sec_1787978212630 */
/* ============================================================
   業態テーマ「ビストロ2」 / news_article_body（お知らせ記事本文）
   旧 news_detail_79.css（.article-section の方眼紙＋.article-main-img＋
   .article-body の行間ゆったり＋.btn-back のスライドフィル）を
   現行マークアップ（.nab-*）で再現。
   面 = 紙 #f8f1df 〜 クリーム #fffaf0 / 見出し = 深ワイン #3f121a /
   強調・ホバー = 朱 #b3343d / 細線 = 金 #c5a25a・ワイン #6b1f2b
   ※ blocks.base.css が !important を持つプロパティにのみ !important を付ける
     （base に無いセレクタ・プロパティには付けない）。
     base の background 短縮形 !important は background-size/position まで
     !important 化するため、こちらも短縮形＋必要なら background-size に付ける。
   ※ サイドヘッダー分の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ============================================================ */

/* ---------- セクション面（紙＋方眼＋巨大欧文透かし） ---------- */
.news-article-body-section {
  position: relative;
  overflow: hidden;
  padding: 116px 24px 124px !important;
  background:
    linear-gradient(rgba(107, 31, 43, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.032) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, var(--bg-cream, #fffaf0) 54%, #f3e6cd 100%) !important;
  background-size: 60px 60px, 60px 60px, auto !important;
  color: var(--text-main, #241914) !important;
}

/* 右下の巨大な欧文透かし（本テーマのセクション作法） */
.news-article-body-section::before {
  content: "JOURNAL";
  position: absolute;
  right: -1.2vw;
  bottom: -0.18em;
  z-index: 0;
  color: rgba(107, 31, 43, 0.05);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(4.2rem, 13vw, 12rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.06em;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 左上のピスタチオ斜めストライプ（他ブロックと同じ族の装飾） */
.news-article-body-section::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 22vw;
  height: 22vw;
  max-width: 280px;
  max-height: 280px;
  opacity: 0.55;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, 0.16) 0,
    rgba(127, 141, 91, 0.16) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 記事カード（クリームの紙箱＋内側二重罫＋金のひし形） ---------- */
.nab-container {
  position: relative;
  z-index: 5;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 58px 60px 62px !important;
  background:
    linear-gradient(90deg,
      var(--bg-wine, #6b1f2b) 0%,
      var(--accent-red, #b3343d) 48%,
      var(--accent-gold, #c5a25a) 100%) left top / 100% 4px no-repeat,
    var(--bg-cream, #fffaf0) !important;
  color: var(--text-main, #241914) !important;
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16)) !important;
  border-radius: 26px !important;
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16)) !important;
}

/* 内側の細い二重罫 */
.nab-container::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 0;
  border: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 19px;
  opacity: 0.42;
  pointer-events: none;
}

/* 右上の小さな金のひし形 */
.nab-container::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 26px;
  z-index: 1;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.68;
  pointer-events: none;
}

/* ---------- 記事ヘッダー（日付＋タイトル） ---------- */
.nab-header {
  position: relative;
  z-index: 2;
  margin-bottom: 42px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(107, 31, 43, 0.16) !important;
}

.nab-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px !important;
}

/* 日付：ワインの淡い面に濃ワインの文字（面 #f5ebe2 相当 × #6b1f2b = 9.6:1） */
.nab-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  background: rgba(107, 31, 43, 0.07);
  border: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 999px;
  color: var(--text-wine, #6b1f2b) !important;
  font-family: 'Cormorant Garamond', 'Zen Kaku Gothic New', serif !important;
  font-size: 0.94rem;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  line-height: 1.6;
}

.nab-date i {
  font-size: 0.86em;
  color: var(--accent-red, #b3343d);
}

/* 記事タイトル：深ワイン × Cormorant Garamond・字送り広め */
.nab-title {
  position: relative;
  margin: 0;
  padding-bottom: 24px;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', 'Shippori Mincho', serif !important;
  font-size: clamp(1.75rem, 3.4vw, 2.9rem) !important;
  font-weight: 700;
  line-height: 1.42 !important;
  letter-spacing: 0.11em !important;
}

/* 見出し下の短い 金 → ワイン のグラデ罫 */
.nab-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 92px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--accent-gold, #c5a25a),
    var(--bg-wine, #6b1f2b) 68%,
    rgba(107, 31, 43, 0));
}

/* ---------- アイキャッチ写真（大きく・額装風） ---------- */
.nab-main-img-box {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: 0 0 50px;
  aspect-ratio: 3 / 2 !important;
  background: var(--bg-pistachio, #dbe2c4) !important;
  border: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28)) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12)) !important;
}

/* 写真の上に細い明色のヘアライン額縁＋足元のごく薄いグラデ（覆いは alpha 0.3 以下） */
.nab-main-img-box::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(255, 247, 234, 0.34);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(63, 18, 26, 0) 58%, rgba(63, 18, 26, 0.26) 100%);
  pointer-events: none;
}

.nab-main-img-box img {
  position: relative;
  z-index: 1;
  display: block;
  filter: saturate(1.04) contrast(1.03);
}

/* ---------- 記事本文（行間ゆったり・読みやすさ最優先） ---------- */
.nab-body-text {
  position: relative;
  z-index: 2;
  color: var(--text-main, #241914) !important;
  font-family: 'Noto Serif JP', 'Shippori Mincho', serif !important;
  font-size: 1.03rem !important;
  font-weight: 400;
  line-height: 2.5 !important;
  letter-spacing: 0.065em !important;
}

/* 引用元・出典ボタン（_partials/block_button.php）の余白調整 */
.news-article-body-section .fc-block-btn-wrap {
  position: relative;
  z-index: 2;
  margin-top: 40px;
}

/* ---------- フッターナビ ---------- */
.nab-footer-nav {
  position: relative;
  z-index: 2;
  margin-top: 56px;
  padding-top: 46px;
  text-align: center;
  border-top: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28)) !important;
}

/* 区切り罫の中央に小さな金のひし形 */
.nab-footer-nav::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--bg-cream, #fffaf0);
  border: 1px solid var(--accent-gold, #c5a25a);
  pointer-events: none;
}

/* ---------- 「記事一覧に戻る」：枠線ボタン＋左からのスライドフィル ----------
   旧 .btn-back のスライドフィルを background-size のトランジションで再現。
   擬似要素を使わないので文字が塗りに隠れない。
   base は background / color / border / border-radius に !important を持つ。
   ※ このブロック内で .btn-nab-back を定義するのはこの1か所だけ（二重定義しない） */
.btn-nab-back {
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  gap: 10px;
  min-height: 52px;
  padding: 0 46px;
  background:
    linear-gradient(90deg,
      var(--fc-btn-bg, #6b1f2b) 0%,
      var(--fc-btn-bg, #6b1f2b) 100%) left center / 0% 100% no-repeat
    transparent !important;
  color: var(--fc-btn-outline-fg, #6b1f2b) !important;
  border: 1px solid var(--fc-btn-border, #6b1f2b) !important;
  border-radius: 999px !important;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-size 0.42s cubic-bezier(0.77, 0, 0.175, 1),
    color 0.42s cubic-bezier(0.77, 0, 0.175, 1),
    box-shadow 0.42s ease;
}

.btn-nab-back:hover,
.btn-nab-back:focus-visible {
  background:
    linear-gradient(90deg,
      var(--fc-btn-bg, #6b1f2b) 0%,
      var(--fc-btn-bg, #6b1f2b) 100%) left center / 100% 100% no-repeat
    transparent !important;
  color: var(--fc-btn-fg, #fff7ea) !important;
  box-shadow: 0 14px 32px rgba(107, 31, 43, 0.22) !important;
}

.btn-nab-back i {
  font-size: 0.94em;
  transition: transform 0.42s cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-nab-back:hover i {
  transform: translateX(-4px);
}

/* ============================================================
   レスポンシブ
   base の @media (max-width: 768px) より後に読み込まれるため、
   base が !important を持つ値は当メディアクエリでも再指定する。
   ============================================================ */
@media (max-width: 1024px) {
  .news-article-body-section {
    padding: 92px 40px 100px !important;
  }
  .news-article-body-section::before {
    font-size: clamp(3.8rem, 16vw, 9rem);
  }
  .nab-container {
    padding: 48px 44px 52px !important;
  }
  .nab-header {
    margin-bottom: 36px;
    padding-bottom: 28px;
  }
  .nab-main-img-box {
    margin: 0 0 42px;
  }
  .nab-footer-nav {
    margin-top: 48px;
    padding-top: 40px;
  }
}

@media (max-width: 768px) {
  .news-article-body-section {
    padding: 74px 18px 84px !important;
  }
  .news-article-body-section::before {
    right: -0.6rem;
    bottom: -0.6rem;
    font-size: clamp(3rem, 22vw, 6.5rem);
  }
  .news-article-body-section::after {
    width: 34vw;
    height: 34vw;
  }
  .nab-container {
    padding: 34px 22px 38px !important;
    border-radius: 20px !important;
  }
  .nab-container::before {
    inset: 7px;
    border-radius: 14px;
  }
  .nab-container::after {
    top: 17px;
    right: 18px;
    width: 8px;
    height: 8px;
  }
  .nab-header {
    margin-bottom: 30px;
    padding-bottom: 24px;
  }
  .nab-meta {
    margin-bottom: 16px !important;
  }
  .nab-date {
    padding: 4px 13px;
    font-size: 0.86rem;
    letter-spacing: 0.12em;
  }
  .nab-title {
    padding-bottom: 18px;
    line-height: 1.55 !important;
    letter-spacing: 0.08em !important;
  }
  .nab-title::after {
    width: 74px;
  }
  .nab-main-img-box {
    margin: 0 0 34px;
    aspect-ratio: 4 / 3 !important;
    border-radius: 16px !important;
  }
  .nab-main-img-box::before {
    inset: 7px;
    border-radius: 10px;
  }
  .nab-body-text {
    font-size: 0.95rem !important;
    line-height: 2.3 !important;
    letter-spacing: 0.05em !important;
  }
  .news-article-body-section .fc-block-btn-wrap {
    margin-top: 30px;
  }
  .nab-footer-nav {
    margin-top: 40px;
    padding-top: 34px;
  }
  .btn-nab-back {
    width: 100% !important;
    justify-content: center !important;
    min-height: 50px;
    padding: 0 24px;
    font-size: 12px;
    letter-spacing: 0.14em;
  }
}


/* =========================================================
   Page: access / トラットリア クラフト｜千代田区三番町・市ケ谷のイタリアン_店舗案内
========================================================= */

/* Block: hero_page / sec_1785932329448 */
/* =========================================================
   業態テーマ「ビストロ2」 / hero_page（下層ページ共通ヒーロー）
   紙 #f8f1df 基調のテーマだが、この面だけは「写真＋ワインの暗幕」。
   ・背景写真は blocks/hero_page.php がラッパーの inline style で、
     またはセクション背景画像として render.php が #sec_id に出す。
     → CSS 側で background-image を書くと写真を殺すので絶対に書かない。
       longhand（color / size / position / repeat）のみ指定する。
   ・オーバーレイは必ず半透明。単層の最大 α は .62（写真が透ける）。
   ・サイドヘッダー分の padding-left / margin-left は書かない
     （global_css の body [id^="sec_"] が一括オフセット済み）。
   ・style.css:179-196 の .page-hero-wrapper / .ph-* は !important 無し、
     blocks.base.css には .ph-* 系の定義自体が無いため、こちらも !important 不要。
========================================================= */

/* ---------- 台紙 ---------- */
.page-hero-wrapper {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  min-height: clamp(380px, 52svh, 620px);
  padding: 140px 28px 108px;
  overflow: hidden;
  text-align: center;
  color: var(--text-light, #fff7ea);
  background-color: var(--bg-wine-dark, #3f121a);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(197, 162, 90, .38);
  /* セクション背景画像(settings.bg_image)使用時の膜。テーマ既定の
     rgba(248,241,223,.72)（紙色）のままだと写真が白飛びするのでワインの薄膜へ */
  --fc-bg-overlay: rgba(63, 18, 26, .18);
}

/* ---------- 主膜：ワインの暗幕（写真は透ける） ---------- */
.ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    168deg,
    rgba(63, 18, 26, .62) 0%,
    rgba(107, 31, 43, .40) 46%,
    rgba(45, 16, 22, .64) 100%
  );
}

/* 右下の巨大な欧文透かし（本テーマの作法・低コントラスト） */
.ph-overlay::after {
  content: "TRATTORIA";
  position: absolute;
  right: -2.6vw;
  bottom: -3.2rem;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255, 247, 234, .10);
  pointer-events: none;
}

/* ---------- 副膜：中央のテキスト用スクリム＋周辺のヴィネット ---------- */
.page-hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 56% at 50% 50%,
      rgba(44, 20, 24, .50) 0%,
      rgba(44, 20, 24, .38) 54%,
      rgba(44, 20, 24, 0) 82%),
    radial-gradient(ellipse 118% 100% at 50% 46%,
      rgba(32, 23, 19, 0) 44%,
      rgba(32, 23, 19, .28) 100%);
}

/* ---------- 金の細枠（要所の金） ---------- */
.page-hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgba(255, 247, 234, .20);
  box-shadow: inset 0 0 0 1px rgba(197, 162, 90, .16);
  pointer-events: none;
}

/* ---------- 中身 ---------- */
.ph-container {
  position: relative;
  z-index: 4;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 8px;
}

/* 見出し上の小さな金のひし形 */
.ph-container::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 24px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  box-shadow: 0 0 0 1px rgba(255, 247, 234, .32);
}

/* タイトル（明色 #fff7ea・Cormorant・字送り広め） */
.ph-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: #fff7ea;
  text-shadow: 0 2px 16px rgba(32, 23, 19, .55), 0 0 42px rgba(32, 23, 19, .35);
}

/* 見出し下の短い金グラデ罫（本テーマの作法） */
.ph-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 26px auto 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-gold, #c5a25a) 22%,
    #f6cf7a 50%,
    var(--accent-gold, #c5a25a) 78%,
    transparent 100%
  );
}

/* 説明文 */
.ph-desc {
  max-width: 640px;
  margin: 22px auto 0;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: .92rem;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: .08em;
  color: rgba(255, 247, 234, .92);
  text-shadow: 0 1px 12px rgba(32, 23, 19, .55);
}

/* =========================================================
   タブレット（〜1024px）：ヘッダーが上部 72px の横バーになる
========================================================= */
@media (max-width: 1024px) {
  .page-hero-wrapper {
    min-height: 340px;
    min-height: clamp(340px, 46svh, 520px);
    padding: 124px 22px 88px;
  }

  .page-hero-wrapper::before {
    inset: 11px;
  }

  .ph-overlay::after {
    right: -2vw;
    bottom: -1.8rem;
    font-size: clamp(4.5rem, 18vw, 9rem);
  }

  .ph-container::before {
    margin-bottom: 20px;
  }

  .ph-title {
    font-size: clamp(2rem, 6.4vw, 3.2rem);
    letter-spacing: .15em;
    text-indent: .15em;
  }

  .ph-title::after {
    width: 78px;
    margin-top: 22px;
  }

  .ph-desc {
    font-size: .88rem;
    line-height: 2.05;
  }
}

/* =========================================================
   スマホ（〜768px）：ヘッダーは 64px
========================================================= */
@media (max-width: 768px) {
  .page-hero-wrapper {
    min-height: 300px;
    min-height: clamp(300px, 42svh, 460px);
    padding: 104px 16px 72px;
  }

  .page-hero-wrapper::before {
    inset: 8px;
  }

  /* 縦長画面ではテキスト帯を横に広げて読みやすさを確保 */
  .page-hero-wrapper::after {
    background:
      radial-gradient(ellipse 88% 60% at 50% 50%,
        rgba(44, 20, 24, .52) 0%,
        rgba(44, 20, 24, .40) 56%,
        rgba(44, 20, 24, 0) 86%),
      radial-gradient(ellipse 130% 108% at 50% 46%,
        rgba(32, 23, 19, 0) 46%,
        rgba(32, 23, 19, .30) 100%);
  }

  .ph-overlay::after {
    right: -3vw;
    bottom: -1.1rem;
    font-size: clamp(3.4rem, 26vw, 6.5rem);
    color: rgba(255, 247, 234, .10);
  }

  .ph-container {
    padding: 0 4px;
  }

  .ph-container::before {
    width: 6px;
    height: 6px;
    margin-bottom: 18px;
  }

  .ph-title {
    font-size: clamp(1.7rem, 8.6vw, 2.5rem);
    letter-spacing: .12em;
    text-indent: .12em;
  }

  .ph-title::after {
    width: 62px;
    margin-top: 18px;
  }

  .ph-desc {
    margin-top: 18px;
    font-size: .84rem;
    line-height: 2;
    letter-spacing: .05em;
  }
}

/* Block: concept_split / sec_1787978476561 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "Our Story" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}

#sec_1787978476561 > div > div.concept-content > h2{
    font-size: clamp(1.55rem, 2.5vw, 2rem) !important;
}

/* Block: store_info / sec_1785932333583 */
/* =========================================================
   store_info（店舗概要 ⑨）／ 業態テーマ「ビストロ2」
   旧 index_64.css の .shop-info（定義リスト表）＋ .concept-img-wrapper
   （厚いクリーム縁の額縁＋ピスタチオの敷き面）の意匠を現行マークアップで再現。
   紙 #f8f1df 基調 × ワイン #6b1f2b／強調は朱 #b3343d／細線は金 #c5a25a
   ※ blocks.base.css の store_info 節に !important は無いため付けない。
     ただし base と同一プロパティを扱う th/td/img だけは
     .store-info-section を前置（0,2,1）して読み込み順に依存せず勝たせる。
   ※ サイドヘッダー分の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
========================================================= */

/* ---- セクション面（紙＋方眼＋巨大欧文透かし）---- */
.store-info-section {
  position: relative;
  overflow: hidden;
  padding: 106px 24px 114px;
  background:
    linear-gradient(rgba(107, 31, 43, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.032) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, var(--bg-cream, #fffaf0) 58%, #f3e6cd 100%);
  background-size: 60px 60px, 60px 60px, auto;
  color: var(--text-main, #241914);
}

/* 旧 .drinks-section::before 系の巨大欧文透かし（装飾のみ・可読対象外） */
.store-info-section::before {
  content: "INFORMATION";
  position: absolute;
  right: -1.6vw;
  bottom: -2.2rem;
  z-index: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(3rem, 9vw, 8.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: rgba(107, 31, 43, 0.05);
  pointer-events: none;
}

.store-info-container {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---- 見出し ---- */
.store-info-header {
  position: relative;
  max-width: 860px;
  margin: 0 auto 52px;
  text-align: center;
}

/* 見出し上の朱〜橙の小罫 */
.store-info-header::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 深ワイン #3f121a on 紙 #f8f1df = 14.2:1（グラデ最暗 #f3e6cd でも 13.0:1） */
.store-info-title {
  position: relative;
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', 'Noto Serif JP', serif);
  font-size: clamp(1.7rem, 3.4vw, 2.65rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.16em;
  color: var(--bg-wine-dark, #3f121a);
}

/* 見出し下の金〜ワインのグラデ罫（本テーマの作法） */
.store-info-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, rgba(197, 162, 90, 0), var(--accent-gold, #c5a25a) 34%, var(--accent-red, #b3343d) 78%, rgba(179, 52, 61, 0));
}

/* #5d5148 on 紙 #f8f1df = 6.8:1（グラデ最暗 #f3e6cd でも 6.2:1） */
.store-info-desc {
  margin: 22px 0 0;
  font-size: 0.94rem;
  line-height: 2.05;
  letter-spacing: 0.06em;
  color: #5d5148;
}

/* ---- レイアウト（表 ＋ 写真）---- */
.store-info-layout {
  position: relative;
  z-index: 2;
  display: block;
}

.store-info-layout.has-image {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 48px;
  align-items: start;
}

/* 写真なしのときは表を読みやすい幅に絞って中央へ */
.store-info-layout:not(.has-image) .store-info-table-wrap {
  max-width: 860px;
  margin: 0 auto;
}

/* ---- 表の紙箱（クリーム＋上端グラデ＋二重罫＋金のひし形）---- */
.store-info-table-wrap {
  position: relative;
  padding: 44px 46px;
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  border-radius: 26px;
  background-color: var(--bg-cream, #fffaf0);
  background-image: linear-gradient(90deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941) 54%, var(--accent-gold, #c5a25a));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left top;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12));
}

/* 内側の細い二重罫 */
.store-info-table-wrap::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 18px;
  opacity: 0.42;
  pointer-events: none;
}

/* 隅の小さな金のひし形 */
.store-info-table-wrap::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 26px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.68;
  pointer-events: none;
}

/* ---- 定義リスト的な表 ---- */
.store-info-section .store-info-table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: collapse;
}

.store-info-section .store-info-table th,
.store-info-section .store-info-table td {
  padding: 17px 0;
  border-bottom: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  text-align: left;
  vertical-align: top;
  font-size: 0.92rem;
  line-height: 2;
}

/* 見出し列：ワイン文字＋淡いワインの面＋右の縦罫で値列と明確に分ける
   #6b1f2b on クリーム #fffaf0 = 10.88:1（5%ワインを重ねた #f8efe6 でも 9.96:1） */
.store-info-section .store-info-table th {
  width: 152px;
  padding-right: 20px;
  border-right: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  background: rgba(107, 31, 43, 0.05);
  color: var(--text-wine, #6b1f2b);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  white-space: nowrap;
  transition: color 0.28s ease;
}

/* 見出し先頭の小さな金のひし形 */
.store-info-section .store-info-table th::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 0 14px;
  vertical-align: middle;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.85;
}

/* 値列：本文色 #241914 on クリーム #fffaf0 = 16.49:1（ホバー面でも 15.29:1） */
.store-info-section .store-info-table td {
  padding-left: 26px;
  color: var(--text-main, #241914);
  letter-spacing: 0.04em;
  word-break: break-word;
}

.store-info-section .store-info-table tr:last-child th,
.store-info-section .store-info-table tr:last-child td {
  border-bottom: 0;
}

/* 行ホバー：面は 5% の朱、見出し文字は朱 #b3343d
   （クリーム比 5.81:1／ホバー時の見出し面 #fbf0e7 比でも 4.97:1） */
.store-info-section .store-info-table tbody tr {
  transition: background-color 0.28s ease;
}

.store-info-section .store-info-table tbody tr:hover {
  background-color: rgba(179, 52, 61, 0.05);
}

.store-info-section .store-info-table tbody tr:hover th {
  color: var(--accent-red, #b3343d);
}

/* ---- 写真枠（旧 .concept-img-wrapper の額縁）---- */
.store-info-image {
  position: relative;
  width: 100%;
  margin: 0;
}

/* 額の左上に載るワインのタグ（#fff7ea on #6b1f2b = 10.6:1） */
.store-info-image::before {
  content: "Information";
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  padding: 8px 16px;
  background: var(--bg-wine, #6b1f2b);
  color: var(--text-light, #fff7ea);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, 0.12));
  pointer-events: none;
}

/* 右下に敷くピスタチオの面（旧 .concept-img-wrapper::after） */
.store-info-image::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  z-index: -1;
  width: 66%;
  height: 54%;
  border-radius: 30px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* base は height:100% / max-height:420px / border-radius:8px を持つので解除。
   厚いクリームの縁＋非対称の角丸でビストロ2の額縁にする */
.store-info-section .store-info-image img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: none;
  min-height: 380px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 10px solid rgba(255, 250, 240, 0.86);
  border-radius: 32px 32px 132px 32px;
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
  filter: saturate(1.03) contrast(1.02);
  transition: transform 0.45s ease, filter 0.45s ease;
}

.store-info-image:hover img {
  transform: rotate(-0.6deg) scale(1.012);
  filter: saturate(1.08) contrast(1.04);
}

/* =========================================================
   タブレット
========================================================= */
@media (max-width: 1024px) {
  .store-info-section {
    padding: 84px 20px 92px;
  }

  .store-info-header {
    margin-bottom: 44px;
  }

  .store-info-layout.has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
  }

  .store-info-table-wrap {
    padding: 36px 30px;
  }

  .store-info-section .store-info-table th {
    width: 132px;
    padding-right: 16px;
  }

  .store-info-section .store-info-table th::before {
    margin-left: 8px;
  }

  .store-info-section .store-info-table td {
    padding-left: 20px;
  }

  .store-info-section .store-info-image img {
    min-height: 300px;
    border-width: 8px;
    border-radius: 26px 26px 104px 26px;
  }
}

/* =========================================================
   スマートフォン（表と写真を縦積み）
========================================================= */
@media (max-width: 768px) {
  .store-info-section {
    padding: 68px 16px 76px;
  }

  .store-info-section::before {
    font-size: clamp(2.6rem, 17vw, 5rem);
    bottom: -1.2rem;
  }

  .store-info-header {
    margin-bottom: 34px;
  }

  .store-info-title {
    letter-spacing: 0.12em;
  }

  .store-info-desc {
    font-size: 0.88rem;
    line-height: 1.95;
  }

  .store-info-layout.has-image {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  /* 写真を上、店舗概要の表を下に縦積み */
  .store-info-image {
    order: -1;
    margin-bottom: 6px;
  }

  .store-info-image::before {
    left: 12px;
    top: 12px;
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .store-info-image::after {
    right: -12px;
    bottom: -12px;
    border-radius: 22px;
  }

  .store-info-section .store-info-image img {
    min-height: 240px;
    aspect-ratio: 16 / 11;
    border-width: 7px;
    border-radius: 22px 22px 78px 22px;
  }

  .store-info-table-wrap {
    padding: 30px 20px;
    border-radius: 20px;
  }

  .store-info-table-wrap::before {
    inset: 7px;
    border-radius: 15px;
  }

  .store-info-table-wrap::after {
    top: 18px;
    right: 18px;
    width: 8px;
    height: 8px;
  }

  .store-info-section .store-info-table th,
  .store-info-section .store-info-table td {
    padding: 14px 0;
    font-size: 0.86rem;
    line-height: 1.95;
  }

  .store-info-section .store-info-table th {
    width: 108px;
    padding-right: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
  }

  .store-info-section .store-info-table th::before {
    width: 5px;
    height: 5px;
    margin: 0 7px 0 8px;
  }

  .store-info-section .store-info-table td {
    padding-left: 16px;
  }
}

/* =========================================================
   小さいスマホ（旧 .shop-info の縦積み定義リスト）
========================================================= */
@media (max-width: 520px) {
  .store-info-section .store-info-table,
  .store-info-section .store-info-table tbody,
  .store-info-section .store-info-table tr,
  .store-info-section .store-info-table th,
  .store-info-section .store-info-table td {
    display: block;
    width: 100%;
  }

  .store-info-section .store-info-table tbody tr {
    padding: 13px 0;
    border-bottom: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  }

  .store-info-section .store-info-table tbody tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .store-info-section .store-info-table th {
    width: 100%;
    padding: 0 0 3px;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    white-space: normal;
  }

  .store-info-section .store-info-table th::before {
    margin-left: 0;
  }

  .store-info-section .store-info-table td {
    padding: 0 0 0 21px;
    border-bottom: 0;
  }
}

/* Block: gmap / sec_1785932342748 */
/* =========================================================
   gmap（Googleマップ埋め込み）／ 業態テーマ「ビストロ2」
   旧 index_64.css の .gmap-wrap（大きな角丸・強い影・地図フィルタ）を
   現行マークアップ .gmap-frame-wrap へ読み替え、
   クリームの額縁＋内側の細い二重罫＋隅の金のひし形で再構成。
   紙 #f8f1df 基調 × ワイン #6b1f2b／強調は朱 #b3343d／細線は金 #c5a25a
   ※ blocks.base.css の .gmap-* に !important は無いので付けない
   ※ サイドヘッダー分のオフセットは global_css が一括適用済み（ここには書かない）
========================================================= */

/* ---- セクション（暗色の基準CSSを紙へ反転＋方眼＋巨大透かし）---- */
.gmap-section {
  position: relative;
  overflow: hidden;
  padding: 104px 24px 112px;
  background:
    linear-gradient(rgba(107, 31, 43, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 31, 43, 0.032) 1px, transparent 1px),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, var(--bg-cream, #fffaf0) 58%, #f3e6cd 100%);
  background-size: 60px 60px, 60px 60px, auto;
  color: var(--text-main, #241914);
}

/* セクション隅の巨大な欧文透かし */
.gmap-section::before {
  content: "ACCESS";
  position: absolute;
  right: -1.2vw;
  bottom: -2.2rem;
  z-index: 0;
  font-family: var(--font-en, 'Cormorant Garamond', serif);
  font-size: clamp(4.5rem, 14vw, 13rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(107, 31, 43, 0.05);
  pointer-events: none;
  user-select: none;
}

.gmap-container {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}

/* ---- 見出し ---- */
.gmap-header {
  max-width: 820px;
  margin: 0 auto 46px;
  text-align: center;
}

.gmap-title {
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 22px;
  font-family: var(--font-serif, 'Cormorant Garamond', 'Noto Serif JP', serif);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  color: var(--bg-wine-dark, #3f121a);
}

/* 見出し上の小さな金のひし形 */
.gmap-title::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto 16px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.75;
}

/* 見出し下の短い金〜ワインのグラデ罫 */
.gmap-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 96px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(197, 162, 90, 0), var(--accent-gold, #c5a25a) 34%, var(--accent-red, #b3343d) 78%, rgba(179, 52, 61, 0));
}

.gmap-desc {
  margin: 0;
  color: var(--text-muted, #75675c);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.9rem;
  line-height: 2;
  letter-spacing: 0.045em;
}

/* ---- 地図の額縁（旧 .gmap-wrap：大きな角丸＋強い影）---- */
.gmap-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 360px;
  padding: 0;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--border-main, rgba(36, 25, 20, 0.16));
  background: var(--bg-cream, #fffaf0);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, 0.16));
  transition: box-shadow 0.4s ease;
}

/* 額縁内側の細い二重罫（ワイン） */
.gmap-frame-wrap::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 3;
  border: 1px solid var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 22px;
  opacity: 0.5;
  pointer-events: none;
}

/* 額縁の隅に打つ小さな金のひし形（二重罫の上に乗る鋲） */
.gmap-frame-wrap::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 4;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.85;
  pointer-events: none;
}

.gmap-frame-wrap:hover {
  box-shadow: var(--shadow-strong, 0 34px 88px rgba(32, 23, 19, 0.28));
}

/* 地図本体：クリームの帯（18px）で額装し、紙の世界観に寄せる控えめなフィルタ */
.gmap-frame-wrap iframe {
  position: absolute;
  inset: 18px;
  z-index: 1;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  border: 0;
  border-radius: 16px;
  background: var(--bg-paper, #f8f1df);
  filter: sepia(0.13) saturate(0.94) contrast(1.02);
  transition: filter 0.4s ease;
}

/* ホバー時はフィルタをほぼ解除して地図の可読性を優先 */
.gmap-frame-wrap:hover iframe {
  filter: sepia(0.03) saturate(1) contrast(1);
}

/* ---- 未設定時の案内（紙のプレート）---- */
.gmap-placeholder {
  position: absolute;
  inset: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border: 1px dashed var(--border-wine, rgba(107, 31, 43, 0.28));
  border-radius: 16px;
  background-color: var(--bg-cream, #fffaf0);
  background-image: repeating-linear-gradient(135deg, rgba(107, 31, 43, 0.045) 0 1px, transparent 1px 13px);
  text-align: center;
  color: var(--text-wine, #6b1f2b);
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 0.88rem;
  line-height: 2;
  letter-spacing: 0.05em;
}

.gmap-placeholder::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  opacity: 0.8;
}

/* =========================================================
   レスポンシブ
========================================================= */
@media (max-width: 1024px) {
  .gmap-section {
    padding: 88px 40px 96px;
  }
  .gmap-header {
    margin: 0 auto 38px;
  }
  .gmap-title {
    font-size: clamp(1.5rem, 3.6vw, 2.05rem);
    letter-spacing: 0.14em;
    padding-bottom: 18px;
  }
  .gmap-title::after {
    width: 84px;
  }
  .gmap-frame-wrap {
    aspect-ratio: 16 / 10;
    min-height: 340px;
    border-radius: 26px;
  }
  .gmap-frame-wrap::before {
    inset: 8px;
    border-radius: 19px;
  }
  .gmap-frame-wrap iframe {
    inset: 16px;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    border-radius: 14px;
  }
  .gmap-placeholder {
    inset: 16px;
    border-radius: 14px;
  }
}

@media (max-width: 768px) {
  .gmap-section {
    padding: 72px 20px 84px;
  }
  .gmap-section::before {
    right: -0.8rem;
    bottom: -1.4rem;
    font-size: clamp(3.4rem, 26vw, 7rem);
  }
  .gmap-header {
    margin: 0 auto 30px;
  }
  .gmap-title {
    margin: 0 0 16px;
    padding-bottom: 15px;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
  }
  .gmap-title::before {
    width: 9px;
    height: 9px;
    margin: 0 auto 13px;
  }
  .gmap-title::after {
    width: 72px;
  }
  .gmap-desc {
    font-size: 0.85rem;
    line-height: 1.95;
  }
  .gmap-frame-wrap {
    aspect-ratio: 4 / 3;
    min-height: 340px;
    border-radius: 22px;
  }
  .gmap-frame-wrap::before {
    inset: 7px;
    border-radius: 16px;
  }
  .gmap-frame-wrap::after {
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
  }
  .gmap-frame-wrap iframe {
    inset: 13px;
    width: calc(100% - 26px);
    height: calc(100% - 26px);
    border-radius: 11px;
  }
  .gmap-placeholder {
    inset: 13px;
    gap: 11px;
    padding: 18px;
    border-radius: 11px;
    font-size: 0.83rem;
    line-height: 1.9;
  }
}

/* Block: custom_html / sec_1787978764659 */
/* ============================================================
   custom_html（自由HTML埋め込み）— bistro2 theme
   このブロックは「器」だけ。blocks/custom_html.php が末尾で
   #id インライン<style>を出力し、.custom-html-wrapper /
   .custom-html-inner を padding:0 / max-width:none /
   background:transparent / width:100% に #id+!important で固定する
   （full-bleed 設計）。#id セレクタ(1,1,0)は class セレクタ(0,1,0)に
   !important 同士でも勝つため、コンテナの「余白・最大幅・中央寄せ」は
   テーマCSSから上書き不可＝あえて設定しない。よって base の !important
   2セレクタ(.custom-html-wrapper / .custom-html-inner)には触れない。
   紙#f8f1df × ワインの世界観に「馴染ませる」範囲で、店舗が入れる任意HTMLの
   リンク・見出し・区切り・引用のみ最小限で寄せる（base のこれら子孫向け
   セレクタは !important なし＝こちらも付けない。店舗のインライン/独自クラスで
   上書きできる弱い特定度に留め、見た目を強制しすぎない）。
   ============================================================ */

/* リンク：ワイン → ホバー朱。紙#f8f1df 上：wine 10.0:1 / 朱 5.4:1（本文4.5↑） 
.custom-html-inner a {
  color: var(--text-wine);
  text-decoration-color: var(--border-wine);
  text-underline-offset: 2px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.custom-html-inner a:hover,
.custom-html-inner a:focus {
  color: var(--accent-red);
  text-decoration-color: var(--accent-red);
}*/

/* 見出し：Cormorant Garamond・深ワイン・字送り広め。紙 上：14.2:1（大見出し3.0↑） */
.custom-html-inner h1,
.custom-html-inner h2,
.custom-html-inner h3,
.custom-html-inner h4,
.custom-html-inner h5,
.custom-html-inner h6 {
  font-family: var(--font-serif);
  color: var(--bg-wine-dark);
  letter-spacing: .04em;
  line-height: 1.4;
}

/* 区切り線：本テーマ作法の 金→ワイン グラデ罫（面ではなく細い罫なので文字対比の対象外） */
.custom-html-inner hr {
  border: 0;
  height: 2px;
  margin: 28px 0;
  background: linear-gradient(90deg, var(--accent-gold), var(--bg-wine));
  opacity: .85;
}

/* 引用：クリーム面＋細いワイン罫。面 cream#fffaf0 × 文字 ink#241914 = 16.5:1（本文4.5↑） */
.custom-html-inner blockquote {
  margin: 20px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--border-wine);
  background: var(--bg-cream);
  color: var(--text-main);
  line-height: 1.9;
}

/* レスポンシブ（1024px以下 / 768px以下） */
@media (max-width: 1024px) {
  .custom-html-inner hr { margin: 24px 0; }
}
@media (max-width: 768px) {
  .custom-html-inner hr { margin: 20px 0; }
  .custom-html-inner blockquote { padding: 12px 16px; }
}


/* 全体・フォント設定 */
.faq-section {
  background-color: #f2e5cd; /* 柔らかなベージュ背景 */
  padding: 60px 20px;
  font-family: "Shippori Mincho", "Yu Mincho", "游明朝", "MS PMincho", serif; /* 明朝体統一 */
  color: #333333;
}

.faq-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* タイトル */
.faq-title {
  text-align: center !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  margin-bottom: 40px;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
}

/* Q&Aリスト */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid #f0eae1;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 質問 (Q) - アコーディオンヘッダー */
.faq-question {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  padding: 24px 30px;
  cursor: pointer;
  list-style: none; /* デフォルトの三角アイコンを非表示 */
  position: relative;
}

/* Firefox等でのデフォルトアイコン消去 */
.faq-question::-webkit-details-marker {
  display: none;
}

.faq-label {
  color: #800020; /* ワインレッド */
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: bold;
  flex-shrink: 0;
}

.faq-text {
  flex-grow: 1;
  padding-right: 20px;
}

/* 開閉アイコン（＋ / －） */
.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background-color: #800020;
  transition: transform 0.3s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-icon::before {
  width: 100%;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 100%;
}

/* 開いている状態のアイコン変化 (＋ ➔ －) */
.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* 回答 (A) */
.faq-answer {
  padding: 0 30px 24px 70px; /* Qラベルの幅に合わせてインデント */
  font-size: 16px;
  line-height: 1.8;
  color: #1d1d1d;
}

.faq-answer p {
  margin: 0;
}

/* View More ボタン 
.faq-btn-wrapper {
  text-align: center;
  margin-top: 40px;
}

.faq-btn {
  display: inline-block;
  padding: 14px 48px;
  background-color: transparent;
  color: #800020; /* 視認性向上のためワインレッドに設定 
  border: 1px solid #800020;
  border-radius: 50px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
}

.faq-btn:hover {
  background-color: #800020;
  color: #ffffff;
}*/

/* スマホ対応 */
@media (max-width: 768px) {
  .faq-section {
    padding: 40px 16px;
  }
  
  .faq-question {
    font-size: 16px;
    padding: 18px 20px;
  }
  
  .faq-answer {
    padding: 0 20px 20px 20px; /* スマホでは左インデントを調整 */
  }
}


/* =========================================================
   Page: concept / トラットリア クラフト｜千代田区三番町・市ケ谷のイタリアン_こだわり
========================================================= */

/* Block: hero_page / sec_1785932055215 */
/* =========================================================
   業態テーマ「ビストロ2」 / hero_page（下層ページ共通ヒーロー）
   紙 #f8f1df 基調のテーマだが、この面だけは「写真＋ワインの暗幕」。
   ・背景写真は blocks/hero_page.php がラッパーの inline style で、
     またはセクション背景画像として render.php が #sec_id に出す。
     → CSS 側で background-image を書くと写真を殺すので絶対に書かない。
       longhand（color / size / position / repeat）のみ指定する。
   ・オーバーレイは必ず半透明。単層の最大 α は .62（写真が透ける）。
   ・サイドヘッダー分の padding-left / margin-left は書かない
     （global_css の body [id^="sec_"] が一括オフセット済み）。
   ・style.css:179-196 の .page-hero-wrapper / .ph-* は !important 無し、
     blocks.base.css には .ph-* 系の定義自体が無いため、こちらも !important 不要。
========================================================= */

/* ---------- 台紙 ---------- */
.page-hero-wrapper {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  min-height: clamp(380px, 52svh, 620px);
  padding: 140px 28px 108px;
  overflow: hidden;
  text-align: center;
  color: var(--text-light, #fff7ea);
  background-color: var(--bg-wine-dark, #3f121a);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(197, 162, 90, .38);
  /* セクション背景画像(settings.bg_image)使用時の膜。テーマ既定の
     rgba(248,241,223,.72)（紙色）のままだと写真が白飛びするのでワインの薄膜へ */
  --fc-bg-overlay: rgba(63, 18, 26, .18);
}

/* ---------- 主膜：ワインの暗幕（写真は透ける） ---------- */
.ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    168deg,
    rgba(63, 18, 26, .62) 0%,
    rgba(107, 31, 43, .40) 46%,
    rgba(45, 16, 22, .64) 100%
  );
}

/* 右下の巨大な欧文透かし（本テーマの作法・低コントラスト） */
.ph-overlay::after {
  content: "TRATTORIA";
  position: absolute;
  right: -2.6vw;
  bottom: -3.2rem;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255, 247, 234, .10);
  pointer-events: none;
}

/* ---------- 副膜：中央のテキスト用スクリム＋周辺のヴィネット ---------- */
.page-hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 56% at 50% 50%,
      rgba(44, 20, 24, .50) 0%,
      rgba(44, 20, 24, .38) 54%,
      rgba(44, 20, 24, 0) 82%),
    radial-gradient(ellipse 118% 100% at 50% 46%,
      rgba(32, 23, 19, 0) 44%,
      rgba(32, 23, 19, .28) 100%);
}

/* ---------- 金の細枠（要所の金） ---------- */
.page-hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgba(255, 247, 234, .20);
  box-shadow: inset 0 0 0 1px rgba(197, 162, 90, .16);
  pointer-events: none;
}

/* ---------- 中身 ---------- */
.ph-container {
  position: relative;
  z-index: 4;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 8px;
}

/* 見出し上の小さな金のひし形 */
.ph-container::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 24px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  box-shadow: 0 0 0 1px rgba(255, 247, 234, .32);
}

/* タイトル（明色 #fff7ea・Cormorant・字送り広め） */
.ph-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: #fff7ea;
  text-shadow: 0 2px 16px rgba(32, 23, 19, .55), 0 0 42px rgba(32, 23, 19, .35);
}

/* 見出し下の短い金グラデ罫（本テーマの作法） */
.ph-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 26px auto 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-gold, #c5a25a) 22%,
    #f6cf7a 50%,
    var(--accent-gold, #c5a25a) 78%,
    transparent 100%
  );
}

/* 説明文 */
.ph-desc {
  max-width: 640px;
  margin: 22px auto 0;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: .92rem;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: .08em;
  color: rgba(255, 247, 234, .92);
  text-shadow: 0 1px 12px rgba(32, 23, 19, .55);
}

/* =========================================================
   タブレット（〜1024px）：ヘッダーが上部 72px の横バーになる
========================================================= */
@media (max-width: 1024px) {
  .page-hero-wrapper {
    min-height: 340px;
    min-height: clamp(340px, 46svh, 520px);
    padding: 124px 22px 88px;
  }

  .page-hero-wrapper::before {
    inset: 11px;
  }

  .ph-overlay::after {
    right: -2vw;
    bottom: -1.8rem;
    font-size: clamp(4.5rem, 18vw, 9rem);
  }

  .ph-container::before {
    margin-bottom: 20px;
  }

  .ph-title {
    font-size: clamp(2rem, 6.4vw, 3.2rem);
    letter-spacing: .15em;
    text-indent: .15em;
  }

  .ph-title::after {
    width: 78px;
    margin-top: 22px;
  }

  .ph-desc {
    font-size: .88rem;
    line-height: 2.05;
  }
}

/* =========================================================
   スマホ（〜768px）：ヘッダーは 64px
========================================================= */
@media (max-width: 768px) {
  .page-hero-wrapper {
    min-height: 300px;
    min-height: clamp(300px, 42svh, 460px);
    padding: 104px 16px 72px;
  }

  .page-hero-wrapper::before {
    inset: 8px;
  }

  /* 縦長画面ではテキスト帯を横に広げて読みやすさを確保 */
  .page-hero-wrapper::after {
    background:
      radial-gradient(ellipse 88% 60% at 50% 50%,
        rgba(44, 20, 24, .52) 0%,
        rgba(44, 20, 24, .40) 56%,
        rgba(44, 20, 24, 0) 86%),
      radial-gradient(ellipse 130% 108% at 50% 46%,
        rgba(32, 23, 19, 0) 46%,
        rgba(32, 23, 19, .30) 100%);
  }

  .ph-overlay::after {
    right: -3vw;
    bottom: -1.1rem;
    font-size: clamp(3.4rem, 26vw, 6.5rem);
    color: rgba(255, 247, 234, .10);
  }

  .ph-container {
    padding: 0 4px;
  }

  .ph-container::before {
    width: 6px;
    height: 6px;
    margin-bottom: 18px;
  }

  .ph-title {
    font-size: clamp(1.7rem, 8.6vw, 2.5rem);
    letter-spacing: .12em;
    text-indent: .12em;
  }

  .ph-title::after {
    width: 62px;
    margin-top: 18px;
  }

  .ph-desc {
    margin-top: 18px;
    font-size: .84rem;
    line-height: 2;
    letter-spacing: .05em;
  }
}

/* Block: concept_split / sec_1785932067548 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "Our Story" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}


#sec_1785932067548 > div > div.concept-content > h2,
#sec_1786348146598 > div > div.concept-content > h2,
#sec_1786348151710 > div > div.concept-content > h2,
#sec_1787981019700 > div > div.concept-content > h2,
#sec_1787981021051 > div > div.concept-content > h2,
#sec_1787981154633 > div > div.concept-content > h2
{
        font-size: clamp(1.55rem, 2.5vw, 2rem) !important;
}

/* Block: concept_split / sec_1786348146598 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "Our Story" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}

/* Block: concept_split / sec_1786348151710 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "Our Story" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}

/* Block: concept_split / sec_1787981019700 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "Our Story" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}

/* Block: concept_split / sec_1787981021051 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "Our Story" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}

/* Block: concept_split / sec_1787981154633 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "Our Story" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}


/* =========================================================
   Page: owner / トラットリア クラフト｜千代田区三番町・市ケ谷のイタリアン_オーナー紹介
========================================================= */

/* Block: hero_page / sec_1787981232299 */
/* =========================================================
   業態テーマ「ビストロ2」 / hero_page（下層ページ共通ヒーロー）
   紙 #f8f1df 基調のテーマだが、この面だけは「写真＋ワインの暗幕」。
   ・背景写真は blocks/hero_page.php がラッパーの inline style で、
     またはセクション背景画像として render.php が #sec_id に出す。
     → CSS 側で background-image を書くと写真を殺すので絶対に書かない。
       longhand（color / size / position / repeat）のみ指定する。
   ・オーバーレイは必ず半透明。単層の最大 α は .62（写真が透ける）。
   ・サイドヘッダー分の padding-left / margin-left は書かない
     （global_css の body [id^="sec_"] が一括オフセット済み）。
   ・style.css:179-196 の .page-hero-wrapper / .ph-* は !important 無し、
     blocks.base.css には .ph-* 系の定義自体が無いため、こちらも !important 不要。
========================================================= */

/* ---------- 台紙 ---------- */
.page-hero-wrapper {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  min-height: clamp(380px, 52svh, 620px);
  padding: 140px 28px 108px;
  overflow: hidden;
  text-align: center;
  color: var(--text-light, #fff7ea);
  background-color: var(--bg-wine-dark, #3f121a);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(197, 162, 90, .38);
  /* セクション背景画像(settings.bg_image)使用時の膜。テーマ既定の
     rgba(248,241,223,.72)（紙色）のままだと写真が白飛びするのでワインの薄膜へ */
  --fc-bg-overlay: rgba(63, 18, 26, .18);
}

/* ---------- 主膜：ワインの暗幕（写真は透ける） ---------- */
.ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    168deg,
    rgba(63, 18, 26, .62) 0%,
    rgba(107, 31, 43, .40) 46%,
    rgba(45, 16, 22, .64) 100%
  );
}

/* 右下の巨大な欧文透かし（本テーマの作法・低コントラスト） */
.ph-overlay::after {
  content: "TRATTORIA";
  position: absolute;
  right: -2.6vw;
  bottom: -3.2rem;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255, 247, 234, .10);
  pointer-events: none;
}

/* ---------- 副膜：中央のテキスト用スクリム＋周辺のヴィネット ---------- */
.page-hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 56% at 50% 50%,
      rgba(44, 20, 24, .50) 0%,
      rgba(44, 20, 24, .38) 54%,
      rgba(44, 20, 24, 0) 82%),
    radial-gradient(ellipse 118% 100% at 50% 46%,
      rgba(32, 23, 19, 0) 44%,
      rgba(32, 23, 19, .28) 100%);
}

/* ---------- 金の細枠（要所の金） ---------- */
.page-hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgba(255, 247, 234, .20);
  box-shadow: inset 0 0 0 1px rgba(197, 162, 90, .16);
  pointer-events: none;
}

/* ---------- 中身 ---------- */
.ph-container {
  position: relative;
  z-index: 4;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 8px;
}

/* 見出し上の小さな金のひし形 */
.ph-container::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 24px;
  transform: rotate(45deg);
  background: var(--accent-gold, #c5a25a);
  box-shadow: 0 0 0 1px rgba(255, 247, 234, .32);
}

/* タイトル（明色 #fff7ea・Cormorant・字送り広め） */
.ph-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: #fff7ea;
  text-shadow: 0 2px 16px rgba(32, 23, 19, .55), 0 0 42px rgba(32, 23, 19, .35);
}

/* 見出し下の短い金グラデ罫（本テーマの作法） */
.ph-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 26px auto 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-gold, #c5a25a) 22%,
    #f6cf7a 50%,
    var(--accent-gold, #c5a25a) 78%,
    transparent 100%
  );
}

/* 説明文 */
.ph-desc {
  max-width: 640px;
  margin: 22px auto 0;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: .92rem;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: .08em;
  color: rgba(255, 247, 234, .92);
  text-shadow: 0 1px 12px rgba(32, 23, 19, .55);
}

/* =========================================================
   タブレット（〜1024px）：ヘッダーが上部 72px の横バーになる
========================================================= */
@media (max-width: 1024px) {
  .page-hero-wrapper {
    min-height: 340px;
    min-height: clamp(340px, 46svh, 520px);
    padding: 124px 22px 88px;
  }

  .page-hero-wrapper::before {
    inset: 11px;
  }

  .ph-overlay::after {
    right: -2vw;
    bottom: -1.8rem;
    font-size: clamp(4.5rem, 18vw, 9rem);
  }

  .ph-container::before {
    margin-bottom: 20px;
  }

  .ph-title {
    font-size: clamp(2rem, 6.4vw, 3.2rem);
    letter-spacing: .15em;
    text-indent: .15em;
  }

  .ph-title::after {
    width: 78px;
    margin-top: 22px;
  }

  .ph-desc {
    font-size: .88rem;
    line-height: 2.05;
  }
}

/* =========================================================
   スマホ（〜768px）：ヘッダーは 64px
========================================================= */
@media (max-width: 768px) {
  .page-hero-wrapper {
    min-height: 300px;
    min-height: clamp(300px, 42svh, 460px);
    padding: 104px 16px 72px;
  }

  .page-hero-wrapper::before {
    inset: 8px;
  }

  /* 縦長画面ではテキスト帯を横に広げて読みやすさを確保 */
  .page-hero-wrapper::after {
    background:
      radial-gradient(ellipse 88% 60% at 50% 50%,
        rgba(44, 20, 24, .52) 0%,
        rgba(44, 20, 24, .40) 56%,
        rgba(44, 20, 24, 0) 86%),
      radial-gradient(ellipse 130% 108% at 50% 46%,
        rgba(32, 23, 19, 0) 46%,
        rgba(32, 23, 19, .30) 100%);
  }

  .ph-overlay::after {
    right: -3vw;
    bottom: -1.1rem;
    font-size: clamp(3.4rem, 26vw, 6.5rem);
    color: rgba(255, 247, 234, .10);
  }

  .ph-container {
    padding: 0 4px;
  }

  .ph-container::before {
    width: 6px;
    height: 6px;
    margin-bottom: 18px;
  }

  .ph-title {
    font-size: clamp(1.7rem, 8.6vw, 2.5rem);
    letter-spacing: .12em;
    text-indent: .12em;
  }

  .ph-title::after {
    width: 62px;
    margin-top: 18px;
  }

  .ph-desc {
    margin-top: 18px;
    font-size: .84rem;
    line-height: 2;
    letter-spacing: .05em;
  }
}

/* Block: free_text_box / sec_1787981337365 */
/* ==========================================================
   業態テーマ「ビストロ2」 / free_text_box（自由テキスト）
   紙 #f8f1df の面にクリーム #fffaf0 のカードを置き、左端にワインの
   縦バー、内側に金のヘアライン、隅に大きな欧文の引用符を透かす。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css が !important を持つプロパティ
     （.free-text-section の padding/background/color/text-align、
      .free-text-container の max-width/margin/padding/background/
      border/border-left/border-radius/box-shadow/text-align、
      .free-text-title と .free-text-desc の各プロパティ）は
     こちらにも !important を付けて上書きする。
     .fc-block-btn 系は base に !important が無いため付けない。
   ========================================================== */

/* ---------- セクション面（紙のグラデーション） ---------- */
.free-text-section {
  position: relative;
  padding: 118px 24px 112px !important;
  background:
    radial-gradient(circle at 88% 6%, rgba(107, 31, 43, .07), transparent 30%),
    linear-gradient(135deg, var(--bg-paper, #f8f1df) 0%, #f3e6cd 100%) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: center !important;
}

/* 右上の巨大な欧文引用符（本テーマの透かし作法）。
   低コントラストの装飾なので pointer-events / user-select は無効化する */
.free-text-section::before {
  content: "\201C";
  position: absolute;
  top: -.30em;
  right: 3vw;
  z-index: 0;
  color: rgba(107, 31, 43, .07);
  font-family: 'Cormorant Garamond', var(--font-serif, serif);
  font-size: clamp(11rem, 26vw, 23rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 左下のピスタチオ斜めストライプ（concept_split と同じ族の装飾） */
.free-text-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 26vw;
  height: 26vw;
  max-width: 320px;
  max-height: 320px;
  opacity: .6;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .16) 0,
    rgba(127, 141, 91, .16) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- カード（クリーム面＋ワインの縦バー） ---------- */
/* base は border-left: 4px solid var(--gold) !important を持つので、
   border → border-left の順に書いて確実に上書きする */
.free-text-container {
  position: relative;
  z-index: 5;
  max-width: 950px !important;
  margin: 0 auto !important;
  padding: 52px 56px 54px !important;
  background: var(--bg-cream, #fffaf0) !important;
  border: 1px solid var(--border-main, rgba(36, 25, 20, .16)) !important;
  border-left: 5px solid var(--bg-wine, #6b1f2b) !important;
  border-radius: 4px 20px 20px 4px !important;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, .12)) !important;
  text-align: left !important;
}

/* 内側の金のヘアライン枠（旧 .free-text-box::before の意匠） */
.free-text-container::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 0;
  border: 1px solid rgba(197, 162, 90, .40);
  border-radius: 2px 14px 14px 2px;
  pointer-events: none;
}

/* 右下の金の角線（手書きメニューの罫の名残）。
   カード padding の内側に収まるので本文には重ならない */
.free-text-container::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 0;
  width: 26px;
  height: 26px;
  border-right: 2px solid var(--accent-gold, #c5a25a);
  border-bottom: 2px solid var(--accent-gold, #c5a25a);
  border-radius: 0 0 6px 0;
  opacity: .55;
  pointer-events: none;
}

/* ---------- 見出し（深ワイン・字送り広め） ---------- */
/* コントラスト比 15.4:1（#3f121a on #fffaf0） */
.free-text-title {
  position: relative;
  z-index: 1;
  margin: 0 0 26px !important;
  padding: 0 0 18px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Cormorant Garamond', var(--font-serif, 'Noto Serif JP', serif) !important;
  font-size: clamp(1.4rem, 2.8vw, 2.05rem) !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  letter-spacing: .12em !important;
  overflow-wrap: break-word;
}

/* 見出し下の短い金〜ワインのグラデ罫（本テーマの作法） */
.free-text-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-gold, #c5a25a), var(--bg-wine, #6b1f2b));
}

/* ---------- 本文（行間ゆったり・可変長でも崩れない） ---------- */
/* コントラスト比 15.3:1（#2c1f18 on #fffaf0） */
.free-text-desc {
  position: relative;
  z-index: 1;
  display: block !important;
  margin: 0 !important;
  max-width: 100%;
  color: #2c1f18 !important;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 400;
  line-height: 2.05 !important;
  letter-spacing: .05em !important;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

/* ---------- ボタン（配色はサイト共通の --fc-btn-* に委ねる） ---------- */
/* base の .fc-block-btn 系には !important が無いため、
   .free-text-container を前置した詳細度（0,2,0 / 0,3,0）だけで上書きする */
.free-text-container .fc-block-btn-wrap {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  text-align: left;
}

.free-text-container .fc-block-btn {
  min-height: 52px;
  padding: 0 40px;
  border-radius: 2px;
  font-family: var(--font-sans, 'Zen Kaku Gothic New', sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  box-shadow: var(--shadow-soft, 0 18px 44px rgba(63, 18, 26, .12));
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}

.free-text-container .fc-block-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card, 0 22px 60px rgba(32, 23, 19, .16));
}

/* ==========================================================
   タブレット（1024px 以下）
   ========================================================== */
@media (max-width: 1024px) {
  .free-text-section {
    padding: 92px 22px 88px !important;
  }

  .free-text-section::before {
    right: 1.5vw;
    font-size: clamp(9rem, 27vw, 17rem);
  }

  .free-text-container {
    max-width: 760px !important;
    padding: 44px 44px 46px !important;
  }

  .free-text-title {
    margin-bottom: 24px !important;
    font-size: clamp(1.34rem, 3.4vw, 1.8rem) !important;
  }

  .free-text-desc {
    font-size: .97rem !important;
    line-height: 2.02 !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   base の 768px 側にも !important があるので同じく !important を付ける
   ========================================================== */
@media (max-width: 768px) {
  .free-text-section {
    padding: 68px 16px 70px !important;
  }

  .free-text-section::before {
    top: -.24em;
    right: -1vw;
    color: rgba(107, 31, 43, .06);
    font-size: clamp(7rem, 34vw, 11rem);
  }

  .free-text-section::after {
    width: 46vw;
    height: 46vw;
    opacity: .45;
  }

  .free-text-container {
    padding: 34px 24px 38px !important;
    border-left-width: 4px !important;
    border-radius: 3px 14px 14px 3px !important;
  }

  .free-text-container::before {
    inset: 7px;
    border-radius: 2px 10px 10px 2px;
  }

  .free-text-container::after {
    right: 12px;
    bottom: 12px;
    width: 20px;
    height: 20px;
  }

  .free-text-title {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    font-size: clamp(1.22rem, 5.4vw, 1.55rem) !important;
    line-height: 1.55 !important;
    letter-spacing: .09em !important;
  }

  .free-text-title::after {
    width: 60px;
  }

  .free-text-desc {
    font-size: .94rem !important;
    line-height: 1.98 !important;
    letter-spacing: .04em !important;
  }

  .free-text-container .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .free-text-container .fc-block-btn {
    width: 100%;
    max-width: 320px;
    padding: 0 24px;
    letter-spacing: .1em;
  }
}


/* PCでは改行を非表示（1行で表示） */
.sp-only-br {
  display: none;
}

/* SP（ブレイクポイントはお使いのサイトに合わせて調整可）のみ改行 */
@media screen and (max-width: 768px) {
  .sp-only-br {
    display: inline;
  }
}

/* Block: concept_split / sec_1787981455915 */
/* ==========================================================
   業態テーマ「ビストロ2」 / concept_split（コンセプト）
   紙 #f8f1df 基調・ワイン #6b1f2b アクセントの明色テーマ。
   ※ side-header 由来の padding-left / margin-left は書かない
     （global_css が body [id^="sec_"] に一括オフセット済み）
   ※ blocks.base.css に !important があるプロパティは
     こちらにも !important を付けて上書きしている
   ========================================================== */

/* ---------- セクション面（紙＋クリーム） ---------- */
.concept-section {
  position: relative;
  padding: 132px 24px 126px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(179, 52, 61, .10), transparent 24%),
    linear-gradient(135deg, var(--bg-cream, #fffaf0), var(--bg-paper, #f8f1df)) !important;
  color: var(--text-main, #241914) !important;
  overflow: hidden;
  text-align: left !important;
}

/* 右下の斜めストライプ装飾（旧 .concept-section::before） */
.concept-section::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 141, 91, .14) 0,
    rgba(127, 141, 91, .14) 1px,
    transparent 1px,
    transparent 18px
  );
}

/* ---------- 2カラムグリッド ---------- */
.concept-container {
  position: relative;
  z-index: 5;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.15fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* 左右交互（必須）。base が .concept-container.concept-reverse で
   !important 指定しているので同じ複合セレクタで上書きする */
.concept-container.concept-reverse {
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .95fr) !important;
}

.concept-container.concept-reverse .concept-content {
  order: 2 !important;
}

.concept-container.concept-reverse .concept-img-wrapper {
  order: 1 !important;
}

/* ---------- テキスト側 ---------- */
.concept-content {
  position: relative !important;
  width: auto !important;
  display: block !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.concept-content::before {
  display: none !important;
}

/* 本文（コントラスト比 6.6:1 / #5f5248 on #f8f1df） */
.concept-text,
.concept-content p {
  margin: 0 !important;
  color: #5f5248 !important;
  font-family: var(--font-sans, "Zen Kaku Gothic New", sans-serif);
  font-size: .98rem !important;
  font-weight: 500;
  line-height: 2.25 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* 見出し（コントラスト比 15:1 / #3f121a on #f8f1df） */
.concept-title,
.concept-content h2,
.concept-content h3 {
  margin: 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: 'Noto Serif JP', var(--font-serif, serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.56 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* 見出し中の強調（マーカー）。旧 accent-red は
   マーカー面の上で 4.1:1 と弱いのでワインに置換（7.7:1） */
.concept-title span {
  color: var(--text-wine, #6b1f2b);
  background: linear-gradient(transparent 64%, rgba(217, 121, 65, .28) 64%);
}

/* セクションタイトル（新規要素）。base の .concept-content p（0,1,1）に
   負けないよう必ず .concept-content p.concept-eyebrow（0,2,1）で書く */
.concept-content p.concept-eyebrow {
  position: relative;
  display: inline-block !important;
  margin: 0 0 26px !important;
  padding: 0 0 0 28px !important;
  color: var(--bg-wine-dark, #3f121a) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif) !important;
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: .10em !important;
  text-align: left !important;
}

/* 赤→橙の縦バー（旧 .section-header h2::before） */
.concept-content p.concept-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 8px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-red, #b3343d), var(--accent-orange, #d97941));
}

/* 緑のアンダーライン（旧 .section-header h2::after） */
.concept-content p.concept-eyebrow::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  width: 84px;
  height: 2px;
  background: var(--accent-green, #7f8d5b);
}

/* ボタン（配色はサイト共通の --fc-btn-* に委ねる） */
.concept-content .fc-block-btn-wrap {
  margin-top: 34px;
  text-align: left;
}

/* ---------- 画像側 ---------- */
/* base は wrapper 側に overflow:hidden / 角丸 / 影 / 濃色背景を
   !important で当てているため、飾りがはみ出せるよう全て解除する */
.concept-img-wrapper {
  position: relative !important;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* 左上のワインのラベル（旧 "Our Story" バッジ）。
   base は content:"" / inset:14px / border を !important で持つので
   inset を auto に戻してから left/top を再指定する */
/*.concept-img-wrapper::before {
  content: "Our Story" !important;
  position: absolute !important;
  inset: auto !important;
  left: -34px !important;
  top: -34px !important;
  z-index: 3 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  background: var(--bg-wine, #6b1f2b) !important;
  color: var(--text-light, #fff7ea) !important;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 10px 24px rgba(36, 25, 20, .18));
  pointer-events: none !important;
}*/

/* 右下のピスタチオの面（旧 .concept-img-wrapper::after） */
.concept-img-wrapper::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -1;
  width: 68%;
  height: 56%;
  border-radius: 32px;
  background: var(--bg-pistachio, #dbe2c4);
  pointer-events: none;
}

/* 画像本体。PHP のインラインstyle（width/height/object-fit）に
   勝つため !important が必須 */
.concept-img-wrapper img,
.concept-img-wrapper video {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 460px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 10px solid rgba(255, 250, 240, .78);
  border-radius: 42px 42px 180px 42px;
  box-shadow: var(--shadow-card, 0 22px 48px rgba(36, 25, 20, .22));
  filter: saturate(1.03) !important;
  transition: transform .45s ease, filter .45s ease;
}

.concept-img-wrapper:hover img,
.concept-img-wrapper:hover video {
  transform: rotate(-1deg) scale(1.015);
  filter: saturate(1.09) !important;
}

/* 反転時は装飾も左右反転する */
.concept-container.concept-reverse .concept-img-wrapper::before {
  left: auto !important;
  right: -34px !important;
}

.concept-container.concept-reverse .concept-img-wrapper::after {
  right: auto;
  left: -24px;
}

.concept-container.concept-reverse .concept-img-wrapper img,
.concept-container.concept-reverse .concept-img-wrapper video {
  border-radius: 42px 42px 42px 180px;
}

/* ==========================================================
   タブレット（1024px 以下）: 旧テンプレ同様 1カラムへ
   ========================================================== */
@media (max-width: 1024px) {
  .concept-section {
    padding: 100px 22px 96px !important;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 380px !important;
  }
}

/* ==========================================================
   スマホ（768px 以下）
   ========================================================== */
@media (max-width: 768px) {
  .concept-section {
    padding: 74px 18px 78px !important;
  }

  .concept-section::before {
    width: 62vw;
    height: 62vw;
    opacity: .5;
  }

  .concept-container,
  .concept-container.concept-reverse {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .concept-container.concept-reverse .concept-content,
  .concept-container.concept-reverse .concept-img-wrapper {
    order: initial !important;
  }

  .concept-content {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .concept-text,
  .concept-content p {
    font-size: .91rem !important;
    line-height: 2.05 !important;
  }

  .concept-title,
  .concept-content h2,
  .concept-content h3 {
    margin-bottom: 20px !important;
    font-size: 1.55rem !important;
  }

  .concept-content p.concept-eyebrow {
    margin-bottom: 22px !important;
    padding-left: 20px !important;
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }

  .concept-content p.concept-eyebrow::before {
    width: 6px;
  }

  .concept-content p.concept-eyebrow::after {
    left: 20px;
    width: 64px;
    bottom: -8px;
  }

  .concept-content .fc-block-btn-wrap {
    margin-top: 26px;
  }

  .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
    top: -20px !important;
    padding: 9px 14px !important;
    font-size: 1.3rem;
  }

  .concept-img-wrapper::after {
    right: -12px;
    bottom: -12px;
  }

  .concept-img-wrapper img,
  .concept-img-wrapper video {
    min-height: 300px !important;
    border-radius: 34px 34px 100px 34px;
    border-width: 7px;
  }

  .concept-container.concept-reverse .concept-img-wrapper::before {
    left: 14px !important;
    right: auto !important;
  }

  .concept-container.concept-reverse .concept-img-wrapper::after {
    right: -12px;
    left: auto;
  }

  .concept-container.concept-reverse .concept-img-wrapper img,
  .concept-container.concept-reverse .concept-img-wrapper video {
    border-radius: 34px 34px 100px 34px;
  }
}


/* =========================================================
   Page: footer / FOOTER ページ
========================================================= */

/* Block: global_footer / sec_1782112173284 */
/* =========================================================
   ビストロ2 / global_footer
   旧 restaurant.fluxcore.store の .footer を現行マークアップで再現。
   面＝ワイン暗色グラデーション（--bg-wine-dark → --bg-ink）
   文字＝明色（#fff7ea / #f6cf7a）で必ず対に指定する。
   ※ サイドヘッダー分のオフセットは global_css の
     body [id^="sec_"] が担当。ここでは書かない。
========================================================= */

.global-footer {
  position: relative;
  overflow: hidden;
  padding: 128px 24px 68px;
  background:
    radial-gradient(circle at 20% 0%, rgba(246, 207, 122, 0.14), transparent 26%),
    linear-gradient(135deg, #3f121a 0%, #2c1519 52%, #201713 100%);
  color: #fff7ea;
  border-top: 1px solid rgba(255, 247, 234, 0.16);
}

/* 旧デザインの巨大ウォーターマーク */
.global-footer::before {
  content: "CRAFT";
  position: absolute;
  right: 4vw;
  bottom: -2rem;
  z-index: 0;
  font-family: var(--font-serif);
  font-size: clamp(6rem, 16vw, 16rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: rgba(255, 247, 234, 0.045);
  pointer-events: none;
  user-select: none;
}

/* ── フッターナビ（旧デザインには無いため既定どおり非表示）──
   店舗側が表示に切り替えた場合でも暗面で読めるよう配色だけ用意する */
.footer-nav-wrap {
  display: none;
}

.footer-nav {
  position: relative;
  z-index: 5;
  max-width: 1120px;
  margin: 0 auto 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
}

.footer-nav-link {
  color: rgba(255, 247, 234, 0.82);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}

.footer-nav-link:hover {
  color: #f6cf7a;
  border-bottom-color: rgba(246, 207, 122, 0.7);
}

.footer-nav-brand {
  position: relative;
  z-index: 5;
  text-align: center;
  margin: 0 auto 44px;
}

.footer-nav-brand h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #f6cf7a;
}

/* ── 情報グリッド ── */
.info-grid {
  position: relative;
  z-index: 5;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.shop-info {
  min-width: 0;
  color: #fff7ea;
}

.footer-brand h2 {
  display: inline-block;
  margin: 0 0 10px;
  padding-bottom: 10px;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.25;
  color: #fff7ea;
  border-bottom: 4px solid #f6cf7a;
}

.footer-genre {
  margin: 0 0 18px;
  color: rgba(255, 247, 234, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── 店舗情報テーブル ── */
.footer-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.footer-table th,
.footer-table td {
  padding: 15px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 247, 234, 0.16);
  line-height: 1.85;
}

.footer-table th {
  width: 112px;
  color: #f6cf7a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.footer-table td {
  color: rgba(255, 247, 234, 0.78);
  font-size: 13.5px;
}

.footer-table td b {
  display: inline-block;
  min-width: 4.5em;
  color: #fff7ea;
  font-weight: 700;
}

.footer-tel {
  display: inline-block;
  color: #f6cf7a;
}

.footer-tel strong {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f6cf7a;
}

.footer-tel:hover strong {
  color: #fff7ea;
}

/* ── 決済方法 ── */
.footer-payments-box {
  margin-top: 28px;
  padding: 20px 22px 22px;
  background: rgba(255, 247, 234, 0.05);
  border: 1px solid rgba(255, 247, 234, 0.14);
  border-radius: 18px;
}

.payment-title {
  margin: 0 0 12px;
  color: #f6cf7a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.payment-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  color: rgba(255, 247, 234, 0.85);
}

.payment-icons i {
  font-size: 26px;
  line-height: 1;
  color: rgba(255, 247, 234, 0.85);
}

.pay-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 247, 234, 0.32);
  border-radius: 999px;
  background: rgba(255, 247, 234, 0.06);
  color: #fff7ea;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pay-tag i {
  font-size: 13px;
  color: #fff7ea;
}

/* ── 地図 ── */
.gmap-wrap {
  position: relative;
  overflow: hidden;
  height: 400px;
  min-height: 0;
  border-radius: 36px;
  border: 1px solid rgba(255, 247, 234, 0.18);
  background: #f8f1df;
  box-shadow: var(--shadow-strong);
}

.gmap-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  filter: grayscale(0.2) contrast(1.05) brightness(0.92);
}

.gmap-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: #f8f1df;
  color: #6b1f2b;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* ── コピーライト（</footer> の外側の独立div）── */
.footer-copy-text,
.footer-copy {
  background: #201713;
  color: rgba(255, 247, 234, 0.72);
  border-top: 1px solid rgba(255, 247, 234, 0.12);
  text-align: center;
  padding: 20px 24px;
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* ── 追従アクション（マスターは暗面＋var(--text-main)＝暗文字で潰れるため対で上書き）── */
.fc-floating-action {
  background: #fffaf0;
  color: #6b1f2b;
  border: 1px solid rgba(107, 31, 43, 0.55);
  box-shadow: 0 14px 34px rgba(32, 23, 19, 0.28);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.fc-floating-action i {
  color: #6b1f2b;
}

.fc-floating-action:hover {
  background: var(--fc-btn-bg, #6b1f2b);
  color: var(--fc-btn-fg, #fff7ea);
  border-color: var(--fc-btn-border, #6b1f2b);
}

.fc-floating-action:hover i {
  color: var(--fc-btn-fg, #fff7ea);
}

/* 予約ボタンは店舗のボタン配色設定に追従させる（!important は付けない） */
.fc-floating-reserve {
  background: var(--fc-btn-bg, #6b1f2b);
  color: var(--fc-btn-fg, #fff7ea);
  border-color: var(--fc-btn-border, #6b1f2b);
}

.fc-floating-reserve i {
  color: var(--fc-btn-fg, #fff7ea);
 
}

.fc-floating-reserve:hover {
  background: var(--fc-btn-bg-hover, #3f121a);
  border-color: var(--fc-btn-bg-hover, #3f121a);
  color: var(--fc-btn-fg-hover, #fff7ea);
}

.fc-floating-reserve:hover i {
  color: var(--fc-btn-fg-hover, #fff7ea);
}

.fc-floating-line {
  border-color: rgba(6, 199, 85, 0.75);
}

.fc-floating-instagram {
  border-color: rgba(107, 31, 43, 0.55);
}

/* ─────────────────────────────
   タブレット（--side-header-width は global_css で 0 になる）
───────────────────────────── */
@media (max-width: 1024px) {
  .global-footer {
    padding: 104px 24px 60px;
  }

  .global-footer::before {
    font-size: clamp(5rem, 18vw, 11rem);
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .footer-nav {
    margin-bottom: 32px;
  }

  .gmap-wrap {
    height: 340px;
  }
}

/* ─────────────────────────────
   スマホ
───────────────────────────── */
@media (max-width: 768px) {
  .global-footer {
    padding: 92px 20px 56px;
  }

  .global-footer::before {
    right: 2vw;
    bottom: -1rem;
    font-size: clamp(4rem, 24vw, 8rem);
  }

  .info-grid {
    gap: 36px;
  }

  .footer-brand h2 {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
    border-bottom-width: 3px;
  }

  .footer-table th {
    width: 92px;
    font-size: 12px;
  }

  .footer-table td {
    font-size: 13px;
  }

  .footer-tel strong {
    font-size: 23px;
  }

  .footer-payments-box {
    padding: 18px 18px 20px;
    border-radius: 14px;
  }

  .payment-icons i {
    font-size: 22px;
  }

  .gmap-wrap {
    height: 280px;
    border-radius: 28px;
  }

  .footer-copy-text,
  .footer-copy {
    padding: 18px 16px;
    font-size: 10.5px;
  }

  /* マスターの下部固定バー（既定は #081011）をワイン暗面に合わせる */
  .fc-floating-actions {
    background: rgba(63, 18, 26, 0.96);
    border-top: 1px solid rgba(255, 247, 234, 0.16);
  }

  .fc-floating-action {
    background: #fffaf0;
    color: #6b1f2b;
    border-radius: 8px;
    box-shadow: none;
  }
    
  .fa-calendar-check:before
    {
    color: #6b1f2a !important;
	}
}

/* ─────────────────────────────
   小さいスマホ（テーブルを縦積みに）
───────────────────────────── */
@media (max-width: 480px) {
  .footer-table,
  .footer-table tbody,
  .footer-table tr,
  .footer-table th,
  .footer-table td {
    display: block;
    width: 100%;
  }

  .footer-table th {
    padding: 14px 0 2px;
    border-bottom: none;
  }

  .footer-table td {
    padding: 0 0 14px;
  }

  .footer-table td b {
    display: block;
    min-width: 0;
  }
}