/* ============================================================
   STAY LOCAL — Common Stylesheet
   色・フォント・余白などの値はすべて tokens.css に集約（唯一の出典）。
   このファイルは直値を持たず var(--…) で参照する。
   ※data URI 内の色（select矢印 %23B8AE9E 等）は変数不可のため例外的に直値。
   ============================================================ */

/* ── 1. Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-sans-ja);color:var(--c-char);background:var(--c-white);line-height:1.8;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit}

/* ── 2. Custom Properties ──
   トークン（変数）は tokens.css に集約。直値は使わず var(--…) を参照する。
   ※全HTMLが style.css より前に tokens.css を読み込む。 */

/* ── 3. Layout ── */
.wrap{max-width:var(--mw);margin:0 auto;padding:0 var(--px)}
.section{padding:var(--sec) 0}
.section--off{background:var(--c-off)}
.section--dark{background:var(--c-dark);color:var(--c-white)}

/* ── 4. Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;
  font-family:var(--f-sans-ja);font-size:.875rem;font-weight:400;letter-spacing:.06em;
  border-radius:var(--r);transition:all .22s ease;white-space:nowrap;line-height:1;
}
.btn-primary{background:var(--c-char);color:var(--c-white)}
.btn-primary:hover{background:var(--c-dark)}
.btn-outline{border:1px solid var(--c-char);color:var(--c-char)}
.btn-outline:hover{border-color:var(--c-greige);color:var(--c-greige)}
.btn-outline-w{border:1px solid rgba(255,255,255,.55);color:var(--c-white)}
.btn-outline-w:hover{border-color:var(--c-greige);color:var(--c-greige)}
.btn-text{
  padding:0 0 3px;font-size:.8125rem;letter-spacing:.07em;
  border-bottom:1px solid var(--c-border);border-radius:0;
}
.btn-text:hover{border-color:var(--c-greige);color:var(--c-greige)}
.btn-text-w{color:var(--c-white);border-color:rgba(255,255,255,.35)}
.btn-text-w:hover{color:var(--c-greige);border-color:var(--c-greige)}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.actions--center{justify-content:center}

/* ── 5. Image Placeholder ── */
.ph{
  background:var(--c-ph);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:var(--r);
}
.ph svg{opacity:.22;flex-shrink:0}
.ph--dark{background:rgba(255,255,255,.07)}
.ph--dark svg{opacity:.15}
/* ── 実画像コンテナ ── */
.img-c{position:relative;overflow:hidden;background:var(--c-border);border-radius:var(--r)}
.img-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* ヒーロー背景画像 */
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* ── 6. Header ── */
.header{
  position:fixed;inset:0 0 auto;z-index:200;
  height:var(--hh);
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-border);
}
.header__inner{
  max-width:var(--mw);margin:0 auto;padding:0 var(--px);
  height:100%;display:flex;align-items:center;justify-content:space-between;
}
.header__logo{
  font-family:var(--f-serif-en);font-size:1.0625rem;font-weight:400;
  letter-spacing:.22em;color:var(--c-char);flex-shrink:0;
}

/* Desktop nav */
.header__nav{display:none}
@media(min-width:1024px){
  .header__nav{display:flex;align-items:center;gap:32px}
}
.header__nav-link{
  font-family:var(--f-sans-ja);font-size:.8125rem;font-weight:400;
  letter-spacing:.04em;color:var(--c-char);transition:color .2s;position:relative;
}
.header__nav-link:hover,.header__nav-link.active{color:var(--c-greige)}

