/* ============================================================
   MANVAR — 神楽坂の路地裏、地中海料理店
   gallery-grey : #f4f4f5 地に料理を静物として掛ける
   灰色3階調 (#f4f4f5 / #18181b / #52525b) + 派生1段 (#e4e4e7)
   ============================================================ */

:root{
  --serif-en:"Cormorant Garamond","Times New Roman",serif;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --line:#e4e4e7;
  --gutter:clamp(20px,5vw,64px);
  --measure:36rem;
  --chrome-bar:rgba(244,244,245,.92);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.04em;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
[id]{scroll-margin-top:calc(var(--chrome-h,64px) + 20px)}
::selection{background:#18181b;color:#f4f4f5}

/* ---------- rhythm ---------- */
.sec{padding-block:clamp(88px,11vw,150px)}
.sec--dense{padding-block:clamp(64px,8vw,110px)}
.wrap{width:min(1160px,calc(100% - var(--gutter)*2));margin-inline:auto}
.measure{max-width:var(--measure)}
.sec-head{margin-bottom:clamp(36px,5vw,68px)}
.sec-label{
  display:block;
  font-family:var(--serif-en);
  font-weight:500;
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.sec-title{
  font-family:var(--mincho);
  font-weight:600;
  font-size:clamp(27px,3.4vw,42px);
  line-height:1.4;
  letter-spacing:.05em;
}
.body p+p{margin-top:1.7em}
.body{font-size:15.5px;line-height:1.95}

.text-link{
  display:inline-block;
  margin-top:32px;
  font-size:13px;
  letter-spacing:.16em;
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:6px;
  transition:opacity .3s ease;
}
.text-link:hover{opacity:.55}
.text-link::after{content:" \2192";letter-spacing:0}

/* 箇条書き（店の要点）— 罫線と番号で、アイコンは使わない */
.points{margin-top:40px;border-top:1px solid var(--line)}
.points li{
  display:flex;
  gap:16px;
  align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
  line-height:1.8;
}
.points li::before{
  font-family:var(--serif-en);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted);
  counter-increment:pt;
  content:counter(pt,decimal-leading-zero);
  flex:none;
  min-width:24px;
}
.points{counter-reset:pt}

/* ============================================================
   header — 細い1本の帯。ヒーローの上では素を透かし、
   落ちれば #f4f4f5 のすりガラスに圧縮する
   ============================================================ */
.site-chrome{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:64px;
  padding-inline:clamp(20px,4vw,48px);
  background:var(--chrome-bar);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .site-chrome{
      animation:chrome-condense linear both;
      animation-timeline:scroll(root);
      animation-range:0 140px;
    }
    @keyframes chrome-condense{
      from{background:rgba(244,244,245,0);border-bottom-color:transparent}
      to{background:var(--chrome-bar);border-bottom-color:var(--line)}
    }
  }
}
.ewb-brand{
  font-family:var(--serif-en);
  font-weight:600;
  font-size:20px;
  letter-spacing:.2em;
  text-decoration:none;
  color:var(--ink);
  line-height:1;
}
/* トグル（900px以下） */
.ewb-navtoggle{
  display:none;
  position:relative;
  width:44px;
  height:44px;
  background:none;
  border:0;
  cursor:pointer;
  transition:opacity .3s ease;
}
.ewb-navtoggle:hover{opacity:.55}
.ewb-navtoggle::before,
.ewb-navtoggle::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  height:1px;
  background:var(--ink);
  transition:transform .3s cubic-bezier(.22,1,.36,1),top .3s cubic-bezier(.22,1,.36,1);
}
.ewb-navtoggle::before{top:17px}
.ewb-navtoggle::after{top:26px}
.ewb-chrome-nav[data-open="true"] .ewb-navtoggle::before{top:21px;transform:rotate(45deg)}
.ewb-chrome-nav[data-open="true"] .ewb-navtoggle::after{top:21px;transform:rotate(-45deg)}

/* パネル — 既定（モバイル）は閉じ、data-open で開く */
.ewb-navpanel{display:none}
.ewb-chrome-nav[data-open="true"] .ewb-navpanel{
  display:block;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:rgba(244,244,245,.97);
  border-bottom:1px solid var(--line);
  padding:8px clamp(20px,6vw,32px) 28px;
}
.chrome-links a{
  display:flex;
  align-items:center;
  min-height:50px;
  font-size:14px;
  letter-spacing:.14em;
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.chrome-tel{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:18px;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--muted);
}
.chrome-tel b{
  font-family:var(--serif-en);
  font-weight:600;
  font-size:24px;
  letter-spacing:.06em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* デスクトップ — 1列の字間広いスモールキャップス */
@media (min-width:901px){
  .ewb-navtoggle{display:none}
  .ewb-chrome-nav .ewb-navpanel{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
  .chrome-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
  .chrome-links a{
    display:inline;
    min-height:0;
    border:0;
    font-family:var(--serif-en);
    font-size:11px;
    font-weight:500;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--muted);
    transition:color .3s ease;
  }
  .chrome-links a:hover{color:var(--ink)}
  .chrome-tel{
    flex-direction:row;
    align-items:baseline;
    gap:10px;
    margin:0 0 0 8px;
    padding:11px 18px;
    border:1px solid var(--ink);
    color:var(--ink);
    font-size:11px;
    letter-spacing:.18em;
    transition:background .3s ease,color .3s ease;
  }
  .chrome-tel b{font-size:14px;letter-spacing:.08em}
  .chrome-tel:hover{background:var(--ink);color:#f4f4f5}
}

/* ============================================================
   hero — 空気、MANVAR、小さな明朝、そして皿
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding-top:calc(var(--chrome-h,64px) + clamp(28px,5vh,60px));
  overflow:hidden;
}
/* WebGL のフォールバック：石膏を渡る午後の光（静的） */
.hero-shader{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 72% 8%,rgba(214,199,178,.10),rgba(244,244,245,0) 62%),
    radial-gradient(90% 70% at 15% 90%,rgba(214,199,178,.05),rgba(244,244,245,0) 55%);
}
.hero-inner{
  width:min(1080px,calc(100% - var(--gutter)*2));
  margin-inline:auto;
  text-align:center;
}
.hero-eyebrow{
  font-size:12px;
  letter-spacing:.3em;
  color:var(--muted);
  margin-bottom:clamp(18px,3vh,30px);
}
.hero-title{
  font-family:var(--serif-en);
  font-weight:500;
  font-size:clamp(58px,9vw,120px);
  line-height:1;
  letter-spacing:.02em;
}
.hero-sub{
  margin-top:clamp(16px,2.6vh,26px);
  font-family:var(--mincho);
  font-size:clamp(14px,1.6vw,18px);
  letter-spacing:.42em;
  text-indent:.42em;
}
.hero-cta{
  margin-top:clamp(26px,4vh,44px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px clamp(18px,3vw,36px);
}
.hero-cta a{
  font-size:12.5px;
  letter-spacing:.16em;
  text-decoration:none;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:5px;
  transition:color .3s ease,border-color .3s ease;
}
.hero-cta a:hover{color:var(--ink);border-color:var(--ink)}
.hero-plate{
  width:min(1080px,calc(100% - var(--gutter)*2));
  margin:clamp(36px,6vh,72px) auto clamp(40px,7vh,84px);
}
.hero-plate img{
  width:100%;
  aspect-ratio:21/10;
  object-fit:cover;
  object-position:center 60%;
}
.hero-plate figcaption{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted);
  text-align:left;
}

/* ============================================================
   story — img-2 を本文の隣に
   ============================================================ */
.story-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(36px,6vw,88px);
  align-items:start;
}
.story-fig img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.story-fig figcaption{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted);
}

/* ============================================================
   signature — 狭い测量幅の静かな節
   ============================================================ */

/* ============================================================
   arch gallery — 石造ファサードのアーチ窓を横に歩む
   ============================================================ */
