/* =========================================================
   FluxCore Pro Generated Custom CSS
   Auto generated from fc_pages.layout_json advanced.custom_css
   Last updated: 2026-09-12 14:46:36
========================================================= */

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

/* Block: global_header / sec_1782112078518 */
/* =========================================================
   「ほっと。」ヘッダー用CSS  ＜完全版＞

   貼り付け先：
     FluxCore Pro 管理画面
     → 共通ヘッダー (header.php)
     → 「グローバルヘッダー」ブロック
     → セクション個別CSS の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください。
   ※ カスタムHTMLブロックは不要です。
      （もし追加していたら削除してください）
   ※ 画像は使っていないので、画像パスの設定は不要です。
   ※ PHP・HTMLは一切さわっていません。CSSだけで完結します。

   --- 内容 ---
   ・PCではファーストビュー左に、ブラウンのサイドヘッダーを表示
   ・スクロールするとサイドヘッダーはページと一緒に上へ流れる
   ・ハンバーガーボタンは常に右上に固定表示
   ・ハンバーガーを押すと「画面上部だけ」にメニューバーが降りてくる
     （全画面は覆わないので、背景のページが見えたままです）
   ・×ボタンで閉じられます（PC・スマホどちらでも表示されます）
   ・電話番号は囲みなしのシンプル表示。カーソルを乗せると
     黄色いアンダーラインが光ります

   --- 使用カラー ---
   ブラウン       #7a4526  サイドバー・メニューバーの地色
   レモン         #f9c826  アクセント（ボタン・現在地・下線）
   レモン(明)     #ffd84d  ホバー時
   クリーム       #fffaee  文字
   ダークブラウン #4a2f22  レモンの上に乗る文字色
========================================================= */


/* =========================================================
   ハンバーガーボタン ＆ 閉じる×ボタン
   （PC・スマホ共通。どちらも右上に固定表示されます）
========================================================= */
.global-header .menu-trigger,
.mobile-nav-overlay .menu-trigger {
  display: inline-flex !important;
  position: fixed !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #f9c826 !important;
  color: #4a2f22 !important;
  border: 2px solid #7a4526 !important;
  box-shadow: 0 5px 0 #7a4526, 0 10px 20px rgba(74, 47, 34, .22) !important;
  transition: transform .2s ease, background .2s ease !important;
  cursor: pointer;
}

/* 開くボタンより閉じる×ボタンを手前に重ねる */
.global-header .menu-trigger { z-index: 1500 !important; }
.mobile-nav-overlay .menu-trigger { z-index: 2100 !important; }

.global-header .menu-trigger:hover,
.mobile-nav-overlay .menu-trigger:hover {
  background: #ffd84d !important;
  transform: translateY(-2px);
}

/* スマホでのボタンサイズ（ヘッダー内に収まる大きさ） */
.global-header .menu-trigger,
.mobile-nav-overlay .menu-trigger {
  top: 12px !important;
  right: 14px !important;
  width: 46px !important;
  height: 46px !important;
  font-size: 16px !important;
}

/* PCでのボタンサイズ */
@media (min-width: 993px) {
  .global-header .menu-trigger,
  .mobile-nav-overlay .menu-trigger {
    top: 22px !important;
    right: 22px !important;
    width: 62px !important;
    height: 62px !important;
    font-size: 20px !important;
  }

  /* PCではハンバーガーボタンを非表示
     （左のサイドヘッダーに6項目すべて出ているため不要）
     ※ 元に戻したい場合は、下の1行を消してください */
  .global-header .menu-trigger {
    display: none !important;
  }
}


/* =========================================================
   メニューバー（ハンバーガーを押すと上から降りてくる）
   画面全体は覆わず、上部だけに表示されます
========================================================= */
.mobile-nav-overlay {
  inset: 0 0 auto 0 !important;   /* 上部だけに配置 */
  height: auto !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 24px 110px 24px 24px !important;
  background: #7a4526 !important;
  box-shadow: 0 12px 30px rgba(74, 47, 34, .28) !important;
  transform: translateY(-100%);
  transition: transform .32s cubic-bezier(.25, 1, .5, 1),
              opacity .25s ease,
              visibility .25s ease !important;
}
.mobile-nav-overlay.active {
  transform: translateY(0);
}

.mobile-nav-overlay a {
  color: #fffaee !important;
  font-family: var(--font-serif) !important;
  font-size: 17px !important;
  letter-spacing: .1em !important;
  padding: 6px 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
  position: relative;
  line-height: 1.5;
}
.mobile-nav-overlay a:hover {
  background: transparent !important;
  color: #f9c826 !important;
}

/* 各項目の下に出る英語表記
   （文言を変えたい場合は下の content: "..." を書き換えてください） */
.mobile-nav-overlay a::after {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(255, 250, 238, .55);
  margin-top: 2px;
  font-family: var(--font-serif);
}
.mobile-nav-overlay a[href*="index.php"]::after   { content: "Home"; }
.mobile-nav-overlay a[href*="courses.php"]::after { content: "Concept"; }
.mobile-nav-overlay a[href*="menu.php"]::after    { content: "Menu"; }
.mobile-nav-overlay a[href*="gallery"]::after     { content: "Gallery"; }
.mobile-nav-overlay a[href*="news.php"]::after    { content: "News"; }
.mobile-nav-overlay a[href*="accses"]::after      { content: "Shop info"; }

.mobile-nav-overlay a:hover::after {
  color: #f9c826 !important;
}

/* スマホでは2列に並べる */
@media (max-width: 992px) {
  .mobile-nav-overlay {
    padding: 72px 14px 22px !important;
  }
  .mobile-nav-overlay a {
    flex: 0 0 50%;
    padding: 12px 4px !important;
    font-size: 16px !important;
  }
}


/* =========================================================
   スマホ（992px以下）のヘッダー
========================================================= */
.global-header {
  background: #fffaee;
  border-bottom: 1px solid rgba(74, 47, 34, .28);
  box-shadow: 0 10px 24px rgba(74, 47, 34, .06);
}
.header-logo {
  color: #4a2f22;
}

/* 電話番号：囲み・枠線なしのシンプル表示 */
.btn-header-tel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #4a2f22 !important;
  padding: 10px 2px !important;
  position: relative;
  width: auto !important;
  font-weight: 700 !important;
}
/* カーソルを乗せると黄色いアンダーラインが光る */
.btn-header-tel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: #f9c826;
  box-shadow: 0 0 8px rgba(249, 200, 38, .9);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.btn-header-tel:hover {
  background: transparent !important;
  color: #c98a2e !important;
}
.btn-header-tel:hover::after {
  transform: scaleX(1);
}


/* =========================================================
   PC（993px以上）：左サイドバーヘッダー
========================================================= */
@media (min-width: 993px) {

  /* position:absolute にすることで画面に固定されず、
     ファーストビューと一緒に上へスクロールしていきます */
  .global-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 250px;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0 !important;
    padding: 0 0 26px !important;
    background: #7a4526 !important;
    border: none !important;
    border-radius: 0 0 26px 26px !important;
    box-shadow: 0 12px 0 rgba(122, 69, 38, .35),
                6px 12px 26px rgba(74, 47, 34, .28) !important;
    backdrop-filter: none !important;
    overflow: visible;
  }
  .global-header::after { display: none !important; }

  /* SEO用のH1（ページ見出し）
     元のCSSが「1行固定・幅58%まで」になっていて、
     サイドバーの幅では文字が「…」で切れていました。
     折り返しを許可して、全文が読めるようにしています。 */
  .global-header .header-page-eyebrow {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 18px 22px 0 !important;
    margin: 0 !important;
    font-family: var(--font-serif) !important;
    font-size: 10.5px !important;
    line-height: 1.7 !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    color: #fffaee !important;
    opacity: .72 !important;
    text-shadow: none !important;
    pointer-events: auto !important;
  }
  /* H1が入った分、ロゴの上余白を詰める */
  .global-header .header-page-eyebrow + .header-logo {
    padding-top: 18px !important;
  }

  /* ロゴ */
  .header-logo {
    writing-mode: horizontal-tb !important;
    width: 100%;
    padding: 40px 20px 26px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fffaee !important;
    font-size: 34px !important;
    letter-spacing: .1em !important;
    line-height: 1.3 !important;
    flex: none;
  }
  .header-logo::after {
    content: none !important;
    display: none !important;
  }

  /* 縦積みナビ（破線区切り） */
  .desktop-nav {
    height: auto !important;
    flex-direction: column !important;
    width: 100%;
    gap: 0 !important;
    padding: 0 30px !important;
    align-items: stretch !important;
    border-top: 1px dashed rgba(255, 250, 238, .5);
    flex: none;
  }
  .desktop-nav a {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display: block !important;
    height: auto !important;
    border-right: none !important;
    color: #fffaee !important;
    font-family: var(--font-serif);
    font-size: 15px !important;
    letter-spacing: .12em !important;
    padding: 15px 0 15px 20px !important;
    border-bottom: 1px dashed rgba(255, 250, 238, .5);
    position: relative;
    text-align: left;
  }
  .desktop-nav a::after { display: none !important; }

  /* 現在地・ホバー時に左へレモンの丸ポチ */
  .desktop-nav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background .2s ease;
  }
  .desktop-nav a:hover,
  .desktop-nav a.active {
    color: #f9c826 !important;
    background: transparent !important;
  }
  .desktop-nav a:hover::before,
  .desktop-nav a.active::before {
    background: #f9c826;
  }

  /* 電話番号（サイドバー内・囲みなし） */
  .header-btns {
    padding: 22px 30px 0;
    width: 100%;
  }
  .btn-header-tel {
    width: auto !important;
    justify-content: flex-start;
    color: #fffaee !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 8px 2px !important;
  }
  .btn-header-tel:hover {
    color: #f9c826 !important;
  }

  /* サイドバーはファーストビューに重ねる形なので本文はずらしません */
  body { padding-left: 0 !important; }
}


/* =========================================================
   Page: index / TOP｜ほっと。
========================================================= */

/* Block: hero_main / sec_1782110119323 */
/* =========================================================
   「ほっと。」ヒーロー（メイン画像・動画）用CSS  ＜完全版＞
   2026.09.12 画面いっぱい（フルスクリーン）版 ＜第2版：なみなみ装飾＞

   ▼▼ 貼り付け先 ▼▼
     FluxCore Pro 管理画面
     → TOPページ（index）
     → 左のブロック一覧から「ヒーロー（メイン画像・動画）」を選択
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ ヘッダー用のCSSとは別物です。取り違えにご注意ください。
   ※ 画像・キャッチ文はブロックの設定で登録済みのものを使います。
      このCSSに画像パスや文言を書く必要はありません。
   ※ PHP・HTMLは一切さわっていません。CSSだけで完結します。

   ─────────────────────────────────────────
   ■ 今回の変更内容
   ─────────────────────────────────────────
   1. スライドショーを画面いっぱい（横幅100%・高さ＝画面の高さ）に拡大
      ・前回の「クリーム色の背景＋角丸カード」はやめています
      ・左のブラウンのサイドヘッダーは、写真の上に重なる形になります
   2. キャッチコピー「カブと人がつながる、瀬戸田の憩いの場所。」を
      写真の中（サイドヘッダーを避けた右側エリアの中央）に配置
      ・クリーム色の文字＋影。文字の下半分に重なるように
        「なみなみ」の半透明ブラウンを敷いています（写真が透けて見えます）
        ※ 2026.09.12 第2版：帯＋レモン線 → なみなみ に変更
   3. 写真の下側にうすい影を敷き、切り替えドットが見えるようにしています
   4. スマホは高さ＝画面いっぱい、キャッチは中央に配置

   ─────────────────────────────────────────
   ■ 調整したいとき
   ─────────────────────────────────────────
   ・写真の高さ           → .hero-wrapper の height（100svh＝画面の高さ）
                            例：少し低くしたい → 88svh
   ・キャッチの上下位置   → .hero-slide-caption の top（50%＝中央）
   ・キャッチの文字の大きさ → .hero-slide-catch の font-size
   ・なみなみの濃さ       → .hero-slide-catch の background-image 内の
                            fill-opacity='.75'（小さくすると薄く、大きくすると濃く）
   ・なみなみの太さ       → .hero-slide-catch の background-size の2つ目（.84em）
   ・なみなみの上下位置   → .hero-slide-catch の background-position の calc(100% - .42em)
                            （.42em を大きくすると上へ、小さくすると下へ）
   ※ CMSブロック設定の「キャッチ表示位置」「文字色」「文字サイズ」より
      このCSSの指定が優先されます。

   --- 使用カラー ---
   ブラウン       #7a4526  キャッチのなみなみ
   レモン         #f9c826  スライドのドット
   クリーム       #fffaee  キャッチ文字
========================================================= */


/* =========================================================
   ヒーロー全体（画面いっぱい）
========================================================= */
.hero-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100svh !important;        /* ← 画面の高さいっぱい */
  min-height: 600px !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #2a1a12 !important;    /* 画像読み込み中の下地色 */
  background-image: none !important;
  overflow: hidden !important;
}

/* 写真に敷くうすい影（上：ほんの少し／下：ドットが見えるように少し濃く）
   元の「左右を暗くする膜」は使いません */
.hero-wrapper::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg,
      rgba(30, 18, 10, .22) 0%,
      rgba(30, 18, 10, 0)   30%,
      rgba(30, 18, 10, 0)   62%,
      rgba(30, 18, 10, .46) 100%) !important;
}


/* =========================================================
   スライダー本体（枠いっぱいに敷く）
========================================================= */
.hero-slider {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.hero-slide {
  overflow: hidden !important;
}
.hero-slide-img {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-position: center center !important;
}

/* 画像1枚（スライダーを使わない）場合も同じ見た目に */
.hero-img-window {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}


/* =========================================================
   キャッチコピー（写真の中・サイドヘッダーを避けた右側エリアの中央）
========================================================= */
.hero-slide-caption {
  position: absolute !important;
  z-index: 3 !important;
  left: 250px !important;            /* ← サイドヘッダーの幅ぶん右へ */
  right: 0 !important;
  top: 50% !important;               /* ← 上下位置（50%＝中央） */
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 5vw !important;
  text-align: center !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 文字：クリーム色＋影。背景は「なみなみ」の半透明ブラウン（文字の下半分に重なる）
   ・h2 を inline にして box-decoration-break: clone を使うと、
     2行に折れたときも各行の下になみなみが付きます
   ・なみなみは SVG（data URI）を背景として横に繰り返しています */
.hero-slide-catch {
  display: inline !important;
  margin: 0 !important;
  padding: .04em .35em .14em !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fffaee !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem) !important;   /* ← 文字の大きさ */
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1.75 !important;
  text-shadow: 0 1px 2px rgba(40, 20, 10, .45),
               0 4px 18px rgba(40, 20, 10, .45) !important;
  white-space: normal !important;
  /* ▼ なみなみ（半透明ブラウン #7a4526・濃さ fill-opacity='.75'）
     文字の下半分に重なる位置に敷いています（フォントの下余白ぶん .42em 上げています） */
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44' preserveAspectRatio='none'%3E%3Cpath fill='%237a4526' fill-opacity='.65' d='M0,9 Q15,0 30,9 T60,9 T90,9 T120,9 L120,35 Q105,44 90,35 T60,35 T30,35 T0,35 Z'/%3E%3C/svg%3E") !important;
  background-repeat: repeat-x !important;
  background-size: 2.6em .84em !important;                /* ← 波の横幅 / なみなみの太さ */
  background-position: 0 calc(100% - .42em) !important;   /* ← 上下位置。数字を大きくすると上へ */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 前バージョンのレモン色の線は使いません */
.hero-slide-catch::after {
  content: none !important;
  display: none !important;
}
/* サブテキスト（設定した場合のみ表示されます） */
.hero-slide-sub {
  display: inline-block !important;
  margin: 14px 0 0 !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: rgba(122, 69, 38, .70) !important;
  color: #fffaee !important;
  text-shadow: none !important;
}


/* =========================================================
   スライド切り替えのドット
========================================================= */
.hero-slider-dots {
  z-index: 4 !important;
  bottom: 34px !important;
  gap: 10px !important;
}
.hero-slider-dot {
  width: 11px !important;
  height: 11px !important;
  background: rgba(255, 250, 238, .55) !important;
  border-color: rgba(255, 250, 238, .9) !important;
}
.hero-slider-dot.is-active {
  background: #f9c826 !important;
  border-color: #f9c826 !important;
}


/* =========================================================
   タブレット・スマホ（992px以下）
   サイドヘッダーが無いので、キャッチを画面の中央に
========================================================= */
@media (max-width: 992px) {
  .hero-wrapper {
    height: 100svh !important;
    min-height: 520px !important;
  }
  /* 文字サイズは caption 側で決め、h2 は継承。
     「カブと人がつながる、／瀬戸田の憩いの場所。」と「、」の位置で2行に割るため、
     caption の幅を「1行11文字ぶん」に絞っています。
     ※ キャッチの文言を変えたときは、この 11.5em を
        「1行目に入れたい文字数 ＋ 1.5」に直してください */
  .hero-slide-caption {
    left: 0 !important;
    right: 0 !important;
    top: 52% !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    box-sizing: content-box !important;
    max-width: 11.5em !important;
    font-size: clamp(1.1rem, 4.8vw, 1.5rem) !important;
    text-wrap: balance;
  }
  .hero-slide-catch {
    font-size: inherit !important;
    letter-spacing: .08em !important;
    line-height: 1.85 !important;
    background-size: 2.4em .8em !important;
    background-position: 0 calc(100% - .4em) !important;
  }
}

/* スマホ（768px以下）：下に固定の「電話／Instagram」バーがあるので
   ドットが隠れないよう少し上げています */
@media (max-width: 768px) {
  .hero-slider-dots {
    bottom: 96px !important;
  }
}

/* Block: latest_news_bar / sec_1782110423653 */
/* =========================================================
   「ほっと。」新着ニュースバー用CSS  ＜完全版＞

   ▼▼ 貼り付け先 ▼▼
     FluxCore Pro 管理画面
     → TOPページ（index）
     → 左のブロック一覧から「新着ニュースバー」を選択
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください。
   ※ 画像は使っていないので、画像パスの設定は不要です。
   ※ PHP・HTMLは一切さわっていません。CSSだけで完結します。

   --- 内容 ---
   ・お知らせを「最新の1件だけ」表示
     （ブロック側は3件出力する作りなので、2件目以降をCSSで非表示）
   ・丸みのある白いピル型のバーに変更
   ・背景はクリーム色＋うすいドット模様（ヒーローと同じ明るいトーン）
   ・NEWSバッジと矢印はレモン色

   --- 表示件数を変えたいとき ---
   下の「.news-bar-link:nth-of-type(n+2)」の行が
   「2件目以降を隠す」指定です。
   ・2件表示したい → n+2 を n+3 に
   ・3件すべて表示 → その1行を消す

   --- 使用カラー ---
   ブラウン       #7a4526  枠線・影
   ダークブラウン #4a2f22  文字
   レモン         #f9c826  バッジ・矢印
   クリーム       #fffaee  背景
   うすいブラウン #a8825f  日付
========================================================= */


/* =========================================================
   セクション全体（背景）
========================================================= */
.news-bar-section {
  padding: 56px 20px !important;
  background: #fffaee !important;
  /* うすいドット模様（ヒーローと同じ） */
  background-image: radial-gradient(rgba(122, 69, 38, .10) 1.5px, transparent 1.5px) !important;
  background-size: 18px 18px !important;
  color: #4a2f22 !important;
}
.news-bar-container {
  max-width: 760px !important;
  margin: 0 auto !important;
}


/* =========================================================
   最新1件だけ表示（2件目以降を非表示）
========================================================= */
.news-bar-link:nth-of-type(n+2) {
  display: none !important;
}


/* =========================================================
   お知らせバー（丸みのあるピル型）
========================================================= */
.news-bar-link {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  justify-items: start !important;
  padding: 18px 26px !important;
  background: #ffffff !important;
  border: 2px solid #7a4526 !important;
  border-radius: 999px !important;
  color: #4a2f22 !important;
  box-shadow: 0 6px 0 rgba(122, 69, 38, .30) !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.news-bar-link + .news-bar-link {
  margin-top: 0 !important;
}
.news-bar-link:hover {
  background: #fffaee !important;
  border-color: #7a4526 !important;
  box-shadow: 0 9px 0 rgba(122, 69, 38, .30) !important;
  transform: translateY(-3px) !important;
}

.news-bar-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  justify-content: flex-start !important;
}

/* NEWSバッジ */
.news-badge {
  background: #f9c826 !important;
  color: #4a2f22 !important;
  border: 2px solid #7a4526 !important;
  border-radius: 999px !important;
  font-family: var(--font-en) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  padding: 5px 14px !important;
}

/* 日付 */
.news-date {
  color: #a8825f !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
}

/* タイトル */
.news-title {
  color: #4a2f22 !important;
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  letter-spacing: .06em !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右の矢印 */
.news-arrow {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f9c826 !important;
  color: #4a2f22 !important;
  border: 2px solid #7a4526 !important;
  border-radius: 50% !important;
  font-size: 12px !important;
}


/* =========================================================
   スマホ（768px以下）
   横幅が狭いので、バッジ・日付を上の段に回します
========================================================= */
@media (max-width: 768px) {
  .news-bar-section {
    padding: 40px 16px !important;
  }
  .news-bar-link {
    grid-template-columns: 1fr auto !important;
    gap: 8px 12px !important;
    padding: 16px 20px !important;
    border-radius: 26px !important;
  }
  .news-bar-left {
    grid-column: 1 / -1 !important;
  }
  .news-title {
    white-space: normal !important;
    font-size: 15px !important;
  }
}

/* Block: custom_html / sec_1786528228574 */
/* =========================================================
   01 TOP 当店のご案内
   2026.09.12 写真追加版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     TOPページ（index）→ 「当店のご案内」のカスタムHTMLブロック（sec_1786528228574）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ HTMLも差し替えが必要です（02_about.html）。
      写真を入れる <figure> タグを追加しているためです。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の変更内容（末尾の「★2026.09.12 追加」が該当箇所です）
   ─────────────────────────────────────────
   1. 見出しと本文のあいだに写真を1枚追加
      ・ヒーローやメニュー写真と同じ「角丸＋クリームのフチ＋ブラウンの影」のカード風
      ・PCは横長（16 / 8）、スマホは 4/3 に自動で切り抜き
   2. 2026.08.25 版の内容はそのまま残しています
========================================================= */

/* =========================================================
   01 TOP 当店のご案内
   2026.08.25 クライアント修正版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     TOPページ（index.php）→ 「当店のご案内」のカスタムHTMLブロック（sec_1786528228574）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の修正内容（本文中の「★2026.08修正」が該当箇所です）
   ─────────────────────────────────────────
   1. 本文の文字サイズ 14px → 17px（スマホ 16px）
   2. 本文を中央ぞろえにして、見出し「当店のご案内」と中心をそろえた（PCのみ／幅は1120px→980px）
   3. スマホは行が短くなりすぎるため左ぞろえのまま、文字サイズだけ拡大
========================================================= */

/* =========================================================
   「ほっと。」TOPページ ④当店のご案内  ＜CSS 完全版＞
   ※改行修正版（text-wrap: balance をやめました）

   ▼▼ 貼り付け先 ▼▼
     ホーム（index.php）→「カスタムHTML」ブロック
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、まるごとコピペしてください。
   ※ HTMLも差し替えが必要です（about.html）。
      文章を「、」ごとに区切るタグを入れているためです。

   ─────────────────────────────────────────
   ■ 改行の直しかたを変更しました
   ─────────────────────────────────────────
   前回入れた text-wrap: balance は「行の長さをそろえる」
   機能で、文の途中の不自然な位置で改行されていました。
   これをやめて、次の2つに変更しています。

   1. 本文の幅を広げ、文字を14pxに
      → ほとんどの文が1行に収まります

   2. 文を「、」で区切り、その区切りでしか改行しないように
      → 1行に収まらない長い文も、必ず「、」の位置で改行され、
        文の途中で切れることがなくなります

   【PC(1280px)での実測結果】
     当店のご案内：5文中4文が1行（79文字の文だけ2行）
     メニュー：4文すべて1行
     こだわり：3文中2文が1行（114文字の文だけ2行）

   ※ スマホは画面が狭く、「、」で改行すると行が短くなり
     すぎるため、通常の折り返しに戻しています。

   --- 使用カラー ---
   ブラウン       #7a4526  見出し
   ダークブラウン #4a2f22  本文
   レモン         #f9c826  見出し下の線
   ゴールド       #c9a24a  英字ラベル
   クリーム       #fffaee  背景
========================================================= */


/* =========================================================
   セクション全体（背景・余白）
========================================================= */
.hot-about {
  padding: 96px 20px !important;
  background: #fffaee;
  /* うすいドット模様 */
  background-image: radial-gradient(rgba(122, 69, 38, .10) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

.hot-about-inner {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}


/* =========================================================
   見出し
========================================================= */
.hot-about-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .28em;
  color: #c9a24a;
}

.hot-about-title {
  margin: 0 0 40px;
  display: inline-block;
  position: relative;
  padding-bottom: 16px;
  font-family: var(--font-serif);
  font-weight: 900;
  color: #7a4526;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  letter-spacing: .12em;
}
.hot-about-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: #f9c826;
}


/* =========================================================
   本文
========================================================= */
.hot-about-lead {
  /* ★2026.08修正① 見出しと本文の中心をそろえるため、本文の幅を少し狭めて中央ぞろえに */
  text-align: center;
  max-width: 980px;    /* ← 広げるほど1行に入る文字数が増えます */
  margin: 0 auto;
}
.hot-about-lead p {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  color: #4a2f22;
  /* ★2026.08修正② 本文が小さいというご指摘 → 14px から 17px に拡大 */
  font-size: 17px;
  line-height: 2.1;
  letter-spacing: .02em;
}
.hot-about-lead p:last-child {
  margin-bottom: 0;
}

/* 「、」で区切ったかたまり
   スマホは通常の折り返し（行を目いっぱい使う） */
.hot-about-lead .ln {
  display: inline;
}
/* PCのみ「、」の位置でしか改行しない */
@media (min-width: 993px) {
  .hot-about-lead .ln {
    display: inline-block;
  }
}


/* =========================================================
   スマホ（992px以下）
========================================================= */
@media (max-width: 992px) {
  .hot-about {
    padding: 60px 16px !important;
  }
  .hot-about-title {
    margin-bottom: 28px;
    display: block;
    text-align: center;
  }
  /* ★2026.08修正 スマホは行が短くなりすぎるので左ぞろえのまま、文字だけ大きく */
  .hot-about-lead {
    text-align: left;
    max-width: 100%;
  }
  .hot-about-lead p {
    font-size: 16px;
    line-height: 2.0;
    margin-bottom: 16px;
  }
}


/* =========================================================
   ★2026.09.12 追加：写真（1枚）
   ・写真を差し替えるときは HTML の <img src="..."> のパスを変えてください
   ・大きさを変えたいとき → max-width の数字（880px）
   ・縦横比を変えたいとき → aspect-ratio（16 / 8）。正方形に近くしたいなら 4 / 3
========================================================= */
.hot-about-photo {
  max-width: 880px;       /* ← 写真の最大幅 */
  margin: 0 auto 44px;
  padding: 0;
  position: relative;
}
.hot-about-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;     /* ← 縦横比 */
  object-fit: cover;
  border-radius: 26px;
  border: 3px solid #fffaee;
  box-shadow: 0 10px 0 rgba(122, 69, 38, .22),
              0 20px 40px rgba(74, 47, 34, .18);
}
/* 写真のキャプション（HTMLに <figcaption> を足した場合のみ表示） */
.hot-about-photo figcaption {
  margin-top: 14px;
  font-family: var(--font-serif);
  color: #7a4526;
  font-size: 14px;
  letter-spacing: .06em;
}

@media (max-width: 992px) {
  .hot-about-photo {
    margin-bottom: 30px;
  }
  .hot-about-photo img {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }
}

/* Block: custom_html / sec_1786528283293 */
/* =========================================================
   02 TOP メニュー
   2026.09.12 写真追加版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     TOPページ（index）→ 「メニュー」のカスタムHTMLブロック（sec_1786528283293）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ HTMLも差し替えが必要です（03_menu.html）。
      写真を入れる <figure> タグを追加しているためです。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の変更内容（末尾の「★2026.09.12 追加」が該当箇所です）
   ─────────────────────────────────────────
   1. 本文とボタンのあいだに写真を1枚追加
      ・ヒーローやメニュー写真と同じ「角丸＋クリームのフチ＋ブラウンの影」のカード風
      ・PCは横長（16 / 8）、スマホは 4/3 に自動で切り抜き
   2. 2026.08.25 版の内容はそのまま残しています
========================================================= */

/* =========================================================
   02 TOP メニュー
   2026.08.25 クライアント修正版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     TOPページ（index.php）→ 「メニュー」のカスタムHTMLブロック（sec_1786528283293）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の修正内容（本文中の「★2026.08修正」が該当箇所です）
   ─────────────────────────────────────────
   1. 本文の文字サイズ 14px → 17px（スマホ 16px）
   2. 本文を中央ぞろえにして、見出し「メニュー」と中心をそろえた（PCのみ）
   3. ボタンが大きすぎたので 340px → 200px に縮小（スマホ 280px → 170px）
   4. サイト内のほかのボタンと同じ幅にそろえた
========================================================= */

/* =========================================================
   「ほっと。」TOPページ ⑤メニュー  ＜CSS 完全版＞
   ※改行修正版＋ボタンを画像リンクに変更

   ▼▼ 貼り付け先 ▼▼
     ホーム（index.php）→「メニュー」ブロック
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、まるごとコピペしてください。
   ※ HTMLも差し替えが必要です（menu.html）。

   ─────────────────────────────────────────
   ■ 今回の変更点
   ─────────────────────────────────────────
   1. ボタンをご指定の画像リンクに変更しました
      image/assets/asset_20260812173113_6a7c2f5199a7d.webp
      ・リンク先は /menu.php のままです
      ・画像の外周に黒いフチが入っていたため、
        clip-path で少し内側を切り出して表示しています
      ・前回のレモン色ボタンの背景・枠線・影は打ち消しています

   2. 改行の直しかたを変更しました
      text-wrap: balance をやめ、本文の幅を広げて文字を14pxに。
      さらに文を「、」で区切り、その位置でしか改行しないように
      しています。【PC実測】4文すべて1行に収まります。
      ※スマホは行が短くなりすぎるため通常の折り返しに戻しています。

   --- 使用カラー ---
   ブラウン       #7a4526  見出し・写真キャプション
   ダークブラウン #4a2f22  本文
   レモン         #f9c826  見出し下の線
   ゴールド       #c9a24a  英字ラベル
   クリーム       #fffaee  写真のフチ
========================================================= */


/* =========================================================
   セクション全体
========================================================= */
.hot-menu {
  padding: 96px 20px !important;
  background: #ffffff;
}

/* --- ブランド柄の背景（PCのみ） ---
   ・繰り返しなし
   ・原寸1200px を20%拡大した 1440px で表示
   ・画像が届かない余白は、画像の地色 #fdf9e8 で埋めて
     継ぎ目が見えないようにしています

   ※ スマホは画像が本文に大きく被って読みにくくなるため、
     白背景のままにしています。
     スマホにも出す場合は下の @media の行と閉じカッコを消してください。

   ※ CMSの「セクションの背景画像」欄は使えません（空のままでOK）。
     カスタムHTMLブロックは background: transparent !important; を
     自動出力していて、CMSの背景設定を打ち消してしまうためです。 */
@media (min-width: 993px) {
  .hot-menu {
    background-color: #fdf9e8 !important;    /* 画像の地色。余白をこの色で埋める */
    background-image: url("/image/assets/asset_20260812204132_6a7c5bec7c48a.webp") !important;
    background-repeat: no-repeat !important; /* 繰り返さない */
    background-size: 1440px auto !important; /* 原寸1200pxの20%拡大 */
    background-position: center top !important;
  }
}

.hot-menu-inner {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}


/* =========================================================
   見出し
========================================================= */
.hot-menu-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .28em;
  color: #c9a24a;
}
.hot-menu-title {
  margin: 0 0 40px;
  display: inline-block;
  position: relative;
  padding-bottom: 16px;
  font-family: var(--font-serif);
  font-weight: 900;
  color: #7a4526;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  letter-spacing: .12em;
}
.hot-menu-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: #f9c826;
}


/* =========================================================
   本文
========================================================= */
.hot-menu-lead {
  /* ★2026.08修正① 見出しと本文の中心をそろえるため、本文の幅を少し狭めて中央ぞろえに */
  text-align: center;
  max-width: 980px;
  margin: 0 auto 48px;
}
.hot-menu-lead p {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  color: #4a2f22;
  /* ★2026.08修正② 本文が小さいというご指摘 → 14px から 17px に拡大 */
  font-size: 17px;
  line-height: 2.1;
  letter-spacing: .02em;
}
.hot-menu-lead p:last-child {
  margin-bottom: 0;
}

/* 「、」で区切ったかたまり（スマホは通常の折り返し） */
.hot-menu-lead .ln {
  display: inline;
}
@media (min-width: 993px) {
  .hot-menu-lead .ln {
    display: inline-block;
  }
}


/* =========================================================
   お料理写真（3枚）
   不要な場合はHTMLの <ul class="hot-menu-photos"> を削除してください
========================================================= */
.hot-menu-photos {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hot-menu-photos li {
  margin: 0;
}
.hot-menu-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
  border: 3px solid #fffaee;
  box-shadow: 0 8px 0 rgba(122, 69, 38, .20),
              0 16px 32px rgba(74, 47, 34, .14);
}
.hot-menu-photos span {
  display: block;
  margin-top: 14px;
  font-family: var(--font-serif);
  color: #7a4526;
  font-size: 14px;
  letter-spacing: .06em;
}


/* =========================================================
   メニューボタン（画像リンク）
========================================================= */
.hot-menu-btnwrap {
  text-align: center;
}
.hot-menu-btn {
  display: inline-block !important;
  line-height: 0 !important;
  /* 前バージョンのレモン色ボタンの見た目を打ち消す */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  /* ★2026.08修正③ ボタンが大きすぎるというご指摘 → 340px から 200px に縮小
     （こだわり／ギャラリー／店舗案内のボタンと同じ幅にそろえています） */
  max-width: 200px !important;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, filter .2s ease;
}
.hot-menu-btn img {
  display: block;
  width: 100%;
  height: auto;
  /* 画像の外周にある黒いフチを切り落とす */
  clip-path: inset(3.2% 2.2%);
}
.hot-menu-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
}


/* =========================================================
   スマホ（992px以下）
========================================================= */
@media (max-width: 992px) {
  .hot-menu {
    padding: 60px 16px !important;
  }
  .hot-menu-title {
    margin-bottom: 28px;
    display: block;
  }
  .hot-menu-lead {
    margin-bottom: 34px;
  }
  /* ★2026.08修正 スマホは行が短くなりすぎるので左ぞろえのまま、文字だけ大きく */
  .hot-menu-lead {
    text-align: left;
    max-width: 100%;
  }
  .hot-menu-lead p {
    font-size: 16px;
    line-height: 2.0;
    margin-bottom: 16px;
  }
  .hot-menu-photos {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 34px;
  }
  .hot-menu-photos li:last-child {
    grid-column: 1 / -1;
    max-width: 60%;
    margin: 0 auto;
  }
  .hot-menu-photos img {
    border-radius: 16px;
  }
  .hot-menu-photos span {
    margin-top: 10px;
    font-size: 13px;
  }
  /* ★2026.08修正③ スマホも他のボタンと同じ 170px にそろえる */
  .hot-menu-btn {
    max-width: 170px !important;
  }
}


/* =========================================================
   ★2026.09.12 追加：写真（1枚）
   ・写真を差し替えるときは HTML の <img src="..."> のパスを変えてください
   ・大きさを変えたいとき → max-width の数字（880px）
   ・縦横比を変えたいとき → aspect-ratio（16 / 8）。正方形に近くしたいなら 4 / 3
========================================================= */
.hot-menu-photo {
  max-width: 880px;       /* ← 写真の最大幅 */
  margin: 0 auto 44px;
  padding: 0;
  position: relative;
}
.hot-menu-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;     /* ← 縦横比 */
  object-fit: cover;
  border-radius: 26px;
  border: 3px solid #fffaee;
  box-shadow: 0 10px 0 rgba(122, 69, 38, .22),
              0 20px 40px rgba(74, 47, 34, .18);
}
/* 写真のキャプション（HTMLに <figcaption> を足した場合のみ表示） */
.hot-menu-photo figcaption {
  margin-top: 14px;
  font-family: var(--font-serif);
  color: #7a4526;
  font-size: 14px;
  letter-spacing: .06em;
}

@media (max-width: 992px) {
  .hot-menu-photo {
    margin-bottom: 30px;
  }
  .hot-menu-photo img {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }
}

/* Block: custom_html / sec_1786528315528 */
/* =========================================================
   03 TOP 当店のこだわり
   2026.09.12 写真追加版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     TOPページ（index）→ 「当店のこだわり」のカスタムHTMLブロック（sec_1786528315528）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ HTMLも差し替えが必要です（04_kodawari.html）。
      写真を入れる <figure> タグを追加しているためです。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の変更内容（末尾の「★2026.09.12 追加」が該当箇所です）
   ─────────────────────────────────────────
   1. 見出しと本文のあいだに写真を1枚追加
      ・ヒーローやメニュー写真と同じ「角丸＋クリームのフチ＋ブラウンの影」のカード風
      ・PCは横長（16 / 8）、スマホは 4/3 に自動で切り抜き
   2. 2026.08.25 版の内容はそのまま残しています
========================================================= */

/* =========================================================
   03 TOP 当店のこだわり
   2026.08.25 クライアント修正版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     TOPページ（index.php）→ 「当店のこだわり」のカスタムHTMLブロック（sec_1786528315528）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の修正内容（本文中の「★2026.08修正」が該当箇所です）
   ─────────────────────────────────────────
   1. 本文の文字サイズ 14px → 17px（スマホ 16px）
   2. 本文を中央ぞろえにして、見出し「当店のこだわり」と中心をそろえた（PCのみ）
   3. ボタン幅 190px → 200px（スマホ 170px）にそろえた
   4. 【不具合修正】スマホ用の指定が @media (max-width: 140px) になっていて、このセクションだけスマホで効いていませんでした。992px に修正
========================================================= */

/* =========================================================
   「ほっと。」TOPページ ⑥こだわり  ＜CSS 完全版＞
   ※改行修正版＋ボタンを画像リンクに変更

   ▼▼ 貼り付け先 ▼▼
     ホーム（index.php）→「こだわり」ブロック
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、まるごとコピペしてください。
   ※ HTMLも差し替えが必要です（kodawari.html）。

   ─────────────────────────────────────────
   ■ 今回の変更点
   ─────────────────────────────────────────
   1. ボタンをご指定の画像リンクに変更しました
      image/assets/asset_20260812173129_6a7c2f61eaadc.webp
      ・リンク先は /courses.php（こだわりページ）です
      ・画像の外周に黒いフチが入っていたため、
        clip-path で少し内側を切り出して表示しています

   2. 改行の直しかたを変更しました
      text-wrap: balance をやめ、本文の幅を広げて文字を14pxに。
      さらに文を「、」で区切り、その位置でしか改行しないように
      しています。【PC実測】3文中2文が1行に収まり、
      114文字の長い文だけ2行になりますが「、」の位置で改行されます。
      ※スマホは行が短くなりすぎるため通常の折り返しに戻しています。

   --- 使用カラー ---
   ブラウン       #7a4526  見出し・カードの枠線
   ダークブラウン #4a2f22  本文
   レモン         #f9c826  見出し下の線・番号
   ゴールド       #c9a24a  英字ラベル
   クリーム       #fffaee  背景
========================================================= */


/* =========================================================
   セクション全体
========================================================= */
.hot-kodawari {
  padding: 96px 20px !important;
  background: #fffaee;
  /* うすいドット模様 */
  background-image: radial-gradient(rgba(122, 69, 38, .10) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
.hot-kodawari-inner {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}


/* =========================================================
   見出し
========================================================= */
.hot-kodawari-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .24em;
  color: #c9a24a;
}
.hot-kodawari-title {
  margin: 0 0 40px;
  display: inline-block;
  position: relative;
  padding-bottom: 16px;
  font-family: var(--font-serif);
  font-weight: 900;
  color: #7a4526;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  letter-spacing: .12em;
}
.hot-kodawari-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: #f9c826;
}


