:root {
  --wine: #7a263e;
  --wine-dark: #321519;
  --rose: #dec2b7;
  --cream: #fffaf3;
  --ink: #30211d;
  --muted: #756158;
  --gold: #b88949;
  --amber: #a65b37;
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg,#fffdf9 0,#f8eee5 48%,#fffaf5 100%);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.eyebrow { margin: 0 0 10px; color: var(--wine); font: 700 .78rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.mobile-break { display:none; }
.desktop-break { display:block; }
.keep-line { white-space:nowrap; }

.brandbar { background: #fffdf9; border-bottom: 1px solid #ead9cd; }
.brandbar-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-logo { width: min(310px, 54vw); height: auto; }
.brand-shop { color:var(--wine); font-size:.9rem; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.hero {
  min-height: 720px;
  color: var(--ink);
  background: #f6e9df;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(420px, 1fr);
  position: relative;
  overflow: hidden;
}
.hero-copy { display: flex; align-items: center; padding: 58px max(28px, calc((100vw - 1120px) / 2)); padding-right: clamp(32px,4vw,64px); background: radial-gradient(circle at 8% 12%,#e8c9b7 0,transparent 36%), radial-gradient(circle at 88% 92%,rgba(184,137,73,.15),transparent 34%), linear-gradient(145deg,#fffaf3,#ead4c9); }
.hero-content { position: relative; z-index: 1; width: min(610px, 100%); }
.hero-media { position: relative; min-height: 720px; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(246,233,223,.34),transparent 28%), linear-gradient(0deg,rgba(89,42,30,.14),transparent 44%); }
.hero-media > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 53% center; }
.hero-mark { position: absolute; z-index: 1; width: 112px; right: 32px; bottom: 30px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.18)); }
.hero h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 5.3vw, 4.9rem); font-weight: 700; line-height: 1.14; letter-spacing: .015em; margin: 0 0 14px; }
.hero-title-line { display:inline-block; white-space:nowrap; }
.hero-emotion { margin:0 0 4px; color:var(--wine); font:700 clamp(1.05rem,1.6vw,1.25rem)/1.55 var(--font-display); }
.hero-lead { margin:0 0 20px; color:var(--muted); font-size:.98rem; font-weight:600; }
.hero-value-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0 0 22px; }
.hero-value { min-height:88px; display:flex; flex-direction:column; justify-content:center; padding:12px 15px; background:rgba(255,253,249,.82); border:1px solid rgba(122,38,62,.14); border-radius:16px; box-shadow:0 8px 24px rgba(76,39,25,.07); }
.hero-value small { color:var(--gold); font-size:.63rem; font-weight:800; letter-spacing:.12em; line-height:1.3; }
.hero-value strong { margin:2px 0 0; color:var(--wine); font:800 clamp(1.05rem,1.5vw,1.3rem)/1.35 var(--font-sans); white-space:nowrap; }
.hero-value span { color:var(--muted); font-size:.77rem; font-weight:600; line-height:1.45; }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 58px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-weight: 800; letter-spacing: .02em; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg,#8b2447,#681532); color: #fff; box-shadow: 0 12px 32px rgba(111,23,52,.22); }
.btn-wine { color: white; background: var(--wine); box-shadow: 0 12px 28px rgba(111,23,52,.2); }
.hero-content > .btn-primary { display:flex; width:min(100%,340px); margin-inline:auto; }
.reserve-note { margin:12px 0 0; color:var(--muted); font-size:.78rem; text-align:center; }

