/* ============================================================
   Days デイズ ｜ 中洲のママのいないスナック
   墨色の地に金の罫と明朝。帳場のように組み、夜の店として沈める。
   ============================================================ */

:root{
  --bg:#1c1512;
  --surface:#251a15;
  --surface-2:#2f221a;
  --ink:#f2ebe0;
  --muted:#c2b2a0;
  --accent:#c9a227;
  --accent-ink:#241a10;
  --on-accent:#1c1512;
  --line:rgba(201,162,39,.45);
  --line-soft:rgba(242,235,224,.16);
  --font-display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --gutter:clamp(20px,5vw,56px);
  --chrome-h:64px;
  --ewb-panel-display:flex;
  --callbar-h:56px;
  --measure:40ic;
}

/* ---------- 下地 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-inline-size:100%; display:block; }
a{ color:inherit; }
[id]{ scroll-margin-top:calc(var(--chrome-h) + 24px); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.35;
  letter-spacing:.04em;
  font-feature-settings:"palt";
  margin:0;
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.shell{
  max-inline-size:1140px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.body-text{
  color:var(--muted);
  max-inline-size:var(--measure);
}
.body-text + .body-text{ margin-block-start:1.4em; }

/* ---------- 節の骨組み：縦ラベルと金の罫 ---------- */
.section{ padding-block:var(--sec-pad, clamp(76px,11vw,148px)); position:relative; }
.band{ background:var(--surface); border-block:1px solid var(--line-soft); }

.sec-head{
  display:grid;
  grid-template-columns:clamp(40px,5vw,64px) minmax(0,1fr);
  gap:clamp(20px,4vw,52px);
  align-items:start;
  margin-block-end:clamp(40px,6vw,72px);
}
.v-label{
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.34em;
  color:var(--ink);
  border-inline-start:1px solid var(--accent);
  padding-inline-start:10px;
  min-inline-size:180px;
  white-space:nowrap;
}
.sec-rule{
  inline-size:56px; block-size:1px;
  background:var(--accent);
  margin-block-end:22px;
}
.sec-title{
  font-size:clamp(27px,4.2vw,42px);
  line-height:1.4;
  text-wrap:balance;
}

/* ---------- 汎用ボタン ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-block-size:52px;
  padding-inline:30px;
  font-size:15px;
  letter-spacing:.1em;
  text-decoration:none;
  border:1px solid var(--accent);
  color:var(--ink);
  background:transparent;
  transition:background-color .45s cubic-bezier(.22,1,.36,1), color .45s cubic-bezier(.22,1,.36,1);
}
.btn:hover{ background:rgba(201,162,39,.14); }
.hero .btn:not(.btn-solid){ background:rgba(28,21,18,.72); }
.btn-solid{ background:var(--accent); color:var(--on-accent); }
.btn-solid:hover{ background:#dbb63a; color:var(--on-accent); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px 18px; }

/* ---------- ヘッダー ---------- */
.ewb-chrome-nav{
  position:fixed;
  inset-inline:0;
  inset-block-start:0;
  block-size:var(--chrome-h);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-inline:var(--gutter);
  background:rgba(28,21,18,.92);
  backdrop-filter:blur(8px);
  border-block-end:1px solid var(--line-soft);
}
.ewb-brand{
  font-family:var(--font-display);
  font-weight:600;
  font-size:20px;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
}
.ewb-brand::before{
  content:"";
  display:inline-block;
  inline-size:8px; block-size:8px;
  background:var(--accent);
  margin-inline-end:12px;
  transform:translateY(-1px);
}
.ewb-navpanel{
  display:var(--ewb-panel-display, block);
  align-items:center;
  gap:clamp(18px,2.4vw,32px);
}
.ewb-navpanel a{
  font-size:14px;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--ink);
  padding-block:8px;
  border-block-end:1px solid transparent;
  transition:border-color .3s;
  white-space:nowrap;
}
.ewb-navpanel a:hover{ border-block-end-color:var(--accent); }
.ewb-navpanel .nav-tel{
  border:1px solid var(--accent);
  padding:10px 22px;
  color:var(--on-accent);
  background:var(--accent);
}
.ewb-navpanel .nav-tel:hover{ background:#dbb63a; border-block-end-color:var(--accent); }
.ewb-navtoggle{
  display:none;
  place-items:center;
  inline-size:44px; block-size:44px;
  background:none;
  border:1px solid var(--line);
  cursor:pointer;
  transition:background-color .3s;
}
.ewb-navtoggle:hover{ background:rgba(201,162,39,.14); }
.ewb-navtoggle::before{
  content:"";
  inline-size:18px; block-size:2px;
  background:var(--accent);
  box-shadow:0 -6px 0 var(--accent), 0 6px 0 var(--accent);
}
@media (max-width:900px){
  .ewb-navtoggle{ display:grid; }
  .ewb-navpanel{ display:none; }
  .ewb-chrome-nav[data-open="true"] .ewb-navpanel{
    display:var(--ewb-panel-display, block);
    position:fixed;
    inset:var(--chrome-h) 0 0 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--bg);
    padding:24px var(--gutter) 48px;
    overflow:auto;
  }
  .ewb-chrome-nav[data-open="true"] .ewb-navpanel a{
    font-family:var(--font-display);
    font-size:22px;
    padding-block:20px;
    border-block-end:1px solid var(--line-soft);
    white-space:normal;
  }
  .ewb-chrome-nav[data-open="true"] .ewb-navpanel .nav-tel{
    margin-block-start:28px;
    text-align:center;
    border:1px solid var(--accent);
  }
}

