/* 酒と炭 とおあかり（架空）— Web工房Pono 自主制作 */
:root { --sumi: #16120F; --sumi2: #211B17; --sumi3: #2C241F; --kin: #F2EADB; --kin2: #E7DCC7; --ink: #241C17; --sub: #6B5E52; --aka: #B5402A; --aka2: #D2563C; --gold: #C79A57; --board: #1E2A24;
  --line: rgba(36,28,23,.15); --lineK: rgba(242,234,219,.14); --mc: "Shippori Mincho B1", serif; --kl: "Klee One", cursive; --jp: "Noto Sans JP", sans-serif; --ease: cubic-bezier(.2,.75,.2,1); --db: 31px; --hh: 78px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--kin); color: var(--ink); font-family: var(--jp); font-size: 15px; line-height: 2; letter-spacing: .06em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--mc); font-weight: 700; line-height: 1.55; letter-spacing: .1em; }
p { margin: 0; } ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; } button { cursor: pointer; }
.wrap { width: min(1180px, calc(100% - 72px)); margin: 0 auto; } .narrow { max-width: 860px; }
.eb { font-family: var(--mc); font-size: 13px; letter-spacing: .3em; color: var(--aka); text-transform: uppercase; }
.note { margin-top: 16px; font-size: 12.5px; color: var(--sub); }
.demo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: #000; color: rgba(255,255,255,.75); font-size: 12px; text-align: center; padding: 7px 14px; line-height: 1.6; } .demo-bar a { text-decoration: underline; margin-left: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 34px; border: 1px solid currentColor; background: transparent; font-family: var(--mc); font-weight: 700; font-size: 15px; letter-spacing: .14em; transition: .35s var(--ease); }
.btn--aka { background: var(--aka); border-color: var(--aka); color: #fff; } .btn--aka:hover { background: var(--aka2); border-color: var(--aka2); }
.btn--line { background: #06C755; border-color: #06C755; color: #fff; } .btn--line2 { border-color: var(--gold); color: var(--gold); } .btn--line2:hover { background: var(--gold); color: var(--sumi); }
.btn--o { border-color: var(--line); color: var(--ink); } .btn--o:hover { border-color: var(--ink); }
.btn--full { width: 100%; } .btn:disabled { opacity: .35; cursor: default; }
.more { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mc); font-weight: 700; color: var(--aka); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.more::after { content: "→"; transition: transform .3s var(--ease); } .more:hover::after { transform: translateX(4px); }
.sec--k .more { color: var(--gold); }
.more-r { text-align: right; margin-top: 30px; }

/* 灯りのロゴ */
.lamp { width: 30px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; }
.lamp__b { fill: var(--aka); stroke: var(--aka); filter: drop-shadow(0 0 6px rgba(226,90,50,.7)); animation: flick 3.4s ease-in-out infinite; } .lamp__l { stroke: rgba(0,0,0,.35); }
@keyframes flick { 0%, 100% { opacity: 1; } 45% { opacity: .86; } 50% { opacity: .96; } 70% { opacity: .9; } }

/* ヘッダー */
.hd { position: fixed; top: var(--db); left: 0; right: 0; z-index: 80; display: flex; align-items: center; gap: 40px; height: var(--hh); padding: 0 36px; color: var(--kin); transition: background .4s; }
.hd.is-solid { background: rgba(22,18,15,.92); backdrop-filter: blur(8px); }
.lg { display: flex; align-items: center; gap: 12px; font-family: var(--mc); font-weight: 800; font-size: 22px; letter-spacing: .2em; line-height: 1.1; }
.lg small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .3em; opacity: .75; }
.hd__nav { display: flex; gap: 34px; margin-left: auto; font-family: var(--mc); font-weight: 500; font-size: 14.5px; letter-spacing: .14em; }
.hd__nav a { position: relative; padding: 4px 0; } .hd__nav a::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 5px; height: 5px; border-radius: 50%; background: var(--aka2); transform: translateX(-50%) scale(0); transition: .3s; }
.hd__nav a:hover::after, .hd__nav a.is-cur::after { transform: translateX(-50%) scale(1); }
.hd__tel { font-family: var(--mc); font-weight: 700; font-size: 17px; letter-spacing: .08em; border: 1px solid var(--lineK); padding: 8px 18px; }
.mb { display: none; width: 46px; height: 46px; border: 1px solid var(--lineK); background: none; position: relative; color: var(--kin); }
.mb i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: .3s; } .mb i:first-child { top: 19px; } .mb i:last-child { top: 26px; }
.is-open .mb i:first-child { top: 22px; transform: rotate(45deg); } .is-open .mb i:last-child { top: 22px; transform: rotate(-45deg); }
.dr { position: fixed; inset: 0; z-index: 75; background: var(--sumi); color: var(--kin); padding: calc(var(--db) + var(--hh) + 30px) 30px 40px; opacity: 0; visibility: hidden; transition: .4s; }
.is-open .dr { opacity: 1; visibility: visible; }
.dr nav a { display: block; font-family: var(--mc); font-weight: 700; font-size: 22px; padding: 14px 0; border-bottom: 1px solid var(--lineK); letter-spacing: .14em; }
.dr__i { margin-top: 22px; font-size: 13px; opacity: .7; }