/* =========================================================
   本文
========================================================= */
.hot-kodawari-lead {
  /* ★2026.08修正① 見出しと本文の中心をそろえるため、本文の幅を少し狭めて中央ぞろえに */
  text-align: center;
  max-width: 980px;
  margin: 0 auto 48px;
}
.hot-kodawari-lead p {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  color: #4a2f22;
  /* ★2026.08修正② 本文が小さいというご指摘 → 14px から 17px に拡大 */
  font-size: 17px;
  line-height: 2.1;
  letter-spacing: .02em;
}
.hot-kodawari-lead p:last-child {
  margin-bottom: 0;
}

/* 「、」で区切ったかたまり（スマホは通常の折り返し） */
.hot-kodawari-lead .ln {
  display: inline;
}
@media (min-width: 993px) {
  .hot-kodawari-lead .ln {
    display: inline-block;
  }
}



/* =========================================================
   こだわりページへのボタン（画像リンク）
========================================================= */
.hot-kodawari-btnwrap {
  text-align: center;
}
.hot-kodawari-btn {
  display: inline-block !important;
  line-height: 0 !important;
  /* 前バージョンのレモン色ボタンの見た目を打ち消す */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  /* ★2026.08修正③ サイト内のボタン幅を 200px にそろえる */
  max-width: 200px !important;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, filter .2s ease;
}
.hot-kodawari-btn img {
  display: block;
  width: 100%;
  height: auto;
  /* 画像の外周にある黒いフチを切り落とす */
  clip-path: inset(3.2% 2.2%);
}
.hot-kodawari-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
}


/* =========================================================
   スマホ（992px以下）
   ★2026.08修正④【不具合】ここが @media (max-width: 140px) になっていたため、
     このセクションだけスマホ用の指定がまったく効いていませんでした。
     992px に直しています。
========================================================= */
@media (max-width: 992px) {
  .hot-kodawari {
    padding: 60px 16px !important;
  }
  .hot-kodawari-title {
    margin-bottom: 28px;
    display: block;
  }
  /* ★2026.08修正 スマホは行が短くなりすぎるので左ぞろえのまま、文字だけ大きく */
  .hot-kodawari-lead {
    margin-bottom: 34px;
    text-align: left;
    max-width: 100%;
  }
  .hot-kodawari-lead p {
    font-size: 16px;
    line-height: 2.0;
    margin-bottom: 16px;
  }
  .hot-kodawari-points {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 34px;
  }
  .hot-kodawari-points li {
    flex-direction: row;
    text-align: left;
    padding: 18px 20px;
    gap: 16px;
    border-radius: 18px;
  }
  .hot-kodawari-num {
    width: 42px;
    height: 42px;
    font-size: 16px;
    flex: none;
  }
  .hot-kodawari-ptext {
    font-size: 14px;
  }
  .hot-kodawari-ptext br {
    display: none;
  }
  /* ★2026.08修正③ スマホも他のボタンと同じ 170px にそろえる */
  .hot-kodawari-btn {
    max-width: 170px !important;
  }
}


/* =========================================================
   ★2026.09.12 追加：写真（1枚）
   ・写真を差し替えるときは HTML の <img src="..."> のパスを変えてください
   ・大きさを変えたいとき → max-width の数字（880px）
   ・縦横比を変えたいとき → aspect-ratio（16 / 8）。正方形に近くしたいなら 4 / 3
========================================================= */
.hot-kodawari-photo {
  max-width: 880px;       /* ← 写真の最大幅 */
  margin: 0 auto 44px;
  padding: 0;
  position: relative;
}
.hot-kodawari-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;     /* ← 縦横比 */
  object-fit: cover;
  border-radius: 26px;
  border: 3px solid #fffaee;
  box-shadow: 0 10px 0 rgba(122, 69, 38, .22),
              0 20px 40px rgba(74, 47, 34, .18);
}
/* 写真のキャプション（HTMLに <figcaption> を足した場合のみ表示） */
.hot-kodawari-photo figcaption {
  margin-top: 14px;
  font-family: var(--font-serif);
  color: #7a4526;
  font-size: 14px;
  letter-spacing: .06em;
}

@media (max-width: 992px) {
  .hot-kodawari-photo {
    margin-bottom: 30px;
  }
  .hot-kodawari-photo img {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }
}

/* Block: image_grid / sec_1786528334209 */
/* =========================================================
   15 TOP 画像グリッド（復元用・デザイン変更なし）
   2026.08.25

   ▼▼ 貼り付け先 ▼▼
     TOPページ（index.php）→ 上から6番目「画像グリッド」ブロック（sec_1786528334209）
     ＝ 写真が4列×2段に並んでいるセクション
     → 右側の「セクション個別CSS」の欄

   ─────────────────────────────────────────
   ■ これは何のファイル？
   ─────────────────────────────────────────
   このブロックのCSSに、誤って「04_TOP_ギャラリーボタン.css」が
   貼られてしまい、元の指定（295行）が消えています。
   その結果、写真グリッドの背景・余白・角丸などが全部外れて
   背景が黒いまま表示されています。

   このファイルは、8/25の修正作業を始める前の元のCSSそのものです。
   今回のクライアント修正による変更は入っていません（元に戻すだけ）。

   ※ この欄の中身を全部消して、まるごと貼り替えてください。
========================================================= */


/* =========================================================
   「ほっと。」TOPページ｜画像グリッド（ギャラリー）CSS 完全版
   貼り付け先：
   TOPページ → 画像グリッド（複数画像）→ ブロック個別CSS

   この欄のCSSをすべて消してから、
   下記をまるごと貼り付けてください。
========================================================= */

/* セクション全体 */
.image-grid-section {
  position: relative !important;
  overflow: hidden !important;
  padding: 104px 28px !important;
  color: #4a2f22 !important;
  background-color: #fffaee !important;
  background-image:
    radial-gradient(rgba(122, 69, 38, 0.11) 1.3px, transparent 1.3px) !important;
  background-size: 18px 18px !important;
}

/* ギャラリーの背景装飾 */
.image-grid-section::before,
.image-grid-section::after {
  position: absolute;
  z-index: 0;
  display: block;
  color: rgba(249, 200, 38, 0.28);
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(82px, 12vw, 180px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.image-grid-section::before {
  content: "GALLERY";
  top: 22px;
  left: -12px;
}

.image-grid-section::after {
  content: "ほっと。";
  right: -18px;
  bottom: 18px;
  color: rgba(122, 69, 38, 0.08);
  font-size: clamp(74px, 10vw, 150px);
}

/* 写真エリア */
.image-grid-container {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

/* 見出しを設定した場合のみ表示されます */
.image-grid-header {
  max-width: 760px !important;
  margin: 0 auto 42px !important;
  text-align: center !important;
}

.image-grid-title {
  position: relative;
  display: inline-block;
  margin: 0 !important;
  padding-bottom: 18px;
  color: #7a4526 !important;
  font-family: var(--font-serif, "Shippori Mincho", serif) !important;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
}

.image-grid-title::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 62px;
  height: 4px;
  border-radius: 999px;
  background: #f9c826;
  content: "";
  transform: translateX(-50%);
}

.image-grid-desc {
  margin: 18px 0 0 !important;
  color: #7a4526 !important;
  font-family: var(--font-serif, "Shippori Mincho", serif) !important;
  font-size: 14px !important;
  line-height: 2 !important;
  letter-spacing: 0.08em !important;
}

/* 画像の並び */
.image-grid {
  display: grid !important;
  gap: 18px !important;
}

/* PCの列数設定 */
.image-grid-pc-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

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

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

/* 写真カード */
.image-grid-item {
  position: relative;
  overflow: hidden !important;
  border: 3px solid #fffaee;
  border-radius: 18px !important;
  background: #f3e5ce;
  box-shadow:
    0 7px 0 rgba(122, 69, 38, 0.24),
    0 15px 26px rgba(74, 47, 34, 0.14) !important;
  transform: translateZ(0);
  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease !important;
}

/* 写真の上にかかる、控えめなレモン色の光 */
.image-grid-item::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(249, 200, 38, 0.13),
    transparent 45%,
    rgba(122, 69, 38, 0.08)
  );
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.image-grid-item:hover {
  z-index: 1;
  box-shadow:
    0 10px 0 rgba(122, 69, 38, 0.28),
    0 20px 34px rgba(74, 47, 34, 0.22) !important;
  transform: translateY(-7px) rotate(-0.5deg);
}

.image-grid-item:hover::after {
  opacity: 1;
}

.image-grid-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  transition: transform 0.55s ease !important;
}

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

/* 画像の形を「角丸」に設定している場合 */
.image-grid-shape-rounded .image-grid-item img {
  border-radius: 0 !important;
}

/* 画像の形を「四角」に設定している場合 */
.image-grid-shape-square .image-grid-item img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* 画像の形を「丸」に設定している場合も、サイトでは角丸カードとして統一 */
.image-grid-shape-circle .image-grid-item {
  border-radius: 18px !important;
}

.image-grid-shape-circle .image-grid-item img {
  border-radius: 0 !important;
}

/* 画像の形を「元のまま」に設定している場合 */
.image-grid-shape-free .image-grid-item img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* 画像未登録時 */
.image-grid-empty {
  padding: 40px 20px !important;
  border: 1px dashed rgba(122, 69, 38, 0.45) !important;
  border-radius: 16px !important;
  color: #7a4526 !important;
  background: rgba(255, 250, 238, 0.72) !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* タブレット */
@media (max-width: 992px) {
  .image-grid-section {
    padding: 84px 22px !important;
  }

  .image-grid {
    gap: 14px !important;
  }

  .image-grid-item {
    border-radius: 15px !important;
    border-width: 2px !important;
    box-shadow:
      0 5px 0 rgba(122, 69, 38, 0.22),
      0 12px 22px rgba(74, 47, 34, 0.12) !important;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .image-grid-section {
    padding: 68px 14px 74px !important;
    background-size: 16px 16px !important;
  }

  .image-grid-section::before {
    top: 12px;
    left: -6px;
    font-size: 55px;
  }

  .image-grid-section::after {
    right: -8px;
    bottom: 12px;
    font-size: 56px;
  }

  .image-grid-header {
    margin-bottom: 30px !important;
  }

  .image-grid-title {
    padding-bottom: 14px;
    font-size: 1.55rem !important;
  }

  .image-grid-title::after {
    width: 48px;
    height: 3px;
  }

  .image-grid-desc {
    margin-top: 14px !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
  }

  .image-grid {
    gap: 10px !important;
  }

  .image-grid-sp-1 {
    grid-template-columns: 1fr !important;
  }

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

  .image-grid-item {
    border-radius: 12px !important;
    box-shadow:
      0 4px 0 rgba(122, 69, 38, 0.22),
      0 9px 16px rgba(74, 47, 34, 0.12) !important;
  }

  .image-grid-item:hover {
    transform: none;
  }
}

/* Block: custom_html / sec_1786528422713 */
/* =========================================================
   「ほっと。」TOPページ｜ギャラリー画像リンク CSS 完全版
   貼り付け先：
   TOPページ → カスタムHTML → ブロック個別CSS
========================================================= */

/* 画像グリッドと同じ背景に統一 */
.custom-html-wrapper:has(.hot-gallery-image-link),
.custom-html-wrapper:has(.hot-gallery-image-link) .custom-html-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #fffaee !important;
  background-image:
    radial-gradient(rgba(122, 69, 38, 0.11) 1.3px, transparent 1.3px) !important;
  background-size: 18px 18px !important;
}

/* 画像リンクを置く余白 */
.custom-html-wrapper:has(.hot-gallery-image-link) {
  padding: 0 20px 54px !important;
}

/* 中央配置 */
.custom-html-wrapper:has(.hot-gallery-image-link) .custom-html-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 小さな画像ボタン */
.hot-gallery-image-link {
  display: block !important;
  width: 190px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  line-height: 0 !important;
  background: transparent !important;
  transition: transform 0.25s ease, filter 0.25s ease !important;
}

.hot-gallery-image-link img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}

.hot-gallery-image-link:hover {
  filter: brightness(1.06);
  transform: translateY(-3px);
}

.hot-gallery-image-link:focus-visible {
  outline: 3px solid #f9c826 !important;
  outline-offset: 5px !important;
}

/* スマホ */
@media (max-width: 768px) {
  .custom-html-wrapper:has(.hot-gallery-image-link),
  .custom-html-wrapper:has(.hot-gallery-image-link) .custom-html-inner {
    background-size: 16px 16px !important;
  }

  .custom-html-wrapper:has(.hot-gallery-image-link) {
    padding: 0 14px 42px !important;
  }

  .hot-gallery-image-link {
    width: 150px !important;
  }

  .hot-gallery-image-link:hover {
    transform: none !important;
  }
}

/* Block: image_banner / sec_1789046132541 */
/* =========================================================
   「ほっと。」TOPページ
   Instagram画像リンクバナー CSS 完全版
   周囲と同じクリーム背景
========================================================= */

/* Instagramセクション全体 */
#sec_1789046132541.image-banner-section {
  width: 100% !important;
  margin: 0 !important;
  padding: 64px 20px 58px !important;
  box-sizing: border-box !important;
  text-align: center !important;

  background-color: #fffaee !important;
  background-image:
    radial-gradient(
      circle,
      rgba(122, 69, 38, 0.11) 1.3px,
      transparent 1.4px
    ) !important;
  background-size: 18px 18px !important;

  color: #754326 !important;
}

/* 内側 */
#sec_1789046132541 .image-banner-container {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

/* 見出し部分 */
#sec_1789046132541 .image-banner-header {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto 32px !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
}

/* Instagram見出し */
#sec_1789046132541 .image-banner-title {
  margin: 0 0 18px !important;
  color: #754326 !important;

  font-family:
    "Shippori Mincho",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif !important;

  font-size: clamp(34px, 4vw, 48px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
}

/* 説明文 */
#sec_1789046132541 .image-banner-desc {
  margin: 0 !important;
  color: #684839 !important;

  font-family:
    "Shippori Mincho",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif !important;

  font-size: 16px !important;
  line-height: 2 !important;
  letter-spacing: 0.04em !important;
  opacity: 1 !important;
}

/* Instagram画像リンク */
#sec_1789046132541 .banner-link-wrap {
  display: block !important;
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;

  overflow: hidden !important;
  border-radius: 8px !important;
  background: transparent !important;

  line-height: 0 !important;
  text-decoration: none !important;

  transition:
    transform 0.25s ease,
    filter 0.25s ease !important;
}

/* Instagramボタン画像 */
#sec_1789046132541 .custom-banner-img {
  display: block !important;
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* マウスを乗せたとき */
#sec_1789046132541 .banner-link-wrap:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-3px) !important;
}

/* キーボード操作 */
#sec_1789046132541 .banner-link-wrap:focus-visible {
  outline: 3px solid #f9c826 !important;
  outline-offset: 5px !important;
}

/* スマホ */
@media (max-width: 768px) {
  #sec_1789046132541.image-banner-section {
    padding: 44px 14px 42px !important;
    background-size: 16px 16px !important;
  }

  #sec_1789046132541 .image-banner-header {
    margin-bottom: 26px !important;
  }

  #sec_1789046132541 .image-banner-title {
    font-size: 32px !important;
    letter-spacing: 0.1em !important;
  }

  #sec_1789046132541 .image-banner-desc {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }

  #sec_1789046132541 .banner-link-wrap,
  #sec_1789046132541 .custom-banner-img {
    width: 150px !important;
    max-width: 150px !important;
  }

  #sec_1789046132541 .banner-link-wrap {
    border-radius: 7px !important;
  }

  #sec_1789046132541 .custom-banner-img {
    border-radius: 7px !important;
  }

  #sec_1789046132541 .banner-link-wrap:hover {
    transform: none !important;
  }
}

/* Block: store_info / sec_1786528483546 */
/* =========================================================
   店舗案内（store_info）｜完全版
   ========================================================= */