/* ---------- ヒーロー ---------- */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  inline-size:100%; block-size:100%;
  object-fit:cover;
  object-position:center 60%;
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(28,21,18,.97) 0%, rgba(28,21,18,.9) 44%, rgba(28,21,18,.55) 78%, rgba(28,21,18,.35) 100%),
    linear-gradient(to top, rgba(28,21,18,.95) 0%, rgba(28,21,18,.45) 60%, rgba(28,21,18,0) 100%);
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:clamp(56px,8vw,104px) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);
  align-items:center;
  min-block-size:calc(100svh - var(--chrome-h));
  padding-block:clamp(56px,9vh,110px);
  max-inline-size:1240px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.hero-aside{
  align-self:center;
  display:flex;
  justify-content:center;
  gap:12px;
}
.hero-brand-v{
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(24px,3vw,40px);
  letter-spacing:.28em;
  color:var(--ink);
  line-height:1;
}
.hero-rule-v{
  inline-size:1px;
  align-self:stretch;
  background:var(--accent);
}
.hero-copy{
  max-inline-size:640px;
  background:rgba(28,21,18,.78);
  padding:clamp(24px,3.5vw,44px);
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  letter-spacing:.28em;
  color:var(--muted);
  margin-block-end:28px;
}
.hero-eyebrow::before{
  content:"";
  inline-size:40px; block-size:1px;
  background:var(--accent);
}
.hero h1{
  font-size:clamp(34px,5.4vw,62px);
  line-height:1.32;
  margin-block-end:26px;
}
.hero-lede{
  color:var(--muted);
  max-inline-size:38em;
  margin-block-end:38px;
}
.hero .btn-row{ margin-block-end:0; }

@media (max-width:640px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-aside{ display:none; }
  .hero-media img{ object-position:center 55%; }
  .hero-scrim{
    background:linear-gradient(rgba(28,21,18,.84) 0%, rgba(28,21,18,.6) 55%, rgba(28,21,18,.88) 100%);
  }
}
@media (max-width:640px){
  .sec-head{ grid-template-columns:1fr; gap:0; justify-items:start; }
  .v-label{
    writing-mode:horizontal-tb;
    min-inline-size:0;
    min-block-size:0;
    border-inline-start:0;
    padding-inline-start:0;
    margin-block-end:14px;
    font-size:12px;
    letter-spacing:.3em;
    color:var(--muted);
  }
}

/* ---------- 店のこと：事実の罫表 ---------- */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(36px,6vw,84px);
  align-items:start;
}
.about-photo{ position:relative; }
.about-photo img{
  inline-size:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.about-photo figcaption{
  margin-block-start:12px;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--muted);
}
.facts{ border-block-start:1px solid var(--accent); margin-block-start:6px; }
.facts li{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding-block:16px;
  border-block-end:1px solid var(--line-soft);
  font-size:15px;
  letter-spacing:.04em;
}
.facts .idx{
  font-family:var(--font-display);
  font-weight:600;
  font-size:22px;
  line-height:1;
  color:var(--accent);
  letter-spacing:0;
}
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
}

/* ---------- 酒と歌：品書きと5000円 ---------- */
.drinks-grid{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(36px,6vw,88px);
  align-items:start;
}
.menu-list li{
  display:flex;
  gap:22px;
  padding-block:24px;
  border-block-end:1px dashed var(--line-soft);
}
.menu-list li:first-child{ border-block-start:1px dashed var(--line-soft); }
.menu-list .no{
  font-family:var(--font-display);
  font-weight:600;
  font-size:22px;
  line-height:1.4;
  color:var(--accent);
  letter-spacing:0;
}
.menu-list h3{
  font-size:19px;
  margin-block-end:6px;
}
.menu-list p{ color:var(--muted); font-size:15px; }
.price-block{
  border:1px solid var(--line);
  padding:clamp(28px,4vw,44px);
  position:sticky;
  inset-block-start:calc(var(--chrome-h) + 40px);
}
.price-label{
  font-size:14px;
  letter-spacing:.2em;
  color:var(--muted);
  margin-block-end:6px;
}
.price{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1;
  color:var(--accent);
  margin-block:10px 18px;
}
.price .price-num{
  font-size:clamp(64px,8vw,104px);
  letter-spacing:.02em;
}
.price .price-yen{ font-size:clamp(22px,2.6vw,30px); margin-inline-start:8px; }
.price-note{ font-size:14px; color:var(--muted); }
@media (max-width:860px){
  .drinks-grid{ grid-template-columns:1fr; }
  .price-block{ position:static; }
}

/* ---------- 店内：ギャラリーと縦キャプション ---------- */
.g-lede{ margin-block-end:clamp(44px,6vw,80px); }
.g-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(84px,11vw,128px);
  gap:clamp(24px,4vw,56px);
  align-items:start;
  margin-block-end:clamp(56px,8vw,104px);
}
.g-item:last-child{ margin-block-end:0; }
.g-item--rev{ grid-template-columns:clamp(84px,11vw,128px) minmax(0,1fr); }
.g-item--rev .g-media{ order:2; }
.g-item--rev .g-caption{ order:1; }
.g-mask{ overflow:hidden; }
.g-mask img{
  inline-size:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}
.g-item--tall .g-mask img{ aspect-ratio:4/3; }
.g-caption{
  position:sticky;
  inset-block-start:calc(var(--chrome-h) + 48px);
  writing-mode:vertical-rl;
  display:flex;
  gap:16px;
  justify-content:center;
  max-block-size:70vh;
}
.g-no{
  font-family:var(--font-display);
  font-weight:600;
  font-size:22px;
  color:var(--accent);
  letter-spacing:0;
  line-height:1;
}
.g-cap-text{
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.22em;
  color:var(--ink);
  line-height:2;
}
@media (max-width:760px){
  .g-item,
  .g-item--rev{ grid-template-columns:1fr; }
  .g-item--rev .g-media{ order:1; }
  .g-item--rev .g-caption{ order:2; }
  .g-caption{
    position:static;
    writing-mode:horizontal-tb;
    justify-content:flex-start;
    max-block-size:none;
    margin-block-start:14px;
  }
  .g-cap-text{ letter-spacing:.08em; line-height:1.7; }
}

/* ---------- 営業時間・定休日 ---------- */
.hours-grid{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(36px,6vw,88px);
  align-items:start;
}
.hours-big{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(42px,6.4vw,84px);
  line-height:1.15;
  color:var(--accent);
  letter-spacing:.02em;
  font-feature-settings:"palt";
}
.hours-cap{
  margin-block-start:10px;
  font-size:14px;
  letter-spacing:.14em;
  color:var(--muted);
}
.hours-table{ border-block-start:1px solid var(--accent); }
.hours-table div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  padding-block:18px;
  border-block-end:1px solid var(--line-soft);
}
.hours-table dt{ font-size:13px; letter-spacing:.2em; color:var(--muted); }
.hours-table dd{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  letter-spacing:.04em;
}
.hours-table a{ text-decoration:none; }
@media (max-width:860px){
  .hours-grid{ grid-template-columns:1fr; }
}

/* ---------- アクセス ---------- */
.access-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.access-address{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(22px,2.8vw,30px);
  line-height:1.6;
  margin-block:0 22px;
}
.map-frame{
  inline-size:100%;
  aspect-ratio:16/10;
  border:1px solid var(--line-soft);
}
.map-frame iframe{ inline-size:100%; block-size:100%; border:0; display:block; }
@media (max-width:860px){
  .access-grid{ grid-template-columns:1fr; }
}

/* ---------- クチコミ（teaser と reviews.html 共通） ---------- */
.review-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,36px);
  margin-block-end:32px;
}
.review{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-block-start:1px solid var(--accent);
  padding:clamp(22px,3vw,34px);
}
.review-stars{
  color:var(--accent);
  font-size:15px;
  letter-spacing:.3em;
  margin-block-end:14px;
}
.review-text{
  font-size:15px;
  line-height:1.9;
  margin-block-end:18px;
}
.review-meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.06em;
}
.review-meta .review-author{ color:var(--ink); }
.more-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  letter-spacing:.06em;
  text-decoration:none;
  border-block-end:1px solid var(--accent);
  padding-block-end:6px;
  transition:color .3s;
}
.more-link::after{ content:"→"; color:var(--accent); }
.more-link:hover{ color:var(--accent); }
@media (max-width:760px){
  .review-grid{ grid-template-columns:1fr; }
}
.review-list{
  display:grid;
  gap:clamp(20px,3vw,32px);
  max-inline-size:780px;
}

