/* =========================================================
   FluxCore Pro Generated Custom CSS
   Auto generated from fc_pages.layout_json advanced.custom_css
   Last updated: 2026-08-24 23:31:24
========================================================= */

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

/* Block: global_header / sec_1782112078518 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Archivo+Black&display=swap");

:root {
  /* 紙（生成り・シームレス 1024×1024） */
  --wk-paper-tex: url("/image/assets/asset_20260725195133_6a64953574e49.webp");
  --wk-paper-veil: rgba(251, 247, 239, .45);
  --wk-paper-size: 420px;

  /* 木目（明るいオーク）。アップロード時に 2000×1000 → 1200×600 へ
     縮小されており、横方向の継ぎ目がわずかにずれています。
     そのため repeat ではなく cover（繰り返さない）で使ってください。 */
  --wk-oak-tex: url("/image/assets/asset_20260725195133_6a6495353d103.webp");
}

body {
  padding-top: 84px !important;
  /* style.css の既定は #101718（濃紺）。セクションの隙間や
     コンテンツが短いページで濃紺が覗くので、生成りに変更する。 */
  background-color: #FBF7EF !important;
  background-image:
    linear-gradient(var(--wk-paper-veil), var(--wk-paper-veil)),
    var(--wk-paper-tex) !important;
  background-size: auto, var(--wk-paper-size) !important;
  background-repeat: repeat !important;
  background-attachment: fixed, scroll !important;
}

/* ---------- 1. ヘッダー本体 ---------- */
.global-header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 10000 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 28px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 84px !important;
  padding: 0 clamp(20px, 3.4vw, 54px) !important;
  background: rgba(251, 247, 239, .93) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(36, 31, 25, .10) !important;
  box-shadow: 0 6px 20px rgba(80, 60, 30, .06) !important;
  color: #241F19 !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
}

/* ヘッダー下のブランドライン（MV下端・フッター上端と同じ線で統一） */
.global-header::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 3px !important;
  background: linear-gradient(90deg, #2E7D4F 0 20%, #E0952A 20% 100%) !important;
  pointer-events: none !important;
}

/* ---------- 2. H1（右上の小さい見出し） ---------- */
.global-header .header-page-eyebrow {
  position: absolute !important;
  top: 6px !important;
  right: 22px !important;
  max-width: 420px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(36, 31, 25, .42) !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ---------- 3. ロゴ ---------- */
.global-header .header-logo {
  display: flex !important;
  align-items: center !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.global-header .header-logo img {
  width: auto !important;
  max-width: 74px !important;
  max-height: 52px !important;
  object-fit: contain !important;
}

/* ---------- 4. グローバルナビ ---------- */
.global-header .desktop-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 2.6vw, 40px) !important;
  min-width: 0 !important;
}

.global-header .desktop-nav a {
  position: relative !important;
  padding: 10px 0 !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color .2s ease !important;
}

.global-header .desktop-nav a::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #E0952A !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .25s ease !important;
}

.global-header .desktop-nav a:hover,
.global-header .desktop-nav a.active {
  color: #1F5C39 !important;
}

.global-header .desktop-nav a:hover::after,
.global-header .desktop-nav a.active::after {
  transform: scaleX(1) !important;
}

/* 電話は画面右のタブ（43番CSS）に集約するため、ヘッダー内では重複表示しない */
.global-header .header-btns,
.global-header .btn-header-tel,
.global-header .btn-header-reserve {
  display: none !important;
}

/* ---------- 5. ハンバーガー ---------- */
.global-header .menu-trigger {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: #2E7D4F !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(46, 125, 79, .28) !important;
  font-size: 19px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .2s ease !important;
}

.global-header .menu-trigger:hover {
  background: #1F5C39 !important;
  transform: translateY(-1px) !important;
}

/* ---------- 6. モバイルメニュー ---------- */
.mobile-nav-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 11000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 88px 28px 40px !important;
  /* 紙テクスチャは上の :root で定義した変数を使う */
  background-color: #FBF7EF !important;
  background-image:
    linear-gradient(var(--wk-paper-veil), var(--wk-paper-veil)),
    var(--wk-paper-tex) !important;
  background-size: auto, var(--wk-paper-size) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(100%) !important;
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease !important;
}

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

.mobile-nav-overlay a {
  position: relative !important;
  padding: 15px 8px !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: .08em !important;
  text-decoration: none !important;
}

.mobile-nav-overlay a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: #E0952A !important;
  border-radius: 2px !important;
  transform: translateX(-50%) !important;
  transition: width .25s ease !important;
}

.mobile-nav-overlay a:hover,
.mobile-nav-overlay a:active {
  color: #1F5C39 !important;
}

.mobile-nav-overlay a:hover::after {
  width: 34px !important;
}

.mobile-nav-overlay .menu-trigger {
  background: #241F19 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1100px) {
  .global-header {
    gap: 18px !important;
    padding: 0 24px !important;
  }

  .global-header .desktop-nav {
    gap: 18px !important;
  }

  .global-header .desktop-nav a {
    font-size: 12.5px !important;
  }
}

/* style.css 側が 992px で .global-header{display:flex} を当ててくるため、
   こちらも 992px に合わせて grid を維持する（991px にすると1px幅で崩れる）。 */
@media (max-width: 992px) {
  body {
    padding-top: 66px !important;
  }

  .global-header {
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 66px !important;
    padding: 0 16px !important;
  }

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

  /* H1 は display:none にせず、読み上げ・検索エンジンには残す。
     （display:none だと H1 が無いページと同等に扱われるおそれがあるため） */
  .global-header .header-page-eyebrow {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    width: 1px !important;
    height: 1px !important;
    max-width: none !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .global-header .header-logo img {
    max-width: 56px !important;
    max-height: 48px !important;
  }

  .global-header .menu-trigger {
    display: inline-flex !important;
  }

  .mobile-nav-overlay .menu-trigger {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: inline-flex !important;
  }
}


/* =========================================================
   Page: index / 立会川駅徒歩1分で楽しむ日替わりクラフトビール
========================================================= */

/* Block: hero_main / sec_1782110119323 */
/* ---------- 1. 枠 ---------- */
.hero-wrapper,
.hero-wrapper.hero-has-slider {
  position: relative !important;
  width: 100% !important;
  height: min(80svh, 720px) !important;
  min-height: 560px !important;
  overflow: hidden !important;
  background: #1a1512 !important;
  color: #ffffff !important;
}

.hero-slider,
.hero-slide,
.hero-slide-img,
.hero-img-window {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ---------- 2. 写真 ---------- */
/* brightness を持ち上げないこと。琥珀色が飛んで安っぽく見える原因でした。 */
.hero-img-window img,
.hero-img-window video,
.hero-slide-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background-size: cover !important;
  background-position: center 55% !important;
  filter: saturate(1.05) contrast(1.03) !important;
}

/* ---------- 3. スクリム（文字を載せるためのグラデーション） ---------- */
/* ベタ塗りカードの代わり。写真の情報量を殺さずに白文字を読ませる。
   ・1枚目＝左からの横グラデ：文字を置く左側だけを沈める
     （スライド写真の明るさが3枚バラバラでも、文字のコントラストが破綻しない）
   ・2枚目＝下からの縦グラデ：全体の締め
   写真そのものは暗くしすぎないよう、中央〜右上は透明のまま残しています。

   【重要／重なり順について】
   スクリムは .hero-wrapper::after ではなく .hero-slide::before に置きます。
   blocks.css で .hero-slide{z-index:1} が独立した重ね合わせ文脈をつくるため、
   .hero-wrapper::after（z-index:2）に置くと
   キャプション（.hero-slide-caption / z-index:3）より手前に描画され、
   キャッチと説明文まで一緒に暗くなってしまいます。
   （実測：説明文の輝度が 225 → 75 まで落ちて読めなくなりました）
   .hero-slide::before ならスライド内部の重なりになり、
   写真の上・文字の下に正しく入ります。 */

/* 既存のオーバーレイ（style.css / blocks.css 由来）は無効化する */
.hero-wrapper::after,
.hero-wrapper.hero-has-slider::after {
  display: none !important;
}

.hero-slide::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  background:
    linear-gradient(
      100deg,
      rgba(18, 13, 9, .60) 0%,
      rgba(18, 13, 9, .34) 32%,
      rgba(18, 13, 9, .06) 56%,
      rgba(18, 13, 9, 0)   72%
    ),
    linear-gradient(
      180deg,
      rgba(18, 13, 9, .30) 0%,
      rgba(18, 13, 9, .06) 24%,
      rgba(18, 13, 9, 0)   42%,
      rgba(18, 13, 9, .34) 66%,
      rgba(18, 13, 9, .80) 100%
    ) !important;
  pointer-events: none !important;
}

/* ---------- 4. MV下のライン（3色ストライプ → アンバー1本） ---------- */
.hero-wrapper::before,
.hero-wrapper.hero-has-slider::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 6 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #2E7D4F 0 20%, #E0952A 20% 100%) !important;
  pointer-events: none !important;
}

/* ---------- 5. キャプション位置 ---------- */
/* blocks.css の .hero-cap-mid-center が top:50% / transform を効かせてくるので、
   top:auto / transform:none を明示して打ち消す。 */
.hero-slide-caption,
.hero-cap-mid-center .hero-slide-caption,
.hero-cap-mid-left .hero-slide-caption,
.hero-cap-bottom-center .hero-slide-caption {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: clamp(48px, 8vh, 96px) !important;
  left: clamp(20px, 7vw, 110px) !important;
  z-index: 4 !important;
  width: min(740px, calc(100% - 40px)) !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  color: #ffffff !important;
  text-align: left !important;
  text-shadow: none !important;
  transform: none !important;
}

/* ---------- 6. ラベルチップ ---------- */
.hero-slide-caption::before {
  content: "立会川駅 徒歩1分 ／ CRAFT BEER STAND" !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0 18px !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .5) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .1em !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

/* ---------- 7. キャッチコピー ---------- */
/* ブロックが color / font-size をインラインstyleで出力するため !important 必須 */
/* max-width は「1行あたり最大12.5文字」の意味（em＝日本語1文字ぶん）。
   これを外すと「新しい一杯との出会いが、こ／こにある。」のように
   単語の途中で折り返して読みにくくなります。 */
.hero-slide-catch {
  display: block !important;
  max-width: 12.5em !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: clamp(29px, 4.1vw, 52px) !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3) !important;
}

/* ---------- 8. 説明文 ---------- */
.hero-slide-sub {
  display: block !important;
  max-width: 620px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #ffffff !important;
  opacity: 1 !important;          /* blocks.css の opacity:.95 を打ち消す */
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.85 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55) !important;
}

/* ---------- 9. スライダーのドット ---------- */
.hero-slider-dots {
  position: absolute !important;
  right: 26px !important;
  bottom: 26px !important;
  left: auto !important;
  z-index: 7 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}

.hero-slider-dot,
.hero-slider-dots button {
  width: 9px !important;
  height: 9px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, .5) !important;
  border: 0 !important;
  border-radius: 999px !important;
  transition: width .25s ease, background .25s ease !important;
}

.hero-slider-dot.is-active,
.hero-slider-dots button.is-active {
  width: 28px !important;
  background: #E0952A !important;
  border-radius: 999px !important;
}

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width: 768px) {
  .hero-wrapper,
  .hero-wrapper.hero-has-slider {
    height: min(76svh, 640px) !important;
    min-height: 470px !important;
    max-height: 680px !important;
  }

  .hero-img-window img,
  .hero-img-window video,
  .hero-slide-img {
    background-position: center 52% !important;
    filter: saturate(1.04) contrast(1.02) !important;
  }

  /* SPは文字が画面幅いっぱいに広がるので、横グラデをやめて縦グラデを強める */
  .hero-slide::before {
    background: linear-gradient(
        180deg,
        rgba(18, 13, 9, .26) 0%,
        rgba(18, 13, 9, .04) 20%,
        rgba(18, 13, 9, 0)   34%,
        rgba(18, 13, 9, .44) 60%,
        rgba(18, 13, 9, .86) 100%
      ) !important;
  }

  .hero-slide-caption,
  .hero-cap-mid-center .hero-slide-caption,
  .hero-cap-mid-left .hero-slide-caption,
  .hero-cap-bottom-center .hero-slide-caption {
    right: 18px !important;
    bottom: clamp(40px, 7vh, 64px) !important;
    left: 18px !important;
    width: auto !important;
  }

  .hero-slide-caption::before {
    margin-bottom: 13px !important;
    padding: 6px 12px !important;
    font-size: 10.5px !important;
    letter-spacing: .08em !important;
  }

  .hero-slide-catch {
    font-size: clamp(25px, 6.6vw, 34px) !important;
    line-height: 1.5 !important;
  }

  .hero-slide-sub {
    margin-top: 12px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
  }

  .hero-slider-dots {
    right: 16px !important;
    bottom: 18px !important;
  }
}

/* 横幅の狭い端末でチップが折れないように */
@media (max-width: 380px) {
  .hero-slide-caption::before {
    font-size: 9.5px !important;
    padding: 5px 10px !important;
  }
}

/* Block: custom_html / sec_1784715899319 */
/* ---------- 0. ブロックの器を全幅にする ---------- */
.custom-html-wrapper:has(.wk-band),
.custom-html-wrapper:has(.wk-band) > .custom-html-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

/* ---------- 1. 共通の器 ---------- */
.wk-band {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

.wk-band *,
.wk-band *::before,
.wk-band *::after {
  box-sizing: border-box;
}

.wk-band__inner {
  position: relative;
  z-index: 3;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  text-align: center;
}

.wk-band__eyebrow {
  margin: 0;
  font-family: "Archivo Black", "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .24em;
}

.wk-band__message {
  margin: 12px 0 0;
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 27px);
  line-height: 1.6;
  letter-spacing: .02em;
}

/* 日本語はどこでも折り返せてしまうため、SPで「出会えるだ／ろう。」のように
   単語の途中で切れます。HTML側で文節を <span> に分け、
   inline-block にすることで文節の境目でだけ改行させます。 */
.wk-band__message span {
  display: inline-block;
}

