/* 美名家（韓国家庭料理・新大久保）共通CSS：ヘッダー/フッター/ボタン/店舗情報/ライトボックス/アコーディオン
   ブレークポイント: SP=max 1023px / PC=min 1024px（cantik標準） */
:root{
  --ck-maroon:#5b0900;
  --ck-maroon-dark:#3a0500;
  --ck-red:#cf2020;
  --ck-cream:#fbf7f1;
  --ck-paper:#f4ece0;
  --ck-gold:#c9a24b;
  --ck-ink:#2a1208;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
body{
  font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;
  background:var(--ck-cream);
  color:var(--ck-ink);
  line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:opacity .25s}
a:hover{opacity:.7}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1,h2,h3,h4{font-family:'Shippori Mincho',serif;font-weight:700;color:var(--ck-maroon)}
.inner{width:min(1040px,92%);margin:0 auto}
.en{font-family:'Shippori Mincho',serif;font-size:12px;letter-spacing:.28em;color:var(--ck-gold);display:block;margin-bottom:10px}

/* ---------- header ---------- */
.site-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 24px;
  background:var(--ck-cream);
  position:sticky;top:0;z-index:300;
  box-shadow:0 2px 14px rgba(58,5,0,.12);
}
.site-head .brand{display:flex;align-items:center}
.site-head .brand .logo{height:52px;width:auto;border-radius:4px}
.gnav{display:flex;align-items:center;gap:26px}
.gnav a{font-family:'Shippori Mincho',serif;font-size:15px;font-weight:700;color:var(--ck-maroon);padding-bottom:4px;border-bottom:2px solid transparent;white-space:nowrap}
.gnav a.current,.gnav a[aria-current="page"]{color:var(--ck-red);border-color:var(--ck-red)}
.head-cta{display:flex;align-items:center;gap:14px}
.head-cta .tel{font-family:'Shippori Mincho',serif;font-size:20px;font-weight:700;color:var(--ck-maroon);line-height:1.2}
.head-cta .tel small{display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:10px;font-weight:500;color:#8a6a55;letter-spacing:.08em}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.menu-toggle span{width:24px;height:2px;background:var(--ck-maroon);display:block;transition:transform .3s ease,opacity .2s ease}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.gnav-close{display:none}
.gnav-overlay{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:15px 40px;font-family:'Shippori Mincho',serif;font-size:15px;font-weight:700;letter-spacing:.06em;border-radius:2px;border:1.5px solid var(--ck-red);background:var(--ck-red);color:#fff;box-shadow:0 6px 16px rgba(207,32,32,.25)}
.btn:hover{opacity:.88}
.btn-outline{background:transparent;color:var(--ck-maroon);border-color:var(--ck-maroon);box-shadow:none}
.btn-cream{background:var(--ck-cream);color:var(--ck-maroon);border-color:var(--ck-cream)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- title band（下層ページ共通の見出し帯） ---------- */
.title-band{
  position:relative;height:260px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(0deg,rgba(58,5,0,.72),rgba(58,5,0,.46)),var(--ck-maroon);
  background-size:cover;background-position:center;color:#fff;
}
.title-band .en{color:var(--ck-gold)}
.title-band h1{font-size:34px;color:#fff;letter-spacing:.1em;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.breadcrumb{font-size:12px;margin-top:14px;color:#f0d9c8}
.breadcrumb a{text-decoration:underline}

/* ---------- section utility ---------- */
section{padding:76px 0}
.sec-head{text-align:center;margin-bottom:44px}
.sec-head h2{font-size:30px}
.lead{max-width:680px;margin:0 auto;text-align:center;color:#5a4638;font-size:15px}

/* ---------- shop info table ---------- */
dl.shop-info{width:min(760px,94%);margin:0 auto;font-size:14.5px}
dl.shop-info dt{float:left;clear:left;width:26%;font-weight:700;padding:14px 0;color:var(--ck-maroon);font-family:'Shippori Mincho',serif}
dl.shop-info dd{padding:14px 0 14px 28%;border-bottom:1px solid rgba(91,9,0,.12)}
dl.shop-info a{text-decoration:underline;color:var(--ck-maroon)}
.map iframe{display:block;width:100%;border:0;filter:saturate(.85)}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(91,9,0,.14)}
.faq-q{display:flex;gap:14px;align-items:flex-start;padding:22px 6px;cursor:pointer;font-family:'Shippori Mincho',serif;font-weight:700;font-size:16px;color:var(--ck-maroon);list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q .mark{flex:0 0 auto;color:var(--ck-red);font-size:18px}
.faq-a{padding:0 6px 22px 34px;font-size:14.5px;color:#5a4638}

/* ---------- reviews ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review-card{background:#fff;border:1px solid rgba(91,9,0,.1);border-radius:6px;padding:22px;box-shadow:0 10px 26px rgba(58,5,0,.06)}
.review-card .stars{color:var(--ck-gold);font-size:14px;letter-spacing:2px}
.review-card .date{font-size:12px;color:#9c8672;margin-left:8px}
.review-card p{font-size:13.5px;color:#4a382c;margin-top:12px;line-height:1.85}
.review-card .rv-top{display:flex;align-items:center;gap:11px}
.review-card .rv-ava{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;font-family:'Noto Sans JP',sans-serif}
.review-card .rv-meta{display:flex;flex-direction:column;gap:3px}
.review-card .rv-name{font-weight:700;font-size:13.5px;color:#3a2a1e;line-height:1.2}
.review-card .rv-meta .stars{display:block;line-height:1}

/* ---------- footer ---------- */
footer{background:var(--ck-maroon-dark) url(img/pattern-maroon.png) center/480px repeat;padding:60px 0 0;margin-top:0;color:#f4e6d8}
footer a{color:#f4e6d8}
footer .finner{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;padding-bottom:32px}
footer .fbrand{flex:1 1 280px}
footer .flogo{height:64px;width:auto;margin-bottom:16px;border-radius:4px}
footer .fbrand p{font-size:13px;margin-bottom:14px;color:#e4cdb9}
footer .ftel{font-family:'Shippori Mincho',serif;font-size:22px;font-weight:700;color:var(--ck-gold)}
footer .fnav{flex:0 0 170px;display:flex;flex-direction:column;gap:10px;font-size:14px}
footer .fshop{flex:1 1 300px;font-size:13px;color:#e4cdb9}
footer .fshop dt{width:76px;float:left;clear:left;font-weight:700;padding:6px 0;color:var(--ck-gold)}
footer .fshop dd{padding:6px 0 6px 86px;border:0}
footer .copy{text-align:center;font-size:11.5px;padding:18px 0;background:rgba(0,0,0,.22);color:#d8bda6}
footer .copy a{text-decoration:underline}

/* ---------- lightbox ---------- */
.lb-overlay{position:fixed;inset:0;background:rgba(20,4,0,.92);display:none;align-items:center;justify-content:center;z-index:999;padding:24px}
.lb-overlay.open{display:flex}
.lb-overlay img{max-width:92vw;max-height:88vh;box-shadow:0 10px 40px rgba(0,0,0,.6);border-radius:2px}
.lb-close{position:absolute;top:20px;right:28px;font-size:34px;color:#fff;background:none;border:0;cursor:pointer;line-height:1}

/* ---------- SP（共通ブレークポイント：max 1023 / min 1024） ---------- */
@media (max-width:1023px){
  .site-head{padding:8px 16px}
  .site-head .brand .logo{height:40px}
  .menu-toggle{display:flex}
  .gnav{
    position:fixed;top:0;right:0;height:100vh;width:78%;max-width:300px;
    background:var(--ck-cream);flex-direction:column;align-items:flex-start;gap:0;
    padding:88px 28px;transform:translateX(100%);transition:transform .3s ease;z-index:250;
    box-shadow:-6px 0 24px rgba(0,0,0,.18);
  }
  .gnav.open{transform:translateX(0)}
  .gnav a{width:100%;padding:15px 0;border-bottom:1px solid rgba(91,9,0,.12)}
  .gnav-close{
    display:flex;align-items:center;justify-content:center;position:absolute;top:18px;right:20px;
    width:34px;height:34px;border:1px solid rgba(91,9,0,.28);border-radius:50%;
    background:none;color:var(--ck-maroon);font-size:20px;line-height:1;cursor:pointer;
  }
  .gnav-close:hover{background:rgba(91,9,0,.08)}
  .gnav-overlay{
    display:block;position:fixed;inset:0;background:rgba(42,18,8,.45);z-index:240;
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .gnav-overlay.open{opacity:1;pointer-events:auto}
  .head-cta{gap:0}
  .head-cta .tel{display:none}

  .title-band{height:170px}
  .title-band h1{font-size:24px}

  section{padding:52px 0}
  .sec-head h2{font-size:24px}

  dl.shop-info dt{float:none;width:auto;padding:10px 0 2px}
  dl.shop-info dd{padding:0 0 12px}

  .review-grid{grid-template-columns:1fr}

  footer{background-size:320px}
  footer .finner{flex-direction:column;gap:26px}
  footer .fshop dt{float:none;width:auto;padding:8px 0 0}
  footer .fshop dd{padding:0 0 6px}
}

/* 2026-07-27 コラム/お知らせ一覧の潰れ・幅を修正 */
.col-grid{display:block !important}                 /* 旧3列gridが col-cards--3 を1セルに潰すのを解除 */
.col-cards--3{max-width:1080px;margin-left:auto;margin-right:auto;width:100%}
.list-main{max-width:1080px !important}             /* お知らせ一覧はワイド枠に */
main.col-detail-main:has(> .col-cards--3){max-width:1080px}
@media(max-width:900px){.col-cards--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.col-cards--3{grid-template-columns:1fr;max-width:420px}}

/* 2026-07-27 詳細/お知らせヘッダーを画像phero＋白文字に統一 */
.title-band.page-hero{min-height:210px;display:flex;align-items:center;justify-content:center;text-align:center;
  background-size:cover !important;background-position:center !important;background-repeat:no-repeat;margin:0 0 44px;padding:44px 20px}
.title-band.page-hero .en{display:block;color:#e6cdad !important;letter-spacing:.3em;font-size:12px;margin-bottom:12px}
.title-band.page-hero h1{color:#fff !important;font-size:27px;line-height:1.4;margin:0}
.title-band.page-hero .breadcrumb{margin-top:14px;font-size:12px;color:#f2e6d8 !important}
.title-band.page-hero .breadcrumb a{color:#f2e6d8 !important}
.col-detail-main{padding-top:0 !important}

/* 2026-07-27 追従ヘッダー＋予約ボタン＋右下フロートCTA */
/* ヘッダー追従(2026-07-29): html/bodyのoverflow-x:hiddenでstickyが無効化されるため、PC/SP共にfixedで確実に追従＋body上余白で本文の隠れを防ぐ */
.site-head{position:fixed !important;top:0;left:0;right:0;width:100%;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(6px)}
body{padding-top:72px}
@media(max-width:767px){
  body{padding-top:61px}
}
.head-cta .btn-reserve{display:inline-flex;align-items:center;justify-content:center;background:#6b1100;color:#fff;
  padding:10px 20px;border-radius:4px;font-weight:700;font-size:13px;letter-spacing:.06em;margin-left:12px;white-space:nowrap;transition:background .25s}
.head-cta .btn-reserve:hover{background:#8a1a06}
/* 右下フロート */
.float-cta{position:fixed;right:16px;bottom:16px;z-index:940;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.float-cta .fc-reserve{background:#6b1100;color:#fff;padding:13px 20px;border-radius:30px;font-weight:700;font-size:13px;letter-spacing:.05em;box-shadow:0 6px 18px rgba(107,17,0,.35);white-space:nowrap}
.float-cta .fc-reserve:hover{background:#8a1a06}
.float-cta .fc-tel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:56px;height:56px;border-radius:50%;
  background:#b28330;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28);font-size:10px;letter-spacing:.04em}
.float-cta .fc-tel svg{width:20px;height:20px}
@media(max-width:600px){.float-cta{right:12px;bottom:12px}.float-cta .fc-reserve{padding:11px 16px;font-size:12px}}

.btn-reserve-fill{background:#6b1100 !important;color:#fff !important;border-color:#6b1100 !important}
.btn-reserve-fill:hover{background:#8a1a06 !important}

/* ============================================================
   2026-07-28 SP下部固定バー（担当エンジニア・header.php/footer.phpと共通のため全ページ共通CSS）
   ============================================================ */
.sp-bottombar{
  display:none;
  align-items:stretch;justify-content:stretch;
  font-family:'Shippori Mincho',serif;font-weight:700;letter-spacing:.03em;
}
.sp-bottombar a{flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px}
.sp-bottombar .sbb-tel{background:#3a0500;color:#fff}
.sp-bottombar .sbb-reserve{background:var(--ck-red);color:#fff}
.sp-bottombar .ic{font-size:16px;line-height:1}

@media (max-width:767px){
  /* SPでは右下フローティング2個を下部固定バーに統合するため非表示 */
  .float-cta{display:none}
  .sp-bottombar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:950;
    height:56px;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -4px 16px rgba(58,5,0,.18);
  }
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}

  /* タップ領域44px確保 */
  .site-head .brand .logo{height:44px}
  .menu-toggle{padding:14px 10px}
  .gnav-close{width:44px;height:44px}
  footer .ftel{display:inline-block;padding:6px 0}
  footer .copy a{display:inline-block;padding:14px 8px;margin:-14px -8px}

  /* ページ圧縮: フッターを詰める（7リンク縦積み→3列グリッド、営業時間/定休日はインライン化。タップ44pxは維持） */
  footer{padding:32px 0 0}
  footer .finner{gap:14px}
  /* fbrand/fnavも(fshopと同じ理由で) flex-basisが縦積み時に高さを固定してしまうため解除 */
  footer .fbrand{flex:0 0 auto}
  footer .fbrand .flogo{height:44px;margin-bottom:8px}
  footer .fbrand p{margin-bottom:8px}
  footer .ftel{padding:4px 0}
  footer .fnav{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px;width:100%}
  footer .fnav a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:2px;font-size:13px}
  /* footer .fshop の flex:1 1 300px はデスクトップ横並び用のflex-basis(幅)だが、
     .finnerがflex-direction:columnになるSPではflex-basisが高さに作用し300px固定化してしまうため解除 */
  footer .fshop{flex:0 0 auto;font-size:12px;width:100%;max-width:none}
  footer .fshop dt{float:none;width:auto;padding:4px 0 0;line-height:1.3}
  footer .fshop dd{padding:0 0 4px;line-height:1.3;border:0}
  footer .copy{padding:10px 0}
}

/* ============================================================
   2026-08-19 多言語レイアウト対策
   .title-band は height 固定（PC260px / SP170px, 実効210px）。
   英語など日本語より行数が増える言語で h1 が帯からはみ出す。
   実測：SP390 col-c13 英語で 26px はみ出し（日本語は30px余裕）。
   → 非日本語のときだけ高さを内容に追随させる。日本語の見た目は不変。
   ============================================================ */
html:not([lang="ja"]) .title-band{
  height:auto!important;
  min-height:210px;
  padding-top:28px;
  padding-bottom:28px;
}
@media (min-width:1024px){
  html:not([lang="ja"]) .title-band{ min-height:260px; }
}