.store-info-section {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(72px, 8vw, 112px) 24px !important;
  color: #4d2f20 !important;

  /* 横長の刺繍背景 */
  background-color: #fffaee !important;
  background-image: url("/image/assets/asset_20260812214214_6a7c6a2685999.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* 以前の背景装飾を無効化 */
.store-info-section::before,
.store-info-section::after {
  content: none !important;
  display: none !important;
}

.store-info-section .store-info-container {
  position: relative !important;
  z-index: 1 !important;
  width: min(100%, 900px) !important;
  margin: 0 auto !important;
}

.store-info-section .store-info-header {
  margin: 0 auto 30px !important;
  text-align: center !important;
}

.store-info-section .store-info-title {
  margin: 0 0 12px !important;
  color: #754326 !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

.store-info-section .store-info-desc {
  margin: 0 !important;
  color: #694a38 !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

.store-info-section .store-info-layout,
.store-info-section .store-info-layout.has-image {
  display: block !important;
}

/* 右側などに別画像として出ないようにする */
.store-info-section .store-info-image {
  display: none !important;
}

.store-info-section .store-info-table-wrap {
  overflow: hidden !important;
  border: 2px solid #8b4d29 !important;
  border-radius: 22px !important;
  background: rgba(255, 253, 246, 0.94) !important;
  box-shadow: 0 10px 0 rgba(91, 48, 26, 0.18) !important;
}

.store-info-section .store-info-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

.store-info-section .store-info-table th,
.store-info-section .store-info-table td {
  padding: 20px 24px !important;
  border: 0 !important;
  border-bottom: 1px dashed rgba(127, 73, 41, 0.34) !important;
  text-align: left !important;
  vertical-align: middle !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.store-info-section .store-info-table th {
  width: 150px !important;
  color: #7a4024 !important;
  background: #fff0bf !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
}

.store-info-section .store-info-table td {
  color: #55392b !important;
  background: rgba(255, 253, 246, 0.9) !important;
}

/* 駐車場：なし の行を非表示 */
.store-info-section .store-info-table tbody tr:last-child {
  display: none !important;
}

.store-info-section .store-info-table tbody tr:nth-last-child(2) th,
.store-info-section .store-info-table tbody tr:nth-last-child(2) td {
  border-bottom: 0 !important;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .store-info-section {
    padding: 58px 16px !important;
    background-position: right center !important;
    background-size: auto 100% !important;
  }

  .store-info-section .store-info-table-wrap {
    border-radius: 16px !important;
    box-shadow: 0 7px 0 rgba(91, 48, 26, 0.16) !important;
  }

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

  .store-info-section .store-info-table th {
    width: 92px !important;
    letter-spacing: 0.04em !important;
  }
}

/* Block: custom_html / sec_1786528503786 */
/* =========================================================
   TOPページ｜店舗案内・画像リンクボタン 完全版
   PC・スマホ対応／黒い帯なし
   ========================================================= */

/* ボタンがある店舗案内だけ、配置用の余白を確保 */
.store-info-section:has(
  + .custom-html-wrapper .hot-store-image-buttons
) {
  padding-bottom: 130px !important;
}

/* ボタンブロック自体は高さを持たせない */
.custom-html-wrapper:has(.hot-store-image-buttons) {
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  max-width: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.custom-html-wrapper:has(.hot-store-image-buttons)::before,
.custom-html-wrapper:has(.hot-store-image-buttons)::after {
  content: none !important;
  display: none !important;
}

.custom-html-wrapper:has(.hot-store-image-buttons) .custom-html-inner {
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  max-width: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ボタンを店舗案内背景の下部に配置 */
.custom-html-wrapper .hot-store-image-buttons {
  position: absolute !important;
  right: auto !important;
  bottom: 28px !important;
  left: 50% !important;
  z-index: 30 !important;

  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;

  width: max-content !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
}

/* ボタン本体 */
.custom-html-wrapper
  .custom-html-inner
  a.hot-store-image-button {
  display: block !important;
  flex: 0 0 190px !important;
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 0 !important;
  text-decoration: none !important;
  transition:
    filter 0.25s ease,
    translate 0.25s ease !important;
}

/* ボタン画像 */
.custom-html-wrapper
  .custom-html-inner
  a.hot-store-image-button img {
  display: block !important;
  width: 190px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

@media (hover: hover) {
  .custom-html-wrapper
    .custom-html-inner
    a.hot-store-image-button:hover {
    filter: brightness(1.06) !important;
    translate: 0 -3px !important;
  }
}

.custom-html-wrapper
  .custom-html-inner
  a.hot-store-image-button:focus-visible {
  outline: 3px solid #f9c826 !important;
  outline-offset: 5px !important;
}

/* =========================================================
   スマホ
   表の下にボタン専用の余白を確保
   ========================================================= */

@media screen and (max-width: 768px) {
  .store-info-section:has(
    + .custom-html-wrapper .hot-store-image-buttons
  ) {
    /* ボタンと表が重ならないよう下側を広げる */
    padding-bottom: 155px !important;
  }

  .custom-html-wrapper .hot-store-image-buttons {
    bottom: 24px !important;
    gap: 8px !important;
    max-width: calc(100vw - 20px) !important;
  }

  .custom-html-wrapper
    .custom-html-inner
    a.hot-store-image-button {
    flex: 0 1 142px !important;
    width: min(142px, calc(50vw - 15px)) !important;
    max-width: 142px !important;
  }

  .custom-html-wrapper
    .custom-html-inner
    a.hot-store-image-button img {
    width: 100% !important;
    max-width: 142px !important;
  }
}

/* Block: gmap / sec_1786528524630 */
/* =========================================================
   Googleマップ｜完全版
   トップページ全体と同じクリーム・ドット背景
   ========================================================= */

.gmap-section {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(70px, 8vw, 110px) 24px !important;
  color: #55392b !important;

  background-color: #fffaee !important;
  background-image:
    radial-gradient(rgba(123, 72, 40, 0.12) 1.3px, transparent 1.3px) !important;
  background-size: 18px 18px !important;
}

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

.gmap-section .gmap-container {
  width: min(100%, 1080px) !important;
  margin: 0 auto !important;
}

.gmap-section .gmap-header {
  width: min(100%, 760px) !important;
  margin: 0 auto 32px !important;
  text-align: center !important;
}

.gmap-section .gmap-title {
  margin: 0 0 16px !important;
  color: #754326 !important;
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4 !important;
}

.gmap-section .gmap-title::after {
  content: "" !important;
  display: block !important;
  width: 58px !important;
  height: 4px !important;
  margin: 18px auto 0 !important;
  border-radius: 999px !important;
  background: #ffc928 !important;
}

.gmap-section .gmap-desc {
  margin: 0 !important;
  color: #694a38 !important;
  font-family: "Shippori Mincho", "Yu Mincho", serif !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.04em !important;
}

/* 地図の囲み */
.gmap-section .gmap-frame-wrap {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border: 3px solid #fffaf0 !important;
  border-radius: 22px !important;
  background: #f7e8ba !important;
  box-shadow:
    0 10px 0 rgba(91, 48, 26, 0.18),
    0 0 0 2px #8b4d29 !important;
}

.gmap-section .gmap-frame-wrap iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.gmap-section .gmap-placeholder {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  padding: 24px !important;
  color: #754326 !important;
  font-family: "Shippori Mincho", "Yu Mincho", serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  text-align: center !important;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .gmap-section {
    padding: 60px 16px 70px !important;
  }

  .gmap-section .gmap-header {
    margin-bottom: 24px !important;
  }

  .gmap-section .gmap-title {
    font-size: 30px !important;
    letter-spacing: 0.1em !important;
  }

  .gmap-section .gmap-desc {
    font-size: 13px !important;
  }

  .gmap-section .gmap-frame-wrap {
    aspect-ratio: 4 / 3 !important;
    border-radius: 16px !important;
    box-shadow:
      0 6px 0 rgba(91, 48, 26, 0.16),
      0 0 0 2px #8b4d29 !important;
  }
}


/* =========================================================
   Page: menu / メニュー
========================================================= */

/* Block: hero_page / sec_1782110792533 */
.page-hero-wrapper {
  position: relative;
  min-height: 360px;
  padding: 150px 20px 90px;
  text-align: center;
  color: var(--text-main);
  background-size: cover;
  background-position: center;
}
.page-hero-wrapper::after, .ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,23,24,.82), rgba(31,47,48,.46));
}
.ph-container { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ph-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--gold-light); letter-spacing: .16em; }
.ph-desc { margin-top: 16px; color: var(--text-sub); font-size: 14px; line-height: 2; }
/* =========================================================
   「ほっと。」こだわりページ 走ってくるアニメーション  ＜完全版＞

   ▼▼ 貼り付け先 ▼▼
     FluxCore Pro 管理画面
     → こだわりページ（courses.php）
     → 左のブロック一覧から「下層ページ共通ヒーロー」を選択
     → 右側の「セクション個別CSS」の欄
     → 今入っている page-hero.css の中身の【いちばん下】に
       このファイルの中身を追記してください

   ※ 追記です。今入っているCSSは消さないでください。
   ※ 貼る場所はどのブロックでも動きますが、こだわりページの
      ブロックにまとめておくと管理しやすいので上記を推奨します。
   ※ PHP・HTMLは一切さわっていません。CSSだけで完結します。
   ※ JavaScriptの追加も不要です（テーマにもともと入っている
      スクロール検知の仕組みをそのまま利用しています）。

   ─────────────────────────────────────────
   ■ どんな動きになるか
   ─────────────────────────────────────────
   スクロールして各セクションが画面に入るたびに、
   文字ブロックと写真が右からシュッと走り込んできて、
   バイクが止まるときのように軽くゆれてから止まります。

   ・右から一気に入ってくる（0.85秒）
   ・行き過ぎて少し戻る → もう一度小さくゆれる → 静止
   ・入ってくる瞬間に、うしろへ流れるスピードライン（3本）
   ・写真は文字より少し遅れて到着（バイクが順に着くイメージ）
   ・看板メニューの2枚のカードも順番に到着

   対象は、こだわり①②③と看板メニューの4セクションです。

   ─────────────────────────────────────────
   ■ 動きを調整したいとき
   ─────────────────────────────────────────
   ・入ってくる距離   → --ride-x の数字（大きいほど遠くから）
   ・スピード         → animation の 0.85s / 0.95s の数字
   ・写真の遅れ       → .14s の数字
   ・ゆれの大きさ     → @keyframes 内の translateX の数字
   ・スピードライン不要 → 「スピードライン」の2ブロックを削除

   ※ パソコンの「視差効果を減らす」設定をONにしている方には、
     アニメーションなしで表示されます（酔い防止のため）。
========================================================= */


/* =========================================================
   セクション自体の上下スライドを止める
   （中身を横に走らせるので、動きが混ざらないように）
========================================================= */
.concept-section.fade-up {
  transform: none !important;
}
.custom-html-wrapper:has(.hot-sig).fade-up {
  transform: none !important;
}


/* =========================================================
   走ってくる本体
========================================================= */
.concept-section .concept-content,
.concept-section .concept-img-wrapper,
.custom-html-wrapper .hot-sig-head,
.custom-html-wrapper .hot-sig-card {
  opacity: 0;
  --ride-x: 110px;          /* どのくらい右から走ってくるか */
  will-change: transform, opacity;
}

/* 文字ブロック（先に到着） */
.concept-section.is-visible .concept-content,
.custom-html-wrapper.is-visible .hot-sig-head {
  animation: hotRideIn .85s cubic-bezier(.2, .85, .25, 1) both;
}

/* 写真（少し遅れて到着） */
.concept-section.is-visible .concept-img-wrapper,
.custom-html-wrapper.is-visible .hot-sig-card {
  animation: hotRideIn .95s cubic-bezier(.2, .85, .25, 1) .14s both;
}

/* 看板メニューの2枚目はさらに遅れて到着 */
.custom-html-wrapper.is-visible .hot-sig-card:nth-child(2) {
  animation-delay: .26s;
}

/* 走り込み → 行き過ぎ → ゆれて静止 */
@keyframes hotRideIn {
  0%   { opacity: 0; transform: translateX(var(--ride-x, 110px)) rotate(2.2deg); }
  50%  { opacity: 1; transform: translateX(-14px) rotate(-1.1deg); }
  72%  {             transform: translateX(6px)   rotate(.5deg); }
  88%  {             transform: translateX(-2px)  rotate(-.2deg); }
  100% { opacity: 1; transform: translateX(0)     rotate(0deg); }
}


/* =========================================================
   スピードライン（走ってきた勢いの線）
========================================================= */
.concept-section .concept-content {
  position: relative;
}
.concept-section .concept-content::before {
  display: block !important;
  content: "";
  position: absolute;
  top: 26px;
  right: -6px;
  width: 150px;
  height: 46px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to left, rgba(249, 200, 38, .95), rgba(249, 200, 38, 0)) left 0 top 4px  / 100% 5px no-repeat,
    linear-gradient(to left, rgba(122, 69, 38, .45), rgba(122, 69, 38, 0))   left 0 top 20px / 72%  4px no-repeat,
    linear-gradient(to left, rgba(249, 200, 38, .75), rgba(249, 200, 38, 0)) left 0 top 34px / 88%  4px no-repeat;
}
.concept-section.is-visible .concept-content::before {
  animation: hotSpeedLine .75s ease-out both;
}
@keyframes hotSpeedLine {
  0%   { opacity: 0; transform: translateX(70px)  scaleX(.35); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50px) scaleX(1.45); }
}


/* =========================================================
   スマホ（768px以下）
   画面が狭いので、走ってくる距離を短くします
========================================================= */
@media (max-width: 768px) {
  .concept-section .concept-content,
  .concept-section .concept-img-wrapper,
  .custom-html-wrapper .hot-sig-head,
  .custom-html-wrapper .hot-sig-card {
    --ride-x: 56px;
  }
  .concept-section .concept-content::before {
    width: 96px;
    right: 0;
  }
}


/* =========================================================
   「視差効果を減らす」設定の方にはアニメーションなしで表示
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .concept-section .concept-content,
  .concept-section .concept-img-wrapper,
  .custom-html-wrapper .hot-sig-head,
  .custom-html-wrapper .hot-sig-card {
    opacity: 1;
    animation: none !important;
  }
  .concept-section .concept-content::before {
    display: none !important;
  }
}

/* Block: menu_category_grid / sec_1782110885267 */
/* =========================================================
   お品書きカテゴリーグリッド｜完全版
   背景画像は「背景設定（共通）」を使用
   オーバーレイなし・背景を拡大しすぎない設定
   ========================================================= */

/* FluxCoreの自動coverを解除して、背景画像を横幅に合わせて表示 */
.menu-grid-section {
  --fc-bg-overlay: rgba(255, 250, 238, 0) !important;

  position: relative !important;
  overflow: hidden !important;
  padding: clamp(72px, 8vw, 120px) 24px !important;
  background-color: #fffaee !important;

  /*
    1枚目：FluxCoreが自動で入れる透明グラデーション
    2枚目：背景設定（共通）で選択した画像
  */
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center top !important;
  background-size: 100% 100%, 100% auto !important;

  color: #55392b !important;
}

/* 背景の上に追加の色膜は重ねない */
.menu-grid-section::before,
.menu-grid-section::after {
  content: none !important;
  display: none !important;
}

/* 見出し */
.menu-grid-section .menu-section-header {
  width: min(100%, 880px) !important;
  margin: 0 auto 56px !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

.menu-grid-section .menu-main-title {
  margin: 0 0 18px !important;
  color: #754326 !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.35 !important;
}

.menu-grid-section .menu-main-title::after {
  content: "" !important;
  display: block !important;
  width: 58px !important;
  height: 4px !important;
  margin: 20px auto 0 !important;
  border-radius: 999px !important;
  background: #ffc928 !important;
}

.menu-grid-section .menu-sub-text {
  max-width: 680px !important;
  margin: 0 auto !important;
  color: #604233 !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 2.05 !important;
  letter-spacing: 0.05em !important;
}

/* カテゴリー全体 */
.menu-grid-section .menu-cat-container {
  width: min(100%, 1080px) !important;
  margin: 0 auto !important;
}

.menu-grid-section .menu-cat-block {
  margin: 0 0 70px !important;
  padding: 0 !important;
}

.menu-grid-section .menu-cat-block:last-child {
  margin-bottom: 0 !important;
}

.menu-grid-section .menu-cat-header {
  margin: 0 0 28px !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(117, 67, 38, 0.42) !important;
  background: transparent !important;
}

.menu-grid-section .menu-cat-name {
  margin: 0 0 8px !important;
  color: #754326 !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: clamp(23px, 2.5vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.45 !important;
}

.menu-grid-section .menu-cat-desc {
  margin: 0 !important;
  color: #694a38 !important;
  font-family: "Shippori Mincho", "Yu Mincho", serif !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

/* 商品一覧：PCは2列 */
.menu-grid-section .menu-items-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* 商品カード */
.menu-grid-section .menu-item-card {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 14px !important;
  border: 2px solid #8b4d29 !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 246, 0.96) !important;
  box-shadow: 0 7px 0 rgba(91, 48, 26, 0.18) !important;
  color: #55392b !important;
}

.menu-grid-section .menu-item-card.no-image {
  display: block !important;
  padding: 22px 24px !important;
}

.menu-grid-section .mi-img-box {
  width: 132px !important;
  height: 132px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #f7e8ba !important;
}

.menu-grid-section .mi-img-box img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
}

.menu-grid-section .mi-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.menu-grid-section .mi-title {
  margin: 2px 0 8px !important;
  color: #754326 !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.04em !important;
}

.menu-grid-section .mi-text {
  margin: 0 0 14px !important;
  color: #694a38 !important;
  font-family: "Shippori Mincho", "Yu Mincho", serif !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}

.menu-grid-section .mi-meta {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  min-height: 26px !important;
  margin-top: auto !important;
  padding: 11px 0 0 !important;
  border: 0 !important;
  border-top: 1px dashed rgba(127, 73, 41, 0.36) !important;
}

.menu-grid-section .mi-price,
.menu-grid-section .price-in {
  color: #a64624 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

.menu-grid-section .mi-sold-out {
  background: rgba(91, 48, 26, 0.78) !important;
  color: #fffaf0 !important;
  font-family: "Montserrat", sans-serif !important;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .menu-grid-section {
    padding: 60px 16px 72px !important;

    /* スマホでも画像全体を横幅に合わせ、拡大しない */
    background-position: center center, center top !important;
    background-size: 100% 100%, 100% auto !important;
  }

  .menu-grid-section .menu-section-header {
    margin-bottom: 42px !important;
  }

  .menu-grid-section .menu-main-title {
    font-size: 31px !important;
    letter-spacing: 0.1em !important;
  }

  .menu-grid-section .menu-sub-text {
    font-size: 13px !important;
    line-height: 1.95 !important;
  }

  .menu-grid-section .menu-cat-block {
    margin-bottom: 52px !important;
  }

  .menu-grid-section .menu-cat-header {
    margin-bottom: 20px !important;
  }

  .menu-grid-section .menu-cat-name {
    font-size: 23px !important;
  }

  .menu-grid-section .menu-cat-desc {
    font-size: 13px !important;
  }

  .menu-grid-section .menu-items-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .menu-grid-section .menu-item-card {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 12px !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 0 rgba(91, 48, 26, 0.16) !important;
  }

  .menu-grid-section .mi-img-box {
    width: 104px !important;
    height: 104px !important;
    border-radius: 10px !important;
  }

  .menu-grid-section .mi-title {
    margin-top: 0 !important;
    font-size: 16px !important;
  }

  .menu-grid-section .mi-text {
    margin-bottom: 10px !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  .menu-grid-section .mi-price,
  .menu-grid-section .price-in {
    font-size: 17px !important;
  }

  .menu-grid-section .menu-item-card.no-image {
    padding: 18px !important;
  }
}

/* Block: menu_category_grid / sec_1786520773183 */
/* =========================================================
   お品書きカテゴリーグリッド｜完全版
   背景画像は「背景設定（共通）」を使用
   オーバーレイなし・背景を拡大しすぎない設定
   ========================================================= */

/* FluxCoreの自動coverを解除して、背景画像を横幅に合わせて表示 */
.menu-grid-section {
  --fc-bg-overlay: rgba(255, 250, 238, 0) !important;

  position: relative !important;
  overflow: hidden !important;
  padding: clamp(72px, 8vw, 120px) 24px !important;
  background-color: #fffaee !important;

  /*
    1枚目：FluxCoreが自動で入れる透明グラデーション
    2枚目：背景設定（共通）で選択した画像
  */
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center top !important;
  background-size: 100% 100%, 100% auto !important;

  color: #55392b !important;
}

/* 背景の上に追加の色膜は重ねない */
.menu-grid-section::before,
.menu-grid-section::after {
  content: none !important;
  display: none !important;
}

/* 見出し */
.menu-grid-section .menu-section-header {
  width: min(100%, 880px) !important;
  margin: 0 auto 56px !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

.menu-grid-section .menu-main-title {
  margin: 0 0 18px !important;
  color: #754326 !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.35 !important;
}

.menu-grid-section .menu-main-title::after {
  content: "" !important;
  display: block !important;
  width: 58px !important;
  height: 4px !important;
  margin: 20px auto 0 !important;
  border-radius: 999px !important;
  background: #ffc928 !important;
}

.menu-grid-section .menu-sub-text {
  max-width: 680px !important;
  margin: 0 auto !important;
  color: #604233 !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 2.05 !important;
  letter-spacing: 0.05em !important;
}

/* カテゴリー全体 */
.menu-grid-section .menu-cat-container {
  width: min(100%, 1080px) !important;
  margin: 0 auto !important;
}

.menu-grid-section .menu-cat-block {
  margin: 0 0 70px !important;
  padding: 0 !important;
}

.menu-grid-section .menu-cat-block:last-child {
  margin-bottom: 0 !important;
}

.menu-grid-section .menu-cat-header {
  margin: 0 0 28px !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(117, 67, 38, 0.42) !important;
  background: transparent !important;
}

.menu-grid-section .menu-cat-name {
  margin: 0 0 8px !important;
  color: #754326 !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: clamp(23px, 2.5vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.45 !important;
}

.menu-grid-section .menu-cat-desc {
  margin: 0 !important;
  color: #694a38 !important;
  font-family: "Shippori Mincho", "Yu Mincho", serif !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

/* 商品一覧：PCは2列 */
.menu-grid-section .menu-items-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* 商品カード */
.menu-grid-section .menu-item-card {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 14px !important;
  border: 2px solid #8b4d29 !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 246, 0.96) !important;
  box-shadow: 0 7px 0 rgba(91, 48, 26, 0.18) !important;
  color: #55392b !important;
}

.menu-grid-section .menu-item-card.no-image {
  display: block !important;
  padding: 22px 24px !important;
}

.menu-grid-section .mi-img-box {
  width: 132px !important;
  height: 132px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #f7e8ba !important;
}

.menu-grid-section .mi-img-box img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
}

.menu-grid-section .mi-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.menu-grid-section .mi-title {
  margin: 2px 0 8px !important;
  color: #754326 !important;
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.04em !important;
}

.menu-grid-section .mi-text {
  margin: 0 0 14px !important;
  color: #694a38 !important;
  font-family: "Shippori Mincho", "Yu Mincho", serif !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}

.menu-grid-section .mi-meta {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  min-height: 26px !important;
  margin-top: auto !important;
  padding: 11px 0 0 !important;
  border: 0 !important;
  border-top: 1px dashed rgba(127, 73, 41, 0.36) !important;
}

.menu-grid-section .mi-price,
.menu-grid-section .price-in {
  color: #a64624 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

.menu-grid-section .mi-sold-out {
  background: rgba(91, 48, 26, 0.78) !important;
  color: #fffaf0 !important;
  font-family: "Montserrat", sans-serif !important;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .menu-grid-section {
    padding: 60px 16px 72px !important;

    /* スマホでも画像全体を横幅に合わせ、拡大しない */
    background-position: center center, center top !important;
    background-size: 100% 100%, 100% auto !important;
  }

  .menu-grid-section .menu-section-header {
    margin-bottom: 42px !important;
  }

  .menu-grid-section .menu-main-title {
    font-size: 31px !important;
    letter-spacing: 0.1em !important;
  }

  .menu-grid-section .menu-sub-text {
    font-size: 13px !important;
    line-height: 1.95 !important;
  }

  .menu-grid-section .menu-cat-block {
    margin-bottom: 52px !important;
  }

  .menu-grid-section .menu-cat-header {
    margin-bottom: 20px !important;
  }

  .menu-grid-section .menu-cat-name {
    font-size: 23px !important;
  }

  .menu-grid-section .menu-cat-desc {
    font-size: 13px !important;
  }

  .menu-grid-section .menu-items-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .menu-grid-section .menu-item-card {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 12px !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 0 rgba(91, 48, 26, 0.16) !important;
  }

  .menu-grid-section .mi-img-box {
    width: 104px !important;
    height: 104px !important;
    border-radius: 10px !important;
  }

  .menu-grid-section .mi-title {
    margin-top: 0 !important;
    font-size: 16px !important;
  }

  .menu-grid-section .mi-text {
    margin-bottom: 10px !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  .menu-grid-section .mi-price,
  .menu-grid-section .price-in {
    font-size: 17px !important;
  }

  .menu-grid-section .menu-item-card.no-image {
    padding: 18px !important;
  }
}


/* =========================================================
   Page: courses / こだわり
========================================================= */

/* Block: hero_page / sec_1782110998212 */
/* =========================================================
   07 ページタイトル下の説明文
   2026.08.25 クライアント修正版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     こだわりページ（courses.php）→ 一番上の「ページヒーロー」ブロック（sec_1782110998212）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の修正内容（本文中の「★2026.08修正」が該当箇所です）
   ─────────────────────────────────────────
   1. ページタイトル下の説明文（.ph-desc）を 15px → 17px（スマホ 14px → 16px）
      ★ この指定は こだわり／メニュー／お知らせ／店舗案内 など、全ページのページタイトル下の説明文に効いています（元々そういう作りになっています）
========================================================= */

/* =========================================================
   「ほっと。」下層ページ共通ヒーロー用CSS  ＜完全版＞

   ▼▼ 貼り付け先 ▼▼
     FluxCore Pro 管理画面
     → こだわりページ（courses.php）
     → 左のブロック一覧から「下層ページ共通ヒーロー」を選択
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください。
   ※ 背景画像はブロックの設定で登録済みのものを使うので、
      このCSSに画像パスを書く必要はありません。
   ※ PHP・HTMLは一切さわっていません。CSSだけで完結します。

   ★ このCSSは「下層ページ共通ヒーロー」を使っている
     すべてのページ（こだわり／メニュー／ギャラリー／
     お知らせ／店舗案内）に一括で効きます。
     どれか1ページのブロックに貼れば全ページに反映されます。

   ─────────────────────────────────────────
   ■ 重要：サイドヘッダーの重なりを根本解決しました
   ─────────────────────────────────────────
   下層ページでは、左のブラウンのサイドヘッダー（高さ550px）が
   ページ見出し（高さ382px）より168pxも下まで伸びていて、
   次のセクションの内容が隠れてしまう状態でした。

   そこでヒーローの高さを620pxにして、サイドヘッダーが
   はみ出さないようにしました。これで下層ページすべての
   重なりが解消されます。

   あわせて、こだわり①に入れていた「重なり回避用の広い上余白」も
   不要になったため、このCSSの中で通常の余白（96px）に戻しています。
   こだわり①②のCSSはそのままで大丈夫です（触らないでください）。

   ─────────────────────────────────────────
   ■ デザインの内容
   ─────────────────────────────────────────
   ・元の暗い膜（黒っぽいグラデーション）を削除
   ・かわりに明るいクリームのベールをかけて、写真をやわらかく
   ・タイトルはブラウンの明朝体＋レモンの下線
   ・内容は左のサイドヘッダーを避けた位置に配置
   ・スマホでは高さ300pxのコンパクト表示に切り替わります

   --- 使用カラー ---
   ダークブラウン #4a2f22  タイトル
   ブラウン       #7a4526  説明文
   レモン         #f9c826  下線
   クリーム       #fffaee  ベール
========================================================= */


/* =========================================================
   ヒーロー全体
   高さ620px＝サイドヘッダー（550px）より高くして重なりを防ぐ
========================================================= */
.page-hero-wrapper {
  position: relative !important;
  min-height: 620px !important;
  /* 上150px / 右56px / 下96px / 左302px（左はサイドヘッダー250pxを避ける） */
  padding: 150px 56px 96px 302px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

/* 元テーマの暗いグラデーションを削除 */
.page-hero-wrapper::after {
  display: none !important;
}


/* =========================================================
   写真の上にかける明るいクリームのベール
   （数字を大きくすると白っぽく、小さくすると写真がはっきりします）
========================================================= */
.ph-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(255, 250, 238, .80),
    rgba(255, 250, 238, .76) 45%,
    rgba(255, 250, 238, .90)
  ) !important;
}


/* =========================================================
   見出し・説明文
========================================================= */
.ph-container {
  position: relative;
  z-index: 1;
  max-width: 820px !important;
  margin: 0 auto !important;
}

.ph-title {
  margin: 0 !important;
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
  color: #4a2f22 !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  letter-spacing: .14em !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 10px rgba(255, 250, 238, .9) !important;
}
/* タイトル下のレモンの線 */
.ph-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 84px;
  height: 5px;
  border-radius: 999px;
  background: #f9c826;
}

/* ※ この .ph-desc の指定は、こだわり以外のページ（メニュー／お知らせ／店舗案内など）の
   ページタイトル下の説明文にも効いています */
.ph-desc {
  margin-top: 22px !important;
  color: #7a4526 !important;
  font-family: var(--font-serif) !important;
  /* ★2026.08修正 本文が小さいというご指摘 → 15px から 17px に拡大 */
  font-size: 17px !important;
  line-height: 2 !important;
  letter-spacing: .06em !important;
  text-shadow: 0 2px 8px rgba(255, 250, 238, .9) !important;
}


/* =========================================================
   ヒーローを高くしたので、直後の「こだわり①」の
   重なり回避用の広い上余白を通常サイズに戻す
   （こだわり①のCSSは変更不要です）
========================================================= */
.page-hero-wrapper + .concept-section {
  padding-top: 96px !important;
}


/* =========================================================
   スマホ（992px以下）
   サイドヘッダーが無いので高さを抑え、
   上部の固定ヘッダーに文字が隠れない位置から始めます
========================================================= */
@media (max-width: 992px) {
  .page-hero-wrapper {
    min-height: 300px !important;
    padding: 120px 20px 60px !important;
  }
  .ph-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    padding-bottom: 16px;
  }
  .ph-title::after {
    width: 64px;
    height: 4px;
  }
  .ph-desc {
    margin-top: 16px !important;
    /* ★2026.08修正 本文が小さいというご指摘 → スマホは 14px から 16px に拡大 */
    font-size: 16px !important;
  }
}
/* =========================================================
   「ほっと。」こだわりページ 走ってくるアニメーション  ＜完全版＞

   ▼▼ 貼り付け先 ▼▼
     FluxCore Pro 管理画面
     → こだわりページ（courses.php）
     → 左のブロック一覧から「下層ページ共通ヒーロー」を選択
     → 右側の「セクション個別CSS」の欄
     → 今入っている page-hero.css の中身の【いちばん下】に
       このファイルの中身を追記してください

   ※ 追記です。今入っているCSSは消さないでください。
   ※ 貼る場所はどのブロックでも動きますが、こだわりページの
      ブロックにまとめておくと管理しやすいので上記を推奨します。
   ※ PHP・HTMLは一切さわっていません。CSSだけで完結します。
   ※ JavaScriptの追加も不要です（テーマにもともと入っている
      スクロール検知の仕組みをそのまま利用しています）。

   ─────────────────────────────────────────
   ■ どんな動きになるか
   ─────────────────────────────────────────
   スクロールして各セクションが画面に入るたびに、
   文字ブロックと写真が右からシュッと走り込んできて、
   バイクが止まるときのように軽くゆれてから止まります。

   ・右から一気に入ってくる（0.85秒）
   ・行き過ぎて少し戻る → もう一度小さくゆれる → 静止
   ・入ってくる瞬間に、うしろへ流れるスピードライン（3本）
   ・写真は文字より少し遅れて到着（バイクが順に着くイメージ）
   ・看板メニューの2枚のカードも順番に到着

   対象は、こだわり①②③と看板メニューの4セクションです。

   ─────────────────────────────────────────
   ■ 動きを調整したいとき
   ─────────────────────────────────────────
   ・入ってくる距離   → --ride-x の数字（大きいほど遠くから）
   ・スピード         → animation の 0.85s / 0.95s の数字
   ・写真の遅れ       → .14s の数字
   ・ゆれの大きさ     → @keyframes 内の translateX の数字
   ・スピードライン不要 → 「スピードライン」の2ブロックを削除

   ※ パソコンの「視差効果を減らす」設定をONにしている方には、
     アニメーションなしで表示されます（酔い防止のため）。
========================================================= */


/* =========================================================
   セクション自体の上下スライドを止める
   （中身を横に走らせるので、動きが混ざらないように）
========================================================= */
.concept-section.fade-up {
  transform: none !important;
}
.custom-html-wrapper:has(.hot-sig).fade-up {
  transform: none !important;
}


/* =========================================================
   走ってくる本体
========================================================= */
.concept-section .concept-content,
.concept-section .concept-img-wrapper,
.custom-html-wrapper .hot-sig-head,
.custom-html-wrapper .hot-sig-card {
  opacity: 0;
  --ride-x: 110px;          /* どのくらい右から走ってくるか */
  will-change: transform, opacity;
}

/* 文字ブロック（先に到着） */
.concept-section.is-visible .concept-content,
.custom-html-wrapper.is-visible .hot-sig-head {
  animation: hotRideIn .85s cubic-bezier(.2, .85, .25, 1) both;
}

/* 写真（少し遅れて到着） */
.concept-section.is-visible .concept-img-wrapper,
.custom-html-wrapper.is-visible .hot-sig-card {
  animation: hotRideIn .95s cubic-bezier(.2, .85, .25, 1) .14s both;
}

/* 看板メニューの2枚目はさらに遅れて到着 */
.custom-html-wrapper.is-visible .hot-sig-card:nth-child(2) {
  animation-delay: .26s;
}

/* 走り込み → 行き過ぎ → ゆれて静止 */
@keyframes hotRideIn {
  0%   { opacity: 0; transform: translateX(var(--ride-x, 110px)) rotate(2.2deg); }
  50%  { opacity: 1; transform: translateX(-14px) rotate(-1.1deg); }
  72%  {             transform: translateX(6px)   rotate(.5deg); }
  88%  {             transform: translateX(-2px)  rotate(-.2deg); }
  100% { opacity: 1; transform: translateX(0)     rotate(0deg); }
}


/* =========================================================
   スピードライン（走ってきた勢いの線）
========================================================= */
.concept-section .concept-content {
  position: relative;
}
.concept-section .concept-content::before {
  display: block !important;
  content: "";
  position: absolute;
  top: 26px;
  right: -6px;
  width: 150px;
  height: 46px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to left, rgba(249, 200, 38, .95), rgba(249, 200, 38, 0)) left 0 top 4px  / 100% 5px no-repeat,
    linear-gradient(to left, rgba(122, 69, 38, .45), rgba(122, 69, 38, 0))   left 0 top 20px / 72%  4px no-repeat,
    linear-gradient(to left, rgba(249, 200, 38, .75), rgba(249, 200, 38, 0)) left 0 top 34px / 88%  4px no-repeat;
}
.concept-section.is-visible .concept-content::before {
  animation: hotSpeedLine .75s ease-out both;
}
@keyframes hotSpeedLine {
  0%   { opacity: 0; transform: translateX(70px)  scaleX(.35); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50px) scaleX(1.45); }
}


/* =========================================================
   スマホ（768px以下）
   画面が狭いので、走ってくる距離を短くします
========================================================= */
@media (max-width: 768px) {
  .concept-section .concept-content,
  .concept-section .concept-img-wrapper,
  .custom-html-wrapper .hot-sig-head,
  .custom-html-wrapper .hot-sig-card {
    --ride-x: 56px;
  }
  .concept-section .concept-content::before {
    width: 96px;
    right: 0;
  }
}


/* =========================================================
   「視差効果を減らす」設定の方にはアニメーションなしで表示
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .concept-section .concept-content,
  .concept-section .concept-img-wrapper,
  .custom-html-wrapper .hot-sig-head,
  .custom-html-wrapper .hot-sig-card {
    opacity: 1;
    animation: none !important;
  }
  .concept-section .concept-content::before {
    display: none !important;
  }
}

/* Block: concept_split / sec_1786530325853 */
/* =========================================================
   08 こだわりページ こだわり01
   2026.08.25 クライアント修正版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     こだわりページ（courses.php）→ 1つ目の「コンセプト（左右分割）」ブロック（sec_1786530325853）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の修正内容（本文中の「★2026.08修正」が該当箇所です）
   ─────────────────────────────────────────
   1. 本文の文字サイズ 15px → 17px（スマホ 16px）
   2. 【不具合修正】先頭コメントの開き「/*」が抜けていて、直後の .concept-section の指定がまるごと無効になっていました（開きコメントを補いました）
========================================================= */

/* =========================================================
   「ほっと。」こだわり ①  ＜完全版＞
   ①カブ乗りが集う「カブの駅」

   ▼▼ 貼り付け先 ▼▼
     FluxCore Pro 管理画面
     → こだわりページ（courses.php）
     → 1つ目の「コンセプト（左右分割）」ブロック
     → 右側の「セクション個別CSS」の欄

   ★2026.08修正【不具合】
     このブロックのCSSは、先頭のコメントの開き「/*」が抜けていたため、
     直後の「.concept-section { ... }」の指定がまるごと無効になっていました。
     （同じ指定が②のブロックにも入っていたため、表示上は問題が出ていません）
     開きコメントを補って直しています。
   ─────────────────────────────────────────
─────────────────────────────────────────
   ■ ブロックに入力する内容（①のブロック）
   ─────────────────────────────────────────
   ・見出し上のラベル（eyebrow）
       01

   ・タイトル
       カブ乗りが集う「カブの駅」

   ・本文
       当店は、カブ好きの方が気軽に集まり、交流できる「カブの駅」をコンセプトにしています。
       ツーリングの休憩や待ち合わせの場所として、初めての方でもふらっと立ち寄れる居心地の良い空間づくりを大切にしています。
       カブを通じて人と人がつながる、そんな憩いの場所を目指しています。

   ・画像パス（この文字列をそのまま「画像パス」欄に貼ってください）
       image/assets/asset_20260717175905_6a59eed962fcf.webp
       ※「ほっと。」のカブ刺繍が入ったエプロンの写真です

   ・レイアウト左右反転（layout_reverse）
       OFF のまま（テキスト左・画像右）
       ※②は ON、③は OFF にすると左右交互になって綺麗です

   ─────────────────────────────────────────
   ■ デザインの内容
   ─────────────────────────────────────────
   ・テキストと画像を横並び（指示書の指定どおり）
   ・番号はレモン色の丸バッジ
   ・タイトルはブラウンの明朝体＋レモンの下線
   ・画像は角丸カード＋ブラウンの立体シャドウ
   ・背景はクリーム色＋うすいドット模様
   ・スマホでは自動で縦積み（テキスト→画像）に切り替わります

   ─────────────────────────────────────────
   ■ 上の余白について（重要）
   ─────────────────────────────────────────
   下層ページでは、左のサイドヘッダーがページ見出しより
   約170px下まで伸びています。そのままだと1つ目のブロックの
   番号バッジがサイドヘッダーの下に隠れてしまうため、
   1つ目だけ上の余白を190pxにしています。
   2つ目以降は自動的に96pxに戻ります。

   --- 使用カラー ---
   ブラウン       #7a4526  タイトル・枠線・影
   ダークブラウン #4a2f22  本文
   レモン         #f9c826  番号バッジ・下線
   クリーム       #fffaee  背景・画像のフチ
========================================================= */


/* =========================================================
   セクション全体（背景・余白）
========================================================= */
.concept-section {
  padding: 190px 20px 96px !important;
  background: #fffaee !important;
  /* うすいドット模様 */
  background-image: radial-gradient(rgba(122, 69, 38, .10) 1.5px, transparent 1.5px) !important;
  background-size: 18px 18px !important;
  color: #4a2f22 !important;
}

/* 2つ目・3つ目は上の余白を通常サイズに戻す */
.concept-section + .concept-section {
  padding-top: 96px !important;
}


/* =========================================================
   テキストと画像の横並び
========================================================= */
.concept-container {
  max-width: 1080px !important;
  margin: 0 auto !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr) !important;
  gap: 56px !important;
  align-items: center !important;
}
.concept-content {
  text-align: left !important;
}


/* =========================================================
   番号バッジ（01 / 02 / 03）
========================================================= */
.concept-content p.concept-eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 54px !important;
  height: 54px !important;
  margin: 0 0 18px !important;
  background: #f9c826 !important;
  color: #4a2f22 !important;
  border: 2px solid #7a4526 !important;
  border-radius: 50% !important;
  font-family: var(--font-en) !important;
  font-size: 20px !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 0 rgba(122, 69, 38, .3) !important;
  text-align: center !important;
}


/* =========================================================
   タイトル（レモンの下線つき）
========================================================= */
.concept-title,
.concept-content h2 {
  margin: 0 0 20px !important;
  color: #7a4526 !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem) !important;
  line-height: 1.5 !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  text-align: left !important;
  position: relative;
  padding-bottom: 16px;
}
.concept-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: #f9c826;
}