section { padding: 88px 0; }
.section-head { max-width: 700px; margin-bottom: 48px; }
.section-head h2 { margin: 0 0 14px; font: 700 clamp(2rem,4vw,3.2rem)/1.35 var(--font-display); letter-spacing: .015em; }
.section-head h2, .salon-story-copy h2, .access-copy h2, .social-head h2, .cta h2 { text-wrap:balance; word-break:auto-phrase; }
.section-head p { margin: 0; color: var(--muted); }
.solution-head { max-width:800px; }
@media (min-width:900px) { .solution-head h2 { white-space:nowrap; } }
.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.feature { min-height:0; padding:0; overflow:hidden; border:1px solid #e6d2c5; border-radius:24px; background:linear-gradient(145deg,#fffdf9,#f8eee5); box-shadow:0 14px 40px rgba(86,48,33,.10); }
.feature-top { position:relative; display:block; height:190px; }
.feature-num { position:absolute; z-index:2; left:24px; bottom:-28px; width:72px; height:58px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#9e3158,#701633); border:4px solid #fff; border-radius:18px; box-shadow:0 10px 24px rgba(111,23,52,.22); font:800 1.65rem/1 var(--font-sans); letter-spacing:.04em; }
.feature-photo { width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none; transform:none; }
.feature:nth-child(2) .feature-photo { transform:none; object-position:center 42%; }
.feature h3 { margin:48px 28px 10px; font:700 1.35rem/1.5 var(--font-display); }
.feature p { margin:0 28px 30px; color:var(--muted); }

.popular-designs { position:relative; overflow:hidden; background:linear-gradient(155deg,#f2e3d7,#fffaf4 48%,#ead6ca); }
.popular-designs::before { content:""; position:absolute; width:360px; height:360px; right:-110px; top:-120px; border-radius:50%; background:radial-gradient(circle,rgba(184,137,73,.18),transparent 68%); }
.popular-designs .eyebrow { color:var(--wine); }
.popular-grid { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.popular-slot { position:relative; overflow:hidden; aspect-ratio:4/3; margin:0; color:#fff; background:#d7bda8; border:1px solid rgba(255,255,255,.65); border-radius:22px; box-shadow:0 16px 36px rgba(69,38,25,.14); }
.popular-slot img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.popular-slot:hover img { transform:scale(1.035); }
.popular-slot figcaption { position:absolute; inset:auto 0 0; padding:38px 18px 16px; background:linear-gradient(transparent,rgba(42,22,18,.78)); }
.popular-slot figcaption span { display:block; color:#e7c48d; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.popular-slot figcaption strong { display:block; margin-top:2px; font-size:1rem; letter-spacing:.03em; }
.popular-note { margin:18px 0 0; color:var(--muted); font-size:.88rem; text-align:center; }

.salon-story { padding-top: 72px; padding-bottom: 0; }
.salon-story-card { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 56px; padding: 46px; border-radius: 28px; background: #fffdf9; box-shadow: 0 18px 60px rgba(72,39,27,.10); }
.salon-story-logo { display: block; width: min(320px,100%); margin: 0 auto; }
.salon-story-copy h2 { margin: 0 0 14px; font: 700 clamp(1.8rem,3vw,2.6rem)/1.45 var(--font-display); letter-spacing: .015em; }
.salon-story-copy p:last-child { margin: 0; color: var(--muted); }

.menu-section { background: linear-gradient(145deg,#f4e3d7,#fffaf4 52%,#ead1c3); color: var(--ink); }
.menu-section .eyebrow { color: var(--wine); }
.menu-section .section-head p { color: var(--muted); }
.menu-head { max-width:none; }
@media (min-width:900px) { .menu-head > p:not(.eyebrow) { white-space:nowrap; } }
.design-browser { display:flex; align-items:center; gap:8px; width:max-content; margin:22px auto 0; min-height:50px; padding:0 20px; color:#fff; background:var(--wine); border-radius:999px; text-decoration:none; font-weight:800; box-shadow:0 10px 25px rgba(111,23,52,.17); }
.design-browser span { font-size:1.15em; }
.menu-grid { display: grid; grid-template-columns: 1.35fr .9fr .9fr; gap: 18px; align-items:stretch; }
.menu-card { position:relative; min-height:220px; padding:30px; background:rgba(255,253,249,.9); border:1px solid #dfc9bb; border-radius:22px; box-shadow:0 12px 34px rgba(81,44,29,.08); }
.menu-card.main { min-height:244px; padding:34px; background: linear-gradient(145deg,#fffdf9,#ead1c3); border:2px solid #c79679; box-shadow:0 18px 42px rgba(96,49,31,.14); }
.menu-card:not(.main) { margin-block:12px; background:rgba(255,253,249,.72); box-shadow:0 8px 24px rgba(81,44,29,.06); }
.menu-card > *:not(.menu-icon) { position:relative; z-index:1; }
.menu-card > .menu-badge { position:absolute; top:-12px; left:24px; display:inline-flex; align-items:center; min-height:30px; padding:0 14px; color:#fff; background:linear-gradient(135deg,#9a2f56,#6f1734); border:3px solid #fff; border-radius:999px; box-shadow:0 7px 18px rgba(111,23,52,.2); font-size:.75rem; font-weight:800; letter-spacing:.03em; }
.menu-icon { position:absolute; top:28px; right:26px; width:66px; height:66px; display:grid; place-items:center; color:var(--wine); background:linear-gradient(145deg,#fff,#f7dce5); border-radius:50%; opacity:.9; }
.menu-icon svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.menu-card h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.price { margin: 12px 0 8px; font: 800 clamp(2rem,3.5vw,3rem)/1.15 var(--font-sans); letter-spacing: .01em; }
.menu-card.main .price { font-size:clamp(2.7rem,4vw,3.7rem); color:var(--wine); }
.menu-card:not(.main) .price { font-size:clamp(1.9rem,2.8vw,2.5rem); }
.menu-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.menu-foot { margin-top: 22px; color: var(--muted); font-size: .78rem; }

.reviews { background:#fffaf5; }
.reviews .section-head { margin-inline:auto; text-align:center; }
.reviews .section-head h2 { white-space:nowrap; font-size:clamp(1.4rem,6.7vw,3.2rem); }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review-card { min-height:260px; padding:30px; background:#fff; border:1px solid #ecd8df; border-radius:22px; box-shadow:0 14px 36px rgba(111,23,52,.08); }
.review-platform { margin:0 0 12px; color:var(--wine); font-size:.72rem; font-weight:800; letter-spacing:.04em; }
.review-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.review-rating { color:var(--gold); font-size:1.25rem; letter-spacing:.05em; white-space:nowrap; }
.reviewer { display:flex; align-items:center; gap:9px; color:var(--wine); flex:none; }
.reviewer > span:last-child { display:flex; flex-direction:column; line-height:1.25; }
.reviewer strong { font-size:.9rem; }
.reviewer small { color:var(--muted); font-size:.72rem; font-weight:700; }
.review-avatar { width:52px; height:52px; display:grid; place-items:center; color:var(--wine); background:linear-gradient(145deg,#f8e5da,#ead0c2); border:1px solid #e2c1b1; border-radius:50%; box-shadow:0 7px 16px rgba(92,46,32,.10); }
.review-avatar svg { width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.avatar-30 { background:linear-gradient(145deg,#f8e0d8,#edc6bb); }
.avatar-40 { background:linear-gradient(145deg,#f3e5d7,#e5cbb7); }
.avatar-50 { background:linear-gradient(145deg,#eee3d7,#d9c4b0); }
.review-card blockquote { margin:0; color:var(--ink); font-size:1rem; line-height:1.9; }
.review-source { margin:18px 0 0; color:var(--muted); font-size:.78rem; text-align:right; }

.flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.flow-item { position: relative; overflow: hidden; background: white; border: 1px solid #f0dce2; border-radius: 22px; box-shadow: 0 14px 40px rgba(111,23,52,.09); }
.flow-image { aspect-ratio: 4/3; overflow: hidden; background:#f9eaf0; }
.flow-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.flow-item:hover .flow-image img { transform:scale(1.035); }
.flow-copy { position:relative; padding:25px 25px 27px 68px; }
.flow-num { position:absolute; left:24px; top:28px; color:var(--wine); font:800 1.05rem/1 var(--font-sans); letter-spacing:.04em; }
.flow-item h3 { margin: 0 0 7px; font-size: 1.05rem; }
.flow-item p { margin: 0; color: var(--muted); font-size: .9rem; }

.access { padding-top: 0; }
.access-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 26px; background: #f3e3d7; box-shadow:0 16px 45px rgba(82,43,28,.09); }
.access-copy { padding: 52px; }
.access-copy h2 { margin: 0 0 24px; font: 700 clamp(1.8rem,3vw,2.7rem)/1.4 var(--font-display); letter-spacing:.015em; }
.access-copy dl { display: grid; grid-template-columns: 6rem 1fr; gap: 12px; margin: 0; }
.access-copy dt { color: var(--wine); font-weight: 700; }
.access-copy dd { margin: 0; }
.map-panel { position:relative; min-height:360px; background:#ead9df; }
.google-map { display:block; width:100%; height:100%; min-height:360px; border:0; }
.map-link { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 22px; border-radius:999px; color:#fff; background:var(--wine); box-shadow:0 10px 28px rgba(40,11,24,.25); text-decoration:none; font-weight:800; white-space:nowrap; }
.map-link:hover { background:#58112a; }

.social-links { padding-top:0; text-align:center; }
.social-head { max-width:820px; margin:0 auto 34px; }
.social-head h2 { margin:0; font:700 clamp(1.9rem,3.7vw,2.8rem)/1.45 var(--font-display); letter-spacing:.01em; }
@media (min-width:900px) {
  .social-head { max-width:none; }
  .social-head h2 { white-space:nowrap; }
}
.social-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,360px)); justify-content:center; gap:18px; }
.social-button { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:16px; min-height:98px; padding:18px 20px; color:var(--ink); background:#fff; border:1px solid #edd8df; border-radius:22px; box-shadow:0 12px 34px rgba(111,23,52,.08); text-align:left; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.social-button:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(111,23,52,.13); }
.social-icon { width:56px; height:56px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#a5385f,#711735); border-radius:18px; }
.social-line .social-icon { background:linear-gradient(145deg,#35c966,#10a342); }
.social-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.social-button small { display:block; color:var(--muted); font-size:.76rem; font-weight:700; }
.social-button strong { display:block; margin-top:2px; color:var(--wine); font-size:1.08rem; }
.social-line strong { color:#168b3f; }
.social-button > b { color:var(--muted); font-size:1.15rem; }

.cta { padding: 84px 0 118px; text-align: center; background: radial-gradient(circle at 15% 0,rgba(218,161,91,.2),transparent 35%), linear-gradient(135deg,#9a4937,#6f1833 62%,#3a171a); color: white; }
.cta h2 { margin: 0 0 12px; font: 700 clamp(2rem,4vw,3.4rem)/1.38 var(--font-display); letter-spacing:.015em; }
.cta p { margin: 0 auto 26px; color: #ead9df; }
.cta-final-button { width:min(100%,420px); min-height:64px; font-size:1.05rem; border:1px solid rgba(255,255,255,.7); }
.cta .cta-note { margin:12px 0 0; color:#e3cdd3; font-size:.76rem; }
.footer { padding: 30px 20px 110px; text-align: center; color: #8b7468; font-size: .76rem; background: #fffaf5; }
.sticky { display: none; transition:opacity .22s ease,transform .22s ease; }
.sticky.is-hidden { opacity:0; pointer-events:none; transform:translateY(14px); }

@media (max-width: 760px) {
  .wrap { width: min(calc(100% - 28px), 680px); }
  .brandbar-inner { min-height: 66px; }
  .brand-logo { width: min(250px, 68vw); }
  .brand-shop { font-size:.75rem; letter-spacing:.04em; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-media { order: -1; min-height: 280px; }
  .hero-media::after { background: linear-gradient(0deg,rgba(111,23,52,.12),transparent 45%); }
  .hero-media > img:first-child { position: absolute; inset: 0; object-position: 48% center; }
  .hero-mark { width: 76px; right: 18px; bottom: 18px; }
  .hero-copy { padding: 38px 20px 88px; }
  .hero h1 { max-width:none; font-size:clamp(2.4rem,11.2vw,3.05rem); line-height:1.18; margin-bottom:12px; }
  .hero-emotion { font-size:1.08rem; }
  .hero-lead { max-width:23rem; margin-bottom:18px; font-size:.94rem; line-height:1.65; }
  .hero-value-grid { grid-template-columns:1fr; gap:7px; margin-bottom:20px; }
  .hero-value { min-height:66px; padding:9px 14px; display:grid; grid-template-columns:70px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; }
  .hero-value small { grid-row:1 / 3; }
  .hero-value strong { grid-column:2; font-size:1.12rem; }
  .hero-value span { grid-column:2; font-size:.75rem; }
  .hero-content > .btn-primary { width:min(100% - 20px,340px); }
  section { padding: 72px 0; }
  .features, .menu-grid, .flow, .access-card, .salon-story-card { grid-template-columns: 1fr; }
  .popular-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .popular-slot { aspect-ratio:auto; display:grid; grid-template-rows:auto auto; color:var(--ink); background:#fffdf9; border-radius:18px; }
  .popular-slot img { aspect-ratio:1; object-fit:cover; }
  .popular-slot figcaption { position:static; padding:9px 11px 10px; background:none; }
  .popular-slot figcaption span { color:var(--gold); font-size:.62rem; }
  .popular-slot figcaption strong { color:var(--ink); font-size:.82rem; line-height:1.35; }
  .review-grid { grid-template-columns:1fr; gap:12px; }
  .review-card { min-height:0; padding:24px; }
  .review-top { margin-bottom:20px; }
  .review-avatar { width:56px; height:56px; }
  .review-source { text-align:left; }
  .salon-story { padding-top: 60px; }
  .salon-story-card { gap: 26px; padding: 30px 22px; }
  .salon-story-logo { width: min(260px,85%); }
  .mobile-break { display:block; }
  .desktop-break { display:none; }
  .salon-story-copy h2, .first-visit-head h2 { font-size:clamp(1.85rem,8vw,2.2rem); line-height:1.42; }
  .feature { min-height:0; padding:0; }
  .feature-top { height:220px; }
  .feature-num { left:22px; bottom:-30px; width:78px; height:62px; border-radius:19px; font-size:1.82rem; }
  .feature h3 { margin:50px 24px 10px; font-size:1.45rem; }
  .feature p { margin:0 24px 28px; }
  .feature-photo { width:100%; height:100%; border-radius:0; }
  .menu-card, .menu-card.main { min-height:190px; padding:28px; }
  .menu-card:not(.main) { margin-block:0; }
  .menu-icon { top:24px; right:24px; width:72px; height:72px; }
  .access-copy { padding: 36px 24px; }
  .access-copy dl { grid-template-columns: 1fr; gap: 2px; }
  .access-copy dd { margin-bottom: 12px; }
  .map-panel, .google-map { min-height: 300px; }
  .map-link { bottom:14px; font-size:.9rem; }
  .social-links { padding-top:0; }
  .social-head { margin-bottom:26px; }
  .social-buttons { grid-template-columns:1fr; gap:12px; }
  .social-button { min-height:90px; padding:16px 18px; }
  .sticky { display: grid; position: fixed; z-index: 20; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); grid-template-columns: 1fr; }
  .sticky .btn { min-height: 56px; border: 2px solid white; }
  .cta { padding-bottom:112px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }