/* リラクゼーションスポットりらっく デモサイト style.css（営業デモモード）
   デザインシート step4a v1.0 準拠：墨＋琥珀の「夜の灯り」／明暗二層構成 */
@font-face{
  font-family:"Shippori Mincho";
  src:url("../fonts/ShipporiMincho-400-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Sans JP";
  src:url("../fonts/NotoSansJP-400-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Sans JP";
  src:url("../fonts/NotoSansJP-500-subset.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:url("../fonts/Lora-400-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --ink:#1B1815;
  --ink2:#2A2521;
  --cream:#F5F1EA;
  --linen:#EAE3D8;
  --amber:#C89A5B;
  --amber-h:#D8AC70;
  --on-dark:#F2EDE6;
  --on-light:#2A2521;
  --muted:#6B6259;
  --maxw:1080px;
  --textw:720px;
  --mincho:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Noto Sans JP",system-ui,sans-serif;
  --num:"Lora",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:18px;line-height:1.9;font-weight:400;
  color:var(--on-light);background:var(--cream);
  -webkit-font-smoothing:antialiased;
  padding-bottom:64px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--mincho);font-weight:400;line-height:1.6}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--textw);margin-left:auto;margin-right:auto}
.section{padding:72px 0}
.dark{background:var(--ink);color:var(--on-dark)}
.dark h2,.dark h3{color:var(--on-dark)}
.light{background:var(--cream);color:var(--on-light)}

