@font-face{font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;src:url("../assets/fonts/jost-latin.bed9e1c0.woff2") format("woff2");unicode-range:U+21-7E,U+A5,U+A9,U+AE,U+D7,U+2013-2014,U+201C-201D,U+2026}
@property --k { syntax: "<length>"; inherits: false; initial-value: 9px; }
:root {
--space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
--content-width: 1160px;
--content-narrow: 720px;
--page-mx: clamp(20px, 8vw, 115px);
--header-h: 60px;
--bar-h: 50px;
--dur-fast: 180ms;
--dur-normal: 420ms;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 767px) {
:root { --bar-h: 94px; --header-h: 56px; }
}
:root,
:root[data-theme="mist"] {
color-scheme: light;
--root-size: 100%;
--color-bg: #FFFFFF;
--color-surface: #FFFFFF;
--color-panel: #E7EFF1;
--color-panel-soft: #F9F9F9;
--color-ink: #333333;
--color-heading: #333333;
--color-text-sub: #555555;
--color-line: #D6E0E4;
--color-rule: #333333;
--color-accent: #B89A66;
--color-accent-deep: #9C7F4E;
--color-accent-ink: #33657A;
--color-mark: rgba(214, 186, 120, 0.42);
--color-btn: #B0C9D2;
--color-btn-hover: #9FBBC6;
--color-btn-ink: #1F2D33;
--color-bar: #C0D4DB;
--color-bar-cell: #B0C9D2;
--color-bar-ink: #1F2D33;
--color-bar-line: rgba(255, 255, 255, 0.75);
--color-footer: #F9F9F9;
--color-footer-ink: #333333;
--color-kagi: #333333;
--color-burger: #333333;
--hero-texture: none;
--font-mincho-sys: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
--font-gothic-sys: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
--font-display: "Jost", "Zen Kaku Gothic New", var(--font-gothic-sys);
--font-heading: "Jost", "Zen Kaku Gothic New", var(--font-gothic-sys);
--font-body: "Jost", "Zen Kaku Gothic New", var(--font-gothic-sys);
--fw-body: 300;
--fw-heading: 500;
--fw-display: 500;
--fw-label: 400;
--fw-strong: 500;
--ls-body: 0.14em;
--ls-heading: 0.16em;
--ls-display: 0.3em;
--ls-label: 0.2em;
--ls-btn: 0.16em;
--ff-heading: normal;
--text-body: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
--text-small: 0.75rem;
--radius-sm: 0;
--radius-md: 0;
--radius-btn: 0;
--radius-burger: 50%;
}
:root[data-theme="ivory"] {
--root-size: 106.25%;
--color-bg: #F5EFE6;
--color-surface: #FBF7F0;
--color-panel: color-mix(in srgb, #B89A66 13%, #F5EFE6);
--color-panel-soft: #FBF7F0;
--color-ink: #3E362C;
--color-heading: #6E5F4B;
--color-text-sub: #6A5D4D;
--color-line: #E6DDCC;
--color-rule: #9C7F4E;
--color-accent: #B89A66;
--color-accent-deep: #9C7F4E;
--color-accent-ink: #6F5A2B;
--color-mark: rgba(184, 154, 102, 0.26);
--color-btn: #6E5F4B;
--color-btn-hover: #3E362C;
--color-btn-ink: #FBF7F0;
--color-bar: #FBF7F0;
--color-bar-cell: #F5EFE6;
--color-bar-ink: #3E362C;
--color-bar-line: #E6DDCC;
--color-footer: #6E5F4B;
--color-footer-ink: #F5EFE6;
--color-kagi: #9C7F4E;
--color-burger: #6E5F4B;
--hero-texture: url("../img/texture-a.webp");
--font-display: "Cormorant Garamond", "Shippori Mincho", var(--font-mincho-sys);
--font-heading: "Shippori Mincho", var(--font-mincho-sys);
--font-body: "Zen Kaku Gothic New", var(--font-gothic-sys);
--fw-body: 400;
--fw-heading: 500;
--fw-display: 600;
--fw-label: 600;
--fw-strong: 500;
--ls-body: 0.06em;
--ls-heading: 0.1em;
--ls-display: 0.18em;
--ls-label: 0.16em;
--ls-btn: 0.14em;
--ff-heading: "palt";
--text-body: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
--text-small: 0.72rem;
--radius-sm: 4px;
--radius-md: 10px;
--radius-btn: 0;
--radius-burger: 4px;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: var(--root-size); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-weight: var(--fw-body);
font-size: var(--text-body);
line-height: 2;
letter-spacing: var(--ls-body);
color: var(--color-ink);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-synthesis: none;
min-width: 320px;
overflow-x: hidden;
word-break: auto-phrase;
overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--fw-heading); line-height: 1.6; letter-spacing: var(--ls-heading); color: var(--color-heading); font-feature-settings: var(--ff-heading); text-wrap: balance; }
strong { font-weight: var(--fw-strong); background: linear-gradient(to top, var(--color-mark) 0.42em, transparent 0.42em); }
small { font-size: var(--text-small); }
address { font-style: normal; }
main { display: block; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-rule); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 10px 18px; background: var(--color-ink); color: var(--color-surface); transition: top var(--dur-fast); }
.skip-link:focus { top: 12px; }
.kagi, .btn-kagi, .btn-primary {
--kc: var(--color-kagi);
background-image:
linear-gradient(var(--kc), var(--kc)), linear-gradient(var(--kc), var(--kc)),
linear-gradient(var(--kc), var(--kc)), linear-gradient(var(--kc), var(--kc)),
linear-gradient(var(--kc), var(--kc)), linear-gradient(var(--kc), var(--kc)),
linear-gradient(var(--kc), var(--kc)), linear-gradient(var(--kc), var(--kc));
background-size: var(--k) 1px, 1px var(--k), var(--k) 1px, 1px var(--k), var(--k) 1px, 1px var(--k), var(--k) 1px, 1px var(--k);
background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
background-repeat: no-repeat;
transition: --k var(--dur-normal) var(--ease-out-expo), background-color var(--dur-fast) var(--ease-out-expo);
}
.btn {
--k: 8px;
display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
min-height: 50px; padding: 0 34px;
font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--fw-body); letter-spacing: var(--ls-btn); line-height: 1.5; text-align: center;
border: 0; border-radius: var(--radius-btn); background-color: var(--color-surface); color: var(--color-ink);
transition: --k var(--dur-normal) var(--ease-out-expo), background-color var(--dur-fast) var(--ease-out-expo), color var(--dur-fast) var(--ease-out-expo);
}
.btn .ic { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-primary { background-color: var(--color-btn); color: var(--color-btn-ink); font-weight: var(--fw-strong); }
.btn-primary:hover { --k: 16px; background-color: var(--color-btn-hover); }
.btn-kagi:hover { --k: 16px; background-color: var(--color-panel-soft); }
.btn-lg { min-height: 56px; padding: 0 40px; }
.link-line, .more-line {
position: relative; display: inline-block; padding-left: 35px;
font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--text-body); letter-spacing: var(--ls-label); line-height: 1.9; color: var(--color-ink);
}
.more-line { font-weight: var(--fw-label); text-transform: uppercase; font-size: var(--text-small); }
.link-line::before, .more-line::before { content: ""; position: absolute; left: 0; top: 0.98em; width: 22px; height: 1px; background: var(--color-rule); transition: width var(--dur-normal) var(--ease-out-expo); }
.link-line { display: inline-flex; align-items: center; min-height: 44px; }
.link-line::before { top: 50%; }
.link-line:hover::before, a:hover > .more-line::before { width: 31px; }
.link-line:hover { color: var(--color-accent-ink); }
.note { font-size: var(--text-small); line-height: 1.95; color: var(--color-text-sub); }
.note a { text-decoration: underline; text-underline-offset: 0.2em; }
.sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.sec-title { display: flex; flex-direction: column; gap: 0.6em; line-height: 1.3; }
.sec-en { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.45rem); letter-spacing: var(--ls-display); line-height: 1.4; text-transform: uppercase; color: var(--color-heading); }
.sec-jp { font-family: var(--font-heading); font-weight: var(--fw-body); font-size: var(--text-body); letter-spacing: 0.2em; color: var(--color-text-sub); }
.sec-head.is-center { text-align: center; }
.sec-head.is-center .sec-title { align-items: center; }
.rv { transition: opacity var(--dur-normal) var(--ease-out-expo), transform var(--dur-normal) var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.is-pending { opacity: 0; transform: translateY(16px); }
.pos-t { object-position: 50% 0%; } .pos-tm { object-position: 50% 28%; } .pos-m { object-position: 50% 50%; }
.pos-bm { object-position: 50% 72%; } .pos-b { object-position: 50% 100%; } .pos-l { object-position: 0% 50%; } .pos-r { object-position: 100% 50%; }
.pos-y10 { object-position: 50% 10%; } .pos-y15 { object-position: 50% 15%; } .pos-y40 { object-position: 50% 40%; } .pos-y65 { object-position: 50% 65%; }
.prose { line-height: 2.1; }
.prose > * + * { margin-top: 1.5em; }
.prose h2 { margin-top: 2.8em; padding-bottom: 0.7em; position: relative; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); }
.prose h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 1px; background: var(--color-rule); }
.prose h3 { margin-top: 2.2em; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: var(--color-accent-ink); }
.prose h2 + *, .prose h3 + * { margin-top: 1em; }
.prose p { overflow-wrap: break-word; }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: 0.5em; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 0.3em; }
.prose ul li::before { content: ""; position: absolute; left: -1.05em; top: 1.1em; width: 10px; height: 1px; background: var(--color-rule); }
.prose ol { list-style: decimal; }
.prose ol li::marker { font-family: var(--font-display); font-weight: var(--fw-label); color: var(--color-accent-ink); }
.prose a { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: color-mix(in srgb, var(--color-accent-ink) 45%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }
.prose p.qa { padding: 1em 1.2em; background: var(--color-panel); }
.prose p.qa strong:first-child { display: block; color: var(--color-heading); margin-bottom: 0.2em; background: none; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.95em; line-height: 1.8; background: var(--color-surface); }
.prose th, .prose td { padding: 0.8em 1em; border: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.prose thead th { background: var(--color-panel); color: var(--color-heading); font-weight: var(--fw-strong); letter-spacing: 0.1em; }
.prose tbody th { font-weight: var(--fw-strong); color: var(--color-heading); background: var(--color-panel-soft); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
.rv.is-pending { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
body { line-height: 1.95; }
.btn { padding: 0 22px; }
.btn-lg { padding: 0 26px; }
}
.site-header { position: fixed; z-index: 80; top: 0; left: 0; }
.site-logo { display: block; padding: 50px 50px 44px; background: var(--color-bg); }
.site-logo-img { width: 112px; height: auto; }
.nav-toggle {
position: fixed; z-index: 130; top: 50px; right: 50px; width: 60px; height: 60px;
background: var(--color-bg); border: 1px solid var(--color-burger); border-radius: var(--radius-burger);
transition: background-color var(--dur-fast) var(--ease-out-expo);
}
.nav-toggle:hover { background: var(--color-panel-soft); }
.nav-toggle-icon { position: absolute; inset: 0; }
.nav-toggle-icon i { position: absolute; left: 19px; top: calc(50% - 0.5px); width: 20px; height: 1px; background: var(--color-burger); transition: transform var(--dur-normal) var(--ease-out-expo), opacity var(--dur-fast); }
.nav-toggle-icon i:nth-child(1) { transform: translateY(-7px); }
.nav-toggle-icon i:nth-child(3) { transform: translateY(7px); }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: translateX(16px); }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: rotate(45deg); }
.global-nav {
position: fixed; z-index: 110; top: 0; right: 0; bottom: 0; width: min(40%, 620px); min-width: 440px;
background: var(--color-surface); border-left: 1px solid var(--color-line);
overflow-y: auto; overscroll-behavior: contain;
transform: translateX(100%); visibility: hidden;
transition: transform var(--dur-normal) var(--ease-out-expo), visibility 0s linear var(--dur-normal);
}
.global-nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
html.nav-open { overflow: hidden; }
.gn-inner { padding: 128px 56px 56px; }
.gn-list { display: grid; gap: 4px; }
.gn-link { position: relative; display: inline-flex; flex-direction: column; padding: 8px 0 10px; min-height: 44px; }
.gn-link::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 1px; background: var(--color-rule); transition: width var(--dur-normal) var(--ease-out-expo); }
.gn-link:hover::after, .gn-link[aria-current="page"]::after { width: 100%; }
.gn-en { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem); letter-spacing: var(--ls-display); line-height: 1.3; text-transform: uppercase; color: var(--color-heading); }
.gn-jp { margin-top: 2px; font-size: var(--text-small); letter-spacing: 0.2em; color: var(--color-text-sub); }
.gn-children { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 0 0 10px 2px; }
.gn-child { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-body); letter-spacing: 0.14em; color: var(--color-text-sub); }
.gn-child::before { content: ""; width: 14px; height: 1px; margin-right: 10px; background: var(--color-rule); }
.gn-child:hover, .gn-child[aria-current="page"] { color: var(--color-ink); }
.gn-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--color-line); }
.gn-sublink { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding-top: 8px; font-family: var(--font-display); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-heading); }
.gn-subjp { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--text-small); letter-spacing: 0.1em; text-transform: none; color: var(--color-text-sub); }
.gn-sublink:hover { color: var(--color-accent-ink); }
.gn-cta { margin-top: 28px; display: grid; gap: 10px; }
.gn-cta .btn { width: 100%; }
.gn-cta-row { display: flex; flex-wrap: wrap; gap: 0 22px; }
.gn-cta-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--text-body); letter-spacing: 0.12em; color: var(--color-ink); border-bottom: 1px solid transparent; }
.gn-cta-link:hover { border-color: var(--color-rule); }
.gn-cta-link .ic, .reserve-tel .ic, .cv-tel .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gn-sns { display: flex; gap: 22px; margin-top: 8px; }
.gn-sns-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: var(--fw-label); letter-spacing: var(--ls-label); color: var(--color-text-sub); }
.gn-sns-link:hover { color: var(--color-ink); }
.tel-hours { margin-left: 0.6em; font-size: var(--text-small); letter-spacing: 0.06em; opacity: 0.9; }
.reserve-bar {
position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch;
background: var(--color-bar); color: var(--color-bar-ink);
padding-bottom: env(safe-area-inset-bottom);
transform: translateY(calc(100% + 24px)); transition: transform var(--dur-normal) var(--ease-out-expo);
}
.reserve-bar.is-shown { transform: none; }
.reserve-label { flex: 0 0 35%; display: flex; align-items: center; padding: 0 1em 0 var(--page-mx); font-family: var(--font-body); font-weight: var(--fw-strong); font-size: var(--text-small); letter-spacing: 0.2em; }
.reserve-label-en { font-family: var(--font-display); font-weight: var(--fw-strong); }
.reserve-label-en::after { content: "："; }
.reserve-actions { flex: 1; display: flex; min-width: 0; }
.reserve-actions > li { display: flex; flex: 1 1 0; background: var(--color-bar-cell); border-left: 1px solid var(--color-bar-line); }
.reserve-actions > li.reserve-main-li { flex: 1.5 1 0; }
.reserve-main, .reserve-sub, .reserve-tel {
flex: 1; display: flex; align-items: center; gap: 0; min-height: var(--bar-h); padding: 0 8px 0 clamp(22px, 3.4vw, 56px);
font-size: var(--text-body); font-weight: var(--fw-strong); letter-spacing: 0.16em; line-height: 1.35;
transition: background-color var(--dur-fast) var(--ease-out-expo);
}
.reserve-main::before, .reserve-sub::before, .reserve-tel::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 18px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.reserve-main:hover, .reserve-sub:hover, .reserve-tel:hover { background: var(--color-bar); }
.reserve-main .ic, .reserve-tel .ic { display: none; }
.reserve-tel { flex-wrap: wrap; align-content: center; row-gap: 0; }
.reserve-tel .tel-num { font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--text-body); letter-spacing: 0.14em; }
.reserve-tel .tel-hours { margin: 0 0 0 calc(7px + 18px); flex-basis: 100%; font-size: 0.6875rem; letter-spacing: 0.08em; font-weight: var(--fw-body); }
.site-footer { margin-top: clamp(80px, 11vw, 150px); background: var(--color-footer); color: var(--color-footer-ink); padding: clamp(56px, 7vw, 96px) var(--page-mx) calc(var(--bar-h) + 40px); }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--color-accent); }
.ft-inner { display: grid; grid-template-columns: 1.05fr 1.1fr 1.15fr; gap: 40px clamp(32px, 5vw, 72px); max-width: 1210px; margin: 0 auto; font-size: var(--text-body); line-height: 2; }
.ft-logo-img { width: 150px; height: auto; }
.ft-tag { margin-top: 10px; font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--text-body); letter-spacing: var(--ls-label); }
.ft-lead { margin-top: 14px; }
.ft-name { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.05em; letter-spacing: 0.12em; margin-bottom: 8px; }
.ft-nap p + p, .ft-nap address + p { margin-top: 4px; }
.ft-nap address { margin-bottom: 6px; }
.ft-nav ul { columns: 2; column-gap: 32px; }
.ft-nav li { break-inside: avoid; padding-bottom: 2px; }
.ft-nav a { display: inline-block; padding: 3px 0; letter-spacing: 0.12em; }
.ft-nav li ul { columns: 1; padding: 0 0 4px 1em; }
.ft-nav li li a { font-size: 0.92em; opacity: 0.92; }
.ft-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 28px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--color-footer-ink) 22%, var(--color-footer)); }
.ft-ext { display: inline-block; padding: 10px 0; letter-spacing: 0.12em; }
.ft-copy { margin-top: 32px; text-align: center; letter-spacing: 0.16em; }
.breadcrumb { margin: clamp(56px, 7vw, 96px) var(--page-mx) 0; padding-bottom: 14px; border-bottom: 4px double var(--color-line); font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--text-small); letter-spacing: 0.14em; line-height: 1.8; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li + li::before { content: ""; display: inline-block; width: 1px; height: 0.95em; margin: 0 0.9em; vertical-align: -0.1em; background: var(--color-rule); }
.breadcrumb a { display: inline-block; padding: 2px 0; }
.breadcrumb a:hover { color: var(--color-accent-ink); }
.breadcrumb strong { font-weight: var(--fw-strong); color: var(--color-accent-ink); background: none; }
.cv { margin: clamp(56px, 7vw, 110px) var(--page-mx) 0; }
.cv-panel { padding: 0 clamp(20px, 5vw, 70px) clamp(40px, 5vw, 56px); text-align: center; background-color: var(--color-panel); }
.cv-logo { margin-bottom: 8px; padding-top: 0; }
.cv-logo-img { width: 190px; height: auto; margin: -26px auto 0; }
.cv-title { margin-top: 22px; font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem); letter-spacing: 0.14em; }
.cv-lead { margin-top: 6px; font-size: var(--text-small); letter-spacing: 0.1em; color: var(--color-text-sub); }
.cv-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px clamp(24px, 4vw, 60px); margin-top: 34px; }
.cv-actions .btn { min-width: min(343px, 100%); }
.cv-aux { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 32px; margin-top: 22px; }
.cv-aux .link-line { display: inline-flex; align-items: center; min-height: 44px; }
.cv-tel .tel-num { font-family: var(--font-display); font-weight: var(--fw-label); letter-spacing: 0.12em; }
.cv-tel .ic { display: none; }
@media (max-width: 999px) {
.site-logo { padding: 26px 26px 22px 30px; }
.nav-toggle { top: 20px; right: 20px; }
.global-nav { width: 100%; min-width: 0; border-left: 0; transform: translateY(-14px); opacity: 0; transition: transform var(--dur-normal) var(--ease-out-expo), opacity var(--dur-normal) var(--ease-out-expo), visibility 0s linear var(--dur-normal); }
.global-nav.is-open { transform: none; opacity: 1; }
.gn-inner { max-width: 560px; margin: 0 auto; padding: 110px 30px 56px; }
.reserve-label { flex-basis: 26%; padding-left: 24px; font-size: 0.6875rem; letter-spacing: 0.12em; }
.reserve-main, .reserve-sub, .reserve-tel { padding-left: 18px; }
.reserve-main::before, .reserve-sub::before, .reserve-tel::before { margin-right: 10px; }
.reserve-tel .tel-hours { margin-left: 17px; }
.ft-inner { grid-template-columns: 1fr 1fr; }
.ft-nav { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
.site-header { position: absolute; }
.site-logo { padding: 18px 20px 14px 22px; background: transparent; }
.site-logo-img { width: 92px; }
.nav-toggle { top: 0; right: 0; width: 60px; height: 60px; border: 0; border-radius: 0; background: transparent; }
.nav-toggle:hover { background: transparent; }
.nav-toggle-icon i { left: 20px; }
.gn-inner { padding: 88px 24px 40px; }
.reserve-bar { flex-direction: column; }
.reserve-label { display: none; }
.reserve-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
.reserve-actions > li { border-left: 0; border-top: 1px solid var(--color-bar-line); }
.reserve-actions > li + li { border-left: 1px solid var(--color-bar-line); }
.reserve-main-li { grid-column: 1 / -1; border-top: 0; background: var(--color-bar); }
.reserve-main-li + li { border-left: 0; }
.reserve-main { min-height: 50px; justify-content: center; padding: 0 8px; font-size: 0.9375rem; }
.reserve-sub, .reserve-tel { min-height: 44px; justify-content: center; padding: 0 4px; font-size: 0.6875rem; letter-spacing: 0.06em; }
.reserve-main::before, .reserve-sub::before, .reserve-tel::before { margin-right: 8px; width: 6px; height: 6px; }
.reserve-tel { flex-wrap: nowrap; }
.reserve-tel .tel-num { font-size: 0.8125rem; letter-spacing: 0.04em; }
.reserve-tel .tel-hours { display: none; }
.site-footer { padding-bottom: calc(var(--bar-h) + 28px); }
.ft-inner { grid-template-columns: 1fr; gap: 32px; }
.ft-nav ul { columns: 1; }
.ft-nav a { padding: 11px 0; }
.breadcrumb a { min-width: 44px; padding: 11px 0; }
.ft-ext { padding: 12px 0; }
.cv { margin-inline: 14px; }
.breadcrumb { margin-inline: 20px; }
.cv-actions .btn { width: 100%; }
}
.plist { display: grid; max-width: 520px; }
.plist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 0 22px; padding: 7px 0; }
.plist-name { min-width: 0; }
.plist-title { font-size: var(--text-body); letter-spacing: 0.12em; line-height: 1.8; }
.plist-note { display: block; margin-top: 0; font-size: var(--text-small); letter-spacing: 0.08em; line-height: 1.8; color: var(--color-text-sub); }
.plist-time { grid-column: 2; font-size: var(--text-small); letter-spacing: 0.08em; color: var(--color-text-sub); white-space: nowrap; }
.plist-price { grid-column: 3; font-family: var(--font-display); font-weight: var(--fw-label); font-size: calc(var(--text-body) * 1.08); letter-spacing: 0.12em; font-variant-numeric: lining-nums tabular-nums; color: var(--color-ink); white-space: nowrap; min-width: 4.4em; text-align: right; }
.vpoints { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 18px; font-size: var(--text-small); letter-spacing: 0.1em; line-height: 1.7; color: var(--color-text-sub); }
.vpoints li { display: inline-flex; align-items: baseline; }
.vpoints li + li::before { content: ""; width: 1px; height: 0.9em; margin: 0 14px; background: var(--color-rule); transform: translateY(1px); flex: none; }
.staff-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 900px; }
.staff-card { --k: 9px; display: flex; gap: 24px; padding: 38px 40px 40px; background-color: var(--color-surface); }
.staff-photo { flex: none; width: 120px; }
.staff-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.staff-role { font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--text-small); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-accent-ink); }
.staff-name { margin-top: 8px; font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: 0.2em; line-height: 1.4; }
.staff-kana { margin-top: 2px; font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--text-small); letter-spacing: 0.26em; color: var(--color-text-sub); }
.staff-msg { margin-top: 18px; line-height: 2; }
.staff-more { margin-top: 30px; }
.post-link { display: block; }
.post-media { position: relative; aspect-ratio: 288 / 200; overflow: hidden; background: var(--color-panel); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out-expo); }
.post-link:hover .post-media img { transform: scale(1.04); }
.post-cover-blank { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-panel); }
.post-cover-spark { width: 40px; height: 40px; fill: none; stroke: var(--color-accent-deep); stroke-width: 0.8; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--text-small); letter-spacing: var(--ls-label); color: var(--color-text-sub); line-height: 1.9; }
.post-cat { font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--text-small); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-accent-ink); }
.post-title { margin-top: 6px; font-size: clamp(0.95rem, 0.88rem + 0.4vw, 1.15rem); letter-spacing: 0.1em; line-height: 1.7; transition: color var(--dur-fast); }
.post-link:hover .post-title { color: var(--color-accent-ink); }
.post-excerpt { margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .post-body { padding-top: 26px; }
.post-card .more-line { margin-top: 14px; }
.post-row .post-link { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--color-line); }
.post-row:first-child .post-link { padding-top: 0; }
.post-row .post-media { aspect-ratio: 1; }
.post-row .post-title { font-size: var(--text-body); margin-top: 2px; letter-spacing: 0.1em; }
.post-row .post-excerpt { -webkit-line-clamp: 2; font-size: var(--text-small); }
.info-dl { margin-top: 18px; }
.info-dl > div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.info-dl dt { font-family: var(--font-display); font-weight: var(--fw-label); font-size: var(--text-small); letter-spacing: var(--ls-label); color: var(--color-accent-ink); padding-top: 0.35em; }
.info-dl dd { line-height: 2; }
.info-dl dd small { color: var(--color-text-sub); }
.info-dl a { display: inline-block; padding: 5px 0; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: color-mix(in srgb, var(--color-ink) 40%, transparent); }
.map-block { display: grid; gap: 4px; }
.map-facade { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-panel); border: 1px solid var(--color-line); }
.map-facade-view { position: absolute; inset: 0; }
.map-art { width: 100%; height: 100%; }
.map-grid path { fill: none; stroke: var(--color-rule); stroke-opacity: 0.14; stroke-width: 1; }
.map-road { fill: none; stroke: var(--color-rule); stroke-opacity: 0.7; stroke-width: 1.6; stroke-linecap: round; }
.map-road-2 { stroke-opacity: 0.4; stroke-width: 1.2; }
.map-pin { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -100%); }
.map-pin-ic { width: 44px; height: 44px; fill: var(--color-surface); stroke: var(--color-rule); stroke-width: 1.4; }
.map-facade-ui { position: absolute; inset: auto 0 0 0; padding: 48px 20px 22px; text-align: center; background: linear-gradient(transparent, var(--color-panel) 30%); }
.map-facade-name { font-family: var(--font-heading); font-weight: var(--fw-heading); letter-spacing: 0.12em; color: var(--color-heading); }
.map-facade-addr { font-size: var(--text-small); letter-spacing: 0.1em; color: var(--color-text-sub); }
.map-facade-btn { margin-top: 12px; }
.map-facade-note { margin-top: 8px; font-size: var(--text-small); color: var(--color-text-sub); letter-spacing: 0.06em; }
.map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 8px; }
.map-links .link-line { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 999px) {
.staff-list { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 767px) {
.plist-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; }
.plist-time { grid-column: 1; grid-row: 2; }
.plist-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.staff-card { padding: 30px 26px; flex-direction: column; gap: 14px; }
.info-dl > div { grid-template-columns: 5.4em minmax(0, 1fr); gap: 12px; }
.info-dl a { padding: 10px 0; }
.post-row .post-link { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
}
.faq-list { display: grid; gap: 12px; }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.faq-item summary { display: flex; align-items: baseline; gap: 16px; padding: 18px 56px 18px 22px; min-height: 56px; cursor: pointer; list-style: none; position: relative; font-family: var(--font-heading); font-weight: var(--fw-heading); letter-spacing: 0.1em; line-height: 1.8; color: var(--color-heading); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before, .faq-item summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 1px; background: var(--color-rule); transition: transform var(--dur-normal) var(--ease-out-expo); }
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(0deg); }
.faq-item summary:hover { background: var(--color-panel-soft); }
.faq-mark { flex: none; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.25rem; color: var(--color-accent-ink); }
.faq-q { flex: 1; min-width: 0; }
.faq-a { padding: 0 22px 22px 56px; line-height: 2.05; }
.faq-link { margin-top: 10px; }
.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; margin-top: 24px; }
.route-fig { margin: 0; }
.route-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.route-fig figcaption { display: flex; gap: 12px; margin-top: 12px; line-height: 1.9; }
.route-n { flex: none; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.05rem; letter-spacing: 0.1em; color: var(--color-accent-ink); }
.gallery { column-count: 3; column-gap: 14px; margin-top: 24px; }
.gallery--few { column-count: 2; max-width: 640px; }
.g-item { break-inside: avoid; margin-bottom: 14px; }
.g-img { width: 100%; height: auto; }
.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 760px; margin-top: 24px; }
.ba-item { margin: 0; }
.ba-item img { width: 100%; height: auto; }
.related .sec-head { margin-bottom: 18px; }
.post-list { display: grid; }
.more-articles { margin-top: 12px; }
.more-articles summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
.more-articles summary::-webkit-details-marker { display: none; }
.more-articles[open] summary { margin-bottom: 8px; }
@media (max-width: 767px) {
.faq-item summary { padding: 16px 48px 16px 16px; }
.faq-item summary::before, .faq-item summary::after { right: 16px; }
.faq-a { padding: 0 16px 20px 16px; }
.route-grid { grid-template-columns: 1fr; gap: 26px; }
.gallery { column-count: 2; column-gap: 10px; }
.g-item { margin-bottom: 10px; }
.ba-grid { gap: 12px; }
}
.gn-sns { flex-wrap: wrap; gap: 0 22px; }