/* ニカイノ魚 デザイン案 ── 赤い看板の下、のれんをくぐって二階へ
   色：看板の赤・生成りの白・墨。店の壁の黄色い短冊と、提灯の明かり（琥珀）を少し
   書体：見出し・値段は太いゴシック（Dela Gothic One）、本文は Zen Kaku Gothic New、店の手書きの POP・短冊は Yusei Magic
   部品はステッカーのように：太い墨の線と、ずらした影（押すと沈む） */
:root {
  --aka: #d33a2e;
  --aka-d: #a92a20;
  --aka-l: #ef6a55;
  --shiro: #f8f3ea;
  --shiro-2: #efe6d6;
  --sumi: #1d1814;
  --sumi-2: #2a231d;
  --kiiro: #f4d34c;
  --chochin: #ffb648;
  --ai: #1e3a5f;
  --wood: #c99b63;
  --line: rgba(29, 24, 20, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pad: clamp(18px, 5vw, 72px);
  --max: 1240px;
  --hd: 72px;
  --go: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --dela: 'Dela Gothic One', 'Zen Kaku Gothic New', sans-serif;
  --pop: 'Yusei Magic', 'Zen Kaku Gothic New', sans-serif;
  --shadow: 4px 4px 0 var(--sumi);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--shiro); }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; background: var(--shiro); color: var(--sumi); font-family: var(--go); font-weight: 500; font-size: 15px; line-height: 1.9; letter-spacing: 0.04em; -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--chochin); outline-offset: 3px; }
::selection { background: var(--kiiro); color: var(--sumi); }
w-b { display: inline-block; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; display: inline-block; }
.wrap { width: min(100% - var(--pad) * 2, var(--max)); margin-inline: auto; }
.sec { position: relative; padding-block: clamp(90px, 11vw, 150px); }
.pop { font-family: var(--pop); }
.dela { font-family: var(--dela); font-weight: 400; letter-spacing: 0; }
.logo { display: inline-block; width: 40px; aspect-ratio: 1; background: currentColor; -webkit-mask: url(images/logo.png) center / contain no-repeat; mask: url(images/logo.png) center / contain no-repeat; }

/* ───────── 共通の部品 ───────── */
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--dela); font-size: 14px; letter-spacing: 0.12em; color: var(--aka); margin-bottom: 14px; }
.kicker::before { content: ''; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.kicker--w { color: var(--kiiro); }
.ttl { font-family: var(--dela); font-size: clamp(34px, 5vw, 64px); line-height: 1.28; letter-spacing: 0.01em; }
.ttl--w { color: var(--shiro); }
.lead { font-size: clamp(15px, 1.1vw, 16px); line-height: 2.05; }
.lead + .lead { margin-top: 0.9em; }
.lead--w { color: rgba(248, 243, 234, 0.92); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: 2px solid var(--sumi); border-radius: 999px; background: var(--shiro); color: var(--sumi); font-weight: 900; font-size: 15px; letter-spacing: 0.08em; box-shadow: var(--shadow); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s; }
@media (hover: hover) { .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sumi); } }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sumi); }
.btn--red { background: var(--aka); color: #fff; }
.btn--line { background: #fff; }
.ph { position: relative; overflow: hidden; background: var(--shiro-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
/* 写真は読み込みが終わってから（JS が .is-loaded）ふわっと。届いた瞬間にパッと出ないように（2026-10-21） */
.ph img, .card__ph img, .sister__ph img, .fv__stairs img { opacity: 0; transition: opacity 1.6s cubic-bezier(0.37, 0, 0.25, 1); }
.card__ph img, .sister__ph img { transition: opacity 1.6s cubic-bezier(0.37, 0, 0.25, 1), transform 1.2s var(--ease); }
.ph img.is-loaded, .card__ph img.is-loaded, .sister__ph img.is-loaded, .fv__stairs img.is-loaded { opacity: 1; }
html.no-js .ph img, html.no-js .card__ph img, html.no-js .sister__ph img, html.no-js .fv__stairs img { opacity: 1; }
.ph__ai { position: absolute; right: 10px; top: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; padding: 1px 8px; border-radius: 99px; color: #fff; background: rgba(29, 24, 20, 0.6); }

/* 現れ方（JS が .is-in を付ける）：ポンと弾んで出る */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.rv-pop { opacity: 0; transform: translateY(30px) scale(0.94) rotate(var(--rot, -1.5deg)); transition: opacity 0.7s var(--ease), transform 0.9s var(--back); }
.rv.is-in, .rv-pop.is-in { opacity: 1; transform: none; }
@media (hover: none) { .rv-pop { transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); } }
html.no-js .rv, html.no-js .rv-pop { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv, .rv-pop { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ───────── ヘッダー ───────── */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); display: flex; align-items: center; gap: 22px; padding: 0 var(--pad); color: var(--shiro); transition: background-color 0.4s, color 0.4s, transform 0.5s var(--ease), box-shadow 0.4s; }
.hd.is-solid { background: var(--shiro); color: var(--sumi); box-shadow: 0 2px 0 var(--sumi); }
.hd.is-hide { transform: translateY(-110%); }
.hd__logo { display: flex; align-items: center; gap: 10px; }
.hd__logo .logo { width: 44px; }
.hd__name { font-family: var(--dela); font-size: 20px; letter-spacing: 0.06em; }
.hd__floor { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--aka); color: #fff; font-family: var(--dela); font-size: 13px; line-height: 1; box-shadow: 0 0 0 2px var(--sumi); }
.hd__arrow { font-size: 9px; transition: transform 0.4s var(--back); }
.hd__fl b { font-weight: 400; font-size: 18px; display: inline-block; min-width: 0.7em; text-align: center; }
.hd__floor.is-2f .hd__arrow { transform: translateY(-2px); }
.hd__nav { margin-left: auto; display: flex; gap: clamp(14px, 1.8vw, 28px); font-weight: 900; font-size: 14px; letter-spacing: 0.06em; }
.hd__nav a { position: relative; padding: 6px 0; }
.hd__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--aka); transform: scaleX(0); transition: transform 0.35s var(--back); }
@media (hover: hover) { .hd__nav a:hover::after { transform: scaleX(1); } }
.hd__tel { display: grid; line-height: 1.15; font-family: var(--dela); font-size: 18px; }
.hd__tel small { font-family: var(--go); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; opacity: 0.8; }
.hd__rsv { min-height: 44px; padding: 0 20px; font-size: 14px; }
.hd__menu { display: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.hd__menu span:not(.sr) { position: absolute; left: 12px; right: 12px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform 0.4s var(--back), opacity 0.3s; }
.hd__menu span:nth-child(1) { top: 13px; } .hd__menu span:nth-child(2) { top: 20px; } .hd__menu span:nth-child(3) { top: 27px; }
.hd__menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd__menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hd__menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1180px) { .hd__tel { display: none; } }
@media (max-width: 980px) { .hd__nav { display: none; } .hd__rsv { margin-left: auto; } .hd__menu { display: block; } }
@media (max-width: 759px) {
  :root { --hd: 62px; }
  .hd { gap: 10px; }
  .hd__logo .logo { width: 38px; }
  .hd__name { font-size: 17px; }
  .hd__rsv { display: none; }
  .hd__floor { margin-left: auto; }
  .hd__menu { margin-left: 4px; width: 42px; height: 42px; }
  .hd__menu span:nth-child(1) { top: 11px; } .hd__menu span:nth-child(2) { top: 18px; } .hd__menu span:nth-child(3) { top: 25px; }
}
.drawer { position: fixed; inset: 0; z-index: 45; background: var(--aka); color: #fff; display: grid; align-content: center; gap: 30px; padding: 90px var(--pad) 120px; opacity: 0; transform: translateY(-20px); transition: opacity 0.4s, transform 0.5s var(--ease); overflow-y: auto; }
.drawer.is-open { opacity: 1; transform: none; }
.drawer__nav { display: grid; gap: 8px; }
.drawer__nav a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 18px; border: 2px solid var(--sumi); border-radius: 16px; background: var(--shiro); color: var(--sumi); box-shadow: var(--shadow); }
.drawer__nav b { font-family: var(--dela); font-weight: 400; font-size: 20px; }
.drawer__nav span { font-size: 12px; font-weight: 700; color: var(--aka); }
.drawer__sis { justify-self: center; font-weight: 900; text-decoration: underline; text-underline-offset: 5px; }

/* ───────── ファーストビュー ───────── */
.fv { position: relative; height: 270vh; background: #140c0a; }
.fv__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; color: var(--shiro); }
.fv__stage::after { content: ""; position: absolute; inset: 0 0 auto; height: 140px; background: linear-gradient(180deg, rgba(20, 12, 10, 0.75), rgba(20, 12, 10, 0)); pointer-events: none; z-index: 3; }
.fv__street { position: absolute; inset: 0; background:
  radial-gradient(40% 50% at 14% 32%, rgba(211, 58, 46, 0.35), transparent 70%),
  radial-gradient(50% 40% at 50% 100%, rgba(255, 182, 72, 0.18), transparent 70%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 120px),
  linear-gradient(180deg, #1c1110 0%, #120a09 70%, #0d0807 100%); }
/* 入口（のれんの奥に、二階への階段） */
.fv__door { position: absolute; left: 28vw; top: 13%; bottom: 0; width: 44vw; transform-origin: 50% 70%; }
.fv__stairs { position: absolute; inset: 0; overflow: hidden; background: #2a1a12; }
.fv__stairs img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 25%; }
.fv__stairs::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 10, 0.1) 0%, rgba(20, 12, 10, 0) 40%, rgba(20, 12, 10, 0.35) 100%); }
.fv__frame { position: absolute; inset: -10px -10px 0; border: 10px solid #2b1c15; border-bottom: 0; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6); pointer-events: none; }
.fv__frame::before { content: ''; position: absolute; left: -24px; right: -24px; top: -16px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #6b4a32, #3a2618); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); }
.fv__noren { position: absolute; inset: 0; width: 100%; height: 100vh; height: 100lvh; display: block; pointer-events: none; }
.fv__noren-still { position: absolute; left: 28vw; top: 13%; width: 44vw; height: 42%; display: none; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fv__noren-still > * { background: var(--shiro); color: var(--sumi); display: grid; place-items: start center; padding-top: 18%; font-family: var(--dela); font-size: clamp(22px, 3vw, 40px); writing-mode: vertical-rl; }
.fv__noren-still .logo { width: auto; height: auto; aspect-ratio: auto; background: var(--shiro); -webkit-mask: none; mask: none; }
html.no-webgl .fv__noren-still { display: grid; }
html.no-webgl .fv__noren { display: none; }
.fv__sign { position: absolute; left: clamp(20px, 7vw, 120px); top: calc(var(--hd) + 6vh); width: clamp(84px, 8.6vw, 140px); filter: drop-shadow(0 0 24px rgba(211, 58, 46, 0.55)) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5)); }
.fv__sign svg { animation: neon 6s steps(1) infinite; }
.fv__sign svg { display: block; width: 100%; height: auto; }
.fv__sign::before { content: ''; position: absolute; right: -36px; top: 18%; width: 36px; height: 6px; background: #3a2618; border-radius: 3px; }
@keyframes neon { 0%, 100% { opacity: 1; } 71% { opacity: 1; } 72% { opacity: 0.82; } 73% { opacity: 1; } 75% { opacity: 0.9; } 76% { opacity: 1; } }
.fv__copy { position: absolute; right: clamp(20px, 6vw, 110px); top: calc(var(--hd) + 7vh); display: flex; flex-direction: row-reverse; gap: 22px; }
.fv__h1 { writing-mode: vertical-rl; display: flex; flex-direction: column; gap: 0.18em; font-family: var(--dela); font-size: clamp(46px, 6.2vw, 104px); line-height: 1.04; letter-spacing: 0.04em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
.fv__l { display: block; }
.fv__l--2 { margin-top: 1.6em; color: var(--kiiro); }
.fv__l .ch { display: inline-block; opacity: 0; transform: translateY(-0.4em) scale(1.3); }
html.no-js .fv__l .ch { opacity: 1; transform: none; }
.fv__sub { writing-mode: vertical-rl; font-weight: 700; font-size: 14px; letter-spacing: 0.24em; line-height: 2; color: rgba(248, 243, 234, 0.86); margin-top: 0.6em; }
.fv__pop { position: absolute; left: clamp(26px, 10vw, 170px); bottom: 14vh; width: 136px; height: 136px; border-radius: 50%; display: grid; place-content: center; justify-items: center; text-align: center; background: var(--kiiro); color: var(--sumi); border: 3px solid var(--sumi); box-shadow: var(--shadow); transform: rotate(-10deg); line-height: 1.15; }
.fv__pop span { font-size: 15px; }
.fv__pop b { font-family: var(--dela); font-weight: 400; font-size: 46px; line-height: 1; color: var(--aka); }
.fv__pop small { font-size: 10px; font-family: var(--go); font-weight: 700; }
.fv__info { position: absolute; left: var(--pad); bottom: 30px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; color: rgba(248, 243, 234, 0.85); }
.fv__info span + span::before { content: '／'; margin-right: 18px; opacity: 0.5; }
.fv__cue { position: absolute; right: var(--pad); bottom: 30px; display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 13px; letter-spacing: 0.14em; }
.fv__cue i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.fv__cue i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(-50%) rotate(45deg); animation: bob 1.6s var(--ease) infinite; }
@keyframes bob { 0%, 100% { top: 6px; } 50% { top: 10px; } }
.fv__ton { position: absolute; inset: 0; pointer-events: none; }
.fv__ton span { position: absolute; font-family: var(--pop); font-size: clamp(28px, 3.2vw, 48px); color: var(--kiiro); text-shadow: 3px 3px 0 var(--sumi); opacity: 0; }
.fv__ton span:nth-child(1) { left: 34%; top: 66%; transform: rotate(-12deg); }
.fv__ton span:nth-child(2) { left: 58%; top: 52%; transform: rotate(8deg); }
.fv__ton span:nth-child(3) { left: 40%; top: 38%; transform: rotate(-6deg); }
.fv__arrive { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; pointer-events: none; opacity: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(255, 182, 72, 0.35), rgba(20, 12, 10, 0) 70%); }
.fv__hi { white-space: nowrap; font-family: var(--dela); font-size: clamp(32px, 7vw, 110px); line-height: 1.1; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35); }
.fv__hi2 { font-family: var(--pop); font-size: clamp(20px, 2.4vw, 32px); color: var(--kiiro); }
@media (max-width: 759px) {
  .fv { height: 240vh; }
  .fv__door { left: 4vw; width: 92vw; top: calc(var(--hd) + 2vh); }
  .fv__noren-still { left: 4vw; width: 92vw; top: calc(var(--hd) + 2vh); height: 34%; }
  .fv__sign { display: none; }
  .fv__sign::before { display: none; }
  .fv__copy { top: auto; bottom: 92px; left: 20px; right: 20px; flex-direction: column; gap: 10px; }
  .fv__h1 { writing-mode: horizontal-tb; font-size: clamp(38px, 11vw, 52px); gap: 0; }
  .fv__l--2 { margin-top: 0; }
  .fv__sub { writing-mode: horizontal-tb; font-size: 13px; letter-spacing: 0.08em; line-height: 1.8; margin: 0; }
  .fv__pop { left: auto; right: 12px; bottom: auto; top: calc(var(--hd) + 27vh); width: 100px; height: 100px; }
  .fv__pop b { font-size: 34px; }
  .fv__pop span { font-size: 12px; }
  .fv__info { bottom: 56px; left: 20px; font-size: 11px; gap: 2px 10px; }
  .fv__info span + span::before { margin-right: 10px; }
  .fv__cue { display: none; }
  .fv__stairs::after { background: linear-gradient(180deg, rgba(20, 12, 10, 0) 30%, rgba(20, 12, 10, 0.92) 78%); }
}

/* ───────── ようこそ ───────── */
.hello__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.hello__txt .ttl { margin-bottom: 30px; }
.hello__ph { border: 3px solid var(--sumi); border-radius: 28px; box-shadow: 10px 10px 0 var(--aka); aspect-ratio: 16 / 10; --rot: 2deg; }
.hello__nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.hello__nums li { display: grid; justify-items: center; gap: 2px; padding: 22px 10px; border: 2px dashed rgba(29, 24, 20, 0.3); border-radius: 22px; }
.hello__nums b { font-size: clamp(44px, 5vw, 72px); line-height: 1; color: var(--aka); }
.hello__nums small { font-size: 0.34em; margin-left: 2px; color: var(--sumi); }
.hello__nums span { font-weight: 900; font-size: 13px; letter-spacing: 0.1em; }
@media (max-width: 900px) { .hello__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .hello__nums { gap: 8px; } .hello__nums li { padding: 16px 4px; } .hello__nums span { font-size: 11px; } }

/* ───────── あて巻き ───────── */
.ate { background: var(--aka); color: #fff; padding-top: clamp(120px, 13vw, 180px); }
.ate__wave { position: absolute; left: 0; right: 0; top: -1px; height: 40px; background: var(--shiro); -webkit-mask: radial-gradient(22px 24px at 50% 0, #000 98%, transparent 101%) 0 0 / 52px 40px repeat-x; mask: radial-gradient(22px 24px at 50% 0, #000 98%, transparent 101%) 0 0 / 52px 40px repeat-x; }
.ate__hd { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 10px 40px; margin-bottom: 50px; }
.ate__hd .kicker { grid-column: 1 / -1; }
.ate__ttl { display: flex; align-items: flex-end; gap: 14px; font-family: var(--dela); line-height: 0.9; }
.ate__mei { writing-mode: vertical-rl; font-size: clamp(22px, 2.4vw, 34px); padding: 10px 6px; border: 3px solid #fff; border-radius: 10px; }
.ate__name { font-size: clamp(64px, 11vw, 168px); letter-spacing: -0.01em; text-shadow: 6px 6px 0 var(--sumi); }
.ate__def { justify-self: start; align-self: center; padding: 16px 22px; border-radius: 16px; background: var(--shiro); color: var(--sumi); border: 2px solid var(--sumi); box-shadow: var(--shadow); font-weight: 900; font-size: 15px; line-height: 1.8; --rot: 3deg; transform: rotate(-2deg); }
.ate__def.is-in { transform: rotate(-2deg); }
.ate__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.ate__main { border: 3px solid var(--sumi); border-radius: 26px; aspect-ratio: 16 / 10; box-shadow: 10px 10px 0 var(--sumi); }
.ate__body { display: grid; gap: 22px; position: relative; }
.ate__catch { font-family: var(--dela); font-size: clamp(30px, 3.4vw, 50px); line-height: 1.25; color: var(--kiiro); }
.ate__roll { width: 62%; justify-self: end; aspect-ratio: 4 / 5; border: 8px solid #fff; border-bottom-width: 30px; border-radius: 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); --rot: 6deg; transform: rotate(4deg); }
.ate__roll.is-in { transform: rotate(4deg); }
.ate__roll::before { content: ''; position: absolute; z-index: 1; left: 50%; top: -14px; width: 90px; height: 26px; background: rgba(244, 211, 76, 0.85); transform: translateX(-50%) rotate(-4deg); }
@media (max-width: 900px) { .ate__hd { grid-template-columns: 1fr; } .ate__grid { grid-template-columns: 1fr; } .ate__roll { width: 56%; } }
/* 短冊 */
.tan { margin-top: clamp(80px, 10vw, 130px); padding: clamp(28px, 4vw, 52px); border-radius: 28px; border: 3px solid var(--sumi); box-shadow: 10px 10px 0 var(--sumi); color: var(--sumi);
  background: repeating-linear-gradient(90deg, #c79a62 0 120px, #c2945c 120px 122px, #cda06a 122px 240px, #c2945c 240px 242px); }
.tan__ttl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; font-family: var(--dela); font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 26px; color: var(--sumi); }
.tan__ttl .pop { padding: 4px 16px; background: var(--aka); color: #fff; border-radius: 999px; font-size: 0.75em; }
.tan__ttl small { font-family: var(--go); font-weight: 900; font-size: 13px; }
.tan__wall { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; gap: 34px 26px; padding: 10px 4px 18px; }
.tan__col { flex: none; display: grid; justify-items: center; gap: 12px; align-content: start; }
.tan__price { width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; background: var(--aka); color: #fff; border: 2px solid var(--sumi); text-align: center; font-weight: 900; font-size: 11px; line-height: 1; }
.tan__price b { font-size: 20px; display: block; margin-bottom: 2px; }
.tan__list { display: flex; flex-direction: row-reverse; gap: 8px; }
.tanzaku { writing-mode: vertical-rl; min-height: 220px; width: 50px; padding: 18px 0 14px; background: var(--kiiro); border: 1.5px solid rgba(29, 24, 20, 0.5); box-shadow: 2px 3px 0 rgba(29, 24, 20, 0.35); font-family: var(--pop); font-size: 20px; letter-spacing: 0.08em; line-height: 1; display: flex; align-items: center; transform: rotate(var(--r)); transform-origin: 50% 0; position: relative; }
.tanzaku::before { content: ''; position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--sumi); transform: translateX(-50%); opacity: 0.6; }
@media (hover: hover) { .tanzaku:hover { animation: swing 1.4s var(--ease); } }
@keyframes swing { 0% { transform: rotate(var(--r)); } 20% { transform: rotate(9deg); } 45% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(var(--r)); } }
.tan__note { margin-top: 14px; font-size: 12px; font-weight: 700; }
@media (max-width: 759px) {
  .tan__wall { flex-wrap: nowrap; overflow-x: auto; gap: 18px; margin: 0 -16px; padding: 10px 16px 18px; scrollbar-width: none; }
  .tan__wall::-webkit-scrollbar { display: none; }
  .tanzaku { width: 44px; font-size: 18px; min-height: 200px; }
  .tan { padding: 22px 16px; }
  .tan__note::before { content: "← 左へスクロールできます　"; color: var(--aka); }
}

/* ───────── お品書き（横スクロール） ───────── */
.menu { overflow: hidden; }
.menu__hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 40px; }
.menu__tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.menu__tab { min-height: 46px; padding: 0 20px; border: 2px solid var(--sumi); border-radius: 999px; background: #fff; font-weight: 900; font-size: 14px; letter-spacing: 0.06em; box-shadow: 3px 3px 0 var(--sumi); transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.menu__tab.is-on { background: var(--aka); color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sumi); }
@media (hover: hover) { .menu__tab:not(.is-on):hover { background: var(--kiiro); } }
.rails { position: relative; }
.rail[hidden] { display: none; }
.rail__track { display: flex; gap: clamp(16px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--pad), (100vw - var(--max)) / 2); padding: 8px max(var(--pad), (100vw - var(--max)) / 2) 22px; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rail__track.is-drag .card { pointer-events: none; }
@media (hover: hover) and (min-width: 760px) { .rails::after { content: ''; position: absolute; top: 0; bottom: 22px; right: 0; width: 8vw; background: linear-gradient(90deg, rgba(248, 243, 234, 0), var(--shiro)); pointer-events: none; } }
.card { flex: 0 0 clamp(250px, 23vw, 310px); scroll-snap-align: start; display: flex; flex-direction: column; border: 2.5px solid var(--sumi); border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 6px 6px 0 var(--sumi); transition: transform 0.35s var(--back), box-shadow 0.35s var(--ease); user-select: none; -webkit-user-select: none; }
@media (hover: hover) { .card:hover { transform: translate(-3px, -4px) rotate(-0.6deg); box-shadow: 9px 10px 0 var(--sumi); } }
.card__ph { position: relative; aspect-ratio: 1; overflow: hidden; border-bottom: 2.5px solid var(--sumi); background: var(--shiro-2); }
.card__ph img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
@media (hover: hover) { .card:hover .card__ph img { transform: scale(1.06); } }
.card__type { aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 6px; border-bottom: 2.5px solid var(--sumi); background: repeating-linear-gradient(-45deg, var(--kiiro) 0 18px, #f0cb3c 18px 36px); }
.card:nth-child(odd) .card__type { background: repeating-linear-gradient(-45deg, var(--aka) 0 18px, #c9352a 18px 36px); color: #fff; }
.card__type .pop { font-size: 18px; padding: 2px 14px; border-radius: 999px; background: var(--sumi); color: #fff; }
.card__type b { font-size: clamp(64px, 6vw, 88px); line-height: 1; }
.card__type small { font-weight: 900; margin-top: -6px; }
.card__t { position: relative; display: grid; gap: 6px; padding: 16px 18px 18px; flex: 1; align-content: start; }
.card__note { position: absolute; top: -18px; right: 14px; padding: 2px 12px; background: var(--kiiro); border: 2px solid var(--sumi); border-radius: 999px; font-size: 14px; transform: rotate(3deg); }
.card__name { font-weight: 900; font-size: 17px; line-height: 1.5; letter-spacing: 0.04em; }
.card__txt { font-size: 13px; line-height: 1.8; color: #5b5149; }
.card__yen { margin-top: auto; padding-top: 6px; font-weight: 900; font-size: 13px; color: var(--aka); }
.card__yen b { font-size: 30px; margin-right: 2px; }
.menu__ctrl { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; }
.menu__prog { display: flex; align-items: center; gap: 16px; flex: 1; max-width: 520px; }
.menu__count { font-size: 15px; white-space: nowrap; }
.menu__count b { font-weight: 400; color: var(--aka); font-size: 20px; }
.menu__bar { flex: 1; height: 6px; border-radius: 6px; background: rgba(29, 24, 20, 0.12); overflow: hidden; }
.menu__bar i { display: block; height: 100%; width: 100%; border-radius: 6px; background: var(--aka); transform-origin: left; transform: scaleX(0.2); transition: transform 0.25s var(--ease); }
.menu__arrows { display: flex; gap: 12px; }
.menu__arrow { width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid var(--sumi); background: #fff; display: grid; place-items: center; box-shadow: 3px 3px 0 var(--sumi); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, opacity 0.3s; }
.menu__arrow svg { width: 22px; height: 22px; }
@media (hover: hover) { .menu__arrow:hover:not(:disabled) { background: var(--kiiro); } }
.menu__arrow:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sumi); }
.menu__arrow:disabled { opacity: 0.3; cursor: default; }
.menu__note { margin-top: 20px; font-size: 12px; font-weight: 700; color: #6b6058; }
@media (max-width: 759px) {
  .card { flex-basis: 74vw; }
  .menu__tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 2px var(--pad) 6px; width: calc(100% + var(--pad) * 2); scrollbar-width: none; }
  .menu__tabs::-webkit-scrollbar { display: none; }
  .menu__tab { flex: none; min-height: 42px; padding: 0 16px; font-size: 13px; }
  .menu__arrows { display: none; }
}

/* ───────── 乾杯の値段 ───────── */
.kanpai { position: relative; background: var(--sumi); color: var(--shiro); padding-bottom: clamp(90px, 10vw, 140px); }
.ticker { overflow: hidden; background: var(--aka); border-block: 3px solid var(--sumi); transform: rotate(-1.5deg) translateY(-14px); margin: 0 -20px; }
.ticker__in { display: flex; width: max-content; animation: tick 34s linear infinite; }
.ticker span { flex: none; padding: 12px 30px; font-weight: 900; font-size: 18px; letter-spacing: 0.06em; color: #fff; white-space: nowrap; }
.ticker span::after { content: '●'; margin-left: 30px; color: var(--kiiro); font-size: 10px; vertical-align: middle; }
.ticker b { font-family: var(--dela); font-weight: 400; font-size: 26px; color: var(--kiiro); }
.kanpai.is-off .ticker__in { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.kanpai__in { padding-top: clamp(60px, 8vw, 110px); display: grid; gap: 40px; }
.kanpai__ttl { font-family: var(--dela); font-size: clamp(36px, 5.4vw, 76px); line-height: 1.25; }
.kanpai__ttl b { font-size: 1.6em; color: var(--kiiro); line-height: 1; vertical-align: -0.08em; margin: 0 0.04em; }
.drinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); }
.drink { background: var(--shiro); color: var(--sumi); border: 3px solid var(--shiro); border-radius: 24px; overflow: hidden; display: grid; padding-bottom: 18px; text-align: center; --rot: 2deg; }
.drink:nth-child(2) { --rot: -2deg; }
.drink .ph { aspect-ratio: 1; margin-bottom: 14px; }
.drink__n { font-weight: 900; font-size: 15px; padding: 0 10px; }
.drink__y { font-size: clamp(44px, 4.4vw, 64px); line-height: 1.1; color: var(--aka); }
.drink__y small { font-size: 0.32em; color: var(--sumi); margin-left: 2px; }
.drink__t { font-size: 12px; font-weight: 700; color: #6b6058; }
.kanpai__note { font-size: 12px; color: rgba(248, 243, 234, 0.6); }
@media (max-width: 759px) { .drinks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .drink { border-radius: 16px; } .drink__n { font-size: 11px; line-height: 1.4; min-height: 3em; } .drink__y { font-size: 30px; } .drink__t { font-size: 10px; } }

/* ───────── 使い方 ───────── */
.use .ttl { margin-bottom: 50px; }
.uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.use-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 14px 14px 22px; background: #fff; border: 2.5px solid var(--sumi); border-radius: 22px; box-shadow: 6px 6px 0 var(--sumi); }
.use-card:nth-child(even) { --rot: 1.5deg; }
.use-card .ph { aspect-ratio: 1; border-radius: 14px; margin-bottom: 6px; }
.use-card__tag { position: absolute; top: 2px; left: -8px; padding: 2px 14px; background: var(--aka); color: #fff; border: 2px solid var(--sumi); border-radius: 999px; font-size: 16px; transform: rotate(-6deg); z-index: 1; }
.use-card h3 { font-weight: 900; font-size: 18px; line-height: 1.5; padding: 0 4px; }
.use-card p:last-child { font-size: 13px; line-height: 1.85; color: #5b5149; padding: 0 4px; }
@media (max-width: 1000px) { .uses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .uses { gap: 14px 10px; } .use-card { padding: 10px 10px 16px; border-radius: 18px; } .use-card h3 { font-size: 15px; } .use-card p:last-child { font-size: 12px; } }

/* ───────── 宴会コース ───────── */
.course { background: var(--aka); color: #fff; }
.course::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 40px; background: var(--shiro); -webkit-mask: radial-gradient(22px 24px at 50% 0, #000 98%, transparent 101%) 0 0 / 52px 40px repeat-x; mask: radial-gradient(22px 24px at 50% 0, #000 98%, transparent 101%) 0 0 / 52px 40px repeat-x; }
.course__hd { display: grid; grid-template-columns: 1fr minmax(0, 0.9fr); gap: 30px 60px; align-items: end; margin-bottom: 50px; }
@media (max-width: 900px) { .course__hd { grid-template-columns: 1fr; } }
.courses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.crs { display: flex; flex-direction: column; background: var(--shiro); color: var(--sumi); border: 2.5px solid var(--sumi); border-radius: 22px; overflow: hidden; box-shadow: 7px 7px 0 var(--sumi); }
.crs:nth-child(even) { --rot: 1.5deg; }
.crs__ph { aspect-ratio: 4 / 3; border-bottom: 2.5px solid var(--sumi); }
.crs__t { position: relative; display: grid; gap: 4px; padding: 18px 18px 12px; flex: 1; align-content: start; }
.crs__badge { position: absolute; top: -18px; left: 14px; padding: 2px 12px; background: var(--kiiro); border: 2px solid var(--sumi); border-radius: 999px; font-size: 14px; transform: rotate(-3deg); }
.crs__name { font-weight: 900; font-size: 17px; }
.crs__yen { font-weight: 900; color: var(--aka); }
.crs__yen b { font-size: 38px; line-height: 1.1; margin-right: 2px; }
.crs__yen small { font-size: 11px; color: var(--sumi); }
.crs__drink { font-weight: 900; font-size: 13px; padding: 2px 10px; justify-self: start; border-radius: 999px; background: var(--sumi); color: #fff; }
.crs__txt { font-size: 13px; line-height: 1.8; margin-top: 6px; color: #5b5149; }
.crs__ppl { font-size: 12px; font-weight: 700; color: #6b6058; }
.crs__go { display: block; padding: 14px 18px; border-top: 2.5px dashed rgba(29, 24, 20, 0.25); font-weight: 900; font-size: 14px; color: var(--aka); transition: background-color 0.25s; }
@media (hover: hover) { .crs__go:hover { background: var(--kiiro); } }
.course__menu { margin-top: 40px; padding: 24px 28px; border-radius: 22px; border: 2.5px dashed rgba(255, 255, 255, 0.6); }
.course__menu-ttl { font-weight: 900; font-size: 14px; margin-bottom: 14px; }
.course__menu-ttl .pop { font-size: 18px; padding: 2px 14px; margin-right: 10px; border-radius: 999px; background: var(--kiiro); color: var(--sumi); }
.course__menu ol { display: flex; flex-wrap: wrap; gap: 8px; counter-reset: c; }
.course__menu li { counter-increment: c; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-weight: 900; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.course__menu li::before { content: counter(c); width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--aka); display: grid; place-items: center; font-family: var(--dela); font-size: 12px; }
.course__menu-note { margin-top: 16px; font-size: 12px; font-weight: 700; opacity: 0.85; }
@media (max-width: 1000px) { .courses { grid-template-columns: 1fr 1fr; gap: 24px 14px; } }
@media (max-width: 520px) { .courses { grid-template-columns: 1fr; } .crs { flex-direction: row; flex-wrap: wrap; } .crs__ph { width: 100%; aspect-ratio: 16 / 9; } .course__menu { padding: 20px 16px; } .course__menu li { font-size: 13px; } }

/* ───────── お席 ───────── */
.seats .ttl { margin-bottom: 50px; }
.seat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: clamp(12px, 1.6vw, 20px); }
.seat { position: relative; border: 2.5px solid var(--sumi); border-radius: 22px; overflow: hidden; box-shadow: 6px 6px 0 var(--sumi); }
.seat .ph { aspect-ratio: 1; }
.seat--l { grid-column: span 2; grid-row: span 2; }
.seat--l .ph { aspect-ratio: auto; height: 100%; }
.seat:nth-child(3) { --rot: 1.5deg; }
.seat__n { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: baseline; gap: 8px; padding: 4px 14px; background: var(--shiro); border: 2px solid var(--sumi); border-radius: 999px; font-weight: 900; font-size: 14px; }
.seat__n small { font-size: 12px; color: var(--aka); }
.seats__note { margin-top: 30px; font-size: 13px; font-weight: 700; line-height: 2; max-width: 820px; }
@media (max-width: 759px) { .seat-grid { grid-template-columns: 1fr 1fr; } .seat--l { grid-column: span 2; grid-row: auto; } .seat--l .ph { aspect-ratio: 4 / 3; height: auto; } .seat__n { font-size: 12px; padding: 3px 10px; left: 8px; bottom: 8px; } }

/* ───────── アクセス ───────── */
.access { background: #fff; border-top: 3px solid var(--sumi); }
.access .ttl { margin-bottom: 44px; }
.route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-bottom: 60px; counter-reset: r; }
.route__step { position: relative; display: grid; gap: 12px; }
.route__step .ph { aspect-ratio: 1; border: 2.5px solid var(--sumi); border-radius: 20px; box-shadow: 5px 5px 0 var(--sumi); }
.route__step:not(:last-child)::after { content: ''; position: absolute; top: calc(50% - 40px); right: calc(clamp(14px, 2vw, 28px) * -0.5 - 12px); z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: var(--aka); border: 2px solid var(--sumi); -webkit-mask: none; }
.route__n { position: absolute; top: -14px; left: -10px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--aka); color: #fff; border: 2.5px solid var(--sumi); font-size: 24px; z-index: 1; }
.route__t { font-size: 13px; font-weight: 700; line-height: 1.8; }
.route__t b { display: block; font-weight: 900; font-size: 17px; }
@media (max-width: 759px) {
  .pin__lbl { font-size: 10px; padding: 3px 9px; box-shadow: 2px 2px 0 var(--sumi); }
  .pin--sis .pin__lbl { font-size: 10px; }
  .pin--sis .pin__lbl small { font-size: 8px; }
  .pin--me { transform: translate(-50%, -12px); flex-direction: column-reverse; }
  .pin--me .pin__lbl { font-size: 13px; padding: 5px 12px 5px 8px; }
  .pin__logo { width: 20px; }
}
@media (max-width: 759px) { .route { grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .route__n { width: 36px; height: 36px; font-size: 16px; top: -10px; left: -6px; } .route__t { font-size: 11px; } .route__t b { font-size: 13px; } .route__step:not(:last-child)::after { display: none; } }
.access__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 1000px) { .access__grid { grid-template-columns: 1fr; } }
.map { position: relative; border: 2.5px solid var(--sumi); border-radius: 24px; overflow: hidden; background: #f3ece0; box-shadow: 8px 8px 0 var(--sumi); }
.map__svg { display: block; width: 100%; height: auto; }
.map__svg .m-water { fill: #bcd3e6; }
.map__svg .m-river, .map__svg .m-naka, .map__svg .m-hakata { fill: none; stroke: #bcd3e6; stroke-linejoin: round; stroke-linecap: round; }
.map__svg .m-river { stroke-width: 9; } .map__svg .m-naka { stroke-width: 44; } .map__svg .m-hakata { stroke-width: 18; }
.map__svg .m-park { fill: #d9e6c8; }
.map__svg .m-shrine { fill: #f1d1a8; stroke: #d6a96d; stroke-width: 1.5; }
.map__svg .m-t { fill: none; stroke: #fff; stroke-width: 5; }
.map__svg .m-s { fill: none; stroke: #fff; stroke-width: 9; }
.map__svg .m-p { fill: none; stroke: #f6d8a5; stroke-width: 12; }
.map__svg .m-st circle { fill: #fff; stroke: var(--sumi); stroke-width: 3; }
.map__svg text { font-family: var(--go); font-weight: 900; fill: var(--sumi); font-size: 17px; paint-order: stroke; stroke: #f3ece0; stroke-width: 5px; }
.map__svg .m-lbl { fill: #9b6a2f; font-size: 15px; }
.map__svg .m-riv { fill: #5b86ad; font-size: 14px; letter-spacing: 0.4em; }
.map__pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pin__lbl { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: 2px solid var(--sumi); border-radius: 999px; background: #fff; font-weight: 900; font-size: 12px; white-space: nowrap; box-shadow: 3px 3px 0 var(--sumi); line-height: 1.3; }
.pin__lbl small { display: block; font-size: 9px; color: #6b6058; }
.pin--sis .pin__lbl { flex-direction: column; gap: 0; background: var(--sumi); color: var(--shiro); }
.pin--sis .pin__lbl small { color: rgba(248, 243, 234, 0.7); }
.pin__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sumi); border: 2px solid #fff; }
.pin--me { z-index: 2; }
.pin--me .pin__lbl { background: var(--aka); color: #fff; font-family: var(--dela); font-weight: 400; font-size: 16px; padding: 8px 16px 8px 10px; animation: hop 2.4s var(--back) infinite; }
.pin__logo { width: 26px; color: #fff; }
.pin--me .pin__dot { width: 16px; height: 16px; background: var(--aka); box-shadow: 0 0 0 6px rgba(211, 58, 46, 0.25); }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-8px); } 90% { transform: translateY(0); } }
.info { display: grid; gap: 18px; }
.info__name { display: flex; align-items: center; gap: 10px; font-family: var(--dela); font-size: 28px; }
.info__name .logo { width: 48px; color: var(--aka); }
.info__name small { font-family: var(--go); font-weight: 700; font-size: 12px; color: #6b6058; }
.info__now { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; background: var(--shiro-2); font-weight: 900; font-size: 13px; }
.info__now::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #9b9087; }
.info__now.is-open { background: #e3f1dc; }
.info__now.is-open::before { background: #3e9a3a; box-shadow: 0 0 0 4px rgba(62, 154, 58, 0.2); }
.info__dl { display: grid; grid-template-columns: 6em minmax(0, 1fr); font-size: 14px; border-top: 2px solid var(--sumi); }
.info__dl dt, .info__dl dd { padding: 11px 0; border-bottom: 1px dashed rgba(29, 24, 20, 0.25); }
.info__dl dt { font-weight: 900; color: var(--aka); }
.info__dl dd { font-weight: 700; line-height: 1.8; }
.info__dl small { font-weight: 500; color: #6b6058; }
.info__dl a { text-decoration: underline; text-underline-offset: 4px; }
.info__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ───────── 姉妹店 ───────── */
.sister { background: var(--sumi); padding: clamp(80px, 10vw, 130px) 0; }
.sister__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 26px; overflow: hidden; border: 1px solid rgba(236, 230, 219, 0.2); background: #0c0b0a; color: #ece6db; transition: border-color 0.5s; }
@media (hover: hover) { .sister__card:hover { border-color: rgba(188, 156, 108, 0.7); } .sister__card:hover .sister__ph img { transform: scale(1.05); } }
.sister__ph { position: relative; min-height: 360px; overflow: hidden; }
.sister__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sister__body { display: grid; gap: 14px; align-content: center; padding: clamp(28px, 5vw, 64px); font-family: 'Shippori Mincho', serif; }
.sister__logo { width: 72px; aspect-ratio: 1; background: #ece6db; -webkit-mask: url(images/hoteiya-logo.png) center / contain no-repeat; mask: url(images/hoteiya-logo.png) center / contain no-repeat; }
.sister__kick { font-size: 12px; letter-spacing: 0.24em; color: #bc9c6c; }
.sister__ttl { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.6; letter-spacing: 0.14em; }
.sister__txt { font-size: 14px; line-height: 2.1; color: #b9b1a4; letter-spacing: 0.06em; }
.sister__stores { font-size: 12px; letter-spacing: 0.12em; color: #8a8378; }
.sister__go { font-size: 14px; letter-spacing: 0.14em; color: #bc9c6c; text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 759px) { .sister__card { grid-template-columns: 1fr; } .sister__ph { min-height: 220px; } }

/* ───────── フッター ───────── */
.ft { background: var(--aka); color: #fff; padding: clamp(70px, 8vw, 110px) 0 calc(30px + env(safe-area-inset-bottom)); }
.ft__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px 60px; align-items: start; }
.ft__brand { display: grid; justify-items: start; gap: 8px; }
.ft__logo { width: 96px; color: #fff; }
.ft__name { font-size: 30px; }
.ft__copy { font-weight: 700; font-size: 13px; }
.ft__info { display: grid; gap: 8px; font-weight: 700; font-size: 13px; line-height: 1.9; }
.ft__info a { text-decoration: underline; text-underline-offset: 4px; }
.ft__nav { display: grid; gap: 8px; font-weight: 900; font-size: 14px; }
.ft__bottom { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 18px; border-top: 2px solid rgba(255, 255, 255, 0.35); font-size: 11px; font-weight: 700; }
@media (max-width: 900px) { .ft__in { grid-template-columns: 1fr; } .ft__nav { grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 22px; } }
@media (max-width: 759px) { .ft { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }

/* ───────── スマホの予約ボタン ───────── */
.dock { display: none; }
@media (max-width: 759px) {
  .dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 8px; transform: translateY(150%); transition: transform 0.5s var(--back); }
  .dock.is-on { transform: none; }
  .dock__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 58px; border: 2.5px solid var(--sumi); border-radius: 18px; background: var(--shiro); font-weight: 900; font-size: 12px; box-shadow: 3px 3px 0 var(--sumi); line-height: 1.3; }
  .dock__btn svg { width: 20px; height: 20px; color: var(--aka); }
  .dock__btn--main { background: var(--aka); color: #fff; font-size: 16px; }
  .dock__btn--main small { font-size: 10px; opacity: 0.9; }
  .dock__btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sumi); }
}