.arch-section{padding-block:clamp(72px,9vw,130px)}
.arch-section .sec-head{
  width:min(1160px,calc(100% - var(--gutter)*2));
  margin-inline:auto;
}
.arch-band{
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  padding-block:12px;
}
.arch-band::-webkit-scrollbar{display:none}
.arch-track{
  display:flex;
  gap:clamp(22px,3vw,46px);
  width:max-content;
  padding-inline:var(--gutter);
}
.arch-card{
  scroll-snap-align:center;
  width:clamp(212px,23vw,292px);
  flex:none;
}
.arch-frame{
  aspect-ratio:10/16;
  border-radius:999px 999px 0 0;
  border:1px solid var(--line);
  overflow:hidden;
  background:var(--line);
}
.arch-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.arch-cap{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.arch-course{
  display:block;
  font-family:var(--mincho);
  font-weight:600;
  font-size:15px;
  letter-spacing:.28em;
}
.arch-desc{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.75;
  letter-spacing:.06em;
  color:var(--muted);
}

/* ============================================================
   menu / wine — 2カラム
   ============================================================ */
.menu-grid{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(44px,7vw,110px);
  border-top:1px solid var(--ink);
  padding-top:clamp(36px,5vw,56px);
}
.menu-col h3{
  font-family:var(--mincho);
  font-weight:600;
  font-size:20px;
  letter-spacing:.1em;
  margin-bottom:20px;
}
.course-prices{
  font-family:var(--serif-en);
  font-weight:500;
  font-size:clamp(30px,3.2vw,42px);
  letter-spacing:.04em;
  line-height:1.3;
  margin:8px 0 4px;
}
.course-prices small{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--muted);
}
.menu-note{
  margin-top:14px;
  font-size:12.5px;
  color:var(--muted);
}
.menu-col .body{margin-top:20px;font-size:15px}

/* ============================================================
   reviews — 桁の縁にずらして掛けた3枚
   ============================================================ */
.review-wall{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
  align-items:start;
}
.review-card{
  border:1px solid var(--line);
  background:var(--bg);
  padding:clamp(24px,2.6vw,36px);
}
.review-wall .review-card:nth-child(2){margin-top:clamp(0px,4.5vw,60px)}
.review-wall .review-card:nth-child(3){margin-top:clamp(0px,9vw,120px)}
.review-rating-num{
  font-family:var(--serif-en);
  font-weight:500;
  font-size:clamp(52px,5vw,72px);
  line-height:1;
  letter-spacing:.02em;
}
.review-rating-num span{font-size:.38em;letter-spacing:.1em}
.stars{
  font-size:13px;
  letter-spacing:.24em;
  color:var(--ink);
}
.review-card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  margin-bottom:14px;
}
.review-card-src{
  font-size:11px;
  letter-spacing:.2em;
  color:var(--muted);
}
.review-card blockquote{
  margin:0;
  font-size:14px;
  line-height:1.95;
}
.review-card-author{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  letter-spacing:.12em;
  color:var(--muted);
}

/* ============================================================
   faq — details アコーディオン（index のティーザーと faq.html 共通）
   ============================================================ */
.faq-list{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  display:flex;
  align-items:baseline;
  gap:16px;
  min-height:44px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--mincho);
  font-weight:600;
  font-size:clamp(15.5px,1.5vw,17.5px);
  line-height:1.7;
  letter-spacing:.06em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:"Q";
  flex:none;
  font-family:var(--serif-en);
  font-weight:500;
  font-size:15px;
  letter-spacing:.1em;
  color:var(--muted);
}
.faq-item summary::after{
  content:"+";
  margin-left:auto;
  flex:none;
  font-family:var(--serif-en);
  font-size:18px;
  color:var(--muted);
  transition:transform .3s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{
  padding:0 0 26px 39px;
  font-size:14.5px;
  line-height:1.95;
  max-width:64ch;
}

/* ============================================================
   access — 静的・印刷可能。演出は入れない
   ============================================================ */
.access-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(40px,6vw,88px);
  align-items:start;
}
.fact-table{border-top:1px solid var(--ink)}
.fact-table>div{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.fact-table dt{
  font-size:11.5px;
  letter-spacing:.24em;
  color:var(--muted);
  padding-top:5px;
}
.fact-table dd{
  font-size:14.5px;
  line-height:1.9;
  font-variant-numeric:tabular-nums;
}
.map-frame{border:1px solid var(--line)}
.map-frame iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  filter:grayscale(1) contrast(.95);
}
.map-caption{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
}
.map-link{font-variant-numeric:tabular-nums}

/* ============================================================
   sns
   ============================================================ */
.sns-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px clamp(24px,4vw,56px);
  border-top:1px solid var(--line);
  padding-top:28px;
}
.sns-links a{
  font-family:var(--serif-en);
  font-size:15px;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:6px;
  transition:opacity .3s ease;
}
.sns-links a:hover{opacity:.55}
.sns-body{max-width:var(--measure)}

/* ============================================================
   sub pages — faq.html / reviews.html
   ============================================================ */