/* Dropdown */
.header__drop{position:relative}
.header__drop-trigger{
  font-family:var(--f-sans-ja);font-size:.8125rem;font-weight:400;
  letter-spacing:.04em;color:var(--c-char);cursor:pointer;
  display:flex;align-items:center;gap:4px;transition:color .2s;
}
.header__drop-trigger:hover{color:var(--c-greige)}
.header__drop-trigger svg{transition:transform .25s}
.header__drop:hover .header__drop-trigger svg,
.header__drop.is-pinned .header__drop-trigger svg{transform:rotate(180deg)}
.header__drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r);
  padding:8px 0;min-width:180px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s,transform .2s;
  transform:translateX(-50%) translateY(-6px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
/* トリガーとメニューの隙間を埋める透明ブリッジ（カーソルが離れて閉じるのを防ぐ） */
.header__drop-menu::before{
  content:'';position:absolute;left:0;right:0;top:-16px;height:16px;
}
.header__drop:hover .header__drop-menu,
.header__drop.is-pinned .header__drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.header__drop-menu a{
  display:block;padding:9px 18px;
  font-family:var(--f-sans-ja);font-size:.8125rem;font-weight:300;
  letter-spacing:.03em;color:var(--c-char);transition:color .2s;
}
.header__drop-menu a:hover{color:var(--c-greige)}

/* Right area */
.header__right{display:flex;align-items:center;gap:16px}
.header__lang{display:none;align-items:center;gap:8px}
@media(min-width:1024px){.header__lang{display:flex}}
.header__lang button{
  font-family:var(--f-sans-en);font-size:.6875rem;letter-spacing:.06em;
  color:var(--c-char);transition:color .2s;
}
.header__lang button:hover,.header__lang button.active{color:var(--c-greige)}
.header__lang span{font-size:.5rem;color:var(--c-border)}
.header__cta{display:none}
@media(min-width:1024px){.header__cta{display:inline-flex}}

/* Hamburger */
.header__ham{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:28px;height:28px;cursor:pointer;
}
@media(min-width:1024px){.header__ham{display:none}}
.header__ham span{
  display:block;height:1px;background:var(--c-char);
  transition:transform .3s,opacity .3s;transform-origin:center;
}
.header__ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.header__ham.open span:nth-child(2){opacity:0}
.header__ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── 7. Mobile Nav ── */
.mobile-nav{
  position:fixed;inset:var(--hh) 0 0;z-index:190;
  background:var(--c-white);
  padding:32px var(--px) 40px;
  display:flex;flex-direction:column;gap:0;
  overflow-y:auto;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s,visibility .3s;
}
.mobile-nav.open{opacity:1;visibility:visible;pointer-events:auto}
@media(min-width:1024px){.mobile-nav{display:none}}
.mobile-nav__link{
  display:block;padding:16px 0;
  font-family:var(--f-sans-ja);font-size:1rem;font-weight:300;
  letter-spacing:.04em;color:var(--c-char);
  border-bottom:1px solid var(--c-border);transition:color .2s;
}
.mobile-nav__link:first-child{border-top:1px solid var(--c-border)}
.mobile-nav__link:hover{color:var(--c-greige)}
.mobile-nav__label{
  display:block;padding:12px 0 6px;
  font-family:var(--f-sans-en);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-greige);
}
.mobile-nav__sub{
  display:block;padding:10px 0 10px 16px;
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  letter-spacing:.03em;color:var(--c-gray-550);
  border-bottom:1px solid var(--c-border);transition:color .2s;
}
.mobile-nav__sub:hover{color:var(--c-char)}
.mobile-nav__lang{
  display:flex;align-items:center;gap:10px;margin-top:32px;
}
.mobile-nav__lang button{
  font-family:var(--f-sans-en);font-size:.875rem;letter-spacing:.05em;
  color:var(--c-gray-400);transition:color .2s;
}
.mobile-nav__lang button.active,.mobile-nav__lang button:hover{color:var(--c-char)}
.mobile-nav__lang span{font-size:.5rem;color:var(--c-border)}
.mobile-nav__cta{margin-top:24px;width:100%;justify-content:center;text-align:center}
body.nav-open{overflow:hidden}

/* ── 8. Footer ── */
.footer{background:var(--c-dark);color:var(--c-white)}

.footer__nl{
  padding:52px var(--px);
  max-width:var(--mw);margin:0 auto;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:22px;
}
@media(min-width:768px){
  .footer__nl{flex-direction:row;align-items:flex-end;justify-content:space-between}
}
.footer__nl-ttl{
  font-family:var(--f-serif-en);font-size:1.0625rem;font-weight:400;
  letter-spacing:.14em;margin-bottom:5px;
}
.footer__nl-sub{
  font-family:var(--f-sans-ja);font-size:.8125rem;font-weight:300;
  color:rgba(255,255,255,.4);line-height:1.75;
}
.footer__nl-form{display:flex;flex-shrink:0}
.footer__nl-input{
  padding:10px 14px;width:200px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);border-right:none;
  border-radius:var(--r) 0 0 var(--r);
  color:var(--c-white);font-size:.875rem;font-weight:300;outline:none;
  transition:border-color .2s;
}
.footer__nl-input::placeholder{color:rgba(255,255,255,.22)}
.footer__nl-input:focus{border-color:var(--c-greige)}
.footer__nl-btn{
  padding:10px 16px;
  background:var(--c-white);border:1px solid var(--c-white);
  border-radius:0 var(--r) var(--r) 0;
  color:var(--c-dark);font-family:var(--f-sans-ja);font-size:.8125rem;
  letter-spacing:.04em;cursor:pointer;white-space:nowrap;transition:background .2s;
}
.footer__nl-btn:hover{background:var(--c-greige);border-color:var(--c-greige)}

