/* しゃぶしゃぶ くぐり — 墨×白×朱・明朝・写真レス */

:root{
  --sumi:#1F1D1A;        /* 墨 */
  --sumi-soft:#55524C;   /* 薄墨 */
  --paper:#FBFAF8;       /* 白（クリスプ） */
  --line:#E4E1DA;        /* 罫線 */
  --shu:#B5432E;         /* 朱（点・線のみ） */
  --ok:#3E6B4A;          /* ◯ */
  --mincho:"Shippori Mincho", serif;
  --gothic:"Zen Kaku Gothic New", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--gothic); color:var(--sumi); background:var(--paper);
  line-height:1.8; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

.wrap{ max-width:680px; margin:0 auto; padding:0 20px; }

/* ---------- ヒーロー(写真帯) ---------- */
.hero{ position:relative; overflow:hidden; background:#141210; }
.hero__img{
  width:100%; height:min(62vh, 460px); object-fit:cover; object-position:62% 42%;
  opacity:.88;
}
.hero__ink{
  position:absolute; inset:auto 0 0 0; padding:0 22px 26px;
  background:linear-gradient(to top, rgba(12,10,8,.72), rgba(12,10,8,0));
  padding-top:70px;
  color:#F4F1EA;
}
.hero__sub{ font-family:var(--mincho); font-size:12px; letter-spacing:.42em; color:#D8D2C6; }
.hero__logo{
  font-family:var(--mincho); font-weight:800; font-size:44px; letter-spacing:.32em;
  line-height:1.2; margin-top:2px;
}
.hero__copy{ font-size:12.5px; color:#D8D2C6; margin-top:8px; letter-spacing:.06em; }

/* ---------- FV: 今週の空き ---------- */
.avail{ padding:26px 0 8px; }
.avail__eyebrow{
  font-family:var(--mincho); font-size:12px; letter-spacing:.32em; color:var(--shu);
  display:flex; align-items:center; gap:10px;
}
.avail__eyebrow::after{ content:""; flex:0 0 34px; height:1px; background:var(--shu); }
.avail__lead{
  font-family:var(--mincho); font-weight:600; font-size:24px; line-height:1.75;
  margin-top:14px; letter-spacing:.06em;
}
.avail__lead b{ font-weight:800; color:var(--shu); }
.avail__note{ font-size:13px; color:var(--sumi-soft); margin-top:6px; }

/* 週間グリッド */
.cal{ margin-top:22px; border-top:1.5px solid var(--sumi); }
.cal table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.cal th, .cal td{
  text-align:center; vertical-align:middle;
  border-bottom:1px solid var(--line);
  padding:0;
}
.cal thead th{
  font-family:var(--gothic); font-weight:500; font-size:12px; color:var(--sumi-soft);
  padding:10px 0 8px; letter-spacing:.04em;
}
.cal thead th .d{ display:block; font-size:15px; font-weight:700; color:var(--sumi); }
.cal thead th.is-sat .d{ color:#3D5A80; }
.cal thead th.is-sun .d{ color:var(--shu); }
.cal tbody th{
  font-family:var(--gothic); font-weight:500; font-size:12px; color:var(--sumi-soft);
  padding:14px 0; letter-spacing:.02em;
}
.cal td button{
  appearance:none; border:0; background:none; font-family:var(--gothic);
  width:100%; padding:12px 0; cursor:pointer; font-size:17px; line-height:1;
  color:var(--sumi);
}
.cal td button:disabled{ cursor:default; }
.mk{ font-style:normal; }
.mk--ok, .cal td .st-ok{ color:var(--ok); font-weight:700; }
.mk--few, .cal td .st-few{ color:var(--shu); font-weight:700; }
.mk--full, .cal td .st-full{ color:#B9B4AA; font-weight:500; }
.mk--off{ color:#CFCABE; }
.cal td .st-off{ color:#CFCABE; font-weight:400; }
.cal td button.is-picked{ background:#F2EFE8; border-radius:6px; }

.legend{ display:flex; gap:18px; margin-top:14px; font-size:12px; color:var(--sumi-soft); }
.legend__item{ display:inline-flex; align-items:center; gap:6px; }
.cal__updated{ font-size:11px; color:#A9A498; margin-top:8px; }
.cal__loading{
  padding:34px 0; text-align:center; font-size:13px; color:var(--sumi-soft);
}
.cal__loading::before{
  content:""; display:inline-block; width:14px; height:14px; margin-right:10px;
  border:2px solid var(--line); border-top-color:var(--shu); border-radius:50%;
  vertical-align:-2px; animation:kuguri-spin 0.8s linear infinite;
}
@keyframes kuguri-spin{ to{ transform:rotate(360deg); } }

/* ---------- CTA ---------- */
.cta{
  margin:22px 0 6px; padding:20px;
  border:1.5px solid var(--sumi); border-radius:10px;
  text-align:center;
}
.cta__picked{ font-family:var(--mincho); font-size:15px; letter-spacing:.08em; text-align:center; text-wrap:balance; }
.cta__picked .nb{ display:inline-block; }
.cta__picked b{ font-size:19px; }
.cta__row{ display:flex; align-items:center; gap:14px; margin-top:14px; text-align:left; }
.cta__lab{
  flex:0 0 52px; font-family:var(--mincho); font-size:13px; letter-spacing:.2em; color:var(--sumi-soft);
}
.cta__party{ display:flex; gap:8px; flex-wrap:wrap; }
.cta__pbtn{
  appearance:none; border:1px solid var(--line); background:#fff; border-radius:999px;
  font-family:var(--gothic); font-size:13px; padding:8px 14px; cursor:pointer; color:var(--sumi);
}
.cta__pbtn.is-on{ background:var(--sumi); border-color:var(--sumi); color:#fff; font-weight:700; }
.cta__name{
  flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; background:#fff;
  font-family:var(--gothic); font-size:15px; padding:10px 12px; color:var(--sumi);
}
.cta__name:focus{ outline:2px solid var(--sumi); outline-offset:1px; }
.cta__hint{ font-size:11.5px; color:var(--sumi-soft); margin-top:8px; }
.cta__line-sub{
  display:block; font-size:11px; font-weight:500; letter-spacing:.04em;
  color:rgba(255,255,255,.78); margin-top:5px;
}
a.cta__line:not([href]){ cursor:default; }
.cta__line{
  display:block; margin:14px auto 0; max-width:340px;
  background:var(--sumi); color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; letter-spacing:.08em;
  padding:15px 10px; border-radius:999px;
}
.cta__tel{ font-size:12px; color:var(--sumi-soft); margin-top:12px; }
.cta__tel a{ font-weight:700; text-decoration:none; }

/* ---------- セクション共通 ---------- */
.sec__h{
  font-family:var(--mincho); font-weight:600; font-size:16px; letter-spacing:.30em;
  color:var(--sumi); margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.sec__h::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---------- お品書き ---------- */
.menu{ padding:44px 0 10px; }
.course{ display:grid; gap:0; }
.course__item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px;
  padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.course__name{
  font-family:var(--mincho); font-weight:600; font-size:19px; letter-spacing:.16em;
}
.course__desc{ grid-column:1; font-size:12.5px; color:var(--sumi-soft); }
.course__price{
  grid-row:1 / span 2; grid-column:2; align-self:center;
  font-family:var(--mincho); font-weight:600; font-size:19px; letter-spacing:.04em;
}
.course__price span{ font-size:12px; margin-left:2px; }
.menu__note{ font-size:12px; color:var(--sumi-soft); margin-top:14px; }

/* ---------- 店の情報 ---------- */
.info{ padding:34px 0 10px; }
.info__list{ display:grid; gap:0; }
.info__list > div{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.info__list dt{
  font-family:var(--mincho); letter-spacing:.3em; color:var(--sumi-soft); font-size:13px;
}

/* ---------- フッター ---------- */
.foot{ margin-top:56px; background:var(--sumi); color:#EDEAE3; text-align:center; padding:44px 20px 34px; }
.foot__logo{ font-family:var(--mincho); font-weight:800; font-size:22px; letter-spacing:.34em; }
.foot__sub{ font-size:12px; color:#B9B4AA; margin-top:8px; text-wrap:balance; text-align:center; }
.foot__make{ margin-top:20px; font-size:12px; }
.foot__make a{ color:#EDEAE3; }
.foot__demo{ font-size:11px; color:#8D887C; margin-top:14px; }

/* ---------- PC ---------- */
@media (min-width:760px){
  .hero__img{ height:420px; }
  .hero__ink{ padding-left:calc((100% - 640px)/2); padding-right:calc((100% - 640px)/2); }
  .hero__logo{ font-size:52px; }
  .avail__lead{ font-size:28px; }
  .cal td button{ padding:14px 0; font-size:18px; }
}