/* Bistro TAKUMI - 共通スタイル
   色やフォントを変えたいときは、まず下の :root の値を変えてください。 */

:root{
  --ink:#171512;
  --ink-soft:#5B4C3A;
  --ink-mute:#8A7B60;
  --cream:#F7F4EC;
  --cream-2:#EFEADB;
  --cream-3:#EDE7D8;
  --on-dark:#F3E9D2;
  --on-dark-soft:#D9CBB0;
  --on-dark-mute:#B7A98C;
  --gold:#C9A227;
  --gold-deep:#8A6530;
  --line:rgba(23,21,18,0.14);
  --line-dark:#4A3F2C;
  --serif:'Shippori Mincho B1',"Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:'Zen Kaku Gothic New',"Hiragino Sans","Yu Gothic",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8;
  overflow-wrap:break-word;
}

h1,h2,h3{font-family:var(--serif);margin:0;line-height:1.5;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
svg{display:block;}

/* ---------- レイアウト ---------- */

.container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding-inline:clamp(20px,5vw,56px);
}

.sect{padding-block:clamp(56px,8vw,104px);}
.sect-tight{padding-block:clamp(40px,6vw,72px);}

.dark{background:var(--ink);color:var(--on-dark);}
.tinted{background:var(--cream-2);}

section[id]{scroll-margin-top:120px;}

.split{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(32px,5vw,56px);
  align-items:center;
}
.split-top{align-items:start;}
@media (max-width:860px){
  .split{grid-template-columns:1fr;}
}

/* ---------- 見出し ---------- */

.eyebrow{
  font-size:12px;
  letter-spacing:0.2em;
  font-weight:700;
  color:var(--gold-deep);
  margin-bottom:14px;
}
.dark .eyebrow{color:var(--gold);}

.h-section{font-size:clamp(23px,4vw,32px);font-weight:700;}
.h-group{font-size:clamp(17px,3vw,20px);font-weight:700;}

.rule{width:44px;height:2px;background:var(--gold);margin:12px 0 20px;}

.lead{
  font-size:clamp(15px,2.4vw,16px);
  line-height:2;
  color:var(--ink-soft);
  max-width:46ch;
}
.dark .lead{color:var(--on-dark-soft);}

.note{font-size:13px;line-height:1.9;color:var(--ink-mute);}
.dark .note{color:var(--on-dark-mute);}

/* ---------- ヘッダー ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(23,21,18,0.97);
}
.site-header .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:4px 24px;
  padding-block:10px;
}
.brand{
  font-family:var(--serif);
  font-size:20px;
  font-weight:800;
  letter-spacing:0.12em;
  color:var(--gold);
  padding-block:8px;
}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;}
.nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 12px;
  font-size:15px;
  color:#EDE3CC;
}
.nav a:hover{color:var(--gold);}
.nav a[aria-current="page"]{color:var(--gold);}
.header-tel{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:15px;
  font-weight:700;
  color:var(--gold);
  white-space:nowrap;
}

@media (max-width:820px){
  .site-header .inner{justify-content:center;gap:0 16px;}
  .brand{font-size:18px;}
  .header-tel{font-size:14px;}
  .nav{
    order:3;
    width:100%;
    justify-content:center;
    border-top:1px solid rgba(201,162,39,0.25);
    padding-top:2px;
  }
  .nav a{font-size:14px;padding:6px 10px;min-height:40px;}
  section[id]{scroll-margin-top:150px;}
}

/* ---------- ボタン ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:13px 26px;
  border:1px solid var(--gold);
  border-radius:2px;
  background:var(--gold);
  color:var(--ink);
  font-size:15px;
  font-weight:700;
}
.btn:hover{background:#B08D57;border-color:#B08D57;}

.btn-line{
  background:transparent;
  color:var(--gold-deep);
  border-color:var(--gold-deep);
}
.btn-line:hover{background:rgba(138,101,48,0.08);color:var(--gold-deep);border-color:var(--gold-deep);}

.dark .btn-line{color:var(--gold);border-color:var(--gold);}
.dark .btn-line:hover{background:rgba(201,162,39,0.14);color:var(--gold);}

.btn-row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;}

.back-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:8px;
  font-size:15px;
  color:var(--gold-deep);
  border-bottom:1px solid currentColor;
}
.dark .back-link{color:var(--gold);}

/* ---------- パネル ---------- */

.panel{
  border:1px solid var(--line);
  background:#FFFDF8;
  border-radius:2px;
  padding:clamp(22px,4vw,32px);
}
.panel-dark{
  border:1px solid var(--line-dark);
  background:#211D18;
  color:var(--on-dark);
  border-radius:2px;
  padding:clamp(22px,4vw,32px);
}