.footer__main{
  padding:52px var(--px) 44px;
  max-width:var(--mw);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:36px;
}
@media(min-width:768px){
  .footer__main{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px}
}
.footer__logo{
  font-family:var(--f-serif-en);font-size:1rem;letter-spacing:.22em;margin-bottom:10px;
}
.footer__tagline{
  font-family:var(--f-sans-ja);font-size:.8125rem;font-weight:300;
  color:rgba(255,255,255,.32);line-height:1.9;
}
.footer__col-ttl{
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:16px;
}
.footer__col-links{display:flex;flex-direction:column;gap:9px}
.footer__col-link{
  font-family:var(--f-sans-ja);font-size:.8125rem;font-weight:300;
  color:rgba(255,255,255,.6);transition:color .2s;
}
.footer__col-link:hover{color:var(--c-white)}

.footer__bottom{
  border-top:1px solid rgba(255,255,255,.07);
  padding:20px var(--px);
  max-width:var(--mw);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
@media(min-width:768px){
  .footer__bottom{flex-direction:row;justify-content:space-between;text-align:left}
}
.footer__copy{
  font-family:var(--f-sans-en);font-size:.6875rem;font-weight:300;
  color:rgba(255,255,255,.22);letter-spacing:.04em;
}
.footer__legal{display:flex;gap:18px;flex-wrap:wrap}
.footer__legal a{
  font-family:var(--f-sans-ja);font-size:.6875rem;font-weight:300;
  color:rgba(255,255,255,.32);transition:color .2s;
}
.footer__legal a:hover{color:var(--c-white)}
.footer__social{display:flex;gap:16px}
.footer__social a{
  font-family:var(--f-sans-en);font-size:.6875rem;letter-spacing:.06em;
  color:rgba(255,255,255,.32);transition:color .2s;
}
.footer__social a:hover{color:var(--c-white)}

/* ── 9. Section Header ── */
.sh{margin-bottom:48px}
.sh--c{text-align:center;max-width:640px;margin-left:auto;margin-right:auto;margin-bottom:48px}
.sh__eye{
  display:block;font-family:var(--f-sans-en);font-size:.5625rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--c-greige);margin-bottom:12px;
}
.sh__ttl{
  font-family:var(--f-serif-ja);font-size:clamp(1.625rem,2.8vw,2.375rem);
  font-weight:300;letter-spacing:.08em;line-height:1.45;
  color:var(--c-char);margin-bottom:12px;
}
.sh__ttl-w{color:var(--c-white)}
.sh__desc{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.9;color:var(--c-gray-450);
}
.sh__desc-w{color:rgba(255,255,255,.5)}

/* ── 10. Hero ── */
.hero{
  height:100vh;min-height:560px;
  position:relative;display:flex;align-items:center;overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;
  background:var(--c-hero);
  background-image:
    radial-gradient(ellipse 70% 60% at 75% 45%, rgba(75,60,48,.5) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 25% 65%, rgba(35,30,26,.6) 0%, transparent 55%);
}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.05) 100%);
}
.hero__content{
  position:relative;z-index:2;width:100%;
  max-width:var(--mw);margin:0 auto;
  padding:calc(var(--hh) + 60px) var(--px) 60px;
}
.hero__eye{
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:20px;
  display:block;
}
.hero__ttl{
  font-family:var(--f-serif-ja);
  font-size:clamp(2.25rem,5.5vw,4.5rem);
  font-weight:300;letter-spacing:.07em;line-height:1.25;
  color:var(--c-white);margin-bottom:22px;max-width:600px;
}
/* PC/タブレットでは <br> の2行だけにし、枠幅による不自然な折り返しを防ぐ */
@media(min-width:768px){
  .hero__ttl{max-width:none;white-space:nowrap}
}
.hero__sub{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.95;color:rgba(255,255,255,.62);
  max-width:400px;margin-bottom:40px;
}

/* ── 11. Values ── */
.vals{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:768px){.vals{grid-template-columns:repeat(3,1fr);gap:48px}}
.val__num{
  font-family:var(--f-serif-en);font-size:2rem;font-weight:300;
  color:var(--c-border);line-height:1;margin-bottom:12px;
}
.val__ttl{
  font-family:var(--f-serif-ja);font-size:1.0625rem;font-weight:400;
  letter-spacing:.05em;color:var(--c-char);margin-bottom:10px;
}
.val__body{
  font-family:var(--f-sans-ja);font-size:.875rem;font-weight:300;
  line-height:1.9;color:var(--c-gray-450);margin-bottom:20px;
}
.val__link{
  font-family:var(--f-sans-ja);font-size:.8125rem;letter-spacing:.06em;
  color:var(--c-char);display:inline-flex;align-items:center;gap:6px;
  border-bottom:1px solid var(--c-border);padding-bottom:3px;transition:all .2s;
}
.val__link::after{content:'→';font-family:var(--f-sans-en)}
.val__link:hover{color:var(--c-greige);border-color:var(--c-greige)}

/* ── 12. Property Cards ── */
.props{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.props{grid-template-columns:repeat(3,1fr)}}
.prop__img{aspect-ratio:3/2;margin-bottom:16px}
.prop__loc{
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:5px;
}
.prop__name{
  font-family:var(--f-serif-ja);font-size:1.0625rem;font-weight:400;
  letter-spacing:.05em;color:var(--c-char);margin-bottom:8px;
}
.prop__desc{
  font-family:var(--f-sans-ja);font-size:.875rem;font-weight:300;
  line-height:1.85;color:var(--c-gray-450);margin-bottom:18px;
}
.sec-action{text-align:center;margin-top:44px}

/* ── 13. News Cards ── */
.news{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.news{grid-template-columns:repeat(3,1fr)}}
.nc__img{aspect-ratio:4/3;margin-bottom:14px}
.nc__cat{
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:5px;
}
.nc__date{
  font-family:var(--f-sans-en);font-size:.6875rem;
  color:var(--c-greige);margin-bottom:7px;
}
.nc__ttl{
  font-family:var(--f-serif-ja);font-size:1rem;font-weight:400;
  letter-spacing:.03em;color:var(--c-char);margin-bottom:9px;line-height:1.6;
}
.nc__body{
  font-family:var(--f-sans-ja);font-size:.875rem;font-weight:300;
  line-height:1.85;color:var(--c-gray-450);
}

/* ── 14. CTA Band ── */
.cta-band{background:var(--c-dark);padding:var(--sec) 0;text-align:center}
.cta-band__ttl{
  font-family:var(--f-serif-ja);font-size:clamp(1.625rem,3vw,2.5rem);
  font-weight:300;letter-spacing:.1em;color:var(--c-white);margin-bottom:14px;
}
.cta-band__sub{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.9;color:rgba(255,255,255,.5);max-width:420px;
  margin:0 auto 36px;
}

/* ── 15. Feature Split ── */
.split{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:768px){.split{grid-template-columns:1fr 1fr;gap:72px;align-items:center}}
@media(min-width:768px){.split--rev .split__img{order:2}.split--rev .split__body{order:1}}
.split__img{aspect-ratio:4/3}
.split__img-tall{aspect-ratio:3/4}
.split__eye{
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:12px;
}
.split__ttl{
  font-family:var(--f-serif-ja);font-size:clamp(1.5rem,2.5vw,2.125rem);
  font-weight:300;letter-spacing:.07em;line-height:1.45;
  color:var(--c-char);margin-bottom:16px;
}
.split__ttl-w{color:var(--c-white)}
.split__body{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.95;color:var(--c-gray-500);margin-bottom:26px;
}
.split__body-w{color:rgba(255,255,255,.55)}

/* ── 16. Concept Page ── */
.con-hero{
  padding:calc(var(--hh) + 72px) var(--px) 60px;
  text-align:center;
}
.con-hero__ttl{
  font-family:var(--f-serif-ja);font-size:clamp(1.875rem,3.5vw,2.875rem);
  font-weight:300;letter-spacing:.12em;color:var(--c-char);margin-bottom:20px;
}
.con-hero__body{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:2;color:var(--c-gray-450);max-width:500px;margin:0 auto;
}

