/* ============================================================================
   compass — base.css
   Reset, design tokens, page shell and component chrome.
   Geometry lives in layout.css (generated from the original stylesheet).
   ========================================================================== */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, section, header, footer, nav, aside, main, article,
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, form, label, input, textarea,
button, figure, picture, img, svg {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}
html { -webkit-text-size-adjust: 100%; }
body {
  background: #fff;
  color: #000;
  font-family: var(--ff-gothic);
  font-size: 16px;
  /* `normal` matches the original: components that need a ratio declare one. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { background: none; cursor: pointer; font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #116dff; outline-offset: 2px; }

/* ---------------------------------------------------------------- tokens */
:root {
  /* Fluid type. The original scales every size linearly between a 320px
     viewport and a per-breakpoint ceiling (1920 / 1000 / 750), which is what
     these three units reproduce. layout.css multiplies them by the same
     coefficients the Wix stylesheet used. */
  --u1920: calc((clamp(320px, 100vw, 1920px) - 320px) / 1600);
  --u1000: calc((clamp(320px, 100vw, 1000px) - 320px) / 680);
  --u750:  calc((clamp(320px, 100vw,  750px) - 320px) / 430);

  /* Type. The original licenses 筑紫ゴシック / 筑紫オールド明朝 through Wix;
     off-Wix those need a separate webfont contract, so the closest freely
     licensable faces stand in. Swap the two values below to switch back. */
  --ff-gothic:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --ff-mincho:  "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho",
                "YuMincho", "MS PMincho", serif;
  --ff-helv:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-roboto:  Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-avenir:  "Avenir Next", Avenir, "Zen Kaku Gothic New", "Segoe UI", sans-serif;
  --ff-poppins: Poppins, "Helvetica Neue", Arial, sans-serif;
  --ff-georgia: Georgia, Palatino, "Book Antiqua", "Palatino Linotype", serif;

  /* `line-height: normal` in the original resolved from the Wix-hosted fonts'
     own metrics. The substitutes report different values, so these pin the
     ratios the original actually rendered at. */
  --lh-jp: 1.95;
  --lh-latin: 1.19;

  --header-h: 75px;
  --sidebar-w: max(10vw, 0px);
}
@media screen and (max-width: 1000px) {
  :root { --sidebar-w: max(14.036051432291666vw, 0px); }
}
@media screen and (max-width: 750px) {
  :root { --header-h: 61px; --sidebar-w: 0px; }
}

/* ---------------------------------------------------------------- shell */
/* Root grid mirrors the original: a sidebar column plus a content column,
   one row for the fixed header and one row per section. */
.site {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0px, 1fr);
  grid-template-rows: max(var(--header-h), 48px) repeat(8, auto) auto;
  min-height: 100vh;
  overflow-x: clip;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: #fff;
  border-radius: 24px;
  padding: 12px 20px;
  color: #116dff;
  font-size: 14px;
}
.skip:focus { left: 8px; top: 8px; }

/* Header and sidebar are pinned, exactly as the original pins them. */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: 60;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
@media screen and (max-width: 750px) {
  /* Wix: --bg-overlay-color: rgba(var(--color_11), .4) */
  .topbar { background: rgba(255, 255, 255, 0.4); }
}

.sidebar {
  position: fixed;
  inset: 0 auto auto 0;
  height: 100vh;
  background: #fff;
  z-index: 50;
}
.sidebar > * { pointer-events: auto; }

main { display: contents; }

/* Sections sit in the content column, one per grid row. */
.hero    { grid-area: 2 / 2 / 3 / 3; }
.concept { grid-area: 3 / 2 / 4 / 3; }
.about   { grid-area: 4 / 2 / 5 / 3; }
.stay    { grid-area: 5 / 2 / 6 / 3; }
.room    { grid-area: 6 / 2 / 7 / 3; }
.service { grid-area: 7 / 2 / 8 / 3; }
.access  { grid-area: 8 / 2 / 9 / 3; }
.contact { grid-area: 9 / 2 / 10 / 3; }
.footer  { grid-area: 10 / 2 / 11 / 3; }

/* Every section is a one-cell grid its children overlay — the Wix model.
   minmax(0, 1fr) rather than 1fr: the gallery's off-screen slides would
   otherwise inflate the column's automatic minimum. */
