/* ── 夜の焼き菓子屋。濃いカカオ地に、灯りのようなカスタード ─────────── */
:root {
  /* Meiryo UI 優先。無い環境は OS 標準の日本語 UI 書体へ落とす */
  --ui: "Meiryo UI", Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", sans-serif;
  /* 地と文字を入れ替えた。温かみは白ではなく生成りの紙色で出す。
     文字は真っ黒にせず焦げ茶にして、菓子の色と喧嘩させない。 */
  --paper:   #FFFBF5;   /* 地 */
  --paper-2: #FBF2E4;   /* 一段沈めた面 */
  --paper-3: #F5E7D2;   /* さらに沈めた面 */
  --ink:     #3A2A1E;   /* 文字・イラストの輪郭 */
  --ink-2:   #6F5A48;   /* 補助の文字（紙の上で 6.3:1） */
  --custard: #E8A33C;   /* 面の塗り・下線に使う飴色。文字には使わない */
  --caramel: #9A6216;   /* 文字に使う濃い飴色（紙の上で 6.3:1） */
  --pist:    #5E7B3C;
  --berry:   #B03A54;
  --line:    rgba(58, 42, 30, .15);
}
* { box-sizing: border-box; }
/* 画面外へ動かした分は、版面ではなく viewport の外側で切る。
   本文の枠で切ると、右端の文字が削れる */
html { overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--ui);
  font-size: 15.5px; line-height: 1.95; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; font-family: var(--ui); font-weight: 700; letter-spacing: .02em; text-wrap: balance; }
.lat { font-family: var(--ui); font-weight: 500; }

.band { background: var(--custard); color: var(--ink); font-weight: 700; font-size: 11.5px; letter-spacing: .05em; padding: 7px 20px; text-align: center; position: relative; z-index: 9; }

/* ── 粉糖のようなつぶ。奥行き違いで流れる ─────────────────── */
.dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dust b { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--custard); opacity: .22; will-change: transform; }

.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── 表紙 ──────────────────────────────────────────────────── */
/* ── ヒーロー ──────────────────────────────────────────────
   店内を全幅に敷き、その上に細い罫の枠でコピーを載せる。
   写真をお預かりしたら .scene の中身を <img> に差し替えるだけでよい。 */
.cover { position: relative; z-index: 1; overflow: hidden; background: #2A1D14;
  min-height: clamp(400px, 62vh, 600px); display: flex; align-items: center; }
.scene { position: absolute; inset: 0; }
.scene svg { width: 100%; height: 100%; display: block; }
/* 場面の暗さは左に寄せてある（枠が左に来るため）。
   狭い画面では枠が中央に来るので、全体を一段沈めて文字を確実に読ませる */
@media (max-width: 860px) {
  .cover::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: rgba(42, 29, 20, .42); pointer-events: none; }
}

.frame {
  position: relative; z-index: 2;
  width: min(430px, calc(100% - 40px));
  margin-inline: clamp(20px, 7vw, 104px) auto;
  border: 1px solid rgba(255, 251, 245, .8);
  padding: clamp(26px, 4.4vw, 44px) clamp(20px, 3.4vw, 34px);
  text-align: center;
  color: #FFFBF5;
  background: rgba(42, 29, 20, .12);
  animation: framein 1.1s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes framein { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.frame .eyebrow { font-size: 11.5px; letter-spacing: .38em; margin: 0 0 18px; opacity: .9; }
.frame h1 { font-size: clamp(38px, 6.4vw, 62px); line-height: 1.28; letter-spacing: .06em; color: #FFFBF5; }
.frame .sig { margin: 20px 0 0; font-size: 11px; letter-spacing: .32em; opacity: .78; }

.cover + .wrap .say { margin: clamp(30px, 5vw, 48px) auto 0; max-width: 44em; color: var(--ink-2); font-size: 15px; text-align: center; }

/* 表紙のシュー */
.bigchoux { width: min(320px, 62vw); margin: 26px auto 0; display: block; }

/* 入り口のイラスト。建物なので上下には揺らさず、札と粉糖だけ動かす */
.bigshop { width: min(420px, 84vw); margin: 26px auto 0; display: block; }
.bigshop .draw { stroke-dasharray: var(--len); animation: draw 2.8s cubic-bezier(.4,0,.2,1) both; }
.bigshop .fillin { opacity: 1; }
.bigshop .swing { transform-origin: 246px 146px; animation: swing 3.8s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
.bigshop .spark { animation: spark 4.2s ease-in-out infinite; }
@keyframes spark { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-6px); } }
/* 遅延を animation-delay で作らず、キーフレーム内で待つ。
   アニメーションが走らない環境でも、基準の状態が「見えている」ままになる */
.bigchoux .draw { stroke-dasharray: var(--len); animation: draw 2.6s cubic-bezier(.4,0,.2,1) both; }
@keyframes draw { 0%, 12% { stroke-dashoffset: var(--len); } 72%, 100% { stroke-dashoffset: 0; } }
/* 塗りは最初から出す。線だけが描かれる。読み込み直後に絵が無い状態を作らない */
.bigchoux .fillin { opacity: 1; }

/* 湯気 */
.steam path { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; opacity: 0; }
.steam path { animation: steam 3.4s ease-in-out infinite; }
.steam path:nth-child(2) { animation-delay: .9s; }
.steam path:nth-child(3) { animation-delay: 1.8s; }
@keyframes steam {
  0%   { opacity: 0;   transform: translateY(6px)  scaleY(.8); }
  25%  { opacity: .5; }
  70%  { opacity: .18; }
  100% { opacity: 0;   transform: translateY(-26px) scaleY(1.25); }
}

/* ── 品書き：画面外から回りながら着地する ──────────────────── */
.menu { padding: 40px 0 20px; }
/* 画面外のランダムな位置から、回りながら定位置に収まる */
.item {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 40px; align-items: center;
  margin: 0 0 84px;
  opacity: 0;
  transform: translate3d(var(--fx, -74vw), var(--fy, 50px), 0)
             rotate(var(--fr, -9deg)) scale(var(--fs, .84));
  transition: opacity .75s ease, transform 1.15s cubic-bezier(.16,.86,.24,1);
  will-change: transform;
}
.item.seen { opacity: 1; transform: none; }
.item:nth-child(even) { direction: rtl; }
.item:nth-child(even) > * { direction: ltr; }

.art {
  background: var(--paper-2); border-radius: 50% 50% 46% 46% / 46% 46% 50% 50%;
  padding: 26px; position: relative;
  transition: transform .5s cubic-bezier(.2,.9,.3,1), box-shadow .5s;
}
.item:hover .art { transform: rotate(-4deg) scale(1.04); box-shadow: 0 18px 40px rgba(58, 42, 30, .16); }
.item:nth-child(even):hover .art { transform: rotate(4deg) scale(1.04); }
.art svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }

/* ── ふわふわ浮く。影も一緒に呼吸させる ────────────────────── */
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.1deg); }
  50%      { transform: translateY(-13px) rotate(1.3deg); }
}
@keyframes shade {
  0%, 100% { transform: scaleX(1);   opacity: .34; }
  50%      { transform: scaleX(.84); opacity: .18; }
}
.art svg { animation: bob 5.4s ease-in-out infinite; }
.art::after {
  content: ""; position: absolute; left: 24%; right: 24%; bottom: 16px; height: 11px;
  border-radius: 50%; background: rgba(58, 42, 30, .22); filter: blur(7px);
  animation: shade 5.4s ease-in-out infinite;
}
.item:nth-child(2) .art svg, .item:nth-child(2) .art::after { animation-duration: 6.3s; animation-delay: -1.9s; }
.item:nth-child(3) .art svg, .item:nth-child(3) .art::after { animation-duration: 4.8s; animation-delay: -.9s; }
.item:nth-child(4) .art svg, .item:nth-child(4) .art::after { animation-duration: 5.9s; animation-delay: -3.1s; }
.item:nth-child(5) .art svg, .item:nth-child(5) .art::after { animation-duration: 5.1s; animation-delay: -2.4s; }

