:root {
  --paper:#F4F0E8; --ink:#201C18; --mut:#5F574E; --rule:rgba(32,28,24,.14); --focus:#2A6DF4;
  --min:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --lat:"Inter Tight","Helvetica Neue",system-ui,sans-serif;
  --text-body:16px; --text-control:15px; --text-note:13px; --text-label:12px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --section-space:96px; --pad:clamp(20px,3.9vw,56px); --content-max:1280px; --duration-fast:250ms;
}
html[data-brand="cafe"] { --sample-bg:#EDE3D2; --sample-ink:#2B2520; --sample-accent:#8A5A32; --sample-muted:#6E6257; --sample-card:#F7F1E6; }
html[data-brand="salon"] { --sample-bg:#161616; --sample-ink:#F4F4F2; --sample-accent:#CFC8BC; --sample-muted:#A9A49B; --sample-card:#121212; }
html[data-brand="food"] { --sample-bg:#15372B; --sample-ink:#F3EBD9; --sample-accent:#E0B45C; --sample-muted:#B9C4B4; --sample-card:#15372B; }
html[data-brand="school"] { --sample-bg:#FCEFC4; --sample-ink:#1D2A44; --sample-accent:#2457D6; --sample-muted:#4A5670; --sample-card:#FFD23F; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--sample-bg); color:var(--sample-ink); font:400 var(--text-body)/1.8 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure,dl,dd { margin:0; }
/* 文節を分断せず、行末に1〜2字だけを残さない。 */
.phrase { display:inline-block; white-space:nowrap; }
a { color:inherit; text-underline-offset:5px; }
button,select { font:inherit; color:inherit; }
button { cursor:pointer; }
button,a,summary,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
img { display:block; width:100%; height:auto; }
[hidden] { display:none!important; }
.skip-link { position:fixed; z-index:20; top:8px; left:20px; padding:12px; background:var(--paper); color:var(--ink); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.demo-banner { background:var(--paper); color:var(--ink); border-bottom:1px solid var(--rule); }
.banner-inner { max-width:calc(var(--content-max) + var(--pad) * 2); margin:auto; padding:4px var(--pad); display:flex; justify-content:space-between; align-items:center; gap:4px 24px; }
.sample-notice { display:flex; flex-wrap:wrap; gap:0 12px; font-size:12px; line-height:1.7; }
.sample-notice span { white-space:nowrap; }
.back-link { display:inline-flex; align-items:center; min-height:44px; padding:11px 0; font-size:14px; font-weight:500; flex-shrink:0; }
.shop-header { position:sticky; top:0; z-index:10; background:var(--sample-bg); border-bottom:1px solid color-mix(in srgb,var(--sample-ink) 20%,transparent); }
.header-inner { max-width:calc(var(--content-max) + var(--pad) * 2); margin:auto; padding:0 var(--pad); min-height:80px; display:flex; justify-content:space-between; align-items:center; gap:24px; position:relative; }
.brand-mark { min-height:44px; display:inline-flex; align-items:center; font:600 22px/1.2 var(--lat); letter-spacing:.025em; text-decoration:none; }
.shop-nav { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; }
.shop-nav a { display:inline-flex; align-items:center; min-height:44px; padding:11px 4px; font-size:14px; text-decoration:none; border-bottom:1px solid transparent; }
.shop-nav a:hover { border-color:currentColor; }
.menu-button { min-height:44px; min-width:104px; border:1px solid currentColor; border-radius:0; background:none; padding:8px 12px; font-size:13px; }
.page-shell { max-width:calc(var(--content-max) + var(--pad) * 2); margin:auto; padding:0 var(--pad); }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); border-bottom:1px solid color-mix(in srgb,var(--sample-ink) 20%,transparent); }
.hero-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:64px 48px 64px 0; }
.kicker { color:var(--sample-accent); font:500 12px/1.8 var(--lat); letter-spacing:.16em; margin-bottom:24px; }
h1 { font:600 clamp(34px,3.4vw,52px)/1.6 var(--min); letter-spacing:.035em; }
.hero-description { color:var(--sample-muted); max-width:28em; margin-top:24px; font-size:15px; line-height:2; }
.hero-action { margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; min-height:52px; border:1px solid var(--sample-ink); padding:13px 24px; background:var(--sample-ink); color:var(--sample-bg); text-decoration:none; font-size:15px; font-weight:500; transition:opacity var(--duration-fast) ease; }
.button:hover { opacity:.8; }
.hero-meta { margin-top:24px; font:500 12px/1.8 var(--lat); letter-spacing:.07em; color:var(--sample-muted); }
.hero-photo-note { max-width:30em; margin-top:16px; text-wrap:pretty; }
.hero-photo-note span { display:inline-block; }
.hero-visual { margin:0; min-width:0; }
.hero-photo { height:100%; min-height:570px; max-height:650px; object-fit:cover; }
.section { padding:var(--section-space) 0; border-bottom:1px solid color-mix(in srgb,var(--sample-ink) 20%,transparent); scroll-margin-top:104px; }
.section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:end; margin-bottom:40px; }
.section-index { color:var(--sample-accent); font:500 12px/1.7 var(--lat); letter-spacing:.13em; margin-bottom:12px; }
h2 { font:600 clamp(26px,2.7vw,38px)/1.5 var(--min); letter-spacing:.03em; }
.section-intro { color:var(--sample-muted); max-width:34em; font-size:15px; line-height:1.9; }
h3 { font-size:20px; line-height:1.5; font-weight:500; }
.note { font-size:13px; line-height:1.8; color:var(--sample-muted); }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; }
.split>*,.style-grid>*,.product-layout>*,.class-grid>* { min-width:0; }
.menu-time-note { padding:20px 0; border-top:1px solid var(--sample-muted); }
.menu-time-note h3 { margin-bottom:12px; }
.menu-time-note p+p { margin-top:12px; }
.feature-photo { width:100%; height:450px; object-fit:cover; }
figcaption { font-size:12px; color:var(--sample-muted); margin-top:10px; }
.accordion { border-top:1px solid color-mix(in srgb,var(--sample-ink) 28%,transparent); }
.accordion:last-child { border-bottom:1px solid color-mix(in srgb,var(--sample-ink) 28%,transparent); }
summary { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px; cursor:pointer; list-style:none; padding:16px 0; font-size:18px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"＋"; font-size:20px; }
details[open]>summary::after { content:"−"; }
.accordion-body { padding:0 0 24px; }
.menu-list>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; padding:16px 0; border-top:1px solid color-mix(in srgb,var(--sample-ink) 14%,transparent); font-size:15px; }
.menu-list dt small { display:block; margin-top:4px; color:var(--sample-muted); font-size:13px; }
.menu-list dd { align-self:center; font:500 15px/1.6 var(--lat); white-space:nowrap; }
.info-list>div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:24px; padding:18px 0; border-top:1px solid color-mix(in srgb,var(--sample-ink) 20%,transparent); }
.info-list dt { color:var(--sample-muted); font-size:13px; }
.info-list dd { font-size:15px; }
.callout { margin-top:24px; padding:24px; background:var(--sample-card); border:1px solid color-mix(in srgb,var(--sample-ink) 20%,transparent); }
.callout p+p { margin-top:8px; }
.callout .big-number { font:500 56px/1 var(--lat); margin-right:12px; }
.map { aspect-ratio:4/3; min-height:0; position:relative; background:var(--sample-card); border:1px solid color-mix(in srgb,var(--sample-ink) 20%,transparent); isolation:isolate; container-type:inline-size; }
.map-road { position:absolute; z-index:0; background:#D2C1A7; border:2px solid #8D785D; }
.map-road.horizontal { z-index:1; left:0; top:54%; width:100%; height:48px; border-left:0; border-right:0; }
.map-road.horizontal::after { content:""; position:absolute; left:57%; width:48px; top:-2px; bottom:-2px; background:#D2C1A7; }
.map-road.vertical { top:0; left:57%; height:100%; width:48px; border-top:0; border-bottom:0; }
.map-label { position:absolute; z-index:2; font-size:13px; padding:8px 10px; background:var(--sample-card); }
.map-station { bottom:16px; left:72%; border:1px solid currentColor; }
.map-route { position:absolute; z-index:2; left:calc(57% + 22px); top:calc(54% + 22px); width:0; height:calc(46% - 48px); border-left:3px dashed var(--sample-accent); }
.map-route::before { content:""; position:absolute; left:0; bottom:0; width:17cqw; border-top:3px dashed var(--sample-accent); }
.map-route::after { content:""; position:absolute; right:0; bottom:calc(100% - 2px); width:39cqw; height:18cqw; border-left:3px dashed var(--sample-accent); border-bottom:3px dashed var(--sample-accent); }
.map-parking { bottom:16px; left:8%; border:1px solid currentColor; }
.map-shop { top:27%; left:12%; background:var(--sample-ink); color:var(--sample-bg); font:600 13px/1.6 var(--lat); }
.map-caption { position:absolute; z-index:2; top:16px; right:16px; font-size:12px; color:var(--sample-muted); }
.demo-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; }
.demo-section .section-heading { display:block; margin:0; }
.demo-section .section-intro { margin-top:16px; }
.demo-controls { padding:32px; border:1px solid color-mix(in srgb,var(--sample-ink) 26%,transparent); background:var(--sample-card); }
.demo-controls label { display:block; font-size:13px; margin-bottom:8px; }
.demo-controls select { display:block; width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--sample-muted); border-radius:0; background:var(--sample-bg); font-size:15px; }
.demo-controls .button { width:100%; margin-top:20px; }
.demo-controls .note { margin-top:16px; }
.demo-message { margin-top:20px; border-left:3px solid var(--sample-accent); padding:12px 16px; font-size:15px; line-height:1.9; }
.steps { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.steps li { padding-top:24px; border-top:1px solid color-mix(in srgb,var(--sample-ink) 28%,transparent); }
.step-no { display:block; font:500 36px/1 var(--lat); color:var(--sample-accent); margin-bottom:24px; }
.steps p { font-size:15px; color:var(--sample-muted); margin-top:12px; }
.site-footer { padding:40px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 32px; }
.footer-mark { font:600 18px/1.5 var(--lat); }
.site-footer p { font-size:12px; color:var(--sample-muted); }
.site-footer a { min-height:44px; padding:11px 0; display:inline-flex; align-items:center; font-size:14px; }
/* 業種ごとの写真の比率と紙面 */
[data-brand="cafe"] .hero-photo { object-position:54% center; }
[data-brand="cafe"] .feature-photo { object-position:center 46%; }
[data-brand="cafe"] .split { align-items:stretch; }
@media(min-width:1024px) {
  [data-brand="cafe"] .section:not(.demo-section)>.section-heading { gap:64px; }
}
[data-brand="cafe"] #menu .feature-figure { display:flex; flex-direction:column; }
[data-brand="cafe"] #menu .feature-photo { flex:1; height:0; min-height:360px; }
[data-brand="cafe"] #access .info-list { display:grid; grid-template-rows:repeat(3,minmax(min-content,1fr)); border-bottom:1px solid color-mix(in srgb,var(--sample-ink) 20%,transparent); }
[data-brand="cafe"] #access .info-list>div { align-content:center; }
[data-brand="cafe"] #hours .callout { margin-top:0; display:flex; flex-direction:column; justify-content:center; }
[data-brand="salon"] .brand-mark { font-size:38px; letter-spacing:-.08em; }
[data-brand="salon"] h1 { font-family:var(--sans); font-weight:400; letter-spacing:.05em; }
[data-brand="salon"] h2 { font-family:var(--sans); font-weight:400; }
[data-brand="salon"] .hero { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
[data-brand="salon"] .hero-photo { height:650px; object-position:center 42%; }
/* 1枚の写真に対して、架空のスタイル例を3つ並べる。 */
.style-principles { display:grid; grid-template-rows:repeat(3,1fr); border-bottom:1px solid var(--sample-muted); }
.style-card { display:grid; grid-template-columns:56px minmax(0,1fr); align-content:start; gap:16px; padding:24px 0; border-top:1px solid var(--sample-muted); }
.style-no { font:400 clamp(32px,3vw,44px)/1 var(--lat); letter-spacing:0; }
.style-card h3 { margin-bottom:8px; }
.style-card .note,.style-facts dd { font-size:var(--text-body); line-height:1.8; }
.style-facts { margin-top:16px; }
.style-facts>div+div { margin-top:12px; }
.style-facts dt { font-size:14px; color:var(--sample-muted); }
.style-facts dd { margin-top:2px; }
@media(min-width:1024px) {
  .style-facts>div { display:grid; grid-template-columns:10.5em minmax(0,1fr); align-items:baseline; gap:4px 12px; }
  .style-facts dd { margin-top:0; }
}
.style-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:32px; }
.style-grid .feature-figure { display:flex; flex-direction:column; }
.style-grid .feature-photo { flex:1; height:0; min-height:480px; object-fit:cover; object-position:center 42%; }
[data-brand="salon"] #space .split { align-items:stretch; }
[data-brand="salon"] #space .info-list { display:grid; grid-template-rows:repeat(3,minmax(min-content,1fr)); border-bottom:1px solid var(--sample-muted); }
[data-brand="salon"] #space .info-list>div { align-content:center; }
.seat-diagram { display:flex; justify-content:space-evenly; gap:24px; padding:24px 0; margin:16px 0; border-block:1px solid var(--sample-muted); }
.seat-unit { display:grid; justify-items:center; gap:18px; font:500 13px/1.5 var(--lat); }
.seat-unit::before { content:""; width:56px; height:56px; border:2px solid var(--sample-accent); border-radius:50%; }
.seat-unit i { position:relative; width:56px; height:42px; border:2px solid var(--sample-accent); border-radius:12px 12px 5px 5px; }
.seat-unit i::after { content:""; position:absolute; left:-6px; right:-6px; bottom:-6px; height:14px; border:2px solid var(--sample-accent); border-radius:4px; background:var(--sample-card); }
.seat-unit b { font-weight:500; }
[data-brand="food"] .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
[data-brand="food"] .hero-visual { padding:0; }
[data-brand="food"] .hero-photo { height:100%; min-height:570px; object-fit:cover; }
[data-brand="food"] h1 { font-weight:500; letter-spacing:.08em; }
.product-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:center; }
.product-layout .feature-photo { height:450px; object-fit:cover; }
.product-description h3 { font:500 30px/1.5 var(--min); margin-bottom:20px; }
.product-description>p { max-width:30em; margin-bottom:24px; color:var(--sample-muted); font-size:15px; }
.product-description>p.product-note { margin:16px 0 0; font-size:13px; }
[data-brand="food"] #ingredients { padding-bottom:32px; }
.serving-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.serving-grid article { border-top:1px solid var(--sample-muted); padding-top:24px; }
.serving-grid .kicker { margin-bottom:12px; }
.serving-grid h3 { margin-bottom:12px; }
.serving-grid article>p:last-child { color:var(--sample-muted); font-size:15px; }
[data-brand="school"] h1,[data-brand="school"] h2 { font-family:var(--sans); font-weight:700; }
[data-brand="school"] .brand-mark { color:var(--sample-accent); font-weight:700; }
[data-brand="school"] .hero { grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); padding-bottom:40px; }
[data-brand="school"] .hero-visual { padding:32px 0 0; }
[data-brand="school"] .hero-photo { min-height:0; height:530px; border-radius:48% 48% 4% 4%; }
[data-brand="school"] .button { border-color:var(--sample-accent); background:var(--sample-accent); color:#fff; }
.class-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.class-card { padding:32px; border:1px solid var(--sample-ink); }
.class-card:nth-child(2) { background:var(--sample-card); }
.class-card h3 { font-weight:700; margin-bottom:16px; }
.class-card p { font-size:15px; margin-bottom:20px; }
.class-card .note { font-size:13px; margin-bottom:0; }
.class-facts { margin-bottom:20px; }
.class-facts>div { display:grid; grid-template-columns:1fr; gap:4px; padding:12px 0; border-top:1px solid var(--sample-muted); }
.class-facts dt { font-size:14px; font-weight:700; color:var(--sample-ink); }
.class-facts dd { font-size:15px; line-height:1.8; }
.class-facts>div:first-child { min-height:108px; }
@supports (grid-template-rows:subgrid) {
  @media (min-width:600px) {
    .class-card { display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; }
  }
}
[data-brand="school"] .feature-photo { border-radius:8px; height:420px; }
@media(min-width:600px) {
  .prepare-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:start; }
  .prepare-section>.section-heading { grid-column:1; grid-row:1; display:block; margin:0; }
  .prepare-section .section-intro { margin-top:16px; }
  .prepare-section>.split { display:contents; }
  .prepare-section .split>div { grid-column:1; grid-row:2; }
  .prepare-section .feature-figure { grid-column:2; grid-row:1 / 3; align-self:stretch; display:flex; flex-direction:column; }
  .prepare-section .feature-photo { flex:1; height:0; min-height:420px; }
}
@media(max-width:1023px) {
  :root { --section-space:64px; }
  .banner-inner { flex-direction:column; align-items:flex-start; gap:0; padding-top:8px; padding-bottom:4px; }
  .header-inner { min-height:72px; }
  .shop-nav { gap:8px 20px; }
  .js .shop-nav { position:absolute; left:0; right:0; top:100%; padding:16px var(--pad) 24px; background:var(--sample-bg); border-bottom:1px solid var(--sample-muted); flex-direction:column; align-items:stretch; gap:0; }
  .js .shop-nav a { min-height:48px; border-bottom:1px solid color-mix(in srgb,var(--sample-ink) 15%,transparent); }
  html:not(.js) .header-inner { flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
  .hero-copy { padding:40px 28px 40px 0; }
  h1 { font-size:32px; }
  [data-brand="cafe"] h1 { font-size:clamp(28px,4vw,32px); }
  .hero-photo { min-height:490px; }
  .hero-description { font-size:15px; }
  .split,.style-grid,.product-layout { gap:32px; }
  .feature-photo { height:400px; }
  .demo-section { gap:32px; }
  .demo-controls { padding:24px; }
  .class-card { padding:24px; }
  .class-grid { gap:12px; }
  [data-brand="salon"] .hero-photo { height:560px; }
  [data-brand="food"] .hero-photo { height:100%; min-height:490px; }
  [data-brand="school"] .hero-photo { height:450px; }
}
@media(max-width:599px) {
  :root { --pad:20px; }
  .sample-notice { max-width:100%; font-size:12px; gap:0 10px; }
  .sample-notice span:last-child { flex-basis:100%; }
  .header-inner { min-height:68px; gap:12px; }
  .brand-mark { font-size:18px; }
  .menu-button { min-width:100px; }
  .hero,[data-brand="salon"] .hero,[data-brand="food"] .hero,[data-brand="school"] .hero { grid-template-columns:1fr; }
  .hero-copy { padding:32px 0; }
  .kicker { margin-bottom:16px; }
  h1,[data-brand="cafe"] h1 { font-size:clamp(28px,7.5vw,34px); line-height:1.55; letter-spacing:.02em; }
  .hero-description { margin-top:20px; font-size:15px; line-height:1.9; }
  .hero-action { margin-top:24px; }
  .hero-meta { margin-top:20px; font-size:12px; }
  .hero-photo { min-height:0; height:270px; max-height:none; }
  .section { scroll-margin-top:92px; }
  .section-heading { grid-template-columns:1fr; gap:16px; margin-bottom:28px; }
  h2 { font-size:27px; }
  .section-intro { font-size:15px; }
  .split,.demo-section,.style-grid,.product-layout { grid-template-columns:1fr; gap:32px; }
  .feature-photo { height:340px; }
  .split>.feature-figure { order:2; }
  .info-list>div { grid-template-columns:76px minmax(0,1fr); gap:16px; }
  .demo-controls { padding:24px 20px; }
  .button { gap:24px; padding:13px 20px; }
  .steps { grid-template-columns:1fr; gap:24px; }
  .steps li { display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px 16px; padding-top:24px; }
  .step-no { grid-row:1/3; font-size:28px; margin-bottom:0; }
  .steps h3 { font-size:18px; }
  .steps p { grid-column:2; margin:0; }
  .site-footer { align-items:flex-start; flex-direction:column; padding:32px 0; gap:12px; }
  [data-brand="salon"] .brand-mark { font-size:32px; }
  [data-brand="salon"] .hero-photo { height:380px; }
  .style-grid .feature-photo { flex:none; height:420px; min-height:0; }
  [data-brand="cafe"] #menu .feature-photo { flex:none; height:340px; min-height:0; }
  .serving-grid { grid-template-columns:1fr; gap:24px; }
  [data-brand="food"] .hero-visual { padding:0 0 24px; }
  [data-brand="food"] .hero-photo { height:350px; min-height:0; }
  .product-layout { gap:24px; }
  .product-layout .feature-photo { height:340px; }
  [data-brand="school"] .hero { padding-bottom:28px; }
  [data-brand="school"] .hero-visual { padding:0; }
  [data-brand="school"] .hero-photo { height:300px; }
  .class-grid { grid-template-columns:1fr; gap:16px; }
  .class-card { padding:28px; }
  .class-facts>div { grid-template-columns:84px minmax(0,1fr); gap:12px; }
  .class-facts>div:first-child { min-height:0; }
  [data-brand="school"] .feature-photo { height:320px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
}
html.no-motion { scroll-behavior:auto; }
html.no-motion *,html.no-motion *::before,html.no-motion *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }