/* ============================================================
   宵ノ雫
   漆黒を地に、金を一点。文字より画で伝える。
   ブランド規定: 漆黒 / 墨色 / 金 / 生成り / 木目ブラウン
   禁止: パステルの多用・ポップな雰囲気・雑多な背景・過度な加工感
   ============================================================ */

:root{
  --sumi:      #060505;   /* 漆黒。商品写真の地と同じ値にしてある */
  --sumi-2:    #0d0b0a;
  --gold:      #c9a96e;
  --gold-lt:   #e8c58a;
  --gold-dk:   #7a5c30;
  --kinari:    #ddd8cc;   /* 生成り */
  --kinari-dim:#8d887e;

  --serif: "Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --latin: "Cormorant Garamond", serif;

  --gut: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--sumi); }

body{
  margin:0;
  background:var(--sumi);
  color:var(--kinari);
  font-family:var(--serif);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 開幕中はスクロールさせない */
body.op-running{ overflow:hidden; height:100dvh; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* ============================================================
   開幕
   ============================================================ */
.opening{
  position:fixed; inset:0; z-index:100;
  background:var(--sumi);
  display:grid; place-items:center;
  transition:opacity 1.1s ease, visibility 1.1s;
}
.opening.done{ opacity:0; visibility:hidden; pointer-events:none; }

#op-canvas{ position:absolute; inset:0; width:100%; height:100%; }

.op-title{
  position:relative; z-index:2;
  text-align:center;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.6s ease, transform 1.6s ease;
}
.op-title.show{ opacity:1; transform:none; }

.op-name{
  display:block;
  width:auto;
  height:clamp(170px, 30vh, 300px);
  margin:0 auto;
  filter:drop-shadow(0 0 26px rgba(201,169,110,.20));
}
.op-yomi{
  display:block; margin-top:1.1em;
  font-family:var(--latin);
  font-size:clamp(9px, 2.2vw, 12px);
  letter-spacing:.5em; text-indent:.5em;
  color:var(--gold-dk);
}

.op-skip{
  position:absolute; right:calc(var(--gut) / 1.4); bottom:calc(var(--gut) / 1.4); z-index:3;
  appearance:none; background:none; border:0;
  padding:10px 4px;
  font-family:var(--latin); font-size:12px;
  letter-spacing:.34em; text-indent:.34em;
  color:var(--gold-dk); cursor:pointer;
  opacity:.75; transition:opacity .4s, color .4s;
}
.op-skip:hover{ opacity:1; color:var(--gold); }

/* ============================================================
   意匠（黒地の素材。screen 合成で黒を落として重ねる）
   ============================================================ */
/* ---------- 両端の金の格子 ----------
   キッチンカーの側面と暖簾の内側を想わせる縦格子。細い縦桟を密に、
   横貫を疎に重ねる。画像は使わず、繰り返しグラデーション2枚で描く。
   内側へ向かって薄れさせ、本文の邪魔をしない。 */
.lattice{
  position:fixed; top:0; bottom:0; z-index:0;
  width:clamp(30px, 4.6vw, 78px);
  pointer-events:none;
  opacity:0;
  transition:opacity 2.4s ease 1.4s;

  --slat:15px;    /* 縦桟の間隔 */
  --rail:112px;   /* 横貫の間隔 */

  background-image:
    repeating-linear-gradient(180deg,
      rgba(201,169,110,.66) 0 1px, transparent 1px var(--rail)),
    repeating-linear-gradient(90deg,
      rgba(201,169,110,.52) 0 1px, transparent 1px var(--slat));
}
/* 外端の柱を1本だけ濃く。ここがあると格子が締まる。 */
.lattice::after{
  content:""; position:absolute; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,
    transparent, rgba(232,197,138,.55) 18%, rgba(232,197,138,.55) 82%, transparent);
}
.lattice-l{
  left:0;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 58%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 58%, transparent 100%);
}
.lattice-r{
  right:0;
  -webkit-mask-image:linear-gradient(270deg, #000 0%, rgba(0,0,0,.5) 58%, transparent 100%);
          mask-image:linear-gradient(270deg, #000 0%, rgba(0,0,0,.5) 58%, transparent 100%);
}
.lattice-l::after{ left:0; }
.lattice-r::after{ right:0; }

body.entered .lattice{ opacity:.55; }

/* 枝垂れと落款は黒を抜いて透過にしてある（screen 合成に頼らない）。
   合成に頼ると、素材の紙目まで明るい四角として浮いてしまう。 */
.ornament{
  position:fixed; z-index:0;
  pointer-events:none;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 2.4s ease 1.2s;
}
.ornament-branch{
  top:-3vh; left:-3vw;
  width:min(34vw, 400px); aspect-ratio:420/443;
  background-image:url("../assets/scene/branch.webp");
  background-size:contain;
  background-position:top left;
}
.ornament-wave{
  right:0; bottom:0;
  width:min(56vw, 660px); height:min(34vh, 300px);
  background-image:url("../assets/scene/seigaiha.svg");
  background-size:120px 60px;
  background-repeat:repeat;
  background-position:bottom right;
  /* 端で断ち切らず、闇へ沈ませる */
  -webkit-mask-image:linear-gradient(315deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
          mask-image:linear-gradient(315deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
}
body.entered .ornament-branch{ opacity:.62; }
body.entered .ornament-wave{ opacity:.30; }

/* ============================================================
   本体
   ============================================================ */
main{ position:relative; z-index:1; }
main.veiled{ opacity:0; }
main.lifted{ opacity:1; transition:opacity 1.4s ease; }

.section{ padding:clamp(88px,14vh,168px) 0; }

.section-head{
  padding:0 var(--gut);
  text-align:center;
  margin-bottom:clamp(40px,7vh,80px);
}
.section-en{
  margin:0 0 .9em;
  font-family:var(--latin);
  font-size:11px; letter-spacing:.44em; text-indent:.44em;
  color:var(--gold-dk);
}
.section-title{
  margin:0;
  font-size:clamp(24px,5.2vw,38px);
  font-weight:500;
  letter-spacing:.28em; text-indent:.28em;
  color:var(--gold);
}
.section-note{
  margin:1.6em 0 0;
  font-size:12px; letter-spacing:.24em;
  color:var(--kinari-dim);
}

/* ---------- 表 ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:var(--gut);
}
.hero-inner{ text-align:center; }

/* 銘はタペストリーの筆文字をそのまま使う。字を組み直すと、現物の
   キッチンカーと web で筆致が変わってしまう。
   縦書きなので、落款は右へ添える（タペストリーと同じ並び）。 */
.hero-title{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,3.4vw,30px);
}
.hero-logo{
  width:auto;
  height:clamp(190px, 34vh, 330px);
  /* 金は地の黒に沈みやすい。ごくわずかに浮かせる。 */
  filter:drop-shadow(0 0 22px rgba(201,169,110,.16));
}
.hero-seal{
  width:auto;
  /* 筆文字に対する比は、タペストリーの並び（落款＝銘のおよそ 1/6）に合わせる */
  height:clamp(52px, 9vh, 84px);
  margin:0;
  align-self:center;
  opacity:.95;
}
.hero-copy{
  margin:clamp(30px,6vh,52px) 0 0;
  font-size:clamp(17px,4.2vw,26px);
  line-height:2.3;
  letter-spacing:.2em;
  color:var(--kinari);
}
.hero-sub{
  margin:clamp(24px,4vh,38px) 0 0;
  font-size:clamp(10px,2.6vw,13px);
  letter-spacing:.4em; text-indent:.4em;
  color:var(--gold-dk);
}

.scroll-cue{
  position:absolute; left:50%; bottom:clamp(24px,5vh,52px);
  transform:translateX(-50%);
  width:1px; height:clamp(44px,8vh,72px);
  background:linear-gradient(180deg,transparent,var(--gold-dk));
  overflow:hidden;
}
.scroll-cue span{
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent,var(--gold-lt));
  animation:drip 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes drip{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ---------- 品書き：ひとりでに流れる ----------
   掴んで送るのをやめ、ゆっくり一方向へ流し続ける。品書きは読ませるものでは
   なく眺めさせるもので、操作を求めると「動かし方」を先に考えさせてしまう。

   札は JS で同じ並びをもう一組足してあり、半分だけ動かして先頭へ戻す。
   継ぎ目が出ないのは、折り返した瞬間の絵が開始時と完全に同じになるため。
   一周の秒数は札の実寸から決める（--flow）。窓の幅が変わっても速さは一定。 */
.shinagaki{ padding-bottom:clamp(56px,9vh,96px); }

.rail{
  overflow:hidden;
  /* 両端を闇に沈めて、流れの出入りを見せない */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.rail-track{
  display:flex;
  gap:clamp(16px,3vw,40px);
  width:max-content;
  will-change:transform;
  animation:flow var(--flow, 90s) linear infinite;
}
@keyframes flow{ to{ transform:translateX(calc(-50% - clamp(16px,3vw,40px) / 2)); } }

/* 見ているあいだは止める。読みたい札で止まれないと落ち着かない。 */
@media (hover:hover){
  .rail:hover .rail-track{ animation-play-state:paused; }
}
.rail-track:focus-within{ animation-play-state:paused; }

.card{
  flex:0 0 auto;
  margin:0;
  position:relative;
  width:clamp(248px, 62vw, 430px);
  border:1px solid rgba(122,92,48,.28);
  background:var(--sumi-2);
  transition:border-color .7s ease;
}
.card img{ width:100%; height:auto; pointer-events:none; }

.card::after{                       /* 種別の小札 */
  content:attr(data-kind);
  position:absolute; top:0; right:0;
  padding:.7em .9em;
  font-size:10px; letter-spacing:.3em; text-indent:.3em;
  color:var(--gold-dk);
  background:linear-gradient(200deg,rgba(6,5,5,.86),transparent);
}
/* 特定原材料。札の下に小さく添える。
   押して開く作りにすると、指では「押せる」と気づかれないまま終わる。
   常に見えていれば、買う前に必ず目に入る。 */
.card-al{
  padding:.95em 1.1em 1.05em;
  border-top:1px solid rgba(122,92,48,.22);
  font-size:clamp(10px,2.6vw,11.5px);
  line-height:1.85;
  letter-spacing:.1em;
  color:rgba(141,136,126,.85);
  text-align:center;
}
.card-al span{
  display:block;
  margin-bottom:.5em;
  font-size:9px;
  letter-spacing:.28em; text-indent:.28em;
  color:var(--gold-dk);
}

@media (hover:hover){
  .card:hover{ border-color:rgba(201,169,110,.6); }
}

/* ---------- 出店予定 ---------- */
.cal-wrap{ padding:0 var(--gut); text-align:center; }
.cal{
  width:min(100%, 560px);
  margin:0 auto;
  border:1px solid rgba(122,92,48,.3);
}
.cal-note{
  margin:clamp(22px,4vh,36px) auto 0;
  max-width:34em;
  font-size:13px; letter-spacing:.16em;
  color:var(--kinari-dim);
}

/* ---------- 想い ---------- */
.voice-box{
  /* 幅は「読める長さ」と「格子の内側」の小さいほうで決める。
     44em だけだと狭い画面で桟に触れ、余白だけだと広い画面で一行が伸びすぎる。 */
  max-width:min(48em, calc(100% - var(--gut) * 2));
  margin:0 auto;
  padding:clamp(46px,9vh,88px) clamp(22px,6vw,56px);
  border:1px solid rgba(122,92,48,.26);
  text-align:center;
}
.voice-box p{
  margin:clamp(18px,3vh,30px) 0 0;
  font-size:clamp(13px,3.2vw,16px);
  line-height:2.5;
  letter-spacing:.16em;
  color:var(--kinari-dim);
}
.voice-box p:first-child{ margin-top:0; }

/* 書き出しの一行だけ、明るく大きく置く */
.voice-box .voice-lead{
  font-size:clamp(15px,3.8vw,19px);
  letter-spacing:.2em;
  color:var(--kinari);
}

/* 惹句。前後に間を取り、金で立たせる。鉤括弧は字面ではなく飾りなので CSS に置く。 */
.voice-box .voice-tag{
  margin-top:clamp(30px,5vh,48px);
  font-size:clamp(16px,4.2vw,22px);
  letter-spacing:.24em;
  text-indent:.24em;
  color:var(--gold);
}
.voice-box .voice-tag::before{ content:"「"; }
.voice-box .voice-tag::after{ content:"」"; }

/* ---------- こだわり ---------- */
.creed{
  max-width:min(52em, calc(100% - var(--gut) * 2));
  margin:0 auto;
}
.creed-item{
  padding:clamp(30px,5vh,52px) 0;
  border-top:1px solid rgba(122,92,48,.22);
  text-align:center;
}
.creed-item:first-child{ border-top:0; padding-top:0; }
.creed-title{
  margin:0 0 clamp(18px,3vh,28px);
  font-size:clamp(16px,4.2vw,22px);
  font-weight:500;
  letter-spacing:.22em; text-indent:.22em;
  color:var(--gold);
}
.creed-item p{
  margin:clamp(12px,2vh,20px) 0 0;
  font-size:clamp(13px,3.2vw,16px);
  line-height:2.4;
  letter-spacing:.12em;
  color:var(--kinari-dim);
}

/* ---------- こだわり・想いの背景に置く単品 ----------
   タペストリー（yoinoshizuku_tarpaulin_700x1900mm）から切り出した2点。
   もとが黒地なので、縁をぼかせば地の漆黒に溶けて継ぎ目が出ない。

   文章の後ろではなく、左右へ寄せて逃がす。字の裏に写真を敷くと、
   薄めても字が読みにくくなる。 */
.kodawari, .voice{ position:relative; overflow:hidden; }

.kodawari::before, .voice::before{
  content:"";
  position:absolute;
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  /* 四角い縁を消す。中心は残し、外へ向けて溶かす。 */
  -webkit-mask-image:radial-gradient(closest-side, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 52%, rgba(0,0,0,.35) 78%, transparent 100%);
}

.kodawari::before{
  left:2%; bottom:6%;
  width:min(40vw, 480px); aspect-ratio:374/420;
  background-image:url("../assets/scene/monaka.webp");
  opacity:.42;
}
.voice::before{
  right:3%; top:16%;
  width:min(26vw, 360px); aspect-ratio:347/458;
  background-image:url("../assets/scene/drink.webp");
  opacity:.38;
}

/* 文章は必ず写真の上。位置指定した ::before は、そのままだと
   静的な子要素より前に出る。 */
.kodawari .section-head, .kodawari .creed,
.voice .section-head, .voice .voice-box{ position:relative; z-index:1; }

/* ---------- 催事・出店のご案内 ---------- */
.shutten-lead,
.cases,
.ask{
  max-width:min(46em, calc(100% - var(--gut) * 2));
  margin:0 auto;
}
.shutten-lead p{
  margin:clamp(14px,2.4vh,22px) 0 0;
  font-size:clamp(13px,3.2vw,16px);
  line-height:2.4; letter-spacing:.12em;
  color:var(--kinari-dim);
  text-align:center;
}
.shutten-lead p:first-child{ margin-top:0; }

.cases{
  margin-top:clamp(40px,6vh,68px);
  padding:clamp(26px,4vh,40px) clamp(22px,5vw,44px);
  border:1px solid rgba(122,92,48,.26);
}
.cases-head{
  margin:0 0 clamp(16px,2.6vh,24px);
  font-size:11px; letter-spacing:.34em; text-indent:.34em;
  color:var(--gold-dk); text-align:center;
}
.cases ul{
  margin:0; padding:0; list-style:none;
  /* 1列に積むと6行ぶん縦に伸びる。字数が近いので格子で足りる。 */
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15em, 1fr));
  gap:1px;
  background:rgba(122,92,48,.14);   /* 隙間が罫線に見える */
  border:1px solid rgba(122,92,48,.14);
}
.cases li{
  padding:1.05em .8em;
  background:var(--sumi);
  font-size:clamp(12px,3vw,14px);
  letter-spacing:.1em;
  color:var(--kinari-dim);
  text-align:center;
}

/* ---------- 問い合わせ ---------- */
.ask{ margin-top:clamp(46px,7vh,80px); }
.ask-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(20px,3vw,34px);
}
.f{ display:block; }
.f-wide{ margin-top:clamp(20px,3vw,34px); }
.f > span{
  display:block;
  margin-bottom:.8em;
  font-size:12px; letter-spacing:.2em;
  color:var(--kinari-dim);
}
/* 必須の印。文字で「必須」と置くより、金の細い札のほうが列が乱れない。 */
.f i{
  display:inline-block;
  margin-left:.9em;
  padding:.25em .7em;
  border:1px solid rgba(122,92,48,.5);
  font-size:9px; font-style:normal;
  letter-spacing:.18em; text-indent:.18em;
  color:var(--gold-dk);
  vertical-align:.15em;
}
.f input,
.f textarea{
  width:100%;
  padding:.7em .2em;
  border:0; border-bottom:1px solid rgba(122,92,48,.42);
  background:transparent;
  color:var(--kinari);
  font-family:var(--serif);
  font-size:clamp(14px,3.4vw,16px);
  letter-spacing:.08em;
  transition:border-color .5s ease;
}
.f textarea{ resize:vertical; line-height:2; }
.f input:focus,
.f textarea:focus{ outline:0; border-bottom-color:var(--gold); }
/* 端末既定の見た目を消す。日付欄だけ白い箱になると、闇の中で浮く。 */
.f input[type="date"]{ appearance:none; }
.f input::placeholder{ color:rgba(141,136,126,.5); }

/* 罠の欄。人には見せない。埋まっていれば機械とみなす。 */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.send{
  display:block;
  margin:clamp(40px,6vh,66px) auto 0;
  padding:1.1em 2.6em;
  border:1px solid rgba(201,169,110,.55);
  background:transparent;
  color:var(--gold);
  font-family:var(--serif);
  font-size:clamp(13px,3.4vw,15px);
  letter-spacing:.24em; text-indent:.24em;
  cursor:pointer;
  transition:background-color .6s ease, border-color .6s ease, color .6s ease;
}
.send:hover{ background:rgba(201,169,110,.09); border-color:var(--gold); color:var(--gold-lt); }
.send:focus-visible{ outline:1px solid var(--gold); outline-offset:5px; }

/* ---------- 問い合わせの開閉 ----------
   常に開いていると、催事の節が入力欄で埋まって長くなる。
   details なので JavaScript を持たずに開閉できる。 */
.ask-fold{ max-width:min(46em, calc(100% - var(--gut) * 2)); margin:clamp(46px,7vh,80px) auto 0; }
.ask-fold > summary{ list-style:none; }
.ask-fold > summary::-webkit-details-marker{ display:none; }

.ask-open{
  display:flex; align-items:center; justify-content:center; gap:1.1em;
  padding:1.15em 2.2em;
  border:1px solid rgba(201,169,110,.5);
  color:var(--gold);
  font-size:clamp(13px,3.4vw,15px);
  letter-spacing:.24em; text-indent:.24em;
  cursor:pointer;
  transition:background-color .6s ease, border-color .6s ease, color .6s ease;
}
.ask-open:hover{ background:rgba(201,169,110,.09); border-color:var(--gold); color:var(--gold-lt); }
.ask-fold > summary:focus-visible{ outline:1px solid var(--gold); outline-offset:5px; }

.ask-caret{ flex:0 0 auto; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.ask-fold[open] .ask-caret{ transform:rotate(180deg); }

/* 開いた中身が現れる動き。details は高さを動かせないので、
   中身側を translate で下ろす。 */
.ask-fold .ask{ margin-top:clamp(34px,5vh,56px); }
.ask-fold[open] .ask{ animation:unfold .7s cubic-bezier(.2,.7,.2,1); }
@keyframes unfold{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:none; }
}

/* ---------- お支払いについて ---------- */
.pay-wrap{
  max-width:min(40em, calc(100% - var(--gut) * 2));
  margin:0 auto;
  text-align:center;
}
.pay-wrap p{
  margin:0 0 clamp(12px,2vh,18px);
  font-size:clamp(13px,3.2vw,16px);
  line-height:2.4; letter-spacing:.12em;
  color:var(--kinari-dim);
}
.pay-note{ color:rgba(141,136,126,.72); font-size:clamp(12px,3vw,14px) !important; }
.pay-group{ margin-top:clamp(34px,5.5vh,58px); }
.pay-head{
  margin:0 0 clamp(14px,2.2vh,20px) !important;
  font-size:11px !important;
  letter-spacing:.3em; text-indent:.3em;
  color:var(--gold-dk) !important;
}
.pay-row{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:clamp(8px,1.6vw,14px);
}
.pay-row img{
  width:clamp(58px,11vw,78px); height:auto;
  border-radius:3px;
  /* 白いタイルが漆黒に対して強い。少し落として馴染ませる。 */
  opacity:.9;
  transition:opacity .4s ease;
}
.pay-row img:hover{ opacity:1; }
.pay-cash{
  margin:clamp(34px,5vh,54px) 0 0 !important;
  font-size:12px !important;
  letter-spacing:.24em;
  color:var(--gold-dk) !important;
}

/* ---------- 共通の注意（アレルギー） ---------- */
.notice{
  max-width:min(44em, calc(100% - var(--gut) * 2));
  margin:0 auto;
  padding:clamp(26px,4vh,40px) clamp(22px,5vw,40px);
  border:1px solid rgba(122,92,48,.2);
}
.notice-title{
  margin:0 0 clamp(14px,2.2vh,20px);
  font-size:12px; font-weight:500;
  letter-spacing:.28em; text-indent:.28em;
  color:var(--gold-dk);
  text-align:center;
}
.notice p{
  margin:.9em 0 0;
  font-size:clamp(11.5px,2.9vw,13px);
  line-height:2.2; letter-spacing:.08em;
  color:rgba(141,136,126,.8);
}


/* ============================================================
   右端の品目（常駐）
   1枚ものなので、いま何処にいて何処へ行けるかが分からなくなる。
   ============================================================ */
.menu-btn{
  position:fixed; z-index:60;
  top:50%; right:0; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.9em;
  padding:1.5em .85em;
  appearance:none; cursor:pointer;
  background:linear-gradient(90deg, rgba(6,5,5,.4), rgba(13,11,10,.94));
  border:1px solid rgba(122,92,48,.42);
  border-right:0;
  color:var(--gold);
  opacity:0; pointer-events:none;
  transition:opacity 1s ease 1.6s, color .5s, border-color .5s, background-color .5s;
}
body.entered .menu-btn{ opacity:1; pointer-events:auto; }
.menu-btn:hover{ color:var(--gold-lt); border-color:var(--gold); }
.menu-btn:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }

.menu-bars{ display:block; width:19px; }
.menu-bars i{
  display:block; height:1px; margin:4px 0;
  background:currentColor;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .35s;
}
.menu-word{
  font-size:11px; line-height:1.5; letter-spacing:.1em;
  color:var(--gold-dk);
  transition:opacity .35s;
}
/* 開いているときは×に畳む */
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
.menu-btn[aria-expanded="true"] .menu-word{ opacity:0; }

.menu-panel{
  position:fixed; z-index:59;
  top:0; right:0; bottom:0;
  width:min(84vw, 340px);
  padding:clamp(70px,12vh,110px) clamp(26px,5vw,44px);
  background:rgba(8,7,6,.97);
  border-left:1px solid rgba(122,92,48,.4);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.menu-panel[hidden]{ display:block; }        /* hidden でも動きを見せる */
.menu-panel.open{ transform:none; }

.menu-panel ul{ margin:0; padding:0; list-style:none; }
.menu-panel li + li{ border-top:1px solid rgba(122,92,48,.18); }
.menu-panel a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1em;
  padding:1.15em 0;
  transition:color .4s;
}
.menu-panel a span{
  font-size:clamp(14px,3.6vw,16px);
  letter-spacing:.2em;
  color:var(--kinari);
}
.menu-panel a em{
  font-family:var(--latin); font-style:normal;
  font-size:9px; letter-spacing:.24em;
  color:var(--gold-dk);
}
.menu-panel a:hover span{ color:var(--gold-lt); }

/* 開いている間、後ろを押せないようにする覆い */
.menu-veil{
  position:fixed; inset:0; z-index:58;
  background:rgba(6,5,5,.55);
  opacity:0; pointer-events:none;
  transition:opacity .6s ease;
}
.menu-veil.on{ opacity:1; pointer-events:auto; }

/* ---------- 結び ---------- */
.foot{
  padding:clamp(72px,12vh,132px) var(--gut) clamp(44px,7vh,72px);
  text-align:center;
  border-top:1px solid rgba(122,92,48,.2);
}
.foot-seal{
  width:44px; height:auto; margin:0 auto clamp(22px,4vh,34px);
  opacity:.9;
}
.foot-name{
  margin:0;
  font-size:clamp(20px,4.6vw,28px);
  letter-spacing:.34em; text-indent:.34em;
  color:var(--gold);
}
.sns{
  display:flex; justify-content:center; gap:clamp(22px,6vw,40px);
  margin:clamp(32px,5vh,52px) 0 0;
}
.sns a{
  display:grid; place-items:center;
  width:46px; height:46px;
  border:1px solid rgba(122,92,48,.4);
  border-radius:50%;
  color:var(--gold-dk);
  transition:color .5s, border-color .5s, transform .5s;
}
.sns a:hover{ color:var(--gold-lt); border-color:var(--gold); transform:translateY(-3px); }
.foot-copy{
  margin:clamp(34px,5vh,54px) 0 0;
  font-family:var(--latin);
  font-size:11px; letter-spacing:.3em;
  color:var(--gold-dk);
}

/* ---------- 現れ方 ---------- */
.rise{ opacity:0; transform:translateY(26px); }
.rise.in{ opacity:1; transform:none; transition:opacity 1.3s ease, transform 1.3s cubic-bezier(.2,.7,.2,1); }

/* ============================================================
   スマホ
   縦持ちで見られる前提。格子は細く疎にする。太いままだと、
   狭い画面で桟が詰まって縞（モアレ）に見え、上品さが消える。
   ============================================================ */
@media (max-width:640px){
  :root{
    /* 本文の余白は格子より内側に置く。重なると文字が桟に乗る。
       下限は格子の幅（最大40px）より広く取ること。 */
    --gut: clamp(46px, 12vw, 60px);
  }

  /* 幅を詰めると桟が2本しか入らず、格子ではなく数本の線に見える。
     帯を広げ、桟と貫を密にして、狭い画面でも組子として読ませる。 */
  .lattice{
    width:clamp(28px, 8.5vw, 40px);
    --slat:11px;
    --rail:62px;
  }
  body.entered .lattice{ opacity:.5; }

  /* 縦に細い画面では、左右へ逃がす余地が無い。下端へ沈めて薄くし、
     字と重なる面積を減らす。 */
  .kodawari::before{
    left:-14%; bottom:-3%;
    width:74vw;
    opacity:.28;
  }
  .voice::before{
    right:-16%; top:auto; bottom:-2%;
    width:52vw;
    opacity:.26;
  }

  /* 2列だと1欄あたり120px ほどになり、入力中に文字が見えない。 */
  .ask-grid{ grid-template-columns:1fr; }

  /* 想いの文は、広い字間のままだと1行に14字ほどしか入らず、行末に
     「す。」だけが残る。読ませる段落なので、ここだけ字間を詰めて余白も削る。 */
  .voice-box{ padding:clamp(34px,7vh,52px) 18px; }
  .voice-box p{ letter-spacing:.06em; line-height:2.2; }
  .voice-box .voice-lead{ letter-spacing:.08em; }
  .voice-box .voice-tag{ letter-spacing:.12em; text-indent:.12em; }

  /* 枝垂れは画面が狭いぶん、比率を上げないと見えない */
  .ornament-branch{ width:min(52vw, 260px); }
  .ornament-wave{ width:76vw; height:26vh; background-size:96px 48px; }
  body.entered .ornament-wave{ opacity:.24; }

  /* 札は1枚が画面の主役になる幅に */
  .card{ width:min(74vw, 320px); }

  /* 指で押す的は 44px 以上を保つ */
  .sns a{ width:48px; height:48px; }

  /* 切り欠きのある端末で、結びが画面外へ潜らないように */
  .foot{ padding-bottom:calc(clamp(44px,7vh,72px) + env(safe-area-inset-bottom)); }
  .op-skip{
    right:calc(var(--gut) / 1.4 + env(safe-area-inset-right));
    bottom:calc(var(--gut) / 1.4 + env(safe-area-inset-bottom));
  }
}

/* 横持ちで丈が足りないとき、表が窮屈にならないように */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding-block:clamp(56px,12vh,96px); }
  .scroll-cue{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .rise{ opacity:1; transform:none; }
  .ornament, .lattice{ opacity:.34 !important; }
}