.bigchoux { animation: bobbig 6.6s ease-in-out infinite; }
@keyframes bobbig { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.art .no {
  position: absolute; left: -10px; top: -12px;
  font-family: var(--ui); font-size: 46px; color: var(--caramel); opacity: .8; line-height: 1;
}

.desc h3 { font-size: 27px; letter-spacing: .06em; margin-bottom: 4px; }
.desc .en { font-family: var(--ui); font-size: 12px; letter-spacing: .18em; color: var(--ink-2); margin: 0 0 14px; }
.desc p { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; }
.desc .price { font-family: var(--ui); font-size: 25px; color: var(--caramel); }
.desc .price small { font-size: 12.5px; color: var(--ink-2); margin-left: 6px; font-family: var(--ui); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.chips span { font-size: 11.5px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.chips span.p { border-color: var(--pist); color: var(--pist); }
.chips span.b { border-color: var(--berry); color: var(--berry); }

/* ── 素材 ──────────────────────────────────────────────────── */
.about { background: var(--paper-2); position: relative; z-index: 1; padding: 62px 0; margin-top: 24px; }
.about h2 { font-size: 29px; text-align: center; letter-spacing: .1em; margin-bottom: 8px; }
.about .lead { text-align: center; color: var(--ink-2); font-size: 14px; margin: 0 0 34px; }
.mats { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 22px; }
.mat {
  text-align: center; padding: 22px 18px; border: 1px dashed var(--line); border-radius: 14px;
  opacity: 0; transform: translateY(26px) scale(.94);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.9,.3,1), border-color .3s, background .3s;
}
.mats.seen .mat { opacity: 1; transform: none; }
.mat:hover { border-color: var(--caramel); background: var(--paper-3); }
.mat .mi { width: 46px; height: 46px; margin: 0 0 10px; }
.mat .ic, .mat .mi { display: block; transition: transform .5s cubic-bezier(.2,.9,.3,1); }
.mat:hover .ic, .mat:hover .mi { transform: translateY(-3px); }
.mat .ic { font-family: var(--ui); font-size: 12px; letter-spacing: .2em; color: var(--caramel); }
.mat h3 { font-size: 17px; margin: 8px 0 6px; }
.mat p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.8; }

/* ── 焼き上がり ────────────────────────────────────────────── */
.times { padding: 62px 0; }
.times h2 { font-size: 27px; letter-spacing: .1em; margin-bottom: 6px; }
.times .lead { color: var(--ink-2); font-size: 14px; margin: 0 0 26px; max-width: 56em; }
.clock { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.slot {
  flex: 1 1 150px; padding: 20px 18px; border-right: 1px solid var(--line);
  opacity: 0; transform: translateX(-20px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2,.9,.3,1), background .3s;
}
.clock.seen .slot { opacity: 1; transform: none; }
.slot:last-child { border-right: none; }
.slot:hover { background: var(--paper-3); }
.slot .h { font-family: var(--ui); font-size: 25px; color: var(--caramel); transition: transform .4s cubic-bezier(.2,.9,.3,1); display: inline-block; }
.slot:hover .h { transform: scale(1.08); }
.slot p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.slot.soldout { background: var(--paper-3); }
.slot.soldout .h { color: var(--ink-2); }

/* ── 店舗 ──────────────────────────────────────────────────── */
.shopinfo { background: var(--paper-2); position: relative; z-index: 1; padding: 54px 0 70px; }
.shopinfo h2 { font-size: 25px; letter-spacing: .1em; margin-bottom: 20px; }
.shopinfo dl { display: grid; grid-template-columns: 96px minmax(0,1fr); margin: 0; max-width: 620px; }
.shopinfo dt, .shopinfo dd { padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: 14px; }
.shopinfo dt { color: var(--ink-2); font-size: 12.5px; }

/* ── 実装メモ ──────────────────────────────────────────────── */
.tech { position: relative; z-index: 1; padding: 52px 0 66px; }
.tech h2 { font-size: 24px; letter-spacing: .1em; margin-bottom: 6px; }
.tech .clead { color: var(--ink-2); font-size: 14px; margin: 0 0 26px; max-width: 56em; }
.techgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 22px 28px; }
.techgrid dt { font-size: 14px; font-weight: 700; margin-bottom: 3px; font-family: var(--ui); }
.techgrid dd { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.85; }
.techgrid .m { font-family: var(--ui); color: var(--caramel); letter-spacing: .02em; }

/* ── 問い合わせ ────────────────────────────────────────────── */
.contact { position: relative; z-index: 1; padding: 56px 0 8px; }
.contact h2 { font-size: 27px; letter-spacing: .1em; margin-bottom: 6px; }
.contact .clead { color: var(--ink-2); font-size: 14px; margin: 0 0 26px; max-width: 56em; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 16px 22px; max-width: 780px; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f.wide { grid-column: 1 / -1; }
.f > label { font-size: 11px; letter-spacing: .16em; color: var(--ink-2); }
.f .req { color: var(--caramel); }
.f input[type="text"], .f input[type="email"], .f input[type="tel"], .f textarea, .f select {
  font: inherit; font-size: 14px; padding: 11px 12px; width: 100%;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
}
.f textarea { min-height: 112px; resize: vertical; }
.f input:focus, .f textarea:focus, .f select:focus { outline: none; border-color: var(--caramel); }
.f .err { font-size: 11.5px; color: var(--berry); min-height: 1.15em; }
.f.bad input, .f.bad textarea, .f.bad select { border-color: var(--berry); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.consent input { accent-color: var(--caramel); margin-top: 5px; }
.submit {
  font: inherit; font-family: var(--ui); font-weight: 700; font-size: 15px;
  padding: 14px 44px; margin-top: 4px; border-radius: 999px; cursor: pointer;
  background: var(--custard); color: var(--ink); border: none;
  transition: background .22s, transform .18s;
}
.submit:hover { background: var(--ink); transform: translateY(-2px); }
.sent { display: none; margin-top: 16px; padding: 12px 15px; border: 1px dashed var(--pist); border-radius: 12px; font-size: 13px; max-width: 780px; }
.sent.on { display: block; }

/* ── ページ上部へ ──────────────────────────────────────────── */
.pagetop {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--custard); color: var(--ink); text-decoration: none;
  box-shadow: 0 8px 22px rgba(58, 42, 30, .18);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .34s, transform .34s, background .22s;
}
.pagetop.on { opacity: 1; pointer-events: auto; transform: none; }
.pagetop.on:hover { background: var(--ink); transform: translateY(-3px); }
.pagetop b { font-size: 16px; line-height: 1; }
.pagetop span { font-size: 7.5px; letter-spacing: .1em; margin-top: 3px; }

footer { position: relative; z-index: 1; padding: 30px 0 60px; font-size: 12.5px; color: var(--ink-2); }
footer p { margin: 0 0 8px; text-wrap: pretty; word-break: auto-phrase; }

@media (max-width: 760px) {
  .item, .item:nth-child(even) { grid-template-columns: 1fr; gap: 22px; direction: ltr; }
  .shopinfo dl { grid-template-columns: 1fr; }
  .shopinfo dt { border-bottom: none; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .item { opacity: 1 !important; transform: none !important; }
  .bigchoux .draw { stroke-dashoffset: 0; animation: none; }
  .bigshop .draw { stroke-dashoffset: 0; animation: none; }
  .bigshop .swing, .bigshop .spark { animation: none; }
  .bigchoux .fillin { opacity: 1; animation: none; }
  .steam path { animation: none; opacity: .25; }
  .dust b { display: none; }
  .item:hover .art { transform: none; }
  .art svg, .art::after, .bigchoux { animation: none; }
  .submit:hover, .pagetop.on:hover { transform: none; }
  .mat, .slot { opacity: 1 !important; transform: none !important; transition: none; }
  .stepl::after { height: calc(100% - 28px) !important; transition: none; }
  .st .n { color: var(--caramel); transform: none; }
  .mat:hover .ic, .slot:hover .h { transform: none; }
}
:focus-visible { outline: 2px solid var(--custard); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════
   5ページ化にともなう追加分
   ══════════════════════════════════════════════════════════ */

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--custard); color: var(--ink); padding: 10px 18px; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }

/* ── ヘッダー ──────────────────────────────────────────────── */
.hd {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 251, 245, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.hd .wrap { display: flex; align-items: center; gap: 18px; min-height: 62px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: none; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand b { display: block; font-family: var(--ui); font-size: 16px; letter-spacing: .08em; }
.brand i { display: block; font-size: 8.5px; letter-spacing: .24em; color: var(--ink-2); font-style: normal; }

.nav { margin-left: auto; display: flex; gap: 4px; }
.nav button {
  font: inherit; font-size: 13px; letter-spacing: .06em;
  color: var(--ink-2); background: none; border: 0;
  padding: 8px 12px 7px; cursor: pointer; position: relative;
  transition: color .22s;
}
.nav button::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--custard); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
.nav button:hover { color: var(--ink); }
.nav button:hover::after { transform: scaleX(1); }
.nav button[aria-current="page"] { color: var(--caramel); }
.nav button[aria-current="page"]::after { transform: scaleX(1); }

.burger { display: none; }

/* ── ページ切替 ────────────────────────────────────────────── */
.page { animation: pagein .5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes pagein {
  from { opacity: 0; transform: scale(.985) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 下層ページの見出し */
.phead { position: relative; z-index: 1; padding: 58px 0 30px; text-align: center; }
.phead .shop { font-size: 11.5px; letter-spacing: .42em; color: var(--caramel); margin: 0 0 14px; font-family: var(--ui); }
.phead h1 { font-size: clamp(30px, 5.6vw, 52px); line-height: 1.28; letter-spacing: .09em; }
.phead .say { margin: 22px auto 0; max-width: 42em; color: var(--ink-2); font-size: 14.5px; }

/* ── 見出しと導線ボタン ────────────────────────────────────── */
.head2 { padding: 46px 0 4px; }
.head2 h2 { font-size: 27px; letter-spacing: .1em; margin-bottom: 6px; }
.head2 .lead { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 44em; }

.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.more { margin: 30px 0 0; text-align: center; }

.btn {
  font: inherit; font-family: var(--ui); font-weight: 700; font-size: 14px;
  padding: 12px 30px; border-radius: 999px; cursor: pointer;
  background: var(--custard); color: var(--ink); border: 1px solid var(--custard);
  transition: background .22s, color .22s, transform .18s;
}
.btn:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.btn.ghost { background: none; color: var(--caramel); }
.btn.ghost:hover { background: var(--custard); color: var(--ink); }

/* ── 看板の3つ ─────────────────────────────────────────────── */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-top: 26px; }
.pick {
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 22px;
  background: var(--paper-2); text-align: center;
  transition: border-color .26s, transform .3s cubic-bezier(.2,.9,.3,1), background .26s;
}
.pick:hover { border-color: var(--caramel); background: var(--paper-3); transform: translateY(-5px) rotate(-1.2deg); }
.pick:nth-child(even):hover { transform: translateY(-5px) rotate(1.2deg); }
.pick svg { width: 82%; margin: 0 auto; }
.pick h3 { font-size: 18px; margin: 8px 0 2px; letter-spacing: .05em; }
.pick .en { font-family: var(--ui); font-size: 10.5px; letter-spacing: .16em; color: var(--ink-2); margin: 0 0 8px; }
.pick .price { font-family: var(--ui); font-size: 20px; color: var(--caramel); margin: 0; }
.pick .price small { font-size: 11px; color: var(--ink-2); margin-left: 4px; font-family: var(--ui); }

/* ── 季節限定 ──────────────────────────────────────────────── */
.seasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 26px; }
.sea {
  border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--paper);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .26s, transform .3s cubic-bezier(.2,.9,.3,1);
}
.sea:hover { border-color: var(--berry); transform: translateY(-5px); }
.sea svg { width: 72%; margin: 0 auto; }
.sea .when {
  align-self: flex-start; font-family: var(--ui); font-size: 11px; letter-spacing: .1em;
  border: 1px solid var(--berry); color: var(--berry); border-radius: 999px; padding: 2px 12px;
}
.sea h3 { font-size: 20px; letter-spacing: .05em; }
.sea p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }
.sea .price { font-family: var(--ui); font-size: 21px; color: var(--caramel); }
.sea .price small { font-size: 11px; color: var(--ink-2); margin-left: 4px; font-family: var(--ui); }

/* ── お知らせ ──────────────────────────────────────────────── */
.ntabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ntabs button {
  font: inherit; font-size: 12.5px; cursor: pointer;
  background: none; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px;
  transition: border-color .22s, color .22s, background .22s;
}
.ntabs button:hover { border-color: var(--caramel); color: var(--ink); }
.ntabs button[aria-pressed="true"] { background: var(--custard); border-color: var(--caramel); color: var(--ink); }

.news { display: grid; gap: 10px; margin-top: 22px; }
.na {
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 12px; padding: 14px 18px;
  display: grid; grid-template-columns: 92px 74px minmax(0,1fr); gap: 14px; align-items: center;
  transition: border-color .24s, transform .24s cubic-bezier(.2,.9,.3,1), background .24s;
}
.na:hover { border-left-color: var(--caramel); background: var(--paper-2); transform: translateX(4px); }
.na.gone { display: none; }
.na time { font-family: var(--ui); font-size: 12.5px; color: var(--ink-2); }
.na .cat { font-size: 10.5px; text-align: center; border-radius: 999px; padding: 2px 0; border: 1px solid var(--line); color: var(--ink-2); }
.na .cat.goods { border-color: var(--pist); color: var(--pist); }
.na .cat.shop { border-color: var(--berry); color: var(--berry); }
.na h3 { font-size: 14.5px; font-weight: 400; letter-spacing: .03em; }
.na .new { font-family: var(--ui); font-size: 9.5px; color: var(--ink); background: var(--custard); border-radius: 999px; padding: 1px 8px; margin-left: 8px; vertical-align: 2px; }
.na .bd { display: none; grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.9; border-top: 1px dashed var(--line); padding-top: 11px; }
.na[aria-expanded="true"] .bd { display: block; }
.na[aria-expanded="true"] { border-left-color: var(--caramel); }

/* ── 管理画面のモック ──────────────────────────────────────── */
.cms { margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); }
.cms .cbar {
  margin: 0; background: var(--paper-3); color: var(--ink-2);
  font-family: var(--ui); font-size: 12px; letter-spacing: .06em;
  padding: 10px 18px; display: flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--line);
}
.cms .cbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--custard); flex: none; }
.cms .cin { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding: 20px; }
.cms .note { margin: 0 20px 20px; }
.chint { font-size: 12.5px; color: var(--pist); margin-left: 14px; }

/* ── 工程 ──────────────────────────────────────────────────── */
.steps { padding: 56px 0 10px; }
.steps h2 { font-size: 27px; letter-spacing: .1em; margin-bottom: 6px; }
.steps .lead { color: var(--ink-2); font-size: 14px; margin: 0 0 10px; max-width: 44em; }
/* 番号の列を縦のレールが貫き、読み進めた分だけ色が伸びる */
.stepl { display: grid; position: relative; --rail: 36px; }
.stepl::before,
.stepl::after {
  content: ""; position: absolute; left: var(--rail); top: 14px;
  width: 3px; margin-left: -1.5px; border-radius: 3px;
}
.stepl::before { bottom: 14px; background: rgba(58, 42, 30, .13); }
.stepl::after {
  height: var(--prog, 0px); max-height: calc(100% - 28px);
  background: var(--custard); transition: height .2s linear;
}
.st { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.st:last-child { border-bottom: none; }
.st .n {
  position: relative; z-index: 1;
  font-family: var(--ui); font-size: 30px; line-height: 1; text-align: center;
  color: rgba(58, 42, 30, .55);
  background: var(--paper);            /* レールを番号の裏で断つ */
  padding: 8px 0;
  transition: color .45s cubic-bezier(.2,.9,.3,1), transform .45s cubic-bezier(.2,.9,.3,1);
}
.st.lit .n { color: var(--caramel); transform: scale(1.07); }
.st .t { transition: background .45s, color .45s, border-color .45s; }
.st.lit .t { background: var(--custard); color: var(--ink); border-color: var(--custard); }
.st h3 { font-size: 18px; letter-spacing: .05em; margin-bottom: 6px; }
.st p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.9; }
.st .t { display: inline-block; margin-top: 10px; font-size: 11px; letter-spacing: .1em; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; }

/* ── Instagram ─────────────────────────────────────────────── */
.insta { padding: 46px 0 10px; }
.insta .ig { display: inline-block; margin-left: 10px; color: var(--caramel); font-size: 12.5px; letter-spacing: .1em; }
.feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 24px; }
.sq {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2); margin: 0;
  transition: transform .3s cubic-bezier(.2,.9,.3,1), border-color .26s;
}
.sq:nth-child(3n+2) { transform: translateY(10px); }
.sq:hover { transform: scale(1.05) rotate(-1.6deg); border-color: var(--caramel); z-index: 2; }
.sq:nth-child(3n+2):hover { transform: translateY(10px) scale(1.05) rotate(1.6deg); }
.sq svg { width: 100%; height: 100%; }
.sq figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(58, 42, 30, .88); color: #FFFBF5;
  font-size: 10.5px; padding: 5px 9px; opacity: 0; transition: opacity .24s;
}
.sq:hover figcaption { opacity: 1; }

/* ── 表 ────────────────────────────────────────────────────── */
.tblwrap { overflow-x: auto; margin-top: 20px; }
.alg, .week { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px; }
.alg th, .alg td, .week th, .week td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.alg thead th, .week thead th { background: var(--paper-3); color: var(--ink); font-size: 12px; letter-spacing: .08em; }
.alg tbody th { color: var(--ink-2); font-weight: 400; width: 34%; }
.week td { text-align: center; font-family: var(--ui); font-size: 12.5px; }
.week td.off { background: var(--paper-3); color: var(--ink-2); }
.week td.today { border-color: var(--caramel); color: var(--caramel); }