/* ---------- FAQ（teaser と faq.html 共通） ---------- */
.faq-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.faq-list{ border-block-start:1px solid var(--accent); }
.faq-list details{ border-block-end:1px solid var(--line-soft); }
.faq-list summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-block-size:44px;
  padding-block:22px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
  letter-spacing:.04em;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"";
  flex:none;
  inline-size:14px; block-size:14px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/100% 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1px 100% no-repeat;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list details p{
  padding-block-end:26px;
  color:var(--muted);
  max-inline-size:var(--measure);
}
@media (max-width:860px){
  .faq-grid{ grid-template-columns:1fr; }
}

/* ---------- Instagram & Facebook ---------- */
.sns-list a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding-block:28px;
  border-block-end:1px solid var(--line-soft);
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(21px,3vw,30px);
  letter-spacing:.05em;
  transition:color .3s;
}
.sns-list li:first-child a{ border-block-start:1px solid var(--accent); }
.sns-list a:hover{ color:var(--accent); }
.sns-list .sns-arrow{ color:var(--accent); font-family:var(--font-body); font-weight:400; }
.sns-list .sns-role{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--muted);
  margin-block-start:6px;
}

/* ---------- 閉め ---------- */
.closing{ text-align:start; }
.closing-copy{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(26px,4vw,44px);
  line-height:1.6;
  max-inline-size:22em;
  margin-block-end:40px;
}
.closing-tel{
  font-size:14px;
  letter-spacing:.14em;
  color:var(--muted);
  margin-block-start:16px;
}

/* ---------- サブ頁（faq.html / reviews.html） ---------- */
.page-head{
  padding-block:clamp(48px,8vw,100px) clamp(36px,5vw,64px);
  border-block-end:1px solid var(--line-soft);
}
.page-kicker{
  font-size:14px;
  letter-spacing:.3em;
  color:var(--muted);
  margin-block-end:20px;
}
.page-title{
  font-size:clamp(38px,6.4vw,66px);
  line-height:1.28;
}
.page-title .num-big{
  color:var(--accent);
  font-size:1.15em;
  letter-spacing:0;
}
.page-lede{
  margin-block-start:26px;
  color:var(--muted);
  max-inline-size:var(--measure);
}
.contact-strip{ background:var(--surface); border-block:1px solid var(--line-soft); }
.contact-strip .shell{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(24px,4vw,48px);
  padding-block:clamp(40px,6vw,64px);
}
.contact-item .c-label{
  font-size:12px;
  letter-spacing:.26em;
  color:var(--muted);
  margin-block-end:10px;
}
.contact-item .c-body{
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  letter-spacing:.04em;
}
.contact-item a{ text-decoration:none; }
.contact-item a:hover{ color:var(--accent); }

/* ---------- フッター ---------- */
.site-foot{
  border-block-start:1px solid var(--accent);
  padding-block:clamp(48px,7vw,88px) clamp(32px,4vw,48px);
}
.foot-brand{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(50px,11vw,124px);
  line-height:1.15;
  letter-spacing:.02em;
  margin-block-end:clamp(32px,5vw,56px);
}
.foot-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(24px,3vw,40px);
  padding-block-end:clamp(32px,4vw,48px);
  border-block-end:1px solid var(--line-soft);
}
.foot-label{
  font-size:12px;
  letter-spacing:.26em;
  color:var(--muted);
  margin-block-end:8px;
}
.foot-cols p, .foot-cols a{
  font-size:14px;
  letter-spacing:.04em;
  color:var(--ink);
  text-decoration:none;
}
.foot-cols a:hover{ color:var(--accent); }
.foot-social{ display:flex; gap:22px; }
.foot-note{
  padding-block-start:24px;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted);
}

/* ---------- 携帯下端の電話バー ---------- */
.callbar{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:90;
  display:none;
}
.callbar a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-block-size:var(--callbar-h);
  background:var(--accent);
  color:var(--on-accent);
  text-decoration:none;
  font-weight:500;
  font-size:16px;
  letter-spacing:.1em;
}
@media (max-width:900px){
  .callbar{ display:flex; }
  body{ padding-block-end:var(--callbar-h); }
}

/* ---------- モーションの下処理（script.js / motion.js が扱う） ---------- */
html.motion-on [data-scrub="clip"] img{ will-change:clip-path; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}