.hero, .concept, .about, .stay, .room, .service, .access, .contact, .footer {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------- media */
/* Photos are absolutely filled so they never contribute intrinsic height,
   matching Wix's <wow-image> wrapper. */
.ph { position: relative; overflow: hidden; }
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__img { position: relative; }
.hero__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONCEPT: photo at 68% opacity over black — that is where its muted tone
   comes from in the original. */
.concept { background: #000; }
.concept__bg {
  grid-area: 1 / 1 / -1 / -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.68;
  overflow: hidden;
}
.concept__bg img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.concept__inner, .concept__title, .concept__ja, .concept__rule, .concept__en {
  color: #fff;
}
.concept__rule {
  border-top: 1px solid #fff;
  height: 5px;
}

/* ---------------------------------------------------------------- text */
/* Wix rich text: <p>/<h*> carry no margins; spacing is done with empty
   paragraphs, which we keep so the vertical rhythm matches. */
.rt p, .rt h1, .rt h2, .rt h3, .rt h4, .rt h5, .rt h6 {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
}
.rt a { text-decoration: none; }
.rt a:hover { text-decoration: underline; }

.hero__kicker, .hero__place, .hero__region { color: #fff; text-align: center; }

/* Logo marks are square boxes driven by aspect-ratio, so the graphic must not
   contribute intrinsic height of its own. */
.hero__mark, .sidebar__logo, .footer__mark { position: relative; }
.hero__mark > *, .sidebar__logo > *, .footer__mark > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sidebar__nav { text-align: left; }
/* inline, as in the original — the link box hugs its label */
.sidebar__nav a { white-space: pre; }
.sidebar__nav a:hover { opacity: 0.6; }
.sidebar__ig > *, .topbar__ig > *, .footer__ig > * { width: 100%; height: 100%; }
.am__icon > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.topbar__burger > * { width: 100%; height: 100%; }
.drawer__close > *, .to-top > * { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- buttons */
/* Wix SiteButton: black pill, white label, no border. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border-radius: 24px;
  text-align: center;
  transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.82; }
.btn span { display: block; }

.topbar__burger { position: relative; }

/* ---------------------------------------------------------------- amenities */
.am { position: relative; }
.am__icon { position: relative; }

/* ---------------------------------------------------------------- map */
.access__map { position: relative; overflow: hidden; }
.access__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------- form */
.form__row { position: relative; }
.form__row label {
  display: block;
  font-family: var(--ff-gothic);
  font-size: 12px;
  line-height: 12px;
  color: #000;
  margin-bottom: 2px;
}
.form__row input,
.form__row textarea {
  display: block;
  width: 100%;
  background: rgba(232, 234, 237, 0.6);
  border: 0;
  border-radius: 15px;
  padding: 3px 3px 3px 30px;
  font-family: var(--ff-gothic);
  font-size: 10px;
  color: #000;
  resize: none;
}
.form__row input { height: 36px; }
.form__row--msg textarea { height: 136px; padding-top: 10px; }
.form__row input:focus,
.form__row textarea:focus { outline: 2px solid rgba(0, 0, 0, 0.25); outline-offset: 0; }

.form__submit { position: relative; }
.form__submit button {
  width: 100%;
  height: 100%;
  min-height: 34.09091527088822px;
  background: #000;
  color: #fff;
  border-radius: 200px;
  font-family: var(--ff-gothic);
  font-size: 12px;
  line-height: 1.4em;
  transition: opacity 0.2s ease;
}
.form__submit button:hover { opacity: 0.82; }
.form__submit button[disabled] { opacity: 0.5; cursor: default; }

/* Hidden until a submission succeeds, as in the original. */
.form__thanks { visibility: hidden; text-align: center; }
.form__thanks.is-visible { visibility: visible; }
.form__error {
  grid-area: 5 / 1 / 6 / 2;
  align-self: end;
  justify-self: center;
  color: #c0392b;
  font-size: 11px;
  text-align: center;
  display: none;
}
.form__error.is-visible { display: block; }

/* ---------------------------------------------------------------- gallery */
.gallery { position: relative; min-width: 0; }
.gallery__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 979 / 550;
}
.gallery__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  will-change: transform;
}
.gallery__slide { position: relative; flex: 0 0 100%; height: 100%; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }

.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 44px;
  display: grid;
  place-items: center;
  z-index: 3;
}
.gallery__arrow > * { width: 14px; height: 24px; }
.gallery__arrow--prev { left: 0; }
.gallery__arrow--prev > * { transform: scaleX(-1); }
.gallery__arrow--next { right: 0; }

/* Thumbnail strip, measured off the original at 390/768/900/1100/1280px:
   134px cells (90px below 750px), an 18px gutter, a 9px inset on every side and
   a 9px gap below the stage. That makes the strip 152px tall and the whole
   gallery `stage + 9 + 152` — the heights the original reports at every width. */
.gallery__thumbs {
  display: flex;
  gap: 18px;
  margin-top: 9px;
  padding: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb {
  position: relative;
  flex: 0 0 134px;
  width: 134px;
  height: 134px;
  padding: 0;
  background: #fff;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* The original washes out the *selected* thumbnail with a 60% white veil. */
.gallery__thumb[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: hsla(0, 0%, 100%, 0.6);
}

@media screen and (max-width: 750px) {
  .gallery__thumb { flex: 0 0 90px; width: 90px; height: 90px; }
}

/* ---------------------------------------------------------------- drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 80;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  background: #fff;
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.37, 0, 0.63, 1);
  overflow-y: auto;
}
/* Menu item type comes from Wix's --fnt per breakpoint:
   >1000 avenir 18px · <=1000 poppins-semibold 22px · <=750 helvetica-bold 12px,
   with 7px vertical padding below 1000px and a 10px start inset throughout. */
.drawer__nav { text-align: start; }
.drawer__nav a {
  display: block;
  font-family: var(--ff-avenir);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.4em;
  color: #000;
  padding: 0 0 0 10px;
}
.drawer__nav a:hover { opacity: 0.6; }
@media screen and (max-width: 1000px) {
  .drawer__nav a {
    font-family: var(--ff-poppins);
    font-weight: 600;
    font-size: 22px;
    padding: 7px 0 7px 10px;
  }
}
@media screen and (max-width: 750px) {
  .drawer__nav a {
    font-family: var(--ff-helv);
    font-weight: 700;
    font-size: 12px;
    padding: 7px 0 7px 10px;
  }
}

.drawer__close { position: relative; }
@media screen and (max-width: 750px) {
  /* The original parks this off-canvas (margin-top:-1001px), leaving no way to
     dismiss the menu except tapping outside. Kept on screen here — the only
     deliberate departure from the original's behaviour. */
  .drawer__close { margin-top: 20px; margin-right: 20px; align-self: start; }
}

body.is-menu-open .drawer { transform: translateX(0); }
body.is-menu-open .drawer-overlay { opacity: 1; visibility: visible; }
body.is-menu-open { overflow: hidden; }

/* ---------------------------------------------------------------- to top */
.to-top {
  position: fixed;
  right: 5%;
  bottom: 5%;
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.to-top.is-visible { opacity: 1; visibility: visible; }

/* Anchor targets clear the fixed header. */
.hero, .concept, .about, .stay, .room, .service, .access, .contact {
  scroll-margin-top: var(--header-h);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .gallery__thumbs { scroll-behavior: auto; }
}

/* ------------------------------------------------------- wide-screen overlaps */
/* The original packs a whole section into one grid cell: some children hang off
   the top with width-proportional margins, others off the bottom of a fixed
   min-height. Past roughly 1500px the proportional ones outgrow the box and
   slide under the anchored ones — on the live Wix site the STAY photo covers the
   Check in / out times, and the last amenity row lands on 留意事項. Giving those
   two sections a second row keeps the bottom-anchored children below the growing
   ones. The section min-height still absorbs the slack, so nothing shifts at the
   widths where the original already fit. */
@media screen and (min-width: 1001px) {
  .stay { grid-template-rows: 1fr auto; }
  .stay__checkin,
  .stay__price {
    grid-row: 2;
    margin-top: 24px; /* clears the photo once the row actually splits */
  }

  .service { grid-template-rows: 1fr auto; }
  .notes {
    grid-row: 2;
    margin-top: 40px;
  }
}

/* ---------------------------------------------------------------- visibility */
/* Last in the file on purpose: these have to beat the component rules above
   (.btn sets display:flex, which would otherwise resurrect the booking pill).
   The mobile bar's controls and the back-to-top button belong to the <=750px
   layout only; the sidebar belongs to the wider ones. */
@media screen and (min-width: 751px) {
  .topbar__ig,
  .topbar__burger,
  .topbar__book,
  .to-top { display: none; }
}
@media screen and (max-width: 750px) {
  .sidebar { display: none; }
}