.sec-title{font-size:23px;letter-spacing:.06em;margin-bottom:28px}
.sec-title--center{text-align:center}
.lead{margin-bottom:20px}
.note{font-size:14px;line-height:1.8;color:var(--muted)}
.dark .note{color:#A99B8B}

.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s ease;padding:14px 0}
.header.is-solid{background:rgba(27,24,21,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.omc-has-bar .header{top:var(--barh,44px)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.header__name{font-family:var(--mincho);font-size:16px;letter-spacing:.08em;color:var(--on-dark)}
.header__tel{display:none}
@media(min-width:768px){
  .header__tel{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font-family:var(--num);font-size:20px;color:var(--on-dark)}
  .header__tel span{font-family:var(--sans);font-size:13px;letter-spacing:.1em}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:18px 32px;border-radius:4px;border:none;cursor:pointer;
  font-family:var(--sans);font-size:17px;font-weight:500;line-height:1.4;
  background:var(--amber);color:var(--ink);transition:background .25s ease,transform .1s ease;
}
@media(max-width:479px){
  .btn{width:100%;padding:16px 18px;font-size:16px;gap:8px}
  .btn__num{font-size:20px}
}
.btn:hover{background:var(--amber-h)}
.btn:active{transform:translateY(1px);opacity:.9}
.btn__num{font-family:var(--num);font-size:22px;letter-spacing:.02em}
.btn--ghost{
  background:transparent;border:1px solid var(--amber);color:var(--on-light);
  min-height:48px;padding:14px 24px;font-size:16px;
}
.dark .btn--ghost{color:var(--on-dark)}
.btn--ghost:hover{background:rgba(200,154,91,.12)}

.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(27,24,21,.55) 0%,rgba(27,24,21,.15) 35%,rgba(27,24,21,.85) 100%)}
.hero__body{position:relative;z-index:2;width:100%;padding:0 0 64px}
.hero__title{font-size:clamp(30px,7.5vw,56px);letter-spacing:.08em;line-height:1.55;color:var(--on-dark);margin-bottom:20px}
.hero__sub{font-size:17px;color:var(--on-dark);margin-bottom:28px;letter-spacing:.04em}
.hero__hours{margin-top:20px;font-size:14px;color:#C9BCAC;letter-spacing:.04em}
@media(min-width:768px){
  .hero{min-height:100vh}
  .hero__body{padding-bottom:96px}
  .hero__sub{font-size:19px}
}

.intro__img{margin:0 0 40px;aspect-ratio:16/9;object-fit:cover;width:100%}
.intro p{margin-bottom:1.2em;letter-spacing:.03em}
.intro p:last-child{margin-bottom:0}

.rooms{display:flex;flex-direction:column;gap:56px}
.room__img{width:100%;aspect-ratio:3/4;object-fit:cover}
.room__cap{font-family:var(--mincho);font-size:15px;line-height:1.9;margin-top:18px;color:var(--on-dark);letter-spacing:.04em}
@media(min-width:768px){
  .rooms{gap:88px}
  .room{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .room:nth-child(even) .room__img{order:2}
  .room__cap{font-size:18px;margin-top:0}
  .room--wide .room__img{aspect-ratio:4/3}
}

.needs{list-style:none;margin:0 0 28px}
.needs li{
  padding:20px 0 20px 22px;border-bottom:1px solid var(--linen);
  position:relative;letter-spacing:.03em;
}
.needs li:first-child{border-top:1px solid var(--linen)}
.needs li::before{content:"";position:absolute;left:0;top:32px;width:10px;height:1px;background:var(--amber)}

.menu-imgs{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:36px}
.menu-imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
@media(min-width:600px){.menu-imgs{grid-template-columns:1fr 1fr}}
.pricetable{width:100%;border-collapse:collapse;margin:24px 0 28px;font-size:17px}
.pricetable caption{text-align:left;font-size:14px;color:var(--muted);padding-bottom:12px;line-height:1.8}
.pricetable th,.pricetable td{padding:16px 8px;border-bottom:1px solid var(--linen);text-align:left}
.pricetable thead th{background:var(--linen);color:var(--on-light);font-weight:500;font-size:15px;letter-spacing:.06em;padding:12px 8px}
.pricetable td:last-child{text-align:right;font-family:var(--num);font-size:20px;white-space:nowrap}
.pricetable thead th:last-child{text-align:right;font-family:var(--sans);font-size:15px}
.pricetable td:nth-child(2){white-space:nowrap;font-family:var(--num);font-size:18px}

.flow{list-style:none;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.flow{grid-template-columns:repeat(4,1fr);gap:20px}}
.flow li{background:#fff;border:1px solid var(--linen);border-radius:4px;padding:24px 20px}
.flow__icon{width:34px;height:34px;margin-bottom:14px;color:var(--amber)}
.flow h3{font-size:18px;margin-bottom:8px}
.flow p{font-size:16px;line-height:1.8;color:var(--muted)}

.info{width:100%;border-collapse:collapse;margin-bottom:28px;font-size:17px}
.info th,.info td{padding:16px 8px;border-bottom:1px solid var(--linen);text-align:left;vertical-align:top}
.info th{width:34%;font-weight:400;color:var(--muted);font-size:16px;white-space:nowrap}
.info td .num{font-family:var(--num);font-size:20px;display:inline-flex;align-items:center;min-height:48px}
.map{width:100%;aspect-ratio:4/3;border:0;border-radius:4px;margin-bottom:24px;filter:grayscale(.25)}
@media(min-width:768px){.map{aspect-ratio:16/9}}

.closing{text-align:center}
.closing__img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:44px}
.closing .sec-title{font-size:clamp(23px,5vw,34px);margin-bottom:20px}
.closing .lead{margin-bottom:32px}

.footer{background:var(--ink);color:#A99B8B;padding:44px 0 40px;font-size:14px;line-height:1.9}
.footer__name{font-family:var(--mincho);font-size:17px;color:var(--on-dark);margin-bottom:12px;letter-spacing:.08em}
.footer a{color:var(--amber);display:inline-block;padding:11px 0;min-height:44px}

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:64px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--amber);color:var(--ink);
  font-size:17px;font-weight:500;letter-spacing:.04em;
}
.callbar .btn__num{font-size:21px}
@media(min-width:768px){
  .callbar{display:none}
  body{padding-bottom:0}
}

.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}