/* 補足チップ（MENUの「20+ CRAFT BEERS」など。無い帯もあります） */
.wk-band__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.wk-band__facts li {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: clamp(11.5px, 1.2vw, 13px);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---------- 2. 切り抜きビール ---------- */
/* 帯の右下から生やす。文字より奥（z-index 1）に置くので、
   狭い画面で重なっても文字が読めなくなりません。 */
.wk-band__beer {
  position: absolute;
  right: clamp(8px, 5vw, 96px);
  bottom: -14px;
  z-index: 1;
  width: auto;
  height: auto;
  max-height: none;
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   3. 強：グリーン面
   ========================================================= */
.wk-band--strong {
  padding: clamp(58px, 7vw, 86px) 0 clamp(56px, 7vw, 82px);
  background: #2E7D4F;
  color: #ffffff;
}

/* 上端の泡（スカラップ）。帯の内側に描くので、
   上のセクションが写真でも生成りでも成立します。 */
.wk-band--strong::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 28px;
  /* 円を3列重ねる。周期を 44 / 37 / 29px（互いに素に近い値）にしてあるので、
     繰り返しの切れ目が目に見えず、泡らしい不揃いな輪郭になります。
     1列や2列だとレースの縁飾りのような機械的な見た目になります。 */
  background:
    radial-gradient(circle 15px at 22px 2px, #FBF7EF 99%, transparent 100%) 0 0 / 44px 28px repeat-x,
    radial-gradient(circle 12px at 18px 6px, #FBF7EF 99%, transparent 100%) 0 0 / 37px 28px repeat-x,
    radial-gradient(circle 10px at 13px 9px, #FBF7EF 99%, transparent 100%) 0 0 / 29px 28px repeat-x;
  pointer-events: none;
}

/* 下端のブランドライン（ヘッダー下・MV下端・フッター上端と同じ線） */
.wk-band--strong::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, #1F5C39 0 20%, #E0952A 20% 100%);
  pointer-events: none;
}

.wk-band--strong .wk-band__eyebrow { color: #FBE3B4; }
.wk-band--strong .wk-band__message { color: #ffffff; }

.wk-band--strong .wk-band__facts li {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .46);
  color: #ffffff;
}

.wk-band--strong .wk-band__beer {
  height: clamp(190px, 25vw, 300px);
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .22));
}

/* 泡の粒（装飾） */
.wk-band__bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .15;
  pointer-events: none;
}

.wk-band__bubbles i {
  position: absolute;
  border: 2px solid #ffffff;
  border-radius: 999px;
}

/* =========================================================
   3-B. 強（木目版）：wk-band--strong に wk-band--wood を足すと木目になります
        <section class="wk-band wk-band--strong wk-band--wood">

   グリーン一色だと全ページで同じリズムになるため、
   ページごとに使い分けられるようにしています。
   （割り当て例：TOP と MENU はグリーン、ACCESS は木目）

   ★覆いの濃さについて★
   木目に白文字を直接置くとコントラストが 1.94:1 しかなく読めません
   （実測）。下の .62〜.70 は「木目が見えて、かつ白文字が 4.5:1 を
   十分に超える」範囲です。これ以上薄くしないでください。
   ========================================================= */
.wk-band--wood {
  background-color: #3A2A16;
  /* 木目はアップロード時に 1200px へ縮小され横の継ぎ目がずれているため、
     repeat せず cover で1枚のまま使う。 */
  background-image:
    linear-gradient(180deg, rgba(38, 26, 12, .62), rgba(38, 26, 12, .70)),
    var(--wk-oak-tex, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wk-band--wood .wk-band__eyebrow { color: #FBE3B4; }
.wk-band--wood .wk-band__message { color: #ffffff; }

.wk-band--wood .wk-band__facts li {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #ffffff;
}

/* 下端のラインは木目でも同じ */
.wk-band--wood::after {
  background: linear-gradient(90deg, #2E7D4F 0 20%, #E0952A 20% 100%);
}

/* =========================================================
   4. 弱：明るい木目の面
   ========================================================= */
/* 明るい木目。TOP2本目・TOP3本目・GALLERY・STAFF の4本がこれになります。

   ★文字色について★
   木目の明るさは実測で平均 rgb(214,181,134)／最暗部 rgb(177,146,102)。
   最暗部でのコントラストは
     #241F19（本文）… 5.58:1 → そのまま置けます
     #8A5A0E（琥珀の英字ラベル）… 2.02:1 → 不足するので使えません
   そのため英字ラベルだけ #3A2A16（4.71:1）にしています。

   木目は 1200px へ縮小された都合で横の継ぎ目がわずかにずれているため、
   repeat せず cover で1枚のまま使います。 */
.wk-band--soft {
  padding: clamp(42px, 5vw, 62px) 0 clamp(40px, 5vw, 58px);
  background-color: #E4CBA4;
  background-image: var(--wk-oak-tex, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 1px solid rgba(36, 31, 25, .14);
  border-bottom: 1px solid rgba(36, 31, 25, .14);
  color: #241F19;
}

/* 木目の上なので、琥珀（#8A5A0E＝2.02:1）では読めません。#3A2A16 で 4.71:1。 */
.wk-band--soft .wk-band__eyebrow { color: #3A2A16; }
.wk-band--soft .wk-band__message { color: #241F19; }

.wk-band--soft .wk-band__facts li {
  background: #ffffff;
  border: 1px solid rgba(36, 31, 25, .12);
  box-shadow: 0 2px 8px rgba(60, 40, 15, .12);
  color: #241F19;
}

.wk-band--soft .wk-band__beer {
  height: clamp(130px, 16vw, 200px);
  opacity: .96;
  filter: drop-shadow(0 10px 20px rgba(80, 60, 30, .14));
}

/* 弱い帯は3点ドットで締める（見出しの装飾と揃える） */
.wk-band--soft .wk-band__inner::after {
  content: "";
  display: flex;
  justify-content: center;
  width: 44px;
  height: 5px;
  margin: 16px auto 0;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px, #E0952A 99%, transparent 100%) 0 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #2E7D4F 99%, transparent 100%) 17px 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #7FC8CE 99%, transparent 100%) 34px 0 / 17px 5px no-repeat;
}

/* =========================================================
   5. レスポンシブ
   ========================================================= */
@media (max-width: 900px) {
  .wk-band__inner {
    padding-right: clamp(20px, 14vw, 120px);
  }
}

@media (max-width: 768px) {
  .wk-band--strong {
    padding: 48px 0 46px;
  }

  .wk-band--strong::before {
    height: 21px;
    background:
      radial-gradient(circle 11px at 16px 1px, #FBF7EF 99%, transparent 100%) 0 0 / 33px 21px repeat-x,
      radial-gradient(circle 9px  at 13px 5px, #FBF7EF 99%, transparent 100%) 0 0 / 28px 21px repeat-x,
      radial-gradient(circle 7px  at 10px 7px, #FBF7EF 99%, transparent 100%) 0 0 / 22px 21px repeat-x;
  }

  .wk-band--soft {
    padding: 34px 0 32px;
  }

  .wk-band__inner {
    /* SPはビールを小さくして右端に寄せるので、その分だけ本文を左に寄せる */
    padding-right: 96px;
    padding-left: 18px;
    text-align: left;
  }

  .wk-band__facts {
    justify-content: flex-start;
  }

  .wk-band--soft .wk-band__inner::after {
    margin-left: 0;
  }

  .wk-band__beer {
    right: -6px;
    bottom: -10px;
  }

  .wk-band--strong .wk-band__beer { height: 150px; }
  .wk-band--soft   .wk-band__beer { height: 108px; }

  .wk-band__message {
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.62;
  }
}

@media (max-width: 380px) {
  .wk-band__inner { padding-right: 84px; }
  .wk-band--strong .wk-band__beer { height: 128px; }
  .wk-band--soft   .wk-band__beer { height: 96px; }
}

/* Block: free_text_box / sec_1782110261328 */
/* =========================================================
   1. リード文（free_text_box）
   ========================================================= */
.free-text-section {
  position: relative !important;
  padding: clamp(56px, 7vw, 90px) clamp(20px, 5vw, 60px) !important;
  overflow: hidden !important;
  background-color: #FBF7EF !important;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none) !important;
  background-size: auto, var(--wk-paper-size, 420px) !important;
  background-repeat: repeat !important;
  color: #241F19 !important;
  text-align: center !important;
}

/* エディタの背景写真を打ち消す（ID＋クラスで 1,1,0） */
#sec_1782110261328.free-text-section {
  background-color: #FBF7EF !important;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none) !important;
  background-size: auto, var(--wk-paper-size, 420px) !important;
  background-position: center !important;
  background-repeat: repeat !important;
}

.free-text-section::before,
.free-text-section::after {
  content: none !important;
  display: none !important;
}

.free-text-container {
  position: relative !important;
  z-index: 1 !important;
  /* blocks.css が .free-text-container{max-width:880px !important} を持っており、
     width だけ指定しても max-width の方が勝ってしまう。none にして
     この width を唯一の基準にする。 */
  max-width: none !important;
  width: min(880px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.free-text-title {
  /* blocks.css の .free-text-container{text-align:left} を継承して
     英字（::before の WELCOME TO WAKU-WAKU）とタイトルが左に寄り、
     中央にある3色ドット（::after）とちぐはぐになっていた。
     見出しまわりだけ中央に戻す。本文 .free-text-desc は左揃えのまま。 */
  text-align: center !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: clamp(23px, 3vw, 33px) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.free-text-title::before {
  content: "WELCOME TO WAKU-WAKU" !important;
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #8A5A0E !important;
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif !important;
  font-size: clamp(10px, 1.1vw, 12px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .22em !important;
  white-space: nowrap !important;
}

.free-text-title::after {
  content: "" !important;
  display: block !important;
  width: 44px !important;
  height: 5px !important;
  margin: 18px auto 22px !important;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px, #E0952A 99%, transparent 100%) 0 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #2E7D4F 99%, transparent 100%) 17px 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #7FC8CE 99%, transparent 100%) 34px 0 / 17px 5px no-repeat !important;
}

.free-text-desc {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #6B6055 !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: clamp(13.5px, 1.35vw, 15px) !important;
  font-weight: 400 !important;
  line-height: 2.05 !important;
  letter-spacing: 0 !important;
  /* PCでは他セクションの本文（.menu-sub-text / .seats-sub-text）と同じく
     中央寄せ・中央揃えにする。ここだけ左揃えだと、英字・見出し・3色ドットが
     中央なのに本文だけ左に張り付いて浮いて見えるため。
     スマホでは読みやすさを優先して左揃えに戻す
     （43_global_footer.css の「8-a」で指定）。 */
  max-width: none !important;   /* 器（.free-text-container）の幅をそのまま使う */
  margin: 0 auto !important;
  text-align: center !important;
  /* 行の長さが均等になるよう改行位置を自動調整し、
     1〜2文字だけ次の行に落ちる「泣き別れ」を防ぐ */
  text-wrap: balance;
}

/* text-wrap:balance に対応しているブラウザでだけ器を広げる。
   この本文は1文が長く、880pxだと「…立ち寄れるカジュアルな空間をご用意していま／す。」
   のように末尾が数文字だけ次行に落ちていた。1000pxで全文が収まる。
   非対応ブラウザでは既定の880pxのまま（下の .free-text-container の指定）。 */
@supports (text-wrap: balance) {
  .free-text-container {
    width: min(1000px, 100%) !important;
  }
}

/* =========================================================
   2. コンセプト（concept_split）
   ========================================================= */
.concept-section {
  position: relative !important;
  padding: clamp(56px, 7vw, 90px) clamp(20px, 5vw, 60px) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(36, 31, 25, .10) !important;
  border-bottom: 1px solid rgba(36, 31, 25, .10) !important;
  color: #241F19 !important;
}

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

.concept-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(26px, 4vw, 60px) !important;
  align-items: center !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 交互配置（CLAUDE.md の既知の落とし穴：使うなら必ず定義しておく） */
.concept-reverse .concept-content { order: 2 !important; }
.concept-reverse .concept-img-wrapper { order: 1 !important; }

.concept-content {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* blocks.css が
     .concept-title, .concept-content h2, .concept-content h3 { font-family: var(--font-serif) !important }
     .concept-title, .concept-content h2, …, .concept-text, .concept-content p { text-align: center !important }
   を当てています。`.concept-content h2` は詳細度 (0,2,0) なので、
   こちらも (0,2,0) 以上にしないと明朝・中央寄せのままになります。 */
.concept-content .concept-title,
.concept-content h2 {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: clamp(23px, 3vw, 33px) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  letter-spacing: .02em !important;
  text-align: left !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.concept-content .concept-title::before,
.concept-content h2::before {
  content: "OUR CONCEPT" !important;
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #8A5A0E !important;
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif !important;
  font-size: clamp(10px, 1.1vw, 12px) !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.concept-content .concept-title::after,
.concept-content h2::after {
  content: "" !important;
  display: block !important;
  width: 44px !important;
  height: 5px !important;
  margin: 18px 0 0 !important;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px, #E0952A 99%, transparent 100%) 0 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #2E7D4F 99%, transparent 100%) 17px 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #7FC8CE 99%, transparent 100%) 34px 0 / 17px 5px no-repeat !important;
}

.concept-content .concept-text,
.concept-content p {
  margin: 20px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #6B6055 !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: clamp(13.5px, 1.35vw, 15px) !important;
  font-weight: 400 !important;
  line-height: 2.05 !important;
  text-align: left !important;
}

.concept-img-wrapper {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #efe9dd !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(80, 60, 30, .13) !important;
  aspect-ratio: 4 / 3 !important;
}

/* 旧デザインの飾り（角の色ブロックなど）を撤去 */
.concept-img-wrapper::before,
.concept-img-wrapper::after {
  content: none !important;
  display: none !important;
}

.concept-img-wrapper img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .6s ease !important;
}

.concept-section:hover .concept-img-wrapper img { transform: scale(1.04) !important; }

/* ボタン（ブロック共通のボタン部品） */
.fc-block-btn-wrap {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

.concept-content .fc-block-btn,
.fc-block-btn.fc-block-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 200px !important;
  height: 54px !important;
  padding: 0 30px !important;
  background: #E0952A !important;
  color: #2A1F08 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(224, 149, 42, .32) !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  transition: transform .2s ease, background .2s ease !important;
}

.concept-content .fc-block-btn:hover,
.fc-block-btn.fc-block-btn-primary:hover {
  background: #EFA338 !important;
  color: #2A1F08 !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   3. Instagram
   ========================================================= */
.fc-instagram-embed-section {
  position: relative !important;
  padding: clamp(56px, 7vw, 90px) clamp(20px, 5vw, 60px) !important;
  overflow: hidden !important;
  background-color: #FBF7EF !important;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none) !important;
  background-size: auto, var(--wk-paper-size, 420px) !important;
  background-repeat: repeat !important;
  color: #241F19 !important;
}

.fc-instagram-embed-section::before,
.fc-instagram-embed-section::after {
  content: none !important;
  display: none !important;
}

.fc-instagram-embed-inner {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.fc-instagram-embed-heading {
  margin: 0 auto 36px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

.fc-instagram-embed-label {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #8A5A0E !important;
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif !important;
  font-size: clamp(10px, 1.1vw, 12px) !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  text-shadow: none !important;
}

.fc-instagram-embed-heading h2 {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
  font-size: clamp(23px, 3vw, 33px) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* blocks.css が max-width:680px を当てており、margin が 0 のままだと
   1160px の器の左端に寄って「中央からずれて見える」状態になります。
   （実測：文字の中心が 400px、器の中心は 640px）
   auto で左右中央に置きます。 */
.fc-instagram-embed-heading p {
  max-width: 720px !important;
  margin: 14px auto 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: #6B6055 !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: clamp(13px, 1.3vw, 14.5px) !important;
  font-weight: 400 !important;
  line-height: 2 !important;
}

.fc-instagram-embed-card {
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(36, 31, 25, .07) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(80, 60, 30, .06) !important;
}

.fc-instagram-embed-action {
  display: flex !important;
  justify-content: center !important;
  margin: 30px 0 0 !important;
}

.fc-instagram-embed-action a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  height: 54px !important;
  padding: 0 30px !important;
  background: #E0952A !important;
  color: #2A1F08 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(224, 149, 42, .32) !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform .2s ease, background .2s ease !important;
}

.fc-instagram-embed-action a:hover {
  background: #EFA338 !important;
  color: #2A1F08 !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   4. レスポンシブ
   ========================================================= */
@media (max-width: 900px) {
  .concept-container { grid-template-columns: 1fr !important; }
  /* 1カラムでは写真を必ず上に */
  .concept-reverse .concept-content,
  .concept-reverse .concept-img-wrapper { order: 0 !important; }
  .concept-content { order: 2 !important; }
  .concept-img-wrapper { order: 1 !important; }
}

@media (max-width: 768px) {
  .free-text-section,
  .concept-section,
  .fc-instagram-embed-section {
    padding: 44px 18px !important;
  }

  .free-text-title::after { margin-bottom: 18px !important; }

  .fc-instagram-embed-heading { margin-bottom: 24px !important; }

  .concept-img-wrapper { border-radius: 14px !important; }
  .fc-instagram-embed-card { border-radius: 14px !important; }

  .fc-block-btn-wrap { justify-content: center !important; }

  .concept-content .fc-block-btn,
  .fc-block-btn.fc-block-btn-primary,
  .fc-instagram-embed-action a {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
  }
}

/* Block: pickup_menu_slider / sec_1782110448078 */
/* =========================================================
   1. セクション見出し（おすすめメニュー・メニュー一覧・スタッフ 共通）
   ========================================================= */
.menu-section .section-header,
.menu-grid-section .section-header,
.seats-section .section-header,
.menu-section-header {
  width: min(1180px, 100%) !important;
  margin: 0 auto 44px !important;
  padding: 0 clamp(20px, 5vw, 60px) !important;
  text-align: center !important;
}

.menu-main-title,
.seats-main-title {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: clamp(23px, 3vw, 33px) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.menu-main-title::before,
.seats-main-title::before {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #8A5A0E !important;
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif !important;
  font-size: clamp(10px, 1.1vw, 12px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .22em !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

.menu-main-title::after,
.seats-main-title::after { content: none !important; display: none !important; }

.menu-sub-text,
.seats-sub-text {
  max-width: 760px !important;
  margin: 14px auto 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #6B6055 !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: clamp(13px, 1.3vw, 14.5px) !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

/* 3点ドット */
.menu-section .section-header::after,
.menu-grid-section .section-header::after,
.seats-section .section-header::after,
.menu-section-header::after {
  content: "" !important;
  display: block !important;
  width: 44px !important;
  height: 5px !important;
  margin: 18px auto 0 !important;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px, #E0952A 99%, transparent 100%) 0 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #2E7D4F 99%, transparent 100%) 17px 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #7FC8CE 99%, transparent 100%) 34px 0 / 17px 5px no-repeat !important;
}

/* ブロックごとの英字ラベル（装飾） */
#sec_1782110448078 .menu-main-title::before  { content: "PICK UP" !important; }
#sec_1782110839766 .menu-main-title::before  { content: "PICK UP" !important; }
#sec_1782110885267 .menu-main-title::before  { content: "BEER STAND MENU" !important; }
#sec_1782110521036 .seats-main-title::before { content: "MEET OUR STAFF" !important; }
#sec_1784611718836 .seats-main-title::before { content: "MEET OUR STAFF" !important; }

/* ★セクション見出しの器の幅★
   blocks.css が .seats-section .section-header{max-width:760px} を指定しており、
   ここで width:min(1180px,100%) を書いても max-width の方が勝つため、
   実際には 760px −左右padding120px ＝【本文が640pxしか使えない】状態だった。
   その結果、STAFFのリード文が「…お声がけくださ／い。」のように
   中途半端な位置で折り返していた。max-width を解除して本文側で幅を決める。 */
.menu-section .section-header,
.menu-grid-section .section-header,
.seats-section .section-header {
  max-width: none !important;
}

/* リード文の折り返し
   text-wrap:balance は、行の長さが均等になるよう改行位置を自動調整する。
   1文字だけ次の行に落ちる「泣き別れ」を防げる。
   非対応ブラウザでは無視されるため、その場合に破綻しない760pxを既定値にし、
   対応ブラウザでだけ1000pxまで広げる（@supports）。 */
@supports (text-wrap: balance) {
  .menu-sub-text,
  .seats-sub-text {
    max-width: 1000px !important;
  }
}

/* =========================================================
   2. セクションの器
   ========================================================= */
/* ★menu_category_grid のセクションは .menu-section ではなく
     .menu-grid-section という別クラスです（blocks.css で padding:60px 15px 指定）。
     ここに入れ忘れると、このセクションだけ紙テクスチャが当たりません。 */
.menu-section,
.menu-grid-section,
.seats-section {
  position: relative !important;
  padding: clamp(56px, 7vw, 88px) 0 clamp(58px, 7vw, 90px) !important;
  overflow: hidden !important;
  background-color: #FBF7EF !important;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none) !important;
  background-size: auto, var(--wk-paper-size, 420px) !important;
  color: #241F19 !important;
}

/* 木目帯・3色ラインなど旧装飾を撤去 */
.menu-section::before,
.menu-section::after,
.menu-grid-section::before,
.menu-grid-section::after,
.seats-section::before,
.seats-section::after {
  content: none !important;
  display: none !important;
}

/* ★エディタの「セクション背景画像」を打ち消す★
   TOP と STAFF のスタッフセクションには、エディタで背景写真が設定されていて
   #sec_XXX{background-image: ... !important} が直接ページに書き出されます。
   クラス指定（0,1,0）ではID指定（1,0,0）に負けるため、
   ID＋クラス（1,1,0）で上書きします。

   ※本来はエディタ側で背景画像を外すのがきれいです。
     外していただければ、この2ブロックの指定は不要になります（残しても無害）。 */
#sec_1782110521036.seats-section,
#sec_1784611718836.seats-section {
  background-color: #FBF7EF !important;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none) !important;
  background-size: auto, var(--wk-paper-size, 420px) !important;
  background-position: center !important;
  /* エディタの注入CSSは background-repeat:no-repeat も !important で入れてくるため、
     ここで repeat に戻さないと紙テクスチャが中央に1枚だけ出て、
     タイルの境目が四角く浮き上がります。 */
  background-repeat: repeat !important;
}

/* =========================================================
   3. おすすめメニューのカード
   ========================================================= */
.scroll-container {
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 5vw, 60px) !important;
  overflow: visible !important;
  background: none !important;
}

.scroll-inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pickup-item-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(36, 31, 25, .06) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(80, 60, 30, .06) !important;
  color: #241F19 !important;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.pickup-item-card::before,
.pickup-item-card::after { content: none !important; display: none !important; }

.pickup-item-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 34px rgba(80, 60, 30, .14) !important;
}

.pickup-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 2 !important;
  padding: 6px 13px !important;
  background: #E0952A !important;
  color: #2A1F08 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(224, 149, 42, .34) !important;
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: .12em !important;
  text-shadow: none !important;
}

.pickup-img-box {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #efe9dd !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: 4 / 3 !important;
}

.pickup-img-box img,
.pickup-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .5s ease !important;
}

.pickup-item-card:hover .pickup-img { transform: scale(1.05) !important; }

.pickup-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 20px 20px 22px !important;
  background: none !important;
  border: 0 !important;
}

.pickup-title {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  letter-spacing: .01em !important;
  text-shadow: none !important;
}

.pickup-desc {
  /* blocks.css は
       height: 3.2em / -webkit-line-clamp: 2 / display: -webkit-box
     で「高さ2行に固定＋2行を超えたら…で省略」にしている。
     ①行間を1.95に変えているため2行に50.7px必要なのに41.6pxしかなく下が9px切れ、
     ②2行に収まらない説明文が「…」で省略されていた。
     どちらも解除して、入力した説明文を全文表示する。
     カードは grid なので、文章量が違っても行内の高さは自動でそろう。 */
  height: auto !important;
  min-height: 3.9em !important;   /* 1.95（行間） × 2行。短い説明文でも高さをそろえる */
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
  text-overflow: clip !important;
  /* 説明文が未入力のメニューでは、空の2行分が空白として残らないようにする */
  margin: 9px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: #6B6055 !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
}

.pickup-desc:empty {
  min-height: 0 !important;
  margin: 0 !important;
}

.pickup-price {
  /* 説明文の行数がカードごとに違っても価格の位置がそろうよう、
     .pickup-info（flex column）の下端に押し下げる */
  margin: 16px 0 0 !important;
  margin-top: auto !important;
  padding-top: 16px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #8A5A0E !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

.pickup-price .tax-label {
  margin-left: 4px !important;
  color: #6B6055 !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}

/* =========================================================
   4. メニュー一覧（カテゴリーごと）
   ========================================================= */
.menu-cat-container {
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 5vw, 60px) !important;
}

.menu-cat-block { margin: 0 0 clamp(38px, 5vw, 60px) !important; }
.menu-cat-block:last-child { margin-bottom: 0 !important; }

.menu-cat-header {
  margin: 0 0 22px !important;
  padding: 0 0 12px !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(36, 31, 25, .10) !important;
  box-shadow: none !important;
  text-align: left !important;
}

.menu-cat-name {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1F5C39 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
  font-size: clamp(18px, 2.2vw, 23px) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.menu-cat-name::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 22px !important;
  background: linear-gradient(180deg, #2E7D4F, #E0952A) !important;
  border-radius: 3px !important;
}

/* auto-fit ではなく auto-fill を使う。
   auto-fit は空のトラックを畳むため、メニュー項目が1件のときに
   カードが横いっぱいまで伸び、4:3の画像が高さ765pxの巨大な帯になります。
   auto-fill なら空トラックが幅を保持するので、件数が少なくてもカード幅が一定です。 */
.menu-items-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ★1件だけのときは「画像が左・本文が右」の横長カードにする★
   :has(...:only-child) で「グリッドの子が1つだけ」のときに限定しているので、
   メニューを2件目以降追加すると自動で通常のカード並びに戻ります。
   （PCで左端にカードが1枚ぽつんと残る状態を避けるため） */
.menu-items-grid:has(.menu-item-card:only-child) {
  grid-template-columns: 1fr !important;
}

.menu-items-grid:has(.menu-item-card:only-child) .menu-item-card {
  display: grid !important;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
  align-items: stretch !important;
}

.menu-items-grid:has(.menu-item-card:only-child) .mi-img-box {
  height: 100% !important;
  min-height: 260px !important;
  aspect-ratio: auto !important;
}

.menu-items-grid:has(.menu-item-card:only-child) .mi-img-box img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.menu-items-grid:has(.menu-item-card:only-child) .mi-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 30px 32px !important;
}

.menu-items-grid:has(.menu-item-card:only-child) .mi-title {
  font-size: clamp(18px, 2vw, 22px) !important;
}

.menu-item-card {
  display: flex !important;
  flex-direction: column !important;
  /* blocks.css は画像を左・本文を右に並べる横組み前提で gap を持たせている。
     縦組みにするので gap は 0 にしないと画像と本文の間に白い帯が出る。 */
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(36, 31, 25, .06) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(80, 60, 30, .06) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.menu-item-card::before,
.menu-item-card::after { content: none !important; display: none !important; }

.menu-item-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px rgba(80, 60, 30, .13) !important;
}

/* ★blocks.css の指定を打ち消す★
     .mi-img-box { width: 120px; flex-shrink: 0; }                （PC・横並び前提）
     @media(max-width:768px){ .mi-img-box { width:100px; height:100px; } }
   height が効くと aspect-ratio より優先されるため、
   幅だけ 100% にしても「横354px × 高さ100px」の細長い帯になります。
   height: auto を必ず入れてください。 */
.mi-img-box {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  background: #efe9dd !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: 4 / 3 !important;
}

.mi-img-box img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mi-info {
  flex: 1 1 auto !important;
  padding: 20px 20px 22px !important;
  background: none !important;
  border: 0 !important;
}

.mi-title {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  text-shadow: none !important;
}

.mi-text {
  margin: 9px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: #6B6055 !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
}

/* ★価格★
   実際の文字は <div class="mi-price"><span class="price-in">¥600</span></div> と
   入れ子になっていて、blocks.css が
     .price-in { font-family:'Montserrat'; font-size:18px; color:#f6cf7a; }
   を当てています。親の .mi-price だけ指定しても span 側の色・書体が勝つため、
   .price-in を直接指定する必要があります。
   （旧テーマのゴールド #f6cf7a のまま表示されていたのはこのためです） */
.mi-meta {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  margin: 16px 0 0 !important;
  padding: 14px 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(36, 31, 25, .10) !important;
}

.mi-price {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  text-align: right !important;
}

.price-in,
.mi-price .price-in {
  color: #8A5A0E !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

/* 画像なしのメニュー項目（リスト表示）でも同じ見え方にそろえる */
.menu-item-card.no-image {
  padding: 16px 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(36, 31, 25, .06) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(80, 60, 30, .06) !important;
}

.menu-item-card.no-image .mi-meta {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.menu-item-card.no-image .price-in {
  font-size: 17px !important;
}

/* =========================================================
   5. スタッフカード
   ========================================================= */
.seats-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 22px !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 5vw, 60px) !important;
}

.seat-card {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(36, 31, 25, .06) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(80, 60, 30, .06) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.seat-card::before,
.seat-card::after { content: none !important; display: none !important; }

/* 旧デザインの左右交互レイアウトは使わない。
   blocks.css が .seat-card.seat-reverse .seat-img-box{order:2} /
   .seat-info{order:1} を当てているので、order も戻さないと
   2枚目だけ「名前が上・写真が下」になります。 */
.seat-card.seat-reverse { flex-direction: column !important; }
.seat-card.seat-reverse .seat-img-box,
.seat-card.seat-reverse .seat-info { order: 0 !important; }

.seat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 34px rgba(80, 60, 30, .14) !important;
}

.seat-img-box {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #F3EDE0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: 1 / 1 !important;
}

.seat-img-box img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ★仮置きのロゴ画像だけは、切れないように全体表示にする。
   お写真に差し替えれば自動的に上の cover に戻ります。 */
.seat-img-box img[src*="asset_20260721144924"],
.seat-img-box img[src*="asset_20260725165103"] {
  padding: 22% !important;
  object-fit: contain !important;
  opacity: .5 !important;
}

.seat-info {
  flex: 1 1 auto !important;
  padding: 20px 20px 24px !important;
  background: none !important;
  border: 0 !important;
  text-align: center !important;
}

.seat-title {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  text-shadow: none !important;
}

.seat-desc,
.seat-info p {
  margin: 9px 0 0 !important;
  color: #6B6055 !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
}

/* =========================================================
   6. 「さらに見る」ボタン
   ========================================================= */
/* ページ内で自分自身に戻ってしまうボタンを非表示にする。
   どちらも「TOPページ側は他ページへの導線なので残す」のがポイント。
   ID指定（1,1,0）なので、下の .seat-btn-wrap / .menu-btn-wrap（0,1,0）や
   43番のスマホ用指定より確実に強く効きます。

   ・STAFFページの「さらに見る」   → リンク先が /seats.php（＝自分自身）
   ・MENUページの「すべてのメニューを見る」→ リンク先が /menu.php（＝自分自身） */
#sec_1784611718836 .seat-btn-wrap,
#sec_1782110839766 .menu-btn-wrap {
  display: none !important;
}

.seat-btn-wrap,
.menu-btn-wrap {
  display: flex !important;
  justify-content: center !important;
  margin: clamp(32px, 4vw, 46px) 0 0 !important;
  padding: 0 !important;
}

.btn-menu-more,
.btn-seat-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  height: 54px !important;
  padding: 0 30px !important;
  background: #E0952A !important;
  color: #2A1F08 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(224, 149, 42, .32) !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  transition: transform .2s ease, background .2s ease !important;
}

.btn-menu-more:hover,
.btn-seat-more:hover {
  background: #EFA338 !important;
  color: #2A1F08 !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   7. レスポンシブ
   ========================================================= */
@media (max-width: 768px) {
  .menu-section,
  .menu-grid-section,
  .seats-section { padding: 44px 0 46px !important; }

  .menu-section .section-header,
  .menu-grid-section .section-header,
  .seats-section .section-header,
  .menu-section-header {
    margin-bottom: 28px !important;
    padding: 0 18px !important;
  }

  .scroll-container,
  .menu-cat-container,
  .seats-container { padding: 0 18px !important; }

  .scroll-inner,
  .menu-items-grid,
  .seats-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pickup-item-card,
  .menu-item-card,
  .seat-card { border-radius: 14px !important; }

  .pickup-info,
  .mi-info,
  .seat-info { padding: 17px 16px 19px !important; }

  /* blocks.css の @media(max-width:768px){ .mi-img-box{width:100px;height:100px} } を打ち消す。
     これを入れないと画像が「横いっぱい × 高さ100px」の細帯になります。 */
  .mi-img-box {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* 1件だけのときの横長カードは、スマホでは縦積みに戻す */
  .menu-items-grid:has(.menu-item-card:only-child) .menu-item-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  .menu-items-grid:has(.menu-item-card:only-child) .mi-img-box {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }

  .menu-items-grid:has(.menu-item-card:only-child) .mi-info {
    justify-content: flex-start !important;
    padding: 17px 16px 19px !important;
  }

  .menu-item-card { padding: 0 !important; gap: 0 !important; }
  .menu-item-card.no-image { padding: 14px 15px !important; }

  .mi-meta { margin-top: 14px !important; padding-top: 12px !important; }
  .price-in, .mi-price .price-in { font-size: 18px !important; }

  .btn-menu-more,
  .btn-seat-more {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
  }
}

/* Block: image_grid / sec_1784702365826 */
/* =========================================================
   1. セクション見出しの共通パターン
      英字ラベル（装飾・CSS） → 日本語見出し（実データ） → 説明文（実データ）
   ========================================================= */
.image-grid-header,
.gmap-header {
  margin: 0 auto 44px !important;
  text-align: center !important;
}

.image-grid-title,
.gmap-title,
.link-button-title {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: clamp(23px, 3vw, 33px) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* 英字ラベル（装飾） */
.image-grid-title::before,
.gmap-title::before {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #8A5A0E !important;
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif !important;
  font-size: clamp(10px, 1.1vw, 12px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .22em !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

/* 見出しの飾り（3点ドット）。
   タイトルの ::after に付けると「見出し → ドット → 説明文」の順になって
   説明文が切り離されて見えるため、ヘッダー全体の ::after に付けて最後に置く。 */
.image-grid-title::after,
.gmap-title::after {
  content: none !important;
  display: none !important;
}

.image-grid-header::after,
.gmap-header::after {
  content: "" !important;
  display: block !important;
  width: 44px !important;
  height: 5px !important;
  margin: 18px auto 0 !important;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px, #E0952A 99%, transparent 100%) 0 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #2E7D4F 99%, transparent 100%) 17px 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #7FC8CE 99%, transparent 100%) 34px 0 / 17px 5px no-repeat !important;
}

.image-grid-desc,
.gmap-desc {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #6B6055 !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: clamp(13px, 1.3vw, 14.5px) !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  letter-spacing: 0 !important;
}

/* ページごとの英字ラベル */
#sec_1784702365826 .image-grid-title::before { content: "GALLERY" !important; }
#sec_1784611398550 .image-grid-title::before { content: "WAKU-WAKU GALLERY" !important; }
#sec_1784648421433 .image-grid-title::before { content: "WAKU-WAKU GALLERY" !important; }
#sec_1784718208828 .gmap-title::before       { content: "ACCESS MAP" !important; }
#sec_1784642106203 .gmap-title::before       { content: "ACCESS MAP" !important; }

/* =========================================================
   2. 画像グリッド
      旧：写真1枚ずつに緑・水色・黄のずらし影＋上部に木目帯＋下部に3色ライン
      新：角丸＋等間隔＋やわらかい影＋ホバーの拡大だけ
   ========================================================= */
.image-grid-section {
  position: relative !important;
  padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 60px) clamp(56px, 7vw, 84px) !important;
  overflow: hidden !important;
  background-color: #FBF7EF !important;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none) !important;
  background-size: auto, var(--wk-paper-size, 420px) !important;
  color: #241F19 !important;
}

/* 木目帯と3色ラインを撤去 */
.image-grid-section::before,
.image-grid-section::after,
.image-grid-container::before,
.image-grid-container::after {
  content: none !important;
  display: none !important;
}

.image-grid-container {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.image-grid {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.image-grid-pc-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.image-grid-pc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.image-grid-pc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

.image-grid-item {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #efe9dd !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(80, 60, 30, .07) !important;
  transition: box-shadow .3s ease, transform .3s ease !important;
}

/* 旧デザインの色ベタずらし影を作っていた擬似要素を撤去 */
.image-grid-item::before,
.image-grid-item::after {
  content: none !important;
  display: none !important;
}

.image-grid-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px rgba(80, 60, 30, .16) !important;
}

.image-grid-shape-square .image-grid-item { aspect-ratio: 1 / 1 !important; }

.image-grid-item img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .5s ease !important;
}

.image-grid-item:hover img { transform: scale(1.06) !important; }

/* =========================================================
   3. Googleマップ
   ========================================================= */
.gmap-section {
  position: relative !important;
  padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 60px) clamp(58px, 7vw, 90px) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(36, 31, 25, .10) !important;
  color: #241F19 !important;
}

.gmap-section::before,
.gmap-section::after {
  content: none !important;
  display: none !important;
}

/* TOPのGoogleマップにはエディタで背景写真が設定されていて、
   #sec_XXX{background-image: ... !important} がページに直接書き出されます。
   クラス指定では負けるので、ID＋クラス（1,1,0）で打ち消します。
   ※エディタ側で背景画像を外していただければ、この指定は不要です。 */
#sec_1784718208828.gmap-section {
  background-color: #ffffff !important;
  background-image: none !important;
}

.gmap-container {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.gmap-frame-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 320px !important;
  overflow: hidden !important;
  background: #efe9dd !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(80, 60, 30, .13) !important;
}

.gmap-frame-wrap::before,
.gmap-frame-wrap::after {
  content: none !important;
  display: none !important;
}

.gmap-frame-wrap iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  filter: none !important;
}

/* =========================================================
   4. リンクボタン（店舗案内のCTA）
      旧：黄色いベタ塗り＋黒枠＋緑のベタボタン
      新：エディタで設定済みの写真背景を活かし、覆いだけ暖色に変える
   ========================================================= */
.link-button-section {
  position: relative !important;
  /* エディタが挿入する背景CSSが var(--fc-bg-overlay) を参照しているので、
     ここで覆いの色だけ差し替える（青緑寄りの黒 → 暖色寄りの黒）。 */
  --fc-bg-overlay: rgba(36, 31, 25, .70);
  padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 60px) !important;
  overflow: hidden !important;
  border: 0 !important;
  color: #ffffff !important;
  text-align: center !important;
}

.link-button-section::before,
.link-button-section::after {
  content: none !important;
  display: none !important;
}

.link-button-container {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.link-button-section .link-button-title {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .45) !important;
}

.link-button-section .link-button-title::before {
  content: "ACCESS" !important;
  display: block !important;
  margin: 0 0 10px !important;
  color: #FBE3B4 !important;
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif !important;
  font-size: clamp(10px, 1.1vw, 12px) !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  text-shadow: none !important;
}

.link-button-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

.link-button-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: auto !important;
  min-width: 190px !important;
  height: 54px !important;
  padding: 0 30px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  transition: transform .2s ease, background .2s ease !important;
}

/* 1つ目（TEL）＝アンバー、2つ目（詳しくはこちら）＝白枠 */
.link-button-buttons .link-button-btn:nth-child(1) {
  background: #E0952A !important;
  color: #2A1F08 !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(224, 149, 42, .34) !important;
}

.link-button-buttons .link-button-btn:nth-child(2) {
  background: rgba(255, 255, 255, .1) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, .62) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.link-button-btn:hover { transform: translateY(-2px) !important; }
.link-button-buttons .link-button-btn:nth-child(1):hover { background: #EFA338 !important; }
.link-button-buttons .link-button-btn:nth-child(2):hover { background: rgba(255, 255, 255, .18) !important; }

/* =========================================================
   5. レスポンシブ
   ========================================================= */
@media (max-width: 900px) {
  .image-grid-pc-4,
  .image-grid-pc-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 768px) {
  .image-grid-section,
  .gmap-section,
  .link-button-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .image-grid-header,
  .gmap-header { margin-bottom: 28px !important; }

  .image-grid { gap: 10px !important; }
  .image-grid-sp-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .image-grid-sp-1 { grid-template-columns: 1fr !important; }
  .image-grid-item { border-radius: 11px !important; }

  .gmap-frame-wrap {
    aspect-ratio: 4 / 3 !important;
    min-height: 260px !important;
    border-radius: 14px !important;
  }

  .link-button-buttons { gap: 11px !important; margin-top: 22px !important; }
  .link-button-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    font-size: 14.5px !important;
  }
}

/* Block: store_info / sec_1784702503939 */
.store-info-section {
  position: relative !important;
  padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 60px) !important;
  overflow: hidden !important;
  background-color: #E4CBA4 !important;
  background-image: var(--wk-oak-tex, none) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #241F19 !important;
}

/* 旧デザインの装飾（3色ライン・木目帯など）を撤去 */
.store-info-section::before,
.store-info-section::after,
.store-info-container::before,
.store-info-container::after {
  content: none !important;
  display: none !important;
}

.store-info-container {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- 2. 見出し ---------- */
.store-info-header {
  margin: 0 auto 40px !important;
  text-align: center !important;
}

.store-info-title {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #241F19 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: clamp(23px, 3vw, 33px) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.store-info-title::before {
  content: "SHOP INFORMATION" !important;
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  /* 木目の上なので琥珀（#8A5A0E＝2.02:1）では読めません。#3A2A16 で 4.71:1。 */
  color: #3A2A16 !important;
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif !important;
  font-size: clamp(10px, 1.1vw, 12px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .22em !important;
  white-space: nowrap !important;
}

.store-info-title::after { content: none !important; display: none !important; }

.store-info-desc {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  /* 木目の上なので、紙の上より濃い文字色にする */
  color: #3A2A16 !important;
  font-size: clamp(13px, 1.3vw, 14.5px) !important;
  font-weight: 400 !important;
  line-height: 2 !important;
}

.store-info-header::after {
  content: "" !important;
  display: block !important;
  width: 44px !important;
  height: 5px !important;
  margin: 18px auto 0 !important;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px, #E0952A 99%, transparent 100%) 0 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #2E7D4F 99%, transparent 100%) 17px 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #7FC8CE 99%, transparent 100%) 34px 0 / 17px 5px no-repeat !important;
}

/* ---------- 3. レイアウト ---------- */
.store-info-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(24px, 3.4vw, 44px) !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

.store-info-layout.has-image {
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr) !important;
}

.store-info-table-wrap {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(36, 31, 25, .07) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(80, 60, 30, .06) !important;
}

/* ---------- 4. 表 ---------- */
.store-info-table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  box-shadow: none !important;
  background: none !important;
}

/* 旧CSSが行番号で行を隠していたのを解除（このファイル単体でも二重に効かないよう明示） */
.store-info-table tbody > tr { display: table-row !important; }

.store-info-table th,
.store-info-table td {
  padding: 16px 20px !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(36, 31, 25, .09) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  vertical-align: top !important;
}

.store-info-table th {
  width: 28% !important;
  min-width: 7em !important;
  background: #F7F3EA !important;
  color: #1F5C39 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.store-info-table td {
  color: #241F19 !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-weight: 400 !important;
}

/* 営業時間などの複数行セル。nl2br の <br> がそのまま効きます */
.store-info-table td br { line-height: inherit !important; }

.store-info-table tbody > tr:last-child th,
.store-info-table tbody > tr:last-child td {
  border-bottom: 0 !important;
}

/* ---------- 5. 右側の画像 ---------- */
/* 枠にアスペクト比を持たせて中の画像を height:100% で敷き詰める書き方は、
   親の高さが確定扱いにならず画像が伸びきらないことがあります
   （実測：枠 352×469 に対して画像が 352×420 になる）。
   写真の比率のまま出す方式にすれば、トリミングも高さ計算も不要です。 */
.store-info-image {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #efe9dd !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(80, 60, 30, .13) !important;
  aspect-ratio: auto !important;
  line-height: 0 !important;   /* img 下のすき間を消す */
}

.store-info-image::before,
.store-info-image::after { content: none !important; display: none !important; }

.store-info-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- 6. レスポンシブ ---------- */
@media (max-width: 900px) {
  .store-info-layout.has-image { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 768px) {
  .store-info-section {
    padding: 44px 18px !important;
  }

  .store-info-header { margin-bottom: 26px !important; }

  .store-info-table-wrap { border-radius: 14px !important; }

  .store-info-table th,
  .store-info-table td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
  }

  .store-info-table th {
    width: 32% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .store-info-image { border-radius: 14px !important; }
}


/* =========================================================
   Page: menu / メニュー・料金｜クラフトビール1杯600円〜
========================================================= */

/* Block: hero_page / sec_1782110792533 */
/* ---------- 1. 枠（4ページ共通） ---------- */
#sec_1782110792533.page-hero-wrapper,
#sec_1782111350931.page-hero-wrapper,
#sec_1782111079546.page-hero-wrapper,
#sec_1784641873021.page-hero-wrapper {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: clamp(340px, 46vh, 470px) !important;
  margin: 0 !important;
  padding: 92px clamp(20px, 7vw, 110px) clamp(46px, 6.5vh, 76px) !important;
  overflow: hidden !important;
  background-color: #241F19 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #ffffff !important;
  text-align: left !important;
}

/* 旧テンプレの残骸：背景をアニメで動かす ::before は使わない */
#sec_1782110792533.page-hero-wrapper::before,
#sec_1782111350931.page-hero-wrapper::before,
#sec_1782111079546.page-hero-wrapper::before,
#sec_1784641873021.page-hero-wrapper::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* ---------- 2. スクリム（文字を読ませるグラデーション） ----------
   TOPのMVと同じ考え方。実体のある .ph-overlay に置くので、
   .ph-container（z-index:3）より必ず下に入る。 */
#sec_1782110792533 .ph-overlay,
#sec_1782111350931 .ph-overlay,
#sec_1782111079546 .ph-overlay,
#sec_1784641873021 .ph-overlay {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  opacity: 1 !important;
  background:
    linear-gradient(
      100deg,
      rgba(18, 13, 9, .62) 0%,
      rgba(18, 13, 9, .36) 32%,
      rgba(18, 13, 9, .08) 56%,
      rgba(18, 13, 9, 0)   74%
    ),
    linear-gradient(
      180deg,
      rgba(18, 13, 9, .34) 0%,
      rgba(18, 13, 9, .08) 26%,
      rgba(18, 13, 9, 0)   44%,
      rgba(18, 13, 9, .32) 66%,
      rgba(18, 13, 9, .78) 100%
    ) !important;
  pointer-events: none !important;
}

/* ---------- 3. 下端のブランドライン ---------- */
#sec_1782110792533.page-hero-wrapper::after,
#sec_1782111350931.page-hero-wrapper::after,
#sec_1782111079546.page-hero-wrapper::after,
#sec_1784641873021.page-hero-wrapper::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  z-index: 4 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #2E7D4F 0 20%, #E0952A 20% 100%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* ---------- 4. テキストのまとまり ---------- */
#sec_1782110792533 .ph-container,
#sec_1782111350931 .ph-container,
#sec_1782111079546 .ph-container,
#sec_1784641873021 .ph-container {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  text-align: left !important;
}

/* ---------- 5. 英字ラベル（ピル型チップ） ---------- */
#sec_1782110792533 .ph-title::before,
#sec_1782111350931 .ph-title::before,
#sec_1782111079546 .ph-title::before,
#sec_1784641873021 .ph-title::before {
  position: static !important;
  /* inline-flex にするとタイトル本文と同じ行に並んでしまう
     （「MENU メニュー」のように横並びになる）。
     flex は block レベルなので改行され、width:max-content で内容幅に縮む。 */
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .5) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .14em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  white-space: nowrap !important;
}

/* ---------- 6. タイトル ---------- */
#sec_1782110792533 .ph-title,
#sec_1782111350931 .ph-title,
#sec_1782111079546 .ph-title,
#sec_1784641873021 .ph-title {
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  /* 1行あたり最大12.5文字。日本語が単語の途中で折り返すのを防ぐ */
  max-width: 12.5em !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: clamp(28px, 3.8vw, 46px) !important;
  font-weight: 900 !important;
  line-height: 1.42 !important;
  letter-spacing: .02em !important;
  text-align: left !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3) !important;
  -webkit-text-stroke: 0 !important;
}

/* 旧テンプレのタイトル下の飾り線は使わない */
#sec_1782110792533 .ph-title::after,
#sec_1782111350931 .ph-title::after,
#sec_1782111079546 .ph-title::after,
#sec_1784641873021 .ph-title::after {
  content: none !important;
  display: none !important;
}

/* ---------- 7. 説明文 ---------- */
#sec_1782110792533 .ph-desc,
#sec_1782111350931 .ph-desc,
#sec_1782111079546 .ph-desc,
#sec_1784641873021 .ph-desc {
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 620px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #ffffff !important;
  opacity: 1 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.85 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55) !important;
  -webkit-text-stroke: 0 !important;
}

/* =========================================================
   ページごとの見せ方
   （英字ラベルの文言と、写真のトリミング位置）
   ========================================================= */

/* --- MENU --- */
#sec_1782110792533 .ph-title::before { content: "MENU" !important; }
#sec_1782110792533.page-hero-wrapper { background-position: center 48% !important; }

/* --- GALLERY --- */
#sec_1782111350931 .ph-title::before { content: "GALLERY" !important; }
#sec_1782111350931.page-hero-wrapper { background-position: center 46% !important; }

/* --- STAFF --- */
#sec_1782111079546 .ph-title::before { content: "STAFF" !important; }
#sec_1782111079546.page-hero-wrapper { background-position: center 45% !important; }

/* --- ACCESS --- */
#sec_1784641873021 .ph-title::before { content: "ACCESS" !important; }
#sec_1784641873021.page-hero-wrapper { background-position: center 54% !important; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1024px) {
  #sec_1782110792533.page-hero-wrapper,
  #sec_1782111350931.page-hero-wrapper,
  #sec_1782111079546.page-hero-wrapper,
  #sec_1784641873021.page-hero-wrapper {
    min-height: clamp(320px, 44vh, 420px) !important;
    padding: 84px clamp(20px, 5vw, 60px) clamp(40px, 5.5vh, 60px) !important;
  }
}

@media (max-width: 768px) {
  #sec_1782110792533.page-hero-wrapper,
  #sec_1782111350931.page-hero-wrapper,
  #sec_1782111079546.page-hero-wrapper,
  #sec_1784641873021.page-hero-wrapper {
    min-height: 300px !important;
    padding: 72px 18px 40px !important;
    background-position: center !important;
  }

  /* SPは文字が画面幅いっぱいに広がるので、横グラデをやめて縦グラデを強める */
  #sec_1782110792533 .ph-overlay,
  #sec_1782111350931 .ph-overlay,
  #sec_1782111079546 .ph-overlay,
  #sec_1784641873021 .ph-overlay {
    background: linear-gradient(
      180deg,
      rgba(18, 13, 9, .30) 0%,
      rgba(18, 13, 9, .06) 22%,
      rgba(18, 13, 9, 0)   36%,
      rgba(18, 13, 9, .42) 62%,
      rgba(18, 13, 9, .84) 100%
    ) !important;
  }

  #sec_1782110792533 .ph-container,
  #sec_1782111350931 .ph-container,
  #sec_1782111079546 .ph-container,
  #sec_1784641873021 .ph-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  #sec_1782110792533 .ph-title::before,
  #sec_1782111350931 .ph-title::before,
  #sec_1782111079546 .ph-title::before,
  #sec_1784641873021 .ph-title::before {
    margin-bottom: 12px !important;
    padding: 6px 12px !important;
    font-size: 10.5px !important;
    letter-spacing: .12em !important;
  }

  #sec_1782110792533 .ph-title,
  #sec_1782111350931 .ph-title,
  #sec_1782111079546 .ph-title,
  #sec_1784641873021 .ph-title {
    font-size: clamp(24px, 6.2vw, 32px) !important;
    line-height: 1.48 !important;
  }

  #sec_1782110792533 .ph-desc,
  #sec_1782111350931 .ph-desc,
  #sec_1782111079546 .ph-desc,
  #sec_1784641873021 .ph-desc {
    max-width: 100% !important;
    margin-top: 11px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
  }
}

/* Block: custom_html / sec_1784611921287 */
/* ---------- 0. ブロックの器を全幅に ---------- */
.custom-html-wrapper:has(.wk-hw),
.custom-html-wrapper:has(.wk-hw) > .custom-html-inner,
.custom-html-wrapper:has(.wk-as),
.custom-html-wrapper:has(.wk-as) > .custom-html-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

/* ---------- 1. 共通トークン ---------- */
.wk-hw,
.wk-as {
  --wk-ink: #241F19;
  --wk-sub: #6B6055;
  --wk-green: #2E7D4F;
  --wk-amber: #E0952A;
  --wk-amber-text: #8A5A0E;
  --wk-line: rgba(36, 31, 25, .12);
  --wk-shadow: 0 2px 8px rgba(80, 60, 30, .06);
  --wk-shadow-lg: 0 14px 34px rgba(80, 60, 30, .13);

  position: relative;
  width: 100%;
  color: var(--wk-ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.9;
  letter-spacing: 0;
}

.wk-hw *, .wk-hw *::before, .wk-hw *::after,
.wk-as *, .wk-as *::before, .wk-as *::after { box-sizing: border-box; }

.wk-hw h2, .wk-hw h3,
.wk-as h2 {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
}

/* 英字ラベル */
.wk-hw .wk-label,
.wk-as .wk-label {
  display: block;
  margin: 0 0 10px;
  color: var(--wk-amber-text);
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .22em;
}

/* アイコン。SVGの stroke-width="1.8" をCSSで上書きする */
.wk-hw .wk-ico,
.wk-as .wk-ico { display: block; stroke-width: 3.2; }

/* =========================================================
   2. MENU「WAKU-WAKUの楽しみ方」
   ========================================================= */
.wk-hw {
  padding: clamp(56px, 7vw, 90px) clamp(20px, 5vw, 60px);
  overflow: hidden;
  background-color: #FBF7EF;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none);
  background-size: auto, var(--wk-paper-size, 420px);
}

.wk-hw__inner { width: min(1180px, 100%); margin: 0 auto; }

.wk-hw__head { margin: 0 auto 44px; text-align: center; }

.wk-hw__head h2 {
  margin: 0;
  font-size: clamp(23px, 3vw, 33px);
  line-height: 1.5;
}

.wk-hw__lead {
  margin: 14px 0 0;
  color: var(--wk-sub);
  font-size: clamp(13px, 1.3vw, 14.5px);
  line-height: 2;
}

.wk-hw__head::after {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  margin: 18px auto 0;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px, #E0952A 99%, transparent 100%) 0 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #2E7D4F 99%, transparent 100%) 17px 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #7FC8CE 99%, transparent 100%) 34px 0 / 17px 5px no-repeat;
}

.wk-hw__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.wk-hw__item {
  padding: 28px 24px 26px;
  background: #ffffff;
  border: 1px solid rgba(36, 31, 25, .06);
  border-radius: 18px;
  box-shadow: var(--wk-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.wk-hw__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--wk-shadow-lg);
}

.wk-hw__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.wk-hw__item:nth-child(1) .wk-hw__ico { background: #FBE3B4; color: #B9761A; }
.wk-hw__item:nth-child(2) .wk-hw__ico { background: #DDF0E4; color: #2E7D4F; }
.wk-hw__item:nth-child(3) .wk-hw__ico { background: #DDF0F2; color: #2F7E85; }
.wk-hw__item:nth-child(4) .wk-hw__ico { background: #FBE9D2; color: #B9761A; }

.wk-hw__num {
  margin: 18px 0 0;
  color: var(--wk-amber-text);
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
}

.wk-hw__item h3 {
  margin: 4px 0 0;
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.5;
}

.wk-hw__item p:not(.wk-hw__num) {
  margin: 10px 0 0;
  color: var(--wk-sub);
  font-size: 13px;
  line-height: 1.95;
}

/* =========================================================
   3. ACCESS 紹介文
   ========================================================= */
.wk-as {
  padding: clamp(56px, 7vw, 90px) clamp(20px, 5vw, 60px);
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid var(--wk-line);
}

.wk-as__inner {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
  width: min(1180px, 100%);
  margin: 0 auto;
}

/* 左のバッジ。旧デザインの巨大な黄色いカードをやめ、
   紙の面＋グリーンの数字に落ち着かせる。 */
.wk-as__badge {
  padding: 30px 26px 28px;
  background-color: #FBF7EF;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none);
  background-size: auto, var(--wk-paper-size, 420px);
  border: 1px solid rgba(36, 31, 25, .08);
  border-radius: 18px;
  box-shadow: var(--wk-shadow);
  text-align: center;
}

.wk-as__ico {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto;
  background: #DDF0E4;
  border-radius: 18px;
  color: var(--wk-green);
}

.wk-as__minute {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 0;
  color: var(--wk-green);
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif;
  line-height: 1;
}

.wk-as__minute strong { font-size: clamp(46px, 6vw, 62px); font-weight: 400; }
.wk-as__minute span   { font-size: clamp(14px, 1.6vw, 18px); letter-spacing: .08em; }

.wk-as__station {
  margin: 14px 0 0;
  color: var(--wk-ink);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
}

.wk-as__station span {
  display: block;
  margin: 0 0 6px;
  color: var(--wk-amber-text);
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
}

/* 右の本文 */
.wk-as__content h2 {
  margin: 0;
  font-size: clamp(23px, 3vw, 33px);
  line-height: 1.5;
}

.wk-as__content h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  margin: 18px 0 0;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px, #E0952A 99%, transparent 100%) 0 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #2E7D4F 99%, transparent 100%) 17px 0 / 17px 5px no-repeat,
    radial-gradient(circle 2.5px at 2.5px 2.5px, #7FC8CE 99%, transparent 100%) 34px 0 / 17px 5px no-repeat;
}

.wk-as__content > p {
  margin: 20px 0 0;
  color: var(--wk-sub);
  font-size: clamp(13.5px, 1.35vw, 15px);
  line-height: 2.05;
}

.wk-as__closing {
  margin: 22px 0 0 !important;
  padding: 14px 18px;
  background: #FBF7EF;
  border-left: 4px solid var(--wk-amber);
  border-radius: 0 12px 12px 0;
  color: var(--wk-ink) !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.8 !important;
}

.wk-as__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.wk-as__facts li {
  padding: 8px 15px;
  background: #ffffff;
  border: 1px solid rgba(36, 31, 25, .12);
  border-radius: 999px;
  color: var(--wk-ink);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   4. レスポンシブ
   ========================================================= */
@media (max-width: 1000px) {
  .wk-hw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .wk-as__inner { grid-template-columns: minmax(0, 1fr); }
  .wk-as__badge {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 20px 22px;
    text-align: left;
  }
  .wk-as__ico { margin: 0; }
  .wk-as__minute { margin: 0; justify-content: flex-start; }
  .wk-as__station { margin: 0; }
}

@media (max-width: 768px) {
  .wk-hw,
  .wk-as { padding: 44px 18px; }

  .wk-hw__head { margin-bottom: 26px; }
  .wk-hw__grid { grid-template-columns: 1fr; gap: 14px; }
  .wk-hw__item { padding: 22px 20px; border-radius: 14px; }

  .wk-as__badge { border-radius: 14px; }
  .wk-as__minute strong { font-size: 40px; }
  .wk-as__facts li { font-size: 11.5px; padding: 7px 12px; }
}

@media (max-width: 420px) {
  .wk-as__badge { grid-template-columns: auto 1fr; row-gap: 12px; }
  .wk-as__station { grid-column: 1 / -1; }
}


/* =========================================================
   Page: courses / こだわり・コンセプト（立会川駅徒歩1分）
========================================================= */

/* Block: custom_html / sec_1784612170856 */
/* ---------- 0. ブロックの器を全幅に ---------- */
.custom-html-wrapper:has(.wk-cp),
.custom-html-wrapper:has(.wk-cp) > .custom-html-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

/* ---------- 1. 土台 ---------- */
.wk-cp {
  --cp-ink: #241F19;
  --cp-sub: #6B6055;
  --cp-green: #2E7D4F;
  --cp-green-deep: #1F5C39;
  --cp-amber: #E0952A;
  --cp-amber-text: #8A5A0E;   /* 小さい文字用。紙の上で4.5:1を満たす濃さ */
  --cp-mint: #7FC8CE;
  --cp-line: rgba(36, 31, 25, .12);
  --cp-shadow: 0 2px 8px rgba(80, 60, 30, .06);
  --cp-shadow-lg: 0 14px 34px rgba(80, 60, 30, .13);
  --cp-radius: 18px;

  width: 100%;
  margin: 0;
  color: var(--cp-ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.9;
  letter-spacing: 0;
}

.wk-cp *,
.wk-cp *::before,
.wk-cp *::after { box-sizing: border-box; }

.wk-cp img { display: block; width: 100%; height: auto; }

.wk-cp__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}

/* 見出し・強調は丸ゴシック */
.wk-cp h2,
.wk-cp h3,
.wk-cp .wk-cp-hero__title,
.wk-cp strong { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif; }

/* 英字ラベル */
.wk-cp-label {
  display: block;
  margin: 0;
  font-family: "Archivo Black", "Zen Maru Gothic", sans-serif;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .22em;
  color: var(--cp-amber-text);
}

/* アイコン共通。SVG側の stroke-width="1.8" はCSSで上書きできます
   （プレゼンテーション属性はCSSより優先度が低いため）。 */
.wk-cp-ico {
  display: block;
  stroke-width: 3.2;
}

/* =========================================================
   2. ヒーロー（他4ページのヒーローと同じ言語に統一）
   ========================================================= */
.wk-cp-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: clamp(340px, 46vh, 470px);
  padding: 92px 0 clamp(46px, 6.5vh, 76px);
  overflow: hidden;
  background-color: #241F19;
  background-image: url("/image/assets/asset_20260721092144_6a5ebb98e6b88.webp");
  background-position: center 52%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
}

/* スクリム。左を沈めて白文字を読ませる */
.wk-cp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(18,13,9,.62) 0%, rgba(18,13,9,.36) 32%, rgba(18,13,9,.08) 56%, rgba(18,13,9,0) 74%),
    linear-gradient(180deg, rgba(18,13,9,.34) 0%, rgba(18,13,9,.08) 26%, rgba(18,13,9,0) 44%, rgba(18,13,9,.32) 66%, rgba(18,13,9,.78) 100%);
  pointer-events: none;
}

/* 下端のブランドライン */
.wk-cp-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 3px;
  background: linear-gradient(90deg, #2E7D4F 0 20%, #E0952A 20% 100%);
  pointer-events: none;
}

.wk-cp-hero .wk-cp__inner { position: relative; z-index: 2; }

.wk-cp-hero__chip {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #ffffff;
  white-space: nowrap;
}

.wk-cp-hero__title {
  /* 1行あたり最大15文字。文節ごとの <span>/<em> を inline-block にして、
     「気軽に出会／える」のように単語の途中で折り返すのを防ぐ。 */
  max-width: 15em;
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: .02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
}

.wk-cp-hero__title span,
.wk-cp-hero__title em { display: inline-block; }
.wk-cp-hero__title em { font-style: normal; color: #FBE3B4; }

.wk-cp-hero__lead {
  max-width: 640px;
  margin: 14px 0 0;
  color: #ffffff;
  font-size: clamp(13px, 1.35vw, 16px);
  font-weight: 500;
  line-height: 1.85;
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}

/* =========================================================
   3. 3つのこだわり（アイコンカード）
   ========================================================= */
.wk-cp-points {
  padding: clamp(52px, 6.5vw, 84px) 0 clamp(46px, 6vw, 72px);
  background-color: #FBF7EF;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none);
  background-size: auto, var(--wk-paper-size, 420px);
}

.wk-cp-points__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.wk-cp-card {
  background: #ffffff;
  border: 1px solid rgba(36, 31, 25, .06);
  border-radius: var(--cp-radius);
  padding: 30px 26px 28px;
  box-shadow: var(--cp-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.wk-cp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cp-shadow-lg);
}

.wk-cp-card__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.wk-cp-card:nth-child(1) .wk-cp-card__ico { background: #FBE3B4; color: #B9761A; }
.wk-cp-card:nth-child(2) .wk-cp-card__ico { background: #DDF0F2; color: #2F7E85; }
.wk-cp-card:nth-child(3) .wk-cp-card__ico { background: #DDF0E4; color: #2E7D4F; }

.wk-cp-card .wk-cp-label { margin-top: 18px; }

.wk-cp-card h3 {
  margin: 4px 0 0;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 900;
  line-height: 1.5;
}

.wk-cp-card p {
  margin: 10px 0 0;
  color: var(--cp-sub);
  font-size: 13.5px;
  line-height: 1.95;
}

/* =========================================================
   4. リード（ホップと麦を装飾に使う）
   ========================================================= */
.wk-cp-intro {
  position: relative;
  padding: clamp(52px, 6.5vw, 86px) 0;
  background: #ffffff;
  border-top: 1px solid var(--cp-line);
  border-bottom: 1px solid var(--cp-line);
  overflow: hidden;
}

.wk-cp-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.wk-cp-intro h2 {
  margin: 10px 0 0;
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.5;
}

.wk-cp-intro p {
  margin: 0;
  color: var(--cp-sub);
  font-size: clamp(13.5px, 1.3vw, 15px);
  line-height: 2.05;
}

/* 背景の装飾（ホップ・麦）。薄く大きく置くだけの飾りなので読み上げ対象外 */
.wk-cp-intro__deco {
  position: absolute;
  top: 50%;
  right: clamp(-40px, -2vw, 0px);
  z-index: 0;
  display: flex;
  gap: 10px;
  color: var(--cp-green);
  opacity: .07;
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
}

.wk-cp-intro__deco svg { width: clamp(120px, 15vw, 210px); height: auto; stroke-width: 2.2; }
.wk-cp-intro .wk-cp__inner { position: relative; z-index: 1; }

/* =========================================================
   5. こだわり3本（写真＋本文）
   ========================================================= */
.wk-cp-feature {
  padding: clamp(52px, 6.5vw, 86px) 0;
  background-color: #FBF7EF;
  background-image:
    linear-gradient(var(--wk-paper-veil, rgba(251,247,239,.45)), var(--wk-paper-veil, rgba(251,247,239,.45))),
    var(--wk-paper-tex, none);
  background-size: auto, var(--wk-paper-size, 420px);
}

.wk-cp-feature + .wk-cp-feature { border-top: 1px solid var(--cp-line); }

.wk-cp-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 70px);
  align-items: center;
}

/* 偶数番は写真を右に */
.wk-cp-feature--reverse .wk-cp-feature__media { order: 2; }
.wk-cp-feature--reverse .wk-cp-feature__body { order: 1; }

.wk-cp-feature__media {
  margin: 0;
  border-radius: var(--cp-radius);
  overflow: hidden;
  box-shadow: var(--cp-shadow-lg);
  aspect-ratio: 4 / 3;
}

.wk-cp-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.wk-cp-feature:hover .wk-cp-feature__media img { transform: scale(1.04); }

.wk-cp-feature__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wk-cp-feature__ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #FBE3B4;
  color: #B9761A;
}

.wk-cp-feature--mint .wk-cp-feature__ico { background: #DDF0F2; color: #2F7E85; }
.wk-cp-feature--green .wk-cp-feature__ico { background: #DDF0E4; color: #2E7D4F; }

.wk-cp-feature h2 {
  margin: 18px 0 0;
  font-size: clamp(22px, 2.9vw, 33px);
  font-weight: 900;
  line-height: 1.5;
}

.wk-cp-feature__body p {
  margin: 16px 0 0;
  color: var(--cp-sub);
  font-size: clamp(13.5px, 1.3vw, 15px);
  line-height: 2.05;
}

/* 数字のポイント2つ */
.wk-cp-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.wk-cp-facts li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(36, 31, 25, .07);
  border-radius: 14px;
  box-shadow: var(--cp-shadow);
}

.wk-cp-facts .wk-cp-ico { flex: 0 0 auto; margin-top: 2px; color: var(--cp-green); }

.wk-cp-facts strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
}

.wk-cp-facts span {
  display: block;
  margin-top: 3px;
  color: var(--cp-sub);
  font-size: 12px;
  line-height: 1.7;
}

/* =========================================================
   6. 最後のCTA（木目）
   ========================================================= */
.wk-cp-closing {
  position: relative;
  isolation: isolate;
  padding: clamp(60px, 7vw, 92px) 0 clamp(58px, 7vw, 88px);
  overflow: hidden;
  background-color: #3A2A16;
  /* 木目はアップロード時に 1200px へ縮小され横の継ぎ目がずれているため、
     repeat せず cover で1枚のまま使う。 */
  background-image: var(--wk-oak-tex, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  text-align: center;
}

.wk-cp-closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 覆いは .58〜.66。これより濃くすると木目が見えなくなり、
     これより薄くすると白文字のコントラストが 4.5:1 を割ります。
     （実測：この設定で白文字 6.07:1／本文の白90% 5.57:1） */
  background: linear-gradient(180deg, rgba(38, 26, 12, .58), rgba(38, 26, 12, .66));
  pointer-events: none;
}

.wk-cp-closing::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 3px;
  background: linear-gradient(90deg, #2E7D4F 0 20%, #E0952A 20% 100%);
  pointer-events: none;
}

.wk-cp-closing .wk-cp__inner { position: relative; z-index: 2; }
.wk-cp-closing .wk-cp-label { color: #FBE3B4; }

.wk-cp-closing h2 {
  margin: 12px 0 0;
  color: #ffffff;
  font-size: clamp(22px, 3vw, 33px);
  font-weight: 900;
  line-height: 1.55;
}

.wk-cp-closing p {
  max-width: 720px;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(13.5px, 1.3vw, 15px);
  line-height: 2.05;
}

.wk-cp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.wk-cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.wk-cp-btn--amber {
  background: var(--cp-amber);
  color: #2A1F08;
  box-shadow: 0 8px 22px rgba(224, 149, 42, .34);
}

.wk-cp-btn--ghost {
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wk-cp-btn:hover { transform: translateY(-2px); }
.wk-cp-btn--amber:hover { background: #EFA338; }
.wk-cp-btn--ghost:hover { background: rgba(255, 255, 255, .18); }

.wk-cp-btn .wk-cp-ico { stroke-width: 3.4; }

/* =========================================================
   7. レスポンシブ
   ========================================================= */
@media (max-width: 900px) {
  .wk-cp-points__grid { grid-template-columns: 1fr; gap: 16px; }

  .wk-cp-intro__grid { grid-template-columns: 1fr; gap: 20px; }

  .wk-cp-feature__grid { grid-template-columns: 1fr; gap: 26px; }
  /* 1カラムでは写真を必ず上に */
  .wk-cp-feature--reverse .wk-cp-feature__media { order: 0; }
  .wk-cp-feature--reverse .wk-cp-feature__body { order: 0; }

  .wk-cp-intro__deco { opacity: .05; right: -60px; }
}

@media (max-width: 768px) {
  .wk-cp-hero {
    min-height: 300px;
    padding: 72px 0 40px;
    background-position: center;
  }

  .wk-cp-hero::before {
    background: linear-gradient(180deg, rgba(18,13,9,.30) 0%, rgba(18,13,9,.06) 22%, rgba(18,13,9,0) 36%, rgba(18,13,9,.42) 62%, rgba(18,13,9,.84) 100%);
  }

  .wk-cp-hero__chip { margin-bottom: 12px; padding: 6px 12px; font-size: 10.5px; letter-spacing: .12em; }
  .wk-cp-hero__title { font-size: clamp(24px, 6.2vw, 32px); line-height: 1.48; }
  .wk-cp-hero__lead { margin-top: 11px; font-size: 13px; line-height: 1.8; }

  .wk-cp-points,
  .wk-cp-intro,
  .wk-cp-feature { padding: 42px 0; }

  .wk-cp-card { padding: 24px 20px 22px; }

  .wk-cp-facts { grid-template-columns: 1fr; }

  .wk-cp-closing { padding: 50px 0 48px; }
  .wk-cp-actions { gap: 11px; margin-top: 24px; }
  .wk-cp-btn { height: 50px; padding: 0 22px; font-size: 14px; }
}


/* =========================================================
   Page: news / NEWS ページ
========================================================= */

/* Block: news_list_grid / sec_1782114338501 */
/* ピザ news_list_grid — per-block一本（blocks_css廃止）・ここで微調整可 */
.menu-section,
.menu-grid-section,
.course-list-section,
.seat-list-full-section,
.ugc-section,
.reviews-archive-section,
.news-list-grid-section,
.news-article-body-section,
.job-list-section,
.recruit-spot-section,
.free-text-section,
.recruit-banner-section,
.contact-form-section,
.big-calendar-section {
  padding: 104px 20px;
}
.news-list-grid-section {
  position: relative;
  overflow: hidden;
  padding: 100px 20px 80px;
  background-image:
    linear-gradient(rgba(28,28,30,.72), rgba(28,28,30,.72)),
    url('/image/assets/asset_20260618172356_6a33ab1c96155.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--pure-white);
  text-align: center;
}
.scroll-container,
.menu-cat-container,
.course-list-grid,
.slf-grid,
.ugc-container,
.reviews-layout-container,
.nlg-grid,
.job-list-container,
.recruit-spot-container,
.free-text-container,
.recruit-banner-container,
.contact-container,
.bc-container,
.calendar-card {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.scroll-inner,
.menu-items-grid,
.course-list-grid,
.slf-grid,
.ugc-grid,
.nlg-grid,
.job-grid,
.recruit-spot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 34px;
}
.pickup-item-card,
.menu-item-card,
.course-list-card,
.slf-card,
.ugc-card,
.nlg-card,
.job-card,
.spot-job-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.035);
  border: 1.5px solid rgba(255,255,255,.72);
  border-radius: 0;
  box-shadow: 0 20px 45px rgba(0,0,0,.28);
  color: inherit;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pickup-item-card:hover,
.menu-item-card:hover,
.course-list-card:hover,
.slf-card:hover,
.ugc-card:hover,
.nlg-card:hover,
.job-card:hover,
.spot-job-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--amber);
}
.pickup-img-box,
.mi-img-box,
.course-list-img,
.slf-img-wrap,
.ugc-img-box,
.nlg-img,
.job-image,
.spot-job-image {
  position: relative;
  overflow: hidden;
  background: var(--charcoal-mid);
  aspect-ratio: 4 / 3;
}
.pickup-img-box img,
.pickup-img,
.mi-img-box img,
.course-list-img img,
.slf-img-wrap img,
.ugc-img-box img,
.nlg-img img,
.job-image img,
.spot-job-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.pickup-item-card:hover img,
.menu-item-card:hover img,
.course-list-card:hover img,
.slf-card:hover img,
.ugc-card:hover img,
.nlg-card:hover img,
.job-card:hover img,
.spot-job-card:hover img {
  transform: scale(1.045);
}
.pickup-info,
.course-list-body,
.slf-body,
.ugc-info,
.nlg-body,
.job-body,
.spot-job-body {
  padding: 30px;
}
.pickup-title,
.mi-title,
.course-list-body h3,
.slf-title,
.ugc-title,
.nlg-title,
.job-title,
.spot-job-title {
  margin: 0 0 12px;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}
.pickup-desc,
.mi-text,
.course-list-text,
.slf-desc,
.ugc-desc,
.nlg-excerpt,
.job-desc,
.spot-job-desc {
  color: currentColor;
  opacity: .78;
  font-size: 13px;
  line-height: 1.9;
}
.tax-label,
.course-list-price small,
.slf-cap,
.mi-duration,
.nlg-date,
.job-meta,
.spot-job-meta {
  color: currentColor;
  opacity: .55;
  font-size: 11px;
}
.news-list-grid-section .news-main-title,
.news-article-body-section .nab-title,
.job-list-section .job-main-title,
.free-text-section h2 {
  color: var(--charcoal);
}
.news-list-grid-section .news-section-header {
  margin-bottom: 60px;
  text-align: center;
}
.news-list-grid-section .news-main-title {
  margin: 0 0 18px;
  color: var(--pure-white);
  font-family: var(--font-en);
  font-size: clamp(2.8rem, 5.6vw, 4.2rem);
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}
.news-list-grid-section .news-sub-text {
  margin: 0 auto;
  max-width: 620px;
  color: rgba(255,255,255,.72);
  font-size: .95rem;
  line-height: 2;
}
.news-list-grid-section .nlg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1140px;
  margin: 0 auto 60px;
  text-align: left;
}
.news-list-grid-section .nlg-card {
  display: block;
  overflow: hidden;
  color: var(--pure-white);
  text-decoration: none;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  box-shadow: none;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.news-list-grid-section .nlg-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.28);
  box-shadow: none;
}
.nlg-img {
  background: var(--off-white);
}
.news-list-grid-section .nlg-img {
  width: 100%;
  height: 210px;
  aspect-ratio: auto;
  background: var(--charcoal-mid);
}
.news-list-grid-section .nlg-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.news-list-grid-section .nlg-card:hover .nlg-img img {
  transform: scale(1.04);
}
.news-list-grid-section .nlg-body {
  padding: 20px;
}
.news-list-grid-section .nlg-date {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,.62);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .05em;
}
.news-list-grid-section .nlg-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--pure-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.news-list-grid-section .nlg-card:hover .nlg-title {
  color: #ff453a;
}
.news-list-grid-section .news-more-btn-area {
  display: flex;
  justify-content: center;
  margin-top: 0;
}
.news-list-grid-section .btn-news-viewmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  padding: 16px 44px;
  border: 1px solid var(--pure-white);
  background: var(--red-dark);
  color: var(--pure-white);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
}
.news-list-grid-section .btn-news-viewmore:hover {
  background: var(--pure-white);
  color: var(--red-dark);
}
.news-page .news-list-grid-section {
  padding: 80px 20px 100px;
  background-color: var(--bg-dark);
  background-image: radial-gradient(circle, rgba(184,146,84,.07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.news-page .news-list-grid-section .news-section-header,
.news-page .news-list-grid-section .news-more-btn-area {
  display: none;
}
.news-page .news-list-grid-section .nlg-grid {
  margin-bottom: 0;
}
.nlg-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  background: var(--off-white);
  font-size: 38px;
}
.nlg-date,
.nab-date {
  color: var(--red); font-family: var(--font-en); font-weight: 800; letter-spacing: .08em;
}
@media (max-width: 768px) {
  .news-page .news-list-grid-section,
  .news-detail-page .news-article-body-section {
    padding: 56px 16px 70px;
  }
  .concept-section,
  .menu-section,
  .menu-grid-section,
  .course-list-section,
  .seat-list-full-section,
  .ugc-section,
  .reviews-archive-section,
  .news-list-grid-section,
  .news-article-body-section,
  .job-list-section,
  .recruit-spot-section,
  .free-text-section,
  .recruit-banner-section,
  .contact-form-section,
  .big-calendar-section,
  .fc-instagram-section,
  .instagram-section {
    padding: 72px 16px;
  }
  .scroll-inner,
  .menu-items-grid,
  .course-list-grid,
  .slf-grid,
  .ugc-grid,
  .nlg-grid,
  .job-grid,
  .recruit-spot-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pickup-info,
  .course-list-body,
  .slf-body,
  .ugc-info,
  .nlg-body,
  .job-body,
  .spot-job-body,
  .free-text-box,
  .policy-container,
  .form-wrapper,
  .calendar-card {
    padding: 24px;
  }
}


/* =========================================================
   Page: news_detail / NEWS_DETAIL ページ
========================================================= */

/* Block: news_article_body / sec_1782114380582 */
/* ピザ news_article_body — per-block一本（blocks_css廃止）・ここで微調整可 */
.menu-section,
.menu-grid-section,
.course-list-section,
.seat-list-full-section,
.ugc-section,
.reviews-archive-section,
.news-list-grid-section,
.news-article-body-section,
.job-list-section,
.recruit-spot-section,
.free-text-section,
.recruit-banner-section,
.contact-form-section,
.big-calendar-section {
  padding: 104px 20px;
}
.menu-grid-section,
.news-article-body-section,
.job-list-section,
.free-text-section {
  background: var(--cream);
  color: var(--text-dark);
}
.news-list-grid-section .news-main-title,
.news-article-body-section .nab-title,
.job-list-section .job-main-title,
.free-text-section h2 {
  color: var(--charcoal);
}
.news-detail-page .news-article-body-section {
  padding: 80px 20px 100px;
  background-color: var(--bg-dark);
  background-image: radial-gradient(circle, rgba(184,146,84,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text-on-dark);
}
.news-detail-page .nab-container {
  max-width: 900px;
  padding: 46px;
  background: rgba(24,24,26,.88);
  border: 1px solid var(--border-dark);
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow-soft);
}
.news-detail-page .nab-header {
  border-bottom-color: var(--border-dark);
}
.news-detail-page .nab-title {
  color: var(--text-on-dark);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.55;
}
.news-detail-page .nab-date {
  color: var(--gold-light);
}
.news-detail-page .nab-main-img-box {
  border: 1px solid var(--border-dark);
  box-shadow: var(--shadow-dark);
}
.news-detail-page .nab-main-img-box img {
  display: block;
  width: 100%;
  height: auto;
}
.news-detail-page .nab-body-text {
  color: var(--text-on-dark);
}
.news-detail-page .btn-nab-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 46px;
  padding: 14px 30px;
  border: 1px solid var(--pure-white);
  background: var(--red-dark);
  color: var(--pure-white);
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background .28s ease, color .28s ease;
}
.news-detail-page .btn-nab-back:hover {
  background: var(--pure-white);
  color: var(--red-dark);
}
.nlg-date,
.nab-date {
  color: var(--red); font-family: var(--font-en); font-weight: 800; letter-spacing: .08em;
}
.nab-container {
  max-width: 860px; margin: 0 auto;
}
.nab-header {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-light);
  text-align: center;
}
.nab-main-img-box {
  overflow: hidden; margin-bottom: 50px; box-shadow: 0 16px 40px rgba(28,28,30,.1);
}
.nab-body-text {
  color: var(--text-mid);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 2.3;
}
@media (max-width: 768px) {
  .news-page .news-list-grid-section,
  .news-detail-page .news-article-body-section {
    padding: 56px 16px 70px;
  }
  .news-detail-page .nab-container {
    padding: 26px 20px;
  }
  .concept-section,
  .menu-section,
  .menu-grid-section,
  .course-list-section,
  .seat-list-full-section,
  .ugc-section,
  .reviews-archive-section,
  .news-list-grid-section,
  .news-article-body-section,
  .job-list-section,
  .recruit-spot-section,
  .free-text-section,
  .recruit-banner-section,
  .contact-form-section,
  .big-calendar-section,
  .fc-instagram-section,
  .instagram-section {
    padding: 72px 16px;
  }
}


/* =========================================================
   Page: access / アクセス・店舗案内（立会川駅徒歩1分）
========================================================= */

/* Block: hero_page / sec_1784641873021 */
/* ---------- 1. 枠（4ページ共通） ---------- */
#sec_1782110792533.page-hero-wrapper,
#sec_1782111350931.page-hero-wrapper,
#sec_1782111079546.page-hero-wrapper,
#sec_1784641873021.page-hero-wrapper {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: clamp(340px, 46vh, 470px) !important;
  margin: 0 !important;
  padding: 92px clamp(20px, 7vw, 110px) clamp(46px, 6.5vh, 76px) !important;
  overflow: hidden !important;
  background-color: #241F19 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #ffffff !important;
  text-align: left !important;
}

/* 旧テンプレの残骸：背景をアニメで動かす ::before は使わない */
#sec_1782110792533.page-hero-wrapper::before,
#sec_1782111350931.page-hero-wrapper::before,
#sec_1782111079546.page-hero-wrapper::before,
#sec_1784641873021.page-hero-wrapper::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* ---------- 2. スクリム（文字を読ませるグラデーション） ----------
   TOPのMVと同じ考え方。実体のある .ph-overlay に置くので、
   .ph-container（z-index:3）より必ず下に入る。 */
#sec_1782110792533 .ph-overlay,
#sec_1782111350931 .ph-overlay,
#sec_1782111079546 .ph-overlay,
#sec_1784641873021 .ph-overlay {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  opacity: 1 !important;
  background:
    linear-gradient(
      100deg,
      rgba(18, 13, 9, .62) 0%,
      rgba(18, 13, 9, .36) 32%,
      rgba(18, 13, 9, .08) 56%,
      rgba(18, 13, 9, 0)   74%
    ),
    linear-gradient(
      180deg,
      rgba(18, 13, 9, .34) 0%,
      rgba(18, 13, 9, .08) 26%,
      rgba(18, 13, 9, 0)   44%,
      rgba(18, 13, 9, .32) 66%,
      rgba(18, 13, 9, .78) 100%
    ) !important;
  pointer-events: none !important;
}

/* ---------- 3. 下端のブランドライン ---------- */
#sec_1782110792533.page-hero-wrapper::after,
#sec_1782111350931.page-hero-wrapper::after,
#sec_1782111079546.page-hero-wrapper::after,
#sec_1784641873021.page-hero-wrapper::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  z-index: 4 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #2E7D4F 0 20%, #E0952A 20% 100%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* ---------- 4. テキストのまとまり ---------- */
#sec_1782110792533 .ph-container,
#sec_1782111350931 .ph-container,
#sec_1782111079546 .ph-container,
#sec_1784641873021 .ph-container {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  text-align: left !important;
}

/* ---------- 5. 英字ラベル（ピル型チップ） ---------- */
#sec_1782110792533 .ph-title::before,
#sec_1782111350931 .ph-title::before,
#sec_1782111079546 .ph-title::before,
#sec_1784641873021 .ph-title::before {
  position: static !important;
  /* inline-flex にするとタイトル本文と同じ行に並んでしまう
     （「MENU メニュー」のように横並びになる）。
     flex は block レベルなので改行され、width:max-content で内容幅に縮む。 */
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .5) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .14em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  white-space: nowrap !important;
}

/* ---------- 6. タイトル ---------- */
#sec_1782110792533 .ph-title,
#sec_1782111350931 .ph-title,
#sec_1782111079546 .ph-title,
#sec_1784641873021 .ph-title {
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  /* 1行あたり最大12.5文字。日本語が単語の途中で折り返すのを防ぐ */
  max-width: 12.5em !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: clamp(28px, 3.8vw, 46px) !important;
  font-weight: 900 !important;
  line-height: 1.42 !important;
  letter-spacing: .02em !important;
  text-align: left !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3) !important;
  -webkit-text-stroke: 0 !important;
}

/* 旧テンプレのタイトル下の飾り線は使わない */
#sec_1782110792533 .ph-title::after,
#sec_1782111350931 .ph-title::after,
#sec_1782111079546 .ph-title::after,
#sec_1784641873021 .ph-title::after {
  content: none !important;
  display: none !important;
}

/* ---------- 7. 説明文 ---------- */
#sec_1782110792533 .ph-desc,
#sec_1782111350931 .ph-desc,
#sec_1782111079546 .ph-desc,
#sec_1784641873021 .ph-desc {
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 620px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #ffffff !important;
  opacity: 1 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.85 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55) !important;
  -webkit-text-stroke: 0 !important;
}

/* =========================================================
   ページごとの見せ方
   （英字ラベルの文言と、写真のトリミング位置）
   ========================================================= */

/* --- MENU --- */
#sec_1782110792533 .ph-title::before { content: "MENU" !important; }
#sec_1782110792533.page-hero-wrapper { background-position: center 48% !important; }

/* --- GALLERY --- */
#sec_1782111350931 .ph-title::before { content: "GALLERY" !important; }
#sec_1782111350931.page-hero-wrapper { background-position: center 46% !important; }

/* --- STAFF --- */
#sec_1782111079546 .ph-title::before { content: "STAFF" !important; }
#sec_1782111079546.page-hero-wrapper { background-position: center 45% !important; }

