:root{
  --cream:#f8eedb; --paper:#fdfaf3; --ink:#2b2219; --soft:#6b5d4d;
  --gold:#b89a6a; --gold-l:#d9c29c; --teal:#2f5559; --teal-d:#22403f; --rose:#e6dad5;
  --en:"Cormorant Garamond",serif; --min:"Shippori Mincho",serif; --go:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--go);font-size:15px;line-height:2;letter-spacing:.05em;-webkit-text-size-adjust:100%;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3,p,ul,dl,dd{margin:0;padding:0}
ul{list-style:none}
.ln{display:block;text-wrap:balance}
.nb{display:inline-block;max-width:100%;word-break:keep-all;overflow-wrap:anywhere}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.en{font-family:var(--en);font-style:italic;font-size:1.05rem;letter-spacing:.08em;color:var(--gold)}
.arw{display:inline-block;margin-left:.5em;font-size:.85em}

/* 丸い枠のボタン（AMREのボタン） */
.pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:999px;padding:9px 24px;text-decoration:none;font-size:.9rem;line-height:1.6;letter-spacing:.06em;transition:background .25s,color .25s}
.pill:hover{background:var(--ink);color:var(--paper)}
.pill.light{color:#fff}
.pill.light:hover{background:#fff;color:var(--ink)}
.pill.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.pill.gold:hover{background:#a3875a;color:#fff}

/* 流れる帯（10周年） */
.band{background:var(--teal-d);color:var(--cream);overflow:hidden;white-space:nowrap;font-size:.8rem;letter-spacing:.12em;line-height:2.6}
.band-in{display:inline-block;animation:band 40s linear infinite}
.band-in span{display:inline-block;padding:0 22px}
.band-in span::before{content:"◇";color:var(--gold-l);margin-right:22px}
@keyframes band{to{transform:translateX(-50%)}}

/* ロゴ（六角形＋Locca） */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--gold-l)}
.brand .hex{width:30px;height:35px}
.b-name{font-family:var(--en);font-size:2rem;font-weight:400;letter-spacing:.06em;line-height:1}
.b-sub{font-size:.58rem;letter-spacing:.3em;align-self:flex-end;margin-bottom:4px}
.brand.dark{color:var(--gold)}

/* 上のメニュー（トップの写真に重ねる） */
.top{position:absolute;z-index:5;left:0;right:0;top:42px;display:flex;align-items:center;gap:32px;padding:14px 40px}
.top nav{display:flex;gap:28px;margin-left:auto}
.top nav a{color:#f3ead9;text-decoration:none;font-size:.88rem;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.top nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
.pill-top{color:var(--gold-l)}
.pill-top:hover{background:var(--gold-l);color:var(--ink)}

/* トップ：写真＋金の細い線 */
.hero{position:relative;min-height:min(92svh,820px);display:flex;align-items:flex-end;overflow:hidden;background:#3b2f25}
.hero-p{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,20,12,.55) 0%,rgba(28,20,12,0) 22%),linear-gradient(90deg,rgba(28,20,12,.72) 0%,rgba(28,20,12,.38) 45%,rgba(28,20,12,.05) 75%),linear-gradient(0deg,rgba(28,20,12,.35),transparent 40%)}
.lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.lines path{fill:none;stroke:var(--gold-l);stroke-width:1;opacity:.8;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.2s ease-out .3s forwards}
.lines path+path{animation-delay:1s}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-t{position:relative;z-index:3;color:#fff;padding:0 40px 9vh;max-width:700px}
.kicker{font-size:.72rem;letter-spacing:.2em;color:var(--gold-l);margin-bottom:22px}
.hero h1{font-family:var(--min);font-weight:400;font-size:clamp(2.1rem,5vw,3.9rem);line-height:1.45;letter-spacing:.1em;margin-bottom:24px}
.lead{font-size:.95rem;line-height:1.9;margin-bottom:30px;color:#f3ead9}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* サロンについて（クリーム色） */
.about{background:var(--cream);padding:70px 0 100px}
.about hr{border:0;border-top:1px solid var(--ink);opacity:.5;margin:0 0 56px}
.ab-1{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ab-1 img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ab-t h2,.sec-h,.access h2{font-family:var(--min);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.6;letter-spacing:.1em;margin-bottom:22px}
.ab-t p{margin-bottom:30px;color:var(--soft)}
.ab-2{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:end;margin-top:90px}
.big-name{font-family:var(--en);font-weight:300;font-size:clamp(4rem,11vw,8rem);line-height:1;color:var(--teal);letter-spacing:.04em;margin-bottom:28px}
.facts{display:flex;flex-wrap:wrap;gap:10px}
.facts li{border:1px solid var(--gold);color:var(--ink);border-radius:999px;padding:4px 16px;font-size:.85rem}
.ab-2 img{width:100%;max-width:340px;justify-self:end;aspect-ratio:7/9.7;object-fit:cover}

/* 中央の一文（10周年） */
.state{background:var(--cream);text-align:center;padding:30px 24px 120px}
.ten{position:relative;width:96px;height:110px;margin:0 auto 18px;color:var(--gold)}
.ten .hex{width:100%;height:100%}
.ten span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--en);font-size:3.4rem;font-weight:400;color:var(--teal);line-height:1}
.since{font-family:var(--en);font-style:italic;color:var(--gold);letter-spacing:.2em;margin-bottom:14px}
.st{font-family:var(--min);font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.9;letter-spacing:.1em}

/* メニュー：写真カードが横に流れる */
.menu{padding:100px 0 60px;background:var(--paper)}
.menu-h{max-width:1120px;margin:0 auto 34px;padding:0 24px}
.menu-h h2{display:flex;align-items:baseline;gap:18px;font-weight:400}
.en-big{font-family:var(--en);font-weight:300;font-size:clamp(2.6rem,6vw,4.2rem);letter-spacing:.06em;line-height:1}
.menu-h .jp{font-family:var(--min);font-size:1rem;color:var(--soft)}
.cards{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 18px calc((100vw - 1120px)/2 + 24px);scrollbar-width:thin}
.card{position:relative;flex:0 0 min(420px,78vw);aspect-ratio:3/3.7;scroll-snap-align:start;overflow:hidden;background:#3b2f25}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,20,12,.75),rgba(28,20,12,0) 60%)}
.card-t{position:absolute;z-index:2;left:26px;right:22px;bottom:26px;color:#fff}
.card-t .en{color:var(--gold-l)}
.card h3{font-family:var(--min);font-weight:400;font-size:1.5rem;letter-spacing:.08em;line-height:1.6;margin:2px 0 6px}
.card p{font-size:.86rem;line-height:1.8}
.menu .wrap{margin-top:26px}

/* 料金：枠つきのカード */
.price{padding:60px 0 110px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.pbox{border:1px solid #dcd0bd;padding:30px 28px 26px;background:#fff}
.pbox h3{font-family:var(--min);font-weight:400;font-size:1.45rem;letter-spacing:.08em;margin:0 0 16px}
.pbox li{padding:12px 0;border-top:1px solid #eee3d2}
.pi-h{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;align-items:baseline}
.pi-n{flex:1 1 12em;min-width:0}
.pi-p{flex:none;margin-left:auto}
.pi-n{display:flex;gap:8px;font-size:.92rem;line-height:1.7}
.pi-n::before{content:"↗";color:var(--gold);font-size:.8em;flex:none}
.pi-p{font-family:var(--en);font-size:1.15rem;white-space:nowrap;color:var(--teal)}
.pi-p.ask{font-family:var(--go);font-size:.8rem;letter-spacing:.04em}
.pi-d{font-size:.8rem;line-height:1.75;color:var(--soft);margin-top:4px;padding-left:1.5em}
.note{margin-top:26px;font-size:.88rem;color:var(--soft);text-align:center}

/* ご予約・アクセス（深い青緑） */
.access{background:var(--teal);color:#f3ead9;padding:100px 0}
.access .en{color:var(--gold-l)}
.ac{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.access .btns{margin:6px 0 34px}
.info{display:grid;grid-template-columns:5.5em 1fr;gap:12px 14px;font-size:.92rem;line-height:1.8}
.info dt{color:var(--gold-l)}
.map{aspect-ratio:4/3.4;overflow:hidden;border-radius:2px;background:#284a4d}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.3)}

footer{background:var(--rose);text-align:center;padding:56px 24px 34px}
.f-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px 0 18px}
.f-links .pill{padding:6px 18px;font-size:.82rem}
.f-addr{font-size:.82rem;color:var(--soft)}
footer small{display:block;margin-top:14px;font-size:.72rem;color:var(--soft)}

@media (max-width:1168px){.cards{padding-left:24px}}
@media (max-width:860px){
  .top{top:40px;padding:12px 18px;gap:12px}
  .top nav{display:none}
  .pill-top{margin-left:auto;padding:7px 16px;font-size:.8rem}
  .b-name{font-size:1.7rem}.brand .hex{width:26px;height:30px}.b-sub{display:none}
  .hero{min-height:0;aspect-ratio:3/4.4}
  .hero-p{object-position:62% 40%}
  .hero::after{background:linear-gradient(180deg,rgba(28,20,12,.6) 0%,rgba(28,20,12,0) 20%),linear-gradient(0deg,rgba(28,20,12,.82) 0%,rgba(28,20,12,.4) 55%,rgba(28,20,12,.12) 100%)}
  .hero-t{padding:0 22px 40px}
  .kicker{font-size:.62rem;letter-spacing:.12em;margin-bottom:14px}
  .ab-1,.ab-2,.ac{grid-template-columns:1fr;gap:32px}
  .ab-2{margin-top:60px}
  .ab-2 img{justify-self:start;max-width:260px}
  .pgrid{grid-template-columns:1fr}
  .pbox{padding:26px 20px 22px}
  .pi-d{padding-left:1.2em}
  .about{padding:50px 0 70px}.menu{padding:70px 0 40px}.price{padding:40px 0 80px}.access{padding:70px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .band-in{animation:none}
  .lines path{animation:none;stroke-dashoffset:0}
}