/* ── 地図 ──────────────────────────────────────────────────── */
.mapembed {
  position: relative; aspect-ratio: 16 / 9; margin-top: 20px;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper-2);
}
.mapembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.note { margin: 12px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.85; max-width: 52em; }
.note .lat { color: var(--caramel); }

.cmsnote { margin: 26px 0 0; padding: 18px 20px; border: 1px dashed var(--line); border-radius: 14px; font-size: 13px; color: var(--ink-2); line-height: 1.95; }
.cmsnote b { color: var(--ink); }
.cmsnote .lat { color: var(--caramel); }

/* ── 追加分のレスポンシブ ──────────────────────────────────── */
@media (max-width: 860px) {
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 42px; height: 42px; padding: 0 10px;
    background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  }
  .burger i { display: block; height: 2px; background: var(--custard); border-radius: 2px; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; margin: 0; padding: 8px 24px 16px;
    background: rgba(255, 251, 245, .98); border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav.open { display: flex; }
  .nav button { text-align: left; padding: 12px 4px; font-size: 14px; }
  .nav button::after { left: 4px; right: auto; width: 22px; }
  .hd .wrap { position: relative; }
  .cms .cin { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .na { grid-template-columns: 92px minmax(0,1fr); }
  .na .cat { justify-self: start; padding-inline: 12px; }
  .na h3 { grid-column: 1 / -1; }
  .st { grid-template-columns: 50px minmax(0,1fr); gap: 14px; }
  .stepl { --rail: 25px; }
  .sq:nth-child(3n+2) { transform: none; }
  .sq:nth-child(3n+2):hover { transform: scale(1.05) rotate(1.6deg); }
}
@media (max-width: 700px) { .mapembed { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
  .pick:hover, .sea:hover, .na:hover, .sq:hover, .sq:nth-child(3n+2):hover, .btn:hover { transform: none; }
  .sq:nth-child(3n+2) { transform: none; }
}

/* 2行以上になる注記は、句点で切れるように文をひとかたまりで扱う。
   word-break: auto-phrase が未対応の環境でも、位置を選べる */
.lead > span, .clead > span, .say > span, .note > span { display: inline-block; }