/* =========================================================
   本文
========================================================= */
.concept-text,
.concept-content p {
  color: #4a2f22 !important;
  font-family: var(--font-serif) !important;
  /* ★2026.08修正 本文が小さいというご指摘 → 15px から 17px に拡大 */
  font-size: 17px !important;
  line-height: 2.1 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}


/* =========================================================
   画像（角丸カード）
========================================================= */
.concept-img-wrapper {
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 3px solid #fffaee !important;
  background: #fffaee !important;
  box-shadow: 0 10px 0 rgba(122, 69, 38, .22),
              0 20px 40px rgba(74, 47, 34, .18) !important;
}
/* 元テーマの金色の内枠線を消す */
.concept-img-wrapper::before {
  display: none !important;
}
.concept-img-wrapper img,
.concept-img-wrapper video {
  aspect-ratio: 4 / 3 !important;
  filter: none !important;
}


/* =========================================================
   スマホ（992px以下）
   サイドヘッダーが無いので余白を戻し、縦積みにします
========================================================= */
@media (max-width: 992px) {
  .concept-section,
  .concept-section + .concept-section {
    padding: 60px 16px !important;
  }
  .concept-container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .concept-content {
    padding-left: 0 !important;
  }
  .concept-content p.concept-eyebrow {
    width: 46px !important;
    height: 46px !important;
    font-size: 17px !important;
    margin-bottom: 14px !important;
  }
  .concept-img-wrapper {
    border-radius: 20px !important;
  }
  .concept-img-wrapper img {
    aspect-ratio: 16 / 11 !important;
  }
}

/* =========================================================
   ★2026.08修正 スマホの本文サイズ（16px）
========================================================= */
@media (max-width: 992px) {
  .concept-text,
  .concept-content p {
    font-size: 16px !important;
    line-height: 2.0 !important;
  }
}

/* Block: concept_split / sec_1786530487148 */
/* =========================================================
   09 こだわりページ こだわり02
   2026.08.25 クライアント修正版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     こだわりページ（courses.php）→ 2つ目の「コンセプト（左右分割）」ブロック（sec_1786530487148）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の修正内容（本文中の「★2026.08修正」が該当箇所です）
   ─────────────────────────────────────────
   1. 本文の文字サイズ 15px → 17px（スマホ 16px）
========================================================= */

/* =========================================================
   「ほっと。」こだわり ②  ＜完全版＞
   ②オーナーのこだわりが詰まった空間

   ▼▼ 貼り付け先 ▼▼
     FluxCore Pro 管理画面
     → こだわりページ（courses.php）
     → ①の下に「コンセプト（左右分割）」ブロックをもう1つ追加して選択
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください。
   ※ ①のブロックのCSSはそのままで大丈夫です（触らないでください）。
   ※ PHP・HTMLは一切さわっていません。CSSだけで完結します。

   ─────────────────────────────────────────
   ■ ブロックに入力する内容（②のブロック）
   ─────────────────────────────────────────
   ・見出し上のラベル（eyebrow）
       02

   ・タイトル
       オーナーのこだわりが詰まった空間

   ・本文
       オーナー自身もカブを愛するライダーだからこそ、店内にはカブにまつわるステッカーやグッズなどを数多く飾っています。
       カブ好きの方には思わず見入ってしまうアイテムも多く、ご来店の際はお食事だけでなく店内の雰囲気もぜひお楽しみください。
       同じ趣味を持つ方との会話が自然と生まれる空間です。

   ・画像パス（この文字列をそのまま「画像パス」欄に貼ってください）
       image/assets/asset_20260717175809_6a59eea14c708.webp
       ※ サイフォンが並ぶ店内カウンターの写真です

   ・レイアウト左右反転（layout_reverse）
       ★ ON にしてください（画像左・テキスト右）
       ①が「テキスト左・画像右」なので、②を反転させると
       左右交互になって見やすくなります。

   ─────────────────────────────────────────
   ■ このCSSの中身について
   ─────────────────────────────────────────
   前回「②③はCSS不要」とお伝えしましたが、左右反転の表示を
   実際に検証したところ2点直すところが見つかったため、
   ②用のCSSをお渡しします。

   1. 左右反転すると画像側の列が少し広くなり、①と幅が
      揃いませんでした（①512px/512px に対し ②553px/471px）。
      → 同じ幅に揃えました。

   2. その修正がスマホにも効いてしまい、画像の幅が11pxまで
      潰れる不具合が出ました。
      → パソコン表示のときだけ効くように直しました。

   下の「共通デザイン」部分は①と同じ内容です。
   （どちらのブロックに入っていても同じ結果になります）

   --- 使用カラー ---
   ブラウン       #7a4526  タイトル・枠線・影
   ダークブラウン #4a2f22  本文
   レモン         #f9c826  番号バッジ・下線
   クリーム       #fffaee  背景・画像のフチ
========================================================= */


