/* =========================================================
   FluxCore Pro Generated Custom CSS
   Auto generated from fc_pages.layout_json advanced.custom_css
   Last updated: 2026-09-10 19:48:20
========================================================= */

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

/* Block: global_header / sec_1782112078518 */
/* =========================================================
   BAR Frontier ─ global_header
   PC：左固定サイドバー型ヘッダー / SP：上部バー＋全画面メニュー
   ※ HTMLは一切変更していません（FlexCore既存マークアップのみ）
========================================================= */

:root{
  --fr-sidebar-w:  236px;
  --fr-orange:     #ff9f45;
  --fr-orange-dp:  #f0801f;
  --fr-amber:      #ffc978;
  --fr-line:       rgba(255,178,105,.22);
  --fr-line-soft:  rgba(255,178,105,.12);
  --fr-text:       #fdf3e7;
  --fr-text-mute:  #cfb69c;
}

/* ---- 1) 本文をサイドバー幅ぶん右へ ---- */
@media (min-width:1101px){
  body{ padding-left: var(--fr-sidebar-w); }
}

/* ---- 2) ヘッダー本体：左固定サイドバー ---- */
.global-header{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1000;
  width: var(--fr-sidebar-w);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 30px 20px 26px;
  background:
    radial-gradient(130% 55% at 50% 0%, rgba(255,159,69,.13) 0%, rgba(255,159,69,0) 62%),
    linear-gradient(180deg, #201710 0%, #140f0c 100%);
  border-bottom: 0;
  border-right: 1px solid var(--fr-line);
  backdrop-filter: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.global-header::-webkit-scrollbar{ width:0; height:0; }

/* ---- 3) SEO用H1：DOMに残したまま視覚的に隠す ---- */
.header-page-eyebrow{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ---- 4) ロゴ ---- */
.header-logo{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .10em;
  line-height:1.4;
  color: var(--fr-amber);
  text-decoration:none;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--fr-line-soft);
  white-space: nowrap;
}
.header-logo img{
  /* 背景を透過させたロゴ用。白い下地が無いぶん大きめに出す */
  max-height: 120px !important;
  width: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.45));
}

/* ---- 5) ナビゲーション（縦並び） ---- */
.desktop-nav{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  padding: 24px 0 22px;
}
.desktop-nav a{
  position: relative;
  display:flex; align-items:center;
  min-height: 44px;
  padding: 10px 12px 10px 16px;
  border-radius: 8px;
  color: var(--fr-text-mute);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration:none;
  transition: color .25s ease, background-color .25s ease;
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0; top:50%; bottom:auto;
  transform: translateY(-50%);
  width:3px; height:0;
  border-radius:3px;
  background: linear-gradient(180deg, var(--fr-amber), var(--fr-orange-dp));
  transition: height .25s ease;
}
.desktop-nav a:hover{ color: var(--fr-text); background: rgba(255,159,69,.07); }
.desktop-nav a:hover::after{ width:3px; height:46%; }
.desktop-nav a.active{
  color:#fff;
  background: linear-gradient(90deg, rgba(255,159,69,.20), rgba(255,159,69,.04));
}
.desktop-nav a.active::after{ width:3px; height:58%; }

/* ---- 6) 下部ボタン：サイドバー最下部に固定 ---- */
.header-btns{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--fr-line-soft);
}
.btn-header-tel{
  display:flex; align-items:center; justify-content:center; gap:8px;
  color: var(--fr-text);
  font-size: 15px; font-weight: 800; letter-spacing:.04em;
  white-space:nowrap; text-decoration:none;
}
.btn-header-reserve{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%;
  min-height:50px;
  padding: 13px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #ff8a3d 0%, #ffc46b 100%);
  color:#2a1608;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height:1;
  white-space: nowrap;
  text-decoration:none;
  box-shadow: 0 8px 22px rgba(255,138,61,.26);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-header-reserve:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(255,138,61,.34);
  background: linear-gradient(100deg, #ff8a3d 0%, #ffc46b 100%);
  color:#2a1608;
}
/* カレンダーアイコン → Instagramアイコンに差し替え（HTMLを触らずCSSのみ） */
.btn-header-reserve i{ display:none; }
.btn-header-reserve::before{
  font-family:"Font Awesome 6 Brands";
  font-weight:400;
  content:"\f16d";
  font-size:18px;
  line-height:1;
}

/* ---- 7) ハンバーガー（PCでは非表示） ---- */
.menu-trigger{ display:none; }
.mobile-nav-overlay .menu-trigger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:10px;
  border:1px solid var(--fr-line);
  background: rgba(255,159,69,.08);
  color: var(--fr-amber);
  font-size:17px; line-height:1;
  cursor:pointer;
}

/* ---- 7-b) 画面の高さが低いPC（ノートPC等）：余白とロゴを自動で圧縮 ---- */
/*        ※ 文字サイズは変えないので 14px 以上を維持します            */
@media (min-width:1101px) and (max-height:760px){
  .global-header{ padding: 20px 18px 20px; }
  .header-logo{ padding-bottom: 18px; }
  .header-logo img{ max-height: 86px !important; }
  .desktop-nav{ padding: 16px 0 14px; }
  .desktop-nav a{ min-height: 40px; padding: 8px 12px 8px 16px; }
  .header-btns{ padding-top: 16px; }
  .btn-header-reserve{ min-height: 46px; padding: 11px 14px; }
}

/* ---- 8) スマホ・タブレット（1100px以下）：上部バーに戻す ---- */
@media (max-width:1100px){
  body{ padding-left:0; }
  .global-header{
    top:0; left:0; right:0; bottom:auto;
    width:100%;
    min-height:62px;
    flex-direction: row;
    align-items:center;
    gap:12px;
    padding: 9px 16px;
    border-right:0;
    border-bottom:1px solid var(--fr-line-soft);
    background: linear-gradient(180deg, rgba(20,15,12,.95) 0%, rgba(20,15,12,.82) 100%);
    backdrop-filter: blur(12px);
    overflow: visible;
  }
  .header-logo{
    justify-content:flex-start;
    padding-bottom:0;
    border-bottom:0;
    font-size:16px;
  }
  .header-logo img{ max-height:46px !important; }
  .desktop-nav{ display:none; }
  .header-btns{ display:none; }
  .menu-trigger{
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:auto;
    width:44px; height:44px;
    border-radius:10px;
    border:1px solid var(--fr-line);
    background: rgba(255,159,69,.08);
    color: var(--fr-amber);
    font-size:17px; line-height:1;
    cursor:pointer;
  }
}

/* ---- 9) スマホ用フルスクリーンメニュー ---- */
.mobile-nav-overlay{
  position:fixed; inset:0; z-index:2000;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  padding: 78px 24px 40px;
  background:
    radial-gradient(120% 45% at 50% 0%, rgba(255,159,69,.14) 0%, rgba(255,159,69,0) 60%),
    #130e0b;
  opacity:0; visibility:hidden;
  transition: opacity .28s ease, visibility .28s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav-overlay.active{ opacity:1; visibility:visible; }
.mobile-nav-overlay a{
  display:flex; align-items:center;
  min-height:54px;
  padding: 13px 6px;
  border-bottom:1px solid var(--fr-line-soft);
  color: var(--fr-text);
  font-family: var(--font-sans);
  font-size:17px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.4;
  white-space:nowrap;
  text-decoration:none;
}
.mobile-nav-overlay a:active{ color: var(--fr-amber); }
.mobile-nav-overlay .btn-header-reserve{
  margin-top:26px;
  border-bottom:0;
  min-height:54px;
  font-size:16px;
}
/* =========================================================
   ② スマホ版ヘッダー（メニューを開いた状態）
   ・文字を中央揃えに
   ・Instagramボタンを間延びさせずコンパクトに
   貼り付け先：HEADERページ → global_header ブロック
               → セクション個別CSS の末尾に追記
========================================================= */

@media (max-width: 1100px){

  /* 文字だけ中央に寄せる。
     リンク自体は横幅いっぱいのまま＝区切り線は全幅を保ちます */
  .mobile-nav-overlay a{
    justify-content: center !important;
  }

  /* Instagramボタンだけ、中身の幅に合わせてコンパクトに */
  .mobile-nav-overlay .btn-header-reserve{
    align-self: center !important;   /* 横いっぱいに伸びるのを止める */
    width: auto !important;
    min-width: 0 !important;
    margin-top: 28px !important;
    padding: 12px 28px !important;
    min-height: 46px !important;
    font-size: 15px !important;
  }
}


/* =========================================================
   Page: index / TOP｜大分市都町のBAR Frontier｜カラオケ・ダーツを楽しめるバー
========================================================= */

/* Block: hero_main / sec_1782110119323 */
/* =========================================================
   BAR Frontier - TOP ファーストビュー
   使用ブロック：ヒーロー（メイン画像・動画） hero_main
   適用方法：このブロックの現在のCSSを全置換
   HTML追加：不要
========================================================= */

/* ---------- 1. ファーストビュー全体 ---------- */
.hero-wrapper {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: #130e0b;
  box-shadow: inset 0 0 0 1px rgba(255, 178, 105, .12);
}

.hero-wrapper.hero-has-slider::after { display: none; }

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17, 11, 8, .78) 0%, rgba(17, 11, 8, .40) 42%, rgba(17, 11, 8, .14) 72%),
    linear-gradient(0deg, rgba(12, 8, 6, .70) 0%, transparent 38%),
    radial-gradient(circle at 72% 30%, rgba(255, 159, 69, .10), transparent 36%);
}

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

.hero-slider { overflow: hidden; }
.hero-slide { z-index: 1; }

.hero-slide-img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: saturate(.92) contrast(1.03);
  transform: scale(1.015);
}

/* 写真ごとに見せたい位置を調整。画像は引き続き管理画面から変更可能 */
.hero-slide:nth-child(1) .hero-slide-img { background-position: 48% center; }
.hero-slide:nth-child(2) .hero-slide-img { background-position: 50% center; }
.hero-slide:nth-child(3) .hero-slide-img { background-position: 54% center; }

/* ---------- 2. キャッチコピー ---------- */
.hero-slide-caption {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 920px;
  padding: 0 clamp(34px, 7vw, 96px);
  color: #fff8ef;
  text-align: left;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .68);
}

/* 管理画面で「中央・左」を選ぶと、写真の中央左に配置 */
.hero-cap-mid-left .hero-slide-caption {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  text-align: left;
}

.hero-slide-caption::before {
  content: "BAR FRONTIER";
  display: block;
  margin: 0 0 18px;
  color: #ffc978;
  font-family: var(--font-en, var(--font-sans), sans-serif);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .22em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
}

.hero-slide-caption::after {
  content: "";
  display: block;
  width: 76px;
  height: 3px;
  margin-top: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a3d, #ffc978);
  box-shadow: 0 4px 16px rgba(255, 138, 61, .28);
}

.hero-slide-catch {
  max-width: none;
  margin: 0;
  color: #fff8ef !important;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(34px, 4.4vw, 62px) !important;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .055em;
  white-space: nowrap;
}

/* 管理画面に以前の改行が残っていても、見出しは必ず1行で表示 */
.hero-slide-catch br { display: none; }

.hero-slide-sub {
  max-width: 34em;
  margin: 18px 0 0;
  color: #f5dfc8 !important;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(16px, 1.5vw, 18px) !important;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .04em;
  text-wrap: balance;
}

/* ---------- 3. スライド切替 ---------- */
.hero-slider-fade .hero-slide,
.hero-slider-zoom .hero-slide,
.hero-slider-zoomout .hero-slide {
  opacity: 0;
  transition: opacity 1.15s ease;
}

.hero-slider-fade .hero-slide.is-active,
.hero-slider-zoom .hero-slide.is-active,
.hero-slider-zoomout .hero-slide.is-active {
  opacity: 1;
}

.hero-slide.is-active .hero-slide-img {
  animation: fr-hero-breathe 7.5s ease-out both;
}

@keyframes fr-hero-breathe {
  from { transform: scale(1.015); }
  to   { transform: scale(1.075); }
}

.hero-slider-dots {
  position: absolute;
  z-index: 4;
  left: clamp(34px, 7vw, 96px);
  right: auto;
  bottom: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}

.hero-slider-dot {
  width: 28px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 248, 239, .42);
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease;
}

.hero-slider-dot.is-active {
  width: 48px;
  background: #ffc978;
}

/* 右下のスクロール誘導。装飾扱いのためHTML追加は不要 */
.hero-slider::after {
  content: "SCROLL";
  position: absolute;
  z-index: 4;
  right: 28px;
  bottom: 38px;
  color: rgba(255, 248, 239, .78);
  font-family: var(--font-en, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

/* ---------- 4. スマートフォン・タブレット ---------- */
@media (max-width: 1100px) {
  .hero-wrapper {
    height: 100svh;
    min-height: 620px;
  }

  .hero-slide::after {
    background:
      linear-gradient(0deg, rgba(16, 10, 7, .88) 0%, rgba(16, 10, 7, .42) 54%, rgba(16, 10, 7, .24) 100%),
      radial-gradient(circle at 70% 30%, rgba(255, 159, 69, .10), transparent 40%);
  }

  /* 管理画面の表示位置に関係なく、SPは下部左揃えに統一 */
  .hero-cap-top-left .hero-slide-caption,
  .hero-cap-top-center .hero-slide-caption,
  .hero-cap-top-right .hero-slide-caption,
  .hero-cap-mid-left .hero-slide-caption,
  .hero-cap-mid-center .hero-slide-caption,
  .hero-cap-mid-right .hero-slide-caption,
  .hero-cap-bottom-left .hero-slide-caption,
  .hero-cap-bottom-center .hero-slide-caption,
  .hero-cap-bottom-right .hero-slide-caption {
    top: auto;
    bottom: 17%;
    transform: none;
    max-width: 100%;
    padding: 0 24px;
    text-align: left;
  }

  .hero-slide-caption::before {
    margin-bottom: 12px;
    font-size: 14px;
    letter-spacing: .16em;
  }

  .hero-slide-caption::after {
    width: 58px;
    height: 3px;
    margin-top: 20px;
  }

  .hero-slide-catch {
    max-width: none;
    font-size: clamp(19px, 5.8vw, 28px) !important;
    line-height: 1.45;
    letter-spacing: .025em;
  }

  .hero-slide-sub {
    max-width: 26em;
    margin-top: 13px;
    font-size: 15px !important;
    line-height: 1.8;
  }

  .hero-slider-dots {
    left: 24px;
    bottom: 28px;
  }

  .hero-slider-dot {
    width: 24px;
    height: 5px;
  }

  .hero-slider-dot.is-active { width: 42px; }
  .hero-slider::after { display: none; }
}

@media (max-width: 600px) {
  .hero-wrapper { min-height: 580px; }

  .hero-slide:nth-child(1) .hero-slide-img { background-position: 46% center; }
  .hero-slide:nth-child(2) .hero-slide-img { background-position: 50% center; }
  .hero-slide:nth-child(3) .hero-slide-img { background-position: 55% center; }

  .hero-cap-top-left .hero-slide-caption,
  .hero-cap-top-center .hero-slide-caption,
  .hero-cap-top-right .hero-slide-caption,
  .hero-cap-mid-left .hero-slide-caption,
  .hero-cap-mid-center .hero-slide-caption,
  .hero-cap-mid-right .hero-slide-caption,
  .hero-cap-bottom-left .hero-slide-caption,
  .hero-cap-bottom-center .hero-slide-caption,
  .hero-cap-bottom-right .hero-slide-caption {
    bottom: 18%;
    padding: 0 20px;
  }

  .hero-slide-catch {
    font-size: clamp(19px, 5.8vw, 28px) !important;
    letter-spacing: .02em;
  }

  .hero-slider-dots {
    left: 20px;
    bottom: 24px;
  }
}

@media (max-height: 650px) and (max-width: 1100px) {
  .hero-wrapper { min-height: 540px; }

  .hero-cap-top-left .hero-slide-caption,
  .hero-cap-top-center .hero-slide-caption,
  .hero-cap-top-right .hero-slide-caption,
  .hero-cap-mid-left .hero-slide-caption,
  .hero-cap-mid-center .hero-slide-caption,
  .hero-cap-mid-right .hero-slide-caption,
  .hero-cap-bottom-left .hero-slide-caption,
  .hero-cap-bottom-center .hero-slide-caption,
  .hero-cap-bottom-right .hero-slide-caption {
    bottom: 16%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero-slide-img { animation: none; }

  .hero-slider-fade .hero-slide,
  .hero-slider-zoom .hero-slide,
  .hero-slider-zoomout .hero-slide,
  .hero-slider-dot {
    transition: none;
  }
}
/* =========================================================
   ① TOPページ ファーストビュー：見出し・サブを左寄せ
   貼り付け先：TOPページ → メインビジュアル(hero_main)ブロック
               → セクション個別CSS の末尾に追記
========================================================= */

/* blocks.css の .hero-cap-mid-center{text-align:center}（詳細度0,2,0）に
   負けていたため、同じ詳細度＋!important で確実に左寄せにします。
   管理画面の「キャプション位置」をどれに変えても左寄せのままです。 */
.hero-slider[class*="hero-cap-"] .hero-slide-caption{
  text-align: left !important;
}

/* タイトルとサブタイトルの間隔（サブを設定したときの見え方を整える） */
.hero-slide-sub{
  margin-top: 16px !important;
}

@media (max-width: 1100px){
  .hero-slide-sub{ margin-top: 12px !important; }
}

/* Block: latest_news_bar / sec_1788749144876 */
/* =========================================================
   BAR Frontier - TOP 新着ニュースバー
   使用ブロック：新着ニュースバー latest_news_bar
   適用方法：このブロックの現在のCSSを全置換
   HTML追加：不要
========================================================= */

/* ---------- 1. ヒーローから次のコンテンツへのつなぎ ---------- */
.news-bar-section {
  position: relative;
  z-index: 6;
  margin-top: 0;
  padding: 56px clamp(24px, 5vw, 64px) 72px !important;
  color: #fff8ef !important;
  background: #17100c !important;
  text-align: left !important;
}

.news-bar-container {
  position: relative;
  width: 100%;
  max-width: 1080px !important;
  margin: 0 auto !important;
}

/* ---------- 2. ニュース1件分 ---------- */
.news-bar-link {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 48px !important;
  align-items: center !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  gap: clamp(20px, 3vw, 42px) !important;
  min-height: 92px;
  padding: 18px 20px 18px clamp(20px, 3vw, 36px) !important;
  overflow: hidden;
  color: #fff8ef !important;
  background:
    linear-gradient(105deg, rgba(51, 32, 20, .98), rgba(28, 20, 15, .98)) !important;
  border: 1px solid rgba(255, 178, 105, .30) !important;
  border-radius: 16px !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .34) !important;
  text-align: left !important;
  text-decoration: none;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}

.news-bar-link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #ff8a3d, #ffc978);
}

.news-bar-link::after {
  content: "";
  position: absolute;
  top: -74px;
  right: 74px;
  width: 180px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 201, 120, .10);
  border-radius: 50%;
  pointer-events: none;
}

