:root {
  --paper: #ffffff;
  --paper-deep: #f3f3f3;
  --ink: #1b1b1b;
  --muted: #606060;
  --line: #dadada;
  --accent: #555555;
  --collection-bg: #192c3d;
  --noir: var(--paper);
  --noir-2: var(--paper-deep);
  --blanc: var(--ink);
  --gris: var(--muted);
  --gris-2: var(--muted);
  --soft: #444444;
  --rule: var(--line);
  --f-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-head: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-mark: "Jost", "Helvetica Neue", sans-serif;
  --header-height: 86px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--f-body); font-size: 16px; font-weight: 400; line-height: 1.95; letter-spacing: .025em; -webkit-font-smoothing: antialiased; }
::selection { background: #d9d9d9; color: #111111; }
a { color: inherit; text-underline-offset: 4px; }
button, summary { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
h2, h3 { text-wrap: balance; }
.wrap { max-width: 1320px; padding-inline: 52px; margin-inline: auto; }
.label { font: 500 12px/1.6 var(--f-mark); text-transform: uppercase; letter-spacing: .19em; color: var(--accent); }
.photo { width: 100%; object-fit: cover; }
.photo.sq { aspect-ratio: 1; }
.txt, .msg { color: var(--soft); font-size: 16px; line-height: 2.05; }
.txt + .txt { margin-top: 20px; }
.note { color: var(--gris); font-size: 14px; line-height: 1.9; margin-top: 24px; }
.skip-link { position: fixed; top: -100px; left: 20px; background: var(--paper); color: var(--ink); padding: 14px 24px; z-index: 100; }
.skip-link:focus { top: 12px; }
header { position: sticky; top: 0; z-index: 30; color: #ffffff; background: #151515; border-bottom: 1px solid #444444; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 86px; }
.mark { display: block; flex-shrink: 0; line-height: 0; }
.mark img { width: 214px; height: auto; }
nav ul { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
nav a { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .025em; text-decoration: none; color: #eeeeee; padding-block: 14px; white-space: nowrap; }
nav a:hover, nav a.is-active { color: #ffffff; }
nav .nav-visit { border: 1px solid #888888; padding: 13px 18px; }
.nav-visit span { margin-left: 14px; }
.nav-extra { display: none; }
.menu-btn { display: none; border: 0; background: none; color: inherit; min-width: 48px; min-height: 48px; padding: 12px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.menu-btn span { display: block; width: 25px; height: 1px; background: currentColor; transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hero-grid { display: grid; grid-template-columns: 46% 54%; min-height: 680px; max-width: 1800px; margin-inline: auto; }
.hero-copy { padding: 65px 44px 38px max(52px, calc((100vw - 1216px) / 2)); display: flex; flex-direction: column; align-items: flex-start; }
.hero-location { display: flex; align-items: center; gap: 14px; }
.hero-location > span { width: 28px; height: 1px; background: currentColor; }
.hero-category { margin-top: 24px; font-size: 13px; color: var(--muted); letter-spacing: .08em; }
.hero h1 { font-family: var(--f-head); font-size: clamp(40px, 3.7vw, 60px); line-height: 1.52; letter-spacing: .1em; margin-top: 19px; }
.hero-lead { margin-top: 26px; font-size: 15px; line-height: 2; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; margin-top: 30px; }
.btn { display: inline-flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 52px; padding: 14px 22px; border: 1px solid currentColor; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-decoration: none; transition: background .2s, color .2s; }
.btn:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.btn-solid { color: #ffffff; background: #1b1b1b; border-color: #1b1b1b; }
.btn-solid:hover { background: #000000; border-color: #000000; }
.hero-link { font-size: 14px; padding-block: 12px; text-decoration: none; border-bottom: 1px solid #aaaaaa; }
.hero-link span { margin-left: 12px; }
.hero-signature { width: 100%; margin-top: auto; padding-top: 28px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; color: #606060; }
.hero-signature > span { font: italic 28px/1.3 var(--f-serif); }
.hero-signature > p { font: 400 10px/1.5 var(--f-mark); letter-spacing: .15em; }
.hero-visual { min-width: 0; }
.slides { height: 100%; min-height: 680px; position: relative; overflow: hidden; background: #444444; }
.slides::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, #000000c7); pointer-events: none; }
.slides .photo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.3s; }
.slides .photo.is-on { opacity: 1; }
.photo-tag { position: absolute; top: 30px; right: 30px; color: #fff; background: #151515c9; padding: 9px 16px; font-size: 12px; letter-spacing: .08em; }
.hero-photo-bottom { position: absolute; bottom: 30px; left: 32px; right: 32px; z-index: 2; color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hero-photo-bottom > p { font: 400 14px/1.4 var(--f-mark); letter-spacing: .2em; }
.hero-photo-bottom > p span { display: block; font: italic 19px/1.5 var(--f-serif); letter-spacing: .04em; }
.slide-controls { display: flex; align-items: center; gap: 10px; }
.slide-count { font: 400 12px/1 var(--f-mark); letter-spacing: .1em; white-space: nowrap; }
.dots { display: flex; gap: 0; }
.dots button { position: relative; width: 24px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #fff; }
.dots button::after { content: ""; position: absolute; top: 21px; left: 4px; right: 4px; height: 2px; background: #ffffff60; }
.dots button.on::after { background: #fff; }
.slideshow-toggle { min-height: 44px; border: 1px solid var(--rule); background: transparent; color: inherit; padding: 10px 16px; font-size: 13px; line-height: 1.5; }
.slideshow-toggle[hidden] { display: none; }
.slides .slideshow-toggle { color: #fff; border-color: #ffffff80; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
.slides .slideshow-toggle:hover { background: #ffffff20; }
.visit-strip { background: #f2f2f2; border-bottom: 1px solid #d8d8d8; }
.visit-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 96px; }
.visit-strip p { font-size: 16px; font-weight: 500; white-space: nowrap; }
.visit-strip p > span { color: var(--muted); font-size: 12px; font-weight: 400; margin-right: 12px; }
.visit-strip .visit-heading { font-family: var(--f-head); font-size: 16px; }
.visit-strip .visit-heading span { font-size: 18px; color: #444444; }
.visit-strip a { font-size: 13px; white-space: nowrap; }
section { padding-block: 100px; scroll-margin-top: calc(var(--header-height) + 16px); }
.sec-head { position: relative; margin-bottom: 36px; }
.sec-head h2 { margin-top: 12px; font: 400 clamp(26px, 2.7vw, 38px)/1.6 var(--f-head); letter-spacing: .08em; }
.section-aside { position: absolute; right: 0; bottom: 8px; color: var(--muted); font-size: 14px; }
.center-lead { max-width: 50em; color: var(--soft); font-size: 16px; line-height: 2; }
.concept { display: grid; grid-template-columns: .95fr 1.05fr; gap: 96px; align-items: center; }
.concept > .photo { aspect-ratio: 4/4.6; }
.concept .body { min-width: 0; }
.concept h2 { font: 400 clamp(24px, 2.3vw, 33px)/1.8 var(--f-head); letter-spacing: .08em; margin: 22px 0 28px; }
.experience-head { margin-top: 70px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.experience-head > p:last-child { font-family: var(--f-head); font-size: 16px; }
.points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 38px; }
.point { min-width: 0; }
.point > .label { border-bottom: 1px solid var(--line); padding-bottom: 12px; font-size: 14px; color: #555555; }
.point h3 { font: 400 19px/1.6 var(--f-head); margin: 18px 0 12px; letter-spacing: .03em; }
.point p.txt { color: var(--muted); font-size: 15px; line-height: 1.9; }
.cafe-section { background: var(--paper-deep); }
.cafe-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
.cafe-copy h2 { font: 400 clamp(28px, 2.5vw, 36px)/1.8 var(--f-head); margin: 20px 0 28px; letter-spacing: .08em; }
.cafe-copy .cafe-note { color: var(--muted); font-size: 13px; margin-top: 30px; }
.cafe-image img { width: 100%; aspect-ratio: 5/4; object-fit: cover; }
.cafe-image figcaption { font: italic 24px/1.5 var(--f-serif); margin-top: 16px; text-align: right; color: #606060; }
.text-link { display: inline-block; text-decoration: none; padding: 10px 0; margin-top: 24px; border-bottom: 1px solid #999999; font-size: 14px; font-weight: 500; }
.text-link span { margin-left: 16px; }
#shop { --noir: #192c3d; --noir-2: #22384c; --blanc: #ffffff; --gris: #c7d1d8; --gris-2: #c7d1d8; --soft: #dee4e7; --rule: #4f6272; --accent: #d5d5d5; color: var(--blanc); background: var(--collection-bg); }
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.shop .body { min-width: 0; }
.collection-name { font: italic 34px/1.2 var(--f-serif); color: #d5dcdf; margin-top: 25px; }
.shop h2 { font: 400 clamp(28px, 2.6vw, 37px)/1.7 var(--f-head); margin: 24px 0; letter-spacing: .07em; }
.shop .txt { font-size: 16px; }
.collection-image { margin-top: 8px; }
.collection-image .photo { aspect-ratio: 4/5; }
.collection-image figcaption { padding-block: 20px; border-bottom: 1px solid var(--rule); font: 400 13px/1.6 var(--f-mark); letter-spacing: .11em; }
.collection-image figcaption span { display: block; margin-top: 7px; font: italic 22px/1.4 var(--f-serif); letter-spacing: .02em; color: #c5cfd6; }
.feat { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.feat li { display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.85; }
.feat b { font-weight: 500; }
.feat span { color: var(--soft); }
.price-list li { grid-template-columns: 1fr auto; align-items: center; }
.price-list span { color: #fff; font: 500 27px/1.4 var(--f-serif); letter-spacing: .025em; }
.levels { display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: center; margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--rule); }
.levels h3 { font: 400 24px/1.6 var(--f-head); margin: 12px 0; }
.levels .txt { font-size: 15px; color: var(--gris); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.swatches img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid #667989; }
.swatches figcaption { font: 400 12px/1.5 var(--f-mark); letter-spacing: .1em; color: var(--gris); margin-top: 10px; }
.craft-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: 65px; margin-bottom: 22px; }
.craft-caption > p:last-child { font-family: var(--f-head); font-size: 18px; }
.ai-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ai-gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.goods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--rule); }
.goods .photo { aspect-ratio: 4/3; object-fit: contain; background: #fff; }
.goods figcaption { font: 400 21px/1.6 var(--f-head); margin-top: 18px; }
.goods figcaption small { display: block; font: 400 14px/1.9 var(--f-body); color: var(--gris); margin-top: 7px; }
details > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; padding-block: 22px; font-size: 16px; font-weight: 500; }
details > summary::-webkit-details-marker { display: none; }
.summary-symbol { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.summary-symbol::before, .summary-symbol::after { content: ""; position: absolute; background: currentColor; }
.summary-symbol::before { height: 1px; width: 16px; top: 10px; left: 2px; }
.summary-symbol::after { width: 1px; height: 16px; left: 10px; top: 2px; }
details[open] > summary .summary-symbol::after { display: none; }
.brands { margin-top: 60px; border-block: 1px solid var(--rule); }
.brands-content { padding: 24px 0 48px; }
.brands .sec-head h2 { font-size: 25px; }
.brand-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.brand-cols h3 { font: 400 13px/1.6 var(--f-mark); text-transform: uppercase; color: var(--gris); letter-spacing: .1em; margin-bottom: 20px; }
.brand-cols ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.brand-cols li { display: grid; grid-template-columns: 10em 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.7; }
.brand-cols b { font-weight: 500; }
.brand-cols span { color: var(--gris); }
.season { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.season .ss { position: relative; width: 100%; aspect-ratio: 4/5; background: var(--paper-deep); overflow: hidden; }
.season .ss .photo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
.season .ss .photo.is-on { opacity: 1; }
.season figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 400 23px/1.4 var(--f-serif); color: var(--ink); margin-top: 15px; }
.season figcaption span { font: 400 13px/1.5 var(--f-body); color: var(--muted); }
.photo-controls { display: flex; justify-content: flex-end; margin-top: 28px; }
.photo-controls:has([hidden]) { display: none; }
.clinic-section { background: #f3f3f3; }
.care-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 42px; }
.info { display: grid; grid-template-columns: 7.5em 1fr; margin: 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.9; }
.info dt, .info dd { margin: 0; min-width: 0; border-bottom: 1px solid var(--rule); padding: 17px 0; }
.info dt { font-size: 13px; font-weight: 500; color: var(--muted); padding-top: 19px; }
.info dd { overflow-wrap: anywhere; }
.clinic-info { max-width: 100%; }
.clinic-info dd span { font-size: 14px !important; }
.oxygen { display: grid; grid-template-columns: 150px 1fr; gap: 30px; }
.oxygen .photo { aspect-ratio: 2/3; }
.oxygen h3 { font: 400 23px/1.7 var(--f-head); margin: 15px 0 20px; }
.oxygen .txt { font-size: 15px; }
#rules { background: #ffffff; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; list-style: none; counter-reset: rule; margin: 40px 0 0; padding: 0; }
.rules li { position: relative; counter-increment: rule; border-top: 1px solid var(--line); padding: 24px 0 30px; }
.rules li::before { content: counter(rule, decimal-leading-zero); display: block; font: 400 24px/1.5 var(--f-serif); color: #555555; margin-bottom: 12px; }
.rules b { display: block; font: 400 21px/1.6 var(--f-head); margin-bottom: 14px; }
.rules span { display: block; font-size: 15px; color: var(--soft); line-height: 1.95; }
.owner-section { background: #f4f4f4; }
.owner { display: grid; grid-template-columns: 250px 1fr; gap: 80px; max-width: 1000px; margin-inline: auto; align-items: center; }
.owner .photo { aspect-ratio: 4/5; }
.owner h3 { font: 400 30px/1.6 var(--f-head); margin: 18px 0 6px; letter-spacing: .09em; }
.owner .role { font-size: 14px; color: var(--muted); }
.owner .msg { margin-top: 22px; }
#news { padding-bottom: 64px; }
#news > .wrap { display: grid; grid-template-columns: 240px 1fr; gap: 0 56px; }
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news-list li { display: grid; grid-template-columns: 8em 1fr; gap: 24px; border-bottom: 1px solid var(--line); padding: 20px 0; font-size: 15px; line-height: 1.9; }
.news-list time { font: 400 17px/1.9 var(--f-mark); letter-spacing: .04em; color: var(--muted); }
.news-more { grid-column: 2; border-bottom: 1px solid var(--line); }
.news-more .news-list { border-top: 0; }
.news-more li:last-child { border-bottom: 0; }
#media { padding-top: 0; padding-bottom: 80px; }
#media .wrap { display: grid; grid-template-columns: 240px 1fr; gap: 56px; }
#media .sec-head h2 { font-size: 27px; }
.media-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.media-list li { display: grid; grid-template-columns: 9em 1fr; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.9; }
.media-list b { font-weight: 500; }
.media-list span { color: var(--muted); }
#access { background: #f3f3f3; }
.access-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 36px; }
.access-intro > p { color: var(--muted); }
.access-intro .text-link { margin-top: 0; }
.access { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; }
.sub-note { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.9; }
.map { background: #ffffff; border: 1px solid #d0d0d0; align-self: start; }
.map-img { display: block; }
.map-img img { width: 100%; height: auto; }
.map .credit { text-align: right; font-size: 11px; padding: 5px 12px; color: var(--muted); }
.map-foot { padding: 20px 24px 28px; }
.map-foot .txt { font-size: 15px; }
.map-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.map-btns .btn { font-size: 13px; padding: 12px 16px; }
.tel { font-family: var(--f-mark); letter-spacing: .05em; }
.sns { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.sns a { display: block; padding: 28px 32px; text-decoration: none; transition: background .2s; }
.sns a:first-child { padding-left: 0; }
.sns a + a { border-left: 1px solid var(--line); }
.sns a:hover { background: var(--paper-deep); }
.sns .k { display: block; font: 400 28px/1.4 var(--f-serif); }
.sns .k::after { content: "↗"; float: right; font: 400 20px/1.5 var(--f-body); }
.sns .id { display: block; font: 400 14px/1.8 var(--f-mark); color: var(--muted); margin-top: 8px; }
.sns .d { display: block; color: var(--muted); font-size: 14px; margin-top: 12px; }
footer { background: #151515; color: #eeeeee; text-align: center; padding: 64px 0 32px; }
footer .mark img { width: 180px; height: auto; margin: auto; }
footer .place { display: block; color: #cccccc; margin-top: 28px; font-size: 11px; }
.nap { font-style: normal; font-size: 14px; line-height: 2; color: #d5d5d5; margin-top: 24px; }
.back-top { display: inline-block; margin-top: 32px; text-decoration: none; font-size: 13px; border-bottom: 1px solid #888888; padding-bottom: 6px; }
.back-top span { margin-left: 14px; }
footer small { display: block; font: 400 11px/1.7 var(--f-mark); letter-spacing: .1em; color: #bbbbbb; margin-top: 36px; }
.mobile-actions { display: none; }
@media (min-width: 1800px) { .hero-copy { padding-left: 112px; } }
@media (max-width: 1280px) {
  .wrap { padding-inline: 40px; }
  .head { gap: 24px; }
  .head .mark img { width: 180px; }
  nav ul { gap: 18px; }
  nav a { font-size: 12px; }
  .hero-copy { padding-left: 40px; padding-right: 30px; }
  .hero-signature { flex-wrap: wrap; gap: 8px; }
  .concept { gap: 64px; }
  .shop, .cafe-layout { gap: 56px; }
  .visit-strip-inner { gap: 14px; }
  .visit-strip p { font-size: 15px; }
  .visit-strip .visit-heading { display: none; }
  .care-layout, .access { gap: 40px; }
  .oxygen { grid-template-columns: 120px 1fr; gap: 24px; }
}
@media (max-width: 1100px) {
  .head { min-height: 76px; flex-wrap: wrap; gap: 0; }
  .head .mark img { width: 200px; }
  .js .menu-btn { display: flex; }
  nav { width: 100%; }
  nav ul { flex-wrap: wrap; gap: 10px 24px; padding: 8px 0 20px; }
  nav a { font-size: 14px; }
  .nav-extra { display: block; }
  .js nav { display: none; position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: #151515; padding: 12px 40px 24px; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid #777777; }
  .js nav.open { display: block; }
  .js nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; padding: 0; }
  .js nav a { padding: 17px 0; border-bottom: 1px solid #505050; white-space: normal; }
  .js nav .nav-visit { border: 0; border-bottom: 1px solid #505050; }
  .hero-grid { grid-template-columns: 46% 54%; min-height: 660px; }
  .hero-copy { padding-block: 48px 32px; }
  .hero h1 { font-size: 43px; }
  .hero-lead { font-size: 14px; }
  .hero-category { font-size: 12px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { font-size: 13px; }
  .slides { min-height: 660px; }
  .hero-photo-bottom { left: 24px; right: 24px; }
  .hero-photo-bottom > p { display: none; }
  .slide-controls { margin-left: auto; }
  .points { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
  .care-layout { grid-template-columns: 1fr; }
  .oxygen { grid-template-columns: 180px 1fr; max-width: 700px; margin-top: 8px; }
  .oxygen .photo { aspect-ratio: 4/5; }
  .brand-cols li { grid-template-columns: 1fr; gap: 4px; }
  .rules { gap: 0 30px; }
  .rules b { font-size: 20px; }
  .owner { gap: 48px; }
}
@media (max-width: 800px) {
  .wrap { padding-inline: 28px; }
  section { padding-block: 72px; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-copy { padding-left: 28px; padding-right: 22px; }
  .hero h1 { font-size: 36px; }
  .hero-category { letter-spacing: 0; }
  .hero-location { font-size: 11px; }
  .hero-signature > p { display: none; }
  .photo-tag { right: 20px; top: 20px; font-size: 11px; }
  .visit-strip-inner { flex-wrap: wrap; padding-block: 18px; gap: 10px 20px; justify-content: flex-start; }
  .visit-strip p { font-size: 14px; }
  .visit-strip a { margin-left: auto; }
  .concept, .cafe-layout, .shop { grid-template-columns: 1fr; gap: 36px; }
  .concept { grid-template-columns: .85fr 1.15fr; gap: 32px; }
  .concept h2 { font-size: 24px; }
  .concept > .photo { aspect-ratio: 3/5; }
  .concept .txt { font-size: 15px; }
  .cafe-layout { grid-template-columns: .9fr 1.1fr; gap: 32px; }
  .cafe-copy h2 { font-size: 26px; }
  .cafe-copy .txt { font-size: 15px; }
  .cafe-image img { aspect-ratio: 3/4; }
  .experience-head { margin-top: 48px; flex-direction: column; gap: 8px; }
  .collection-image .photo { aspect-ratio: 4/3; }
  .shop .body { max-width: 100%; }
  .levels { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .craft-caption { flex-direction: column; gap: 8px; }
  .ai-gallery { grid-template-columns: repeat(2, 1fr); }
  .goods { gap: 20px; margin-top: 48px; padding-top: 48px; }
  .goods figcaption { font-size: 18px; }
  .goods figcaption small { font-size: 13px; }
  .section-aside { position: static; display: block; margin-bottom: 12px; }
  .season { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .rules { grid-template-columns: repeat(2, 1fr); }
  .owner { grid-template-columns: 180px 1fr; gap: 36px; }
  #news > .wrap, #media .wrap { grid-template-columns: 1fr; gap: 0; }
  .news-more { grid-column: 1; }
  #news { padding-bottom: 64px; }
  #media { padding-bottom: 64px; }
  .access { grid-template-columns: 1fr; gap: 40px; }
  .access-intro { flex-wrap: wrap; gap: 10px; }
  .sns a { padding: 24px 20px; }
  .sns .d { font-size: 13px; }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 24px; }
  .head { min-height: 72px; }
  .head .mark img { width: 178px; }
  .js nav { padding: 8px 24px 24px; }
  .js nav ul { grid-template-columns: 1fr; }
  .js nav a { padding: 13px 0; font-size: 15px; }
  .hero-grid { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { padding: 36px 24px 32px; }
  .hero-location { font-size: 11px; }
  .hero-category { margin-top: 17px; font-size: 12px; }
  .hero h1 { font-size: clamp(36px, 8.7vw, 48px); line-height: 1.55; letter-spacing: .08em; margin-top: 14px; }
  .hero-lead { font-size: 14px; line-height: 1.9; margin-top: 20px; }
  .hero-actions { margin-top: 22px; gap: 10px 16px; }
  .hero-actions .btn { min-height: 50px; padding: 12px 14px; font-size: 13px; gap: 14px; }
  .hero-link { font-size: 13px; }
  .hero-signature { padding-top: 22px; }
  .hero-signature > span { font-size: 26px; }
  .hero-signature > p { display: block; font-size: 9px; }
  .hero-visual { padding-inline: 16px; padding-bottom: 16px; background: var(--paper); }
  .slides { height: 380px; min-height: 0; }
  .photo-tag { top: 18px; right: 16px; }
  .hero-photo-bottom { left: 20px; right: 16px; bottom: 16px; }
  .hero-photo-bottom > p { display: block; font-size: 11px; }
  .hero-photo-bottom > p span { font-size: 16px; }
  .slide-controls { gap: 4px; }
  .slide-count { display: none; }
  .dots button { width: 20px; }
  .slides .slideshow-toggle { padding: 8px; font-size: 11px; }
  .visit-strip-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; padding-block: 20px; }
  .visit-strip p { font-size: 14px; }
  .visit-strip p > span { font-size: 11px; margin-right: 8px; }
  .visit-strip a { font-size: 12px; margin: 0; }
  section { padding-block: 60px; }
  .sec-head { margin-bottom: 26px; }
  .sec-head h2 { font-size: 27px; letter-spacing: .045em; }
  .label { font-size: 11px; letter-spacing: .15em; }
  .center-lead { font-size: 15px; }
  .concept { display: flex; flex-direction: column-reverse; gap: 30px; }
  .concept h2 { font-size: 25px; line-height: 1.85; letter-spacing: .045em; margin: 18px 0 22px; }
  .concept .txt { font-size: 15px; line-height: 2; }
  .concept > .photo { aspect-ratio: 5/4; object-position: 50% 40% !important; }
  .experience-head { margin-top: 36px; padding-top: 26px; }
  .experience-head > p:last-child { font-size: 15px; }
  .points { gap: 28px 24px; margin-top: 28px; }
  .point h3 { font-size: 17px; letter-spacing: 0; }
  .point p.txt { font-size: 14px; line-height: 1.9; }
  .cafe-layout { grid-template-columns: 1fr; gap: 30px; }
  .cafe-copy h2 { font-size: 28px; margin: 18px 0 22px; }
  .cafe-copy .txt { font-size: 15px; }
  .cafe-image img { aspect-ratio: 5/4; }
  .cafe-image figcaption { font-size: 21px; }
  .shop { gap: 30px; }
  .collection-name { font-size: 32px; margin-top: 20px; }
  .shop h2 { font-size: 29px; margin: 20px 0; }
  .shop .txt { font-size: 15px; }
  .feat li { grid-template-columns: 6em 1fr; gap: 14px; font-size: 14px; }
  .price-list span { font-size: 25px; }
  .shop .note { font-size: 14px; }
  .collection-image .photo { aspect-ratio: 1; }
  .collection-image figcaption { font-size: 12px; }
  .levels { margin-top: 40px; padding-top: 32px; }
  .levels h3 { font-size: 22px; }
  .swatches { gap: 10px; }
  .swatches figcaption { font-size: 11px; }
  .craft-caption { margin-top: 42px; }
  .craft-caption > p:last-child { font-size: 17px; }
  .ai-gallery { gap: 12px; }
  .goods { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; padding-top: 40px; }
  .goods figure { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; }
  .goods .photo { aspect-ratio: 1; }
  .goods figcaption { margin-top: 0; font-size: 20px; }
  .goods figcaption small { font-size: 14px; }
  .brands { margin-top: 38px; }
  .brand-cols { grid-template-columns: 1fr; gap: 36px; }
  .brands-content { padding-bottom: 32px; }
  .brands .sec-head h2 { font-size: 23px; }
  .brand-cols li { font-size: 14px; }
  .season { gap: 24px 14px; margin-top: 28px; }
  .season figcaption { font-size: 23px; }
  .season figcaption span { font-size: 12px; }
  .photo-controls { margin-top: 24px; }
  .slideshow-toggle { font-size: 12px; }
  .care-layout { gap: 36px; margin-top: 28px; }
  .info { grid-template-columns: 6em 1fr; font-size: 14px; }
  .info dt { font-size: 12px; }
  .info dt, .info dd { padding-block: 15px; }
  .oxygen { grid-template-columns: 100px 1fr; gap: 22px; align-items: start; }
  .oxygen .photo { aspect-ratio: 2/3; }
  .oxygen h3 { font-size: 20px; margin: 12px 0 16px; }
  .oxygen .txt { font-size: 14px; }
  .rules { grid-template-columns: 1fr; margin-top: 30px; }
  .rules li { padding: 24px 0 26px 44px; }
  .rules li::before { position: absolute; left: 0; top: 24px; font-size: 22px; }
  .rules b { font-size: 20px; margin-bottom: 12px; }
  .rules span { font-size: 15px; }
  .owner { grid-template-columns: 1fr; gap: 26px; }
  .owner .photo { width: 150px; aspect-ratio: 4/5; }
  .owner h3 { font-size: 28px; margin-top: 14px; }
  .owner .msg { font-size: 15px; }
  #news { padding-bottom: 48px; }
  .news-list li { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .news-list time { font-size: 14px; }
  .news-list span { font-size: 15px; }
  #media { padding-bottom: 56px; }
  .media-list li { grid-template-columns: 1fr; gap: 5px; font-size: 14px; }
  .access-intro { margin-bottom: 26px; }
  .access-intro > p { font-size: 15px; }
  .access .info { grid-template-columns: 6em 1fr; }
  .access .sub-note { font-size: 13px; }
  .map-foot { padding: 16px 20px 24px; }
  .map-btns { display: grid; grid-template-columns: 1fr; }
  .map-btns .btn { justify-content: center; min-height: 48px; font-size: 14px; }
  .sns { grid-template-columns: 1fr; }
  .sns a, .sns a:first-child { padding: 24px 0; }
  .sns a + a { border-left: 0; border-top: 1px solid var(--line); }
  .sns .k { font-size: 28px; }
  .sns .d { font-size: 14px; margin-top: 8px; }
  footer { padding: 48px 0 calc(104px + env(safe-area-inset-bottom)); }
  footer .mark img { width: 150px; }
  footer .place { font-size: 10px; line-height: 1.9; }
  .nap { font-size: 12px; }
  .mobile-actions { display: flex; position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; background: #151515; color: #fff; border-top: 1px solid #bbbbbb; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 20px #00000015; }
  .mobile-actions a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 58px; padding: 12px 16px; font-size: 13px; font-weight: 500; text-decoration: none; }
  .mobile-actions a + a { border-left: 1px solid #777777; flex: .6; }
  .mobile-actions a:hover { background: #000000; }
}
@media (max-width: 360px) {
  .wrap { padding-inline: 20px; }
  .hero-copy { padding-inline: 20px; }
  .hero h1 { font-size: 33px; }
  .hero-actions { gap: 14px; }
  .hero-actions .btn { font-size: 12px; padding-inline: 14px; gap: 12px; }
  .hero-link { font-size: 12px; }
  .hero-photo-bottom > p { display: none; }
  .point h3 { font-size: 16px; }
  .goods figure { grid-template-columns: 95px 1fr; gap: 18px; }
  .visit-strip-inner { column-gap: 4px; }
  .visit-strip p { font-size: 13px; }
  .visit-strip a { font-size: 11px; }
  .concept h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}