/* --- ACCESS --- */
#sec_1784641873021 .ph-title::before { content: "ACCESS" !important; }
#sec_1784641873021.page-hero-wrapper { background-position: center 54% !important; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1024px) {
  #sec_1782110792533.page-hero-wrapper,
  #sec_1782111350931.page-hero-wrapper,
  #sec_1782111079546.page-hero-wrapper,
  #sec_1784641873021.page-hero-wrapper {
    min-height: clamp(320px, 44vh, 420px) !important;
    padding: 84px clamp(20px, 5vw, 60px) clamp(40px, 5.5vh, 60px) !important;
  }
}

@media (max-width: 768px) {
  #sec_1782110792533.page-hero-wrapper,
  #sec_1782111350931.page-hero-wrapper,
  #sec_1782111079546.page-hero-wrapper,
  #sec_1784641873021.page-hero-wrapper {
    min-height: 300px !important;
    padding: 72px 18px 40px !important;
    background-position: center !important;
  }

  /* SPは文字が画面幅いっぱいに広がるので、横グラデをやめて縦グラデを強める */
  #sec_1782110792533 .ph-overlay,
  #sec_1782111350931 .ph-overlay,
  #sec_1782111079546 .ph-overlay,
  #sec_1784641873021 .ph-overlay {
    background: linear-gradient(
      180deg,
      rgba(18, 13, 9, .30) 0%,
      rgba(18, 13, 9, .06) 22%,
      rgba(18, 13, 9, 0)   36%,
      rgba(18, 13, 9, .42) 62%,
      rgba(18, 13, 9, .84) 100%
    ) !important;
  }

  #sec_1782110792533 .ph-container,
  #sec_1782111350931 .ph-container,
  #sec_1782111079546 .ph-container,
  #sec_1784641873021 .ph-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  #sec_1782110792533 .ph-title::before,
  #sec_1782111350931 .ph-title::before,
  #sec_1782111079546 .ph-title::before,
  #sec_1784641873021 .ph-title::before {
    margin-bottom: 12px !important;
    padding: 6px 12px !important;
    font-size: 10.5px !important;
    letter-spacing: .12em !important;
  }

  #sec_1782110792533 .ph-title,
  #sec_1782111350931 .ph-title,
  #sec_1782111079546 .ph-title,
  #sec_1784641873021 .ph-title {
    font-size: clamp(24px, 6.2vw, 32px) !important;
    line-height: 1.48 !important;
  }

  #sec_1782110792533 .ph-desc,
  #sec_1782111350931 .ph-desc,
  #sec_1782111079546 .ph-desc,
  #sec_1784641873021 .ph-desc {
    max-width: 100% !important;
    margin-top: 11px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
  }
}


/* =========================================================
   Page: footer / FOOTER ページ
========================================================= */

/* Block: global_footer / sec_1782112173284 */
.global-footer {
  position: relative !important;
  isolation: isolate !important;
  padding: 72px clamp(24px, 5vw, 72px) 48px !important;
  overflow: hidden !important;
  background-color: #241F19 !important;
  background-image:
    linear-gradient(180deg, rgba(30, 22, 12, .76), rgba(30, 22, 12, .84)),
    var(--wk-oak-tex, none) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #ffffff !important;
  border: 0 !important;
  text-align: center !important;
}

/* ブランドライン（ヘッダー下・MV下端と同じ） */
.global-footer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #2E7D4F 0 20%, #E0952A 20% 100%) !important;
  pointer-events: none !important;
}

/* 住所・営業時間・Googleマップの重複表示は非表示（ACCESSページに集約） */
.global-footer .info-grid {
  display: none !important;
}

.global-footer .footer-nav-wrap {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(1080px, 100%) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---------- 2. フッターナビ ---------- */
.global-footer .footer-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px 40px !important;
  width: 100% !important;
  margin: 0 0 40px !important;
  padding: 0 !important;
}

.global-footer .footer-nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 0 9px !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.global-footer .footer-nav-link::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2px !important;
  background: #E0952A !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .22s ease !important;
}

.global-footer .footer-nav-link:hover::before {
  transform: scaleX(1) !important;
}

.global-footer .footer-nav-link::after {
  display: block !important;
  color: rgba(255, 255, 255, .88) !important;
  font-family: "Archivo Black", "Zen Maru Gothic", "Noto Sans JP", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: .14em !important;
  white-space: nowrap !important;
  transition: color .2s ease !important;
}

.global-footer .footer-nav-link:hover::after {
  color: #F6C972 !important;
}

/* 表示順と表示名：TOP → CONCEPT → GALLERY → MENU → STAFF → ACCESS */
.global-footer .footer-nav-link[href$="/index.php"]   { order: 10 !important; }
.global-footer .footer-nav-link[href$="/index.php"]::after   { content: "TOP" !important; }
.global-footer .footer-nav-link[href$="/courses.php"] { order: 20 !important; }
.global-footer .footer-nav-link[href$="/courses.php"]::after { content: "CONCEPT" !important; }
.global-footer .footer-nav-link[href$="/reviews.php"] { order: 30 !important; }
.global-footer .footer-nav-link[href$="/reviews.php"]::after { content: "GALLERY" !important; }
.global-footer .footer-nav-link[href$="/menu.php"]    { order: 40 !important; }
.global-footer .footer-nav-link[href$="/menu.php"]::after    { content: "MENU" !important; }
.global-footer .footer-nav-link[href$="/seats.php"]   { order: 50 !important; }
.global-footer .footer-nav-link[href$="/seats.php"]::after   { content: "STAFF" !important; }
/* スラッグを accses → access に直したので、こちらも合わせる。
   古いままだとフッターの ACCESS ラベルが出なくなります。 */
.global-footer .footer-nav-link[href*="slug=access"]  { order: 60 !important; }
.global-footer .footer-nav-link[href*="slug=access"]::after  { content: "ACCESS" !important; }

/* 「お知らせ」は6ページ構成に含まれないため非表示 */
.global-footer .footer-nav-link[href$="/news.php"] {
  display: none !important;
}

/* ---------- 3. ロゴ ----------
   【重要】フッターのロゴはエディタの設定ではなく、このCSSの画像URLで表示されます。
   PHP側（blocks/global_footer.php）は <h2>店名テキスト</h2> しか出力しないため、
   その h2 に background-image を敷いてロゴに見せている作りです（旧CSSからの踏襲）。

   → ロゴを差し替えたときは、必ず下の --wk-footer-logo のURLも更新してください。
     ヘッダー（global_header の画像設定）だけ変えるとフッターは旧ロゴのままになります。

   URLの調べ方：フロントでヘッダーのロゴを右クリック →「画像アドレスをコピー」
   ------------------------------------------------------------------ */
.global-footer {
  --wk-footer-logo: url("/image/assets/asset_20260725165103_6a646ae7435d7.webp") !important;
}

.global-footer .footer-nav-brand {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.global-footer .footer-nav-brand h2 {
  display: block !important;
  width: 96px !important;
  /* height ではなく aspect-ratio で正方形を確保する。
     height 固定＋画像が 430x429 のようにわずかに非正方形だと、
     contain のフィット計算で上下または左右に微小な隙間が出るため。 */
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background-image: var(--wk-footer-logo) !important;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  white-space: nowrap !important;
}

.global-footer .footer-nav-brand h2::before,
.global-footer .footer-nav-brand h2::after {
  display: none !important;
  content: none !important;
}

/* ---------- 4. コピーライト ---------- */
.footer-copy-text,
.footer-copy {
  padding: 18px 24px !important;
  background: #1B1712 !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  color: rgba(255, 255, 255, .42) !important;
  text-align: center !important;
  font-family: "Noto Sans JP", Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  letter-spacing: .02em !important;
}

/* =========================================================
   5. PC：画面右の追従タブ（電話 ／ Instagram）
   旧：幅112px・黄ベタ・電話番号を縦書きで巨大表示
   新：幅52pxのタブ2本。面積を約1/4に減らし、写真の邪魔をしない。
   ========================================================= */
html body .fc-floating-actions {
  position: fixed !important;
  top: 46% !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 12000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

html body .fc-floating-actions > .fc-floating-action {
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 18px 0 20px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px 0 0 12px !important;
  box-shadow: 0 10px 26px rgba(60, 45, 25, .22) !important;
  text-decoration: none !important;
  writing-mode: horizontal-tb !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform .2s ease, filter .2s ease !important;
}

html body .fc-floating-actions > .fc-floating-action:hover {
  transform: translateX(-4px) !important;
  filter: brightness(1.06) !important;
}

html body .fc-floating-actions > .fc-floating-action i {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

html body .fc-floating-actions > .fc-floating-action span {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  white-space: nowrap !important;
}

/* 電話タブ＝グリーン */
html body .fc-floating-actions > a.fc-floating-phone {
  background: #2E7D4F !important;
  color: #ffffff !important;
}

/* PHPが出す span の文字は「電話」。タブ用に文言を差し替える */
html body .fc-floating-actions > a.fc-floating-phone span {
  font-size: 0 !important;
}

html body .fc-floating-actions > a.fc-floating-phone span::after {
  content: "電話はこちら" !important;
  color: #ffffff !important;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

/* 旧CSSが電話番号を ::after で出していたのを止める */
html body .fc-floating-actions > a.fc-floating-phone::after {
  content: none !important;
  display: none !important;
}

/* Instagramタブ＝アンバー */
html body .fc-floating-actions > a.fc-floating-instagram {
  display: flex !important;
  background: #E0952A !important;
  color: #2A1F08 !important;
  border: 0 !important;
}

/* 欧文ラベルは text-orientation:upright だと1文字ずつ縦積みになって読めない。
   mixed（90度回転）にして「Instagram」を縦タブとして読ませる。 */
html body .fc-floating-actions > a.fc-floating-instagram span {
  color: #2A1F08 !important;
  font-family: "Archivo Black", "Zen Maru Gothic", "Noto Sans JP", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  text-orientation: mixed !important;
}

/* LINE・予約ボタンは今回の構成では使用しない */
html body .fc-floating-actions > a.fc-floating-line,
html body .fc-floating-actions > a.fc-floating-reserve {
  display: none !important;
}

/* =========================================================
   6. スマホ：画面下部の追従バー（表示するボタンの数に自動で合わせる）
   ========================================================= */
@media (max-width: 768px) {
  .global-footer {
    padding: 54px 18px 40px !important;
  }

  .global-footer .footer-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
    width: min(320px, 100%) !important;
    margin-bottom: 32px !important;
  }

  .global-footer .footer-nav-link {
    width: 100% !important;
    min-height: 32px !important;
    padding-bottom: 7px !important;
  }

  .global-footer .footer-nav-link::after {
    font-size: 12px !important;
  }

  .global-footer .footer-nav-brand h2 {
    width: 84px !important;
    height: auto !important;
  }

  .footer-copy-text,
  .footer-copy {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important;
  }

  body.has-floating-actions {
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }

  html body .fc-floating-actions {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 12000 !important;
    display: grid !important;
    /* 以前は 1fr 1fr（＝2ボタン固定）だったため、電話を非表示にして
       Instagram だけになると左半分にしか広がらなかった。
       grid-auto-flow:column ＋ grid-auto-columns:1fr にすると、
       実際に表示されているボタンの数だけ等幅カラムが作られる。
       1つなら全幅、2つなら半分ずつ、3つなら1/3ずつ。 */
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    background: #241F19 !important;
    box-shadow: 0 -8px 22px rgba(60, 45, 25, .18) !important;
    transform: none !important;
    pointer-events: none !important;
  }

  html body .fc-floating-actions > .fc-floating-action {
    pointer-events: auto !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body .fc-floating-actions > .fc-floating-action:hover {
    transform: none !important;
    filter: none !important;
  }

  html body .fc-floating-actions > .fc-floating-action i {
    font-size: 19px !important;
  }

  html body .fc-floating-actions > .fc-floating-action span {
    font-size: 14px !important;
    letter-spacing: .04em !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  html body .fc-floating-actions > a.fc-floating-phone span {
    font-size: 0 !important;
  }

  html body .fc-floating-actions > a.fc-floating-phone span::after {
    content: "電話する" !important;
    font-size: 14px !important;
    letter-spacing: .04em !important;
  }

  /* 2ボタンの境目 */
  html body .fc-floating-actions > a.fc-floating-instagram {
    box-shadow: inset 2px 0 0 rgba(36, 31, 25, .18) !important;
  }
}

@media (max-width: 360px) {
  html body .fc-floating-actions > .fc-floating-action span,
  html body .fc-floating-actions > a.fc-floating-phone span::after {
    font-size: 12.5px !important;
  }

  html body .fc-floating-actions > .fc-floating-action i {
    font-size: 17px !important;
  }
}


/* =========================================================
   7. サイト共通：スマホのボタンサイズ統一

   ★ここに置いている理由★
   ボタンは 40 / 50 / 52 / 53 / 54 番など複数のファイルに分かれており、
   幅も高さもバラバラ（100%・210px固定・min-width指定なし が混在）でした。
   custom.css はページ順（header → index → … → footer）に連結されるため、
   最後に読まれる global_footer に置くと、どのファイルの指定にも確実に勝てます。

   ・横幅いっぱいだと間延びするので max-width: 320px で頭打ちにする
   ・複数ボタンは縦に積んで、幅と間隔をそろえる
   ========================================================= */
@media (max-width: 768px) {
  /* ボタンを並べている親を、縦積み・中央ぞろえにする */
  .link-button-buttons,
  .wk-cp-actions,
  .fc-block-btn-wrap,
  .seat-btn-wrap,
  .menu-btn-wrap,
  .fc-instagram-embed-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  /* ボタン本体のサイズをそろえる */
  .link-button-btn,
  .wk-cp-btn,
  .fc-block-btn,
  .fc-block-btn-primary,
  .btn-menu-more,
  .btn-seat-more,
  .fc-instagram-embed-action a,
  .concept-content .fc-block-btn {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    height: 52px !important;
    padding: 0 22px !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }
}

/* 320px幅だと「WEB予約（ホットペッパー）」のような長い文言が
   はみ出すため、狭い端末では折り返しを許可する */
@media (max-width: 380px) {
  .link-button-btn,
  .wk-cp-btn,
  .fc-block-btn,
  .fc-block-btn-primary,
  .btn-menu-more,
  .btn-seat-more,
  .fc-instagram-embed-action a,
  .concept-content .fc-block-btn {
    padding: 0 16px !important;
    font-size: 14px !important;
    white-space: normal !important;
  }
}

/* =========================================================
   8. サイト共通：スマホの本文テキストを左揃えにそろえる

   スマホは1行あたりの文字数が少ないため、中央揃えの段落は
   行の始まりが毎行ズレて目線が迷い、読みづらくなる。
   本文（説明文）だけを左揃えにし、見出し・英字ラベル・
   帯（wk-band）の装飾コピー・コピーライトは中央のまま残す。

   ※ このファイルは custom.css の最後に出力されるため、
     ここに書いたルールが全ページのブロックCSSより後に効く。
   ========================================================= */
@media (max-width: 768px) {

  /* --- 8-a. 複数行になる本文 ---------------------------------
     .menu-sub-text   : TOP／MENU のピックアップメニュー説明（10〜11行）
     .seats-sub-text  : TOP／STAFF のスタッフ紹介リード（7行）
     .seat-desc       : スタッフカード1枚ごとの紹介文（2〜5行）
     .free-text-desc  : TOP「当店のご案内」の本文（PCは中央／53番で指定）
     .wk-cp-closing p : CONCEPTページ末尾のクロージング文（4行）
                        ※同じ階層に英字ラベル <p class="wk-cp-label"> があるので
                          :not(.wk-cp-label) で除外しないとラベルまで左に寄る
     ---------------------------------------------------------- */
  .menu-sub-text,
  .seats-sub-text,
  .seat-desc,
  .free-text-desc,
  .wk-cp-closing .wk-cp__inner > p:not(.wk-cp-label) {
    text-align: left !important;
  }

  /* --- 8-b. 1行で収まる短いリード文 ---------------------------
     「本文はすべて左揃え」というご指示に合わせてここに含めている。
     この4つは1行しかないため中央でも読みづらさはなく、
     中央のままの方が自然に見える場合は【8-b のかたまりだけ】
     削除すれば元に戻る（8-a はそのまま残してOK）。

     .image-grid-desc            : TOP ギャラリー「店内の空気と、ビールのある時間。」
     .gmap-desc                  : TOP／ACCESS「立会川駅から徒歩1分」
     .fc-instagram-embed-heading p : TOP「最新情報はInstagramでも発信中。」
     .wk-hw__lead                : MENU「気分に合わせて、今日のお気に入りを見つけよう。」
     ---------------------------------------------------------- */
  .image-grid-desc,
  .gmap-desc,
  .fc-instagram-embed-heading p,
  .wk-hw__lead {
    text-align: left !important;
  }
}