.news-bar-link + .news-bar-link {
  margin-top: 12px !important;
}

.news-bar-link:hover {
  transform: translateY(-3px) !important;
  color: #fff8ef !important;
  background:
    linear-gradient(105deg, rgba(66, 40, 23, .99), rgba(32, 22, 16, .99)) !important;
  border-color: rgba(255, 178, 105, .62) !important;
  box-shadow: 0 28px 62px rgba(0, 0, 0, .42) !important;
}

.news-bar-link:focus-visible {
  outline: 3px solid #ffc978;
  outline-offset: 4px;
}

/* ---------- 3. NEWSラベル・日付 ---------- */
.news-bar-left {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
}

.news-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 34px;
  padding: 6px 13px !important;
  color: #2a1608 !important;
  background: linear-gradient(100deg, #ff8a3d, #ffc978) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--font-en, var(--font-sans), sans-serif) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2;
  letter-spacing: .12em !important;
}

.news-date {
  color: #e8c9aa !important;
  font-family: var(--font-en, var(--font-sans), sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5;
  letter-spacing: .08em !important;
}

/* ---------- 4. 記事タイトル ---------- */
.news-title {
  min-width: 0;
  margin: 0 !important;
  color: #fff8ef !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  letter-spacing: .03em;
  text-align: left !important;
  line-break: strict;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* ---------- 5. 矢印 ---------- */
.news-arrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  color: #ffc978 !important;
  background: rgba(255, 159, 69, .08);
  border: 1px solid rgba(255, 178, 105, .28);
  border-radius: 50%;
  transition: transform .25s ease, background-color .25s ease;
}

.news-arrow i { font-size: 14px; }

.news-bar-link:hover .news-arrow {
  transform: translateX(3px);
  color: #2a1608 !important;
  background: #ffc978;
}

/* ---------- 6. スマートフォン ---------- */
@media (max-width: 768px) {
  .news-bar-section {
    margin-top: 0;
    padding: 36px 16px 52px !important;
    background: #17100c !important;
  }

  .news-bar-link {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: auto auto;
    gap: 9px 14px !important;
    min-height: 112px;
    padding: 18px 16px 18px 20px !important;
    border-radius: 14px !important;
    text-align: left !important;
  }

  .news-bar-link::after {
    top: -48px;
    right: -34px;
    width: 130px;
  }

  .news-bar-left {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .news-badge {
    min-width: 64px;
    min-height: 32px;
    padding: 5px 11px !important;
    font-size: 14px !important;
  }

  .news-date { font-size: 14px !important; }

  .news-title {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    text-align: left !important;
  }

  .news-arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 360px) {
  .news-bar-section { padding-right: 12px !important; padding-left: 12px !important; }

  .news-bar-link {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 8px 10px !important;
    padding-right: 12px !important;
    padding-left: 17px !important;
  }

  .news-badge {
    min-width: 60px;
    padding-right: 9px !important;
    padding-left: 9px !important;
  }

  .news-arrow {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-bar-link,
  .news-arrow { transition: none; }
}

/* Block: custom_html / sec_1788749166510 */
/* =========================================================
   BAR Frontier - TOP 当店案内／CONCEPT
   使用ブロック：ニュースバー直後の既存カスタムHTML
   適用方法：このブロックのCSSを全置換
========================================================= */

.fr-top-story,
.fr-top-story * { box-sizing: border-box; }

.fr-top-story {
  --fr-bg: #17100c;
  --fr-panel: #24170f;
  --fr-cream: #fff8ef;
  --fr-muted: #e8c9aa;
  --fr-orange: #ff963f;
  --fr-gold: #ffc978;
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) clamp(24px, 5vw, 64px);
  color: var(--fr-cream);
  background:
    radial-gradient(circle at 6% 18%, rgba(255, 150, 63, .11), transparent 25%),
    radial-gradient(circle at 94% 86%, rgba(255, 201, 120, .07), transparent 23%),
    var(--fr-bg);
}

.fr-top-story::before {
  content: "FRONTIER";
  position: absolute;
  top: 28%;
  right: -0.08em;
  color: rgba(255, 248, 239, .025);
  font-family: var(--font-en, sans-serif);
  font-size: clamp(90px, 17vw, 250px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  pointer-events: none;
}

.fr-top-about,
.fr-top-concept {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin-inline: auto;
}

.fr-top-about {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(52px, 8vw, 112px);
}

.fr-top-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  color: var(--fr-gold);
  font-family: var(--font-en, var(--font-sans), sans-serif);
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .18em;
}

.fr-top-eyebrow::before {
  content: "";
  flex: 0 0 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--fr-orange), var(--fr-gold));
}

.fr-top-heading {
  margin: 0;
  color: var(--fr-cream) !important;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(32px, 4.2vw, 56px) !important;
  font-weight: 800;
  line-height: 1.38;
  letter-spacing: .055em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.fr-top-lead {
  margin: 28px 0 0;
  color: #ffe1b2;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(20px, 2vw, 25px) !important;
  font-weight: 750;
  line-height: 1.8;
  letter-spacing: .06em;
  word-break: keep-all;
}

.fr-top-body {
  margin-top: 30px;
  color: #f2dfcb;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px !important;
  line-height: 2;
  letter-spacing: .035em;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.fr-top-body p {
  margin: 0;
  font-size: inherit !important;
  line-height: inherit;
}

.fr-top-body p + p { margin-top: 12px; }

.fr-top-about__visual {
  position: relative;
  margin: 0;
  padding: 0 0 30px 30px;
}

.fr-top-about__visual::before {
  content: "";
  position: absolute;
  inset: 30px 30px 0 0;
  border: 1px solid rgba(255, 201, 120, .34);
  border-radius: 22px 6px 22px 6px;
}

.fr-top-about__visual img,
.fr-top-concept__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fr-top-about__visual img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px 22px 6px 22px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
}

.fr-top-about__visual figcaption {
  position: absolute;
  right: -8px;
  bottom: 4px;
  color: var(--fr-muted);
  font-family: var(--font-en, sans-serif);
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .11em;
}

.fr-top-concept {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr);
  align-items: center;
  margin-top: clamp(96px, 13vw, 170px);
}

.fr-top-concept__visual {
  min-height: 560px;
  overflow: hidden;
  border-radius: 26px 6px 6px 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.fr-top-concept__visual img {
  min-height: 560px;
  filter: saturate(.88) contrast(1.02);
}

.fr-top-concept__card {
  position: relative;
  z-index: 2;
  margin-left: clamp(-96px, -7vw, -54px);
  padding: clamp(42px, 5vw, 68px);
  background: linear-gradient(145deg, rgba(55, 34, 20, .98), rgba(31, 21, 15, .99));
  border: 1px solid rgba(255, 201, 120, .24);
  border-radius: 6px 26px 6px 26px;
  box-shadow: 0 28px 74px rgba(0, 0, 0, .44);
}

.fr-top-concept__card .fr-top-heading {
  font-size: clamp(29px, 3vw, 43px) !important;
}

.fr-top-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-width: 220px;
  min-height: 58px;
  margin-top: 34px;
  padding: 13px 14px 13px 22px;
  color: #2a1608 !important;
  background: linear-gradient(100deg, var(--fr-orange), var(--fr-gold));
  border-radius: 999px;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .04em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease;
}

.fr-top-button__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--fr-cream);
  background: rgba(42, 22, 8, .78);
  border-radius: 50%;
  font-size: 17px !important;
}

.fr-top-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(255, 150, 63, .25);
}

.fr-top-button:focus-visible {
  outline: 3px solid var(--fr-cream);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .fr-top-about {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .fr-top-about__copy { max-width: 680px; }

  .fr-top-about__visual {
    width: min(720px, 100%);
    margin-left: auto;
  }

  .fr-top-concept {
    grid-template-columns: 1fr;
    width: min(760px, 100%);
  }

  .fr-top-concept__visual {
    min-height: 0;
    border-radius: 22px 22px 6px 6px;
  }

  .fr-top-concept__visual img {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .fr-top-concept__card {
    width: calc(100% - 44px);
    margin: -52px auto 0;
  }
}

@media (max-width: 600px) {
  .fr-top-story {
    padding: 68px 20px 78px;
  }

  .fr-top-story::before {
    top: 37%;
    font-size: 88px;
  }

  .fr-top-eyebrow {
    margin-bottom: 12px;
    letter-spacing: .14em;
  }

  .fr-top-heading {
    font-size: clamp(29px, 9vw, 38px) !important;
    line-height: 1.45;
    letter-spacing: .035em;
  }

  .fr-top-lead {
    margin-top: 20px;
    font-size: 19px !important;
    line-height: 1.8;
    letter-spacing: .035em;
  }

  .fr-top-body {
    margin-top: 24px;
    font-size: 15px !important;
    line-height: 1.95;
  }

  .fr-top-about { gap: 36px; }

  .fr-top-about__visual { padding: 0 0 18px 18px; }

  .fr-top-about__visual::before { inset: 18px 18px 0 0; }

  .fr-top-about__visual img {
    aspect-ratio: 5 / 4;
    border-radius: 5px 18px 5px 18px;
  }

  .fr-top-about__visual figcaption {
    right: 0;
    bottom: -5px;
    font-size: 14px !important;
    letter-spacing: .06em;
  }

  .fr-top-concept { margin-top: 92px; }

  .fr-top-concept__visual img { aspect-ratio: 4 / 3; }

  .fr-top-concept__card {
    width: calc(100% - 20px);
    margin-top: -28px;
    padding: 32px 24px 34px;
    border-radius: 5px 20px 5px 20px;
  }

  .fr-top-concept__card .fr-top-heading {
    font-size: clamp(27px, 8vw, 34px) !important;
  }

  .fr-top-button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    margin-top: 28px;
    font-size: 15px !important;
  }
}

@media (max-width: 360px) {
  .fr-top-story { padding-right: 16px; padding-left: 16px; }

  .fr-top-heading { font-size: 28px !important; }

  .fr-top-concept__card {
    width: calc(100% - 12px);
    padding-right: 18px;
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fr-top-button { transition: none; }
}

/* Block: course_pickup / sec_1788749218261 */
/* =========================================================
   BAR Frontier - TOP コースピックアップ「準備中」表示
   使用ブロック：コースピックアップ（トップ用） course_pickup
   適用方法：このブロックの現在のCSSを全置換
   HTML・PHP変更：不要
========================================================= */

.course-pickup-section,
.course-pickup-section * { box-sizing: border-box; }

.course-pickup-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(78px, 10vw, 132px) 24px !important;
  color: #fff8ef !important;
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 150, 63, .12), transparent 28%),
    radial-gradient(circle at 86% 74%, rgba(255, 201, 120, .08), transparent 25%),
    linear-gradient(145deg, #25170f 0%, #160f0b 58%, #20130d 100%) !important;
}

.course-pickup-section::before,
.course-pickup-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 201, 120, .13);
  border-radius: 50%;
  pointer-events: none;
}

.course-pickup-section::before {
  top: -140px;
  right: -90px;
  width: 360px;
  height: 360px;
}

.course-pickup-section::after {
  bottom: -170px;
  left: -90px;
  width: 410px;
  height: 410px;
}

.course-pickup-header {
  position: relative;
  width: min(820px, 100%);
  margin: 0 auto !important;
  padding: clamp(52px, 7vw, 82px) clamp(24px, 8vw, 92px) !important;
  text-align: center !important;
  background: rgba(21, 14, 10, .72);
  border: 1px solid rgba(255, 178, 105, .28);
  border-radius: 8px 30px 8px 30px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
  backdrop-filter: blur(5px);
}

.course-pickup-header::before {
  content: "COURSE MENU";
  display: block;
  margin: 0 0 18px;
  color: #ffc978;
  font-family: var(--font-en, var(--font-sans), sans-serif);
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .2em;
}

.course-pickup-header::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 30px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a3d, #ffc978);
}

.course-pickup-title {
  margin: 0 !important;
  color: #fff8ef !important;
  font-family: var(--font-en, var(--font-sans), sans-serif) !important;
  font-size: clamp(34px, 6vw, 68px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .09em !important;
  white-space: nowrap;
}

.course-pickup-desc {
  max-width: 34em;
  margin: 24px auto 0 !important;
  color: #f0d6bd !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px !important;
  font-weight: 500;
  line-height: 2 !important;
  letter-spacing: .04em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/*
  準備中はCMSのサンプルコースを誤って実在メニューに見せないため非表示。
  公開時はこの2行を削除すれば、登録済みコースと一覧ボタンを再表示できます。
*/
.course-pickup-grid,
.course-pickup-more-wrap { display: none !important; }

@media (max-width: 600px) {
  .course-pickup-section {
    padding: 68px 16px 76px !important;
  }

  .course-pickup-header {
    padding: 48px 22px 52px !important;
    border-radius: 6px 22px 6px 22px;
  }

  .course-pickup-header::before {
    margin-bottom: 14px;
    letter-spacing: .15em;
  }

  .course-pickup-title {
    font-size: clamp(30px, 10vw, 43px) !important;
    letter-spacing: .055em !important;
  }

  .course-pickup-desc {
    margin-top: 20px !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  .course-pickup-header::after { margin-top: 25px; }
}

@media (max-width: 350px) {
  .course-pickup-title {
    font-size: 29px !important;
    letter-spacing: .035em !important;
  }
}

/* Block: custom_html / sec_1788749263651 */
/* =========================================================
   BAR Frontier - TOP RECRUIT／姉妹店
   使用ブロック：コースピックアップ直後の既存カスタムHTML
   適用方法：このブロックのCSSを全置換
========================================================= */

.fr-top-guides,
.fr-top-guides * { box-sizing: border-box; }

.fr-top-guides {
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 11vw, 148px) clamp(24px, 5vw, 64px);
  color: #fff8ef;
  background:
    linear-gradient(180deg, #17100c 0%, #1c120d 54%, #130d0a 100%);
}

.fr-top-guide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  align-items: stretch;
  width: min(1120px, 100%);
  min-height: 520px;
  margin-inline: auto;
}

.fr-top-guide + .fr-top-guide {
  margin-top: clamp(72px, 9vw, 116px);
}

.fr-top-guide__image {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 28px 6px 6px 28px;
}

.fr-top-guide__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 52%, rgba(22, 14, 10, .48) 100%),
    linear-gradient(0deg, rgba(17, 11, 8, .22), transparent 42%);
  pointer-events: none;
}

.fr-top-guide__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  filter: saturate(.86) contrast(1.03);
  transition: transform .7s ease;
}

.fr-top-guide:hover .fr-top-guide__image img { transform: scale(1.035); }

.fr-top-guide__content {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-left: clamp(-82px, -6vw, -48px);
  padding: clamp(42px, 5vw, 68px);
  background: linear-gradient(145deg, rgba(59, 36, 21, .98), rgba(29, 19, 14, .99));
  border: 1px solid rgba(255, 201, 120, .25);
  border-radius: 7px 28px 7px 28px;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .43);
}

.fr-top-guide__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  color: #ffc978;
  font-family: var(--font-en, var(--font-sans), sans-serif);
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .18em;
  white-space: nowrap;
}

.fr-top-guide__label::before {
  content: "";
  flex: 0 0 34px;
  height: 2px;
  background: linear-gradient(90deg, #ff8a3d, #ffc978);
}

.fr-top-guide__title {
  margin: 0;
  color: #fff8ef !important;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(31px, 3.4vw, 47px) !important;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .045em;
  word-break: keep-all;
}

.fr-top-guide__text {
  margin: 26px 0 0;
  color: #f1dbc5 !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px !important;
  line-height: 2;
  letter-spacing: .035em;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.fr-top-guide__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: 218px;
  min-height: 58px;
  margin-top: 32px;
  padding: 12px 13px 12px 22px;
  color: #2a1608 !important;
  background: linear-gradient(100deg, #ff8a3d, #ffc978);
  border-radius: 999px;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .035em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease;
}

.fr-top-guide__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff8ef;
  background: rgba(42, 22, 8, .78);
  border-radius: 50%;
  font-size: 17px !important;
}

.fr-top-guide__button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(255, 150, 63, .24);
}

.fr-top-guide__button:focus-visible {
  outline: 3px solid #fff8ef;
  outline-offset: 4px;
}

.fr-top-guide--sister {
  grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr);
}

.fr-top-guide--sister .fr-top-guide__image {
  grid-column: 2;
  grid-row: 1;
  border-radius: 6px 28px 28px 6px;
}

.fr-top-guide--sister .fr-top-guide__image::after {
  background:
    linear-gradient(270deg, transparent 52%, rgba(22, 14, 10, .48) 100%),
    linear-gradient(0deg, rgba(17, 11, 8, .22), transparent 42%);
}

.fr-top-guide--sister .fr-top-guide__content {
  grid-column: 1;
  grid-row: 1;
  margin-right: clamp(-82px, -6vw, -48px);
  margin-left: 0;
}

@media (max-width: 900px) {
  .fr-top-guide,
  .fr-top-guide--sister {
    grid-template-columns: 1fr;
    width: min(740px, 100%);
    min-height: 0;
  }

  .fr-top-guide__image,
  .fr-top-guide--sister .fr-top-guide__image {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    border-radius: 24px 24px 6px 6px;
  }

  .fr-top-guide__image::after,
  .fr-top-guide--sister .fr-top-guide__image::after {
    background: linear-gradient(0deg, rgba(22, 14, 10, .42), transparent 55%);
  }

  .fr-top-guide__image img { min-height: 0; aspect-ratio: 4 / 3; }

  .fr-top-guide__content,
  .fr-top-guide--sister .fr-top-guide__content {
    grid-column: 1;
    grid-row: 2;
    width: calc(100% - 44px);
    margin: -54px auto 0;
  }
}

@media (max-width: 600px) {
  .fr-top-guides { padding: 72px 20px 84px; }

  .fr-top-guide + .fr-top-guide { margin-top: 78px; }

  .fr-top-guide__image img { aspect-ratio: 5 / 4; }

  .fr-top-guide__content,
  .fr-top-guide--sister .fr-top-guide__content {
    width: calc(100% - 18px);
    margin-top: -30px;
    padding: 32px 23px 34px;
    border-radius: 6px 21px 6px 21px;
  }

  .fr-top-guide__label {
    margin-bottom: 12px;
    letter-spacing: .14em;
  }

  .fr-top-guide__title {
    font-size: clamp(28px, 8.7vw, 36px) !important;
    line-height: 1.48;
    letter-spacing: .03em;
  }

  .fr-top-guide__text {
    margin-top: 21px;
    font-size: 15px !important;
    line-height: 1.95;
  }

  .fr-top-guide__button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    margin-top: 27px;
    font-size: 15px !important;
  }
}

@media (max-width: 360px) {
  .fr-top-guides { padding-right: 16px; padding-left: 16px; }

  .fr-top-guide__content,
  .fr-top-guide--sister .fr-top-guide__content {
    width: calc(100% - 10px);
    padding-right: 18px;
    padding-left: 18px;
  }

  .fr-top-guide__title { font-size: 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-top-guide__image img,
  .fr-top-guide__button { transition: none; }
}

/* Block: image_grid / sec_1788749276015 */
/* =========================================================
   BAR Frontier - TOP 画像グリッド
   使用ブロック：画像グリッド（複数画像） image_grid
   適用方法：このブロックの現在のCSSを全置換
   HTML・PHP変更：不要
========================================================= */

.image-grid-section,
.image-grid-section * { box-sizing: border-box; }

.image-grid-section {
  --fc-bg-overlay: transparent;
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 10vw, 132px) clamp(20px, 5vw, 64px) !important;
  color: #fff8ef !important;
  background-color: #17100c !important;
}

/*
  管理画面の「セクションの背景画像」を、暗いオーバーレイ・切り抜きなしで表示。
  :not(#...) はシステムが後から出力する #ブロックID の cover 指定より
  詳細度を高くするための指定で、実際のID入力は不要です。
*/
.image-grid-section:not(#fr-image-grid-specificity-guard) {
  --fc-bg-overlay: transparent;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

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

.image-grid-header {
  width: min(720px, 100%);
  max-width: none !important;
  margin: 0 0 clamp(38px, 5vw, 58px) !important;
  text-align: left !important;
}

.image-grid-header::before {
  content: "INSIDE FRONTIER";
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  color: #ffc978;
  font-family: var(--font-en, var(--font-sans), sans-serif);
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .18em;
}

.image-grid-title {
  margin: 0 !important;
  color: #fff8ef !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: clamp(34px, 4.6vw, 58px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .055em !important;
  word-break: keep-all;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .68);
}

.image-grid-desc {
  max-width: 38em;
  margin: 20px 0 0 !important;
  color: #efd8c1 !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px !important;
  line-height: 1.95 !important;
  letter-spacing: .035em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
}

/* PCは4枚を同じ大きさで横一列 */
.image-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.5vw, 18px) !important;
}

.image-grid-item {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden !important;
  background: #2a1a11;
  border: 1px solid rgba(255, 201, 120, .16);
  border-radius: 6px 20px 6px 20px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .30);
}

.image-grid .image-grid-item img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 768px) {
  .image-grid-section { padding: 70px 16px 78px !important; }

  .image-grid-section:not(#fr-image-grid-specificity-guard) {
    background-image: none !important;
    background-color: #17100c !important;
  }

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

  .image-grid-header::before {
    margin-bottom: 11px;
    letter-spacing: .14em;
  }

  .image-grid-title {
    font-size: clamp(29px, 9vw, 39px) !important;
    letter-spacing: .035em !important;
  }

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

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

  .image-grid-item {
    aspect-ratio: 1 / 1;
    border-radius: 5px 14px 5px 14px !important;
  }
}

@media (max-width: 360px) {
  .image-grid-section { padding-right: 12px !important; padding-left: 12px !important; }
  .image-grid { gap: 8px !important; }
}

/* Block: instagram_feed / sec_1788749299983 */
/* =========================================================
   BAR Frontier - TOP Instagramフィード
   使用ブロック：Instagramフィード instagram_feed
   適用方法：このブロックの現在のCSSを全置換
   HTML・PHP変更：不要
========================================================= */

.fc-instagram-embed-section,
.fc-instagram-embed-section * { box-sizing: border-box; }

.fc-instagram-embed-section {
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 10vw, 128px) clamp(20px, 5vw, 64px) !important;
  color: #fff8ef !important;
  background:
    radial-gradient(circle at 8% 22%, rgba(255, 150, 63, .10), transparent 26%),
    linear-gradient(180deg, #1b110c 0%, #17100c 100%) !important;
}

.fc-instagram-embed-section::before {
  content: "";
  position: absolute;
  right: -0.04em;
  bottom: 12px;
  color: rgba(255, 248, 239, .025);
  font-family: var(--font-en, sans-serif);
  font-size: clamp(70px, 12vw, 170px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}

.fc-instagram-embed-inner {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-width: none !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.fc-instagram-embed-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  align-items: end;
  gap: 24px 56px;
  margin: 0 0 clamp(38px, 5vw, 58px) !important;
}

.fc-instagram-embed-label {
  grid-column: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px;
  margin: 0 0 13px !important;
  color: #ffc978 !important;
  font-family: var(--font-en, var(--font-sans), sans-serif) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.5;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}

.fc-instagram-embed-label::before {
  content: "";
  flex: 0 0 34px;
  height: 2px;
  background: linear-gradient(90deg, #ff8a3d, #ffc978);
}

.fc-instagram-embed-heading h2 {
  grid-column: 1;
  margin: 0 !important;
  color: #fff8ef !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: clamp(34px, 4.8vw, 60px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: .05em !important;
  word-break: keep-all;
}

.fc-instagram-embed-heading p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 32em !important;
  margin: 0 !important;
  color: #efd8c1 !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px !important;
  line-height: 1.95 !important;
  letter-spacing: .035em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.fc-instagram-post-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--fc-ig-cols-pc, 3), minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.5vw, 18px) !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
}

.fc-instagram-post-card,
.fc-instagram-embed-card {
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(255, 201, 120, .20) !important;
  border-radius: 6px 18px 6px 18px !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .34) !important;
}

.fc-instagram-display-photo .fc-instagram-post-card {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
}

.fc-instagram-post-card .instagram-media,
.fc-instagram-post-card iframe,
.fc-instagram-embed-card .instagram-media,
.fc-instagram-embed-card iframe {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* 写真表示モードではInstagram投稿の写真部分を正方形カードとして見せる */
.fc-instagram-display-photo .fc-instagram-post-card .instagram-media,
.fc-instagram-display-photo .fc-instagram-post-card iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: calc(100% + 172px) !important;
  min-height: calc(100% + 172px) !important;
  max-height: none !important;
  transform: translateY(-72px) !important;
}

/* 投稿URLがなく、アカウントURLだけを表示する従来形式 */
.fc-instagram-embed-card--legacy {
  display: flex !important;
  justify-content: center !important;
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  background: #fff !important;
}

.fc-instagram-embed-card--legacy .instagram-media,
.fc-instagram-embed-card--legacy iframe {
  width: 100% !important;
  max-width: 100% !important;
}

.fc-instagram-embed-action {
  margin: 36px 0 0 !important;
  text-align: center !important;
}

.fc-instagram-embed-action a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 230px !important;
  min-height: 58px !important;
  padding: 13px 28px !important;
  color: #2a1608 !important;
  background: linear-gradient(100deg, #ff8a3d, #ffc978) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.4;
  letter-spacing: .045em !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease;
}

.fc-instagram-embed-action a:hover {
  color: #2a1608 !important;
  background: linear-gradient(100deg, #ff8a3d, #ffc978) !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(255, 150, 63, .24) !important;
}

.fc-instagram-embed-action a:focus-visible {
  outline: 3px solid #fff8ef;
  outline-offset: 4px;
}

/* スライダー選択時も既存JavaScriptをそのまま使用 */
.fc-instagram-slider {
  position: relative !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 50px 38px !important;
}

.fc-instagram-slider-viewport { overflow: hidden !important; }

.fc-instagram-slider-track {
  gap: 16px !important;
  align-items: stretch !important;
}

.fc-instagram-slider-arrow {
  position: absolute !important;
  top: 50% !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  color: #ffc978 !important;
  background: rgba(32, 20, 13, .94) !important;
  border: 1px solid rgba(255, 201, 120, .42) !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  transform: translateY(-50%) !important;
}

.fc-instagram-slider-prev { left: 0 !important; }
.fc-instagram-slider-next { right: 0 !important; }

.fc-instagram-slider-dots {
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  transform: translateX(-50%) !important;
}

.fc-instagram-slider-dot {
  width: 10px !important;
  height: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 201, 120, .70) !important;
  border-radius: 999px !important;
}

.fc-instagram-slider-dot.is-active {
  width: 26px !important;
  background: #ffc978 !important;
}

@media (max-width: 1024px) {
  .fc-instagram-post-grid {
    grid-template-columns: repeat(var(--fc-ig-cols-tab, 3), minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .fc-instagram-embed-section { padding: 70px 16px 80px !important; }

  .fc-instagram-embed-section::before {
    bottom: 18px;
    font-size: 58px;
  }

  .fc-instagram-embed-heading {
    display: block;
    margin-bottom: 32px !important;
  }

  .fc-instagram-embed-label {
    margin-bottom: 10px !important;
    letter-spacing: .14em !important;
  }

  .fc-instagram-embed-heading h2 {
    font-size: clamp(30px, 9vw, 40px) !important;
    letter-spacing: .035em !important;
  }

  .fc-instagram-embed-heading p {
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  .fc-instagram-post-grid {
    grid-template-columns: repeat(var(--fc-ig-cols-sp, 2), minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .fc-instagram-display-photo .fc-instagram-post-card .instagram-media,
  .fc-instagram-display-photo .fc-instagram-post-card iframe {
    height: calc(100% + 120px) !important;
    min-height: calc(100% + 120px) !important;
    transform: translateY(-50px) !important;
  }

  .fc-instagram-embed-action { margin-top: 28px !important; }

  .fc-instagram-embed-action a {
    width: 100% !important;
    max-width: 340px !important;
    min-height: 56px !important;
    font-size: 15px !important;
  }

  .fc-instagram-slider { padding: 0 0 38px !important; }

  .fc-instagram-slider-arrow {
    top: auto !important;
    bottom: -3px !important;
    width: 34px !important;
    height: 34px !important;
    transform: none !important;
  }

  .fc-instagram-slider-prev { left: 8px !important; }
  .fc-instagram-slider-next { right: 8px !important; }
  .fc-instagram-slider-dots { bottom: 9px !important; }
}

@media (max-width: 360px) {
  .fc-instagram-embed-section { padding-right: 12px !important; padding-left: 12px !important; }
  .fc-instagram-post-grid { gap: 7px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-instagram-embed-action a { transition: none; }
}

/* Block: store_info / sec_1785931790498 */
/* =========================================================
   BAR Frontier - TOP 店舗案内
   使用ブロック：店舗概要 store_info
   適用方法：このブロックの現在のCSSを全置換
   HTML・PHP変更：不要
========================================================= */

.store-info-section,
.store-info-section * { box-sizing: border-box; }

.store-info-section {
  --fc-bg-overlay: transparent;
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 10vw, 132px) clamp(20px, 5vw, 64px) !important;
  color: #fff8ef !important;
  background-color: #17100c !important;
  background-color: #321d13 !important;
}

/*
  管理画面で指定したセクション背景画像を全面表示。
  システム既定の暗いオーバーレイを透明にし、帯状の余白が出ないようcoverで表示。
  管理画面で指定したセクション背景画像を原寸表示。
  システム既定の暗いオーバーレイを透明にし、足りない範囲は上下左右へ繰り返す。
  背景画像のズーム・アニメーション・色加工は行わない。
*/
.store-info-section:not(#fr-store-info-specificity-guard) {
  --fc-bg-overlay: transparent;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  background-attachment: scroll !important;
}

.store-info-container {
  position: relative;
  width: min(1040px, 100%);
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(38px, 6vw, 70px) clamp(24px, 6vw, 70px) clamp(24px, 4vw, 42px);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(70, 42, 25, .96), rgba(37, 23, 16, .97));
  border: 1px solid rgba(255, 201, 120, .30);
  border-radius: 8px 30px 8px 30px;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .36);
}

.store-info-header {
  width: min(720px, 100%);
  max-width: none !important;
  margin: 0 0 clamp(36px, 5vw, 54px) !important;
  margin: 0 0 clamp(28px, 4vw, 42px) !important;
  padding-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid rgba(255, 248, 239, .12);
  text-align: left !important;
}

.store-info-header::before {
  content: "SHOP INFORMATION";
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  color: #ffc978;
  font-family: var(--font-en, var(--font-sans), sans-serif);
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .18em;
}

.store-info-title {
  margin: 0 !important;
  color: #fff8ef !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: clamp(34px, 4.6vw, 58px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .055em !important;
  word-break: keep-all;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .68);
}

.store-info-desc {
  max-width: 38em;
  margin: 18px 0 0 !important;
  color: #efd8c1 !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px !important;
  line-height: 1.95 !important;
  letter-spacing: .035em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
}

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

.store-info-table-wrap {
  overflow: hidden;
  padding: clamp(18px, 3vw, 34px) clamp(22px, 5vw, 58px);
  background: linear-gradient(145deg, rgba(54, 33, 20, .96), rgba(25, 17, 12, .97));
  border: 1px solid rgba(255, 201, 120, .27);
  border-radius: 7px 28px 7px 28px;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .40);
  overflow: visible;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

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

.store-info-table th,
.store-info-table td {
  padding: 23px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 248, 239, .12) !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px !important;
  line-height: 1.8 !important;
  text-align: left !important;
  vertical-align: top !important;
}

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

.store-info-table th {
  width: 190px !important;
  padding-right: 28px !important;
  color: #ffc978 !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.store-info-table td {
  color: #fff8ef !important;
  font-weight: 550;
  letter-spacing: .025em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 指示書どおり5項目だけを表示。並び順は管理画面で下記手順の順に設定 */
.store-info-table tr:nth-child(n + 6) { display: none !important; }

/* 今回はセクション背景画像を使うため、右側の任意画像は表示しない */
.store-info-image { display: none !important; }

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

  .store-info-section:not(#fr-store-info-specificity-guard) {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: auto !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
  }

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

  .store-info-container {
    padding: 34px 20px 18px;
    border-radius: 6px 22px 6px 22px;
  }

  .store-info-header::before {
    margin-bottom: 11px;
    letter-spacing: .14em;
  }

  .store-info-title {
    font-size: clamp(30px, 9vw, 40px) !important;
    letter-spacing: .035em !important;
  }

  .store-info-desc {
    margin-top: 14px !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  .store-info-table-wrap {
    padding: 10px 20px;
    border-radius: 6px 21px 6px 21px;
    padding: 0;
    border-radius: 0;
  }

  .store-info-table th,
  .store-info-table td {
    display: block;
    width: 100% !important;
    padding-right: 0 !important;
    font-size: 15px !important;
  }

  .store-info-table th {
    padding-top: 20px !important;
    padding-bottom: 4px !important;
    border-bottom: 0 !important;
  }

  .store-info-table td {
    padding-top: 0 !important;
    padding-bottom: 20px !important;
    line-height: 1.75 !important;
  }
}

@media (max-width: 360px) {
  .store-info-section { padding-right: 12px !important; padding-left: 12px !important; }
  .store-info-table-wrap { padding-right: 16px; padding-left: 16px; }
  .store-info-container { padding-right: 16px; padding-left: 16px; }
}

/* Block: custom_html / sec_1788749323603 */
/* =========================================================
   BAR Frontier - TOP ACCESS導線
   使用ブロック：店舗概要直後の既存カスタムHTML
   適用方法：このブロックのCSSを全置換
========================================================= */

.fr-access-link,
.fr-access-link * { box-sizing: border-box; }

.fr-access-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  width: min(1040px, calc(100% - 48px));
  width: 100%;
  max-width: none;
  margin: clamp(96px, 11vw, 150px) auto clamp(52px, 7vw, 82px);
  padding: clamp(30px, 4vw, 46px) clamp(26px, 5vw, 58px);
  overflow: hidden;
  color: #fff8ef;
  background: linear-gradient(110deg, #3a2417, #21150f);
  border: 1px solid rgba(255, 201, 120, .27);
  border-radius: 7px 28px 7px 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fr-access-link::after {
  content: "ACCESS";
  position: absolute;
  top: 50%;
  right: 22%;
  color: rgba(255, 248, 239, .035);
  font-family: var(--font-en, sans-serif);
  font-size: clamp(64px, 9vw, 120px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
  transform: translateY(-50%);
  pointer-events: none;
}

.fr-access-link__copy,
.fr-access-link__button { position: relative; z-index: 1; }

.fr-access-link__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: #ffc978;
  font-family: var(--font-en, var(--font-sans), sans-serif);
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .18em;
}

.fr-access-link__label::before {
  content: "";
  flex: 0 0 30px;
  height: 2px;
  background: linear-gradient(90deg, #ff8a3d, #ffc978);
}

.fr-access-link__title {
  margin: 0;
  color: #fff8ef !important;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(25px, 3vw, 38px) !important;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .045em;
  word-break: keep-all;
}

.fr-access-link__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 250px;
  min-height: 58px;
  padding: 12px 13px 12px 23px;
  color: #2a1608 !important;
  background: linear-gradient(100deg, #ff8a3d, #ffc978);
  border-radius: 999px;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .035em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease;
}

.fr-access-link__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff8ef;
  background: rgba(42, 22, 8, .78);
  border-radius: 50%;
  font-size: 17px !important;
}

.fr-access-link__button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(255, 150, 63, .24);
}

.fr-access-link__button:focus-visible {
  outline: 3px solid #fff8ef;
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .fr-access-link {
    display: block;
    width: calc(100% - 32px);
    width: 100%;
    margin: 80px auto 44px;
    padding: 30px 22px 24px;
    border-radius: 6px 21px 6px 21px;
    border-radius: 0;
  }

  .fr-access-link::after {
    top: 12px;
    right: -12px;
    font-size: 72px;
    transform: none;
  }

  .fr-access-link__label { letter-spacing: .14em; }

  .fr-access-link__title {
    font-size: clamp(24px, 7.7vw, 31px) !important;
  }

  .fr-access-link__button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    margin-top: 24px;
    font-size: 15px !important;
  }
}

@media (max-width: 360px) {
  .fr-access-link {
    width: calc(100% - 24px);
    width: 100%;
    padding-right: 18px;
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fr-access-link__button { transition: none; }
}

/* Block: gmap / sec_1788749349502 */
/* =========================================================
   BAR Frontier - TOP Googleマップ
   使用ブロック：Googleマップ gmap
   適用方法：このブロックの現在のCSSを全置換
   HTML・PHP変更：不要
========================================================= */

.gmap-section,
.gmap-section * { box-sizing: border-box; }

.gmap-section {
  --fc-bg-overlay: transparent;
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 10vw, 128px) clamp(20px, 5vw, 64px) !important;
  color: #fff8ef !important;
  background-color: #17100c !important;
}

/*
  管理画面の「セクションの背景画像」を無加工で全体表示。
  管理画面の「セクションの背景画像」をセクション全体へ自然に表示。
  システムが後から出力する #ブロックID の cover 指定より優先させています。
  実際のブロックIDを入力する必要はありません。
*/
.gmap-section:not(#fr-gmap-specificity-guard) {
  --fc-bg-overlay: transparent;
  background-size: contain !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.gmap-container {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-width: none !important;
  margin: 0 auto !important;
}

.gmap-header {
  width: min(720px, 100%);
  max-width: none !important;
  margin: 0 0 clamp(34px, 5vw, 50px) !important;
  text-align: left !important;
}

.gmap-header::before {
  content: "LOCATION";
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 13px;
  color: #ffc978;
  font-family: var(--font-en, var(--font-sans), sans-serif);
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .18em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
}

.gmap-title {
  margin: 0 !important;
  color: #fff8ef !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: clamp(34px, 4.6vw, 58px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .055em !important;
  word-break: keep-all;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .72);
}

.gmap-desc {
  max-width: 38em;
  margin: 18px 0 0 !important;
  color: #fff8ef !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px !important;
  line-height: 1.95 !important;
  letter-spacing: .035em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .78);
}

.gmap-frame-wrap {
  position: relative !important;
  width: 100% !important;
  min-height: 360px !important;
  aspect-ratio: 16 / 8.5 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(255, 201, 120, .30) !important;
  border-radius: 7px 26px 7px 26px !important;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .40) !important;
}

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

.gmap-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #4a2c1b !important;
  background: #fff8ef;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  line-height: 1.8;
  text-align: center;
}

@media (max-width: 768px) {
  .gmap-section { padding: 70px 16px 78px !important; }

  .gmap-section:not(#fr-gmap-specificity-guard) {
    background-size: contain !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

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

  .gmap-header::before {
    margin-bottom: 10px;
    letter-spacing: .14em;
  }

  .gmap-title {
    font-size: clamp(30px, 9vw, 40px) !important;
    letter-spacing: .035em !important;
  }

  .gmap-desc {
    margin-top: 14px !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

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

@media (max-width: 360px) {
  .gmap-section { padding-right: 12px !important; padding-left: 12px !important; }
  .gmap-frame-wrap { min-height: 270px !important; }
}


/* =========================================================
   Page: recruit / RECRUIT｜大分市都町のBAR Frontier｜カラオケ・ダーツを楽しめるバー
========================================================= */

/* Block: recruit_job_list / sec_1788749724869 */
/* =========================================================
   BAR Frontier / RECRUIT 募集要項
   対象: recruit_job_list / sec_1788749724869
========================================================= */

#sec_1788749724869.job-list-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 9vw, 136px) 24px;
  color: #fff8ef;
  background:
    radial-gradient(circle at 8% 15%, rgba(255, 151, 66, .13), transparent 27%),
    radial-gradient(circle at 92% 86%, rgba(196, 91, 38, .10), transparent 28%),
    #160e0a !important;
}

#sec_1788749724869.job-list-section::before {
  content: "RECRUIT";
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 187, 108, .07);
  font-family: var(--font-en, sans-serif);
  font-size: clamp(5rem, 14vw, 13rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
}

#sec_1788749724869 .job-section-header {
  width: min(760px, 100%);
  margin: 0 auto clamp(46px, 6vw, 72px) !important;
  text-align: center;
}

#sec_1788749724869 .job-section-header::before {
  content: "JOB DESCRIPTION";
  display: block;
  margin-bottom: 14px;
  color: #ffb765;
  font-family: var(--font-en, sans-serif);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .18em;
}

#sec_1788749724869 .job-main-title {
  margin: 0 0 20px !important;
  color: #fff9f1 !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: clamp(2rem, 4vw, 3.35rem) !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: .06em !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

#sec_1788749724869 .job-sub-text {
  margin: 0 !important;
  color: #ead8c5 !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 2.05 !important;
  letter-spacing: .02em;
  line-break: strict;
  text-wrap: pretty;
}

#sec_1788749724869 .job-container {
  display: block !important;
  width: min(1080px, 100%);
  margin: 0 auto !important;
}

#sec_1788749724869 .job-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  color: #fff8ef !important;
  border: 1px solid rgba(255, 179, 94, .35) !important;
  border-radius: 30px 8px 30px 8px !important;
  background:
    linear-gradient(135deg, rgba(75, 41, 25, .96), rgba(39, 23, 16, .98)) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .34) !important;
}

#sec_1788749724869 .job-card + .job-card {
  margin-top: 30px;
}

#sec_1788749724869 .job-card::after {
  content: "";
  position: absolute;
  right: -72px;
  top: -72px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 187, 108, .13);
  border-radius: 50%;
  pointer-events: none;
}

#sec_1788749724869 .job-card-header {
  position: relative;
  z-index: 1;
  padding: 30px clamp(24px, 4vw, 48px) 26px !important;
  border-bottom: 1px solid rgba(255, 190, 115, .20) !important;
  background: rgba(14, 8, 5, .18) !important;
}

#sec_1788749724869 .job-type-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0 0 12px !important;
  padding: 6px 16px !important;
  color: #241309 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff9145, #ffc875) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.4;
  letter-spacing: .08em !important;
  white-space: nowrap;
}

#sec_1788749724869 .job-title {
  margin: 0 !important;
  color: #fff9f1 !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: clamp(1.55rem, 3vw, 2.2rem) !important;
  font-weight: 900;
  line-height: 1.5 !important;
  letter-spacing: .06em;
  word-break: keep-all;
  overflow-wrap: normal;
}

#sec_1788749724869 .job-card-body {
  display: grid !important;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr) !important;
  gap: clamp(28px, 5vw, 58px) !important;
  align-items: center;
  padding: clamp(28px, 5vw, 54px) !important;
}

#sec_1788749724869 .job-card-body:not(:has(.job-img-box)) {
  grid-template-columns: 1fr !important;
}

#sec_1788749724869 .job-img-box {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 192, 119, .28) !important;
  border-radius: 24px 6px 24px 6px !important;
  background: #25150e !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
}

#sec_1788749724869 .job-img-box img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

#sec_1788749724869 .job-info-box {
  min-width: 0;
}

#sec_1788749724869 .job-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

#sec_1788749724869 .job-table th,
#sec_1788749724869 .job-table td {
  padding: 17px 0 !important;
  border-bottom: 1px solid rgba(255, 241, 222, .12) !important;
  vertical-align: top;
  text-align: left;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  line-height: 1.85 !important;
  line-break: strict;
}

#sec_1788749724869 .job-table tr:first-child th,
#sec_1788749724869 .job-table tr:first-child td {
  padding-top: 0 !important;
}

#sec_1788749724869 .job-table th {
  width: 134px !important;
  padding-right: 24px !important;
  color: #ffbd70 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#sec_1788749724869 .job-table td {
  color: #f1dfcc !important;
  font-weight: 500;
  overflow-wrap: anywhere;
}

#sec_1788749724869 .job-salary {
  color: #ffd08f !important;
  font-size: 17px;
  font-weight: 900 !important;
}

#sec_1788749724869 .fc-block-btn-wrap {
  margin-top: 34px;
}

#sec_1788749724869 .fc-block-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 56px;
  padding: 12px 28px;
  color: #241309;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9145, #ffc875);
  box-shadow: 0 14px 34px rgba(255, 145, 69, .17);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .05em;
}

#sec_1788749724869 .fc-block-btn:hover {
  color: #241309;
  transform: translateY(-2px);
  filter: brightness(1.06);
}

@media (max-width: 768px) {
  #sec_1788749724869.job-list-section {
    padding: 70px 18px 82px;
  }

  #sec_1788749724869.job-list-section::before {
    top: 18px;
    font-size: 4.5rem;
  }

  #sec_1788749724869 .job-section-header {
    margin-bottom: 38px !important;
  }

  #sec_1788749724869 .job-main-title {
    font-size: clamp(1.75rem, 9vw, 2.45rem) !important;
    letter-spacing: .03em !important;
  }

  #sec_1788749724869 .job-sub-text {
    font-size: 15px !important;
    line-height: 2 !important;
  }

  #sec_1788749724869 .job-card {
    border-radius: 24px 7px 24px 7px !important;
  }

  #sec_1788749724869 .job-card-header {
    padding: 24px 22px 21px !important;
  }

  #sec_1788749724869 .job-card-body {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 24px 22px 30px !important;
  }

  #sec_1788749724869 .job-table th,
  #sec_1788749724869 .job-table td {
    display: block !important;
    width: 100% !important;
  }

  #sec_1788749724869 .job-table th {
    padding: 14px 0 4px !important;
    border-bottom: 0 !important;
    font-size: 14px !important;
  }

  #sec_1788749724869 .job-table td {
    padding: 0 0 14px !important;
    font-size: 15px !important;
  }

  #sec_1788749724869 .job-table tr:first-child th {
    padding-top: 0 !important;
  }

  #sec_1788749724869 .fc-block-btn {
    width: min(100%, 340px);
  }
}

@media (max-width: 370px) {
  #sec_1788749724869.job-list-section {
    padding-inline: 15px;
  }

  #sec_1788749724869 .job-card-header,
  #sec_1788749724869 .job-card-body {
    padding-inline: 18px !important;
  }
}

#sec_1788749724869 .job-card-header:has(.job-type-badge) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center;
  column-gap: 14px;
  row-gap: 14px;
}

/* 項目名「雇用形態」。表の th と同じ色・サイズに合わせています */
#sec_1788749724869 .job-card-header:has(.job-type-badge)::before {
  content: "雇用形態";
  grid-column: 1;
  grid-row: 1;
  color: #ffbd70;
  font-family: var(--font-sans, sans-serif);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .08em;
  white-space: nowrap;
}

#sec_1788749724869 .job-card-header .job-type-badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin: 0 !important;   /* 下マージンは row-gap に任せる */
}

#sec_1788749724869 .job-card-header .job-title {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Block: custom_html / sec_1788749767722 */
/* =========================================================
   BAR Frontier / RECRUIT メッセージ
   対象: custom_html / sec_1788749767722
========================================================= */

#sec_1788749767722.custom-html-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
}

#sec_1788749767722 .custom-html-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.frontier-entry,
.frontier-entry * {
  box-sizing: border-box;
}

.frontier-entry {
  padding: clamp(68px, 7vw, 104px) 24px;
  color: #2b190f;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 155, 69, .15), transparent 24%),
    radial-gradient(circle at 92% 90%, rgba(173, 63, 42, .09), transparent 26%),
    #fff4e4;
}

.frontier-entry__inner {
  width: min(980px, 100%);
  margin: 0 auto;
  text-align: center;
}

.frontier-entry__inner h2 {
  margin: 0 0 18px;
  color: #321c10;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(2rem, 4.7vw, 3.8rem);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .055em;
  word-break: keep-all;
  overflow-wrap: normal;
}

.frontier-entry__inner p {
  margin: 0;
  color: #76513c;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.9;
  letter-spacing: .015em;
  line-break: strict;
  text-wrap: pretty;
}

@media (max-width: 680px) {
  .frontier-entry {
    padding: 58px 18px 64px;
  }

  .frontier-entry__inner h2 {
    margin-bottom: 14px;
    font-size: clamp(1.8rem, 9vw, 2.55rem);
    letter-spacing: .025em;
  }

  .frontier-entry__inner p {
    font-size: 15px;
    line-height: 1.9;
  }
}

@media (max-width: 370px) {
  .frontier-entry {
    padding-inline: 15px;
  }

  .frontier-entry__inner h2 {
    font-size: 1.75rem;
  }
}

/* Block: instagram_feed / sec_1788749932806 */
/* =========================================================
   BAR Frontier / RECRUIT Instagram
   対象: custom_html(sec_1788749767722)直後のinstagram_feed
========================================================= */

#sec_1788749767722 + .fc-instagram-embed-section {
  position: relative;
  padding: clamp(80px, 9vw, 128px) 24px !important;
  color: #fff8ef !important;
  background:
    radial-gradient(circle at 90% 15%, rgba(255, 153, 67, .12), transparent 27%),
    #160e0a !important;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-inner {
  width: min(1120px, 100%);
  margin: 0 auto !important;
  text-align: center !important;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-heading {
  width: min(720px, 100%);
  margin: 0 auto 38px !important;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-label {
  display: block !important;
  margin: 0 0 12px !important;
  color: #ffb765 !important;
  font-family: var(--font-en, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.5;
  letter-spacing: .20em !important;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-heading h2 {
  margin: 0 0 16px !important;
  color: #fff9f1 !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: clamp(1.85rem, 4vw, 3.1rem) !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: .055em !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-heading p {
  margin: 0 auto !important;
  color: #ead8c5 !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500;
  line-height: 2 !important;
  text-wrap: pretty;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-post-grid {
  gap: 16px !important;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-post-card,
#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-card {
  overflow: hidden !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 184, 103, .30) !important;
  border-radius: 22px 7px 22px 7px !important;
  background: rgba(72, 40, 25, .56) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .30) !important;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-card--legacy {
  width: min(620px, 100%) !important;
  margin-inline: auto !important;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-action {
  margin-top: 30px !important;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-action a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 260px !important;
  min-height: 56px !important;
  padding: 12px 26px !important;
  color: #241309 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff9145, #ffc875) !important;
  box-shadow: 0 14px 34px rgba(255, 145, 69, .17) !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
}

#sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-action a:hover {
  color: #241309 !important;
  transform: translateY(-2px);
  filter: brightness(1.06);
}

@media (max-width: 768px) {
  #sec_1788749767722 + .fc-instagram-embed-section {
    padding: 68px 18px 82px !important;
  }

  #sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-heading {
    margin-bottom: 30px !important;
  }

  #sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-heading h2 {
    font-size: clamp(1.7rem, 8.5vw, 2.35rem) !important;
    letter-spacing: .03em !important;
  }

  #sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-post-grid {
    gap: 10px !important;
  }

  #sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-post-card,
  #sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-card {
    padding: 6px !important;
    border-radius: 16px 5px 16px 5px !important;
  }

  #sec_1788749767722 + .fc-instagram-embed-section .fc-instagram-embed-action a {
    width: min(100%, 340px) !important;
  }
}


/* =========================================================
   Page: news / NEWS｜大分市都町のBAR Frontier｜カラオケ・ダーツを楽しめるバー
========================================================= */

/* Block: news_list_grid / sec_1788751020268 */
/* =========================================================
   お知らせ一覧グリッド（NEWSページ）※花柄を縦にして右端に配置した版
   貼り付け先：NEWSページ → お知らせ一覧グリッド ブロック
               → セクション個別CSS に「全置き換え」

   ・セレクタの先頭に #sec_1788751020268 を付けています。
     IDはクラスより優先されるので、他ページに残っている同名CSSに
     邪魔されません（＝フッターに置く必要がありません）。
   ・既存CSSが全行 !important のため、こちらも !important を付けています。
========================================================= */

/* ---- セクション全体 ----
   ★背景画像は管理画面の「セクション背景画像」で指定します★
   ▼ background / background-image は絶対に書かないでください。
     書くと FluxCore が出す背景画像を打ち消して画像が出なくなります
     （前回のCSSがこれで画像を消していました）。色は background-color を使います。 */
#sec_1788751020268{
  --fc-bg-overlay: transparent !important;   /* ← オーバーレイ無し */
  background-color: #2b1c12 !important;   /* 共通ヒーローと同じブラウン */
  color: #fdf3e7 !important;
}
/* 拡大させない指定。FluxCore の background-size:cover を打ち消すため
   ID+クラス（詳細度を1段上げた形）で書く必要があります。
   ※このセレクタにも background-image は書かないこと */
#sec_1788751020268.news-list-grid-section{
  padding: 96px 24px 110px !important;
  /* 縦帯をセクション右端に。高さをセクションに合わせ、幅は自動（＝約21%）。
     原寸1200pxが上限なので拡大はされません */
  background-size: auto min(100%, 1200px) !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
}

/* ---- 見出しまわり ---- */
#sec_1788751020268 .news-section-header{
  max-width: 720px !important;
  margin: 0 auto 52px !important;
  text-align: center !important;
}
#sec_1788751020268 .news-main-title{
  margin: 0 0 14px !important;
  color: #ffc978 !important;
  font-family: var(--font-sans) !important;   /* 指示書どおりゴシック体 */
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1.5 !important;
  text-wrap: balance;                          /* 末尾に数文字だけ残る改行を防ぐ */
}
#sec_1788751020268 .news-sub-text{
  margin: 0 !important;
  color: #d9c3aa !important;
  font-size: 15px !important;
  line-height: 2 !important;
  text-wrap: balance;
  word-break: auto-phrase;                     /* 日本語を文節で折り返す */
}

/* ---- カードグリッド ----
   ★重要★ auto-fit ではなく auto-fill を使うこと。
   auto-fit は空の列を潰すため、記事が1件のときカードが
   横幅いっぱい(1120px)まで伸びて画像が巨大化します。 */
#sec_1788751020268 .nlg-grid{
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 26px !important;
}
#sec_1788751020268 .nlg-card{
  display: block !important;
  overflow: hidden !important;
  background: rgba(255, 196, 140, .055) !important;
  color: #fdf3e7 !important;
  border: 1px solid rgba(255, 178, 105, .20) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .30) !important;
  text-decoration: none !important;
  transition: transform .25s ease, border-color .25s ease,
              box-shadow .25s ease, background-color .25s ease !important;
}
#sec_1788751020268 a.nlg-card:hover{
  transform: translateY(-5px) !important;
  border-color: rgba(255, 178, 105, .50) !important;
  background: rgba(255, 196, 140, .09) !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .38) !important;
}