/* Concept value grid */
.con-intro{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:1024px){.con-intro{grid-template-columns:1fr 1fr;gap:80px;align-items:center}}
.con-vals{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cv__ico{font-size:1.25rem;color:var(--c-greige);margin-bottom:9px}
.cv__ttl{
  font-family:var(--f-serif-ja);font-size:1rem;font-weight:400;
  letter-spacing:.04em;color:var(--c-char);margin-bottom:7px;
}
.cv__body{
  font-family:var(--f-sans-ja);font-size:.875rem;font-weight:300;
  line-height:1.85;color:var(--c-gray-450);margin-bottom:12px;
}
.cv__link{
  font-family:var(--f-sans-ja);font-size:.8125rem;color:var(--c-char);
  border-bottom:1px solid var(--c-border);padding-bottom:2px;
  display:inline-block;transition:all .2s;
}
.cv__link:hover{color:var(--c-greige);border-color:var(--c-greige)}
.con-intro__img{aspect-ratio:3/4}

/* Concept pillars (replaces stats – no numbers per policy) */
.pillars{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{
  padding:32px 26px;
  border:1px solid var(--c-border);border-radius:var(--r);
}
.pillar__ttl{
  font-family:var(--f-serif-ja);font-size:1.0625rem;font-weight:400;
  letter-spacing:.05em;color:var(--c-char);margin-bottom:10px;
}
.pillar__body{
  font-family:var(--f-sans-ja);font-size:.875rem;font-weight:300;
  line-height:1.9;color:var(--c-gray-450);
}

/* ── 17. Hotel Pages ── */
.hotel-top{
  padding:calc(var(--hh) + 60px) var(--px) 0;
  text-align:center;
}
.hotel-top__badge{
  display:inline-block;
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-greige);
  border:1px solid var(--c-border);border-radius:40px;padding:5px 14px;
  margin-bottom:18px;
}
.hotel-top__name{
  font-family:var(--f-serif-en);font-size:.6875rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:10px;
}
.hotel-top__ttl{
  font-family:var(--f-serif-ja);font-size:clamp(1.875rem,4vw,3.25rem);
  font-weight:300;letter-spacing:.08em;line-height:1.3;
  color:var(--c-char);margin-bottom:18px;
}
.hotel-top__sub{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.9;color:var(--c-gray-450);max-width:480px;margin:0 auto 28px;
}
.hotel-top__img{margin-top:44px;aspect-ratio:16/7;border-radius:0}

/* Intro split for hotel detail */
.hotel-intro{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:768px){.hotel-intro{grid-template-columns:1fr 1fr;gap:64px;align-items:center}}
.hint__eye{
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:12px;
}
.hint__ttl{
  font-family:var(--f-serif-ja);font-size:clamp(1.5rem,2.8vw,2.25rem);
  font-weight:300;letter-spacing:.07em;line-height:1.45;
  color:var(--c-char);margin-bottom:16px;
}
.hint__list{display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.hint__list li{
  display:flex;gap:10px;align-items:baseline;
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.75;color:var(--c-gray-500);
}
.hint__list li::before{
  content:'—';color:var(--c-greige);font-family:var(--f-sans-en);
  font-size:.75rem;flex-shrink:0;
}
.hotel-intro__img{aspect-ratio:3/4}

/* Room cards */
.rooms{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:768px){.rooms{grid-template-columns:repeat(3,1fr)}}
.room__num{
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:10px;
}
.room__img{aspect-ratio:4/3;margin-bottom:14px}
.room__name{
  font-family:var(--f-serif-ja);font-size:1.0625rem;font-weight:400;
  letter-spacing:.05em;color:var(--c-char);margin-bottom:5px;
}
.room__price{
  font-family:var(--f-sans-en);font-size:.8125rem;
  color:var(--c-greige);letter-spacing:.06em;margin-bottom:9px;
}
.room__body{
  font-family:var(--f-sans-ja);font-size:.875rem;font-weight:300;
  line-height:1.85;color:var(--c-gray-450);
}

/* Offer block (dark) */
.offer{background:var(--c-dark);padding:64px var(--px)}
.offer__in{
  max-width:var(--mw);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:44px;
}
@media(min-width:768px){.offer__in{grid-template-columns:1fr 1fr;gap:72px;align-items:center}}
.offer__eye{
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:12px;
}
.offer__ttl{
  font-family:var(--f-serif-ja);font-size:clamp(1.5rem,2.5vw,2.125rem);
  font-weight:300;letter-spacing:.07em;line-height:1.45;
  color:var(--c-white);margin-bottom:16px;
}
.offer__body{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.95;color:rgba(255,255,255,.5);margin-bottom:26px;
}
.offer__rooms{display:flex;flex-direction:column;gap:14px}
.offer__room{
  display:flex;gap:14px;align-items:center;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);
}
.offer__room:last-child{border-bottom:none;padding-bottom:0}
.offer__room-img{width:68px;height:51px;flex-shrink:0;border-radius:var(--r)}
.offer__room-name{
  font-family:var(--f-serif-ja);font-size:.9375rem;font-weight:400;
  color:var(--c-white);margin-bottom:3px;
}
.offer__room-info{
  font-family:var(--f-sans-ja);font-size:.8125rem;font-weight:300;
  color:rgba(255,255,255,.42);line-height:1.7;
}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:768px){.gallery{grid-template-columns:repeat(3,1fr);gap:12px}}
.gallery__item{aspect-ratio:1;border-radius:var(--r);overflow:hidden}
.gallery__item--wide{grid-column:span 2;aspect-ratio:2/1}

/* Access */
.access{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:768px){.access{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.acc__eye{
  font-family:var(--f-sans-en);font-size:.5625rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:12px;
}
.acc__ttl{
  font-family:var(--f-serif-ja);font-size:1.375rem;font-weight:300;
  letter-spacing:.06em;color:var(--c-char);margin-bottom:22px;
}
.acc__details{display:flex;flex-direction:column;gap:16px}
.acc__lbl{
  font-family:var(--f-sans-en);font-size:.5rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-greige);margin-bottom:2px;
}
.acc__val{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.8;color:var(--c-char);
}
.acc__map{aspect-ratio:4/3}

/* ── 18. Contact ── */
.contact-wrap{display:grid;grid-template-columns:1fr;gap:52px}
@media(min-width:1024px){.contact-wrap{grid-template-columns:1fr 1.7fr;gap:80px}}
.ci__ttl{
  font-family:var(--f-serif-ja);font-size:1.375rem;font-weight:300;
  letter-spacing:.06em;color:var(--c-char);margin-bottom:10px;
}
.ci__sub{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.9;color:var(--c-gray-450);margin-bottom:28px;
}
.ci__items{display:flex;flex-direction:column;gap:12px}
.ci__item{display:flex;gap:9px;align-items:flex-start}
.ci__ico{color:var(--c-greige);flex-shrink:0;font-size:.875rem;margin-top:2px}
.ci__val{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:1.75;color:var(--c-gray-550);
}

/* Form */
.form{display:flex;flex-direction:column;gap:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg{display:flex;flex-direction:column;gap:6px}
.flbl{
  font-family:var(--f-sans-ja);font-size:.8125rem;font-weight:400;
  letter-spacing:.02em;color:var(--c-char);
}
.flbl .req{color:var(--c-greige);font-size:.6875rem;margin-left:3px}
.finput,.ftextarea,.fselect{
  padding:11px 13px;
  border:1px solid var(--c-border);border-radius:var(--r);
  font-size:.9375rem;font-weight:300;color:var(--c-char);
  background:var(--c-white);outline:none;transition:border-color .2s;
  -webkit-appearance:none;appearance:none;
}
.finput:focus,.ftextarea:focus,.fselect:focus{border-color:var(--c-greige)}
.finput::placeholder,.ftextarea::placeholder{color:var(--c-gray-300);font-weight:300}
.ftextarea{resize:vertical;min-height:112px;line-height:1.75}
.fselect{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8AE9E' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  padding-right:36px;cursor:pointer;
}
.fradios{display:flex;flex-wrap:wrap;gap:12px}
.fradio{display:flex;align-items:center;gap:7px;cursor:pointer}
.fradio input[type="radio"]{
  width:15px;height:15px;border:1px solid var(--c-border);border-radius:50%;
  appearance:none;-webkit-appearance:none;cursor:pointer;position:relative;
  transition:border-color .2s;flex-shrink:0;
}
.fradio input[type="radio"]:checked{border-color:var(--c-char)}
.fradio input[type="radio"]:checked::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:7px;height:7px;
  border-radius:50%;background:var(--c-char);
}
.fradio__lbl{font-family:var(--f-sans-ja);font-size:.875rem;font-weight:300;color:var(--c-char)}
.fcheck{display:flex;align-items:flex-start;gap:9px;cursor:pointer}
.fcheck input[type="checkbox"]{
  width:15px;height:15px;border:1px solid var(--c-border);border-radius:2px;
  appearance:none;-webkit-appearance:none;cursor:pointer;flex-shrink:0;
  margin-top:2px;transition:all .2s;
}
.fcheck input[type="checkbox"]:checked{
  background:var(--c-char);border-color:var(--c-char);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' viewBox='0 0 9 7'%3E%3Cpath d='M1 3.5l2.5 2.5L8 1' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.fcheck__lbl{font-family:var(--f-sans-ja);font-size:.8125rem;font-weight:300;color:var(--c-gray-450);line-height:1.75}
.fcheck__lbl a{border-bottom:1px solid var(--c-border);transition:all .2s}
.fcheck__lbl a:hover{color:var(--c-greige);border-color:var(--c-greige)}

/* Locations section */
.locs{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:768px){.locs{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.loc-list{display:flex;flex-direction:column}
.loc-item{padding:22px 0;border-bottom:1px solid var(--c-border)}
.loc-item:first-child{padding-top:0}
.loc-item:last-child{border-bottom:none}
.loc__city{
  font-family:var(--f-serif-ja);font-size:1.125rem;font-weight:400;
  letter-spacing:.05em;color:var(--c-char);margin-bottom:5px;
}
.loc__addr{font-family:var(--f-sans-ja);font-size:.875rem;font-weight:300;line-height:1.8;color:var(--c-gray-450)}
.locs__img{aspect-ratio:4/3}

/* ── 19. Text Pages (terms/cancel/privacy) ── */
.text-page{padding-top:calc(var(--hh) + 72px);padding-bottom:var(--sec)}
.text-page__head{text-align:center;margin-bottom:56px;padding:0 var(--px)}
.text-page__ttl{
  font-family:var(--f-serif-ja);font-size:clamp(1.875rem,3.5vw,2.75rem);
  font-weight:300;letter-spacing:.1em;color:var(--c-char);margin-bottom:12px;
}
.text-page__sub{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  color:var(--c-gray-450);line-height:1.8;
}
.text-page__body{max-width:800px;margin:0 auto;padding:0 var(--px)}
.text-sec{margin-bottom:44px}
.text-sec__ttl{
  font-family:var(--f-serif-ja);font-size:1.1875rem;font-weight:400;
  letter-spacing:.05em;color:var(--c-char);
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--c-border);
}
.text-sec__body{
  font-family:var(--f-sans-ja);font-size:.9375rem;font-weight:300;
  line-height:2.05;color:var(--c-gray-600);
}
.text-sec__body p{margin-bottom:14px}
.text-sec__body p:last-child{margin-bottom:0}
.text-sec__body ul{padding-left:18px;margin-bottom:14px}
.text-sec__body ul li{list-style:disc;margin-bottom:5px}

/* ── 25. 言語切替（左下固定 / fav-hotels風 折りたたみ・PC/SP共通） ── */
.lang-switcher{
  position:fixed;left:0;bottom:0;z-index:9999;
  background:var(--c-white);
  border:1px solid var(--c-gray-100);
  border-radius:0 5px 0 0;
  box-shadow:1px 2px 3px rgba(0,0,0,.16);
  overflow:hidden;
  max-height:48px;
  transition:max-height .15s ease-in;
  font-family:var(--f-sans-ja);
  font-size:12px;line-height:1;color:var(--c-gray-700);
}
.lang-switcher.open{max-height:600px}

/* 通常（折りたたみ）：現在の言語名＋▼ */
.lang-switcher__current{
  position:relative;display:block;width:100%;text-align:left;
  padding:15px 32px 15px 16px;
  color:var(--c-gray-700);font-size:12px;line-height:1;cursor:pointer;
}
.lang-switcher__current::after{
  content:'▼';position:absolute;top:15px;right:11px;
  font-size:10px;color:var(--c-gray-400);transition:color .15s;
}
.lang-switcher__current:hover::after{color:var(--c-gray-700)}
.lang-switcher.open .lang-switcher__current{display:none}

/* 展開リスト */
.lang-switcher__list{display:none;padding:7px 0}
.lang-switcher.open .lang-switcher__list{display:block}
.lang-switcher__opt{
  position:relative;display:block;width:100%;text-align:left;
  padding:8px 32px 8px 16px;
  color:var(--c-gray-700);font-size:12px;line-height:1;cursor:pointer;
  transition:color .15s;
}
.lang-switcher__opt::after{
  content:'●';position:absolute;top:9px;right:11px;
  font-size:10px;color:var(--c-gray-400);display:none;
}
.lang-switcher__opt.active{color:var(--c-char)}
.lang-switcher__opt.active::after{display:block}
.lang-switcher__opt:hover::after{display:block;color:var(--c-gray-700)}
@media(pointer:coarse){
  .lang-switcher__opt:hover::after{display:none}
  .lang-switcher__opt.active::after{display:block}
}

/* ── 26. スクロール/ロードアニメーション（全ページ共通・上品な動き） ── */
/* anim.js が <html> に .anim-on を付与した時のみ作動。reduced-motion では全無効 */
@media (prefers-reduced-motion: no-preference){

  /* スクロール出現：フェードイン＋上昇（stagger 遅延は anim.js が付与） */
  .anim-on .sh,
  .anim-on .thp__panel,
  .anim-on .vals > *,
  .anim-on .news > *,
  .anim-on .pillars > *,
  .anim-on .con-vals > *,
  .anim-on .split__img,
  .anim-on .split__body,
  .anim-on .rooms > *,
  .anim-on .gallery > *,
  .anim-on .offer__rooms > *,
  .anim-on .access,
  .anim-on .locs > *,
  .anim-on .contact-wrap > *,
  .anim-on .text-sec,
  .anim-on .text-page__head,
  .anim-on .reservation-card,
  .anim-on .resres-room,
  .anim-on .rescmp{
    opacity:0;transform:translateY(24px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),
               transform .7s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform;
  }
  .anim-on .sh.is-in,
  .anim-on .thp__panel.is-in,
  .anim-on .vals > .is-in,
  .anim-on .news > .is-in,
  .anim-on .pillars > .is-in,
  .anim-on .con-vals > .is-in,
  .anim-on .split__img.is-in,
  .anim-on .split__body.is-in,
  .anim-on .rooms > .is-in,
  .anim-on .gallery > .is-in,
  .anim-on .offer__rooms > .is-in,
  .anim-on .access.is-in,
  .anim-on .locs > .is-in,
  .anim-on .contact-wrap > .is-in,
  .anim-on .text-sec.is-in,
  .anim-on .text-page__head.is-in,
  .anim-on .reservation-card.is-in,
  .anim-on .resres-room.is-in,
  .anim-on .rescmp.is-in{
    opacity:1;transform:none;
  }

  /* ヒーローのロード演出（index / concept / hotel 各型に対応） */
  .anim-on .hero__eye,
  .anim-on .hero__ttl,
  .anim-on .hero__sub,
  .anim-on .hero .actions,
  .anim-on .con-hero__ttl,
  .anim-on .con-hero__body,
  .anim-on .hotel-top__badge,
  .anim-on .hotel-top__name,
  .anim-on .hotel-top__ttl,
  .anim-on .hotel-top__sub,
  .anim-on .hotel-top .actions{
    opacity:0;animation:animHeroIn .8s cubic-bezier(.22,.61,.36,1) both;
  }
  .anim-on .hero__eye,
  .anim-on .con-hero__ttl,
  .anim-on .hotel-top__badge{animation-delay:.15s}
  .anim-on .hero__ttl,
  .anim-on .con-hero__body,
  .anim-on .hotel-top__name{animation-delay:.30s}
  .anim-on .hero__sub,
  .anim-on .hotel-top__ttl{animation-delay:.45s}
  .anim-on .hero .actions,
  .anim-on .hotel-top__sub{animation-delay:.60s}
  .anim-on .hotel-top .actions{animation-delay:.75s}

  /* index ヒーロー背景のゆっくりズーム（.hero 側で overflow:hidden 済み） */
  .anim-on .hero__bg img{transform-origin:center;animation:animHeroZoom 20s ease-out both}

  /* オープニング表示中はヒーロー演出を待機し、フェードアウト開始(loader-done)で再生 */
  .loader-on:not(.loader-done) .hero__eye,
  .loader-on:not(.loader-done) .hero__ttl,
  .loader-on:not(.loader-done) .hero__sub,
  .loader-on:not(.loader-done) .hero .actions,
  .loader-on:not(.loader-done) .con-hero__ttl,
  .loader-on:not(.loader-done) .con-hero__body,
  .loader-on:not(.loader-done) .hotel-top__badge,
  .loader-on:not(.loader-done) .hotel-top__name,
  .loader-on:not(.loader-done) .hotel-top__ttl,
  .loader-on:not(.loader-done) .hotel-top__sub,
  .loader-on:not(.loader-done) .hotel-top .actions,
  .loader-on:not(.loader-done) .hero__bg img{
    animation-play-state:paused;
  }
}

@keyframes animHeroIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes animHeroZoom{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

/* ── 27. オープニング（ローディング）画面 ── */
.loader{display:none}
.loader-on .loader{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:10000;
  background:var(--c-dark);
  opacity:1;transition:opacity .8s ease;
}
.loader.is-hiding{opacity:0;pointer-events:none}
.loader__inner{text-align:center;padding:0 24px}
.loader__brand{
  font-family:var(--f-serif-en);color:var(--c-white);
  font-size:clamp(2rem,6vw,3.5rem);font-weight:300;line-height:1;
  letter-spacing:.32em;text-indent:.32em;
  opacity:0;transform:translateY(10px);
  animation:loaderIn .8s cubic-bezier(.22,.61,.36,1) .15s forwards;
}
.loader__tag{
  margin-top:18px;
  font-family:var(--f-sans-en);color:var(--c-greige);
  font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;line-height:1.5;
  opacity:0;
  animation:loaderIn .8s ease .45s forwards;
}
@keyframes loaderIn{to{opacity:1;transform:none}}

/* ── 28. ユーティリティ（旧インラインstyleの巻き取り） ──
   個別ページのインラインstyleを廃し、ここに集約。値は現行を厳密保持。 */
.u-tac{text-align:center}
.u-jc-center{justify-content:center}
.u-inline-block{display:inline-block}
.u-mt-44{margin-top:44px}
.u-mb-20{margin-bottom:20px}
.u-ml-20{margin-left:20px}
.u-pt-0{padding-top:0}
.u-pt-44{padding-top:44px}
/* 固定ヘッダー分のページ先頭オフセット（ヘッダー高 + 余白） */
.u-pt-head-60{padding-top:calc(var(--hh) + 60px)}
.u-pt-head-72{padding-top:calc(var(--hh) + 72px)}
.u-pt-head-96{padding-top:calc(var(--hh) + 96px)}
/* 幅100%・中央寄せのボタン（フォーム送信など） */
.btn--block{width:100%;justify-content:center}
/* 本文中の下線リンク（旧インラインstyle＋onmouseover/outを置換） */
.u-link{border-bottom:1px solid var(--c-border);transition:all .2s}
.u-link:hover{border-color:var(--c-greige);color:var(--c-greige)}