.panel-label{
  font-size:12px;
  letter-spacing:0.16em;
  font-weight:700;
  color:var(--gold);
  margin-bottom:12px;
}
.panel-title{font-family:var(--serif);font-size:clamp(19px,3vw,22px);font-weight:700;}

/* こだわりリスト */
.points{display:grid;gap:16px;margin-top:4px;}
.point{display:flex;gap:14px;align-items:flex-start;}
.point .num{
  flex:0 0 auto;
  min-width:24px;
  font-family:var(--serif);
  font-size:15px;
  font-weight:700;
  color:var(--gold-deep);
  padding-top:2px;
}
.dark .point .num{color:var(--gold);}
.point .txt{min-width:0;}
.point .txt b{display:block;font-size:15px;font-weight:700;margin-bottom:2px;}
.point .txt span{font-size:14px;line-height:1.9;color:var(--ink-soft);}
.dark .point .txt span{color:var(--on-dark-soft);}

/* ---------- お品書き ---------- */

.menu-group{margin-bottom:clamp(32px,5vw,48px);}
.menu-group:last-child{margin-bottom:0;}

.menu-list{border-top:1px solid var(--line);}

.menu-item{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:6px 24px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.menu-item .body{flex:1 1 240px;min-width:0;}
.menu-item .name{
  font-family:var(--serif);
  font-size:clamp(16px,2.6vw,18px);
  font-weight:600;
}
.menu-item .desc{
  font-size:14px;
  line-height:1.9;
  color:var(--ink-soft);
  margin-top:6px;
}
.menu-item .price{
  flex:0 0 auto;
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  white-space:nowrap;
  margin-left:auto;
}
.menu-item .sizes{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px 14px;
  margin-left:auto;
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
}
.menu-item .sizes span{white-space:nowrap;}

.badge{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--gold-deep);
  border:1px solid var(--gold-deep);
  border-radius:2px;
  padding:1px 8px;
  margin-left:8px;
  vertical-align:middle;
}

/* ---------- 営業時間 ---------- */

.hours{border-top:1px solid var(--line);}
.dark .hours{border-top-color:var(--line-dark);}

.hours-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 20px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.dark .hours-row{border-bottom-color:var(--line-dark);}

.hours-row .day{
  flex:0 0 96px;
  font-size:15px;
  font-weight:700;
}
.hours-row .times{flex:1 1 220px;min-width:0;display:grid;gap:4px;}
.hours-row .time{
  display:flex;
  flex-wrap:wrap;
  gap:2px 12px;
  font-size:15px;
}
.hours-row .time .tag{
  flex:0 0 52px;
  font-size:13px;
  color:var(--ink-mute);
}
.dark .hours-row .time .tag{color:var(--on-dark-mute);}
.hours-row.is-closed .times{color:var(--ink-mute);font-size:15px;}
.dark .hours-row.is-closed .times{color:var(--on-dark-mute);}

/* ---------- 情報リスト（住所など） ---------- */

.info{border-top:1px solid var(--line);}
.dark .info{border-top-color:var(--line-dark);}
.info-row{
  display:flex;
  flex-wrap:wrap;
  gap:2px 20px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.dark .info-row{border-bottom-color:var(--line-dark);}
.info-row dt{
  flex:0 0 96px;
  font-size:13px;
  color:var(--ink-mute);
  padding-top:3px;
}
.dark .info-row dt{color:var(--on-dark-mute);}
.info-row dd{flex:1 1 220px;min-width:0;margin:0;font-size:15px;line-height:1.9;}
.info-row dd a{border-bottom:1px solid var(--gold);}

/* ---------- 道順 ---------- */

.steps{display:grid;gap:18px;}
.step{display:flex;gap:14px;align-items:flex-start;}
.step .marker{
  flex:0 0 30px;
  height:30px;
  border:1px solid var(--gold-deep);
  border-radius:50%;
  color:var(--gold-deep);
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.step .txt{min-width:0;font-size:15px;line-height:1.9;padding-top:2px;}

/* ---------- ページ見出し（下層ページ） ---------- */

.page-head{background:var(--ink);color:var(--on-dark);}
.page-head .inner{padding-block:clamp(40px,7vw,64px);}
.page-head h1{font-size:clamp(26px,5vw,38px);font-weight:800;}
.page-head p{margin-top:14px;}

/* ---------- フッター ---------- */

.site-footer{background:var(--ink);color:var(--on-dark-mute);}
.site-footer .inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 24px;
  padding-block:32px;
}
.site-footer .brand{font-size:17px;}
.footer-nav{display:flex;flex-wrap:wrap;gap:4px 8px;}
.footer-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:4px 10px;
  font-size:14px;
  color:var(--on-dark-soft);
}
.footer-nav a:hover{color:var(--gold);}
.copyright{font-size:13px;}

@media (max-width:820px){
  .site-footer .inner{justify-content:center;text-align:center;}
}