/* ---- サムネイル ---- */
#sec_1788751020268 .nlg-img,
#sec_1788751020268 .nlg-no-img{ background: #241a14 !important; }
#sec_1788751020268 .nlg-img{
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}
#sec_1788751020268 .nlg-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s ease !important;
}
#sec_1788751020268 a.nlg-card:hover .nlg-img img{ transform: scale(1.06) !important; }

/* 画像が無い記事のアイコン：魚→ワイングラスに差し替え（HTMLは触らずCSSのみ） */
#sec_1788751020268 .nlg-no-img{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffc978 !important;
  font-size: 28px !important;
}
#sec_1788751020268 .nlg-no-img i{ display: none !important; }
#sec_1788751020268 .nlg-no-img::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f4e3";
}

/* ---- 本文エリア ---- */
#sec_1788751020268 .nlg-body{ padding: 22px !important; }
#sec_1788751020268 .nlg-meta{ margin-bottom: 12px !important; }
#sec_1788751020268 .nlg-date{
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  background: rgba(255, 159, 69, .14) !important;
  color: #ffc978 !important;
  border: 1px solid rgba(255, 178, 105, .28) !important;
  border-radius: 999px !important;
  font-family: var(--font-en) !important;
  font-size: 14px !important;        /* 元は11px。14px以上ルールに合わせて修正 */
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}
#sec_1788751020268 .nlg-title{
  margin: 0 !important;
  color: #fdf3e7 !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
  text-wrap: balance;
  word-break: auto-phrase;
}

/* ---- スマホ ---- */
@media (max-width: 768px){
  #sec_1788751020268.news-list-grid-section{
    padding: 64px 18px 76px !important;
    /* スマホはそのままだと画面幅の63%を占めるので、細い帯に固定 */
    background-size: 110px auto !important;
    background-position: right top !important;
  }
  #sec_1788751020268 .news-section-header{ margin-bottom: 36px !important; }
  #sec_1788751020268 .nlg-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}


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

/* Block: news_article_body / sec_1788751003884 */
/* =========================================================
   お知らせ詳細ページ（記事本文ブロック）
   貼り付け先：NEWS_DETAILページ → 記事本文ブロック
               → セクション個別CSS に「全置き換え」

   ★背景画像は管理画面の「セクション背景画像」で指定してください★
     指定すると FluxCore が自動で下記を出力します：
       #sec_1788751003884{
         background-image: linear-gradient(var(--fc-bg-overlay), var(--fc-bg-overlay)),
                           url('指定した画像') !important; ... }
     つまり画像パスはCSSに書きません。管理画面だけで差し替えできます。

   ▼▼ 重要な注意 ▼▼
   このセクションのセレクタは「#sec_1788751003884」単体にしてあります。
   「#sec_1788751003884.news-article-body-section」のようにクラスを足すと
   詳細度が上がり、FluxCore が出す背景画像の指定に勝ってしまって
   画像が表示されなくなります（実際に検証で再現しました）。
   また、このセレクタで background-image / background を書かないでください。
   同じ理由で画像が消えます。色の指定は background-color を使います。
========================================================= */

#sec_1788751003884{
  /* オーバーレイ無し（背景画像をそのまま出す）
     ※ 少しだけ暗くしたくなったら transparent を rgba(26,17,12,.35) などに変更 */
  --fc-bg-overlay: transparent !important;

  /* 背景の地色。透過素材の抜けた部分にこの色が出ます（共通ヒーローと同色） */
  background-color: #2b1c12 !important;   /* 共通ヒーローと同じブラウン */
  color: #fdf3e7 !important;
}

/* 拡大させない指定。
   FluxCore が出す background-size:cover !important を打ち消すには
   ID+クラス（詳細度を1段上げた形）で書く必要があります。
   ※このセレクタにも background / background-image は書かないこと */
#sec_1788751003884.news-article-body-section{
  padding: 96px 24px 110px !important;
  /* 縦帯をセクション右端に。一覧ページと同じ見え方に揃えています */
  background-size: auto min(100%, 1200px) !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
}

/* ---- 記事カード ---- */
#sec_1788751003884 .nab-container{
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 44px !important;
  background: rgba(26, 18, 13, .82) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 178, 105, .24) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42) !important;
  color: #fdf3e7 !important;
}

/* ---- 見出し ---- */
#sec_1788751003884 .nab-header{
  border-bottom: 1px solid rgba(255, 178, 105, .20) !important;
  padding-bottom: 22px !important;
  margin-bottom: 28px !important;
}
#sec_1788751003884 .nab-meta{ margin-bottom: 14px !important; }
#sec_1788751003884 .nab-date{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px !important;
  background: rgba(255, 159, 69, .14) !important;
  color: #ffc978 !important;
  border: 1px solid rgba(255, 178, 105, .28) !important;
  border-radius: 999px !important;
  font-family: var(--font-en) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
#sec_1788751003884 .nab-title{
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;   /* 指示書どおりゴシック体 */
  font-size: clamp(1.5rem, 2.8vw, 2.1rem) !important;
  font-weight: 900 !important;
  line-height: 1.6 !important;
  letter-spacing: .06em !important;
  text-wrap: balance;                          /* 末尾に数文字だけ残る改行を防ぐ */
  word-break: auto-phrase;
}

/* ---- 記事のメイン画像 ---- */
#sec_1788751003884 .nab-main-img-box{
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 178, 105, .20) !important;
  border-radius: 10px !important;
  background: #241a14 !important;
  box-shadow: none !important;
  margin-bottom: 30px !important;
}
#sec_1788751003884 .nab-main-img-box img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ---- 本文 ---- */
#sec_1788751003884 .nab-body-text{
  color: #ece0d2 !important;
  font-family: var(--font-sans) !important;   /* 指示書どおりゴシック体 */
  font-size: 16px !important;
  line-height: 2.1 !important;
  letter-spacing: .03em !important;
  word-break: auto-phrase;                     /* 日本語を文節で折り返す */
}

/* ---- 一覧へ戻るボタン ---- */
#sec_1788751003884 .nab-footer-nav{
  border-top: 1px dashed rgba(255, 178, 105, .28) !important;
  margin-top: 34px !important;
  padding-top: 28px !important;
  text-align: center !important;
}
#sec_1788751003884 .btn-nab-back{
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 13px 26px !important;
  background: transparent !important;
  color: #ffc978 !important;
  border: 1px solid rgba(255, 178, 105, .55) !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all .25s ease !important;
}
#sec_1788751003884 .btn-nab-back:hover{
  background: linear-gradient(100deg, #ff8a3d, #ffc46b) !important;
  border-color: transparent !important;
  color: #2a1608 !important;
}

/* ---- スマホ ---- */
@media (max-width: 768px){
  #sec_1788751003884.news-article-body-section{
    padding: 64px 18px 76px !important;
    background-size: 110px auto !important;
    background-position: right top !important;
  }
  #sec_1788751003884 .nab-container{
    padding: 26px 20px !important;
    border-radius: 12px !important;
  }
  #sec_1788751003884 .nab-main-img-box{ margin-bottom: 24px !important; }
  #sec_1788751003884 .btn-nab-back{ width: 100% !important; justify-content: center !important; }
}


/* =========================================================
   Page: access / ACCESS｜大分市都町のBAR Frontier｜カラオケ・ダーツを楽しめるバー
========================================================= */

/* Block: custom_html / sec_1788751093839 */
/* =========================================================
   BAR Frontier / ACCESS 当店のご案内
   対象: custom_html / sec_1788751093839
========================================================= */

#sec_1788751093839.custom-html-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
}

#sec_1788751093839 .custom-html-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.frontier-access-about,
.frontier-access-about * {
  box-sizing: border-box;
}

.frontier-access-about {
  position: relative;
  overflow: hidden;
  padding: clamp(86px, 9vw, 138px) 24px;
  color: #321d12;
  background:
    radial-gradient(circle at 5% 12%, rgba(255, 153, 67, .17), transparent 25%),
    radial-gradient(circle at 96% 88%, rgba(166, 69, 39, .09), transparent 28%),
    #fff4e4;
}

.frontier-access-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(50px, 7vw, 94px);
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.frontier-access-about__visual {
  position: relative;
  min-width: 0;
  margin: 0;
}

.frontier-access-about__visual::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  z-index: 0;
  border: 1px solid rgba(173, 84, 39, .38);
  border-radius: 36px 10px 36px 10px;
}

.frontier-access-about__visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 36px 10px 36px 10px;
  box-shadow: 0 28px 68px rgba(76, 38, 18, .22);
}

.frontier-access-about__content {
  min-width: 0;
}

.frontier-access-about__label {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 16px;
  color: #d6662b;
  font-family: var(--font-en, sans-serif);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .18em;
  white-space: nowrap;
}

.frontier-access-about__label::before {
  content: "";
  flex: 0 0 40px;
  height: 2px;
  background: linear-gradient(90deg, #ff9145, #e27a3f);
}

.frontier-access-about__content h2 {
  margin: 0 0 28px;
  color: #321c10;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(2.1rem, 4.3vw, 3.75rem);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .055em;
  word-break: keep-all;
  overflow-wrap: normal;
}

.frontier-access-about__text {
  padding-top: 27px;
  border-top: 1px solid rgba(104, 54, 29, .22);
}

.frontier-access-about__text p {
  margin: 0;
  color: #644431;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px;
  font-weight: 550;
  line-height: 2.05;
  letter-spacing: .02em;
  line-break: strict;
  text-wrap: pretty;
}

.frontier-access-about__text p + p {
  margin-top: 12px;
}

@media (max-width: 860px) {
  .frontier-access-about {
    padding: 72px 22px 92px;
  }

  .frontier-access-about__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .frontier-access-about__visual {
    width: min(680px, calc(100% - 18px));
  }
}

@media (max-width: 600px) {
  .frontier-access-about {
    padding: 64px 18px 76px;
  }

  .frontier-access-about__inner {
    gap: 42px;
  }

  .frontier-access-about__visual {
    width: calc(100% - 12px);
  }

  .frontier-access-about__visual::before {
    inset: 12px -12px -12px 12px;
    border-radius: 24px 8px 24px 8px;
  }

  .frontier-access-about__visual img {
    aspect-ratio: 5 / 4;
    border-radius: 24px 8px 24px 8px;
  }

  .frontier-access-about__label {
    gap: 10px;
    margin-bottom: 12px;
    letter-spacing: .12em;
  }

  .frontier-access-about__label::before {
    flex-basis: 28px;
  }

  .frontier-access-about__content h2 {
    margin-bottom: 21px;
    font-size: clamp(1.85rem, 9vw, 2.55rem);
    letter-spacing: .03em;
  }

  .frontier-access-about__text {
    padding-top: 21px;
  }

  .frontier-access-about__text p {
    font-size: 15px;
    line-height: 2;
  }
}

@media (max-width: 370px) {
  .frontier-access-about {
    padding-inline: 15px;
  }
}

/* Block: store_info / sec_1785932333583 */
/* =========================================================
   BAR Frontier / ACCESS 詳細店舗概要
   対象: store_info / sec_1785932333583
========================================================= */

#sec_1785932333583.store-info-section,
#sec_1785932333583.store-info-section * {
  box-sizing: border-box;
}

#sec_1785932333583.store-info-section {
  --fc-bg-overlay: transparent;
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 9vw, 138px) 24px !important;
  color: #fff8ef !important;
  background-color: #1a100b !important;
  background-position: top left !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  background-attachment: scroll !important;
}

#sec_1785932333583 .store-info-container {
  display: grid;
  grid-template-columns: minmax(250px, .36fr) minmax(0, .64fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: start;
  width: min(1180px, 100%);
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(40px, 6vw, 72px);
  border: 1px solid rgba(255, 187, 108, .30);
  border-radius: 36px 10px 36px 10px;
  background: linear-gradient(145deg, rgba(74, 40, 24, .97), rgba(39, 23, 16, .98));
  box-shadow: 0 30px 82px rgba(0, 0, 0, .38);
}

#sec_1785932333583 .store-info-header {
  position: sticky;
  top: 110px;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}

#sec_1785932333583 .store-info-header::before {
  content: "SHOP INFORMATION";
  display: block;
  margin: 0 0 14px;
  color: #ffbd70;
  font-family: var(--font-en, sans-serif);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .17em;
}

#sec_1785932333583 .store-info-title {
  margin: 0 !important;
  color: #fff9f1 !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: clamp(2.05rem, 4.2vw, 3.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: .055em !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

#sec_1785932333583 .store-info-desc {
  margin: 18px 0 0 !important;
  color: #e8d2bd !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  line-height: 1.95 !important;
  text-wrap: pretty;
}

#sec_1785932333583 .store-info-layout,
#sec_1785932333583 .store-info-layout.has-image {
  display: block !important;
  min-width: 0;
}

#sec_1785932333583 .store-info-table-wrap {
  min-width: 0;
}

#sec_1785932333583 .store-info-table {
  display: block;
  width: 100% !important;
  border-collapse: collapse !important;
}

#sec_1785932333583 .store-info-table tbody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#sec_1785932333583 .store-info-table tr {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  width: 100%;
  border-bottom: 1px solid rgba(255, 241, 222, .13);
}

/* TOP用CSSの「6行目以降を非表示」が残っていても、ACCESSでは全行表示 */
#sec_1785932333583 .store-info-table tr:nth-child(n) {
  display: grid !important;
}

/* 現在のACCESSブロック内の実際の11行を、指示書どおりに並べ替え */
#sec_1785932333583 .store-info-table tr:nth-child(1)  { order: 1; }  /* 店名 */
#sec_1785932333583 .store-info-table tr:nth-child(11) { order: 2; }  /* 電話番号 */
#sec_1785932333583 .store-info-table tr:nth-child(3)  { order: 3; }  /* 住所 */
#sec_1785932333583 .store-info-table tr:nth-child(2)  { order: 4; }  /* アクセス */
#sec_1785932333583 .store-info-table tr:nth-child(5)  { order: 5; }  /* 営業時間 */
#sec_1785932333583 .store-info-table tr:nth-child(6)  { order: 6; }  /* 定休日 */
#sec_1785932333583 .store-info-table tr:nth-child(4)  { order: 7; }  /* 貸切 */
#sec_1785932333583 .store-info-table tr:nth-child(9)  { order: 8; }  /* お支払方法 */
#sec_1785932333583 .store-info-table tr:nth-child(7)  { order: 9; }  /* 座席数 */
#sec_1785932333583 .store-info-table tr:nth-child(8)  { order: 10; } /* 駐車場 */
#sec_1785932333583 .store-info-table tr:nth-child(10) { order: 11; } /* 禁煙喫煙 */

/* ブロック既定の「席数」を、指示書どおり「座席数」と表示 */
#sec_1785932333583 .store-info-table tr:nth-child(7) th {
  font-size: 0 !important;
}

#sec_1785932333583 .store-info-table tr:nth-child(7) th::after {
  content: "駐車場";
  font-size: 15px;
}

#sec_1785932333583 .store-info-table th,
#sec_1785932333583 .store-info-table td {
  display: block;
  width: auto !important;
  padding: 18px 0 !important;
  border: 0 !important;
  vertical-align: top !important;
  text-align: left !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  line-height: 1.85 !important;
}

#sec_1785932333583 .store-info-table th {
  padding-right: 24px !important;
  color: #ffbd70 !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

#sec_1785932333583 .store-info-table td {
  min-width: 0;
  color: #fff5e9 !important;
  font-weight: 550;
  letter-spacing: .02em;
  line-break: strict;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* ACCESSは詳細表を主役にするため、任意の右側画像は使わない */
#sec_1785932333583 .store-info-image {
  display: none !important;
}

@media (max-width: 820px) {
  #sec_1785932333583.store-info-section {
    padding: 72px 18px 82px !important;
  }

  #sec_1785932333583 .store-info-container {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 40px 24px 28px;
    border-radius: 28px 8px 28px 8px;
  }

  #sec_1785932333583 .store-info-header {
    position: static;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 241, 222, .13);
  }
}

@media (max-width: 600px) {
  #sec_1785932333583.store-info-section {
    padding-inline: 15px !important;
  }

  #sec_1785932333583 .store-info-container {
    padding: 34px 19px 22px;
  }

  #sec_1785932333583 .store-info-header::before {
    margin-bottom: 11px;
    letter-spacing: .13em;
  }

  #sec_1785932333583 .store-info-title {
    font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
    letter-spacing: .03em !important;
  }

  #sec_1785932333583 .store-info-table tr:nth-child(n) {
    display: block !important;
    padding: 16px 0;
  }

  #sec_1785932333583 .store-info-table th,
  #sec_1785932333583 .store-info-table td {
    width: 100% !important;
  }

  #sec_1785932333583 .store-info-table th {
    padding: 0 0 5px !important;
    font-size: 14px !important;
  }

  #sec_1785932333583 .store-info-table tr:nth-child(7) th::after {
    font-size: 14px;
  }

  #sec_1785932333583 .store-info-table td {
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
}
/* =========================================================
   ACCESSページ 店舗概要：並び順を指示書に合わせる
   ブロック: store_info / sec_1785932333583
   貼り付け先：ACCESSページ → 店舗概要ブロック
               → セクション個別CSS の末尾に追記

   ▼ なぜCSSで並べ替えるのか
     store_info ブロックは
       ①固定項目（店名/住所/電話番号/営業時間/定休日/席数/駐車場/アクセス）
       ②任意項目（extra_rows：貸切・お支払方法・禁煙喫煙）
     の順に出力する作りで、②は必ず①の後ろに回ります。
     指示書は「貸切・お支払方法」が「座席数・駐車場」より前なので、
     管理画面の並べ替え設定（row_order）だけでは実現できません。
     そのため表示順のみCSSで入れ替えます。データ側は変更不要です。

   ▼ 現在の出力順（HTML上の並び）と、指示書の表示順の対応
       HTML   1 店名        → 1
       HTML   2 住所        → 2
       HTML   3 アクセス     → 3
       HTML   4 営業時間     → 4
       HTML   5 定休日      → 5
       HTML   6 席数        → 8   ★
       HTML   7 駐車場      → 9   ★
       HTML   8 貸切        → 6   ★
       HTML   9 お支払方法   → 7   ★
       HTML  10 禁煙喫煙     → 10

   ▼ 注意
     nth-child は「HTML上の位置」で指定しています。
     管理画面で項目を増減したり並べ替えたりしたら、
     下の数字も合わせて直してください（左＝HTML順、order＝表示順）。
========================================================= */

