/* ============================================================
   月島もんじゃ もんろう はなれ — site design
   地：クリームの和紙 / 字：墨茶 / 一点：テラコッタ
   ============================================================ */

:root{
  --bg:#efe7db;
  --surface:#e6dccb;
  --ink:#241c14;
  --muted:#5c4c3c;
  --accent:#7a3b2e;
  --accent-ink:#7a3b2e;
  --on-accent:#f6efe3;
  /* 拡張トーン（八つの getToken には触れない） */
  --band:#1b130c;               /* 暗い鉄板 */
  --accent-bright:#c98a5f;      /* 暗い地の上のテラコッタ（可読性のため明るめ） */
  --hairline:rgba(36,28,20,.24);
  --hairline-dark:rgba(239,231,219,.3);
  --chrome-h:64px;
  --wrap:1120px;
  --gutter:clamp(20px,4vw,48px);
  --font-body:'Noto Sans JP',"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-display:'Shippori Mincho B1','Noto Serif JP',"Hiragino Mincho ProN",serif;
  --font-mono:'IBM Plex Mono',ui-monospace,"SFMono-Regular",monospace;
  --ewb-panel-display:block;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.9;
  letter-spacing:.05em;
}
img{max-width:100%;display:block}
iframe{max-width:100%}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.35;
  letter-spacing:.1em;
  font-feature-settings:"palt" 1;
  margin:0;
}
h2{font-size:clamp(28px,3.2vw,42px)}
h3{font-size:clamp(19px,1.8vw,22px);letter-spacing:.08em}
p{margin:0}
a{color:inherit}
ul,ol,dl,figure,blockquote{margin:0;padding:0}
li{list-style:none}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.mono{font-family:var(--font-mono);letter-spacing:.02em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:640px}
.section{padding-block:clamp(76px,10vw,140px)}
.band{background:var(--surface)}

.sec-head{
  display:flex;align-items:baseline;gap:18px;
  margin-bottom:clamp(28px,4vw,52px);
}
.sec-num{
  font-family:var(--font-mono);
  font-size:13px;letter-spacing:.14em;
  color:var(--accent-ink);
  flex:none;
}
.sec-head h2{flex:none}
.sec-head::after{content:"";flex:1;height:1px;background:var(--hairline);transform:translateY(-6px)}
.section-lead{max-width:640px;color:var(--ink);margin-bottom:clamp(28px,4vw,48px)}

@media (max-width:760px){
  .sec-head{flex-wrap:wrap;row-gap:6px}
  .sec-head h2{flex:1 1 100%;min-width:0;font-size:clamp(24px,6.6vw,30px)}
  .sec-head::after{display:none}
}

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:10px 32px;
  background:var(--accent);color:var(--on-accent);
  border:1px solid var(--accent);
  font-family:var(--font-body);font-size:15px;font-weight:500;
  letter-spacing:.16em;text-indent:.16em;
  text-decoration:none;
  transition:background-color .3s cubic-bezier(.22,1,.36,1),color .3s;
}
.btn:hover{background:#5f2e22}
.btn-cream{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.btn-cream:hover{background:#fbf6ec;color:var(--ink)}
.link-line{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--accent-ink);text-decoration:none;font-size:15px;letter-spacing:.08em;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
  transition:opacity .3s;
}
.link-line:hover{opacity:.7}
.link-line::after{content:"→";font-family:var(--font-mono);margin-left:.6em;letter-spacing:0}

/* 縦書きの註 */
.v-note{
  writing-mode:vertical-rl;
  font-family:var(--font-display);font-weight:600;
  font-size:15px;letter-spacing:.28em;
  color:var(--muted);
  line-height:1.6;
}

/* ============================================================
   header — 透過でヒーローに重ね、スクロールでクリームの帯に
   ============================================================ */
.ewb-chrome-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:clamp(16px,2.5vw,36px);
  height:var(--chrome-h);
  padding-inline:var(--gutter);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .4s cubic-bezier(.22,1,.36,1),border-color .4s;
}
.ewb-chrome-nav[data-scrolled="true"]{
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom-color:var(--hairline);
}
.ewb-brand{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;flex:none;white-space:nowrap;
}
.brand-logo{width:32px;height:32px;object-fit:cover;border-radius:2px}
.brand-text{
  font-family:var(--font-display);font-weight:600;
  font-size:15px;letter-spacing:.12em;white-space:nowrap;
}
.ewb-navpanel{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);margin-left:auto}
.ewb-navpanel>a{
  font-size:14px;letter-spacing:.1em;text-decoration:none;
  white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .3s;
}
.ewb-navpanel>a:hover{border-bottom-color:var(--accent)}
.panel-actions{display:none;flex-direction:column;gap:10px}
.panel-tel{font-size:18px;color:var(--ink);text-decoration:none}
.chrome-actions{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex:none;padding-inline:0}
.chrome-tel{
  font-size:14px;color:var(--ink);text-decoration:none;
  letter-spacing:.04em;min-height:44px;display:inline-flex;align-items:center;
}
.btn-reserve{min-height:42px;padding:8px 22px;font-size:13.5px}
.ewb-navtoggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:7px;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
}
.ewb-navtoggle span{display:block;width:24px;height:1.5px;background:var(--ink)}

