:root{
--accent:#ef4444;
--ink:#0e1320;
--line:#e5e7eb;
--bg:#fff;
}
body{font-family:"Noto Sans JP",sans-serif; margin:0; color:var(--ink)}
img{max-width:100%; display:block}
.zf-container{max-width:1100px; margin:auto; padding:0 20px}
.zf-section{padding:60px 0}
.zf-title{font-size:28px; margin:0 0 20px}
.zf-grid{display:grid; gap:20px}
.zf-grid--3{grid-template-columns:repeat(3,1fr)}
.zf-grid--4{grid-template-columns:repeat(4,1fr)}
.zf-btn{padding:12px 20px; background:var(--accent); color:#fff; text-decoration:none; border-radius:8px}
.zf-btn--ghost{background:#fff; color:var(--accent); border:1px solid var(--accent)}
.zf-btn--line{background:#06c755}
.zf-header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0}
.zf-header-inner{display:flex; justify-content:space-between; align-items:center; height:60px}
.zf-nav-list{display:flex; gap:20px; list-style:none; margin:0; padding:0}
.zf-nav-toggle{display:none}
@media(max-width:768px){.zf-grid--3,.zf-grid--4{grid-template-columns:1fr}.zf-nav-toggle{display:block}.zf-nav-list{display:none; flex-direction:column}.zf-nav-list.is-open{display:flex}}
.zf-hero{position:relative; min-height:60vh; color:#fff; display:flex; align-items:center; justify-content:center; text-align:center}
.zf-hero-bg{position:absolute; inset:0; background:url('../img/hero.jpg') center/cover no-repeat; z-index:-1}
.zf-footer{padding:20px; text-align:center; border-top:1px solid var(--line)}
/* ===== Brand Variant ===== */
.zf-logo .zf-variant{
  margin-left:.35rem;
  font-size:.8rem;
  letter-spacing:.08em;
  opacity:.7;
}

/* ===== Lead text (Concept) ===== */
.zf-lead{
  max-width: 56rem;
  margin: .5rem auto 2rem;
  line-height: 1.9;
  text-align: center;
  color: var(--zf-text-dim,#555);
}

/* ===== Card with text ===== */
.zf-card--text{
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  background: #fff;
}
.zf-card--text img{ display:block; width:100%; height:auto; }
.zf-card--text figcaption{ padding:1rem 1.1rem 1.2rem; }
.zf-card--text h3{
  font-size:1.1rem; margin:.2rem 0 .4rem; letter-spacing:.02em;
}
.zf-card--text p{ color:#666; font-size:.95rem; line-height:1.8; }

/* ===== Menu grid & captions ===== */
.zf-menu-grid .zf-menu-card figure{
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.zf-menu-grid .zf-menu-card img{ width:100%; height:auto; display:block; }
.zf-menu-grid .zf-menu-card figcaption{ padding:.8rem 1rem 1rem; }
.zf-menu-grid .zf-menu-card h3{ font-size:1.05rem; margin:0 0 .2rem; }
.zf-menu-grid .zf-menu-card .zf-menu-sub{ color:#666; font-size:.92rem; }
.zf-menu-grid .zf-menu-card:hover figure{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* 4カラム→レスポンシブ */
@media (max-width: 1200px){
  .zf-grid--4{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px){
  .zf-grid--4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .zf-grid--4{ grid-template-columns: 1fr; }
}

/* ===== Access（大きく・わかりやすく） ===== */
.zf-grid--access{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items: start;
}
.zf-map{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  background:#f5f5f5;
}
.zf-map iframe{ width:100%; height:100%; border:0; display:block; }

.zf-access-info{ display:grid; gap:1.2rem; }
.zf-dl{ list-style:none; margin:0; padding:0; }
.zf-dl li{ padding:.55rem 0; border-bottom:1px dotted rgba(0,0,0,.12); }
.zf-dl li span{ display:inline-block; min-width:5.5em; color:#444; font-weight:600; }
.zf-access-photo{
  margin: .5rem 0 0; border-radius:14px; overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
.zf-access-photo img{ width:100%; height:auto; display:block; }

@media (max-width: 980px){
  .zf-grid--access{ grid-template-columns: 1fr; }
  .zf-map{ aspect-ratio: 4 / 3; }
}

/* リンク（予約への誘導を少し強調） */
.zf-link{ color: var(--zf-accent,#e94); text-decoration: underline; }
/* === Chic: 追加スタイル === */

/* リード文とテキストカード */
.zf-lead{max-width:820px;margin:0 auto 2rem;line-height:1.9;color:#444;text-align:center;}
.zf-card--text img{width:100%;height:280px;object-fit:cover;border-radius:12px 12px 0 0;}
.zf-card--text figcaption{background:#fff;border:1px solid #eee;border-top:none;border-radius:0 0 12px 12px;padding:16px}
.zf-card--text h3{font-size:1.05rem;margin:0 0 .25rem}

/* Menu */
.zf-menu-grid .zf-menu-card figure{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden;transition:.2s transform}
.zf-menu-grid .zf-menu-card img{width:100%;height:180px;object-fit:cover;display:block}
.zf-menu-grid .zf-menu-card:hover{transform:translateY(-3px)}
.zf-menu-sub{color:#666;font-size:.9rem;margin:.25rem 0 0}

/* Chef */
.zf-chef-grid .zf-card--person img{width:100%;height:360px;object-fit:cover;border-radius:12px}
.zf-card--person figcaption{padding:.75rem 0}

/* News */
.zf-news{display:grid;gap:20px}
.zf-news-item{display:grid;grid-template-columns:180px 1fr;gap:16px;background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.zf-news-item img{width:100%;height:140px;object-fit:cover}
.zf-news-body{padding:12px}
.zf-news-body time{color:#888;font-size:.9rem}

/* Gallery */
.zf-gallery-grid .zf-thumb{border-radius:12px;overflow:hidden;border:1px solid #eee}
.zf-gallery-grid .zf-thumb img{width:100%;height:180px;object-fit:cover;display:block}

/* Access（画像を大きく・2カラム） */
.zf-grid--access{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start}
.zf-map iframe{width:100%;height:420px;border:0;border-radius:12px}
.zf-dl{list-style:none;margin:0 0 16px;padding:0}
.zf-dl li{margin:.35rem 0}
.zf-dl span{display:inline-block;min-width:4.5em;color:#666}
.zf-access-photo img{width:100%;height:420px;object-fit:cover;border-radius:12px}

/* Reserve */
.zf-reserve{background:#faf8f6}
.zf-reserve-inner{text-align:center}

/* Responsive */
@media (max-width: 1024px){
  .zf-chef-grid .zf-card--person img{height:300px}
  .zf-gallery-grid .zf-thumb img{height:160px}
}
@media (max-width: 768px){
  .zf-news-item{grid-template-columns:1fr}
  .zf-news-item img{height:200px}
  .zf-grid--access{grid-template-columns:1fr;gap:20px}
  .zf-access-photo img,.zf-map iframe{height:300px}
}
/* =========================
   1) Hero（見出しが見えにくい問題）
   ========================= */
.zf-hero { 
  position: relative;
  overflow: hidden;
}

/* 背景を壊さない薄いグラデーションの被せ */
.zf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 上は薄く、中央～下を少しだけ暗くして文字を浮かせる */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.25) 40%,
    rgba(0,0,0,.35) 70%,
    rgba(0,0,0,.20) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* 文字を前面に */
.zf-hero-inner { 
  position: relative; 
  z-index: 1; 
}

/* 見出し・サブの可読性を上げる */
.zf-hero-title {
  color: #fff;
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
}

.zf-hero-sub {
  color: #fff;
  /* 背景は主張し過ぎない半透明。対応ブラウザでは軽いブラーを付与 */
  background: rgba(0,0,0,.28);
  padding: .6rem .9rem;
  border-radius: .75rem;
  display: inline-block;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
@supports (backdrop-filter: blur(4px)) {
  .zf-hero-sub {
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(4px);
  }
}

/* モバイルはやや強めに（背景が狭くなるため） */
@media (max-width: 720px) {
  .zf-hero::before {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.15) 0%,
      rgba(0,0,0,.35) 45%,
      rgba(0,0,0,.40) 75%,
      rgba(0,0,0,.25) 100%
    );
  }
}

/* ボタンの視認性も少しだけ底上げ（背景に負けるケースをケア） */
.zf-hero .zf-btn { 
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* =========================
   2) Chef（PC で頭が切れる問題）
   ========================= */

/* 画像タグで表示している想定。デスクトップは“全体が入る”寄りに */
#chef img,
.zf-chef img,
.zf-chef-photo {
  width: 100%;
  height: auto;            /* 固定高さでのトリミングを防止 */
  object-fit: contain;     /* なるべく全体を見せる */
  object-position: center; /* 中央寄せ */
  display: block;
}

/* セクション内の余白を確保（はみ出しの見え方を緩和） */
#chef .zf-container { 
  overflow: visible; 
}

/* もし“高さを固定するカード”で使っている場合の保険 */
@media (min-width: 1024px) {
  .zf-chef-photo,
  #chef img {
    max-height: 68vh;      /* 画面高の約2/3までに抑えて切れを回避 */
  }
}

/* 写真をカバーで使いたい要素が別にある場合は、こちらを代わりに有効化
   （どちらか一方でOK。いまは contain を優先）
   #chef img { object-fit: cover; object-position: 50% 15%; }
*/