:root{
  --bg:        #0c0b0d;
  --bg-2:      #131117;
  --bg-3:      #1a171d;
  --line:      rgba(var(--line-rgb),.18);
  --amber:     #d9a441;
  --amber-lt:  #f0c982;
  --rouge:     #c8395c;
  --text:      #ece7e0;
  --muted:     #9d958c;
  --serif-en:  'Cormorant Garamond', 'Times New Roman', serif;
  --serif-jp:  'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans-jp:   'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --pad:       clamp(20px, 5vw, 64px);
  /* ここから下は、ブランドごとに入れ替える色の素。値はバーのもの */
  --bg-rgb:     12,11,13;
  --accent-rgb: 217,164,65;
  --line-rgb:   224,196,140;
  --rouge-rgb:  200,57,92;
  --rouge-lt:   #f0b9c8;
  --text-hi:    #e6dfd4;
  --text-2:     #ddd5c9;
  --text-soft:  #cdc5ba;
  --faint:      #6f6862;
  --on-accent:  #17130c;
  --ok:         #7ec47c;
  --ok-lt:      #9fd89d;
  --ok-rgb:     126,196,124;
  --grain:      .30;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans-jp);
  font-size:15px;
  line-height:2;
  letter-spacing:.06em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ざらつき（フィルムグレイン） */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ───────── ヘッダー ───────── */
.hd{
  /* 引き出しメニュー(110)より手前。閉じるボタンを常に押せるようにする */
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--pad);
  transition:background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.hd.solid{
  background:rgba(var(--bg-rgb),.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:12px var(--pad);
  border-bottom-color:var(--line);
}
.hd__logo{
  font-family:var(--serif-en);font-size:19px;letter-spacing:.34em;
  color:var(--amber-lt);white-space:nowrap;position:relative;z-index:2;
}

/* 読み進み具合を示す細い線（ヘッダーの下端） */
.hd__bar{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber),var(--amber-lt));
  transition:transform .1s linear;pointer-events:none;
}

/* ───────── パソコンのナビ ───────── */
.hd__nav{display:flex;gap:clamp(16px,2.4vw,30px);align-items:center;}
.hd__nav a{
  font-size:11.5px;letter-spacing:.18em;color:var(--muted);
  position:relative;padding:6px 0;transition:color .3s;white-space:nowrap;
}
.hd__nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.hd__nav a:hover{color:var(--amber-lt);}
.hd__nav a:hover::after{transform:scaleX(1);}
/* いま見ている場所 */
.hd__nav a.here{color:var(--amber-lt);}
.hd__nav a.here::after{transform:scaleX(1);}
/* ブランド名（カフェ・ボニー、銀アトリエ・ボニー…）は長いので、
   横に並べきれる幅ぎりぎりのところでは、間隔と字間を詰めて余白を作る */
@media(min-width:1341px) and (max-width:1560px){
  .hd__nav{gap:18px;}
  .hd__nav a{letter-spacing:.1em;}
}

.hd__cta{
  font-size:11.5px;letter-spacing:.2em;padding:10px 22px;white-space:nowrap;
  border:1px solid var(--amber);color:var(--amber-lt);border-radius:2px;
  transition:background .35s, color .35s;
}
.hd__cta:hover{background:var(--amber);color:var(--on-accent);}

/* ───────── ハンバーガーボタン ───────── */
.burger{
  display:none;position:relative;z-index:120;
  width:46px;height:46px;padding:0;margin:-8px -10px -8px 0;
  background:none;border:none;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span{
  position:absolute;left:11px;width:24px;height:1.5px;background:var(--text);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), opacity .25s, background .3s;
}
.burger span:nth-child(1){transform:translateY(-7px);}
.burger span:nth-child(3){transform:translateY(7px);}
.burger[aria-expanded="true"] span{background:var(--amber-lt);}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0);}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg);}

/* ───────── スマホの引き出しメニュー ───────── */
.drawer{
  position:fixed;inset:0;z-index:110;
  background:rgba(var(--bg-rgb),.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 70px) var(--pad)
          calc(env(safe-area-inset-bottom,0px) + 22px);
  overflow:hidden;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.3,1), visibility .4s;
}
.drawer.open{opacity:1;visibility:visible;transform:none;}
/* 項目が増えても下の連絡先が隠れないよう、スクロールするのはここだけ */
.drawer__nav{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.drawer__nav li{
  border-bottom:1px solid rgba(var(--line-rgb),.12);
  opacity:0;transform:translateY(14px);
}
.drawer.open .drawer__nav li{
  opacity:1;transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.drawer__nav a{
  display:flex;align-items:baseline;gap:16px;padding:14px 4px;
  font-family:var(--serif-jp);font-size:17px;letter-spacing:.1em;color:var(--text);
}
.drawer__nav a small{
  font-family:var(--serif-en);font-size:10.5px;letter-spacing:.22em;
  color:var(--amber);min-width:2.4em;font-variant-numeric:lining-nums;
}
.drawer__nav a .ar{margin-left:auto;color:var(--amber);opacity:.5;font-size:13px;}
.drawer__nav a.here{color:var(--amber-lt);}
.drawer__nav a.here small{color:var(--amber-lt);}
.drawer__nav a.here .ar{opacity:1;}

.drawer__foot{padding-top:22px;flex:0 0 auto;}
.drawer__hours{
  border:1px solid var(--line);border-radius:3px;padding:14px 16px;margin-bottom:18px;
  font-size:12px;color:var(--muted);line-height:1.9;
}
.drawer__hours b{color:var(--amber-lt);font-family:var(--serif-en);letter-spacing:.06em;
  font-variant-numeric:lining-nums;font-weight:400;}
.drawer__act{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.drawer__act a{
  text-align:center;padding:14px 8px;border-radius:3px;
  font-size:12.5px;letter-spacing:.14em;border:1px solid var(--amber);color:var(--amber-lt);
}
.drawer__act a.solid{background:var(--amber);color:var(--on-accent);font-weight:500;}
.drawer__sns{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.drawer__sns a{font-size:11px;letter-spacing:.14em;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:3px;}

/* 項目が増えたので、横並びは広い画面だけにして早めに引き出しへ渡す */
@media(max-width:1340px){
  .hd__nav{display:none;}
  .burger{display:flex;}
}
@media(max-width:960px){
  .hd__cta{display:none;}
  .hd__logo{font-size:15px;letter-spacing:.22em;}
}
/* 引き出しを消すのは、横並びメニューが出ている幅だけ。
   ハンバーガーの境目（上の 1340px）と必ず同じ数字にすること。
   ここがずれていると、ボタンは出ているのに開いても何も見えない。 */
@media(min-width:1341px){
  .drawer{display:none;}
}

/* メニューを開いているあいだは背面を固定する */
body.locked{overflow:hidden;}

/* ───────── トップに戻る ───────── */
.totop{
  position:fixed;right:clamp(16px,3vw,28px);z-index:97;
  bottom:clamp(20px,3vw,32px);
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--bg-rgb),.82);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--amber-lt);cursor:pointer;padding:0;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s, transform .4s, visibility .4s, background .3s, border-color .3s;
}
.totop.show{opacity:1;visibility:visible;transform:none;}
.totop:hover{background:var(--amber);border-color:var(--amber);color:var(--on-accent);}
.totop svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;}
/* 画面下の固定ボタンと重ならないようにする */
@media(max-width:860px){
  .totop{bottom:calc(76px + env(safe-area-inset-bottom,0px));}
}