/* =========================================================
   ②専用：左右反転したときの列幅を①と揃える
   （パソコン表示のときだけ。スマホは縦積みのまま）
========================================================= */
@media (min-width: 993px) {
  .concept-container.concept-reverse {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr) !important;
  }
}


/* =========================================================
   ここから下は①と共通のデザイン
========================================================= */

/* セクション全体（背景・余白） */
.concept-section {
  padding: 190px 20px 96px !important;
  background: #fffaee !important;
  /* うすいドット模様 */
  background-image: radial-gradient(rgba(122, 69, 38, .10) 1.5px, transparent 1.5px) !important;
  background-size: 18px 18px !important;
  color: #4a2f22 !important;
}

/* 2つ目・3つ目は上の余白を通常サイズに戻す */
.concept-section + .concept-section {
  padding-top: 96px !important;
}


/* テキストと画像の横並び */
.concept-container {
  max-width: 1080px !important;
  margin: 0 auto !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr) !important;
  gap: 56px !important;
  align-items: center !important;
}
.concept-content {
  text-align: left !important;
}


/* 番号バッジ（01 / 02 / 03） */
.concept-content p.concept-eyebrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 54px !important;
  height: 54px !important;
  margin: 0 0 18px !important;
  background: #f9c826 !important;
  color: #4a2f22 !important;
  border: 2px solid #7a4526 !important;
  border-radius: 50% !important;
  font-family: var(--font-en) !important;
  font-size: 20px !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 0 rgba(122, 69, 38, .3) !important;
  text-align: center !important;
}


/* タイトル（レモンの下線つき） */
.concept-title,
.concept-content h2 {
  margin: 0 0 20px !important;
  color: #7a4526 !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem) !important;
  line-height: 1.5 !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  text-align: left !important;
  position: relative;
  padding-bottom: 16px;
}
.concept-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: #f9c826;
}


/* 本文 */
.concept-text,
.concept-content p {
  color: #4a2f22 !important;
  font-family: var(--font-serif) !important;
  /* ★2026.08修正 本文が小さいというご指摘 → 15px から 17px に拡大 */
  font-size: 17px !important;
  line-height: 2.1 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}


/* 画像（角丸カード） */
.concept-img-wrapper {
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 3px solid #fffaee !important;
  background: #fffaee !important;
  box-shadow: 0 10px 0 rgba(122, 69, 38, .22),
              0 20px 40px rgba(74, 47, 34, .18) !important;
}
/* 元テーマの金色の内枠線を消す */
.concept-img-wrapper::before {
  display: none !important;
}
.concept-img-wrapper img,
.concept-img-wrapper video {
  aspect-ratio: 4 / 3 !important;
  filter: none !important;
}


/* =========================================================
   スマホ（992px以下）
   サイドヘッダーが無いので余白を戻し、縦積みにします
========================================================= */
@media (max-width: 992px) {
  .concept-section,
  .concept-section + .concept-section {
    padding: 60px 16px !important;
  }
  .concept-container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .concept-content {
    padding-left: 0 !important;
  }
  .concept-content p.concept-eyebrow {
    width: 46px !important;
    height: 46px !important;
    font-size: 17px !important;
    margin-bottom: 14px !important;
  }
  .concept-img-wrapper {
    border-radius: 20px !important;
  }
  .concept-img-wrapper img {
    aspect-ratio: 16 / 11 !important;
  }
}

/* =========================================================
   ★2026.08修正 スマホの本文サイズ（16px）
========================================================= */
@media (max-width: 992px) {
  .concept-text,
  .concept-content p {
    font-size: 16px !important;
    line-height: 2.0 !important;
  }
}

/* Block: custom_html / sec_1786530846446 */
/* =========================================================
   セクション全体（背景・余白）
========================================================= */
.hot-sig {
  padding: 96px 20px !important;
  background: #fffaee;
  /* うすいドット模様 */
  background-image: radial-gradient(rgba(122, 69, 38, .10) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}


/* =========================================================
   見出し
========================================================= */
.hot-sig-head {
  text-align: center;
  margin-bottom: 46px;
}
.hot-sig-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .28em;
  color: #c9a24a;
}
.hot-sig-title {
  margin: 0;
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
  font-family: var(--font-serif);
  font-weight: 900;
  color: #7a4526;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  letter-spacing: .12em;
}
.hot-sig-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: #f9c826;
}


/* =========================================================
   2品を左右に並べる
========================================================= */
.hot-sig-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}


/* =========================================================
   カード
========================================================= */
.hot-sig-card {
  background: #fff;
  border: 2px solid #7a4526;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(122, 69, 38, .28),
              0 18px 36px rgba(74, 47, 34, .14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hot-sig-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 0 rgba(122, 69, 38, .28),
              0 22px 42px rgba(74, 47, 34, .18);
}

.hot-sig-img {
  margin: 0;
}
.hot-sig-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hot-sig-body {
  padding: 22px 22px 26px;
  text-align: center;
}
.hot-sig-name {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 900;
  color: #4a2f22;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: .06em;
  line-height: 1.5;
}


/* =========================================================
   価格（レモン色の丸タグ）
========================================================= */
.hot-sig-price {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #f9c826;
  color: #4a2f22;
  border: 2px solid #7a4526;
  border-radius: 999px;
  padding: 7px 20px;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 19px;
}
.hot-sig-price span {
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 700;
}


/* =========================================================
   スマホ（992px以下）
   2品を縦積みにします
========================================================= */
@media (max-width: 992px) {
  .hot-sig {
    padding: 60px 16px !important;
  }
  .hot-sig-head {
    margin-bottom: 30px;
  }
  .hot-sig-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 420px;
  }
  .hot-sig-card {
    border-radius: 20px;
  }
  .hot-sig-img img {
    aspect-ratio: 16 / 10;
  }
}


/* =========================================================
   Page: seats / SEATS ページ
========================================================= */

/* Block: hero_page / sec_1782111079546 */
.page-hero-wrapper {
  position: relative;
  min-height: 360px;
  padding: 150px 20px 90px;
  text-align: center;
  color: var(--text-main);
  background-size: cover;
  background-position: center;
}
.page-hero-wrapper::after, .ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,23,24,.82), rgba(31,47,48,.46));
}
.ph-container { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ph-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--gold-light); letter-spacing: .16em; }
.ph-desc { margin-top: 16px; color: var(--text-sub); font-size: 14px; line-height: 2; }

/* Block: seat_list_full / sec_1782111115207 */
/* FluxCore block theme CSS.
   Site-wide tokens, header, first-view hero, page hero, and footer live in style.css.
   Site-specific overrides generated from the editor live in custom.css. */

