/* 案件固有のスタイル。型(styles.css)は編集禁止 — 上書きはすべてここに書く。
   読み込み順は styles.css → custom.css なので、同じセレクタ/変数はこちらが勝つ。 */

:root {
  --mold-version: 9;
  /* font-preset: serene */
  --lh-body: 1.95;
  --lh-display: 1.35;
  --ls-en: .10em;
  --ls-body: .02em;
  --ls-display: .04em;
  --fw-strong: 700;
  --fw-body: 400;
  --fw-display: 500;
  --font-en: "Cormorant Garamond", serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-display: "Zen Old Mincho", serif;
  /* 配色: extract_palette.py の4値をここに */
  /* 書体: apply_design_tokens.py --preset <key> が自動で書く */
}

/* ルートAヒーロー(make_hero_bg.py の出力座標)はここに書く */

/* motion-catalog:basic-appear start — 基本の現れ方（Basic Entrances） */
.bap { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 4cqh 5cqw; gap: 2cqh; font-size: clamp(7px, min(1.9cqw, 3cqh), 15px); }
.bap-card { position: relative; display: flex; width: min(100%, 36em); border-radius: 1.2em; background: var(--surface, #fff); border: 1px solid var(--rule, #D3D3D9); box-shadow: 0 1.4em 2.4em -1.6em rgba(18, 18, 20, .35); overflow: hidden; opacity: 0; }
.bap-ph { flex: none; width: 38%; aspect-ratio: 1; position: relative; background: var(--c4, #F4CB4E); }
.bap-ph::before { content: ""; position: absolute; left: 18%; top: 22%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--c3, #E85C30); }
.bap-ph::after { content: ""; position: absolute; left: 34%; top: 38%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: var(--surface, #fff); box-shadow: inset 0 0 0 .5em var(--ink, #121214); }
.bap-tx { flex: 1; min-width: 0; padding: 1.6em 1.8em; display: flex; flex-direction: column; justify-content: center; gap: .55em; font-family: var(--font-body); color: var(--ink, #121214); }
.bap-tx small { font: 700 .82em/1 var(--fd, "Manrope", sans-serif); letter-spacing: .18em; color: var(--muted, #6E6E78); }
.bap-tx b { font: 900 1.8em/1.25 var(--font-body); }
.bap-tx p { margin: 0; font: 500 .95em/1.6 var(--font-body); color: var(--ink-2, #3B3B44); }
.bap-tx em { font: 800 1.3em/1 var(--fd, "Manrope", sans-serif); font-style: normal; color: var(--c3, #E85C30); }
.bap-card::after { content: ""; position: absolute; inset: 0; background: var(--blue, #2563FF); clip-path: inset(0 100% 0 0); pointer-events: none; }
.bap.is-in .bap-card { animation: var(--k) var(--t) var(--e) both; }
.bap[data-variant="fuwa"] { --k: bap-fuwa; --t: .9s; --e: cubic-bezier(.22, 1, .36, 1); }
.bap[data-variant="pata"] { --k: bap-pata; --t: .8s; --e: ease-out; }
.bap[data-variant="pata"] .bap-card { transform-origin: 50% 0; }
.bap[data-variant="kuru"] { --k: bap-kuru; --t: .9s; --e: cubic-bezier(.65, 0, .35, 1); }
.bap[data-variant="bon"] { --k: bap-bon; --t: .7s; --e: ease-out; }
.bap[data-variant="hyu"] { --k: bap-hyu; --t: .45s; --e: cubic-bezier(.16, 1, .3, 1); }
.bap[data-variant="jiwa"] { --k: bap-jiwa; --t: 1.1s; --e: ease-out; }
.bap[data-variant="nyun"] { --k: bap-nyun; --t: 1s; --e: ease-out; }
.bap[data-variant="nyun"] .bap-card { transform-origin: 0 100%; }
.bap[data-variant="su"] { --k: bap-su; --t: .8s; --e: cubic-bezier(.16, 1, .3, 1); }
.bap[data-variant="sha"] { --k: bap-sha; --t: .9s; --e: cubic-bezier(.77, 0, .18, 1); }
.bap.is-in[data-variant="sha"] .bap-card::after { animation: bap-band .9s cubic-bezier(.77, 0, .18, 1) both; }
@keyframes bap-fuwa { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes bap-pata { 0% { opacity: 0; transform: perspective(900px) rotateX(-85deg); } 55% { opacity: 1; transform: perspective(900px) rotateX(12deg); } 80% { transform: perspective(900px) rotateX(-4deg); } 100% { opacity: 1; transform: perspective(900px) rotateX(0); } }
@keyframes bap-kuru { from { opacity: 0; transform: perspective(900px) rotateY(-360deg) scale(.8); } 40% { opacity: 1; } to { opacity: 1; transform: perspective(900px) rotateY(0) scale(1); } }
@keyframes bap-bon { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.12); } 78% { transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bap-hyu { from { opacity: 0; transform: scale(1.7); } to { opacity: 1; transform: scale(1); } }
@keyframes bap-jiwa { from { opacity: 0; filter: blur(16px); transform: scale(1.04); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes bap-nyun { 0% { opacity: 0; transform: translateY(20px) rotate(-8deg) skewX(16deg) scale(.6, .35); } 60% { opacity: 1; transform: rotate(1.5deg) skewX(-3deg) scale(1.03, 1.08); } 100% { opacity: 1; transform: none; } }
@keyframes bap-su { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes bap-sha { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 50%, 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes bap-band { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
.bap-demo { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface, #fff); border: 1px solid var(--rule, #D3D3D9); max-width: 100%; }
.bap-demo button { border: 0; border-radius: 7px; padding: .5em .75em; background: none; color: var(--muted, #6E6E78); font: 700 .85em/1 var(--font-body); cursor: pointer; }
.bap-demo button[aria-pressed="true"] { background: var(--ink, #121214); color: var(--surface, #fff); }
.bap-demo button:focus-visible { outline: 2px solid var(--blue, #2563FF); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .bap-card, .bap.is-in .bap-card { opacity: 1; animation: none !important; } .bap-card::after { display: none; } }
/* motion-catalog:basic-appear end */

/* motion-catalog:parallax start — パララックス（Parallax Layers） */
.plx { --p: 0; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--hero, #F4F3EF); }
.plx [data-speed] { position: absolute; inset: 0; transform: translateY(calc(var(--p) * var(--speed) * -120px)); will-change: transform; }
.plx-far::before { content: ""; position: absolute; width: 70cqh; aspect-ratio: 1; border-radius: 50%; right: -8%; top: 8%; background: var(--c2, #F2AE45) radial-gradient(circle, rgba(255,255,255,.55) 1.4px, transparent 1.6px) 0 0 / 12px 12px; }
.plx-mid::before { content: ""; position: absolute; width: 30cqh; aspect-ratio: 1; left: 68%; top: 60%; background: var(--c1, #2A4FD1); border-radius: 0 0 100% 0; }
.plx-mid::after { content: ""; position: absolute; width: 16cqh; aspect-ratio: 1; left: 12%; top: 66%; border: 1.4cqh solid var(--c3, #E85C30); border-radius: 50%; }
.plx-near i { position: absolute; display: block; width: 4cqh; aspect-ratio: 1; background: var(--ink, #121214); border-radius: 50%; }
.plx-txt { display: flex; flex-direction: column; justify-content: center; padding: 0 8%; gap: 1.6cqh; }
.plx-txt small { font: 600 clamp(8px, 1.6cqw, 12px)/1 var(--fm, "JetBrains Mono", monospace); letter-spacing: .18em; color: var(--muted, #6E6E78); }
.plx-txt b { font: 900 clamp(18px, 5.6cqw, 52px)/1.25 var(--font-body); color: var(--ink, #121214); max-width: 12em; }
@media (max-width: 640px) { .plx [data-speed] { transform: translateY(calc(var(--p) * var(--speed) * -60px)); } }
@media (prefers-reduced-motion: reduce) { .plx [data-speed] { transform: none; } }
/* motion-catalog:parallax end */

/* motion-catalog:page-top start — ページトップへ戻るボタン（Back to Top Button） */
.ptb { --f: var(--font-body); --k: var(--ink, #121214); --w: var(--surface, #fff); --r: var(--rule, #D3D3D9); --e: cubic-bezier(.16, 1, .3, 1); display: flex; flex-direction: column; gap: 1.6cqh; padding: 2.6cqh 4cqw 3.4cqh; font-family: var(--font-body); }
.ptb-demo { display: flex; flex-wrap: wrap; justify-content: center; gap: .7cqw; }
.ptb-demo button, .ptb-spd button { font: 700 clamp(7px, 1.5cqw, 12px)/1 var(--font-body); padding: .8cqh 1.3cqw; border-radius: 99px; border: 1px solid var(--r); background: var(--w); color: var(--k); cursor: pointer; transition: background .25s, color .25s; }
.ptb [aria-pressed="true"] { background: var(--k); color: var(--w); border-color: var(--k); }
.ptb-win { position: relative; flex: 1; min-height: 0; border-radius: 1.6cqw; overflow: hidden; border: 1px solid var(--r); background: var(--w); }
.ptb-scroll { position: absolute; inset: 0; overflow: auto; scrollbar-width: none; }
.ptb-hero { height: 85%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 4cqw 4cqh; background: linear-gradient(140deg, var(--c3, #E85C30), var(--c2, #F2AE45)); color: #fff; }
.ptb-hero b { font: 900 clamp(13px, 4.2cqw, 38px)/1.2 var(--font-body); }
.ptb-sec { padding: 3.4cqh 4cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.ptb-sec h2 { grid-column: 1 / -1; margin: 0; font: 800 clamp(9px, 2.2cqw, 18px)/1.3 var(--font-body); color: var(--k); }
.ptb-sec i { aspect-ratio: 16 / 9; border-radius: 1cqw; background: var(--sunk, #F2F2F4); }
.ptb-sec[data-ptb-range] { margin: 0 2cqw; border: 2px dashed var(--c1, #2A4FD1); border-radius: 1.4cqw; background: color-mix(in srgb, var(--c6, #BFC8F7) 30%, transparent); }
.ptb-ft { padding: 5cqh 4cqw 9cqh; background: var(--k); color: var(--w); font: 800 clamp(9px, 2cqw, 16px)/1.6 var(--fd, "Manrope", sans-serif); }
.ptb-ft small { display: block; font: 500 clamp(7px, 1.4cqw, 11px)/1.6 var(--font-body); opacity: .7; }
.ptb-btn { --s: clamp(30px, 10cqh, 48px); position: absolute; right: 3cqw; bottom: calc(3cqh + var(--lift, 0px)); z-index: 3; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 99px; background: var(--k); color: var(--w); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .55); font: 800 clamp(8px, 1.7cqw, 13px)/1 var(--fd, "Manrope", sans-serif); transition: transform .4s var(--e), opacity .4s, width .35s var(--e), background .3s, box-shadow .3s; }
.ptb-btn > * { grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--e); white-space: nowrap; }
.ptb-btn svg { width: 46%; height: 46%; }
.ptb button:focus-visible { outline: 2px solid var(--blue, #2563FF); outline-offset: 3px; }
.ptb-txt, .ptb-rkt { opacity: 0; }
.ptb-btn .ptb-rkt { width: 120%; height: 150%; transform: scale(.3); }
.ptb.is-off .ptb-btn { transform: translateY(170%); opacity: 0; }
.ptb.is-off[data-variant$="right"] .ptb-btn { transform: translateX(170%); }
.ptb[data-variant="morph-scroll"]:not(.is-top) .ptb-btn { width: calc(var(--s) * 2.5); background: var(--c3, #E85C30); }
.ptb[data-variant="morph-scroll"]:not(.is-top) .ptb-arw { opacity: 0; transform: rotate(180deg); }
.ptb[data-variant="morph-scroll"]:not(.is-top) .ptb-txt, .ptb.is-fly .ptb-btn .ptb-rkt { opacity: 1; transform: none; }
.ptb.is-fly .ptb-btn { background: transparent; box-shadow: none; }
.ptb.is-fly .ptb-arw { opacity: 0; transform: scale(.3); }
.ptb.is-launch .ptb-btn { transform: translateY(-140cqh); transition: transform .8s cubic-bezier(.55, 0, .75, .1); }
.ptb.is-reset .ptb-btn, .ptb.is-reset .ptb-btn > * { transition: none; }
.ptb-spd { position: absolute; left: 3cqw; bottom: 3cqh; z-index: 3; display: none; gap: .5cqw; padding: .6cqh; border-radius: 99px; background: var(--w); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .4); }
.ptb[data-variant="speed"] .ptb-spd { display: flex; }
@media (prefers-reduced-motion: reduce) { .ptb * { transition: none !important; } }
/* ページに置いたときの高さ（見本では枠いっぱい） */
.ptb.fill { width: 100%; min-height: min(100svh, 720px); }
/* motion-catalog:page-top end */

/* 余白 hair salon — B案に合わせた実装 */
:root { --ink:#253743; --muted:#64717a; --paper:#fafbfc; --soft:#edf1f3; --gold:#728d9c; --line:rgba(37,55,67,.18); --surface:#fafbfc; --rule:#ced7dc; --blue:#718b9a; --c1:#718b9a; --font-display:"Zen Old Mincho", serif; --font-body:"Noto Sans JP",sans-serif; --font-en:"Cormorant Garamond",serif; --fw-display:500; --fw-body:400; --ls-display:.06em; --ls-body:.04em; --lh-display:1.55; --lh-body:2; }
html {scroll-padding-top:24px;} body{color:var(--ink);font-family:var(--font-body);font-size:14px;overflow-x:clip;} p,h1,h2,h3,figure{margin:0;}button{font-family:var(--font-body);}button,a{-webkit-tap-highlight-color:transparent;}a:focus-visible,button:focus-visible{outline:2px solid #4c697a;outline-offset:5px;}section{scroll-margin-top:30px;} .skip-link{position:fixed;left:12px;top:-80px;z-index:100;padding:12px;background:white}.skip-link:focus{top:12px;}
.hero {position:relative;display:block;width:100%;height:auto;min-height:0;aspect-ratio:1672/941;padding:0;background:url('assets/fv-bg.jpg') center/cover no-repeat;container-type:inline-size;overflow:hidden;}
.site-header{position:absolute;inset:0 0 auto;height:10%;display:block;padding:0;border:0;background:none;backdrop-filter:none;z-index:30;}
.brand{position:absolute;left:6.75%;top:4%;display:block;gap:0;line-height:1.2;}
.brand__text{font-family:var(--font-display);font-weight:500;font-size:2.9vw;letter-spacing:.13em;display:block;line-height:1.1;}.brand__text small{font-family:var(--font-en);font-size:1.03vw;letter-spacing:.25em;margin-left:.7vw;}.brand__location{display:block;font-family:var(--font-display);font-size:1.02vw;letter-spacing:.19em;margin-top:.1vw;}
.site-header .nav{position:absolute;left:57.7%;top:20%;width:36%;height:55%;display:flex;justify-content:space-between;align-items:center;gap:0;font:400 .94vw/1.5 var(--font-body);letter-spacing:.12em;}.nav a{min-height:44px;display:flex;align-items:center;}
.hero .hero__copy{position:absolute;left:7.35%;top:26.4%;width:40%;height:auto;padding:0;background:none;z-index:2;}.hero h1{font:500 4.15vw/1.55 var(--font-display);letter-spacing:.07em;color:var(--ink);}.hero h1 .l{display:block;overflow:visible;padding:0;margin:0;}.hero h1 .l>span{display:block;animation:none;transform:none;}
.hero .hero__lead{position:absolute;left:7.4%;top:50.8%;font:400 1.55vw/1.6 var(--font-display);letter-spacing:.15em;margin:0;padding:0;z-index:2;}
.hero .hero__actions{position:absolute;left:7.4%;top:60.2%;width:37.65%;display:grid;grid-template-columns:1fr 1fr;gap:1.65vw;margin:0;padding:0;z-index:2;}
.salon-btn{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;padding:14px 24px;border:1px solid var(--gold);font:400 13px/1.6 var(--font-display);letter-spacing:.12em;transition:background .35s,color .35s,border-color .35s;}.salon-btn--filled{background:var(--gold);color:white;}.salon-btn:hover{background:#dce5eb;border-color:#5a7484;color:#253743;}.salon-btn--filled:hover{background:#546f80;color:white;}.salon-btn>span:last-child{transition:transform .35s;}.salon-btn:hover>span:last-child{transform:translateX(4px);}
.hero .salon-btn{min-height:0;height:4.1vw;padding:0 1.6vw;font-size:1.04vw;border-color:#8197a4;}.hero .salon-btn>span:last-child{font-size:1.45vw;}
.hero .hero__photo-wrap{display:none;}.hero__place{position:absolute;left:8.6%;top:82.4%;width:19.5%;font-family:var(--font-display);line-height:1.9;}.hero__place p{font-size:1.28vw;letter-spacing:.13em;}.hero__place small{display:block;font-size:1.03vw;letter-spacing:.12em;line-height:2;margin-top:1.1vw;}
.nav-overlay{z-index:31;background:#f8fafb;}.nav-overlay nav{gap:22px;}.nav-overlay nav a{font:500 22px/1.7 var(--font-display);}.nav-overlay__info{font-family:var(--font-body);}.nav-toggle{color:var(--ink);}.nav-toggle span{background:currentColor;}
.salon-section{padding:112px var(--pad-x);position:relative;}.section__head{margin-bottom:36px;}.section__head h2{font:500 clamp(26px,2.5vw,38px)/1.65 var(--font-display);letter-spacing:.09em;}.eyebrow{display:flex;gap:18px;align-items:center;font:400 17px/1.5 var(--font-en);letter-spacing:.18em;color:var(--gold);margin-bottom:20px;}.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold);}.section-intro{margin-top:25px;font-size:13px;line-height:2.2;color:var(--muted);}.mobile-br{display:none;}.concept-row{display:grid;grid-template-columns:1.12fr .88fr;gap:8%;align-items:center;}.concept-image img{width:100%;aspect-ratio:4/3;object-fit:cover;}.concept-image figcaption,.menu-image figcaption{font:400 17px/1.5 var(--font-en);letter-spacing:.1em;color:var(--muted);margin-top:16px;}.concept-text>p{line-height:2.25;margin:0 0 22px;font-size:13px;}.text-link{display:inline-flex;justify-content:space-between;gap:40px;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px;transition:color .35s,gap .35s;}.text-link:hover{color:var(--gold);gap:50px;}
.bap{display:block;width:auto;height:auto;padding:0;gap:0;font-size:inherit;}.bap-card{display:block;max-width:none;width:auto;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;}.bap-card::after{display:none;}.bap .section__head{margin-bottom:32px;}
.style-showcase{background:#edf1f3;}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 36px;align-items:start;}.style-card{background:none;overflow:visible;position:relative;}.style-card--lead{grid-row:span 2;}.style-open{position:relative;display:block;border:0;background:none;padding:0;width:100%;cursor:zoom-in;overflow:hidden;}.style-open img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease-out-expo);}.style-card--lead .style-open img{aspect-ratio:3/4;}.style-open:hover img{transform:scale(1.035);}.photo-plus{position:absolute;right:15px;bottom:15px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(250,251,252,.9);font-size:20px;color:var(--ink);transition:background .3s;}.style-open:hover .photo-plus{background:white;}.style-card__label{position:static;inset:auto;display:block;padding:16px 0 0;background:none;transform:none;color:var(--ink);}.style-card__label>span{font:400 14px/1.5 var(--font-en);letter-spacing:.1em;color:var(--muted);}.style-card__label h3{font:500 21px/1.7 var(--font-display);letter-spacing:.06em;margin:6px 0 5px;}.style-card__label p{font-size:12px;line-height:1.8;color:var(--muted);}.style-note{text-align:right;font-size:12px;color:var(--muted);margin:35px 0 0;}
.menu-layout{display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:9%;}.menu-intro{font-size:13px;line-height:2.2;margin-bottom:20px;}.price-list{margin:25px 0 14px;}.price-list>div{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);}.price-list dt{font:500 15px/1.8 var(--font-display);}.price-list dt small{display:block;font:400 10px/1.8 var(--font-body);color:var(--muted);margin-top:6px;}.price-list dd{flex-shrink:0;margin:0;font:500 27px/1.4 var(--font-en);font-variant-numeric:tabular-nums;}.price-list dd span{font:400 11px/1 var(--font-body);margin-left:5px;}.price-note{font-size:10px;color:var(--muted);margin-bottom:20px;}.menu-image img{aspect-ratio:4/3;object-fit:cover;width:100%;}.menu-image{align-self:center;}
.salon-story{padding-top:20px;}.salon-space.plx{height:470px;background:#e7ecee;margin-top:40px;}.salon-space .space-photo{inset:-60px 0;}.space-photo img{width:100%;height:100%;object-fit:cover;object-position:center 54%;}.stylist-row{display:grid;grid-template-columns:.65fr 1fr;gap:10%;align-items:center;max-width:890px;margin:85px auto 0;}.stylist-row figure img{width:100%;aspect-ratio:3/4;object-fit:cover;}.stylist-row h3{font:500 29px/1.8 var(--font-display);letter-spacing:.06em;margin-bottom:22px;}.stylist-row p:not(.eyebrow){font-size:13px;line-height:2.2;}.stylist-sign{display:block;font:400 19px/1.6 var(--font-display);letter-spacing:.1em;margin-top:25px;}
.access-section{background:#e8eef1;}.access-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:8%;align-items:center;}.access-layout>figure img{width:100%;aspect-ratio:4/3;object-fit:cover;}.access-info{margin:0 0 30px;}.access-info>div{display:grid;grid-template-columns:95px 1fr;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px;}.access-info dt{color:var(--muted);}.access-info dd{margin:0;}.access-copy .salon-btn{max-width:340px;}
.footer{display:block;padding:65px var(--pad-x) 25px;background:#f8fafb;min-height:320px;color:var(--ink);}.footer__top{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;}.footer-brand{font:500 40px/1.2 var(--font-display);letter-spacing:.12em;}.footer-brand small{font:400 17px/1 var(--font-en);margin-left:12px;letter-spacing:.15em;}.footer-tag{font:400 14px/1.8 var(--font-display);margin-top:17px;}.footer-info{font-size:11px;line-height:2;margin-top:16px;color:var(--muted);}.footer__nav{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:18px 25px;padding-top:10px;font-size:12px;}.footer__nav a{min-height:44px;display:flex;align-items:center;}.footer__bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:42px;padding-top:17px;}.footer__bottom small{font:400 11px/1.8 var(--font-body);color:var(--muted);}.footer__bottom .text-link{font-size:10px;border:0;}
.ptb{padding:0;gap:0;height:0;}.ptb .ptb-btn{position:fixed;right:22px;bottom:22px;z-index:29;--s:46px;background:#728d9c;box-shadow:0 2px 15px rgba(50,70,80,.13);}.ptb-btn:hover{background:#425f70;transform:translateY(-3px);}.ptb.is-off .ptb-btn{pointer-events:none;}
.photo-dialog{border:0;padding:0;background:#f8fafb;color:var(--ink);max-height:90svh;max-width:90vw;overflow:auto;box-shadow:0 10px 80px #0004;}.photo-dialog::backdrop{background:rgba(25,38,46,.7);backdrop-filter:blur(5px);}.photo-dialog figure{padding:18px;}.photo-dialog figure img{max-height:75svh;width:auto;max-width:80vw;object-fit:contain;}.photo-dialog figcaption{text-align:center;font:500 16px/1.6 var(--font-display);padding-top:15px;}.photo-close{position:sticky;display:block;margin:0 0 -44px auto;top:0;width:44px;height:44px;border:0;background:white;color:var(--ink);font-size:28px;z-index:1;cursor:pointer;}
@media(min-width:1800px){body{font-size:15px;}}
@media(max-width:1040px){
.hero{aspect-ratio:auto;background:#f3f6f8;overflow:visible;padding-top:80px;}.site-header{height:80px;position:absolute;background:#fafbfc;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}.brand{position:static;}.brand__text{font-size:31px;}.brand__text small{font-size:13px;margin-left:12px;}.brand__location{font-size:10px;margin-top:3px;}.site-header .nav{display:none;}.nav-toggle{display:flex;}
.hero .hero__copy{position:static;width:auto;padding:32px 28px 0;}.hero h1{font-size:clamp(30px,5.2vw,48px);line-height:1.65;letter-spacing:.06em;}.hero .hero__lead{position:static;padding:15px 28px 0;font-size:13px;letter-spacing:.08em;line-height:1.9;}.hero .hero__actions{position:static;width:auto;margin:23px 28px 28px;grid-template-columns:1fr 1fr;gap:12px;}.hero .salon-btn{min-height:48px;height:auto;font-size:12px;padding:12px 16px;}.hero .salon-btn>span:last-child{font-size:18px;}
.hero .hero__photo-wrap{position:static;display:block;width:100%;height:auto;margin:0;border:0;transform:none;}.hero .hero__photo{display:block;width:100%;height:auto;aspect-ratio:872/639;object-fit:contain;}.hero__place{position:static;width:auto;padding:25px 28px;display:flex;gap:28px;align-items:center;}.hero__place p{font-size:13px;}.hero__place small{font-size:11px;line-height:1.9;margin:0;}
.salon-section{padding:75px var(--pad-x);}.concept-row{gap:6%;}.concept-text>p{font-size:12px;}.section__head h2{font-size:29px;}.menu-layout{gap:6%;}.style-grid{gap:25px;}.salon-space.plx{height:350px;}.stylist-row{gap:8%;}.stylist-row h3{font-size:25px;}.access-layout{gap:6%;}.price-list dt{font-size:14px;}.price-list dd{font-size:23px;}
}
@media(max-width:680px){
:root{--pad-x:24px;}.hero .hero__copy{padding-top:25px;}.hero h1{font-size:31px;}.hero .hero__lead{font-size:11px;padding-top:12px;}.hero .hero__actions{margin-top:20px;margin-bottom:24px;}.hero .salon-btn{font-size:10px;padding:12px;letter-spacing:.05em;gap:7px;}.hero__place{display:block;padding:22px 28px;}.hero__place p{font-size:13px;}.hero__place small{margin-top:7px;font-size:11px;}.hero__place small br{display:none;}
.salon-section{padding:64px 24px;}.concept-row,.menu-layout,.access-layout{grid-template-columns:1fr;gap:35px;}.concept-row{display:flex;flex-direction:column-reverse;}.concept-text{width:100%;}.section__head h2{font-size:27px;line-height:1.65;}.section__head{margin-bottom:25px;}.eyebrow{font-size:15px;margin-bottom:14px;}.concept-text>p{font-size:12px;line-height:2.15;}.concept-image{width:100%;}.concept-image figcaption,.menu-image figcaption{font-size:15px;margin-top:12px;}.desktop-br{display:none;}.mobile-br{display:block;}
.style-grid{grid-template-columns:1fr;gap:32px;}.style-card--lead{grid-row:auto;}.style-card--lead .style-open img{aspect-ratio:3/4;}.style-open img{aspect-ratio:4/3;}.style-card__label{padding-top:12px;}.style-card__label h3{font-size:20px;}.style-note{text-align:left;line-height:1.9;font-size:11px;}.section-intro{font-size:12px;margin-top:18px;}.menu-intro{font-size:12px;}.price-list>div{padding:20px 0;}.price-list dt{font-size:14px;}.price-list dd{font-size:25px;}.salon-story{padding-top:25px;}.salon-space.plx{height:260px;margin-top:25px;}.salon-space .space-photo{inset:-30px 0;}.stylist-row{grid-template-columns:1fr;gap:28px;margin-top:45px;}.stylist-row figure{width:65%;}.stylist-row h3{font-size:25px;}.stylist-row p:not(.eyebrow){font-size:12px;}.access-info>div{padding:14px 0;}.access-copy .salon-btn{font-size:12px;}.footer{padding:48px 24px 20px;}.footer__top{grid-template-columns:1fr;gap:20px;}.footer__nav{justify-content:flex-start;gap:8px 24px;font-size:11px;}.footer__bottom{margin-top:24px;}.footer-brand{font-size:35px;}.footer-brand small{font-size:16px;}.ptb .ptb-btn{right:14px;bottom:14px;--s:44px;}.photo-dialog figure{padding:12px;}.photo-dialog figure img{max-width:calc(90vw - 24px);}}
@media(prefers-reduced-motion:reduce){[data-reveal]{transform:none!important;clip-path:none!important;transition:opacity .6s ease!important;}.hero__ambient{display:none;}.marquee__inner{animation-duration:55s;}.salon-space [data-speed]{transform:none;}.style-open img{transition:opacity .6s ease;} }
/* 実表示の検査で見つかった型の指定との競合を解消 */
.hero .hero__copy{bottom:auto;right:auto;transform:none;display:block;}
.hero .hero__copy h1{margin:0;}
.hero .hero__photo-wrap{display:block;position:absolute;left:47.8469%;top:9.9894%;width:52.1531%;height:auto;inset-inline-end:auto;right:auto;bottom:auto;transform:none;overflow:hidden;}
.hero .hero__photo{position:static;display:block;width:100%;height:auto;aspect-ratio:872/639;object-fit:contain;transform:none;}
.concept-image img,.menu-image img,.stylist-row figure img,.access-layout>figure img{height:auto;}
.footer .footer-tag{color:var(--ink);}.footer .footer-info{color:var(--muted);}
@media(max-width:1040px){.hero .hero__copy{position:static;transform:none;}.hero .hero__photo-wrap{position:static;width:100%;height:auto;inset:auto;left:auto;top:auto;}.hero .hero__photo{width:100%;height:auto;aspect-ratio:872/639;object-fit:contain;}}
.footer .footer__nav,.footer .footer-brand small{color:var(--ink);}.footer .footer-info{margin-top:16px;}.footer .footer-tag{margin-top:17px;}

.footer-share{display:flex;align-items:center;gap:22px;margin-top:28px;font:400 11px/1.5 var(--font-body);color:var(--muted);}.footer .footer__sns{gap:12px;}.footer .footer__sns a{width:44px;height:44px;border-color:var(--line);color:var(--ink);font:400 11px/1 var(--font-body);}.footer .footer__sns a:hover{color:var(--ink);background:#e5edf1;border-color:var(--gold);}.footer__bottom{margin-top:25px;}.photo-plus{width:42px;height:42px;}
/* 本文はスマートフォンでも無理なく読める大きさに */
.concept-text>p,.section-intro,.menu-intro,.stylist-row p:not(.eyebrow){font-size:15px;line-height:2.05;}.style-card__label p,.style-note{font-size:13px;}.photo-plus{font-size:18px;}
@media(max-width:1040px){.hero .hero__lead{font-size:13px;}.hero__place small{font-size:13px;}}
@media(max-width:680px){.hero .salon-btn{font-size:11px;}.concept-text>p,.section-intro,.menu-intro,.stylist-row p:not(.eyebrow){font-size:14px;line-height:2.1;}.style-note{font-size:12px;}.hero__place small{font-size:12px;}.hero .hero__lead{font-size:12px;}.access-info>div{font-size:13px;}}
/* 見出しと本文の左端を揃える */
.bap .bap-card.section__head{max-width:none;width:100%;margin-inline:0;}
.style-note{line-height:1.9;}
/* 英字の店名でも店舗案内の見出しを枠内に収める */
.access-copy .section__head h2{overflow-wrap:anywhere;}
@media(max-width:680px){.access-copy .section__head h2{font-size:25px;letter-spacing:.04em;}}

/* v3 店内主役のFVと、写真全体が見られるギャラリー */
.hero .hero__photo-wrap{left:46.0526%;top:9.9894%;width:53.9474%;}
.hero .hero__photo{aspect-ratio:902/639;}
.hero__gallery{position:absolute;left:28.95%;right:3.4%;top:80.13%;height:16.7%;display:grid;grid-template-columns:1.14fr 1fr;gap:1.3vw;}
.hero-gallery-open{display:block;position:relative;width:100%;height:100%;border:0;padding:0;background:#e8eef1;cursor:zoom-in;overflow:hidden;text-align:left;}
.hero-gallery-open img{width:100%;height:100%;object-fit:cover;object-position:center 52%;transition:transform .8s var(--ease-out-expo);}.hero-gallery-open:hover img{transform:scale(1.045);}
.gallery-label{position:absolute;left:10px;bottom:8px;padding:4px 9px;background:rgba(250,251,252,.93);color:var(--ink);font:400 11px/1.6 var(--font-body);letter-spacing:.05em;}.gallery-open-note{position:absolute;right:10px;bottom:8px;padding:4px 9px;background:rgba(250,251,252,.93);color:var(--ink);font:400 10px/1.7 var(--font-body);}
.photo-dialog{width:min(1000px,94vw);max-width:94vw;max-height:94svh;}.photo-dialog figure{padding:18px 24px 0;overflow:auto;}.photo-dialog figure img{display:block;max-height:69svh;max-width:100%;width:auto;height:auto;object-fit:contain;margin:auto;}.photo-dialog figcaption{font-size:14px;line-height:1.8;padding:14px 0;}.photo-tools{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:2px 20px 12px;}.photo-tools button{min-height:44px;border:1px solid var(--line);padding:10px 17px;background:#f8fafb;color:var(--ink);font-size:12px;cursor:pointer;transition:background .3s;}.photo-tools button:hover{background:#e3ebef;}.photo-tools button[hidden]{display:none;}.photo-counter{text-align:center;font:400 12px/1.5 var(--font-body);color:var(--muted);margin:0 0 15px;}.photo-dialog.is-zoomed figure{max-height:69svh;}.photo-dialog.is-zoomed figure img{width:auto;max-width:none;max-height:none;height:auto;}.photo-dialog.is-zoomed figcaption{position:sticky;left:0;max-width:85vw;background:#f8fafb;}.photo-dialog .photo-close{min-width:44px;}
@media(max-width:1040px){.hero .hero__photo-wrap{position:static;width:100%;}.hero .hero__photo{aspect-ratio:902/639;object-fit:contain;}.hero__gallery{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px;height:auto;padding:0 28px 26px;}.hero-gallery-open{height:auto;aspect-ratio:4/3;}.hero__place{padding-bottom:20px;}.gallery-label{left:6px;bottom:6px;font-size:10px;padding:4px 6px;}.gallery-open-note{right:6px;bottom:6px;font-size:9px;padding:4px 6px;}}
@media(max-width:680px){.hero__gallery{padding:0 24px 24px;gap:10px;}.gallery-open-note{display:none;}.photo-dialog figure{padding:10px 12px 0;}.photo-dialog figure img{max-width:100%;max-height:64svh;}.photo-dialog figcaption{font-size:12px;text-align:left;}.photo-tools{gap:8px;padding-inline:12px;}.photo-tools button{font-size:11px;padding:10px 12px;}}
@media(prefers-reduced-motion:reduce){.hero-gallery-open img{transition:none;}}

/* 小写真から開く画面は、縦スクロールで店内を巡る */
.room-guide{font:400 12px/1.8 var(--font-body);color:var(--muted);padding:12px 54px 12px 24px;}.room-gallery{max-height:69svh;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#8da3b0 #edf1f3;}.room-gallery[hidden],.room-guide[hidden]{display:none;}.room-gallery figure{padding:0 24px 28px;margin:0;overflow:visible;}.room-gallery figure img{width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain;}.room-gallery figcaption{font:400 14px/1.9 var(--font-display);padding:14px 0 0;text-align:left;}.photo-dialog.is-room .photo-single{display:none;}.photo-dialog.is-room .photo-tools{padding-top:14px;}.photo-dialog.is-room .photo-counter{font-size:11px;}.photo-dialog.is-room.is-zoomed .room-gallery{max-height:69svh;}.photo-dialog.is-room.is-zoomed .room-gallery figure{width:max-content;min-width:100%;max-height:none;}.photo-dialog.is-room.is-zoomed .room-gallery figure img{width:1448px;max-width:none;height:auto;}.photo-dialog.is-room.is-zoomed .room-gallery figcaption{position:static;max-width:100%;}
@media(max-width:680px){.room-guide{font-size:11px;padding:10px 45px 12px 12px;}.room-gallery{max-height:64svh;}.room-gallery figure{padding:0 12px 24px;}.room-gallery figcaption{font-size:12px;}.photo-dialog.is-room .photo-counter{font-size:10px;}}
@media(prefers-reduced-motion:reduce){.room-gallery{scroll-behavior:auto;}}

/* v5: hairstyle detail, three angles */
.style-detail-link{display:inline-flex;align-items:center;gap:20px;min-height:44px;margin-top:12px;padding:0;border:0;border-bottom:1px solid #9aadb4;background:none;color:#344d58;font:inherit;font-size:13px;cursor:pointer}
.style-detail{width:min(1040px,94vw);max-width:1040px;max-height:92dvh;margin:auto;padding:52px 38px 32px;border:0;background:#f8fafb;color:#34434a;overflow:auto;overscroll-behavior:contain}
.style-detail::backdrop{background:rgba(29,43,51,.72)}
.style-detail-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.style-detail-close{position:absolute;right:8px;top:5px;width:44px;height:44px;border:0;background:none;color:#344d58;font-size:30px;cursor:pointer;line-height:1}
.style-detail-photo{margin:0;min-width:0}.style-detail-photo>img{display:block;width:100%;height:min(64dvh,600px);object-fit:contain;background:#edf1f2;touch-action:pan-y}.style-detail-photo>figcaption{text-align:center;font-size:12px;letter-spacing:.13em;margin-top:10px}
.style-detail-copy{min-width:0}.style-detail-copy h2{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);font-weight:400;line-height:1.5;margin:12px 0 20px}.style-detail-copy>p{font-size:14px;line-height:2}.style-detail-copy .eyebrow{font-family:var(--font-en);font-size:20px;letter-spacing:.06em}.style-detail-copy .style-detail-guide{margin:28px 0 12px;font-size:12px}
.style-angle-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.style-angle-options button{padding:4px 4px 8px;border:1px solid transparent;background:transparent;color:#344d58;font:inherit;font-size:13px;cursor:pointer}.style-angle-options button[aria-pressed="true"]{border-color:#607d88;background:#e8eff1}.style-angle-options img{display:block;width:100%;height:85px;object-fit:cover;object-position:center 35%;margin-bottom:7px}.style-angle-options span{display:block;min-height:24px}.style-detail-copy .style-detail-note{font-size:12px;margin-top:24px;color:#5f7078}
.style-detail button:focus-visible,.style-detail-link:focus-visible{outline:2px solid #344d58;outline-offset:3px}
@media(max-width:640px){.style-detail{width:94vw;padding:48px 18px 24px;max-height:92dvh}.style-detail-layout{grid-template-columns:1fr;gap:20px}.style-detail-photo>img{height:40dvh;min-height:240px}.style-detail-copy h2{margin:6px 0 12px}.style-detail-copy .eyebrow{margin:0}.style-detail-copy .style-detail-guide{margin-top:18px}.style-angle-options img{height:80px}.style-detail-copy .style-detail-note{margin-bottom:0}}

/* Keep the shampoo basin visible in the wide thumbnail. */
.hero-gallery-open[data-gallery-index="1"] img{object-position:center 34%;}