@media (max-width:900px){
  .ewb-navtoggle{display:flex}
  .ewb-navpanel{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    margin-left:0;
    background:var(--bg);
    border-bottom:1px solid var(--hairline);
    padding:8px var(--gutter) 28px;
  }
  .ewb-chrome-nav[data-open="true"]{background:var(--bg);border-bottom-color:var(--hairline)}
  .ewb-chrome-nav[data-open="true"] .ewb-navpanel{display:var(--ewb-panel-display,block)}
  .ewb-navpanel>a{min-height:52px;border-bottom:1px solid var(--hairline);font-size:15px}
  .ewb-navpanel>a:last-of-type{border-bottom:0}
  .panel-actions{display:flex;padding-top:16px;gap:14px}
  .panel-actions .btn{width:100%}
}
@media (max-width:1240px){
  .chrome-tel{display:none}
  .brand-text{font-size:13.5px}
  .ewb-navpanel>a{font-size:13px}
  .ewb-chrome-nav{gap:20px}
  .ewb-navpanel{gap:clamp(14px,2vw,22px)}
  .btn-reserve{padding:8px 16px}
}
@media (max-width:700px){
  .brand-logo{display:none}
  .brand-text{font-size:12.5px;letter-spacing:.04em}
  .btn-reserve{display:none}
  .chrome-tel{font-size:12px}
}

/* ============================================================
   hero — 右に縦書きの看板、中央よりに4:5の一枚
   ============================================================ */
.hero{padding-block:0}
.hero-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,3vw,40px);
  padding-top:calc(var(--chrome-h) + clamp(24px,4vh,44px));
  padding-bottom:clamp(48px,7vh,88px);
  align-items:start;
}
.hero-fig{
  grid-column:2/7;
  grid-row:1;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--surface);
}
.hero-fig img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-side{
  grid-column:8/13;
  grid-row:1/3;
  writing-mode:vertical-rl;
  display:flex;align-items:flex-start;
  padding-top:clamp(8px,2vh,24px);
}
.hero-title{
  font-size:clamp(30px,5.5vw,78px);
  line-height:1.22;
  letter-spacing:.12em;
  white-space:nowrap;
}
.hero-title-line{display:block}
.hero-sub{
  margin-block-start:clamp(18px,2.5vw,36px);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(15px,1.5vw,21px);
  letter-spacing:.3em;
  color:var(--muted);
  white-space:nowrap;
}
.hero-lead{grid-column:2/7;grid-row:2;margin-top:clamp(24px,3vh,40px)}
.hero-eyebrow{
  font-size:14px;letter-spacing:.18em;color:var(--muted);
  margin-bottom:14px;
}
@media (min-width:761px){
  .hero-side{flex-direction:column}
}
.hero-lede{font-size:15px;margin-bottom:24px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-bottom:18px}
.hero-hours{
  font-family:var(--font-mono);
  font-size:13px;letter-spacing:.04em;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:4px 18px;
}

@media (max-width:760px){
  .hero-grid{
    grid-template-columns:repeat(12,1fr);
    padding-top:calc(var(--chrome-h) + 28px);
  }
  .hero-fig{grid-column:1/8;grid-row:1}
  .hero-side{grid-column:8/13;grid-row:1;justify-content:flex-end}
  .hero-title{font-size:clamp(26px,8vw,34px);line-height:1.3}
  .hero-sub{font-size:13px;margin-block-start:14px}
  .hero-lead{grid-column:1/13;grid-row:2}
}

/* ============================================================
   01 about — 7カラムの本文、余白に縦書きの註
   ============================================================ */
.about-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,3vw,40px);
  row-gap:clamp(28px,4vw,44px);
}
.about-body{grid-column:1/8}
.about-body p+p{margin-top:1.6em}
.about-fig{
  grid-column:8/13;
  align-self:center;
  position:relative;
  padding-left:44px;
}
.about-fig .v-note{position:absolute;left:0;top:0}
.about-fig .ph{aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.about-fig img{width:100%;height:100%;object-fit:cover}
.figcap{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.7}
.about-points{grid-column:1/8}
.points li{
  display:flex;gap:18px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--hairline);
  font-size:15px;
}
.points li:last-child{border-bottom:1px solid var(--hairline)}
.points .num{font-family:var(--font-mono);font-size:12.5px;color:var(--accent-ink);flex:none}

@media (max-width:760px){
  .about-body,.about-points{grid-column:1/13}
  .about-fig{grid-column:1/13;padding-left:0;margin-top:8px}
  .about-fig .v-note{display:none}
}

/* ============================================================
   02 もんじゃのリング — 暗い鉄板の帯に、スクロールで描く索引
   ============================================================ */
.ring-band{
  background:var(--band);
  color:var(--bg);
  padding-block:clamp(80px,11vw,150px);
  position:relative;
  overflow:hidden;
}
.ring-haze{position:absolute;inset:0;pointer-events:none}
.ring-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.ring-left{position:relative;padding-left:52px}
.ring-note{position:absolute;left:0;top:4px;color:color-mix(in srgb,var(--bg) 72%,transparent)}
.ring-band .sec-head::after{background:var(--hairline-dark)}
.ring-band .sec-num{color:var(--accent-bright)}
.ring-lead{font-size:15px;line-height:2;max-width:30em;color:color-mix(in srgb,var(--bg) 86%,transparent);margin-top:20px}
.ring-index{
  margin-top:26px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;
  color:color-mix(in srgb,var(--bg) 62%,transparent);
}
.ring-stage{
  position:relative;
  width:min(560px,100%);
  aspect-ratio:1;
  margin-inline:auto;
}
.ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-track{
  fill:none;stroke:var(--hairline-dark);stroke-width:1;
  stroke-dasharray:2 7;
}
.ring-line{
  fill:none;stroke:var(--accent-bright);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1470;
  stroke-dashoffset:620; /* 既定：七割ほど描けたところ。script が scrub で 0 まで進める */
  transform:rotate(-90deg);
  transform-origin:50% 50%;
}
.ring-photo{
  position:absolute;inset:11%;
  border-radius:50%;overflow:hidden;
  background:#0f0a06;
}
.ring-photo img{width:100%;height:100%;object-fit:cover}
.ring-cats li{
  position:absolute;
  writing-mode:vertical-rl;
  transform:translate(-50%,-50%);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(14px,1.6vw,19px);
  letter-spacing:.22em;
  color:color-mix(in srgb,var(--bg) 58%,transparent);
  transition:color .5s,font-size .5s;
  white-space:nowrap;
}
.ring-cats li.is-on{color:var(--accent-bright);font-size:clamp(17px,2vw,23px)}
.ring-cats li:nth-child(1){left:50%;top:3%}
.ring-cats li:nth-child(2){left:94%;top:36%}
.ring-cats li:nth-child(3){left:78%;top:88.5%}
.ring-cats li:nth-child(4){left:22%;top:88.5%}
.ring-cats li:nth-child(5){left:6%;top:36%}

@media (max-width:760px){
  .ring-grid{grid-template-columns:1fr}
  .ring-left{padding-left:0}
  .ring-note{position:static;writing-mode:horizontal-tb;display:block;margin-bottom:18px;letter-spacing:.18em}
  .ring-stage{width:min(88vw,440px)}
}

/* ============================================================
   一枚写真の帯
   ============================================================ */
.photo-band{padding-block:clamp(72px,9vw,128px)}
.photo-band .ph{overflow:hidden;background:var(--surface)}
.photo-band img{width:100%;height:min(68vh,620px);object-fit:cover;object-position:center}

/* ============================================================
   03 コース・宴会・貸切
   ============================================================ */
.party-grid{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(36px,5vw,80px);
  align-items:start;
}
.party-body p+p{margin-top:1.6em}
.party-body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:4px}
.party-side{border-left:1px solid var(--hairline);padding-left:clamp(24px,3vw,40px)}
.party-prices{display:flex;gap:clamp(24px,3vw,44px);flex-wrap:wrap;margin-bottom:22px}
.price{display:flex;flex-direction:column;gap:2px}
.price .price-label{font-size:12.5px;letter-spacing:.14em;color:var(--muted)}
.price b{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(30px,3.4vw,46px);
  color:var(--accent-ink);letter-spacing:0;line-height:1.3;
}
.price b i{font-style:normal;font-family:var(--font-body);font-size:.45em;letter-spacing:.1em;margin-left:2px}
.price .price-tax{font-size:12px;color:var(--muted);font-family:var(--font-mono)}
.party-facts{margin-top:8px}
.party-facts li{
  padding:11px 0;border-top:1px solid var(--hairline);
  font-size:14.5px;display:flex;gap:14px;align-items:baseline;
}
.party-facts li:last-child{border-bottom:1px solid var(--hairline)}
.party-facts .num{font-family:var(--font-mono);font-size:12px;color:var(--accent-ink)}
.party-side .link-line{margin-top:22px}

@media (max-width:760px){
  .party-grid{grid-template-columns:1fr}
  .party-side{border-left:0;padding-left:0;border-top:1px solid var(--hairline);padding-top:32px}
}

/* ============================================================
   04 ギャラリー — 非対称に組む10枚
   ============================================================ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px);
}
.gallery-grid figure{margin:0}
.gallery-grid .ph{overflow:hidden;background:var(--surface)}
.gallery-grid img{width:100%;height:100%;object-fit:cover}
figure.g1 .ph{grid-column:1/6;aspect-ratio:4/5}
figure.g1{grid-column:1/6}
figure.g2{grid-column:6/13}
figure.g2 .ph{aspect-ratio:3/2}
figure.g3{grid-column:1/9}
figure.g3 .ph{aspect-ratio:16/10}
figure.g4{grid-column:9/13}
figure.g4 .ph{aspect-ratio:3/4}
figure.g5{grid-column:1/6}
figure.g5 .ph{aspect-ratio:1}
figure.g6{grid-column:6/13}
figure.g6 .ph{aspect-ratio:16/9}
figure.g7{grid-column:1/8}
figure.g7 .ph{aspect-ratio:4/3}
figure.g8{grid-column:8/13;margin-top:clamp(0px,4vw,56px)}
figure.g8 .ph{aspect-ratio:4/3}
figure.g9{grid-column:1/8}
figure.g9 .ph{aspect-ratio:4/3}
figure.g10{grid-column:8/13;margin-top:clamp(0px,4vw,56px)}
figure.g10 .ph{aspect-ratio:4/5}

@media (max-width:680px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .gallery-grid figure{grid-column:auto/span 1 !important;margin-top:0 !important}
  .gallery-grid figure .ph{aspect-ratio:1 !important}
  figure.g2,figure.g3,figure.g6{grid-column:auto/span 2 !important}
  figure.g2 .ph,figure.g3 .ph,figure.g6 .ph{aspect-ratio:16/10 !important}
}

/* ============================================================
   05 口コミティーザー / 口コミ部品（reviews.html 共通）
   ============================================================ */
.rating-block{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.rating-num{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(56px,7vw,88px);line-height:1;
  color:var(--accent-ink);letter-spacing:0;
}
.rating-text{max-width:34em;font-size:15px}
.ewb-reviews{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(28px,4vw,48px);
}
.ewb-review{border-top:1px solid var(--hairline);padding-top:18px}
.ewb-review-stars{
  color:var(--accent-ink);font-size:13px;letter-spacing:.24em;
  margin-bottom:10px;
}
.ewb-review-text{margin-bottom:14px}
.ewb-review-text p{font-size:14.5px;line-height:1.95;white-space:pre-line}
.ewb-review-meta{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;
}
.teaser-link{margin-top:clamp(30px,4vw,44px)}

/* 口コミページの横流し一幕（reviews.html のみ script が有効化するフック） */
.flow-clip{overflow:hidden}
.ewb-reviews.reviews-flow{
  display:flex;gap:clamp(24px,3vw,40px);
  overflow:visible;
  padding-bottom:16px;
  grid-template-columns:none;
}
.ewb-reviews.reviews-flow .ewb-review{flex:0 0 min(480px,82vw);scroll-snap-align:start}
.ewb-review .ewb-review-stars::after{font-family:var(--font-mono);letter-spacing:.04em}
.ewb-review[data-rating="5"] .ewb-review-stars::after{content:" 5/5"}
.ewb-review[data-rating="4"] .ewb-review-stars::after{content:" 4/5"}
@media (prefers-reduced-motion:reduce){
  .ewb-reviews.reviews-flow{display:grid;overflow:visible}
  .ewb-reviews.reviews-flow .ewb-review{flex:none}
}

/* ============================================================
   06 営業時間・アクセス
   ============================================================ */
.info-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.info-col h3{margin-bottom:12px}
.info-col p{font-size:15px}
.info-col p+p{margin-top:.9em}
.info-col .address{font-size:15px}
.info-col .link-line{margin-top:16px;font-size:14px}
.map-embed{
  width:100%;aspect-ratio:4/3;border:0;background:var(--surface);
}
@media (max-width:760px){
  .info-grid{grid-template-columns:1fr}
  .map-embed{aspect-ratio:4/3}
}

/* 営業時間 dl（フッター・情報節 共通） */
.ewb-hours{display:grid;gap:0}
.ewb-hours-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--hairline);
}
.ewb-hours dt{font-size:14px;letter-spacing:.08em}
.ewb-hours dd{
  margin:0;font-family:var(--font-mono);font-size:13.5px;letter-spacing:.02em;
  color:var(--accent-ink);
}
.ewb-hours .is-closed dd{color:var(--muted)}

/* ============================================================
   07 FAQ（ティーザー・faq.html 共通）
   ============================================================ */
.ewb-faq{border-top:1px solid var(--hairline)}
.ewb-faq-item{border-bottom:1px solid var(--hairline)}
.ewb-faq-q{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:20px 0;min-height:44px;
  font-weight:500;font-size:15.5px;letter-spacing:.04em;
  font-family:var(--font-body);
}
.ewb-faq-q::after{
  content:"+";font-family:var(--font-mono);font-weight:400;
  color:var(--accent-ink);font-size:18px;flex:none;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.ewb-faq-item[open] .ewb-faq-q::after{transform:rotate(45deg)}
.ewb-faq-a{padding:0 0 22px}
.ewb-faq-a p{font-size:14.5px;color:var(--muted);max-width:38em}
/* ティーザーでは答えを最初から見せる（script が無くても開く） */
.faq-teaser details:not([open])::details-content{content-visibility:visible;display:block}
.faq-teaser .ewb-faq-q{pointer-events:none}
.faq-teaser .ewb-faq-q::after{content:none}

/* ============================================================
   08 Instagram の投稿 / 09 SNSリンク
   ============================================================ */
.social-posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:clamp(24px,3vw,40px);
  max-width:760px;
}
.social-post{
  background:var(--bg);
  border:1px solid var(--hairline);
  padding:14px;
  display:flex;flex-direction:column;gap:12px;
}
.social-post>img{
  width:100%;aspect-ratio:1;object-fit:cover;
  background:var(--surface);
}
.social-post p{
  font-size:13.5px;line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.social-post time{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.social-post a{
  font-size:12.5px;color:var(--accent-ink);text-decoration:none;
  min-height:32px;display:inline-flex;align-items:center;gap:6px;
}
.social-post a::after{content:"→";font-family:var(--font-mono)}
@media (max-width:680px){
  .social-posts-grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    max-width:none;gap:16px;padding-bottom:8px;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
  .social-post{flex:0 0 76%;scroll-snap-align:start}
}

.ewb-social-links{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px}
.ewb-social-link{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14.5px;letter-spacing:.1em;text-decoration:none;
  color:var(--accent-ink);border-bottom:1px solid var(--accent);
}
.ewb-social-link::after{content:"→";font-family:var(--font-mono);margin-left:.6em}
.sns-note{font-size:12px;color:var(--muted);margin-top:10px}

/* ============================================================
   footer — 墨茶の一面、右に縦書きの屋号
   ============================================================ */
.site-footer{
  background:var(--ink);color:var(--bg);
  padding-block:clamp(64px,8vw,104px) 28px;
  position:relative;overflow:hidden;
}
.footer-reserve{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid var(--hairline-dark);
}
.footer-close{max-width:32em;font-size:15px}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(32px,5vw,80px);
  padding-top:clamp(40px,5vw,64px);
  align-items:start;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);
}
.f-title{
  font-size:13px;letter-spacing:.2em;color:var(--accent-bright);
  font-family:var(--font-body);font-weight:500;margin-bottom:14px;
}
.f-col p{font-size:13.5px;line-height:1.9}
.f-col .tel-link{
  font-family:var(--font-mono);font-size:19px;letter-spacing:.03em;
  color:var(--bg);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
}
.f-col .tel-link:hover{color:var(--accent-bright)}
.f-col .f-note{font-size:12px;color:color-mix(in srgb,var(--bg) 62%,transparent);margin-top:6px}
.f-col .map-link{
  font-size:12.5px;color:color-mix(in srgb,var(--bg) 78%,transparent);
  text-decoration:none;border-bottom:1px solid var(--hairline-dark);
  display:inline-flex;align-items:center;min-height:36px;
}
.site-footer .ewb-hours-row{border-bottom-color:var(--hairline-dark)}
.site-footer .ewb-hours dt{color:color-mix(in srgb,var(--bg) 82%,transparent)}
.site-footer .ewb-hours dd{color:var(--accent-bright)}
.footer-name{
  writing-mode:vertical-rl;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(44px,6.4vw,92px);
  letter-spacing:.16em;line-height:1.1;
  color:var(--accent-bright);
  justify-self:end;
  max-height:640px;
}
.footer-base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  margin-top:clamp(40px,5vw,64px);
  padding-top:22px;border-top:1px solid var(--hairline-dark);
}
.footer-base,.footer-base .ewb-social-link{font-size:12px}
.footer-copy{font-family:var(--font-mono);letter-spacing:.06em;color:color-mix(in srgb,var(--bg) 66%,transparent)}
.site-footer .ewb-social-links{margin-top:0;gap:4px 20px}
.site-footer .ewb-social-link{color:var(--bg);border-bottom-color:var(--hairline-dark);min-height:36px}

@media (max-width:760px){
  .footer-cols{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-name{writing-mode:horizontal-tb;font-size:clamp(34px,9vw,48px);max-height:none;justify-self:start}
}
@media (max-width:460px){
  .footer-cols{grid-template-columns:1fr}
}

/* ============================================================
   sub pages — faq.html / reviews.html
   ============================================================ */
.page-head{
  padding-top:calc(var(--chrome-h) + clamp(56px,9vw,110px));
  padding-bottom:clamp(36px,5vw,64px);
}
.page-head h1{font-size:clamp(28px,4vw,46px)}
.page-eyebrow{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.16em;
  color:var(--accent-ink);display:block;margin-bottom:16px;
}
.page-lead{max-width:640px;margin-top:20px;color:var(--muted);font-size:15px}
.sub-section{padding-block:clamp(56px,8vw,104px)}
.sub-cta{
  background:var(--surface);
  padding-block:clamp(56px,7vw,88px);
}
.sub-cta-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.sub-cta p{max-width:32em;font-size:15px}
.sub-cta .btn{flex:none}

/* ============================================================
   motion の caret
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ============================================================
   faq.html — 本文カラムの幅（.measure より少し広く）
   ============================================================ */
.measure-wide{max-width:820px}

/* ============================================================
   reviews.html — 口コミページ
   ============================================================ */
.reviews-flow-note{
  display:none;
  margin-top:20px;
  font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;
  color:var(--muted);
}
html.motion-on .reviews-flow-note{display:block}
.reviews-page .ewb-reviews{margin-top:0}