/* ヒーロー */
.hero { position: relative; height: max(640px, 100svh); overflow: hidden; background: var(--sumi); color: var(--kin); }
.hero__bg { position: absolute; inset: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.66); transform: scale(1.1); transition: transform 3s var(--ease); }
.is-ready .hero__bg img { transform: scale(1.02); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,18,15,.75), transparent 55%), linear-gradient(0deg, rgba(22,18,15,.85), transparent 40%); }
.hero__glow { position: absolute; left: 63%; top: 46%; width: 420px; height: 420px; margin: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(255,120,60,.32), transparent 65%); mix-blend-mode: screen; animation: glow 4s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .6; transform: scale(1.08); } }
.hero__in { position: absolute; inset: calc(var(--db) + var(--hh)) 6vw 9vh; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero__v { writing-mode: vertical-rl; font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: .3em; line-height: 1.7; align-self: flex-start; margin-top: 4vh; }
.hero__v span { display: block; opacity: 0; transform: translateY(-24px); transition: 1.4s var(--ease); } .hero__v span:nth-child(2) { transition-delay: .35s; margin-top: 2.4em; }
.is-ready .hero__v span, .is-shot .hero__v span { opacity: 1; transform: none; }
.hero__c { max-width: 380px; text-align: right; opacity: 0; transition: 1.4s var(--ease) .9s; } .is-ready .hero__c, .is-shot .hero__c { opacity: 1; }
.hero__lg { font-family: var(--mc); font-size: 14px; letter-spacing: .3em; } .hero__lg b { display: block; font-size: 40px; font-weight: 800; letter-spacing: .2em; }
.hero__d { margin: 16px 0 22px; font-size: 14.5px; opacity: .85; line-height: 2.1; }
.hero__now { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border: 1px solid var(--lineK); font-size: 13px; }
.hero__now i { width: 9px; height: 9px; border-radius: 50%; background: #776a5e; } .hero__now.is-on i { background: #F07A4A; box-shadow: 0 0 10px #F07A4A; animation: flick 2s infinite; }

/* セクション */
.sec { padding: 130px 0; position: relative; } .sec--t { padding-top: 60px; }
.sec--k { background: var(--sumi); color: var(--kin); } .sec--k .eb { color: var(--gold); }
.sh { margin-bottom: 54px; } .sh h2 { font-size: clamp(28px, 3.2vw, 42px); margin-top: 6px; } .sh > p, .sh div > p:not(.eb) { margin-top: 10px; opacity: .78; font-size: 14.5px; }
.sh--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .rv.is-in { opacity: 1; transform: none; } .rv-d1 { transition-delay: .15s; }

/* 黒板 */
.today__in { display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; align-items: center; }
.today__t h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 8px 0 18px; } .today__t p:not(.eb) { opacity: .75; margin-bottom: 26px; }
.board { position: relative; background: var(--board); background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(160deg, rgba(255,255,255,.04), transparent 60%); background-size: 6px 6px, auto; border: 14px solid #5A3F2A; box-shadow: inset 0 0 40px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.4); padding: 34px 36px 28px; font-family: var(--kl); color: #EEF0E8; }
.board__d { font-size: 20px; text-align: center; letter-spacing: .14em; margin-bottom: 18px; } .board__d span { display: block; font-size: 14px; opacity: .7; }
.board ul li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 12px 0; border-bottom: 1px dashed rgba(238,240,232,.25); }
.board b { font-weight: 600; font-size: 20px; } .board small { grid-column: 1; font-size: 13px; opacity: .7; } .board li span { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 19px; color: #F4D37A; }
.board li.is-sold b { text-decoration: line-through; opacity: .5; } .board li.is-sold span { color: #F28C7A; font-size: 16px; transform: rotate(-6deg); border: 2px solid currentColor; padding: 0 8px; border-radius: 4px; }
.board__closed { display: block !important; text-align: center; font-size: 20px; padding: 30px 0 !important; line-height: 1.8; }
.board__u { text-align: right; font-size: 12px; opacity: .55; margin-top: 12px; }

/* 物語 */
.story__in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center; }
.story__img { overflow: hidden; aspect-ratio: 4/3; } .story__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.story__v { font-family: var(--mc); font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.8; letter-spacing: .14em; margin-bottom: 26px; }
.story__t p:not(.story__v) { color: var(--sub); margin-bottom: 14px; }

/* 料理 */
.fds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fd { margin: 0; } .fd__i { overflow: hidden; aspect-ratio: 1; } .fd__i img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .fd:hover img { transform: scale(1.06); }
.fd figcaption { margin-top: 14px; font-size: 13px; opacity: .72; line-height: 1.8; } .fd b { display: block; font-family: var(--mc); font-size: 18px; opacity: 1; color: var(--kin); }

/* 日本酒の地図 */
.skm { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.skm__map { position: relative; aspect-ratio: 4/3; background: #fff; border: 1px solid var(--line); background-image: linear-gradient(var(--line), var(--line)), linear-gradient(90deg, var(--line), var(--line)); background-size: 100% 1px, 1px 100%; background-position: center; background-repeat: no-repeat; }
.skm__ax { position: absolute; font-family: var(--mc); font-weight: 700; font-size: 13px; color: var(--sub); letter-spacing: .14em; }
.skm__ax--t { top: 10px; left: 50%; transform: translateX(-50%); } .skm__ax--b { bottom: 10px; left: 50%; transform: translateX(-50%); } .skm__ax--l { left: 12px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; } .skm__ax--r { right: 12px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.sm__d { position: absolute; left: calc(8% + var(--x) * .84); top: calc(8% + var(--y) * .84); transform: translate(-50%, -50%); border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 1; }
.sm__d::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--sumi); border: 3px solid var(--kin); box-shadow: 0 0 0 1px var(--sumi); transition: .3s var(--ease); }
.sm__d span { font-family: var(--mc); font-size: 12px; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,.85); padding: 0 6px; }
.sm__d:hover::before { transform: scale(1.25); } .sm__d.is-on::before { background: var(--aka); box-shadow: 0 0 0 6px rgba(181,64,42,.2); transform: scale(1.3); } .sm__d.is-on span { color: var(--aka); }
.skm__info { background: var(--sumi); color: var(--kin); padding: 36px 34px; min-height: 260px; }
.skm__info.is-anim { animation: fi .5s var(--ease); } @keyframes fi { from { opacity: 0; transform: translateY(10px); } }
.skm__ph { opacity: .6; text-align: center; padding-top: 70px; }
.skm__pref { font-size: 12.5px; color: var(--gold); letter-spacing: .2em; } .skm__n { font-family: var(--mc); font-weight: 800; font-size: 26px; margin: 4px 0 10px; } .skm__d { font-size: 14px; opacity: .8; margin-bottom: 18px; }
.skm__info dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .skm__info dl div { background: var(--sumi3); padding: 10px 14px; } .skm__info dt { font-size: 11px; opacity: .6; } .skm__info dd { font-family: var(--mc); font-weight: 700; }

/* コース */
.css { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cs { border: 1px solid var(--lineK); padding: 36px 32px; position: relative; }
.cs:nth-child(2) { border-color: var(--gold); } .cs:nth-child(2)::before { content: "いちばん人気"; position: absolute; top: -12px; left: 28px; background: var(--gold); color: var(--sumi); font-size: 12px; padding: 0 12px; font-weight: 700; }
.cs__n { font-family: var(--mc); font-weight: 800; font-size: 21px; } .cs__p { font-family: var(--mc); font-size: 30px; color: var(--gold); margin: 6px 0 16px; } .cs__p small { font-size: 12px; color: var(--kin); opacity: .65; margin-left: 4px; }
.cs ul li { font-size: 13.5px; padding: 6px 0; border-top: 1px dotted var(--lineK); opacity: .85; }
.notes { margin-top: 30px; } .notes li { font-size: 13px; opacity: .72; padding-left: 1.2em; text-indent: -1.2em; } .notes li::before { content: "※ "; }

/* 席・持ち帰り */
.seats__in, .to__in, .info__in, .dg { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; }
.seats__img { overflow: hidden; aspect-ratio: 3/2; } .seats__img img { width: 100%; height: 100%; object-fit: cover; }
.seats h2, .to h2, .info h2, .dg h2 { font-size: clamp(26px, 2.8vw, 36px); margin: 8px 0 18px; } .seats p:not(.eb), .to p:not(.eb), .dg p:not(.eb) { opacity: .8; margin-bottom: 26px; }
.to__l { display: grid; gap: 12px; } .to__l li { display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; background: var(--sumi2); padding: 10px; }
.to__l img { width: 90px; height: 70px; object-fit: cover; } .to__l b { font-family: var(--mc); } .to__l span { font-family: var(--mc); color: var(--gold); padding-right: 10px; }
.dl div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.dl dt { font-family: var(--mc); font-weight: 700; color: var(--aka); } .dl dd small { display: block; font-size: 12px; color: var(--sub); }
.cal { background: #fff; padding: 26px; border: 1px solid var(--line); } .cal__t { font-family: var(--mc); font-weight: 700; font-size: 18px; margin-bottom: 10px; }
.cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 14px; } .cal__g b { font-size: 11.5px; color: var(--sub); }
.cal__g span { padding: 6px 0; } .cal__g span.x { background: var(--aka); color: #fff; } .cal__g span.o { background: var(--kin2); } .cal__g span.t { outline: 2px solid var(--ink); }
.cal__n { font-size: 12px; color: var(--sub); margin-top: 10px; } .cal__n i { display: inline-block; width: 12px; height: 12px; background: var(--aka); vertical-align: -1px; margin: 0 6px 0 12px; } .cal__n i:first-child { margin-left: 0; } .cal__n i.o { background: var(--kin2); }

/* CTA・フッター */
.cta { position: relative; padding: 150px 0; color: var(--kin); overflow: hidden; }
.cta__bg { position: absolute; inset: 0; } .cta__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.38); }
.cta__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.cta__v { writing-mode: vertical-rl; font-family: var(--mc); font-weight: 800; font-size: clamp(32px, 4vw, 54px); letter-spacing: .3em; line-height: 1.8; }
.cta__in > div { max-width: 480px; } .cta__d { opacity: .85; margin-bottom: 26px; } .cta__b { display: flex; gap: 12px; flex-wrap: wrap; } .cta__b .btn { flex: 1; min-width: 200px; } .cta__t { margin-top: 16px; font-size: 13.5px; opacity: .8; } .cta__t a { font-family: var(--mc); font-size: 18px; font-weight: 700; }
.ft { background: #0D0B09; color: rgba(242,234,219,.72); padding: 80px 0 30px; font-size: 13px; }
.ft__in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .ft__in p { margin-top: 20px; line-height: 1.9; } .lg--ft { color: var(--kin); }
.ft nav { display: grid; gap: 6px; align-content: start; font-family: var(--mc); } .ft nav a:hover { color: var(--kin); }
.ft__b { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--lineK); } .ft__b a { text-decoration: underline; }
.sp-rsv { display: none; }

/* 下層 */
.ph { background: var(--sumi); color: var(--kin); padding: calc(var(--db) + var(--hh) + 60px) 0 60px; }
.ph__in { display: flex; align-items: flex-end; gap: 40px; }
.ph__v { writing-mode: vertical-rl; font-family: var(--mc); font-weight: 800; font-size: 54px; letter-spacing: .2em; line-height: 1.2; color: var(--aka2); }
.ph h1 { font-size: clamp(28px, 3.4vw, 44px); } .ph__l { opacity: .75; font-size: 14px; margin-top: 8px; }
.mn { display: grid; grid-template-columns: 1fr 320px; gap: 50px; align-items: start; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; background: none; padding: 12px 18px; font-family: var(--mc); font-weight: 700; font-size: 16px; color: var(--sub); position: relative; }
.tabs button.is-on { color: var(--ink); } .tabs button.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--aka); }
.mg { display: none; } .mg.is-on { display: block; animation: fi .4s var(--ease); }
.mi { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px dotted var(--line); } .mi.is-out { display: none; }
.mi b { font-family: var(--mc); font-size: 18px; } .mi small { display: block; font-size: 12.5px; color: var(--sub); } .mi > i { flex: 1; border-bottom: 1px dotted var(--line); } .mi > span { font-family: var(--mc); font-weight: 700; font-size: 18px; white-space: nowrap; }
.mi__a { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .ag { font-style: normal; font-size: 10.5px; border: 1px solid var(--line); padding: 0 6px; line-height: 1.7; color: var(--sub); }
.mn__no { padding: 30px 0; color: var(--sub); }
.xab { position: sticky; top: calc(var(--db) + 90px); background: #fff; border: 1px solid var(--line); padding: 26px 24px; }
.xab__t { font-family: var(--mc); font-weight: 800; font-size: 17px; } .xab__d { font-size: 12.5px; color: var(--sub); margin: 6px 0 14px; } .xab__n { font-size: 11.5px; color: var(--sub); margin-top: 14px; line-height: 1.8; }
.xas { display: flex; flex-wrap: wrap; gap: 6px; } .xa input { position: absolute; opacity: 0; pointer-events: none; }
.xa span { display: inline-block; border: 1px solid var(--line); padding: 4px 12px; font-size: 13px; cursor: pointer; transition: .2s; } .xa input:checked + span { background: var(--aka); border-color: var(--aka); color: #fff; text-decoration: line-through; } .xa input:focus-visible + span { outline: 2px solid var(--gold); }
.skm--big .skm__map { aspect-ratio: 16/10; }
.dgc { background: var(--kin); color: var(--ink); padding: 36px 34px; min-height: 280px; }
.dq { display: none; } .dq.is-on { display: block; animation: fi .4s var(--ease); }
.dq__n { font-size: 12px; color: var(--aka); letter-spacing: .2em; } .dq__t { font-family: var(--mc); font-weight: 800; font-size: 22px; margin: 6px 0 18px; }
.dq__o { display: grid; gap: 8px; } .dq__o button { border: 1px solid var(--line); background: #fff; padding: 14px 18px; text-align: left; font-family: var(--mc); font-weight: 700; font-size: 16px; transition: .2s; } .dq__o button:hover { border-color: var(--aka); color: var(--aka); }
.dg__r { animation: fi .5s var(--ease); } .dg__k { font-size: 12.5px; color: var(--aka); letter-spacing: .2em; } .dg__n { font-family: var(--mc); font-weight: 800; font-size: 28px; margin: 4px 0 10px; } .dg__d { font-size: 14px; color: var(--sub); }
.dg__re { margin-top: 16px; border: 0; background: none; text-decoration: underline; color: var(--sub); }
.skt { width: 100%; border-collapse: collapse; } .skt th, .skt td { padding: 14px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.skt thead th { font-size: 12px; color: var(--sub); } .skt tbody th { font-family: var(--mc); font-size: 16px; } .skt tbody th small { display: block; font-family: var(--jp); font-size: 12px; color: var(--sub); font-weight: 400; } .skt td:last-child { font-family: var(--mc); font-weight: 700; white-space: nowrap; }
.tow { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; } .tow > *, .rvw > * { min-width: 0; }
.tis { display: grid; gap: 14px; }
.ti { display: grid; grid-template-columns: 130px 1fr auto; gap: 20px; align-items: center; background: #fff; padding: 12px; border: 1px solid var(--line); transition: .3s; } .ti.is-on { border-color: var(--aka); box-shadow: 0 0 0 1px var(--aka); }
.ti img { width: 130px; height: 100px; object-fit: cover; } .ti b { font-family: var(--mc); font-size: 18px; } .ti small { display: block; font-size: 12.5px; color: var(--sub); }
.ti__p { font-family: var(--mc); font-weight: 700; font-size: 18px; margin-top: 4px; } .ti__p small { display: inline; font-family: var(--jp); font-size: 11px; font-weight: 400; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); } .qty button { width: 40px; height: 44px; border: 0; background: none; font-size: 20px; } .qty span { min-width: 30px; text-align: center; font-family: var(--mc); font-weight: 700; font-size: 18px; }
.tsum, .sum { position: sticky; top: calc(var(--db) + 90px); background: var(--sumi); color: var(--kin); padding: 28px 26px; }
.tsum__t, .sum__t { font-family: var(--mc); font-weight: 800; font-size: 19px; margin-bottom: 10px; }
.tsum ul li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lineK); font-size: 13.5px; } .tsum__e { opacity: .55; }
.tsum__p { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 18px; } .tsum__p span { font-size: 12px; opacity: .7; } .tsum__p b { font-family: var(--mc); font-size: 28px; color: var(--gold); }
.tsum__l { font-size: 12.5px; opacity: .75; margin-bottom: 6px; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; } .slots__d { grid-column: 1 / -1; font-family: var(--mc); font-weight: 700; } .slots__w { grid-column: 1 / -1; font-size: 12px; color: #F28C7A; }
.slots button { height: 40px; border: 1px solid var(--lineK); background: none; font-size: 14px; } .slots button:disabled { opacity: .25; cursor: default; } .slots button.is-on { background: var(--aka); border-color: var(--aka); }
.tsum .two, .tsum label { display: block; } .tsum label { font-size: 12.5px; margin-bottom: 10px; }
.tsum input { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; border: 1px solid var(--lineK); background: var(--sumi2); color: var(--kin); font-size: 16px; }
.tsum__n { font-size: 11.5px; opacity: .6; margin-top: 10px; line-height: 1.8; }
.is-err { border-color: #F28C7A !important; background: rgba(242,140,122,.12) !important; }

/* 予約 */
.rvw { display: grid; grid-template-columns: 1fr 330px; gap: 44px; align-items: start; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 26px; counter-reset: s; }
.steps li { counter-increment: s; background: var(--kin2); padding: 10px 6px; text-align: center; font-family: var(--mc); font-weight: 700; font-size: 13px; color: var(--sub); }
.steps li::before { content: counter(s) " "; } .steps li.is-on { background: var(--sumi); color: var(--kin); }
.rp { display: none; background: #fff; border: 1px solid var(--line); padding: 30px; } .rp.is-on { display: block; animation: fi .45s var(--ease); }
.rp__l { display: block; font-family: var(--mc); font-weight: 700; margin: 20px 0 10px; } .rp__l select { display: block; margin-top: 8px; width: 100%; padding: 12px; border: 1px solid var(--line); background: var(--kin); font-size: 16px; }
.rp > .btn--full { margin-top: 24px; } .rp__h { font-family: var(--mc); font-weight: 700; font-size: 17px; margin-bottom: 12px; } .rp__m { font-size: 13.5px; color: var(--aka); margin-top: 8px; min-height: 1.6em; } .rp__r { font-size: 12.5px; color: var(--sub); margin: 12px 0; }
.rcal__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: var(--mc); font-size: 18px; } .rcal__h button { width: 40px; height: 40px; border: 1px solid var(--line); background: none; font-size: 20px; } .rcal__h button:disabled { opacity: .25; }
.rcal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .rcal__g b { text-align: center; font-size: 12px; color: var(--sub); }
.rcal__g button { min-height: 52px; border: 1px solid var(--line); background: var(--kin); font-family: var(--mc); font-size: 16px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.rcal__g button small { font-family: var(--jp); font-size: 9.5px; font-weight: 500; color: var(--aka); } .rcal__g button:disabled { background: none; opacity: .3; cursor: default; } .rcal__g button.full:disabled { opacity: .55; }
.rcal__g button.is-on { background: var(--sumi); color: var(--kin); border-color: var(--sumi); } .rcal__g button.is-on small { color: var(--gold); }
.times { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .times button { height: 44px; border: 1px solid var(--line); background: var(--kin); font-family: var(--mc); font-weight: 700; } .times button:disabled { opacity: .3; } .times button.is-on { background: var(--aka); color: #fff; border-color: var(--aka); } .times__ph { grid-column: 1 / -1; color: var(--sub); font-size: 13px; }
.smap { width: 100%; height: auto; font-family: var(--mc); }
.smap__f { fill: #FBF7EF; stroke: var(--line); } .smap__k { fill: var(--kin2); } .smap__g { fill: #3A2A22; } .smap__gl { fill: #F4B08C; font-size: 12px; text-anchor: middle; } .smap__c { fill: #8A6440; } .smap__e { fill: none; stroke: var(--sub); stroke-dasharray: 4 4; }
.smap__lb { fill: var(--sub); font-size: 15px; text-anchor: middle; font-weight: 700; } .smap text { text-anchor: middle; font-size: 14px; font-weight: 700; pointer-events: none; } .smap text.sm { font-size: 11px; font-weight: 500; }
.st { cursor: pointer; outline: none; } .st circle, .st rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; transition: .2s; }
.st:hover circle, .st:hover rect, .st:focus-visible circle, .st:focus-visible rect { fill: #FCE9DF; }
.st.is-taken { cursor: not-allowed; } .st.is-taken circle, .st.is-taken rect { fill: #C9BFAF; stroke: #B3A898; } .st.is-taken text { fill: #8D8172; }
.st.is-na { cursor: not-allowed; opacity: .35; }
.st.is-on circle, .st.is-on rect { fill: var(--aka); stroke: var(--aka); } .st.is-on text { fill: #fff; }
.hint { font-size: 12px; color: var(--sub); margin-top: 8px; } .hint i { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--ink); vertical-align: -1px; margin: 0 4px 0 10px; } .hint i:first-child { margin-left: 0; } .hint .lg2 { background: #C9BFAF; border-color: #B3A898; } .hint .lg3 { background: var(--aka); border-color: var(--aka); }
.ros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ros--3 { grid-template-columns: repeat(3, 1fr); }
.ro input { position: absolute; opacity: 0; pointer-events: none; } .ro span { display: block; height: 100%; border: 1px solid var(--line); padding: 14px 16px; cursor: pointer; transition: .2s; }
.ro b { display: block; font-family: var(--mc); font-size: 15.5px; } .ro small { font-size: 12px; color: var(--sub); }
.ro input:checked + span { background: var(--sumi); color: var(--kin); border-color: var(--sumi); } .ro input:checked + span small { color: var(--gold); } .ro input:focus-visible + span { outline: 2px solid var(--aka); }
.nav2 { display: flex; gap: 10px; margin-top: 24px; } .nav2 .btn:last-child { flex: 1; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rp label:not(.ro):not(.chk):not(.rp__l) { display: block; font-family: var(--mc); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.rp input[type=text], .rp input[type=tel] { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; border: 1px solid var(--line); background: var(--kin); font-family: var(--jp); font-weight: 400; font-size: 16px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; } .chk input { width: 18px; height: 18px; margin-top: 5px; accent-color: var(--aka); }
.sum dl div { padding: 11px 0; border-bottom: 1px solid var(--lineK); } .sum dt { font-size: 11.5px; opacity: .6; } .sum dd { font-family: var(--mc); font-weight: 700; font-size: 15px; }
.sum__p { margin-top: 14px; } .sum__p span { display: block; font-size: 11.5px; opacity: .6; } .sum__p b { font-family: var(--mc); font-size: 24px; color: var(--gold); }

/* 店主の更新画面 */
.adm { display: grid; grid-template-columns: 420px 1fr; gap: 70px; align-items: center; }
.phone { background: #111; border-radius: 44px; padding: 14px; box-shadow: 0 40px 80px rgba(0,0,0,.25); }
.phone__s { background: #F6F3EE; border-radius: 32px; padding: 26px 18px 22px; max-height: 720px; overflow: auto; }
.phone__h { font-weight: 700; font-size: 17px; margin-bottom: 14px; text-align: center; }
.ar { display: grid; grid-template-columns: 1fr 100px; gap: 6px; background: #fff; border-radius: 12px; padding: 10px; margin-bottom: 8px; position: relative; }
.ar input[type=text], .ar input[type=number] { width: 100%; padding: 9px 10px; border: 1px solid #DDD5C8; border-radius: 8px; font-size: 15px; background: #FCFAF6; }
.ar input[data-f=note] { grid-column: 1; font-size: 13px; }
.ar__x { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #555; color: #fff; font-size: 14px; line-height: 1; }
.sw { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; white-space: nowrap; } .sw input { appearance: none; width: 38px; height: 22px; border-radius: 22px; background: #CFC6B8; position: relative; margin: 0; transition: .2s; flex: none; cursor: pointer; }
.sw input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; } .sw input:checked { background: var(--aka); } .sw input:checked::after { left: 19px; }
.sw--b { justify-content: space-between; background: #fff; border-radius: 12px; padding: 12px 14px; margin: 12px 0; font-size: 14px; }
.phone .btn { min-height: 50px; margin-top: 8px; border-radius: 12px; font-size: 15px; } .phone .btn--o { background: #fff; }
.ar__reset { display: block; margin: 12px auto 0; border: 0; background: none; font-size: 12px; color: var(--sub); text-decoration: underline; }
.adm__t h2 { font-size: clamp(26px, 3vw, 38px); margin: 8px 0 18px; } .adm__t > p:not(.eb):not(.note) { color: var(--sub); margin-bottom: 18px; }
.dots { margin-bottom: 26px; } .dots li { padding-left: 18px; position: relative; margin-bottom: 6px; } .dots li::before { content: ""; position: absolute; left: 0; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: var(--aka); }

.modal { position: fixed; inset: 0; z-index: 200; background: rgba(13,11,9,.72); display: grid; place-items: center; padding: 20px; } .modal[hidden] { display: none; }
.modal__b { background: var(--kin); padding: 40px 34px 30px; max-width: 470px; text-align: center; animation: fi .4s var(--ease); }
.modal__t { font-family: var(--mc); font-weight: 800; font-size: 20px; } .modal__d { margin: 14px 0 24px; font-size: 14.5px; color: var(--sub); text-align: left; }

@media (max-width: 1080px) { .hd__nav { display: none; } .mb { display: block; } .hd__tel { margin-left: auto; } }
@media (max-width: 900px) {
  .wrap { width: calc(100% - 48px); } .sec { padding: 96px 0; } .sec--t { padding-top: 40px; }
  .today__in, .story__in, .skm, .seats__in, .to__in, .info__in, .dg, .mn, .tow, .rvw, .adm { grid-template-columns: 1fr; gap: 40px; }
  .fds { grid-template-columns: 1fr 1fr; } .css { grid-template-columns: 1fr; }
  .xab, .tsum, .sum { position: static; } .adm .phone { max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 768px) {
  :root { --hh: 62px; } body { font-size: 14.5px; padding-bottom: 70px; }
  .demo-bar { font-size: 11px; padding: 6px 12px; }
  .hd { padding: 0 14px; gap: 10px; } .hd__tel { display: none; } .mb { margin-left: auto; } .lg { font-size: 19px; } .lamp { width: 24px; height: 34px; }
  .wrap { width: calc(100% - 32px); } .sec { padding: 76px 0; } .sh { margin-bottom: 36px; } .sh--row { flex-direction: column; align-items: flex-start; }
  .hero__in { inset: calc(var(--db) + var(--hh) + 10px) 18px 60px; flex-direction: column; align-items: stretch; }
  .hero__v { font-size: 30px; margin-top: 0; align-self: flex-end; } .hero__c { text-align: left; max-width: none; } .hero__lg b { font-size: 30px; }
  .hero__glow { left: 70%; top: 40%; width: 280px; height: 280px; margin: -140px; }
  .board { border-width: 10px; padding: 24px 18px 20px; } .board b { font-size: 17px; } .board li span { font-size: 16px; }
  .story__v { font-size: 25px; }
  .fds { gap: 14px; } .fd b { font-size: 15px; } .fd figcaption { font-size: 12px; }
  .skm__map { aspect-ratio: 1; } .sm__d span { font-size: 10.5px; padding: 0 3px; } .sm__d::before { width: 14px; height: 14px; } .skm__info { padding: 26px 22px; min-height: 0; } .skm__ph { padding: 20px 0; }
  .to__l li { grid-template-columns: 70px 1fr auto; gap: 12px; } .to__l img { width: 70px; height: 56px; }
  .cta { padding: 90px 0; } .cta__in { flex-direction: column; align-items: flex-start; gap: 30px; } .cta__v { writing-mode: horizontal-tb; font-size: 30px; letter-spacing: .14em; } .cta__b .btn { min-width: 0; }
  .sp-rsv { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center; justify-content: center; height: 54px; background: var(--aka); color: #fff; font-family: var(--mc); font-weight: 800; letter-spacing: .16em; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
  .ph { padding: calc(var(--db) + var(--hh) + 36px) 0 40px; } .ph__v { font-size: 34px; } .ph__in { gap: 20px; }
  .tabs button { padding: 10px 12px; font-size: 14.5px; } .mi b { font-size: 16px; } .mi > span { font-size: 16px; }
  .ti { grid-template-columns: 84px 1fr; gap: 12px; } .ti img { width: 84px; height: 84px; } .qty { grid-column: 1 / -1; justify-self: end; }
  .rp { padding: 20px 16px; } .times { grid-template-columns: repeat(4, 1fr); } .rcal__g button { min-height: 46px; font-size: 14px; }
  .ros, .ros--3, .two { grid-template-columns: 1fr; } .steps li { font-size: 11px; padding: 8px 2px; }
  .dgc { padding: 26px 20px; } .dq__t { font-size: 19px; }
  .skt th, .skt td { padding: 12px 4px; font-size: 13px; } .skt td:nth-child(3) { display: none; } .skt thead th:nth-child(3) { display: none; }
  .phone { border-radius: 36px; padding: 10px; } .phone__s { border-radius: 28px; padding: 20px 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rv, .hero__v span, .hero__c { opacity: 1; transform: none; } }
.is-shot *, .is-shot *::before, .is-shot *::after { animation: none !important; transition: none !important; }