.page-head{
  padding:calc(var(--chrome-h,64px) + clamp(64px,10vh,110px)) 0 clamp(40px,6vw,64px);
}
.page-head .sec-title{font-size:clamp(30px,4vw,48px)}
.page-lede{margin-top:20px;font-size:14.5px;color:var(--muted);max-width:var(--measure)}
.page-faq,.page-reviews{padding-bottom:clamp(88px,11vw,150px)}
.page-reviews .review-list{border-top:1px solid var(--ink);margin-top:clamp(36px,5vw,56px)}
article.review{
  padding:30px 0;
  border-bottom:1px solid var(--line);
}
.review-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 18px;
  margin-bottom:12px;
}
.review-author{
  font-family:var(--mincho);
  font-weight:600;
  font-size:16.5px;
  letter-spacing:.08em;
}
.review-date{font-size:12px;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}
.review-text{font-size:14.5px;line-height:1.95;white-space:pre-line}
.page-band{
  border-top:1px solid var(--ink);
  margin-top:clamp(56px,8vw,88px);
  padding-top:clamp(32px,4vw,48px);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
}
.page-band p{font-family:var(--mincho);font-size:17px;letter-spacing:.08em}
.page-band .tel-big{
  font-family:var(--serif-en);
  font-weight:600;
  font-size:clamp(24px,3vw,30px);
  letter-spacing:.06em;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--ink);
  padding-bottom:4px;
}

/* ============================================================
   footer — ページの第二の顔。#18181b の全面
   ============================================================ */
.site-footer{
  background:var(--ink);
  color:#f4f4f5;
  padding:clamp(64px,9vw,120px) 0 26px;
  --line:rgba(244,244,245,.22);
}
.footer-wordmark{
  font-family:var(--serif-en);
  font-weight:500;
  font-size:clamp(64px,12vw,190px);
  line-height:.92;
  letter-spacing:.06em;
  margin-bottom:clamp(48px,7vw,90px);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(44px,7vw,110px);
  align-items:start;
  padding-bottom:clamp(48px,6vw,72px);
}
.footer-facts>div{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.footer-facts dt{
  font-size:10.5px;
  letter-spacing:.28em;
  color:rgba(244,244,245,.62);
  padding-top:6px;
}
.footer-facts dd{
  font-size:13.5px;
  line-height:1.9;
  color:rgba(244,244,245,.92);
  font-variant-numeric:tabular-nums;
}
.footer-tel{
  display:inline-block;
  font-family:var(--serif-en);
  font-weight:600;
  font-size:clamp(26px,2.4vw,30px);
  letter-spacing:.06em;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(244,244,245,.5);
  padding-bottom:4px;
  transition:border-color .3s ease;
}
.footer-tel:hover{border-color:#f4f4f5}
.footer-contact-note{
  margin-top:16px;
  font-size:13px;
  color:rgba(244,244,245,.72);
}
.footer-cta{
  display:inline-block;
  margin-top:26px;
  padding:17px 42px;
  min-height:44px;
  border:1px solid #f4f4f5;
  font-size:13px;
  letter-spacing:.24em;
  text-indent:.24em;
  text-decoration:none;
  transition:background .35s ease,color .35s ease;
}
.footer-cta:hover{background:#f4f4f5;color:var(--ink)}
.footer-colophon{
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
}
.footer-colophon small{
  font-size:10px;
  letter-spacing:.24em;
  color:rgba(244,244,245,.55);
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:900px){
  .story-grid,
  .menu-grid,
  .access-grid{grid-template-columns:1fr}
  .story-fig{max-width:560px}
  .review-wall{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .review-wall .review-card:nth-child(2),
  .review-wall .review-card:nth-child(3){margin-top:0}
  .footer-grid{grid-template-columns:1fr}
  .footer-wordmark{font-size:clamp(58px,14.5vw,120px)}
  .sec{padding-block:clamp(72px,13vw,110px)}
}
@media (max-width:600px){
  body{font-size:15px}
  .hero-plate img{aspect-ratio:4/3}
  .fact-table>div{grid-template-columns:88px 1fr;gap:14px}
  .faq-item .faq-a{padding-left:0}
  .footer-facts>div{grid-template-columns:80px 1fr;gap:14px}
}

/* print — アクセス欄をそのまま紙に */
@media print{
  .site-chrome,.hero-shader,.arch-band,.footer-cta{display:none}
  body{background:#fff;color:#18181b}
  .site-footer{background:#fff;color:#18181b}
  .site-footer *{color:#18181b}
}