/* 見出しへ飛んだとき、固定ヘッダーの下に隠れないようにする */
section[id]{scroll-margin-top:76px;}

/* ───────── ヒーロー ───────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero__bg{position:absolute;inset:0;}
.hero__bg img{width:100%;height:100%;object-fit:cover;animation:slowzoom 22s ease-out forwards;}
@keyframes slowzoom{from{transform:scale(1.10);}to{transform:scale(1);}}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(var(--bg-rgb),.08) 0%, rgba(var(--bg-rgb),.52) 60%, rgba(var(--bg-rgb),.86) 100%),
    linear-gradient(to bottom, rgba(var(--bg-rgb),.62) 0%, transparent 24%, transparent 58%, var(--bg) 100%);
}
.hero__in{position:relative;z-index:2;text-align:center;padding:0 24px;}
.hero__sub{
  font-size:10.5px;letter-spacing:.46em;color:var(--amber);margin:0 0 26px;
  opacity:0;animation:fadeUp 1.2s .3s ease forwards;
}
.hero__ttl{
  font-family:var(--serif-en);font-weight:300;
  font-size:clamp(44px,10.5vw,116px);line-height:1;letter-spacing:.1em;
  margin:0;color:#fff;text-shadow:0 4px 46px rgba(0,0,0,.6);
  opacity:0;animation:fadeUp 1.5s .55s ease forwards;
}
.hero__rule{
  width:52px;height:1px;background:var(--amber);margin:32px auto;
  opacity:0;animation:fadeUp 1.2s 1s ease forwards;
}
.hero__cap{
  font-family:var(--serif-jp);font-size:clamp(13px,3.4vw,17px);letter-spacing:.26em;
  color:#e8e0d4;margin:0;opacity:0;animation:fadeUp 1.3s 1.15s ease forwards;
}
.hero__price{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:40px 0 0;
  opacity:0;animation:fadeUp 1.3s 1.45s ease forwards;
}
.chip{
  border:1px solid var(--line);background:rgba(var(--bg-rgb),.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:9px 20px;border-radius:999px;font-size:12px;letter-spacing:.14em;color:var(--text-hi);
}
.chip b{font-family:var(--serif-en);font-size:17px;font-weight:500;color:var(--amber-lt);letter-spacing:.04em;margin:0 2px;font-variant-numeric:lining-nums;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

.scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:9px;letter-spacing:.34em;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;animation:fadeUp 1s 2s ease forwards;
}
.scroll span{width:1px;height:52px;background:linear-gradient(var(--amber),transparent);}

/* ───────── 共通セクション ───────── */
.sec{padding:clamp(84px,13vw,152px) var(--pad);position:relative;}
.sec--alt{background:var(--bg-2);}
.wrap{max-width:1120px;margin:0 auto;}
.eyebrow{
  font-family:var(--serif-en);font-size:11px;letter-spacing:.42em;
  color:var(--amber);margin:0 0 16px;text-transform:uppercase;
}
.h2{
  font-family:var(--serif-jp);font-weight:500;
  font-size:clamp(24px,5.2vw,38px);line-height:1.6;letter-spacing:.14em;
  margin:0 0 28px;
}
.lead{color:var(--text-soft);font-size:14.5px;line-height:2.35;max-width:34em;margin:0;}
.lead + .lead{margin-top:1.6em;}

/* 出現アニメ */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.2,.7,.3,1), transform 1.1s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1;transform:none;}
.rv[data-d="1"]{transition-delay:.14s;} .rv[data-d="2"]{transition-delay:.28s;} .rv[data-d="3"]{transition-delay:.42s;}

/* 縦書きの飾り */
.vtext{
  writing-mode:vertical-rl;font-family:var(--serif-jp);
  font-size:12px;letter-spacing:.5em;color:rgba(var(--accent-rgb),.5);
  position:absolute;top:clamp(84px,13vw,152px);right:var(--pad);
}
@media(max-width:900px){ .vtext{display:none;} }

/* ───────── コンセプト ───────── */
.concept{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;}
.concept__fig{position:relative;}
.concept__fig img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:2px;}
.concept__fig::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(var(--bg-rgb),.6);pointer-events:none;}
@media(max-width:820px){ .concept{grid-template-columns:1fr;} .concept__fig{order:-1;} .concept__fig img{aspect-ratio:3/2;} }

/* ───────── 梅酒 ───────── */
.ume{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,72px);align-items:center;}
.ume__fig > img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:2px;}
/* ラベルの寄り。銘柄が一本、名指しで見えるようにする */
.ume__det{display:flex;gap:16px;align-items:center;margin:16px 0 0;}
.ume__det img{flex:0 0 84px;width:84px;aspect-ratio:3/4;object-fit:cover;border-radius:2px;}
.ume__det figcaption{font-size:11.5px;letter-spacing:.08em;line-height:1.95;color:var(--muted);}
.ume__list{list-style:none;margin:34px 0 0;padding:0;}
.ume__list li{
  border-top:1px solid var(--line);padding:20px 0 18px;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
}
.ume__list li:last-child{border-bottom:1px solid var(--line);}
.ume__n{font-family:var(--serif-jp);font-size:16px;letter-spacing:.1em;line-height:1.7;}
.ume__n small{display:block;font-family:var(--sans-jp);font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:5px;}
.ume__t{font-size:10.5px;letter-spacing:.18em;color:var(--amber);white-space:nowrap;}
.note{font-size:12px;color:var(--muted);margin-top:22px;line-height:2;}
.linkbtn{
  display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--amber);color:var(--amber-lt);
  padding:13px 28px;border-radius:2px;font-size:12.5px;letter-spacing:.18em;
  transition:background .35s,color .35s;
}
.linkbtn span{transition:transform .35s;}
.linkbtn:hover{background:var(--amber);color:var(--on-accent);}
.linkbtn:hover span{transform:translateX(5px);}
@media(max-width:820px){ .ume{grid-template-columns:1fr;} .ume__fig > img{aspect-ratio:3/2;} }

/* ───────── 料金 ───────── */
.price{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px;}
.pcard{
  border:1px solid var(--line);background:linear-gradient(160deg, rgba(var(--accent-rgb),.07), transparent 58%);
  padding:clamp(28px,5vw,44px);border-radius:3px;text-align:center;
}
.pcard h3{font-family:var(--serif-jp);font-size:15px;font-weight:500;letter-spacing:.2em;margin:0 0 14px;color:var(--text-hi);}
.pcard .yen{font-family:var(--serif-en);font-size:clamp(38px,8vw,58px);line-height:1;color:var(--amber-lt);font-weight:300;font-variant-numeric:lining-nums;}
.pcard .yen small{font-size:.4em;letter-spacing:.16em;color:var(--muted);margin-left:6px;font-family:var(--sans-jp);}
.pcard p{font-size:12px;color:var(--muted);margin:16px 0 0;line-height:1.9;}
@media(max-width:600px){ .price{grid-template-columns:1fr;} }

/* ───────── 楽しみ方 ───────── */
.enjoy{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);margin-top:52px;}
.ecard{border-top:1px solid var(--line);padding-top:26px;}
.ecard__no{font-family:var(--serif-en);font-size:12px;letter-spacing:.3em;color:var(--amber);}
.ecard h3{font-family:var(--serif-jp);font-size:18px;font-weight:500;letter-spacing:.14em;margin:12px 0 14px;}
.ecard p{font-size:13px;color:var(--muted);line-height:2.15;margin:0;}
@media(max-width:760px){ .enjoy{grid-template-columns:1fr;gap:34px;} }

/* コミュニティ */
.comm{
  border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.06),transparent 60%);
  padding:clamp(32px,6vw,60px);text-align:center;
}
.comm .h2{margin-bottom:24px;}
.comm .lead{margin-left:auto;margin-right:auto;}
.tags{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;list-style:none;margin:32px 0 0;padding:0;}
.tags li{
  border:1px solid var(--line);border-radius:999px;padding:8px 18px;
  font-size:12px;letter-spacing:.12em;color:var(--text-2);
}

/* ───────── ギャラリー ───────── */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:52px;}
.gal figure{margin:0;overflow:hidden;border-radius:2px;}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1);}
.gal figure:hover img{transform:scale(1.06);}
.gal .w2{grid-column:span 2;}
.gal .tall{aspect-ratio:3/4;}
.gal .wide{aspect-ratio:16/9;}
.gal .pano{grid-column:1/-1;aspect-ratio:2037/804;}
@media(max-width:760px){
  .gal{grid-template-columns:repeat(2,1fr);}
  .gal .w2{grid-column:span 2;}
  .gal .pano{aspect-ratio:2/1;}
}

/* ───────── 昼の顔（ハーブティー） ───────── */
.tea{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,72px);align-items:center;}
.tea__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tea__grid img{border-radius:2px;object-fit:cover;width:100%;}
.tea__grid .a{grid-column:1/-1;aspect-ratio:16/10;}
.tea__grid .b{aspect-ratio:3/4;}
.herbs{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0 0;padding:0;list-style:none;}
.herbs li{
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;
  font-size:12px;letter-spacing:.1em;color:var(--text-2);
}
.herbs li.season{border-color:rgba(var(--rouge-rgb),.4);color:var(--rouge-lt);}
@media(max-width:820px){ .tea{grid-template-columns:1fr;} }

/* ───────── ショップ ───────── */
.shop{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,72px);align-items:center;}
.shop__fig img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:2px;}
.wsblock{border-top:1px solid var(--line);padding:24px 0 2px;margin-top:28px;}
.wsblock h3{font-family:var(--serif-jp);font-size:17px;font-weight:500;letter-spacing:.14em;margin:0 0 12px;}
.wsblock p{font-size:13.5px;color:var(--muted);line-height:2.2;margin:0;}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0;}
.tags li{border:1px solid var(--line);border-radius:999px;padding:6px 15px;font-size:11.5px;letter-spacing:.1em;color:var(--text-2);}
.fee{
  display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:20px;
  padding:11px 22px;border:1px solid rgba(var(--accent-rgb),.38);border-radius:999px;
  font-size:12.5px;letter-spacing:.12em;color:var(--text-hi);
}
.fee b{color:var(--amber-lt);font-weight:500;letter-spacing:.16em;}
@media(max-width:820px){ .shop{grid-template-columns:1fr;} .shop__fig{order:-1;} .shop__fig img{aspect-ratio:3/2;} }

/* ───────── アクセス ───────── */
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;margin-top:48px;border:1px solid var(--line);}
.info div{padding:30px 26px;background:var(--bg);}
.info dt{font-family:var(--serif-en);font-size:10.5px;letter-spacing:.32em;color:var(--amber);margin:0 0 12px;}
.info dd{margin:0;font-size:14px;line-height:2.1;}
.tbd{color:var(--faint);font-style:italic;letter-spacing:.08em;}

/* ───────── フッター ───────── */
.ft{padding:70px var(--pad) 130px;text-align:center;border-top:1px solid var(--line);background:var(--bg-2);}
.ft__logo{font-family:var(--serif-en);font-size:22px;letter-spacing:.34em;color:var(--amber-lt);margin:0 0 16px;}
.ft__c{font-size:10.5px;letter-spacing:.18em;color:var(--faint);margin:26px 0 0;}
@media(min-width:861px){ .ft{padding-bottom:70px;} }

/* ───────── スマホ固定CTA ───────── */
.fixcta{
  position:fixed;bottom:0;left:0;right:0;z-index:98;display:none;
  grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border-top:1px solid var(--line);
}
.fixcta a{
  padding:17px 8px;text-align:center;font-size:12.5px;letter-spacing:.16em;
  background:rgba(var(--bg-rgb),.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.fixcta a.main{background:var(--amber);color:var(--on-accent);font-weight:500;}
@media(max-width:860px){ .fixcta{display:grid;} }

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .rv{opacity:1;transform:none;}
  /* アニメーションで opacity:1 にしている要素を、動き無しでも必ず表示する */
  .hero__sub,.hero__ttl,.hero__rule,.hero__cap,.hero__price,.scroll{opacity:1;}
}

/* ───────── お知らせ ───────── */
.news{
  border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(160deg,rgba(var(--rouge-rgb),.08),transparent 60%);
  padding:clamp(24px,4vw,36px);
}
.news__hd{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;}
.news__hd .eyebrow{margin:0;}
.news ul{list-style:none;margin:0;padding:0;}
.news li{border-top:1px solid var(--line);padding:18px 0 16px;}
.news li:first-child{border-top:none;padding-top:8px;}
.news time{
  display:block;font-family:var(--serif-en);font-size:12px;letter-spacing:.16em;
  color:var(--amber);font-variant-numeric:lining-nums;margin-bottom:6px;
}
.news h3{font-family:var(--serif-jp);font-size:15.5px;font-weight:500;letter-spacing:.1em;margin:0 0 8px;}
.news p{font-size:13px;color:var(--muted);line-height:2.1;margin:0;}

/* ───────── はじめての方へ ───────── */
.steps{counter-reset:step;margin-top:48px;display:grid;gap:2px;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.step{
  background:var(--bg);padding:clamp(22px,4vw,32px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,32px);align-items:start;
}
.sec--alt .step{background:var(--bg-2);}
.step__no{
  font-family:var(--serif-en);font-size:26px;line-height:1;color:var(--amber);
  font-variant-numeric:lining-nums;min-width:2.2em;padding-top:3px;
}
.step h3{font-family:var(--serif-jp);font-size:17px;font-weight:500;letter-spacing:.12em;margin:0 0 10px;}
.step p{font-size:13.5px;color:var(--muted);line-height:2.2;margin:0;}
@media(max-width:600px){
  .step{grid-template-columns:1fr;gap:8px;}
  .step__no{font-size:20px;}
}

/* ───────── よくある質問 ───────── */
.faq{margin-top:44px;border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  padding:22px 44px 22px 34px;cursor:pointer;list-style:none;position:relative;
  font-family:var(--serif-jp);font-size:15.5px;letter-spacing:.08em;line-height:1.8;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--amber-lt);}
.faq summary::before{
  content:'Q';position:absolute;left:0;top:22px;
  font-family:var(--serif-en);font-size:14px;color:var(--amber);letter-spacing:.1em;
}
.faq summary::after{
  content:'';position:absolute;right:8px;top:31px;width:9px;height:9px;
  border-right:1px solid var(--amber);border-bottom:1px solid var(--amber);
  transform:rotate(45deg);transition:transform .35s;
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq__a{
  padding:0 12px 26px 34px;position:relative;
  font-size:13.5px;color:var(--muted);line-height:2.3;margin:0;
}
.faq__a::before{
  content:'A';position:absolute;left:0;top:0;
  font-family:var(--serif-en);font-size:14px;color:rgba(var(--line-rgb),.45);letter-spacing:.1em;
}

/* ───────── 貸切 ───────── */
.pv{
  margin-top:52px;border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.07),transparent 58%);
  padding:clamp(28px,5vw,48px);text-align:center;
}
.pv h3{font-family:var(--serif-jp);font-size:clamp(19px,4vw,25px);font-weight:500;
  letter-spacing:.14em;margin:14px 0 20px;}
.pv p{color:var(--text-soft);font-size:14px;line-height:2.3;margin:0 auto;max-width:32em;}
.pv .note{color:var(--muted);font-size:12.5px;margin-top:20px;}

/* ───────── 地図 ───────── */
.map{margin-top:40px;border:1px solid var(--line);border-radius:3px;overflow:hidden;line-height:0;}
.map iframe{width:100%;height:clamp(260px,42vw,400px);border:0;filter:grayscale(.35) contrast(1.08) brightness(.85);}

/* 情報グリッドの隙間は、親の背景色に関係なく罫線の色を見せる */
.info{background:var(--line);}

/* ───────── 営業時間（カフェ／バーの2本立て） ───────── */
.hours{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:3px;margin-top:40px;}
.hrow{
  background:var(--bg);padding:22px clamp(18px,3vw,30px);
  display:grid;grid-template-columns:88px 1fr auto;gap:clamp(14px,3vw,28px);align-items:center;
}
.sec--alt .hrow{background:var(--bg-2);}
.hrow__lb{
  font-family:var(--serif-en);font-size:12px;letter-spacing:.28em;color:var(--amber);
  border:1px solid var(--line);border-radius:999px;padding:6px 0;text-align:center;
}
.hrow__d{font-size:13px;color:var(--muted);letter-spacing:.1em;}
.hrow__t{
  font-family:var(--serif-en);font-size:clamp(19px,4vw,25px);color:var(--amber-lt);
  letter-spacing:.06em;font-variant-numeric:lining-nums;white-space:nowrap;
}
.hrow__t em{font-family:var(--sans-jp);font-style:normal;font-size:.62em;color:var(--muted);margin:0 2px;}
/* ラストオーダー。時刻の数字より一段小さく、下に添える */
.hrow__lo{
  display:block;font-family:var(--sans-jp);font-size:11px;letter-spacing:.12em;
  color:var(--muted);margin-top:5px;white-space:nowrap;
}
.hours__note{font-size:12px;color:var(--muted);margin:16px 0 0;line-height:2;}
/* 昼はノーチャージ。夜のセット料金と混同されやすいので、見落とされない大きさで */
.nocharge{
  border:1px solid var(--amber);border-radius:3px;
  padding:15px clamp(16px,3vw,22px);margin:18px 0 0;
  font-size:13px;line-height:1.95;letter-spacing:.05em;color:var(--amber-lt);
}
@media(max-width:600px){
  .hrow{grid-template-columns:76px 1fr;gap:10px 16px;}
  .hrow__t{grid-column:1/-1;font-size:22px;}
}

/* SNSのボタン */
.sns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0 0;}
.sns a{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:999px;padding:10px 22px;font-size:11.5px;letter-spacing:.16em;
  color:var(--text-2);transition:border-color .3s,color .3s;
}
.sns a:hover{border-color:var(--amber);color:var(--amber-lt);}
.sns svg{width:14px;height:14px;fill:currentColor;flex:none;}

/* 固定CTAが3つになる場合（アクセス／LINE／電話） */
.fixcta--3{grid-template-columns:1fr 1fr 1.2fr;}
.fixcta--3 a{font-size:12px;letter-spacing:.1em;}

/* ───────── 本文へスキップ（キーボード操作用） ───────── */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--amber);color:var(--on-accent);padding:12px 22px;
  font-size:13px;letter-spacing:.1em;border-radius:0 0 3px 0;
}
.skip:focus{left:0;}

/* キーボードで移動したときの枠 */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:2px;
}

@media(prefers-reduced-motion:reduce){
  .hd__bar{transition:none;}
  .drawer{transition:opacity .01s;}
  .drawer .drawer__nav li{transition:none;}
  .burger span{transition:none;}
  .totop{transition:opacity .01s;}
}

/* ───────── パンくず ───────── */
.crumb{
  max-width:1120px;margin:0 auto;padding:calc(76px + 22px) var(--pad) 0;
  font-size:11.5px;letter-spacing:.14em;color:var(--muted);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.crumb a{color:var(--muted);transition:color .3s;}
.crumb a:hover{color:var(--amber-lt);}
.crumb span[aria-current]{color:var(--amber-lt);}

/* ───────── 銀粘土ページの導入 ───────── */
.silver{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,72px);align-items:center;}
.silver__fig img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:2px;}
@media(max-width:820px){
  .silver{grid-template-columns:1fr;}
  .silver__fig{order:-1;}
  .silver__fig img{aspect-ratio:3/2;}
}

/* ───────── 利用シーン ───────── */
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.scene{background:var(--bg);padding:clamp(24px,3.4vw,32px);}
.sec--alt .scene{background:var(--bg-2);}
.scene h3{font-family:var(--serif-jp);font-size:16px;font-weight:500;letter-spacing:.1em;
  margin:0 0 12px;line-height:1.7;}
.scene p{font-size:12.5px;color:var(--muted);line-height:2.1;margin:0;}
@media(max-width:900px){ .scenes{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .scenes{grid-template-columns:1fr;} }

/* ───────── フッターのサイト内リンク ───────── */
.ftnav{
  max-width:900px;margin:0 auto 34px;padding-bottom:30px;
  border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
}
.ftnav a{font-size:12px;letter-spacing:.12em;color:var(--muted);transition:color .3s;}
.ftnav a:hover{color:var(--amber-lt);}

/* 料金の枠は、1行に収まるときだけ丸い形が似合う。
   折り返す幅では角の丸みを落として、注記の箱として読ませる。 */
@media(max-width:640px){
  .fee{
    display:flex;flex-direction:column;align-items:flex-start;
    width:100%;gap:7px;border-radius:3px;padding:14px 18px;
  }
  .fee b{letter-spacing:.14em;}
}

/* ───────── 遊べるゲームの一覧 ───────── */
.games{
  border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.06),transparent 60%);
  padding:clamp(26px,4vw,40px);
}
.games__ttl{font-family:var(--serif-jp);font-size:clamp(16px,3.4vw,20px);font-weight:500;
  letter-spacing:.1em;margin:0 0 10px;line-height:1.7;}
.games__note{font-size:12.5px;color:var(--muted);margin:0 0 22px;line-height:2;}
/* 機種の名前。一覧が2つ以上あるとき、どこからどこまでか分かるように */
.games__hw{
  font-family:var(--serif-jp);font-size:13.5px;font-weight:500;letter-spacing:.12em;
  color:var(--amber-lt);margin:34px 0 12px;display:flex;align-items:baseline;
  gap:4px 12px;flex-wrap:wrap;
}
.games__hw:first-of-type{margin-top:0;}
.games__hw small{font-family:var(--serif-en);font-size:11px;color:var(--muted);letter-spacing:.1em;}
.games__hw + .games__note{margin-bottom:14px;}
.games__list + .games__hw{margin-top:36px;}
.games__list{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;
}
.games__list li{
  border:1px solid var(--line);border-radius:2px;padding:7px 14px;
  font-size:12px;letter-spacing:.06em;color:var(--text-2);
}

/* ゲームコーナーの写真。枚数が増えても崩れないよう、入るだけ横に並べる */
.gshots{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,1.8vw,18px);margin:0 0 28px;
}
/* 広い画面では、枚数のぶんだけ横に伸ばす（余った枠はつぶれる） */
@media(min-width:721px){
  .gshots{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
}
.gshots figure{margin:0;}
.gshots img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:2px;border:1px solid var(--line);
}
.gshots figcaption{
  font-size:11.5px;line-height:1.9;color:var(--muted);
  margin-top:9px;letter-spacing:.04em;
}

/* 店主のオンラインショップ。押せる面をカードごと大きく取る */
.shops{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,24px);margin-top:44px;}
.shop{
  display:block;border:1px solid var(--line);border-radius:3px;
  padding:clamp(22px,3.4vw,32px);
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.05),transparent 62%);
  transition:border-color .4s,transform .5s cubic-bezier(.2,.7,.3,1);
}
.shop:hover{border-color:var(--amber);transform:translateY(-3px);}
.shop__en{
  font-family:var(--serif-en);font-size:11px;letter-spacing:.24em;
  color:var(--amber);margin:0 0 10px;text-transform:uppercase;
}
.shop__n{
  font-family:var(--serif-jp);font-size:clamp(17px,3.2vw,21px);font-weight:500;
  letter-spacing:.08em;color:var(--text-hi);margin:0 0 14px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.shop__n span{
  font-family:var(--sans-jp);font-size:11px;letter-spacing:.12em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;
}
.shop__b{font-size:12.5px;line-height:2.05;color:var(--muted);margin:0 0 18px;}
.shop__go{
  font-size:12px;letter-spacing:.1em;color:var(--amber-lt);
  display:inline-flex;align-items:center;gap:8px;
}
.shop__go span{transition:transform .4s;}
.shop:hover .shop__go span{transform:translateX(5px);}
@media(max-width:700px){
  .shops{grid-template-columns:1fr;}
}
/* 主役が1店だけのときは、横に伸ばさず中央に置く */
.shops--one{grid-template-columns:minmax(0,560px);justify-content:center;}

/* 添えるだけのお店。1行で、控えめに */
.shopsub{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;}
.shopsub a{
  display:inline-flex;align-items:baseline;gap:10px;
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:12px;letter-spacing:.06em;color:var(--muted);
  transition:border-color .3s,color .3s;
}
.shopsub a:hover{border-color:var(--amber);color:var(--amber-lt);}
.shopsub b{font-weight:500;color:var(--text-2);}
.shopsub em{font-style:normal;font-size:11px;color:var(--muted);}

/* フッターの店名・住所・電話。地図に載るお店の情報と同じ表記で置く */
.ftnap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:640px;margin:34px auto 0;padding:24px 0;text-align:left;
}
.ftnap__n{
  font-family:var(--serif-jp);font-size:14px;letter-spacing:.14em;
  color:var(--text-2);margin:0 0 14px;text-align:center;
}
.ftnap__n span{font-size:11.5px;color:var(--muted);letter-spacing:.1em;margin-left:6px;}
.ftnap dl{margin:0;display:grid;gap:9px;}
.ftnap dl > div{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:baseline;}
.ftnap dt{
  font-size:11px;letter-spacing:.16em;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:3px 0;text-align:center;
}
.ftnap dd{margin:0;font-size:12.5px;line-height:1.9;color:var(--text-soft);letter-spacing:.04em;}
.ftnap dd a{color:var(--amber-lt);}
@media(max-width:480px){
  .ftnap dl > div{grid-template-columns:64px 1fr;gap:10px;}
  .ftnap dd{font-size:12px;}
}

/* フッターの刺繍ロゴ。黒地の画像なので、背景となじませて置く */
.ft__mark{
  width:min(300px, 72vw);height:auto;margin:0 auto 6px;display:block;
  mix-blend-mode:screen;   /* 黒地を背景に溶かす */
}

/* 花を銀に残す（作品写真を2枚並べる） */
.flowers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px);margin-top:44px;}
.flowers figure{margin:0;border-radius:2px;overflow:hidden;}
.flowers img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);}
.flowers figure:hover img{transform:scale(1.04);}
@media(max-width:600px){ .flowers{grid-template-columns:1fr;} .flowers img{aspect-ratio:4/3;} }

/* ───────── 店舗概要の一覧（info.php） ───────── */
.spec{width:100%;border-collapse:collapse;margin-top:44px;border-top:1px solid var(--line);}
.spec th,.spec td{text-align:left;vertical-align:top;padding:22px 0;border-bottom:1px solid var(--line);}
.spec th{
  width:9em;font-family:var(--sans-jp);font-weight:500;font-size:12px;letter-spacing:.16em;
  color:var(--amber);white-space:nowrap;padding-right:20px;
}
.spec td{font-size:14px;line-height:2.1;color:var(--text-2);}
.spec td small{display:block;margin-top:7px;font-size:12px;color:var(--muted);line-height:2;}
.spec td a{color:var(--amber-lt);border-bottom:1px solid var(--line);}
.spec td a:hover{border-bottom-color:var(--amber);}
@media(max-width:600px){
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:auto;}
  .spec tr{border-bottom:1px solid var(--line);padding:18px 0;}
  .spec th,.spec td{border-bottom:none;padding:0;}
  .spec th{margin-bottom:8px;}
}

/* ───────── 規約の条文（privacy.php） ───────── */
.terms{margin-top:44px;border-top:1px solid var(--line);}
.term{border-bottom:1px solid var(--line);padding:28px 0;}
.term h2{
  font-family:var(--serif-jp);font-size:16px;font-weight:500;letter-spacing:.12em;
  margin:0 0 12px;display:flex;gap:14px;align-items:baseline;
}
.term h2 span{
  font-family:var(--serif-en);font-size:12px;letter-spacing:.2em;color:var(--amber);
  font-variant-numeric:lining-nums;
}
.term p{font-size:13.5px;color:var(--muted);line-height:2.2;margin:0;}

/* ───────── 銀のリサイクルの流れ（silver.php） ─────────
   パンフレットの図を写真で載せるかわりに、このサイトの体裁で組み直したもの。
   広い画面では横に流れ、狭い画面では縦に積みます。矢印もそれに合わせて向きが変わります。 */
.cyc{margin-top:52px;border:1px solid var(--line);border-radius:3px;
  padding:clamp(26px,4vw,40px);background:linear-gradient(165deg,rgba(var(--accent-rgb),.05),transparent 62%);}
.cyc__ttl{font-family:var(--serif-jp);font-size:clamp(16px,3vw,19px);font-weight:500;
  letter-spacing:.16em;margin:0 0 14px;color:var(--amber-lt);}
.cyc__lead{font-size:13.5px;line-height:2.2;color:var(--muted);margin:0 0 34px;max-width:44em;}
.cyc__list{list-style:none;margin:0;padding:0;display:grid;gap:34px 18px;
  grid-template-columns:repeat(5,1fr);}
.cyc__i{position:relative;}
/* 横並びのときの矢印 */
.cyc__i::after{
  content:'';position:absolute;top:22%;right:-13px;width:8px;height:8px;
  border-top:1px solid var(--amber);border-right:1px solid var(--amber);
  transform:rotate(45deg);opacity:.55;
}
.cyc__i:last-child::after{display:none;}
/* 各段に添える写真。相田化学工業の資料より */
.cyc__fig{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:2px;margin-bottom:14px;filter:saturate(.92);}
.cyc__no{font-family:var(--serif-en);font-size:11px;letter-spacing:.22em;color:var(--amber);
  font-variant-numeric:lining-nums;display:block;margin-bottom:9px;}
.cyc__i h3{font-family:var(--serif-jp);font-size:15.5px;font-weight:500;letter-spacing:.1em;margin:0;}
.cyc__en{font-family:var(--serif-en);font-style:italic;font-size:11.5px;letter-spacing:.04em;
  color:var(--amber-lt);margin:5px 0 0;}
.cyc__b{font-size:12px;color:var(--muted);line-height:2.05;margin:11px 0 0;}
.cyc__back{display:flex;align-items:center;gap:11px;margin:32px 0 0;padding-top:20px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--amber-lt);letter-spacing:.08em;}
.cyc__back span{font-size:16px;line-height:1;}
@media(max-width:900px){
  .cyc__list{grid-template-columns:1fr;gap:26px;}
  /* 縦積みでは矢印を下向きに */
  .cyc__i::after{top:auto;right:auto;bottom:-18px;left:3px;transform:rotate(135deg);}
}

/* 出典表記 */
.credit{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--faint);line-height:2.1;}

/* ───────── 3つのかたち（silver.php） ─────────
   もともとパンフレット側にしか定義が無く、銀粘土ページでは飾りが付いていなかった。 */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);margin-top:26px;}
.way{border-top:1px solid var(--line);padding-top:20px;}
.way h3{font-family:var(--serif-jp);font-size:16px;font-weight:500;letter-spacing:.12em;margin:0 0 4px;}
.way .en{font-family:var(--serif-en);font-style:italic;font-size:12.5px;color:var(--amber-lt);margin:0 0 10px;}
.way p{font-size:12.5px;color:var(--muted);line-height:2.1;margin:0;}
@media(max-width:780px){ .ways{grid-template-columns:1fr;gap:24px;} }

/* 3つのかたちの製品写真 */
.typesfig{display:block;width:100%;max-width:760px;margin:18px 0 4px;border-radius:2px;
  border:1px solid var(--line);}

/* 花を銀に残す：説明つきの4枚 */
.flowers{grid-template-columns:repeat(4,1fr);}
.flowers figcaption{
  display:flex;gap:10px;align-items:baseline;margin-top:11px;
  font-size:11.5px;line-height:1.95;color:var(--muted);letter-spacing:.04em;
}
.flowers figcaption span{
  font-family:var(--serif-en);font-size:10px;letter-spacing:.18em;color:var(--amber);
  font-variant-numeric:lining-nums;flex:none;
}
@media(max-width:900px){ .flowers{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .flowers{grid-template-columns:1fr;} }

/* 画面の高さが足りないとき（横向き・小さい端末）は詰める */
@media(max-height:720px){
  .drawer{padding-top:calc(env(safe-area-inset-top,0px) + 62px);}
  .drawer__nav a{padding:11px 4px;font-size:15.5px;}
  .drawer__hours{padding:11px 13px;margin-bottom:13px;font-size:11.5px;}
  .drawer__act a{padding:11px 8px;}
  .drawer__sns{margin-top:11px;}
}

/* ───────── 開いているかどうか ───────── */
.nowopen{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:12px;letter-spacing:.1em;
}
.nowopen__dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;}
.nowopen b{font-weight:500;color:var(--text-2);}
.nowopen span:not(.nowopen__dot){color:var(--muted);font-size:11.5px;}
.nowopen--open{border-color:rgba(var(--ok-rgb),.4);background:rgba(var(--ok-rgb),.07);}
.nowopen--open .nowopen__dot{background:var(--ok);box-shadow:0 0 0 4px rgba(var(--ok-rgb),.18);}
.nowopen--open b{color:var(--ok-lt);}
.nowopen--soon{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.06);}
.nowopen--soon .nowopen__dot{background:var(--amber);}
.nowopen--soon b{color:var(--amber-lt);}
.nowopen--holiday .nowopen__dot,
.nowopen--closed .nowopen__dot{background:var(--faint);}
@media(prefers-reduced-motion:no-preference){
  .nowopen--open .nowopen__dot{animation:pulse 2.6s ease-in-out infinite;}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(var(--ok-rgb),.18);}
  50%    {box-shadow:0 0 0 7px rgba(var(--ok-rgb),.05);}
}

/* ───────── 料金の目安 ───────── */
.exs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:40px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.ex{background:var(--bg);padding:clamp(24px,3.4vw,34px);}
.sec--alt .ex{background:var(--bg-2);}
.ex h3{font-family:var(--serif-jp);font-size:14.5px;font-weight:500;letter-spacing:.1em;
  margin:0 0 14px;color:var(--text-2);}
/* .ex p より詳しい書き方にしないと、下の本文の指定に負ける */
.ex .ex__y{font-family:var(--serif-en);font-size:clamp(30px,5.2vw,40px);font-weight:300;
  color:var(--amber-lt);line-height:1;font-variant-numeric:lining-nums;margin:0 0 14px;}
.ex .ex__y small{font-size:.36em;color:var(--muted);font-family:var(--sans-jp);
  letter-spacing:.14em;margin-left:6px;}
.ex p{font-size:12.5px;color:var(--muted);line-height:2.1;margin:0;}
@media(max-width:820px){ .exs{grid-template-columns:1fr;} }

/* ページ幅いっぱいの写真 */
.widefig{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;
  border-radius:2px;margin-top:40px;}
@media(max-width:640px){ .widefig{aspect-ratio:4/3;} }

/* ───────── セットのおつまみ ───────── */
.food{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center;}
.food__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:block;}
.food__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.food__item{margin:0;}
.food__item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;display:block;}
.food__item figcaption{font-size:11.5px;letter-spacing:.08em;color:var(--muted);text-align:center;margin-top:8px;}
@media(max-width:820px){
  .food{grid-template-columns:1fr;}
  .food__fig{order:2;}
}
@media(max-width:540px){
  .food__grid{gap:10px;}
}

/* 年齢のおことわり */
.agebar{
  display:flex;align-items:flex-start;gap:12px;margin-top:34px;
  border:1px solid rgba(var(--accent-rgb),.34);border-radius:3px;
  padding:16px 20px;background:rgba(var(--accent-rgb),.05);
}
.agebar b{flex:none;font-size:11px;letter-spacing:.14em;color:var(--amber-lt);
  border:1px solid var(--amber);border-radius:2px;padding:3px 9px;font-weight:400;margin-top:2px;}
.agebar p{margin:0;font-size:12.5px;line-height:2.05;color:var(--muted);}

/* ───────── お知らせ・催しの一覧 ───────── */
.news__more{margin-left:auto;font-size:11.5px;letter-spacing:.12em;color:var(--amber-lt);white-space:nowrap;}
.news__more:hover{color:var(--amber);}

.nlist{list-style:none;margin:0;padding:0;}
.nitem{
  display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:start;
  border-top:1px solid var(--line);padding:22px 0 20px;
}
.nitem:first-child{border-top:none;}
.news .nitem:first-child{padding-top:10px;}

/* 開催日のあるものは、日付を四角く目立たせる */
.nitem__when{
  grid-row:span 2;display:flex;flex-direction:column;gap:5px;
  border:1px solid rgba(var(--accent-rgb),.4);border-radius:3px;
  padding:11px 15px;background:rgba(var(--accent-rgb),.06);min-width:9.5em;
}
.nitem__when time{
  font-family:var(--serif-jp);font-size:14.5px;letter-spacing:.06em;color:var(--amber-lt);
  font-variant-numeric:lining-nums;
}
.nitem__when span{font-size:11px;letter-spacing:.08em;color:var(--muted);}
.nitem__d{
  font-family:var(--serif-en);font-size:12px;letter-spacing:.18em;color:var(--amber);
  font-variant-numeric:lining-nums;padding-top:3px;min-width:6em;
}
.nitem__body h3{font-family:var(--serif-jp);font-size:15.5px;font-weight:500;
  letter-spacing:.1em;margin:0 0 8px;}
.nitem__body p{font-size:13px;color:var(--muted);line-height:2.1;margin:0;}
.nitem__place{margin-top:8px!important;font-size:12px!important;color:var(--amber-lt)!important;}
.nitem__fig{grid-column:2;width:100%;max-width:340px;aspect-ratio:4/3;object-fit:cover;
  border-radius:2px;margin-top:14px;}

/* 終わった催しは控えめに */
.nlist--past .nitem{opacity:.62;}
.nlist--past .nitem__when{border-color:var(--line);background:none;}
.nlist--past .nitem__when time{color:var(--muted);}

@media(max-width:640px){
  .nitem{grid-template-columns:1fr;gap:10px;}
  .nitem__when{grid-row:auto;flex-direction:row;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
    min-width:0;align-self:flex-start;}
  .nitem__fig{grid-column:1;max-width:none;}
  .news__more{margin-left:0;flex-basis:100%;}
}

/* ───────── 来店前にまず知りたいこと ─────────
   長いページの下まで送らせないための、ヒーロー直下のひとかたまり。 */
.qf{border-bottom:1px solid var(--line);background:var(--bg-2);}
.qf .wrap{padding-top:clamp(26px,4vw,38px);padding-bottom:clamp(26px,4vw,38px);}
.qf__now{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap;}
.qf__hours{list-style:none;margin:0;padding:0;display:flex;gap:6px 22px;flex-wrap:wrap;}
.qf__hours li{display:flex;align-items:baseline;gap:8px;font-size:12px;}
.qf__hours b{
  font-family:var(--serif-en);font-size:9.5px;letter-spacing:.2em;color:var(--amber);
  border:1px solid var(--line);border-radius:2px;padding:2px 7px;font-weight:400;
}
.qf__hours span{color:var(--muted);letter-spacing:.06em;}
.qf__hours em{font-style:normal;color:var(--text-2);font-family:var(--serif-en);letter-spacing:.05em;
  font-variant-numeric:lining-nums;font-size:13px;}

.qf__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:24px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;
}
.qf__grid > div{background:var(--bg-2);padding:15px 17px;}
.qf__grid dt{
  font-family:var(--sans-jp);font-size:10.5px;letter-spacing:.16em;color:var(--amber);margin:0 0 7px;
}
.qf__grid dd{margin:0;font-size:13px;line-height:1.85;color:var(--text-2);letter-spacing:.04em;}
.qf__grid dd small{display:block;margin-top:5px;font-size:11px;color:var(--muted);line-height:1.85;}

.qf__act{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.qf__btn{
  flex:1 1 auto;text-align:center;min-width:9em;
  border:1px solid var(--line);border-radius:3px;padding:12px 16px;
  font-size:12px;letter-spacing:.1em;color:var(--text-2);transition:border-color .3s,color .3s;
}
.qf__btn:hover{border-color:var(--amber);color:var(--amber-lt);}
.qf__btn--main{background:var(--amber);border-color:var(--amber);color:var(--on-accent);font-weight:500;}
.qf__btn--main:hover{background:var(--amber-lt);border-color:var(--amber-lt);color:var(--on-accent);}

@media(max-width:820px){
  .qf__grid{grid-template-columns:1fr 1fr;}
  .qf__grid > div:last-child{grid-column:1 / -1;}
}
@media(max-width:520px){
  /* 1列に落とすと縦に伸びすぎるので、2列のまま詰める。
     「料金」だけは値が長いので横いっぱいに置く。 */
  .qf__grid > div{padding:12px 13px;}
  /* 値の長い「料金」と「場所」は横いっぱいに置く。
     半端な数だと空のマスができるため。 */
  .qf__grid > div:first-child,
  .qf__grid > div:last-child{grid-column:1 / -1;}
  .qf__grid dd{font-size:12.5px;}
  .qf__act{gap:8px;}
  .qf__btn{flex:1 1 calc(50% - 4px);min-width:0;padding:11px 8px;font-size:11.5px;letter-spacing:.06em;}
  .qf__btn--main{flex-basis:100%;}
}

/* ───────── よくある質問の分類 ───────── */
.faqjump{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;padding:0;}
.faqjump a{
  display:inline-flex;align-items:baseline;gap:7px;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-size:12px;letter-spacing:.08em;color:var(--text-2);transition:border-color .3s,color .3s;
}
.faqjump a:hover{border-color:var(--amber);color:var(--amber-lt);}
.faqjump small{font-family:var(--serif-en);font-size:10px;color:var(--amber);
  font-variant-numeric:lining-nums;}

.faqcat{
  font-family:var(--serif-jp);font-size:14px;font-weight:500;letter-spacing:.16em;
  color:var(--amber-lt);margin:44px 0 0;scroll-margin-top:90px;
}
.faqcat + .faq{margin-top:14px;}

/* ═════════════════ ブランドごとの配色 ═════════════════
   同じ建物・同じ文字組みのまま、色と手ざわりだけを業態に合わせて変える。
   ページの持ち主（cafe.php → カフェ・ボニー など）で <body data-brand="…"> が付く。
   ！ --line は :root で他の値から組み立てているので、各ブランドでも必ず書き直すこと
     （書かないと、バーの色で計算済みの値がそのまま引き継がれる）。 */

/* カフェ・ボニー ─ 昼の光とハーブ。ガラスのポットに透ける緑と、黒豆とローズの差し色 */
body[data-brand="cafe"]{
  --bg:#EEF0E8;  --bg-2:#E4E8DB;  --bg-3:#D9DFCE;  --bg-rgb:238,240,232;
  --text:#262A22; --text-hi:#1E221B; --text-2:#394034; --text-soft:#474E41;
  --muted:#5A6054; --faint:#62675D;
  --amber:#506B41; --amber-lt:#3C5530; --accent-rgb:80,107,65;
  --line-rgb:58,70,48; --line:rgba(58,70,48,.22);
  --rouge:#B35C73; --rouge-rgb:179,92,115; --rouge-lt:#94435A;
  --on-accent:#F5F7F0;
  --ok:#4C8A49; --ok-lt:#3A7337; --ok-rgb:76,138,73;
  --grain:.08;
}

/* ボニーマルシェ ─ クラフト紙の値札と、藍染めの布。手でつくったものが並ぶ市の色 */
body[data-brand="marche"]{
  --bg:#E8DDC8;  --bg-2:#DED1B8;  --bg-3:#D3C4A8;  --bg-rgb:232,221,200;
  --text:#241F18; --text-hi:#1C1813; --text-2:#372F25; --text-soft:#443B30;
  --muted:#5E5446; --faint:#625849;
  --amber:#2E4A7A; --amber-lt:#1F3660; --accent-rgb:46,74,122;
  --line-rgb:70,52,28; --line:rgba(70,52,28,.24);
  --rouge:#B8862A; --rouge-rgb:184,134,42; --rouge-lt:#8A6315;
  --on-accent:#F4EFE4;
  --ok:#4C8A49; --ok-lt:#3A7337; --ok-rgb:76,138,73;
  --grain:.10;
}
/* フッターの一行（写真の上に置く文字の色のまま使っていた）を、地の色に合わせる */
body[data-brand] .ft .hero__cap{color:var(--text-2);}

/* 値札を手で切ったような、点線の縁 */
body[data-brand="marche"] .pv{border-style:dashed;}

/* 銀アトリエ・ボニー ─ 磨いた銀と、それを置く黒鉛色の台。夜のバーの琥珀とは温度を逆にする */
body[data-brand="silver"]{
  --bg:#111316;  --bg-2:#171A1E;  --bg-3:#1E2227;  --bg-rgb:17,19,22;
  --text:#E7EAEE; --text-hi:#EEF1F4; --text-2:#D3D8DE; --text-soft:#C2C8CF;
  --muted:#8E959D; --faint:#7C838B;
  --amber:#B9C1CB; --amber-lt:#E3E8EE; --accent-rgb:185,193,203;
  --line-rgb:190,200,212; --line:rgba(190,200,212,.18);
  --rouge:#8FA7C4; --rouge-rgb:143,167,196; --rouge-lt:#BCD0E6;
  --on-accent:#121417;
  --grain:.26;
}
/* 読み進めた位置の線に、銀の照り */
body[data-brand="silver"] .hd__bar{background:linear-gradient(90deg,#7F8791,#E6EBF1 55%,#8E96A0);}

/* ═════════════════ ブランドごとの一手 ═════════════════
   色だけでなく、それぞれの業態にしかない手ざわりを1つずつ入れる。 */

/* カフェ・ボニー ─ 見出しは丸いゴシック、角はすべて丸く。昼の光のやわらかさ */
body[data-brand="cafe"] .h2,
body[data-brand="cafe"] main h3{
  font-family:'Zen Maru Gothic', var(--sans-jp);
  font-weight:500;letter-spacing:.06em;
}
body[data-brand="cafe"] .hours,
body[data-brand="cafe"] .scenes,
body[data-brand="cafe"] .pv,
body[data-brand="cafe"] .nocharge,
body[data-brand="cafe"] .agebar,
body[data-brand="cafe"] .widefig{border-radius:16px;}
body[data-brand="cafe"] .hours,
body[data-brand="cafe"] .scenes{overflow:hidden;}
body[data-brand="cafe"] .linkbtn{border-radius:999px;}

/* ボニーマルシェ ─ 見出しは鉛筆で書いたような字。いちばん上の小見出しは、藍の枠の値札 */
body[data-brand="marche"] .h2,
body[data-brand="marche"] main h3{
  font-family:'Klee One', var(--serif-jp);
  font-weight:600;letter-spacing:.04em;
}
body[data-brand="marche"] main > section:first-of-type .eyebrow{
  display:inline-block;position:relative;
  border:1px solid var(--amber);border-radius:2px;
  padding:5px 13px 5px 24px;
  background:rgba(var(--accent-rgb),.06);
  rotate:-2deg;             /* 手で結んだ値札のように、わずかに傾ける */
}
body[data-brand="marche"] main > section:first-of-type .eyebrow::before{
  content:'';position:absolute;left:9px;top:50%;
  width:6px;height:6px;margin-top:-3px;
  border:1px solid var(--amber);border-radius:50%;   /* 紐を通す穴 */
}

/* 銀アトリエ・ボニー ─ 大見出しに磨いた銀の照り、角は直角に。精密な手仕事の工房 */
body[data-brand="silver"] h1{
  color:#E3E8EE;            /* 照りを描けない環境では、この銀色で出る */
  background:linear-gradient(100deg,#9AA3AD 0%,#F4F7FA 36%,#AEB6C0 58%,#EAEEF3 80%,#9CA5AF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
body[data-brand="silver"] .hours,
body[data-brand="silver"] .scenes,
body[data-brand="silver"] .pv,
body[data-brand="silver"] .agebar,
body[data-brand="silver"] .linkbtn,
body[data-brand="silver"] .hrow__lb{border-radius:0;}