.seat-list-full-section {padding: 100px 20px; background: #101718; color: #fff7ea;}
.slf-header {text-align: center; margin-bottom: 60px;}
.slf-main-title {font-family: 'Shippori Mincho', serif; font-size: 28px; font-weight: 800; color: #f6cf7a; letter-spacing: 0.1em; margin: 0 0 15px 0;}
.slf-sub-text {font-family: 'Noto Sans JP', sans-serif; font-size: 14px; color: #e0c8a0; line-height: 1.8; letter-spacing: 0.05em;}
.slf-grid {max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; align-items: stretch;}
.slf-card {display: flex; flex-direction: column; height: 100%; background: rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.18); border: 1px solid rgba(246,207,122,0.22); transition: transform 0.4s ease, box-shadow 0.4s ease;}
.slf-card:hover {transform: translateY(-4px); box-shadow: 0 15px 40px rgba(246, 207, 122, 0.18);}
.slf-img-wrap {position: relative; width: 100%; aspect-ratio: 4 / 3; height: auto; min-height: 0; overflow: hidden; background: #172526;}
.slf-img-wrap img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;}
.slf-card:hover .slf-img-wrap img {transform: scale(1.05);}
.slf-badge {position: absolute; top: 15px; right: 15px; padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: bold; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0.05em; z-index: 2; box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
.slf-badge.is-open {background: #fff; color: var(--gold); border: 1px solid var(--gold);}
.slf-badge.is-full {background: #aaa; color: #fff; border: 1px solid #aaa;}
.slf-body {padding: 30px 25px; flex: 1; display: flex; flex-direction: column;}
.slf-title {font-family: 'Shippori Mincho', serif; font-size: 18px; font-weight: 700; color: #fff7ea; margin: 0 0 12px 0; line-height: 1.4;}
.slf-cap {font-family: 'Noto Sans JP', sans-serif; font-size: 12px; color: #a79578; font-weight: normal;}
.slf-desc {font-size: 13px; color: #e0c8a0; line-height: 1.8; margin: 0; flex: 1;}
.slf-reserve-btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 22px; border-radius: 4px; border: 1px solid #c5a25a; background: #c5a25a; color: #111; font-weight: 800; padding: 12px 18px; cursor: pointer;}
.slf-reserve-btn:hover {background: #f6cf7a; border-color: #f6cf7a;}
.section-header, .menu-section-header, .slf-header, .course-list-header, .news-section-header, .job-section-header, .contact-section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-header h2, .menu-main-title, .slf-main-title, .course-list-title, .news-main-title, .job-main-title, .contact-main-title {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  color: var(--gold-light);
  letter-spacing: .12em;
  font-weight: 800;
}
.section-header p, .menu-sub-text, .slf-sub-text, .course-list-desc, .news-sub-text, .job-sub-text, .contact-sub-text {
  margin-top: 14px;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 2;
}
.btn-header-reserve, .course-list-reserve, .slf-reserve-btn, .btn-menu-more, .btn-recruit-link, .btn-job-apply, .btn-submit-contact, .btn-nab-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #111;
  font-weight: 800;
  padding: 12px 22px;
  cursor: pointer;
}
.btn-header-reserve:hover, .course-list-reserve:hover, .slf-reserve-btn:hover, .btn-menu-more:hover, .btn-recruit-link:hover, .btn-job-apply:hover, .btn-submit-contact:hover, .btn-nab-back:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #111;
}
@media (max-width: 768px) {
  .seat-list-full-section {padding: 70px 15px;}
  .slf-main-title {font-size: 24px;}
  .slf-grid {grid-template-columns: 1fr; gap: 25px;}
  .slf-body {padding: 25px 20px;}
}

/* Block: big_calendar / sec_1782111142769 */
.big-calendar-section {padding: 90px 20px; background: #101718; color: #fff7ea;}
.bc-container, .calendar-card {max-width: 1040px; margin: 0 auto;}
.calendar-card {padding: 36px; background: rgba(255,255,255,0.06); border: 1px solid rgba(246,207,122,0.22); border-radius: 8px; box-shadow: 0 18px 45px rgba(0,0,0,0.2);}
.calendar-header-box {text-align: center; margin-bottom: 32px;}
.bc-month-nav {display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 24px;}
.bc-month-label {min-width: 150px; color: #f6cf7a; font-family: 'Shippori Mincho', serif; font-size: 20px; font-weight: 800; text-align: center; letter-spacing: 0.08em;}
.bc-month-btn {width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(246,207,122,0.38); border-radius: 999px; background: rgba(246,207,122,0.08); color: #f6cf7a; cursor: pointer;}
.bc-month-btn:hover:not(:disabled) {background: rgba(246,207,122,0.18); border-color: rgba(246,207,122,0.72);}
.bc-month-btn:disabled {opacity: 0.35; cursor: not-allowed;}
.cal-main-title {margin: 0 0 12px; font-family: 'Shippori Mincho', serif; color: #f6cf7a; font-size: 28px; letter-spacing: 0.12em;}
.cal-sub-text {margin: 0; color: #e0c8a0; line-height: 2;}
.bc-header, .big-calendar-section .section-header {text-align: center; margin-bottom: 42px;}
.bc-title, .big-calendar-section h2 {font-family: 'Shippori Mincho', serif; color: #f6cf7a; font-size: 28px; letter-spacing: 0.12em;}
.bc-desc, .big-calendar-section p {color: #e0c8a0; line-height: 2;}
.bc-calendar, .bc-grid, .big-calendar-grid {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: rgba(255,255,255,0.05); border: 1px solid rgba(246,207,122,0.22); border-radius: 8px; overflow: hidden;}
.bc-day-head, .bc-day {min-height: 78px; padding: 12px 8px; border-right: 1px solid rgba(246,207,122,0.16) !important; border-bottom: 1px solid rgba(246,207,122,0.16) !important;}
.bc-day-head {min-height: auto; text-align: center; background: rgba(197,162,90,0.16); color: #f6cf7a; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.08em;}
.bc-day {background: rgba(255,255,255,0.03); color: #fff7ea; cursor: pointer;}
.bc-day.is-open {background: linear-gradient(135deg, rgba(246,207,122,0.20), rgba(197,162,90,0.08)); box-shadow: inset 0 0 0 1px rgba(246,207,122,0.22);}
.bc-day.is-open:hover {background: linear-gradient(135deg, rgba(246,207,122,0.30), rgba(197,162,90,0.14));}
.bc-day.is-limited {background: rgba(232,193,107,0.11);}
.bc-day.is-full {background: rgba(179,52,61,0.045); cursor: default;}
.bc-empty {background: rgba(255,255,255,0.015); cursor: default;}
.bc-date-num {color: #fff7ea; font-weight: 900;}
.bc-date-mark {margin-top: 10px; font-size: 18px; font-weight: 900;}
@media (max-width: 768px) {
  .big-calendar-section {padding: 64px 15px;}
  .calendar-card {padding: 22px;}
  .bc-title, .big-calendar-section h2, .cal-main-title {font-size: 22px;}
  .bc-day {min-height: 64px; padding: 9px 5px;}
  .bc-day-head {padding: 8px 4px; font-size: 10px;}
}

/* Block: reservation_policy / sec_1782111159668 */
.policy-section {padding: 72px 20px; background: #f7f1e5; color: #1a1a1a;}
.policy-container {max-width: 860px; margin: 0 auto; padding: 34px 38px; background: #fffaf0; border: 1px solid rgba(16,23,24,0.12); border-left: 4px solid #c5a25a; border-radius: 8px; box-shadow: 0 16px 38px rgba(16,23,24,0.08);}
.policy-title {font-family: 'Shippori Mincho', serif; color: #1b2424; font-size: 22px; letter-spacing: 0.08em; margin: 0 0 18px;}
.policy-title i {color: #c5a25a; margin-right: 8px;}
.policy-content {color: #33403f; font-size: 14px; line-height: 2;}
.policy-block + .policy-block {margin-top: 30px; padding-top: 28px; border-top: 1px dashed rgba(16,23,24,0.16);}
.policy-steps {list-style: none; margin: 0; padding: 0;}
.policy-step {display: flex; gap: 16px; align-items: flex-start; padding: 12px 0;}
.policy-step + .policy-step {border-top: 1px solid rgba(16,23,24,0.07);}
.policy-step-num {flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; background: #c5a25a; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 15px;}
.policy-step-title {font-weight: 700; color: #1b2424; font-size: 15px; margin-bottom: 4px;}
.policy-step-desc {color: #33403f; font-size: 13.5px; line-height: 1.9;}
@media (max-width: 768px) {
  .policy-section {padding: 56px 15px;}
  .policy-container {padding: 26px 20px;}
  .policy-title {font-size: 19px;}
  .policy-step-num {width: 28px; height: 28px; font-size: 13px;}
}


/* =========================================================
   Page: recruit / RECRUIT ページ
========================================================= */

/* Block: hero_page / sec_1782111185841 */
.page-hero-wrapper {
  position: relative;
  min-height: 360px;
  padding: 150px 20px 90px;
  text-align: center;
  color: var(--text-main);
  background-size: cover;
  background-position: center;
}
.page-hero-wrapper::after, .ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,23,24,.82), rgba(31,47,48,.46));
}
.ph-container { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ph-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--gold-light); letter-spacing: .16em; }
.ph-desc { margin-top: 16px; color: var(--text-sub); font-size: 14px; line-height: 2; }

/* Block: recruit_job_list / sec_1782114313132 */
.job-list-section {
padding: 104px 20px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
var(--bg-base) !important;
color: var(--text-main) !important;
}
.job-section-header {
max-width: 760px !important;
margin: 0 auto 56px !important;
text-align: center !important;
}
.job-main-title {
margin: 0 0 14px !important;
color: var(--gold-light) !important;
font-family: var(--font-serif) !important;
font-size: clamp(1.7rem, 3vw, 2.35rem) !important;
font-weight: 900 !important;
letter-spacing: .12em !important;
}
.job-sub-text {
margin: 0 !important;
color: var(--text-sub) !important;
font-size: 14px !important;
line-height: 2 !important;
}
.job-container {
max-width: 1040px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
}
.job-card {
overflow: hidden !important;
background: rgba(255, 255, 255, .055) !important;
color: var(--text-main) !important;
border: 1px solid rgba(246, 207, 122, .22) !important;
border-radius: 6px !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, .23) !important;
}
.job-card-header {
padding: 26px 30px !important;
background: rgba(0, 0, 0, .18) !important;
border-bottom: 1px solid rgba(246, 207, 122, .18) !important;
}
.job-type-badge {
display: inline-flex !important;
margin-bottom: 12px !important;
padding: 5px 12px !important;
background: rgba(179, 52, 61, .88) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, .12) !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
}
.job-title {
margin: 0 !important;
color: var(--text-main) !important;
font-family: var(--font-serif) !important;
font-size: 22px !important;
line-height: 1.5 !important;
}
.job-card-body {
display: grid !important;
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
gap: 30px !important;
padding: 30px !important;
}
.job-img-box {
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
flex: initial !important;
border-radius: 6px !important;
overflow: hidden !important;
background: var(--bg-paper) !important;
}
.job-img-box img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.job-info-box {
min-width: 0 !important;
}
.job-table {
width: 100% !important;
border-collapse: collapse !important;
}
.job-table th,
.job-table td {
padding: 13px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
color: var(--text-sub) !important;
font-size: 13px !important;
line-height: 1.8 !important;
}
.job-table th {
width: 116px !important;
padding-right: 18px !important;
color: var(--gold) !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
.job-salary {
color: var(--gold-light) !important;
font-weight: 900 !important;
}
.job-section-header {
  text-align: center;
  margin-bottom: 48px;
}
.job-main-title {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  color: var(--gold-light);
  letter-spacing: .12em;
  font-weight: 800;
}
.job-sub-text {
  margin-top: 14px;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 2;
}
@media (max-width: 768px) {
  .job-list-section {
padding: 70px 15px !important;
}
  .job-card-body {
grid-template-columns: 1fr !important;
padding: 24px !important;
}
  .job-table th,
.job-table td {
display: block !important;
width: 100% !important;
padding: 8px 0 !important;
}
}

/* Block: recruit_spot_list / sec_1782111249790 */
/* Izakaya block theme overrides: recruit_spot_list, free_text_box, recruit_banner, instagram_feed. */
.recruit-spot-section,
.recruit-banner-section,
.fc-instagram-embed-section {
background: var(--bg-base) !important;
color: var(--text-main) !important;
}
.recruit-spot-section {
padding: 96px 20px !important;
}
.main-spot-card {
max-width: 920px !important;
margin: 0 auto !important;
padding: 46px 44px !important;
background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)) !important;
border: 1px solid rgba(246, 207, 122, .26) !important;
border-radius: 6px !important;
box-shadow: 0 22px 58px rgba(0, 0, 0, .26) !important;
text-align: center !important;
}
.spot-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 22px !important;
padding: 6px 16px !important;
background: rgba(179, 52, 61, .92) !important;
color: #fff7ea !important;
border: 1px solid rgba(255, 247, 234, .18) !important;
border-radius: 4px !important;
font-family: var(--font-en) !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: .14em !important;
}
.spot-title {
margin: 0 0 18px !important;
color: var(--gold-light) !important;
font-family: var(--font-serif) !important;
font-size: clamp(1.45rem, 3vw, 2.1rem) !important;
font-weight: 800 !important;
line-height: 1.55 !important;
letter-spacing: .1em !important;
}
.spot-desc {
max-width: 680px !important;
margin: 0 auto !important;
color: var(--text-sub) !important;
font-family: var(--font-serif) !important;
font-size: 15px !important;
line-height: 2.05 !important;
letter-spacing: .04em !important;
}
.spot-card,
.spot-content,
.sic-body,
.fc-course-info {
min-width: 0 !important;
}
.spot-btn-wrap {
margin-top: 30px !important;
}
.btn-spot-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 46px !important;
padding: 0 26px !important;
background: var(--gold) !important;
color: #101718 !important;
border: 1px solid var(--gold) !important;
border-radius: 4px !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 900 !important;
letter-spacing: .06em !important;
}
.btn-spot-link:hover {
background: var(--gold-light) !important;
color: #101718 !important;
transform: translateY(-2px) !important;
}
.spot-items-grid {
max-width: 1040px !important;
margin: 54px auto 0 !important;
}
.spot-grid-title {
display: block !important;
width: auto !important;
margin: 0 0 26px !important;
padding-bottom: 14px !important;
color: var(--gold-light) !important;
border-bottom: 1px solid rgba(246, 207, 122, .28) !important;
font-family: var(--font-serif) !important;
font-size: 18px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-align: center !important;
}
.sig-wrapper {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
gap: 20px !important;
}
.spot-item-card {
padding: 22px !important;
background: rgba(255, 255, 255, .055) !important;
border: 1px solid rgba(246, 207, 122, .22) !important;
border-radius: 6px !important;
box-shadow: 0 18px 46px rgba(0, 0, 0, .22) !important;
}
.spot-item-card.is-full {
opacity: .68 !important;
background: rgba(255, 255, 255, .035) !important;
border-color: rgba(255, 255, 255, .12) !important;
filter: saturate(.72) !important;
}
.sic-header {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 16px !important;
padding-bottom: 16px !important;
margin-bottom: 16px !important;
border-bottom: 1px solid rgba(246, 207, 122, .18) !important;
}
.sic-date {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.sic-md {
color: var(--gold-light) !important;
font-family: var(--font-en) !important;
font-size: 24px !important;
font-weight: 900 !important;
line-height: 1 !important;
}
.sic-time {
color: var(--text-muted) !important;
font-size: 12px !important;
font-weight: 700 !important;
}
.sic-status {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 30px !important;
padding: 0 12px !important;
border-radius: 4px !important;
font-size: 12px !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
.status-open {
background: rgba(197, 162, 90, .18) !important;
color: var(--gold-light) !important;
border: 1px solid rgba(246, 207, 122, .32) !important;
}
.status-full {
background: rgba(179, 52, 61, .2) !important;
color: #ffb4b4 !important;
border: 1px solid rgba(179, 52, 61, .36) !important;
}
.sic-title {
margin: 0 0 12px !important;
color: var(--text-main) !important;
font-family: var(--font-serif) !important;
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.55 !important;
}
.sic-wage {
margin-bottom: 12px !important;
color: var(--text-sub) !important;
font-size: 13px !important;
}
.sic-wage strong {
color: var(--gold-light) !important;
font-family: var(--font-en) !important;
font-size: 20px !important;
font-weight: 900 !important;
}
.sic-desc {
margin: 0 !important;
color: var(--text-muted) !important;
font-size: 13px !important;
line-height: 1.85 !important;
}
@media (max-width: 768px) {
  .recruit-spot-section,
.recruit-banner-section,
.fc-instagram-embed-section,
.free-text-section {
padding: 70px 15px !important;
}
  .main-spot-card,
.recruit-banner-container {
padding: 34px 22px !important;
}
  .spot-title,
.recruit-title {
letter-spacing: .06em !important;
}
  .spot-desc,
.recruit-desc {
font-size: 14px !important;
line-height: 1.9 !important;
}
  .btn-spot-link,
.btn-recruit-link,
.fc-instagram-embed-action a {
width: 100% !important;
max-width: 320px !important;
}
  .spot-grid-title {
font-size: 16px !important;
}
  .sig-wrapper {
grid-template-columns: 1fr !important;
}
  .sic-header {
align-items: center !important;
}
}

/* Block: contact_form / sec_1782111266170 */
.contact-form-section {padding: 100px 20px; background: #101718; color: #fff7ea;}
.contact-section-header {text-align: center; margin-bottom: 50px;}
.contact-main-title {font-family: 'Montserrat', 'Shippori Mincho', serif; font-size: 28px; font-weight: 800; color: #f6cf7a; letter-spacing: 0.15em; margin: 0 0 15px 0;}
.contact-sub-text {font-family: 'Noto Sans JP', sans-serif; font-size: 14px; color: #e0c8a0; line-height: 1.8;}
.contact-container {max-width: 860px; margin: 0 auto;}
.form-wrapper {background: rgba(255,255,255,0.06); border: 1px solid rgba(246,207,122,0.22); padding: 42px; border-radius: 8px; box-shadow: 0 18px 45px rgba(0,0,0,0.2);}
.restaurant-contact-form input[type="text"], .restaurant-contact-form input[type="email"], .restaurant-contact-form input[type="tel"], .restaurant-contact-form select, .restaurant-contact-form textarea {width: 100%; padding: 16px 20px; border: 1px solid rgba(246,207,122,0.28); border-radius: 6px; font-size: 15px; font-family: 'Noto Sans JP', sans-serif; color: #172526; background: rgba(255,255,255,0.94); transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);}
.restaurant-contact-form input:focus, .restaurant-contact-form select:focus, .restaurant-contact-form textarea:focus {outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(246, 207, 122, 0.18); background: rgba(255, 247, 234, 0.92);}
.select-wrap {position: relative;}
.select-wrap::after {content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #aaa; pointer-events: none;}
.restaurant-contact-form select {appearance: none; -webkit-appearance: none; cursor: pointer;}
.form-submit-wrap {text-align: center; margin-top: 50px;}
.btn-submit-contact {display: inline-block; background: #c5a25a; color: #101718; border: 1px solid #c5a25a; padding: 18px 60px; border-radius: 4px; font-size: 15px; font-weight: bold; letter-spacing: 0.1em; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
.btn-submit-contact:hover {background: #f6cf7a; border-color: #f6cf7a; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(195,163,69,0.3);}
.contact-success-msg {background: rgba(255,255,255,0.06); border: 1px solid rgba(246,207,122,0.22); color: #fff7ea; padding: 40px; border-radius: 8px; text-align: center; margin-bottom: 30px; animation: fadeIn 0.5s ease;}
.contact-success-msg i {font-size: 30px; margin-bottom: 15px;}
.contact-success-msg p {font-size: 15px; font-weight: bold; margin: 0; line-height: 1.6;}
.section-header, .menu-section-header, .slf-header, .course-list-header, .news-section-header, .job-section-header, .contact-section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-header h2, .menu-main-title, .slf-main-title, .course-list-title, .news-main-title, .job-main-title, .contact-main-title {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  color: var(--gold-light);
  letter-spacing: .12em;
  font-weight: 800;
}
.section-header p, .menu-sub-text, .slf-sub-text, .course-list-desc, .news-sub-text, .job-sub-text, .contact-sub-text {
  margin-top: 14px;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 2;
}
.btn-header-reserve, .course-list-reserve, .slf-reserve-btn, .btn-menu-more, .btn-recruit-link, .btn-job-apply, .btn-submit-contact, .btn-nab-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #111;
  font-weight: 800;
  padding: 12px 22px;
  cursor: pointer;
}
.btn-header-reserve:hover, .course-list-reserve:hover, .slf-reserve-btn:hover, .btn-menu-more:hover, .btn-recruit-link:hover, .btn-job-apply:hover, .btn-submit-contact:hover, .btn-nab-back:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #111;
}
@media (max-width: 768px) {
  .form-wrapper {padding: 40px 20px;}
  .contact-main-title {font-size: 24px;}
  .btn-submit-contact {width: 100%; padding: 18px 0;}
}


/* =========================================================
   Page: reviews / REVIEWS ページ
========================================================= */

/* Block: hero_page / sec_1782111350931 */
.page-hero-wrapper {
  position: relative;
  min-height: 360px;
  padding: 150px 20px 90px;
  text-align: center;
  color: var(--text-main);
  background-size: cover;
  background-position: center;
}
.page-hero-wrapper::after, .ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,23,24,.82), rgba(31,47,48,.46));
}
.ph-container { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ph-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--gold-light); letter-spacing: .16em; }
.ph-desc { margin-top: 16px; color: var(--text-sub); font-size: 14px; line-height: 2; }

/* Block: ugc_ranking / sec_1782111390500 */
.ugc-section {padding: 96px 20px; background: #101718; color: #fff7ea;}
.ugc-container {max-width: 1120px; margin: 0 auto;}
.ugc-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px;}
.ugc-card {position: relative; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid rgba(246,207,122,0.22); border-radius: 8px; box-shadow: 0 18px 45px rgba(0,0,0,0.2);}
.ugc-rank-badge {position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-width: 58px; height: 32px; padding: 0 12px; background: #c5a25a; color: #101718; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,0.22);}
.ugc-img-box {aspect-ratio: 4 / 3; background: #172526; overflow: hidden;}
.ugc-img-box img {width: 100%; height: 100%; object-fit: cover;}
.ugc-info {padding: 24px;}
.ugc-stars {color: #f6cf7a; letter-spacing: 0.08em; margin-bottom: 10px;}
.ugc-title {font-family: 'Shippori Mincho', serif; color: #fff7ea; font-size: 18px; margin: 0 0 10px;}
.ugc-desc {color: #e0c8a0; line-height: 1.9; font-size: 13px;}
.ugc-user {display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #a79578; font-size: 12px;}
.ugc-verified {color: #f6cf7a;}
.ugc-btn-wrap {text-align: center; margin-top: 42px;}
.btn-ugc-more {display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 32px; background: #c5a25a; color: #101718; border: 1px solid #c5a25a; border-radius: 4px; font-weight: 900; text-decoration: none;}
.btn-ugc-more:hover {background: #f6cf7a; border-color: #f6cf7a; color: #101718;}
.ugc-main-title {font-family: 'Shippori Mincho', serif; color: #f6cf7a; font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 900; letter-spacing: 0.12em; margin: 0 0 14px;}
.ugc-sub-text {color: #e0c8a0; font-size: 14px; line-height: 2; margin: 0;}
@media (max-width: 768px) {
  .ugc-section {padding: 70px 15px;}
  .ugc-info {padding: 20px;}
}

/* Block: review_list_with_sidebar / sec_1782111415616 */
.reviews-archive-section {padding: 90px 20px; background: #101718; color: #fff7ea;}
.reviews-layout-container {max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start;}
.reviews-main {display: flex; flex-direction: column; gap: 24px;}
.review-row-card {display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 24px; background: rgba(255,255,255,0.06); border: 1px solid rgba(246,207,122,0.22); border-radius: 8px; box-shadow: 0 18px 45px rgba(0,0,0,0.2);}
.review-img-box {aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #172526;}
.review-img-box img {width: 100%; height: 100%; object-fit: cover;}
.review-meta {display: flex; justify-content: space-between; gap: 16px; color: #c5a25a; font-size: 12px; margin-bottom: 8px;}
.review-stars {color: #f6cf7a; letter-spacing: 0.08em; margin-bottom: 8px;}
.review-dish {display: inline-block; color: #f6cf7a; background: rgba(197,162,90,0.16); border: 1px solid rgba(246,207,122,0.22); border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 700;}
.review-text {margin-top: 12px; color: #e0c8a0; line-height: 2;}
.reviews-sidebar {display: flex; flex-direction: column; gap: 22px;}
.side-widget {padding: 24px; background: rgba(255,255,255,0.06); color: #fff7ea; border: 1px solid rgba(246,207,122,0.22); border-radius: 8px;}
.side-title {font-family: 'Shippori Mincho', serif; color: #f6cf7a; font-size: 18px; margin: 0 0 18px;}
.rank-list {list-style: none; margin: 0; padding: 0;}
.rank-item {display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08);}
.rank-item:last-child {border-bottom: none;}
.rank-num {color: #f6cf7a; font-weight: 900;}
.rank-img {width: 54px; height: 54px; object-fit: cover; border-radius: 6px;}
.rank-name {margin: 0; color: #fff7ea; line-height: 1.5;}
.rank-votes {font-size: 12px; color: #e0c8a0;}
.pagination {display: flex; justify-content: center; gap: 8px; margin-top: 28px;}
.page-btn {min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(197,162,90,0.35); color: #1a1a1a; border-radius: 4px;}
.page-btn.active, .page-btn:hover {background: #c5a25a; color: #101718;}
.review-body {min-width: 0;}
.review-author, .review-date {color: #c5a25a;}
.rank-info {min-width: 0;}
@media (max-width: 900px) {
  .reviews-layout-container {grid-template-columns: 1fr;}
  .review-row-card {grid-template-columns: 1fr;}
  .review-img-box {width: 100%;}
}


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

/* Block: hero_page / sec_1782111458370 */
.page-hero-wrapper {
  position: relative;
  min-height: 360px;
  padding: 150px 20px 90px;
  text-align: center;
  color: var(--text-main);
  background-size: cover;
  background-position: center;
}
.page-hero-wrapper::after, .ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,23,24,.82), rgba(31,47,48,.46));
}
.ph-container { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ph-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--gold-light); letter-spacing: .16em; }
.ph-desc { margin-top: 16px; color: var(--text-sub); font-size: 14px; line-height: 2; }

/* Block: news_list_grid / sec_1782114338501 */
/* =========================================================
   お知らせ一覧グリッド｜縦一覧・完全版
   背景はそのまま／見出しと記事文字だけ白い囲み
   ========================================================= */

.news-list-grid-section {
  --fc-bg-overlay: rgba(255, 250, 238, 0) !important;

  position: relative !important;
  overflow: hidden !important;
  padding: clamp(72px, 8vw, 118px) 24px !important;
  color: #55392b !important;
}

.news-list-grid-section::before,
.news-list-grid-section::after {
  content: none !important;
  display: none !important;
}

/* 「記事一覧」と説明文の読みやすい白い囲み */
.news-list-grid-section .news-section-header {
  width: fit-content !important;
  max-width: min(100%, 880px) !important;
  margin: 0 auto 52px !important;
  padding: 24px 44px 22px !important;
  border: 1px solid rgba(255, 250, 240, 0.88) !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 246, 0.84) !important;
  box-shadow: 0 8px 0 rgba(91, 48, 26, 0.14) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  text-align: center !important;
}

/* 明朝体 */
.news-list-grid-section .news-main-title,
.news-list-grid-section .news-sub-text,
.news-list-grid-section .nlg-title {
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
}

.news-list-grid-section .news-main-title {
  margin: 0 !important;
  color: #673a25 !important;
  font-size: clamp(32px, 4vw, 50px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

.news-list-grid-section .news-main-title::after {
  content: "" !important;
  display: block !important;
  width: 58px !important;
  height: 4px !important;
  margin: 18px auto 14px !important;
  border-radius: 999px !important;
  background: #ffc928 !important;
}

.news-list-grid-section .news-sub-text {
  max-width: 660px !important;
  margin: 0 auto !important;
  color: #604233 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 2 !important;
  letter-spacing: 0.05em !important;
}

/* 1記事ずつ、上から下へ */
.news-list-grid-section .nlg-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  width: min(100%, 940px) !important;
  margin: 0 auto !important;
}

.news-list-grid-section .nlg-card {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 210px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #55392b !important;
  text-decoration: none !important;
}

/* 左側サムネイル */
.news-list-grid-section .nlg-img,
.news-list-grid-section .nlg-no-img {
  width: 210px !important;
  height: 142px !important;
  overflow: hidden !important;
  border: 2px solid #fffaf0 !important;
  border-radius: 16px !important;
  background: #f6e5b6 !important;
  box-shadow: 0 6px 0 rgba(91, 48, 26, 0.18) !important;
}

.news-list-grid-section .nlg-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
  transition: transform 0.25s ease !important;
}

.news-list-grid-section .nlg-no-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #b88b29 !important;
  font-size: 30px !important;
}

/* 文字の後ろだけ白いモヤ */
.news-list-grid-section .nlg-body {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 22px 26px !important;
  border: 1px solid rgba(139, 77, 41, 0.42) !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 246, 0.88) !important;
  box-shadow: 0 7px 0 rgba(91, 48, 26, 0.14) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

.news-list-grid-section .nlg-meta {
  margin: 0 0 10px !important;
}

.news-list-grid-section .nlg-date {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 26px !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(139, 77, 41, 0.38) !important;
  border-radius: 999px !important;
  background: #fff0bf !important;
  color: #8a4a26 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
}

.news-list-grid-section .nlg-title {
  margin: 0 !important;
  color: #653c29 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  letter-spacing: 0.04em !important;
}

.news-list-grid-section a.nlg-card:hover .nlg-img img {
  transform: scale(1.04) !important;
}

.news-list-grid-section a.nlg-card:hover .nlg-body {
  border-color: #8b4d29 !important;
  background: rgba(255, 253, 246, 0.95) !important;
  box-shadow: 0 10px 0 rgba(91, 48, 26, 0.17) !important;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .news-list-grid-section {
    padding: 60px 16px 72px !important;
  }

  .news-list-grid-section .news-section-header {
    width: min(100%, 430px) !important;
    margin-bottom: 40px !important;
    padding: 20px 18px !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 0 rgba(91, 48, 26, 0.13) !important;
  }

  .news-list-grid-section .news-main-title {
    font-size: 31px !important;
    letter-spacing: 0.1em !important;
  }

  .news-list-grid-section .news-main-title::after {
    margin: 14px auto 12px !important;
  }

  .news-list-grid-section .news-sub-text {
    font-size: 13px !important;
    line-height: 1.9 !important;
  }

  .news-list-grid-section .nlg-grid {
    gap: 14px !important;
  }

  .news-list-grid-section .nlg-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .news-list-grid-section .nlg-img,
  .news-list-grid-section .nlg-no-img {
    width: 112px !important;
    height: 112px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 0 rgba(91, 48, 26, 0.15) !important;
  }

  .news-list-grid-section .nlg-body {
    padding: 15px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 0 rgba(91, 48, 26, 0.12) !important;
  }

  .news-list-grid-section .nlg-meta {
    margin-bottom: 7px !important;
  }

  .news-list-grid-section .nlg-date {
    min-height: 23px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
  }

  .news-list-grid-section .nlg-title {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}


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

/* Block: hero_page / sec_1786541190601 */
.page-hero-wrapper {
  position: relative;
  min-height: 360px;
  padding: 150px 20px 90px;
  text-align: center;
  color: var(--text-main);
  background-size: cover;
  background-position: center;
}
.page-hero-wrapper::after, .ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,23,24,.82), rgba(31,47,48,.46));
}
.ph-container { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ph-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--gold-light); letter-spacing: .16em; }
.ph-desc { margin-top: 16px; color: var(--text-sub); font-size: 14px; line-height: 2; }

/* Block: news_article_body / sec_1782114380582 */
/* =========================================================
   お知らせ記事本文｜完全版
   背景：背景設定（共通）の画像をそのまま表示
   本文だけを白い半透明カードで読みやすく
   ========================================================= */

.news-article-body-section {
  /* FluxCore標準の暗い背景オーバーレイを消す */
  --fc-bg-overlay: rgba(255, 250, 238, 0) !important;

  position: relative !important;
  overflow: hidden !important;
  padding: clamp(72px, 8vw, 118px) 24px !important;
  color: #55392b !important;
}

/* セクション全体には色膜を置かない */
.news-article-body-section::before,
.news-article-body-section::after {
  content: none !important;
  display: none !important;
}

/* 記事本文全体：文字の後ろだけ白いモヤ */
.news-article-body-section .nab-container {
  width: min(100%, 900px) !important;
  margin: 0 auto !important;
  padding: clamp(28px, 5vw, 56px) !important;
  border: 1px solid rgba(255, 250, 240, 0.9) !important;
  border-radius: 22px !important;
  background: rgba(255, 253, 246, 0.9) !important;
  box-shadow: 0 10px 0 rgba(91, 48, 26, 0.16) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 明朝体 */
.news-article-body-section .nab-title,
.news-article-body-section .nab-body-text,
.news-article-body-section .btn-nab-back {
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
}

/* ヘッダー */
.news-article-body-section .nab-header {
  margin: 0 0 30px !important;
  padding: 0 0 25px !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(117, 67, 38, 0.34) !important;
}

.news-article-body-section .nab-meta {
  margin: 0 0 14px !important;
}

.news-article-body-section .nab-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 30px !important;
  padding: 5px 12px !important;
  border: 1px solid rgba(139, 77, 41, 0.38) !important;
  border-radius: 999px !important;
  background: #fff0bf !important;
  color: #8a4a26 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
}

.news-article-body-section .nab-title {
  margin: 0 !important;
  color: #653c29 !important;
  font-size: clamp(28px, 3.7vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.08em !important;
}

/* 記事メイン画像 */
.news-article-body-section .nab-main-img-box {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  margin: 0 0 34px !important;
  border: 2px solid #fffaf0 !important;
  border-radius: 16px !important;
  background: #f4e4b2 !important;
  box-shadow: 0 7px 0 rgba(91, 48, 26, 0.16) !important;
}

.news-article-body-section .nab-main-img-box img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
}

/* 本文 */
.news-article-body-section .nab-body-text {
  margin: 0 !important;
  color: #573b2d !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 2.2 !important;
  letter-spacing: 0.05em !important;
  white-space: normal !important;
}

/* 任意の引用元・出典ボタン */
.news-article-body-section .block-button-wrap {
  margin: 38px 0 0 !important;
  text-align: center !important;
}

.news-article-body-section .block-button,
.news-article-body-section .btn-block-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 220px !important;
  min-height: 52px !important;
  padding: 12px 24px !important;
  border: 2px solid #8a4a26 !important;
  border-radius: 999px !important;
  background: #ffc928 !important;
  box-shadow: 0 5px 0 #8a4a26 !important;
  color: #5b321f !important;
  font-family: "Shippori Mincho", "Yu Mincho", serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* 戻るボタン */
.news-article-body-section .nab-footer-nav {
  margin: 42px 0 0 !important;
  padding: 26px 0 0 !important;
  border: 0 !important;
  border-top: 1px dashed rgba(127, 73, 41, 0.36) !important;
  text-align: center !important;
}

.news-article-body-section .btn-nab-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 220px !important;
  min-height: 52px !important;
  padding: 12px 24px !important;
  border: 2px solid #8a4a26 !important;
  border-radius: 999px !important;
  background: #fffaf0 !important;
  box-shadow: 0 5px 0 rgba(138, 74, 38, 0.75) !important;
  color: #6b3e27 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

.news-article-body-section .btn-nab-back:hover {
  transform: translateY(2px) !important;
  box-shadow: 0 3px 0 rgba(138, 74, 38, 0.75) !important;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .news-article-body-section {
    padding: 60px 16px 72px !important;
  }

  .news-article-body-section .nab-container {
    padding: 24px 18px !important;
    border-radius: 17px !important;
    box-shadow: 0 6px 0 rgba(91, 48, 26, 0.14) !important;
  }

  .news-article-body-section .nab-header {
    margin-bottom: 24px !important;
    padding-bottom: 20px !important;
  }

  .news-article-body-section .nab-date {
    min-height: 26px !important;
    padding: 4px 9px !important;
    font-size: 10px !important;
  }

  .news-article-body-section .nab-title {
    font-size: 25px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.05em !important;
  }

  .news-article-body-section .nab-main-img-box {
    aspect-ratio: 4 / 3 !important;
    margin-bottom: 26px !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 0 rgba(91, 48, 26, 0.14) !important;
  }

  .news-article-body-section .nab-body-text {
    font-size: 14px !important;
    line-height: 2.05 !important;
    letter-spacing: 0.03em !important;
  }

  .news-article-body-section .nab-footer-nav {
    margin-top: 32px !important;
    padding-top: 22px !important;
  }

  .news-article-body-section .btn-nab-back {
    width: min(100%, 280px) !important;
    min-width: 0 !important;
    min-height: 50px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   Page: accses / ACCSESS ページ
========================================================= */

/* Block: hero_page / sec_1786521610210 */
.page-hero-wrapper {
  position: relative;
  min-height: 360px;
  padding: 150px 20px 90px;
  text-align: center;
  color: var(--text-main);
  background-size: cover;
  background-position: center;
}
.page-hero-wrapper::after, .ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,23,24,.82), rgba(31,47,48,.46));
}
.ph-container { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ph-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--gold-light); letter-spacing: .16em; }
.ph-desc { margin-top: 16px; color: var(--text-sub); font-size: 14px; line-height: 2; }

/* Block: custom_html / sec_1786521614529 */
/* =========================================================
   店舗案内ページ｜導入文（custom_html）完全版
   本文：PC・スマホともに16px
   ========================================================= */

.custom-html-wrapper:has(.hot-access-intro),
.custom-html-wrapper:has(.hot-access-intro) .custom-html-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.hot-access-intro {
  padding: clamp(70px, 8vw, 110px) 24px !important;
  background-color: #fffaee !important;
  background-image:
    radial-gradient(
      rgba(123, 72, 40, 0.12) 1.3px,
      transparent 1.3px
    ) !important;
  background-size: 18px 18px !important;
  color: #55392b !important;
}

.hot-access-intro__inner {
  width: min(100%, 880px) !important;
  margin: 0 auto !important;
  padding: clamp(30px, 5vw, 56px) !important;
  border: 2px solid #8b4d29 !important;
  border-radius: 22px !important;
  background: rgba(255, 253, 246, 0.94) !important;
  box-shadow: 0 10px 0 rgba(91, 48, 26, 0.16) !important;
  text-align: center !important;
}

.hot-access-intro__eyebrow {
  margin: 0 0 18px !important;
  color: #b78925 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
}

.hot-access-intro__title {
  margin: 0 0 30px !important;
  color: #754326 !important;
  font-family:
    "Shippori Mincho",
    "Noto Serif JP",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.1em !important;
}

.hot-access-intro__title::after {
  content: "" !important;
  display: block !important;
  width: 58px !important;
  height: 4px !important;
  margin: 22px auto 0 !important;
  border-radius: 999px !important;
  background: #ffc928 !important;
}

.hot-access-intro__text {
  max-width: 680px !important;
  margin: 0 auto !important;
}

.hot-access-intro__text p {
  margin: 0 0 16px !important;
  color: #604233 !important;
  font-family:
    "Shippori Mincho",
    "Noto Serif JP",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 2.05 !important;
  letter-spacing: 0.04em !important;
}

.hot-access-intro__text p:last-child {
  margin-bottom: 0 !important;
}

.hot-access-intro__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 30px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hot-access-intro__tags li {
  padding: 8px 14px !important;
  border: 1px solid rgba(139, 77, 41, 0.46) !important;
  border-radius: 999px !important;
  background: #fff0bf !important;
  color: #754326 !important;
  font-family:
    "Shippori Mincho",
    "Yu Mincho",
    serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .hot-access-intro {
    padding: 58px 16px !important;
    background-size: 16px 16px !important;
  }

  .hot-access-intro__inner {
    padding: 28px 20px !important;
    border-radius: 17px !important;
    box-shadow: 0 6px 0 rgba(91, 48, 26, 0.14) !important;
  }

  .hot-access-intro__eyebrow {
    margin-bottom: 14px !important;
    font-size: 10px !important;
  }

  .hot-access-intro__title {
    margin-bottom: 24px !important;
    font-size: 26px !important;
    letter-spacing: 0.06em !important;
  }

  .hot-access-intro__title::after {
    margin-top: 16px !important;
  }

  /* スマホも本文16px */
  .hot-access-intro__text p {
    margin-bottom: 16px !important;
    font-size: 16px !important;
    line-height: 1.95 !important;
    text-align: left !important;
  }

  .hot-access-intro__tags {
    gap: 8px !important;
    margin-top: 24px !important;
  }

  .hot-access-intro__tags li {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
}

/* Block: store_info / sec_1783046175383 */
/* =========================================================
   「ほっと。」店舗案内ページ 店舗概要  ＜CSS 完全版＞
   指示書の【店舗案内】②店舗概要と同じ10項目にします

   ▼▼ 貼り付け先 ▼▼
     FluxCore Pro 管理画面
     → ACCSES ページ（LP）
     → 左のブロック一覧から「店舗概要」を選択
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、まるごとコピペしてください。
   ※ PHP・HTMLは一切さわっていません。

   ★このCSSだけでは完成しません。
     下の「■ブロックの入力欄で直すもの」も必ず行ってください。

   ─────────────────────────────────────────
   ■ このCSSでやっていること
   ─────────────────────────────────────────
   1. 7行目「席数」を非表示
      → 11行目の「座席数」と内容が重複していたため
        （指示書の表記は「座席数」なのでそちらを残します）

   2. 8行目「駐車場：なし」を非表示
      → 指示書の店舗概要にない項目のため

   3. 最後の行（禁煙喫煙）を表示に戻す
      → 既存CSSに tr:last-child を非表示にする指定が入っていて、
        「禁煙喫煙：喫煙可」が消えていました

   これで指示書と同じ並びになります：
     店名／電話番号／住所／アクセス／営業時間／定休日／
     貸切／お支払方法／座席数／禁煙喫煙

   ─────────────────────────────────────────
   ■ ブロックの入力欄で直すもの（CSSでは直せません）
   ─────────────────────────────────────────
   「店舗概要」ブロックの入力欄で、次の2つを直してください。

   ・電話番号
       いま  ： 09033589727
       指示書： 090-3358-9727     ← ハイフンを入れる

   ・営業時間
       いま  ： 11:00〜17:00
       指示書： 11：00～17：00     ← 全角のコロンと波線

   ※ ほかの項目（店名・住所・アクセス・定休日・貸切・
     お支払方法・座席数・禁煙喫煙）は指示書どおりでした。

   ─────────────────────────────────────────
   ■ 注意
   ─────────────────────────────────────────
   このCSSは「7行目・8行目を隠す」という指定なので、
   ブロックの項目の並び順を変えると隠れる行がずれます。
   並び順を変えたときはお知らせください。
========================================================= */


/* =========================================================
   既存CSSの「最後の行を隠す」指定を打ち消す
   （禁煙喫煙の行を表示するため）
========================================================= */
#sec_1783046175383 .store-info-table tbody tr:last-child {
  display: table-row !important;
}


/* =========================================================
   7行目「席数」と8行目「駐車場」を非表示
   （席数は座席数と重複、駐車場は指示書にない項目）
========================================================= */
#sec_1783046175383 .store-info-table tbody tr:nth-child(7),
#sec_1783046175383 .store-info-table tbody tr:nth-child(8) {
  display: none !important;
}

/* Block: gmap / sec_1783042756212 */
.gmap-section {padding: 90px 20px; background: #101718; color: #fff7ea;}
.gmap-container {max-width: 1080px; margin: 0 auto;}
.gmap-header {max-width: 820px; margin: 0 auto 34px; text-align: center;}
.gmap-title {font-family: 'Shippori Mincho', serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: 0.1em; color: var(--gold-light); margin: 0 0 12px;}
.gmap-desc {font-size: 14px; line-height: 1.9; color: #e0c8a0; margin: 0;}
.gmap-frame-wrap {position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 320px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-paper);}
.gmap-frame-wrap iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.12) contrast(.97);}
.gmap-placeholder {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--text-sub); font-size: 13px;}
@media (max-width: 768px) {.gmap-section {padding: 64px 15px;} .gmap-frame-wrap {aspect-ratio: 4 / 3; min-height: 260px;}}


/* =========================================================
   Page: gallery / ギャラリー
========================================================= */

/* Block: hero_page / sec_1786519878650 */
.page-hero-wrapper {
  position: relative;
  min-height: 360px;
  padding: 150px 20px 90px;
  text-align: center;
  color: var(--text-main);
  background-size: cover;
  background-position: center;
}
.page-hero-wrapper::after, .ph-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,23,24,.82), rgba(31,47,48,.46));
}
.ph-container { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ph-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--gold-light); letter-spacing: .16em; }
.ph-desc { margin-top: 16px; color: var(--text-sub); font-size: 14px; line-height: 2; }

/* Block: image_grid / sec_1786519881483 */
/* 画像挿入パーツ（⑦ image_grid） */
.image-grid-section {padding: 90px 20px; background: #101718; color: #fff7ea;}
.image-grid-container {max-width: 1120px; margin: 0 auto;}
.image-grid-header {max-width: 820px; margin: 0 auto 34px; text-align: center;}
.image-grid-title {font-family: 'Shippori Mincho', serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: 0.1em; color: var(--gold-light); margin: 0 0 12px;}
.image-grid-desc {font-size: 14px; line-height: 1.9; color: #e0c8a0; margin: 0;}
.image-grid {display: grid; gap: 16px;}
.image-grid-pc-2 {grid-template-columns: repeat(2, 1fr);}
.image-grid-pc-3 {grid-template-columns: repeat(3, 1fr);}
.image-grid-pc-4 {grid-template-columns: repeat(4, 1fr);}
.image-grid-item {overflow: hidden;}
.image-grid-item img {display: block; width: 100%; height: auto;}
/* 画像の形（CSSで調整可能） */
.image-grid-shape-square .image-grid-item img {aspect-ratio: 1 / 1; height: auto; object-fit: cover;}
.image-grid-shape-circle .image-grid-item img {aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 999px;}
.image-grid-shape-rounded .image-grid-item img {border-radius: 12px;}
.image-grid-shape-free .image-grid-item img {border-radius: 0;}
.image-grid-empty {text-align: center; color: var(--text-sub); font-size: 13px; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 8px;}
@media (max-width: 768px) {
  .image-grid-section {padding: 64px 15px;}
  .image-grid {gap: 12px;}
  .image-grid-sp-1 {grid-template-columns: 1fr;}
  .image-grid-sp-2 {grid-template-columns: repeat(2, 1fr);}
}


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

/* Block: global_footer / sec_1782112173284 */
/* =========================================================
   14 フッター
   2026.08.25 クライアント修正版  ＜CSS 完全版＞

   ▼▼ 貼り付け先 ▼▼
     フッター（FOOTERページ）→ 「グローバルフッター」ブロック（sec_1782112173284）
     → 右側の「セクション個別CSS」の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください（差分ではありません）。
   ※ PHPは一切さわっていません。

   ─────────────────────────────────────────
   ■ 今回の修正内容（本文中の「★2026.08修正」が該当箇所です）
   ─────────────────────────────────────────
   1. フッターの店舗情報（住所・電話・営業時間・定休日）13px → 15px（スマホ 14px）
========================================================= */

/* =========================================================
   「ほっと。」フッター用CSS  ＜完全版＞

   貼り付け先：
     FluxCore Pro 管理画面
     → 共通フッター (footer.php)
     → 「グローバルフッター」ブロック
     → セクション個別CSS の欄

   ※ この欄の中身を全部消して、このファイルの中身を
      まるごとコピペしてください。
   ※ 画像は使っていないので、画像パスの設定は不要です。
   ※ PHP・HTMLは一切さわっていません。CSSだけで完結します。

   --- 内容（指示書の「フッター：店名ロゴ、グロナビ」に対応）---
   ・店名（ほっと。）＋ キャッチのバッジ
   ・グローバルナビ（ヘッダーと同じ6ページ・同じ並び順）
   ・コピーライト
   ・住所／電話／営業時間の表、決済アイコン、Googleマップは
     すべて非表示にして、シンプルな構成にしています
   ・背景はクリーム色で、暗くならないようにしています
   ・追従フッターボタン（電話／Instagram）もあわせて配色を統一

   --- 補足：フッターナビについて ---
   フッターナビの項目名はテーマ側で固定されており、
   そのままだと「お品書き」「コース」「席・個室」「お客様の声」
   「ACCSES ページ」といった、この店舗では使わない名前が出ます。
   PHPをさわらずに済むよう、CSSで以下を行っています。
     ・使わないページ（席・個室／お客様の声）を非表示
     ・残りをヘッダーと同じ名前に表示し直す
     ・ヘッダーと同じ並び順に並べ替える
   ※ 将来ページを増やした場合は、この部分の調整が必要になります。

   --- 使用カラー ---
   ブラウン       #7a4526  店名・ナビの文字
   レモン         #f9c826  バッジ・ホバー
   クリーム       #fffaee  背景
   ダークブラウン #4a2f22  レモンの上に乗る文字色
   うすいブラウン #a8825f  コピーライト
========================================================= */


/* =========================================================
   フッター全体
========================================================= */
.global-footer {
  background: #fffaee !important;
  border-top: 3px dashed rgba(122, 69, 38, .28) !important;
  color: #4a2f22 !important;
  padding: 64px 20px 44px !important;
}

/* 住所・電話・営業時間の表／決済アイコン／Googleマップを非表示 */
.info-grid {
  display: none !important;
}


/* =========================================================
   店名 ＋ グローバルナビ
   （column-reverse で「店名 → ナビ」の順に表示しています）
========================================================= */
.footer-nav-wrap {
  display: flex !important;
  flex-direction: column-reverse;
  align-items: center;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}

/* 店名ロゴ */
.footer-nav-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-nav-brand h2 {
  font-family: var(--font-serif);
  color: #7a4526 !important;
  font-size: 40px;
  letter-spacing: .1em;
  line-height: 1.2;
  text-align: center;
}
/* 店名の下のレモンバッジ
   （文言を変えたい場合は下の content: "..." を書き換えてください） */
.footer-nav-brand::after {
  content: "しまなみ海道・瀬戸田のカフェ";
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .1em;
  color: #4a2f22;
  background: #f9c826;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-weight: 700;
  white-space: nowrap;
}

/* グローバルナビ */
.footer-nav {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  width: 100%;
}
.footer-nav-link {
  color: #7a4526 !important;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .1em;
  padding: 4px 22px;
  transition: color .2s ease;
}
.footer-nav-link:hover {
  color: #c98a2e !important;
}

/* この店舗では使わないページを非表示 */
.footer-nav-link[href*="seats.php"],
.footer-nav-link[href*="reviews.php"] {
  display: none !important;
}

/* ヘッダーと同じ名前・同じ並び順に揃える */
.footer-nav-link[href*="index.php"] { order: 1; font-size: 0; }
.footer-nav-link[href*="index.php"]::before { content: "TOP"; font-size: 15px; }

.footer-nav-link[href*="courses.php"] { order: 2; font-size: 0; }
.footer-nav-link[href*="courses.php"]::before { content: "こだわり"; font-size: 15px; }

.footer-nav-link[href*="menu.php"] { order: 3; font-size: 0; }
.footer-nav-link[href*="menu.php"]::before { content: "メニュー"; font-size: 15px; }

.footer-nav-link[href*="gallery"] { order: 4; }

.footer-nav-link[href*="news.php"] { order: 5; }

.footer-nav-link[href*="accses"] { order: 6; font-size: 0; }
.footer-nav-link[href*="accses"]::before { content: "店舗案内"; font-size: 15px; }


/* =========================================================
   コピーライト
========================================================= */
.footer-copy-text {
  background: #fffaee !important;
  color: #a8825f !important;
  border-top: 1px dashed rgba(122, 69, 38, .28) !important;
  padding: 18px 20px !important;
  font-size: 11px !important;
}


/* =========================================================
   追従フッターボタン（電話／Instagram）
========================================================= */
.fc-floating-action {
  background: #fffaee !important;
  color: #4a2f22 !important;
  border: 2px solid #7a4526 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 0 rgba(122, 69, 38, .45) !important;
}
.fc-floating-action:hover {
  background: #f9c826 !important;
  color: #4a2f22 !important;
}


/* =========================================================
   PC（993px以上）：ナビの区切り線
   （1行に収まるPCのときだけ縦の破線を出します）
========================================================= */
@media (min-width: 993px) {
  .footer-nav-link {
    border-right: 1px dashed rgba(122, 69, 38, .4);
  }
  .footer-nav-link[href*="accses"] {
    border-right: none;
  }
}


/* =========================================================
   スマホ（992px以下）
   （折り返したときに区切り線が余るので、線は出さず余白で調整）
========================================================= */
@media (max-width: 992px) {
  .global-footer {
    padding: 48px 20px 36px !important;
  }
  .footer-nav-brand h2 {
    font-size: 32px;
  }
  .footer-nav {
    gap: 14px 0;
  }
  .footer-nav-link {
    padding: 4px 16px;
  }

  /* 追従フッターバー */
  .fc-floating-actions {
    background: rgba(122, 69, 38, .96) !important;
    border-top: 2px solid #f9c826 !important;
  }
  .fc-floating-action {
    box-shadow: none !important;
    border-width: 1px !important;
  }
}


/* =========================================================
   ★2026.08修正 フッターの店舗情報（住所・電話・営業時間・定休日）
   テーマ側で 13px と小さかったので 15px に拡大
========================================================= */
.global-footer .footer-table th,
.global-footer .footer-table td {
  font-size: 15px !important;
  line-height: 1.9 !important;
}

@media (max-width: 768px) {
  .global-footer .footer-table th,
  .global-footer .footer-table td {
    font-size: 14px !important;
  }
}