@charset "UTF-8";
/* ============================================================================
   d.css — 案D：創作・洗練系
   方向性の参考：おっこん ※デザインは複製せず、方向性のみ

   白地に黒。色を使わず、細い線と余白だけで構成する。
   見出しは連番。料理は1品ずつ大きく、左右交互に配置して主役にする。

   予約ボタンだけは塗りにする。色を使わない中で優先度を出す手段が
   「塗り／線」の対比しか無く、線ボタンだけだと主副の区別が消えるため。
   ============================================================================ */

:root {
  /* 案Cと「明るい地色＋明朝＋細罫」で被っていたため、深緑を地の色にした。
     案H（クリーム地に深緑ヘッダー）とも別物になるよう、全面を緑で塗る。 */
  --ink:   #f2f0e9;   /* 地が濃いので文字は淡色 */
  --sub:   #a9b8ac;
  --bg:    #24382d;   /* 深緑 */
  --bg2:   #1c2c23;   /* 一段沈めた面 */
  --line:  #3d5546;
  --accent:#d9c07a;   /* 淡い金。見出しの連番に使う */

  --mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;

  /* common.css の固定CTAへ流し込む配色。
     ヘッダーの予約ボタンは線ボタン。下部バーは黒地なので白地×黒文字に反転させる。 */
  --cta-bg: var(--accent);
  --cta-fg: #24382d;
  --cta-radius: 0;
  --cta-weight: 500;
  --cta-border: 0 solid transparent;
  --bar-bg: #16241c;
  --bar-fg: #f2f0e9;
  --barcta-bg: var(--accent);
  --barcta-fg: #24382d;
}

body {
  font-family: var(--gothic);
  font-size: 17px;
  line-height: 2.1;
  color: var(--ink);
  background: var(--bg);
}

.wrap   { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 22px; }
.narrow { width: 100%; max-width: 700px;  margin-inline: auto; padding-inline: 22px; }

.sec { padding-top: 32px; padding-bottom: 88px; }
@media (min-width: 768px) { .sec { padding-top: 60px; padding-bottom: 144px; } }

/* ---- 見出し：連番を大きく取って強弱をつける ----
   色を使わないテイストなので、メリハリは「文字サイズの落差」でしかつくれない。
   連番を見出し本体より大きくして、視線の起点にする。 */
.ttl {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 56px;
  font-family: var(--gothic);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  letter-spacing: .04em;
}
.ttl i {
  font-family: var(--gothic);
  font-style: normal;
  font-size: 1.3em;               /* 見出し本体より大きい */
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  color: var(--accent);
}
.ttl span { position: relative; }
/* 見出しの下に黒い太罫。細線だけだと締まらない */
.ttl span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -14px;
  height: 2px;
  background: var(--accent);
}

/* ---- ヘッダー ---- */
.hdr {
  gap: 20px;
  padding-inline: 20px;
  background: rgba(28, 44, 35, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(6px);
}
.hdr__brand {
  font-family: var(--gothic);
  font-size: 1.05rem; font-weight: 700; letter-spacing: .06em;
  text-decoration: none; white-space: nowrap;
  margin-right: auto;
}
@media (min-width: 768px) {
  .hdr { padding-inline: 40px; }
  .hdr__brand { font-size: 1.15rem; letter-spacing: .2em; }
}

/* ---- ① ファーストビュー：全画面写真＋店名のみ ---- */
.hero {
  position: relative;
  min-height: 48svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.56));
}
.hero__name {
  position: relative; z-index: 1;
  padding: 40px 24px;
  font-family: var(--gothic);
  font-weight: 700;
  font-size: clamp(2.5rem, 10vw, 3.6rem);
  letter-spacing: .06em;
  text-indent: .06em;
  line-height: 1.5;
  text-shadow: 0 2px 28px rgba(0,0,0,.6);
}
/* 枠線を文字幅に沿わせるため inline-block にしたいが、そのままだと
   店名が短いときに同じ行へ流れて横に並んでしまう。
   block + fit-content で「必ず改行される inline-block」にする。 */
.hero__name span {
  display: block;
  width: fit-content;
  font-family: var(--gothic);
  font-size: .32em;
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  margin: 1.8em auto 0;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,.6);
}
@media (min-width: 768px) { .hero { min-height: 94svh; } }

/* ---- ② お店について ---- */
.prose { text-align: center; font-size: 0.99rem; }
.prose p + p { margin-top: 1.8em; }

/* ---- ③ おすすめ：1品ずつ大きく、左右交互 ---- */
.alts { display: grid; gap: 56px; }
.alt__pic { margin: 0; line-height: 0; }
.alt__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.alt__txt { padding: 20px 22px 0; }
.alt__txt h3 {
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 1.1rem; font-weight: 400; letter-spacing: .12em;
}
.alt__p { margin-top: 6px; font-size: 0.91rem; letter-spacing: .06em; }
.alt__d { margin-top: 8px; font-size: 0.87rem; color: var(--sub); line-height: 1.95; }

@media (min-width: 768px) {
  .alts { gap: 0; }
  .alt {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    max-width: 1140px;
    margin-inline: auto;
    padding-block: 56px;
  }
  /* 偶数番目は写真とテキストを入れ替える */
  .alt:nth-child(even) .alt__pic { grid-column: 2; grid-row: 1; }
  .alt:nth-child(even) .alt__txt { grid-column: 1; grid-row: 1; }
  .alt__pic img { aspect-ratio: 3 / 2; }
  .alt__txt { padding: 0 48px; }
  .alt__txt h3 { font-size: 1.35rem; }
}

/* ---- ④ ご宴会：枠なし、罫線のみの3列 ---- */
.cols { display: grid; gap: 0; border-top: 1px solid var(--line); }
.col { padding: 28px 0; border-bottom: 1px solid var(--line); }
.col__n {
  font-family: var(--gothic);
  font-size: 1.02rem; font-weight: 700; letter-spacing: .04em;
}
.col__p {
  font-family: var(--gothic);
  font-weight: 700;
  color: var(--accent);
  font-size: 1.6rem; line-height: 1.5; margin-top: 4px;
}
.col__p small { font-size: .36em; letter-spacing: .1em; color: var(--sub); }
.col__d { font-size: 0.87rem; color: var(--sub); margin-top: 6px; }

@media (min-width: 768px) {
  .cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }
  .col { border-bottom: 0; padding: 40px 28px; }
  .col + .col { border-left: 1px solid var(--line); }
}

/* ---- ⑤ ご予約 ---- */
.reserve__lead { text-align: center; font-size: 0.97rem; margin-bottom: 36px; }
.reserve__btns { display: grid; gap: 14px; max-width: 460px; margin: 0 auto 48px; }
.rbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 68px; text-decoration: none; font-weight: 500;
  letter-spacing: .1em; line-height: 1.3; transition: background .2s, color .2s;
}
.rbtn small { font-size: .64rem; font-weight: 400; letter-spacing: .1em; opacity: .8; margin-top: 3px; }
/* 主ボタンは塗り。隣の線ボタンと同じ見た目にすると主副が伝わらない */
.rbtn--net { background: var(--accent); color: #24382d; border: 1px solid var(--accent); }
.rbtn--net:hover { background: transparent; color: var(--accent); }
.rbtn--tel { border: 1px solid var(--ink); color: var(--ink); }
.rbtn--tel:hover { background: var(--ink); color: #24382d; }
@media (min-width: 600px) { .reserve__btns { grid-template-columns: 1fr 1fr; } }

/* ヘッダーの線ボタンはホバーで反転（枠線だけだと押せることが伝わりにくい） */
.hdr__reserve:hover { opacity: .85; }

/* ---- ⑥ 店舗情報：2カラム ---- */
.dl { display: grid; gap: 0; border-top: 1px solid var(--line); }
.dl > div {
  display: grid; grid-template-columns: 7em 1fr;
  padding: 16px 2px; border-bottom: 1px solid var(--line);
  font-size: 0.93rem;
}
.dl dt { color: var(--sub); letter-spacing: .1em; white-space: nowrap; }
.dl dd a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .dl { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}

/* ============================================================================
   黒の反転セクション：ご宴会とご予約

   白と黒しか使わないテイストなので、全ページ白地のままだと
   最後まで同じ調子が続いて印象に残らない。ページ後半の2セクションを
   黒地に反転させて、そこが山場だと分かるようにする。
   ============================================================================ */
/* 以前この案が白地だった名残で、反転用に background:var(--ink) を使っていた。
   深緑基調に変えた際 --ink が淡色になり、淡い地に白文字＝読めない状態になっていた。
   いまはページ全体が濃緑なので、一段沈めた面（--bg2）で変化をつける。 */
/* 01〜05 を緑と深緑で交互に塗る。
   以前は 03 と 04 が隣り合って両方とも深緑になっており、
   交互ではなく「色が変わる場所と変わらない場所がある」状態だった。 */
#about   { background: var(--bg);  }   /* 01 */
#menu    { background: var(--bg2); }   /* 02 */
#party   { background: var(--bg);  }   /* 03 */
#reserve { background: var(--bg2); }   /* 04 */
#info    { background: var(--bg);  }   /* 05 */

/* 罫線を白に */
#party .cols, #party .col + .col { border-color: rgba(255,255,255,.24); }
#party .cols { border-top-color: rgba(255,255,255,.24); border-bottom-color: rgba(255,255,255,.24); }
#party .col  { border-bottom-color: rgba(255,255,255,.24); }
#party .col__d { color: rgba(255,255,255,.62); }
#party .col__p small { color: rgba(255,255,255,.62); }

/* 予約ボタン：黒地の上では主ボタンを白ベタに反転させる */
#reserve .rbtn--net {
  background: #fff; color: var(--ink); border-color: #fff;
}
#reserve .rbtn--net:hover { background: transparent; color: #fff; }
#reserve .rbtn--tel { border-color: #fff; color: #fff; }
#reserve .rbtn--tel:hover { background: #fff; color: var(--ink); }

/* ---- ⑦ 地図 ----
   このテイストは色を使わない方針だが、地図だけは例外にする。
   グレースケールにすると道路・線路・目印の色分けが消えて、
   店の場所を探すという地図本来の役目を果たせなくなるため。 */
.map { margin-top: 80px; line-height: 0; filter: brightness(.9) saturate(.9); }
.map iframe { width: 100%; height: 340px; border: 0; display: block; }
@media (min-width: 768px) { .map iframe { height: 440px; } }

/* ---- フッター ---- */
.ftr {
  background: #16241c; color: #d7ddd6;
  text-align: center; padding: 60px 22px; font-size: 0.83rem; line-height: 2;
}
.ftr__name {
  font-family: var(--gothic);
  font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; text-indent: .08em; margin-bottom: 16px;
}
.ftr p + p { margin-top: .6em; }
.ftr a { color: inherit; }
.ftr__note { margin-top: 24px; opacity: .5; font-size: .66rem; line-height: 1.9; }

/* ---- Googleマップ周りの余白 ----
   地図の上には .map の margin-top、下には店舗情報セクションの下パディングが
   入っていて、地図だけが宙に浮いたように見えていた。
   上下とも詰めて、地図を帯として画面幅いっぱいに置く。
   #info はIDセレクタなので、前にある .sec の指定より確実に優先される。 */
#info { padding-bottom: 0; }
.map { margin-top: 0; }