:root{
    --container: min(1180px, 92vw);
    --accent: #4aa37a;
    --accent-2: #9ed0b8;
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --border: #e7e7e7;
    --grad1:#6095BA; --grad2:#6EBA9C; --grad3:#8FC17F;
  }
  :where(html, body){ overflow-x: clip; }
  @supports not (overflow: clip){
    :where(html, body){ overflow-x: hidden; }
  }

  .menu-panel.is-active.show,
  .menu-panel.show { opacity: 1; transform: translateY(0); }
  .menu-panel.is-active,
  .menu-panel { opacity: 0; transform: translateY(20px); transition: opacity .4s ease-out, transform .4s ease-out; }

  html,body{margin:0;padding:0}
  body.restaurant-page{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium",sans-serif;color:var(--ink);line-height:1.9;background:#fff}
  .fac-hero{ background:center/cover no-repeat var(--hero); }

  /* --------------- Hero --------------- */
  .fac-hero{position:relative;height:clamp(260px,48vw,480px);display:grid;place-items:center;color:#fff;text-align:center;overflow:hidden}
  .fac-hero::before{content:"";position:absolute;inset:0;background:var(--hero,#ccc) center/cover no-repeat;}
  .fac-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.15));}
  .fac-hero__inner{position:relative;z-index:1}
  .fac-hero__en{font-family:"Baskervville",serif;font-weight:500;letter-spacing:.04em;font-size:clamp(34px,5vw,56px);margin:0 0 .3em;}
  .fac-hero__ja{margin:0;font:normal 13px/1 "Hiragino Sans","Noto Sans JP",sans-serif;}

  /* --------------- Body --------------- */
  .l-container{ margin-inline:auto }
  .fac-lead-wrap{ text-align:center; }
  .fac-lead{ display:inline-block;text-align:left;margin:40px 0 24px;padding:0 2em;line-height:1.9; }
  .fac-hours{ display:inline-block;text-align:center;border-top:1px solid;border-bottom:1px solid;padding:1em 1em 0; }
  .fac-restaurant .l-container{ text-align:center; }
  .fac-hours__card span{ font-size:1.2em; }
  p.fac-hours__note{ font-size:.8em; }

  /* --------------- Mosaic --------------- */
  .fac-mosaic--scatter{position:relative;min-height:520px;margin-bottom:15em;}
  .fac-mosaic--scatter .m-item{position:absolute;margin:0}
  .fac-mosaic--scatter img{display:block;width:100%;height:auto;box-shadow:0 8px 24px rgba(0,0,0,.12)}
  .m-left{left:0%;top:60px;width:37%}
  .m-mid-a{left:40%;top:110px;width:16%;z-index:2}
  .m-mid-b{top:240px;width:22%;z-index:1;right:-1%}
  .m-right{right:24%;top:270px;width:24%;max-width:420px}

  /* --------------- Tabs --------------- */
  .sec{padding:0 10em;margin-bottom:10em;}
  nav.fac-tabs{display:flex;justify-content:space-between;font-size:.95em}
  .fac-tabs{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin:38px 0;padding-bottom:14px;z-index:0}
  .fac-tabs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(135deg,var(--grad1) 0%,var(--grad2) 50%,var(--grad3) 100%);z-index:1;pointer-events:none}

  .fac-tab{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;text-decoration:none;padding:.8em 0;border-bottom:0;background:#fff;color:var(--grad2);transition:background .25s ease,color .25s ease,border-color .25s ease;position:relative;z-index:2}
  .fac-tab .tab-en{font-size:1.6em;font-weight:500;font-family:"Baskervville",serif}
  .fac-tab .tab-ja{font-size:.8em;margin-top:.2em;opacity:.8}
  .fac-tabs::after{z-index:1}
  .fac-tab{z-index:2}
  .fac-tab:hover,.fac-tab.is-active,.fac-tab:focus-visible{background:linear-gradient(135deg,var(--grad1) 0%,var(--grad2) 50%,var(--grad3) 100%);border-color:var(--accent);color:#fff;}

  .menu-row-left01 > .menu-text-left01 h3,
  .menu-row-right02 > .menu-text-right02 h3,
  .menu-row-left03 > .menu-text-left03 h3,
  .menu-row-right04 > .menu-text-right04 h3,
  .menu-row-left05 > .menu-text-left05 h3,
  .menu-row-right06 > .menu-text-right06 h3,
  .menu-row-left07 > .menu-text-left07 h3,
  .menu-row-right08 > .menu-text-right08 h3{margin:0 0 8px;font-weight:500;letter-spacing:.02em}

  .menu-row-left01 > .menu-text-left01 .note,
  .menu-row-right02 > .menu-text-right02 .note,
  .menu-row-left03 > .menu-text-left03 .note,
  .menu-row-right04 > .menu-text-right04 .note,
  .menu-row-left05 > .menu-text-left05 .note,
  .menu-row-right06 > .menu-text-right06 .note,
  .menu-row-left07 > .menu-text-left07 .note,
  .menu-row-right08 > .menu-text-right08 .note{margin:0 0 8px;font-size:.8em}

  .menu-row-left01 > .menu-text-left01 .price,
  .menu-row-right02 > .menu-text-right02 .price,
  .menu-row-left03 > .menu-text-left03 .price,
  .menu-row-right04 > .menu-text-right04 .price,
  .menu-row-left05 > .menu-text-left05 .price,
  .menu-row-right06 > .menu-text-right06 .price,
  .menu-row-left07 > .menu-text-left07 .price,
  .menu-row-right08 > .menu-text-right08 .price{margin:4px 0 0;font-weight:500;letter-spacing:.02em}

  @media (max-width: 900px){
    .menu-row{grid-template-columns:1fr;align-items:start;}
    .menu-row > .menu-text{max-width:100%;}
  }

  @media (max-width: 786px){
    .fac-mosaic{grid-template-columns:1fr}
    .fac-mosaic__left img{aspect-ratio:16/10}
    .menu-row{grid-template-columns:1fr}
    .menu-row--rev .menu-text{order:2}
    .menu-row--rev figure{order:1}
    .thumb{width:100%}
  }

  .fac-mosaic,.fac-mosaic--scatter{position:relative !important;min-height:520px;margin-bottom:15em;}
  .menu-panel{display:none;opacity:0;}
  .menu-panel.is-active{display:block;}
  .fac-tabs .fac-tab.is-active{opacity:1;filter:none;}
  @media (max-width: 767.98px){
    .fac-mosaic--scatter{display:none;}
    .fac-mosaic--double{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:0;overflow:hidden;}
    .fac-mosaic,.fac-mosaic--scatter{min-height:0;margin:2em 0 2em;}
    .fac-mosaic.fac-mosaic--double .m-item{margin:0;}
    .fac-mosaic.fac-mosaic--double .m-item img{display:block;width:100% !important;height:10em;object-fit:cover;}
    .sec{padding:0;font-size:.6em;}
    .fac-guide{margin-bottom: 3em; font-size: 1.3em;}
    .fac-h2{margin:8px 0 45px;font-weight:500;line-height:1.2;background:linear-gradient(135deg,var(--grad1,#4aa37a) 0%,var(--grad2,#9ed0b8) 50%,var(--grad3,#4aa37a) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:"Baskervville",serif;font-size:25px;}
    .menu-panel.is-active{padding:0 3em;}
    .menu-text-left01,.menu-text-right02,.menu-text-left03,.menu-text-right04,.menu-text-left05,.menu-text-right06,.menu-text-left07,.menu-text-right08{text-align:left;font-size:1.2em;margin-top:1em;}
    .menu-text-right02,.menu-text-left03,.menu-text-right06,.menu-text-left07{align-self:flex-end;}
    .menu-row-right02,.menu-row-right06{display:flex;flex-direction:row-reverse;align-items:center;margin-bottom:30px;gap:1em;justify-content:flex-end;}
    .menu-row-right02 .thumb02 img,.menu-row-left03 .thumb02 img,.menu-row-right06 .thumb02 img,.menu-row-left07 .thumb02 img{width:18em;height:auto;object-fit:cover;}
    .menu-row-left03,.menu-row-left07{display:flex !important;align-items:center;margin-bottom:30px;gap:1em;}
    .menu-row-right04,.menu-row-right08{display:flex;flex-direction:column-reverse;gap:1em;}
    .menu-rows .thumb{aspect-ratio:4/3;overflow:hidden;}
    .menu-rows .thumb > img{width:100% !important;height:100% !important;object-fit:cover;display:block;}
    .menu-rows{display:flex;flex-direction:column;}
    .menu-row-left01{order:1;margin-bottom:30px;}
    .menu-row-right02{order:2;}
    .menu-row-right04{order:3;margin-bottom:30px;}
    .menu-row-left03{order:4;margin-bottom:30px;}
    .menu-row-left05{order:5;margin-bottom:30px;}
    .menu-row-right06{order:6;}
    .menu-row-left07{order:8;}
    .menu-row-right08{order:7;margin-bottom:30px;}
    .fac-lead,.fac-hours{font-size:.8em;}
  }
  @media (min-width:600px) and (max-width:767.98px){
    .menu-panel.is-active{padding:0 12em;}
    .menu-text-left01,.menu-text-right02{font-size:1.2em;}
    .fac-mosaic.fac-mosaic--double .m-item img{height:14em;}
  }
  @media (min-width:768px){
    .fac-h2{margin:8px 0 2px;font-weight:500;line-height:1.2;background:linear-gradient(135deg,var(--grad1,#4aa37a) 0%,var(--grad2,#9ed0b8) 50%,var(--grad3,#4aa37a) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:"Baskervville",serif;text-align:end;font-size:48px;margin-right:1em;transform:translateY(.6em);}
    .fac-caption{display:block;text-align:center;color:var(--muted,#6b6b6b);margin-bottom:10px;}
    .menu-row-left01,.menu-row-left03,.menu-row-left05,.menu-row-left07{display:flex;grid-template-columns:minmax(320px,42vw) 1fr;margin-top:-2em;align-items:end;gap:1em;}
    .menu-row-right02,.menu-row-right04,.menu-row-right06,.menu-row-right08{display:flex;grid-template-columns:minmax(320px,42vw) 1fr;align-items:end;gap:1em;justify-content:flex-end;}
    .menu-row-right02{transform:translateX(-4em);margin-top:-2em;}
    .menu-row-left03{transform:translateX(5em);}
    .menu-row-left05{transform:translateX(2em);}
    .menu-row-right06{transform:translateX(-4em);margin-top:-3em;}
    .menu-row-left01 > .thumb,
    .menu-row-right04 > .thumb,
    .menu-row-left05 > .thumb,
    .menu-row-right08 > .thumb{width:33%;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12);}
    .menu-row-left01 > .thumb img,
    .menu-row-right04 > .thumb img,
    .menu-row-left05 > .thumb img,
    .menu-row-right08 > .thumb img{width:100%;height:auto;object-fit:cover;}
    .menu-row-right02 > .thumb02,
    .menu-row-left03  > .thumb02,
    .menu-row-right06 > .thumb02,
    .menu-row-left07  > .thumb02{width:20%;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12);}
    .menu-row-right02 > .thumb02 img,
    .menu-row-left03  > .thumb02 img,
    .menu-row-right06 > .thumb02 img,
    .menu-row-left07  > .thumb02 img{width:100%;height:auto;object-fit:cover;}
    .menu-row-left01 > .menu-text-left01,
    .menu-row-left03 > .menu-text-left03,
    .menu-row-left05 > .menu-text-left05,
    .menu-row-left07 > .menu-text-left07{ text-align:left; max-width:560px; }
    .menu-row-right02 > .menu-text-right02,
    .menu-row-right04 > .menu-text-right04,
    .menu-row-right06 > .menu-text-right06,
    .menu-row-right08 > .menu-text-right08{ text-align:right; max-width:560px; }
  }
  @media (min-width:768px) and (max-width:1023.98px){
    .fac-mosaic,.fac-mosaic--scatter{margin-bottom:0;}
    .m-right{top:200px;}
    .m-mid-b{top:220px;}
    .sec{padding:0 4em;font-size:.72em;}
    .fac-lead{text-align:center;}
    .fac-mosaic.fac-mosaic--double{display:none;}
  }
  @media (min-width:1024px) and (max-width:1279.98px){
    .m-right{top:250px;}
    .sec{padding:0 6em;font-size:.9em;}
    .fac-mosaic{margin-bottom:5em;}
    .fac-mosaic.fac-mosaic--double{display:none;}
    .fac-mosaic,.fac-mosaic--scatter{min-height:400px;margin-bottom:15em;}
    .fac-lead{text-align:center;}
  }
  @media (min-width:1280px){
    .fac-mosaic,.fac-mosaic--scatter{margin-bottom:15em;}
    .fac-mosaic.fac-mosaic--double{display:none;}
    .fac-lead{text-align:center;}
  }
  @media (min-width:1700px){
    .fac-mosaic,.fac-mosaic--scatter{margin-bottom:25em;}
    .fac-mosaic.fac-mosaic--double{display:none;}
    .fac-lead{text-align:center;}
    .fac-restaurant{font-size:1.2em;}
  }

  .menu-panel.is-active.is-shown{opacity:1;transform:none;}

  @media (max-width: 767.98px){
    .menu-rows { display: flex; flex-direction: column; }
    .menu-rows > [class^="menu-row-"]{
      order: 0 !important;
      transform: none !important;
    }
  }
	
/* =========================
   1) タブの“妙な枠”を除去＋独自フォーカスリング
   （button化したため出る既定の枠を無効化）
========================= */
.fac-tab {
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;           /* 既存デザインに合わせて白 */
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.fac-tab::-moz-focus-inner { border: 0; }

/* フォーカスは見失わないよう独自リングを定義 */
.fac-tab:focus { outline: none; }
.fac-tab:focus-visible {
  outline: 2px solid rgba(110,186,156,.75); /* 緑系 */
  outline-offset: 3px;
  border-radius: 10px;
}

/* アクティブ状態の見た目は従来どおりグラデ背景 */
.fac-tab:hover,
.fac-tab.is-active {
  background: linear-gradient(135deg,var(--grad1) 0%,var(--grad2) 50%,var(--grad3) 100%);
  color: #fff;
}

/* 既定の「押し込み」風ボーダーが出る環境向けの保険 */
button.fac-tab { border: none; background-clip: padding-box; }

/* =========================
   2) パネルのフェード／スライド表示を確実に
========================= */
.menu-panel {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s cubic-bezier(.2,.7,.2,1),
              transform .45s cubic-bezier(.2,.7,.2,1);
}
.menu-panel.is-active.is-shown {
  opacity: 1;
  transform: none;
}

/* =========================
   3) メニュー画像のホバー拡大（元の“ズーム”復活）
   （PC・ポインタ精細環境のみ）
========================= */
@media (hover:hover) and (pointer:fine){
  .menu-rows .thumb img,
  .menu-rows .thumb02 img{
    transform: scale(1) translateZ(0);
    transition: transform .85s cubic-bezier(.20,.70,.20,1),
                filter .85s cubic-bezier(.20,.70,.20,1);
    will-change: transform, filter;
  }
  /* 行にホバーしたらその行の画像だけズーム */
  .menu-rows > [class^="menu-row-"]:hover .thumb img,
  .menu-rows > [class^="menu-row-"]:hover .thumb02 img{
    transform: scale(1.06);
    filter: brightness(1.03) contrast(1.02);
  }
}

/* =========================
   4) モザイク画像に軽い浮遊感（元の動きに近い雰囲気）
   ※ 過度に動かないようホバー時だけ
========================= */
@media (hover:hover) and (pointer:fine){
  .fac-mosaic--scatter .m-item{
    transition: transform .6s cubic-bezier(.20,.70,.20,1),
                filter .6s cubic-bezier(.20,.70,.20,1);
    will-change: transform, filter;
  }
  .fac-mosaic--scatter .m-item:hover{
    transform: translateY(-4px) scale(1.02);
    filter: brightness(1.04);
  }
}

/* =========================
   5) モバイルでの不要な枠・強調を抑制
========================= */
@media (max-width: 767.98px){
  .fac-tab { box-shadow: none; }
  .fac-tab:focus-visible { outline-width: 2px; outline-offset: 2px; }
}
/* ==== panel: フェードの基礎状態（非表示） ==== */
.menu-panel{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s cubic-bezier(.20,.70,.20,1),
              transform .45s cubic-bezier(.20,.70,.20,1);
}

/* hidden はそのまま非表示 */
.menu-panel[hidden]{ display:none; }

/* アクティブ＋表示フラグ時に見える（これがフェードの到達点） */
.menu-panel.is-active.is-shown{
  opacity: 1;
  transform: none;
}

/* （任意）好みで少しだけ速くしたい時
.menu-panel{ transition-duration: .36s; }
*/
@media (max-width: 767.98px){
  /* 8 → 8、9 → 9 の正順に直す */
  .menu-row-left07 { order: 7 !important; }
  .menu-row-right08{ order: 8 !important; }
}

.price-note { font-size: .75em; opacity: .8; margin-left: .4em; white-space: nowrap; }

@media (min-width: 768px){.price{font-size: 0.85em;}}

.bfst{
margin: 5% 0 12px;
display: grid;
grid-template-columns: minmax(280px, 1fr) 1.2fr;
align-items: stretch;
}
.bfst__left{
background: linear-gradient(90deg, #6EA0BF 0%, #7CC2A0 100%);
color: #fff;
padding: 9px 32px;
display: grid;
align-content: center;
border-radius: 2px;
}
.bfst__en{
font-size: clamp(22px, 2.2vw, 32px);
line-height: 1.2;
margin: 0 0 .3em;
font-weight: 500;
letter-spacing: .02em;
font-family: "Baskervville", serif;
}
.bfst__ja{
  opacity: .9;
  margin: 0;
  font-size: clamp(14px, 1.3vw, 18px);
}
.bfst__right{
background: #fff;
border: 2px solid #8FC9A6;
padding:22px 34px;
display: grid;
align-content: center;
}
.bfst__line{
  margin: .35em 0;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.8;
  white-space: nowrap;
}
.bfst__name{ font-weight: 600; }
.bfst__price small{ font-size: .9em; opacity: .8; }

@media (max-width: 768px){
.bfst{ grid-template-columns: 1fr; }
.bfst__right{ padding: 0px; }
}


@media (min-width: 768px) and (max-width:1024px){
.fac-h2 {
font-size: 25px;
}
}