/* テーブルを縦フレックスにして order を効かせる。
   行内は 150px + 残り のグリッドにするので、ラベルと値の左端は揃ったままです */
#sec_1785932333583 .store-info-table{
  display: block !important;
}
#sec_1785932333583 .store-info-table tbody{
  display: flex !important;
  flex-direction: column !important;
}
#sec_1785932333583 .store-info-table tr{
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  align-items: start !important;
}
#sec_1785932333583 .store-info-table th,
#sec_1785932333583 .store-info-table td{
  display: block !important;
  width: auto !important;
}

/* 並べ替え本体 */
#sec_1785932333583 .store-info-table tr:nth-child(1){ order: 1 !important; }   /* 店名 */
#sec_1785932333583 .store-info-table tr:nth-child(2){ order: 2 !important; }   /* 住所 */
#sec_1785932333583 .store-info-table tr:nth-child(3){ order: 3 !important; }   /* アクセス */
#sec_1785932333583 .store-info-table tr:nth-child(4){ order: 4 !important; }   /* 営業時間 */
#sec_1785932333583 .store-info-table tr:nth-child(5){ order: 5 !important; }   /* 定休日 */
#sec_1785932333583 .store-info-table tr:nth-child(6){ order: 8 !important; }   /* 席数   ← 下へ */
#sec_1785932333583 .store-info-table tr:nth-child(7){ order: 9 !important; }   /* 駐車場 ← 下へ */
#sec_1785932333583 .store-info-table tr:nth-child(8){ order: 6 !important; }   /* 貸切   ← 上へ */
#sec_1785932333583 .store-info-table tr:nth-child(9){ order: 7 !important; }   /* お支払方法 ← 上へ */
#sec_1785932333583 .store-info-table tr:nth-child(10){ order: 10 !important; } /* 禁煙喫煙 */


/* =========================================================
   【任意】姉妹店（BAR Noah）ページの店舗概要も同じ順にする場合
   下のコメントを外してください。
   ※Noahの現在のHTML順もACCESSと同じ10行構成です
========================================================= */
/*
#sec_1788750552719 .store-info-table{ display:block !important; }
#sec_1788750552719 .store-info-table tbody{ display:flex !important; flex-direction:column !important; }
#sec_1788750552719 .store-info-table tr{ display:grid !important; grid-template-columns:150px 1fr !important; align-items:start !important; }
#sec_1788750552719 .store-info-table th,
#sec_1788750552719 .store-info-table td{ display:block !important; width:auto !important; }
#sec_1788750552719 .store-info-table tr:nth-child(1){ order:1 !important; }
#sec_1788750552719 .store-info-table tr:nth-child(2){ order:2 !important; }
#sec_1788750552719 .store-info-table tr:nth-child(3){ order:3 !important; }
#sec_1788750552719 .store-info-table tr:nth-child(4){ order:4 !important; }
#sec_1788750552719 .store-info-table tr:nth-child(5){ order:5 !important; }
#sec_1788750552719 .store-info-table tr:nth-child(6){ order:8 !important; }
#sec_1788750552719 .store-info-table tr:nth-child(7){ order:9 !important; }
#sec_1788750552719 .store-info-table tr:nth-child(8){ order:6 !important; }
#sec_1788750552719 .store-info-table tr:nth-child(9){ order:7 !important; }
#sec_1788750552719 .store-info-table tr:nth-child(10){ order:10 !important; }
*/

/* Block: gmap / sec_1785932342748 */
/* =========================================================
   BAR Frontier / ACCESS 詳細店舗概要
   対象: store_info / sec_1785932333583
========================================================= */

#sec_1785932333583.store-info-section,
#sec_1785932333583.store-info-section * {
  box-sizing: border-box;
}

#sec_1785932333583.store-info-section {
  --fc-bg-overlay: transparent;
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 9vw, 138px) 24px !important;
  color: #fff8ef !important;
  background-color: #1a100b !important;
  background-position: top left !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  background-attachment: scroll !important;
}

#sec_1785932333583 .store-info-container {
  display: grid;
  grid-template-columns: minmax(250px, .36fr) minmax(0, .64fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: start;
  width: min(1180px, 100%);
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(40px, 6vw, 72px);
  border: 1px solid rgba(255, 187, 108, .30);
  border-radius: 36px 10px 36px 10px;
  background: linear-gradient(145deg, rgba(74, 40, 24, .97), rgba(39, 23, 16, .98));
  box-shadow: 0 30px 82px rgba(0, 0, 0, .38);
}

#sec_1785932333583 .store-info-header {
  position: sticky;
  top: 110px;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}

#sec_1785932333583 .store-info-header::before {
  content: "SHOP INFORMATION";
  display: block;
  margin: 0 0 14px;
  color: #ffbd70;
  font-family: var(--font-en, sans-serif);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .17em;
}

#sec_1785932333583 .store-info-title {
  margin: 0 !important;
  color: #fff9f1 !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: clamp(2.05rem, 4.2vw, 3.65rem) !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: .055em !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

#sec_1785932333583 .store-info-desc {
  margin: 18px 0 0 !important;
  color: #e8d2bd !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  line-height: 1.95 !important;
  text-wrap: pretty;
}

#sec_1785932333583 .store-info-layout,
#sec_1785932333583 .store-info-layout.has-image {
  display: block !important;
  min-width: 0;
}

#sec_1785932333583 .store-info-table-wrap {
  min-width: 0;
}

#sec_1785932333583 .store-info-table {
  display: block;
  width: 100% !important;
  border-collapse: collapse !important;
}

#sec_1785932333583 .store-info-table tbody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#sec_1785932333583 .store-info-table tr {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  width: 100%;
  border-bottom: 1px solid rgba(255, 241, 222, .13);
}

/* 必須項目8行＋追加項目3行を、指示書の順番に並べ替え */
#sec_1785932333583 .store-info-table tr:nth-child(1)  { order: 1; }
#sec_1785932333583 .store-info-table tr:nth-child(3)  { order: 2; }
#sec_1785932333583 .store-info-table tr:nth-child(2)  { order: 3; }
#sec_1785932333583 .store-info-table tr:nth-child(8)  { order: 4; }
#sec_1785932333583 .store-info-table tr:nth-child(4)  { order: 5; }
#sec_1785932333583 .store-info-table tr:nth-child(5)  { order: 6; }
#sec_1785932333583 .store-info-table tr:nth-child(9)  { order: 7; }
#sec_1785932333583 .store-info-table tr:nth-child(10) { order: 8; }
#sec_1785932333583 .store-info-table tr:nth-child(6)  { order: 9; }
#sec_1785932333583 .store-info-table tr:nth-child(7)  { order: 10; }
#sec_1785932333583 .store-info-table tr:nth-child(11) { order: 11; }

#sec_1785932333583 .store-info-table th,
#sec_1785932333583 .store-info-table td {
  display: block;
  width: auto !important;
  padding: 18px 0 !important;
  border: 0 !important;
  vertical-align: top !important;
  text-align: left !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px !important;
  line-height: 1.85 !important;
}

#sec_1785932333583 .store-info-table th {
  padding-right: 24px !important;
  color: #ffbd70 !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

#sec_1785932333583 .store-info-table td {
  min-width: 0;
  color: #fff5e9 !important;
  font-weight: 550;
  letter-spacing: .02em;
  line-break: strict;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* ACCESSは詳細表を主役にするため、任意の右側画像は使わない */
#sec_1785932333583 .store-info-image {
  display: none !important;
}

@media (max-width: 820px) {
  #sec_1785932333583.store-info-section {
    padding: 72px 18px 82px !important;
  }

  #sec_1785932333583 .store-info-container {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 40px 24px 28px;
    border-radius: 28px 8px 28px 8px;
  }

  #sec_1785932333583 .store-info-header {
    position: static;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 241, 222, .13);
  }
}

@media (max-width: 600px) {
  #sec_1785932333583.store-info-section {
    padding-inline: 15px !important;
  }

  #sec_1785932333583 .store-info-container {
    padding: 34px 19px 22px;
  }

  #sec_1785932333583 .store-info-header::before {
    margin-bottom: 11px;
    letter-spacing: .13em;
  }

  #sec_1785932333583 .store-info-title {
    font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
    letter-spacing: .03em !important;
  }

  #sec_1785932333583 .store-info-table tr {
    display: block;
    padding: 16px 0;
  }

  #sec_1785932333583 .store-info-table th,
  #sec_1785932333583 .store-info-table td {
    width: 100% !important;
  }

  #sec_1785932333583 .store-info-table th {
    padding: 0 0 5px !important;
    font-size: 14px !important;
  }

  #sec_1785932333583 .store-info-table td {
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
}


/* =========================================================
   Page: concept / CONCEPT｜大分市都町のBAR Frontier｜カラオケ・ダーツを楽しめるバー
========================================================= */

/* Block: custom_html / sec_1788749663783 */
/* =========================================================
   BAR Frontier / CONCEPTページ本文
   対象: custom_html / sec_1788749663783
========================================================= */

#sec_1788749663783.custom-html-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

#sec_1788749663783 .custom-html-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.frontier-concept,
.frontier-concept * {
  box-sizing: border-box;
}

.frontier-concept {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(88px, 9vw, 144px) 24px;
  color: #fff8ee;
  background:
    radial-gradient(circle at 4% 17%, rgba(255, 153, 67, .13), transparent 28%),
    radial-gradient(circle at 96% 76%, rgba(196, 105, 48, .11), transparent 27%),
    #160e0a;
}

.frontier-concept::before {
  content: "CONCEPT";
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 190, 112, .07);
  font-family: var(--font-en, sans-serif);
  font-size: clamp(5rem, 14vw, 13rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
}

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

.frontier-concept__item {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  grid-template-areas: "visual content";
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
  min-width: 0;
}

.frontier-concept__item + .frontier-concept__item {
  margin-top: clamp(104px, 12vw, 176px);
}

.frontier-concept__item:nth-child(even) {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  grid-template-areas: "content visual";
}

.frontier-concept__visual {
  grid-area: visual;
  position: relative;
  min-width: 0;
  margin: 0;
}

.frontier-concept__visual::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  z-index: -1;
  border: 1px solid rgba(255, 177, 91, .5);
  border-radius: 36px 10px 36px 10px;
}

.frontier-concept__item:nth-child(even) .frontier-concept__visual::before {
  inset: 18px 18px -18px -18px;
  border-radius: 10px 36px 10px 36px;
}

.frontier-concept__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 36px 10px 36px 10px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .36);
}

.frontier-concept__item:nth-child(even) .frontier-concept__visual img {
  border-radius: 10px 36px 10px 36px;
}

.frontier-concept__content {
  grid-area: content;
  position: relative;
  min-width: 0;
  padding: clamp(12px, 2vw, 28px) 0;
}

.frontier-concept__number {
  position: absolute;
  top: -.42em;
  right: 0;
  z-index: -1;
  margin: 0;
  color: rgba(255, 179, 94, .10);
  font-family: var(--font-en, sans-serif);
  font-size: clamp(5.2rem, 9vw, 8.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.frontier-concept__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: #ffba6b;
  font-family: var(--font-en, sans-serif);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .18em;
  white-space: nowrap;
}

.frontier-concept__label::before {
  content: "";
  flex: 0 0 42px;
  height: 2px;
  background: linear-gradient(90deg, #ff9145, #ffc877);
}

.frontier-concept__title {
  margin: 0 0 30px;
  color: #fff9f0;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(1.8rem, 3.35vw, 3.15rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .045em;
}

.frontier-concept__title span {
  display: block;
  white-space: nowrap;
}

.frontier-concept__text {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 190, 115, .24);
}

.frontier-concept__text p {
  margin: 0;
  color: #ead8c5;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 2.05;
  letter-spacing: .025em;
  line-break: strict;
  text-wrap: pretty;
}

.frontier-concept__text p + p {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .frontier-concept {
    padding: 80px 22px 104px;
  }

  .frontier-concept__item,
  .frontier-concept__item:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "content";
    gap: 48px;
  }

  .frontier-concept__item + .frontier-concept__item {
    margin-top: 120px;
  }

  .frontier-concept__visual {
    width: min(680px, calc(100% - 18px));
  }

  .frontier-concept__item:nth-child(even) .frontier-concept__visual {
    margin-left: auto;
  }

  .frontier-concept__content {
    width: min(680px, 100%);
  }

  .frontier-concept__item:nth-child(even) .frontier-concept__content {
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .frontier-concept {
    padding: 66px 18px 84px;
  }

  .frontier-concept::before {
    top: 18px;
    font-size: 4.5rem;
  }

  .frontier-concept__item,
  .frontier-concept__item:nth-child(even) {
    gap: 42px;
  }

  .frontier-concept__item + .frontier-concept__item {
    margin-top: 96px;
  }

  .frontier-concept__visual {
    width: calc(100% - 12px);
  }

  .frontier-concept__visual::before {
    inset: 12px -12px -12px 12px;
    border-radius: 24px 8px 24px 8px;
  }

  .frontier-concept__item:nth-child(even) .frontier-concept__visual::before {
    inset: 12px 12px -12px -12px;
    border-radius: 8px 24px 8px 24px;
  }

  .frontier-concept__visual img {
    aspect-ratio: 5 / 4;
    border-radius: 24px 8px 24px 8px;
  }

  .frontier-concept__item:nth-child(even) .frontier-concept__visual img {
    border-radius: 8px 24px 8px 24px;
  }

  .frontier-concept__content {
    padding: 6px 0 0;
  }

  .frontier-concept__number {
    top: -.12em;
    font-size: 5.4rem;
  }

  .frontier-concept__label {
    gap: 11px;
    margin-bottom: 14px;
    font-size: 14px;
    letter-spacing: .12em;
  }

  .frontier-concept__label::before {
    flex-basis: 28px;
  }

  .frontier-concept__title {
    margin-bottom: 22px;
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.5;
    letter-spacing: .02em;
  }

  .frontier-concept__text {
    padding-top: 22px;
  }

  .frontier-concept__text p {
    font-size: 15px;
    line-height: 2;
    letter-spacing: .01em;
  }
}

@media (max-width: 370px) {
  .frontier-concept {
    padding-inline: 15px;
  }

  .frontier-concept__title {
    font-size: 1.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frontier-concept *,
  .frontier-concept *::before,
  .frontier-concept *::after {
    scroll-behavior: auto;
    transition: none;
  }
}


/* =========================================================
   Page: noah / noah｜大分市都町のBAR Frontier｜カラオケ・ダーツを楽しめるバー
========================================================= */

/* Block: hero_page / sec_1788750309657 */
/* =========================================================
   BAR Noah ページ／モノトーン（クール系）＋ 店舗概要の並び順
   貼り付け先：姉妹サイトページの「どれか1つのブロック」の
               セクション個別CSS（16番と差し替え）

   ★16_姉妹店_モノトーン.css の置き換えです★
     16番を貼った箇所を、このファイルの内容で丸ごと差し替えてください。

   変更点
     ・配色をニュートラルグレー → 青みのあるクール系グレーに
     ・16番で拾えていなかった暖色（eyebrow・枠線・地図見出し）を追加
     ・店舗概要の並び順を指示書に合わせる処理を同梱
     ・フォント指定は一切していません（ゴシック体のまま維持）
========================================================= */

body:has(#sec_1788750309657){
  --mono-bg:        #13161a;   /* クール系の暗色 */
  --mono-bg-alt:    #191d23;
  --mono-bg-deep:   #0e1114;
  --mono-line:      rgba(200,215,230,.20);
  --mono-line-soft: rgba(200,215,230,.11);
  --mono-head:      #f0f4f8;
  --mono-text:      #bcc5d0;
  --mono-mute:      #8d97a3;
  --mono-accent:    #cfd9e4;
}

/* ---- 1) ヒーロー ---- */
body:has(#sec_1788750309657) .page-hero-wrapper{ background-color: var(--mono-bg) !important; }

/* ★重要★ 姉妹店のヒーローだけ、レイアウトを元の形（タイトル上・装飾下）に戻す。
   共通ヒーロー(03番)は「バナー画像を全面に敷いてタイトルを中央に置く」設定に
   変わりましたが、姉妹店は舵輪オーナメント(1200x252)を下端に置く構成なので、
   そのままだとタイトルと舵輪が重なります。
   ID指定(#sec_...)なのでクラス指定の共通CSSより優先されます。 */
#sec_1788750309657.page-hero-wrapper{
  display: block !important;
  min-height: 0 !important;
  padding: 96px 24px calc(min(21%, 252px) + 40px) !important;
  background-position: center bottom 18px !important;
}
@media (max-width:1100px){
  #sec_1788750309657.page-hero-wrapper{
    padding: 110px 20px calc(min(21%, 252px) + 30px) !important;
  }
}
body:has(#sec_1788750309657) .ph-title{ color: var(--mono-head) !important; }
body:has(#sec_1788750309657) .ph-desc{ color: var(--mono-mute) !important; }

/* ---- 2) 導入キャッチ ---- */
body:has(#sec_1788750309657) .fr-lead{ background: var(--mono-bg-alt) !important; }
body:has(#sec_1788750309657) .fr-lead-eyebrow{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .fr-lead-catch{ color: #fff !important; }
body:has(#sec_1788750309657) .fr-lead-rule{
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--mono-accent), rgba(255,255,255,0)) !important;
}
body:has(#sec_1788750309657) .fr-lead-text{ color: var(--mono-text) !important; }

/* ---- 3) 紹介ブロック（左右分割） ---- */
body:has(#sec_1788750309657) .concept-section{
  background: var(--mono-bg) !important;
  color: var(--mono-text) !important;
}
body:has(#sec_1788750309657) .concept-eyebrow{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .concept-title,
body:has(#sec_1788750309657) .concept-content h2,
body:has(#sec_1788750309657) .concept-content h3{ color: #fff !important; }
body:has(#sec_1788750309657) .concept-text,
body:has(#sec_1788750309657) .concept-content p{ color: var(--mono-text) !important; }
body:has(#sec_1788750309657) .concept-img-wrapper{
  border-color: var(--mono-line) !important;
  background: #1c2026 !important;
}
/* 装飾の金枠が残っていた箇所（非表示だが念のため無彩色に） */
body:has(#sec_1788750309657) .concept-img-wrapper::before{
  border-color: var(--mono-line) !important;
}
body:has(#sec_1788750309657) .concept-img-wrapper img,
body:has(#sec_1788750309657) .concept-img-wrapper video{
  filter: grayscale(.85) contrast(1.04) !important;
}
body:has(#sec_1788750309657) .concept-content a[class*="btn"]{
  color: var(--mono-accent) !important;
  border-color: var(--mono-line) !important;
}
body:has(#sec_1788750309657) .concept-content a[class*="btn"]:hover{
  background: var(--mono-accent) !important;
  border-color: transparent !important;
  color: #13161a !important;
}

/* ---- 4) SYSTEM 準備中 ---- */
body:has(#sec_1788750309657) .fr-soon{ background: var(--mono-bg-alt) !important; }
body:has(#sec_1788750309657) .fr-soon-panel{
  border-color: var(--mono-line) !important;
  background: rgba(255,255,255,.035) !important;
}
body:has(#sec_1788750309657) .fr-soon-eyebrow{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .fr-soon-title{ color: #fff !important; }
body:has(#sec_1788750309657) .fr-soon-lead{ color: var(--mono-text) !important; }
body:has(#sec_1788750309657) .fr-soon-badge{
  background: linear-gradient(100deg, #eef3f8, #aeb9c6) !important;
  color: #13161a !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
}

/* ---- 5) 店舗概要 ---- */
body:has(#sec_1788750309657) .store-info-section{
  background: var(--mono-bg) !important;
  color: var(--mono-text) !important;
}
/* ★16番で拾えていなかった箇所 */
/* カード本体。元は background:linear-gradient(145deg, rgba(70,42,25,.96), rgba(37,23,16,.97))
   という茶色のグラデーションだったので、角度・構成はそのままで寒色に置き換えます */
body:has(#sec_1788750309657) .store-info-container{
  background: linear-gradient(145deg, rgba(34,41,50,.96), rgba(19,22,27,.97)) !important;
  border-color: var(--mono-line) !important;
}
body:has(#sec_1788750309657) .store-info-header::before{   /* BAR NOAH INFORMATION */
  color: var(--mono-mute) !important;
  border-color: var(--mono-line) !important;
}
body:has(#sec_1788750309657) .store-info-title{ color: var(--mono-head) !important; }
body:has(#sec_1788750309657) .store-info-desc{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .store-info-table th,
body:has(#sec_1788750309657) .store-info-table td{
  border-bottom-color: var(--mono-line-soft) !important;
}
body:has(#sec_1788750309657) .store-info-table th{ color: var(--mono-accent) !important; }
body:has(#sec_1788750309657) .store-info-table td{ color: var(--mono-text) !important; }
body:has(#sec_1788750309657) .store-info-image img{
  border-color: var(--mono-line) !important;
  filter: grayscale(.85) contrast(1.04) !important;
}

/* ---- 6) GoogleMap ---- */
body:has(#sec_1788750309657) .gmap-section{ background: var(--mono-bg-deep) !important; }
body:has(#sec_1788750309657) .gmap-title{ color: var(--mono-head) !important; }  /* 金色→無彩色（書体は変更なし） */
body:has(#sec_1788750309657) .gmap-frame-wrap{
  border-color: var(--mono-line) !important;
  background: #1c2026 !important;
}
body:has(#sec_1788750309657) .gmap-frame-wrap iframe{
  filter: grayscale(.9) contrast(1.05) !important;
}


/* =========================================================
   店舗概要の並び順を指示書に合わせる（ACCESSページと同じ処理）
   HTML順  1店名 2住所 3アクセス 4営業時間 5定休日
           6席数 7駐車場 8貸切 9お支払方法 10禁煙喫煙
   表示順  → 6貸切 7お支払方法 8席数 9駐車場 に入れ替え
   ※管理画面で項目を増減・並べ替えたら下の数字も直してください
========================================================= */
#sec_1788750552719 .store-info-table{ display: block !important; }
#sec_1788750552719 .store-info-table tbody{
  display: flex !important;
  flex-direction: column !important;
}
#sec_1788750552719 .store-info-table tr{
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  align-items: start !important;
}
#sec_1788750552719 .store-info-table th,
#sec_1788750552719 .store-info-table td{
  display: block !important;
  width: auto !important;
}
#sec_1788750552719 .store-info-table tr:nth-child(1){ order: 1 !important; }   /* 店名 */
#sec_1788750552719 .store-info-table tr:nth-child(2){ order: 2 !important; }   /* 住所 */
#sec_1788750552719 .store-info-table tr:nth-child(3){ order: 3 !important; }   /* アクセス */
#sec_1788750552719 .store-info-table tr:nth-child(4){ order: 4 !important; }   /* 営業時間 */
#sec_1788750552719 .store-info-table tr:nth-child(5){ order: 5 !important; }   /* 定休日 */
#sec_1788750552719 .store-info-table tr:nth-child(6){ order: 8 !important; }   /* 席数   ← 下へ */
#sec_1788750552719 .store-info-table tr:nth-child(7){ order: 9 !important; }   /* 駐車場 ← 下へ */
#sec_1788750552719 .store-info-table tr:nth-child(8){ order: 6 !important; }   /* 貸切   ← 上へ */
#sec_1788750552719 .store-info-table tr:nth-child(9){ order: 7 !important; }   /* お支払方法 ← 上へ */
#sec_1788750552719 .store-info-table tr:nth-child(10){ order: 10 !important; } /* 禁煙喫煙 */


/* =========================================================
   【任意】最下部のFrontier CTA と スマホ固定バーもモノトーンにする場合
   下のコメントを外してください。
   ※どちらもFrontierブランド側の共通パーツなので、既定では色を残しています
========================================================= */
/*
body:has(#sec_1788750309657) .fr-footer-intro{ background:#0e1114 !important; }
body:has(#sec_1788750309657) .fr-footer-kicker{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .fr-footer-catch{ color:#fff !important; }
body:has(#sec_1788750309657) .fr-footer-note{ color: var(--mono-text) !important; }
body:has(#sec_1788750309657) .fr-footer-action{
  background: transparent !important;
  border: 1px solid var(--mono-line) !important;
  color: var(--mono-accent) !important;
}
body:has(#sec_1788750309657) .fr-footer-logo img{ filter: grayscale(1) !important; }

body:has(#sec_1788750309657) .fr-spbar-ig{
  background: linear-gradient(100deg,#eef3f8,#aeb9c6) !important;
  color:#13161a !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.4) !important;
}
body:has(#sec_1788750309657) .fr-spbar-access{
  color: var(--mono-accent) !important;
  border-color: var(--mono-line) !important;
}
*/

/* Block: concept_split / sec_1788750428361 */
/* =========================================================
   姉妹店紹介ページ（BAR Noah）／紹介ブロック
   ブロック: concept_split / sec_1788750428361
   貼り付け先：姉妹サイトページ → 該当ブロック
               → セクション個別CSS に「全置き換え」

   ※ 現在このセクションだけ背景が明るいクリーム（#f7f1e5）で
      サイト全体から浮いていたため、ブラウン系に統一しています。
========================================================= */

#sec_1788750428361.concept-section{
  padding: 110px 24px !important;
  background: #1d1510 !important;
  color: #fdf3e7 !important;
}

/* ---- 横並びレイアウト ---- */
#sec_1788750428361 .concept-container{
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr) !important;
  gap: 56px !important;
  align-items: center !important;
}

/* ---- テキスト側 ---- */
#sec_1788750428361 .concept-content{ padding: 0 !important; }
#sec_1788750428361 .concept-content::before{ display: none !important; }

#sec_1788750428361 .concept-eyebrow{
  margin: 0 0 14px !important;
  color: #ff9f45 !important;
  font-family: var(--font-en) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
}
#sec_1788750428361 .concept-title,
#sec_1788750428361 .concept-content h2,
#sec_1788750428361 .concept-content h3{
  margin: 0 0 24px !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;   /* 指示書どおりゴシック体 */
  font-size: clamp(1.5rem, 2.6vw, 2.05rem) !important;
  font-weight: 900 !important;
  line-height: 1.65 !important;
  letter-spacing: .06em !important;
  text-wrap: balance;                          /* 末尾に数文字だけ残る改行を防ぐ */
  word-break: auto-phrase;
}
#sec_1788750428361 .concept-text,
#sec_1788750428361 .concept-content p{
  margin: 0 !important;
  color: #ded0be !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  line-height: 2.1 !important;
  letter-spacing: .03em !important;
  word-break: auto-phrase;                     /* 日本語を文節で折り返す */
  text-wrap: pretty;                           /* 最終行が数文字だけ残るのを防ぐ */
}

/* ---- 画像側 ---- */
#sec_1788750428361 .concept-img-wrapper{
  width: auto !important;
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 178, 105, .24) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
  background: #241a14 !important;
}
#sec_1788750428361 .concept-img-wrapper::before{ display: none !important; }
#sec_1788750428361 .concept-img-wrapper img,
#sec_1788750428361 .concept-img-wrapper video{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .6s ease !important;
}
#sec_1788750428361 .concept-img-wrapper:hover img{ transform: scale(1.04) !important; }

/* ---- ボタン（設定した場合） ---- */
#sec_1788750428361 .concept-content a[class*="btn"]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 30px !important;
  padding: 13px 28px !important;
  background: transparent !important;
  color: #ffc978 !important;
  border: 1px solid rgba(255, 178, 105, .55) !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all .25s ease !important;
}
#sec_1788750428361 .concept-content a[class*="btn"]:hover{
  background: linear-gradient(100deg, #ff8a3d, #ffc46b) !important;
  border-color: transparent !important;
  color: #2a1608 !important;
}

/* ---- スマホ：縦積み（画像が先） ---- */
@media (max-width: 900px){
  #sec_1788750428361.concept-section{ padding: 68px 18px !important; }
  #sec_1788750428361 .concept-container,
  #sec_1788750428361 .concept-container.concept-reverse{
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  #sec_1788750428361 .concept-content{ order: 2 !important; }
  #sec_1788750428361 .concept-img-wrapper{ order: 1 !important; }
  #sec_1788750428361 .concept-content a[class*="btn"]{
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Block: custom_html / sec_1789036806229 */
.fr-soon{
  padding: 96px 24px !important;
  background: #241a13 !important;
  text-align: center !important;
}
.fr-soon-panel{
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 54px 34px !important;
  border: 1px dashed rgba(255, 178, 105, .38) !important;
  border-radius: 16px !important;
  background: rgba(255, 196, 140, .05) !important;
}
.fr-soon-eyebrow{
  margin: 0 0 12px !important;
  color: #ff9f45 !important;
  font-family: var(--font-en) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .24em !important;
}
.fr-soon-title{
  margin: 0 0 18px !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  letter-spacing: .1em !important;
}
.fr-soon-lead{
  margin: 0 0 30px !important;
  color: #ded0be !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  line-height: 2 !important;
  text-wrap: pretty;
  word-break: auto-phrase;
}
.fr-soon-badge{
  display: inline-block !important;
  padding: 11px 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(100deg, #ff8a3d, #ffc46b) !important;
  color: #2a1608 !important;
  font-family: var(--font-en) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  box-shadow: 0 10px 26px rgba(255, 138, 61, .28) !important;
}
@media (max-width: 768px){
  .fr-soon{ padding: 64px 18px !important; }
  .fr-soon-panel{ padding: 38px 22px !important; }
  .fr-soon-badge{ font-size: 14px !important; padding: 10px 22px !important; }
}

/* Block: store_info / sec_1788750552719 */
/* =========================================================
   BAR Noah ページ／モノトーン（クール系）＋ 店舗概要の並び順
   貼り付け先：姉妹サイトページの「どれか1つのブロック」の
               セクション個別CSS（16番と差し替え）

   ★16_姉妹店_モノトーン.css の置き換えです★
     16番を貼った箇所を、このファイルの内容で丸ごと差し替えてください。

   変更点
     ・配色をニュートラルグレー → 青みのあるクール系グレーに
     ・16番で拾えていなかった暖色（eyebrow・枠線・地図見出し）を追加
     ・店舗概要の並び順を指示書に合わせる処理を同梱
     ・フォント指定は一切していません（ゴシック体のまま維持）
========================================================= */

body:has(#sec_1788750309657){
  --mono-bg:        #13161a;   /* クール系の暗色 */
  --mono-bg-alt:    #191d23;
  --mono-bg-deep:   #0e1114;
  --mono-line:      rgba(200,215,230,.20);
  --mono-line-soft: rgba(200,215,230,.11);
  --mono-head:      #f0f4f8;
  --mono-text:      #bcc5d0;
  --mono-mute:      #8d97a3;
  --mono-accent:    #cfd9e4;
}

/* ---- 1) ヒーロー ---- */
body:has(#sec_1788750309657) .page-hero-wrapper{ background-color: var(--mono-bg) !important; }
body:has(#sec_1788750309657) .ph-title{ color: var(--mono-head) !important; }
body:has(#sec_1788750309657) .ph-desc{ color: var(--mono-mute) !important; }

/* ---- 2) 導入キャッチ ---- */
body:has(#sec_1788750309657) .fr-lead{ background: var(--mono-bg-alt) !important; }
body:has(#sec_1788750309657) .fr-lead-eyebrow{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .fr-lead-catch{ color: #fff !important; }
body:has(#sec_1788750309657) .fr-lead-rule{
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--mono-accent), rgba(255,255,255,0)) !important;
}
body:has(#sec_1788750309657) .fr-lead-text{ color: var(--mono-text) !important; }

/* ---- 3) 紹介ブロック（左右分割） ---- */
body:has(#sec_1788750309657) .concept-section{
  background: var(--mono-bg) !important;
  color: var(--mono-text) !important;
}
body:has(#sec_1788750309657) .concept-eyebrow{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .concept-title,
body:has(#sec_1788750309657) .concept-content h2,
body:has(#sec_1788750309657) .concept-content h3{ color: #fff !important; }
body:has(#sec_1788750309657) .concept-text,
body:has(#sec_1788750309657) .concept-content p{ color: var(--mono-text) !important; }
body:has(#sec_1788750309657) .concept-img-wrapper{
  border-color: var(--mono-line) !important;
  background: #1c2026 !important;
}
/* 装飾の金枠が残っていた箇所（非表示だが念のため無彩色に） */
body:has(#sec_1788750309657) .concept-img-wrapper::before{
  border-color: var(--mono-line) !important;
}
body:has(#sec_1788750309657) .concept-img-wrapper img,
body:has(#sec_1788750309657) .concept-img-wrapper video{
  filter: grayscale(.85) contrast(1.04) !important;
}
body:has(#sec_1788750309657) .concept-content a[class*="btn"]{
  color: var(--mono-accent) !important;
  border-color: var(--mono-line) !important;
}
body:has(#sec_1788750309657) .concept-content a[class*="btn"]:hover{
  background: var(--mono-accent) !important;
  border-color: transparent !important;
  color: #13161a !important;
}

/* ---- 4) SYSTEM 準備中 ---- */
body:has(#sec_1788750309657) .fr-soon{ background: var(--mono-bg-alt) !important; }
body:has(#sec_1788750309657) .fr-soon-panel{
  border-color: var(--mono-line) !important;
  background: rgba(255,255,255,.035) !important;
}
body:has(#sec_1788750309657) .fr-soon-eyebrow{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .fr-soon-title{ color: #fff !important; }
body:has(#sec_1788750309657) .fr-soon-lead{ color: var(--mono-text) !important; }
body:has(#sec_1788750309657) .fr-soon-badge{
  background: linear-gradient(100deg, #eef3f8, #aeb9c6) !important;
  color: #13161a !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
}

/* ---- 5) 店舗概要 ---- */
body:has(#sec_1788750309657) .store-info-section{
  background: var(--mono-bg) !important;
  color: var(--mono-text) !important;
}
/* ★16番で拾えていなかった箇所 */
/* カード本体。元は background:linear-gradient(145deg, rgba(70,42,25,.96), rgba(37,23,16,.97))
   という茶色のグラデーションだったので、角度・構成はそのままで寒色に置き換えます */
body:has(#sec_1788750309657) .store-info-container{
  background: linear-gradient(145deg, rgba(34,41,50,.96), rgba(19,22,27,.97)) !important;
  border-color: var(--mono-line) !important;
}
body:has(#sec_1788750309657) .store-info-header::before{   /* BAR NOAH INFORMATION */
  color: var(--mono-mute) !important;
  border-color: var(--mono-line) !important;
}
body:has(#sec_1788750309657) .store-info-title{ color: var(--mono-head) !important; }
body:has(#sec_1788750309657) .store-info-desc{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .store-info-table th,
body:has(#sec_1788750309657) .store-info-table td{
  border-bottom-color: var(--mono-line-soft) !important;
}
body:has(#sec_1788750309657) .store-info-table th{ color: var(--mono-accent) !important; }
body:has(#sec_1788750309657) .store-info-table td{ color: var(--mono-text) !important; }
body:has(#sec_1788750309657) .store-info-image img{
  border-color: var(--mono-line) !important;
  filter: grayscale(.85) contrast(1.04) !important;
}

/* ---- 6) GoogleMap ---- */
body:has(#sec_1788750309657) .gmap-section{ background: var(--mono-bg-deep) !important; }
body:has(#sec_1788750309657) .gmap-title{ color: var(--mono-head) !important; }  /* 金色→無彩色（書体は変更なし） */
body:has(#sec_1788750309657) .gmap-frame-wrap{
  border-color: var(--mono-line) !important;
  background: #1c2026 !important;
}
body:has(#sec_1788750309657) .gmap-frame-wrap iframe{
  filter: grayscale(.9) contrast(1.05) !important;
}


/* =========================================================
   店舗概要の並び順を指示書に合わせる（ACCESSページと同じ処理）
   HTML順  1店名 2住所 3アクセス 4営業時間 5定休日
           6席数 7駐車場 8貸切 9お支払方法 10禁煙喫煙
   表示順  → 6貸切 7お支払方法 8席数 9駐車場 に入れ替え
   ※管理画面で項目を増減・並べ替えたら下の数字も直してください
========================================================= */
#sec_1788750552719 .store-info-table{ display: block !important; }
#sec_1788750552719 .store-info-table tbody{
  display: flex !important;
  flex-direction: column !important;
}
#sec_1788750552719 .store-info-table tr{
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  align-items: start !important;
}
#sec_1788750552719 .store-info-table th,
#sec_1788750552719 .store-info-table td{
  display: block !important;
  width: auto !important;
}
#sec_1788750552719 .store-info-table tr:nth-child(1){ order: 1 !important; }   /* 店名 */
#sec_1788750552719 .store-info-table tr:nth-child(2){ order: 2 !important; }   /* 住所 */
#sec_1788750552719 .store-info-table tr:nth-child(3){ order: 3 !important; }   /* アクセス */
#sec_1788750552719 .store-info-table tr:nth-child(4){ order: 4 !important; }   /* 営業時間 */
#sec_1788750552719 .store-info-table tr:nth-child(5){ order: 5 !important; }   /* 定休日 */
#sec_1788750552719 .store-info-table tr:nth-child(6){ order: 8 !important; }   /* 席数   ← 下へ */
#sec_1788750552719 .store-info-table tr:nth-child(7){ order: 9 !important; }   /* 駐車場 ← 下へ */
#sec_1788750552719 .store-info-table tr:nth-child(8){ order: 6 !important; }   /* 貸切   ← 上へ */
#sec_1788750552719 .store-info-table tr:nth-child(9){ order: 7 !important; }   /* お支払方法 ← 上へ */
#sec_1788750552719 .store-info-table tr:nth-child(10){ order: 10 !important; } /* 禁煙喫煙 */


/* =========================================================
   【任意】最下部のFrontier CTA と スマホ固定バーもモノトーンにする場合
   下のコメントを外してください。
   ※どちらもFrontierブランド側の共通パーツなので、既定では色を残しています
========================================================= */
/*
body:has(#sec_1788750309657) .fr-footer-intro{ background:#0e1114 !important; }
body:has(#sec_1788750309657) .fr-footer-kicker{ color: var(--mono-mute) !important; }
body:has(#sec_1788750309657) .fr-footer-catch{ color:#fff !important; }
body:has(#sec_1788750309657) .fr-footer-note{ color: var(--mono-text) !important; }
body:has(#sec_1788750309657) .fr-footer-action{
  background: transparent !important;
  border: 1px solid var(--mono-line) !important;
  color: var(--mono-accent) !important;
}
body:has(#sec_1788750309657) .fr-footer-logo img{ filter: grayscale(1) !important; }

body:has(#sec_1788750309657) .fr-spbar-ig{
  background: linear-gradient(100deg,#eef3f8,#aeb9c6) !important;
  color:#13161a !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.4) !important;
}
body:has(#sec_1788750309657) .fr-spbar-access{
  color: var(--mono-accent) !important;
  border-color: var(--mono-line) !important;
}
*/

/* Block: gmap / sec_1788750743647 */
.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: footer / FOOTER ページ
========================================================= */

/* Block: global_footer / sec_1782112173284 */
/* =============================================================
   シンプルフッター（ナビ ＋ 店名/ロゴ ＋ コピーライト のみ）
   ============================================================= */

/* 1) 店舗情報・決済アイコン・Googleマップをまとめて非表示 */
.global-footer .info-grid { display: none; }

/* 2) フッターナビを表示する（style.css の display:none を上書き） */
.global-footer .footer-nav-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

/* 3) 全体の余白を締める */
.global-footer {
  padding: 40px 20px 32px;
}

/* 4) ナビゲーション */
.global-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}
.global-footer .footer-nav-link {
  color: var(--text-sub);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.global-footer .footer-nav-link:hover {
  color: var(--gold-light);
}

/* 5) 店名（区切り線は入れず、余白だけで分ける） */
.global-footer .footer-nav-brand {
  margin-top: 22px;
  width: 100%;
}
.global-footer .footer-nav-brand h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--gold-light);
}

/* 6) コピーライト（</footer> の外側の div なので .global-footer を前置しない） */
.footer-copy-text {
  padding: 16px 20px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* 7) スマートフォン */
@media (max-width: 768px) {
  .global-footer { padding: 32px 16px 24px; }
  .global-footer .footer-nav { gap: 10px 20px; }
  .global-footer .footer-nav-link { font-size: 12px; }
  .global-footer .footer-nav-brand { margin-top: 18px; }
  .global-footer .footer-nav-brand h2 { font-size: 20px; }
}
/* =========================================================
   ▼ サイト共通CSS（下層ページ共通ヒーロー）
   貼り付け先：FOOTERページ → global_footer ブロック → セクション個別CSS
                （既存のフッターCSSの「一番下」に追記）

   ここに置く理由：
   custom.css は  header → index → 下層ページ(id順) → footer  の順に
   連結されるため、footer は必ず最後になります。
   = 今後どのページを追加しても、この共通CSSが上書きされません。
========================================================= */

/* ---- 下層ページ共通ヒーロー ---- */
.page-hero-wrapper{
  position: relative;
  min-height: 0;
  /* 下の余白＝オーナメントの高さ(幅の21%／上限252px)＋40px */
  padding: 96px 24px calc(min(21%, 252px) + 40px);
  text-align: center;
  color: var(--text-main);

  /* サイドバーに似合うブラウン */
  background-color: #2b1c12;

  /* 花のオーナメントは「拡大しない」
     原寸1200pxを上限にし、画面が狭いときだけ縮小する */
  background-repeat: no-repeat;
  background-position: center bottom 18px;
  background-size: min(100%, 1200px) auto;
}

/* 元の青緑オーバーレイを解除（ブラウンとオーナメントを活かす） */
.page-hero-wrapper::after,
.ph-overlay{
  content: "";
  position: absolute;
  inset: 0;
  background: none;
}

.ph-container{ position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }

/* 見出し：指示書どおりゴシック体・オレンジ寄りのアンバー */
.ph-title{
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 900;
  color: #ffc978;
  letter-spacing: .14em;
  line-height: 1.5;
}
.ph-desc{
  margin-top: 14px;
  color: #e8d5be;
  font-size: 15px;
  line-height: 2;
}

/* スマホ・タブレット：上部バー(62px)ぶんの余白を確保 */
@media (max-width:1100px){
  .page-hero-wrapper{
    padding: 110px 20px calc(min(21%, 252px) + 30px);
  }
}


/* =========================================================
   【任意】背景画像を「1か所だけ」で全ページ共通にしたい場合
   下の3行のコメントを外してください。
   ※ 各ヒーローブロックの「画像」欄は効かなくなります
     （管理画面の画像ピッカーで運用したい場合は、外さないでください）
========================================================= */
/*
.page-hero-wrapper{
  background-image: url('/image/assets/ここに透過オーナメントのパス.webp') !important;
}
*/


/* =========================================================
   【任意】特定の1ページだけデザインを変えたい場合
   IDはクラスより優先されるので、そのページのヒーローブロックの
   CSS欄に「#sec_XXXXXXXXX」付きで書けば、この共通CSSより優先されます。
   例）NEWSページだけ背景色を変える
   #sec_1788750968844.page-hero-wrapper{ background-color:#332210; }
========================================================= */

/* =========================================================
   ③ フッター：Googleマップと基本情報を削除
   貼り付け先：FOOTERページ → global_footer ブロック
               → セクション個別CSS の末尾に追記

   構造：.global-footer
           ├ .footer-nav-wrap  … ナビ（残す）
           └ .info-grid        … ← ここを非表示にすると
               ├ .shop-info       住所・営業時間・決済方法（基本情報）
               └ .gmap-wrap       Googleマップ
             が両方まとめて消えます。
   コピーライト(.footer-copy-text)は .global-footer の外にあるため残ります。
========================================================= */

.global-footer .info-grid{
  display: none !important;
}

/* 情報が減ったぶん、ヘッダーと揃う軽さに余白を調整 */
.global-footer .footer-nav-wrap{
  padding-bottom: 8px !important;
}
/* =========================================================
   ▼ サイト共通CSS（下層ページ共通ヒーロー）
   貼り付け先：FOOTERページ → global_footer ブロック → セクション個別CSS
                （既存のフッターCSSの「一番下」に追記）

   ここに置く理由：
   custom.css は  header → index → 下層ページ(id順) → footer  の順に
   連結されるため、footer は必ず最後になります。
   = 今後どのページを追加しても、この共通CSSが上書きされません。
========================================================= */

/* ---- 下層ページ共通ヒーロー ---- */
.page-hero-wrapper{
  position: relative;
  min-height: 0;
  /* 下の余白＝オーナメントの高さ(幅の21%／上限252px)＋40px */
  padding: 96px 24px calc(min(21%, 252px) + 40px);
  text-align: center;
  color: var(--text-main);

  /* ヒーロー画像（クリーム地のバナー）に合わせた地色。
     画像読み込み前に暗い色がチラつかないよう、画像と同系のクリームにしています */
  background-color: #f6f0e3;

  /* 花のオーナメントは「拡大しない」
     原寸1200pxを上限にし、画面が狭いときだけ縮小する */
  background-repeat: no-repeat;
  background-position: center bottom 18px;
  background-size: min(100%, 1200px) auto;
}

/* 元の青緑オーバーレイを解除（ブラウンとオーナメントを活かす） */
.page-hero-wrapper::after,
.ph-overlay{
  content: "";
  position: absolute;
  inset: 0;
  background: none;
}

.ph-container{ position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }

/* 見出し：ロゴと同じ金色系。
   ロゴの実測値は #BB9630（色相44度）ですが、クリーム地だとコントラスト比2.46で
   読みづらいため、色相はそのままに濃度だけ上げた #8A6A15（同44度／比4.45）を使用。
   ロゴの色をそのまま使いたい場合は #BB9630 に変更してください（可読性は下がります）。*/
.ph-title{
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 900;
  color: #8a6a15;
  letter-spacing: .14em;
  line-height: 1.5;
}
.ph-desc{
  margin-top: 14px;
  /* 本文サイズなのでコントラスト比4.5以上が必要。#5A4526 は 7.99 */
  color: #5a4526;
  font-size: 15px;
  line-height: 2;
}

/* スマホ・タブレット：上部バー(62px)ぶんの余白を確保 */
@media (max-width:1100px){
  .page-hero-wrapper{
    padding: 110px 20px calc(min(21%, 252px) + 30px);
  }
}


/* =========================================================
   【任意】背景画像を「1か所だけ」で全ページ共通にしたい場合
   下の3行のコメントを外してください。
   ※ 各ヒーローブロックの「画像」欄は効かなくなります
     （管理画面の画像ピッカーで運用したい場合は、外さないでください）
========================================================= */
/*
.page-hero-wrapper{
  background-image: url('/image/assets/ここに透過オーナメントのパス.webp') !important;
}
*/


/* =========================================================
   【任意】特定の1ページだけデザインを変えたい場合
   IDはクラスより優先されるので、そのページのヒーローブロックの
   CSS欄に「#sec_XXXXXXXXX」付きで書けば、この共通CSSより優先されます。
   例）NEWSページだけ背景色を変える
   #sec_1788750968844.page-hero-wrapper{ background-color:#332210; }
========================================================= */
/* =========================================================
   ▼ サイト共通CSS（下層ページ共通ヒーロー）
   貼り付け先：FOOTERページ → global_footer ブロック → セクション個別CSS
                （既存のフッターCSSの「一番下」に追記）

   ここに置く理由：
   custom.css は  header → index → 下層ページ(id順) → footer  の順に
   連結されるため、footer は必ず最後になります。
   = 今後どのページを追加しても、この共通CSSが上書きされません。
========================================================= */

/* ---- 下層ページ共通ヒーロー ---- */
.page-hero-wrapper{
  position: relative;

  /* タイトルをバナーの中央に置く */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  /* ヒーローの高さ＝バナー画像の高さ。
     バナーは 2172x724（縦横比 1:3）なので「表示幅 ÷ 3」。
     表示幅は「画面幅 − サイドバー236px」で、上限1200px。 */
  min-height: calc(min(100vw - 236px, 1200px) / 3);
  text-align: center;
  color: var(--text-main);

  /* ヒーロー画像（クリーム地のバナー）に合わせた地色。
     画像読み込み前に暗い色がチラつかないよう、画像と同系のクリームにしています */
  background-color: #f6f0e3;

  /* 花のオーナメントは「拡大しない」
     原寸1200pxを上限にし、画面が狭いときだけ縮小する */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(100%, 1200px) auto;
}

/* 元の青緑オーバーレイを解除（ブラウンとオーナメントを活かす） */
.page-hero-wrapper::after,
.ph-overlay{
  content: "";
  position: absolute;
  inset: 0;
  background: none;
}

.ph-container{ position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }

/* 見出し：ロゴと同じ金色系。
   ロゴの実測値は #BB9630（色相44度）ですが、クリーム地だとコントラスト比2.46で
   読みづらいため、色相はそのままに濃度だけ上げた #8A6A15（同44度／比4.45）を使用。
   ロゴの色をそのまま使いたい場合は #BB9630 に変更してください（可読性は下がります）。*/
.ph-title{
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 900;
  color: #8a6a15;
  letter-spacing: .14em;
  line-height: 1.5;
}
.ph-desc{
  margin-top: 14px;
  /* 本文サイズなのでコントラスト比4.5以上が必要。#5A4526 は 7.99 */
  color: #5a4526;
  font-size: 15px;
  line-height: 2;
}

/* スマホ・タブレット：上部バー(62px)ぶんの余白を確保 */
@media (max-width:1100px){
  .page-hero-wrapper{
    padding: 24px 20px;
    /* スマホは上部固定ヘッダー(62px)がバナーに被るため、
       バナー高さ(画面幅÷3)に余白150pxを足して被りを避ける。
       実測でヘッダー下端から10pxの余裕が出ます。 */
    min-height: calc(min(100vw, 1200px) / 3 + 150px);
  }
}


/* =========================================================
   【任意】背景画像を「1か所だけ」で全ページ共通にしたい場合
   下の3行のコメントを外してください。
   ※ 各ヒーローブロックの「画像」欄は効かなくなります
     （管理画面の画像ピッカーで運用したい場合は、外さないでください）
========================================================= */
/*
.page-hero-wrapper{
  background-image: url('/image/assets/ここに透過オーナメントのパス.webp') !important;
}
*/


/* =========================================================
   【任意】特定の1ページだけデザインを変えたい場合
   IDはクラスより優先されるので、そのページのヒーローブロックの
   CSS欄に「#sec_XXXXXXXXX」付きで書けば、この共通CSSより優先されます。
   例）NEWSページだけ背景色を変える
   #sec_1788750968844.page-hero-wrapper{ background-color:#332210; }
========================================================= */
/* =========================================================
   ▼ フッター 会社名の明朝体を解除（ゴシックへ）
   貼り付け先：FOOTERページ → global_footer ブロック → セクション個別CSS
               （既存フッターCSSの「一番下」に追記）

   理由：assets/css/custom.css の
        .global-footer .footer-nav-brand h2 { font-family: var(--font-serif); }
        assets/css/style.css の
        .footer-brand h2 { font-family: var(--font-serif); }
        が明朝（Shippori Mincho）を指定しているため。
        custom.css は footer が最後に連結されるので、
        ここに追記すれば !important なしで上書きできます。
========================================================= */

/* ---- ① 会社名（フッターナビ下・店舗情報内の両方）をゴシックに ---- */
.global-footer .footer-nav-brand h2,
.global-footer .footer-brand h2 {
  font-family: var(--font-sans);   /* Noto Sans JP → OS標準ゴシック */
  font-weight: 600;
  letter-spacing: .12em;
}

/* ---- ② 文字サイズ 14px 未満の解消（任意） ---- */
.global-footer .footer-nav-link { font-size: 14px; }
.footer-copy-text { font-size: 14px; letter-spacing: .04em; }

/* ---- ③ スマートフォン ---- */
@media (max-width: 768px) {
  .global-footer .footer-nav-brand h2 {
    font-size: 20px;
    letter-spacing: .1em;
    white-space: nowrap;   /* 「株式会社」で改行させない */
  }
  .global-footer .footer-nav-link { font-size: 14px; }
  .footer-copy-text { font-size: 14px; }
}

/* Block: custom_html / sec_1788761029213 */
/* =========================================================
   ④ スマホ版フローティングバー（スクロール追従）
   FOOTERページに「カスタムHTML」ブロックを新規追加し、
     HTML欄 → 17_④SP固定バー_HTML.html
     CSS欄  → このファイル
   FOOTERページのブロックは全ページに出るので、これ1つで全ページに付きます。

   ※ 指示書の「SP画面下部固定（インスタボタン、アクセス）」に対応します。
   ※ ブロックIDを使っていないので、どのブロックに貼っても効きます。
========================================================= */

/* ★★ 最重要 ★★
   このバーを入れたカスタムHTMLブロックの外枠(.custom-html-wrapper)には
   スクロール表示アニメーション用の .fade-up が付いており、
     transform: translateY(24px);  opacity: 0;
   が掛かっています。
   ・transform がある祖先は position:fixed の基準になってしまうため、
     bottom:0 が「画面の下」ではなく「その要素の下」になります
   ・opacity:0 なので、表示領域に入るまでバー自体が透明で見えません
   この2つを打ち消さないと固定バーは機能しません。 */
.custom-html-wrapper:has(.fr-spbar){
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
  contain: none !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

/* PCでは出さない */
.fr-spbar{ display: none; }

@media (max-width: 1100px){

  .fr-spbar{
    display: flex !important;
    gap: 10px;
    position: fixed;              /* ← スクロールしても画面下に固定 */
    left: 0; right: 0; bottom: 0;
    z-index: 1500;                /* ヘッダー(1000)より上、メニュー(2000)より下 */
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));  /* iPhoneのホームバー対策 */
    background: linear-gradient(180deg, rgba(20,15,12,.86), rgba(20,15,12,.97));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,178,105,.18);
  }

  .fr-spbar-btn{
    flex: 1 1 0;                  /* 2つを均等割り。横に間延びしません */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;          /* 「アクセ／ス」のような改行を防止 */
  }
  .fr-spbar-btn i{ font-size: 16px; }

  .fr-spbar-ig{
    background: linear-gradient(100deg, #ff8a3d, #ffc46b);
    color: #2a1608;
    box-shadow: 0 8px 20px rgba(255,138,61,.26);
  }
  .fr-spbar-access{
    background: rgba(255,255,255,.06);
    color: #ffc978;
    border: 1px solid rgba(255,178,105,.40);
  }

  /* バーに隠れないよう、ページ下端に余白を確保 */
  body{ padding-bottom: 78px !important; }
}