@charset "UTF-8";
/*
 * Qwe Hospitality — component layer.
 *
 * Load order is tokens.css → <design system>.css → this file. That order is
 * deliberate: the design system binds the token roles to values, and this file
 * spends them. Nothing here names a colour, a typeface or a spacing step; every
 * such value is read from a --qwe-* token. A component that writes #fff, 24px
 * or "serif" is a bug, because it makes the third design system cost a rewrite
 * instead of a token set.
 *
 * What this layer owns
 *   - the skeleton: what is a row, what is a column, what stacks at 320px
 *   - the spacing rhythm, expressed as multiples of the rhythm tokens
 *   - the surface mechanism: data-surface decides background AND foreground
 *   - the accessibility floors: 44px targets, 16px body and notes, no overflow
 *
 * What this layer does NOT own
 *   - which colour, which face, which rhythm  → muse.css / kagura.css
 *   - which sections appear and in what order → inc/display/sections.php
 *
 * Photographs are never filtered here (IA §5-2). Legibility over an image is
 * bought with --qwe-overlay-scrim / --qwe-overlay-panel, which sit between the
 * photograph and the text. The rule is enforced, not merely documented: see
 * "Media" below.
 *
 * Layer variables
 *   Four layout measures have no token because they are not a design decision
 *   the design systems branch on (IA §13 lists all nine branch points, and none
 *   of them is "how wide is the content column"). They are declared once here
 *   so a design system can still override them, and they are the only literal
 *   lengths in this file besides 0, 100% and the two breakpoints.
 */

:root {
  --qwe-content-max: 1280px; /* the widest a content column ever gets */
  --qwe-grid-min: 260px;     /* a card stops sharing a row below this */
  --qwe-spec-label: 10em;    /* label column of a definition row */
  --qwe-hero-min: 62vh;      /* the hero holds this much of the first screen */
  --qwe-logo-height: var(--qwe-tap);

  /*
   * The band gutter. A section is full width; the column inside it is
   * --qwe-content-max wide and centred, and the gutter is whichever is larger:
   * the design system's own inline rhythm, or the space left over once the
   * column has taken its width. Centring therefore happens once, on the band,
   * instead of on every direct child — which is what used to push a paragraph
   * with its own --qwe-measure into the middle of the page while its heading
   * stayed at the left edge.
   *
   * `100%` in this value is resolved where the variable is USED, not where it
   * is declared. It is only correct on a box that spans the whole band, so it
   * is spent in exactly two places: the section's own padding-inline, and the
   * caption under a full-bleed figure. Do not use it inside the column.
   */
  --qwe-gutter: max(var(--qwe-section-x), calc((100% - var(--qwe-content-max)) / 2));
}

/* Breakpoints used in this file, for the reader:
 *   600px — a two-column pair may exist
 *   900px — the desktop layout; the mobile booking bar disappears here, and it
 *           is the same threshold images.php promises in its `sizes` attributes
 */

/* =========================================================================
   1. Base
   ====================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--qwe-surface-base);
  color: var(--qwe-surface-base-ink);
  font-family: var(--qwe-font-body);
  font-size: var(--qwe-size-body);
  font-weight: var(--qwe-weight-body);
  line-height: var(--qwe-leading-body);
  /* A guest reading Japanese meets a lot of long unbroken runs; allow the
     browser to break one rather than push the page sideways at 320px. */
  overflow-wrap: break-word;
  /* 禁則処理を全文に効かせる。個別セレクタで足すと必ず付け忘れが出る。 */
  line-break: strict;
  /* 最終行に1文字だけ残る組版を、前の行を詰めて避ける。 */
  text-wrap: pretty;
  /* 行末の約物を版面の外へ逃がし、右端を揃える。 */
  hanging-punctuation: allow-end;
  /* Nothing in this theme scrolls the document sideways. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* WordPress core emits this class in pagination and search markup. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   2. Surfaces
   --------------------------------------------------------------------------
   A section declares a role and takes background and foreground from the same
   pair, so contrast can never be half-applied: there is no way to set one and
   forget the other. Every descendant reads --qwe-bg / --qwe-fg / --qwe-fg-muted
   / --qwe-rule instead of naming a colour.
   ====================================================================== */

:root,
[data-surface="base"] {
  --qwe-bg: var(--qwe-surface-base);
  --qwe-fg: var(--qwe-surface-base-ink);
  --qwe-fg-muted: var(--qwe-ink-muted);
  --qwe-fg-faint: var(--qwe-ink-faint);
  --qwe-rule: var(--qwe-line);
  --qwe-rule-strong: var(--qwe-line-strong);
}

[data-surface="alt"] {
  --qwe-bg: var(--qwe-surface-alt);
  --qwe-fg: var(--qwe-surface-alt-ink);
  --qwe-fg-muted: var(--qwe-ink-muted);
  --qwe-fg-faint: var(--qwe-ink-faint);
  --qwe-rule: var(--qwe-line);
  --qwe-rule-strong: var(--qwe-line-strong);
}

[data-surface="inverted"] {
  --qwe-bg: var(--qwe-surface-inverted);
  --qwe-fg: var(--qwe-surface-inverted-ink);
  --qwe-fg-muted: var(--qwe-ink-inverted);
  --qwe-fg-faint: var(--qwe-ink-inverted);
  --qwe-rule: var(--qwe-line-inverted);
  --qwe-rule-strong: var(--qwe-line-inverted);
}

[data-surface="accent"] {
  --qwe-bg: var(--qwe-surface-accent);
  --qwe-fg: var(--qwe-surface-accent-ink);
  --qwe-fg-muted: var(--qwe-surface-accent-ink);
  --qwe-fg-faint: var(--qwe-surface-accent-ink);
  --qwe-rule: var(--qwe-line-inverted);
  --qwe-rule-strong: var(--qwe-line-inverted);
}

[data-surface="media"] {
  --qwe-bg: var(--qwe-surface-media);
  --qwe-fg: var(--qwe-surface-media-ink);
  --qwe-fg-muted: var(--qwe-overlay-ink);
  --qwe-fg-faint: var(--qwe-overlay-ink);
  --qwe-rule: var(--qwe-line-inverted);
  --qwe-rule-strong: var(--qwe-line-inverted);
}

/*
 * A muted foreground that is correct on every surface, rather than one dark
 * grey that disappears on the inverted ones. The fallbacks above stand where
 * color-mix() is unavailable.
 */
@supports (color: color-mix(in srgb, currentColor 50%, transparent)) {
  [data-surface] {
    --qwe-fg-muted: color-mix(in srgb, var(--qwe-fg) 72%, var(--qwe-bg));
    --qwe-fg-faint: color-mix(in srgb, var(--qwe-fg) 54%, var(--qwe-bg));
    --qwe-rule: color-mix(in srgb, var(--qwe-fg) 20%, transparent);
    --qwe-rule-strong: color-mix(in srgb, var(--qwe-fg) 46%, transparent);
  }
}

[data-surface] {
  background-color: var(--qwe-bg);
  color: var(--qwe-fg);
}

/* =========================================================================
   3. Typography primitives
   ====================================================================== */

/*
 * Japanese line breaking.
 *
 * Two groups, because they need opposite things.
 *
 * A short display heading is a phrase: keep-all stops it splitting mid-run,
 * and `balance` evens out the line lengths so a two-line title does not leave
 * one word alone on the second line.
 *
 * A sentence is not a phrase. Setting keep-all on running text makes the whole
 * sentence one unbreakable run, so the browser treats every line as an overflow
 * and — with `overflow-wrap: anywhere` — breaks wherever it likes, putting 。and
 * ー at the start of a line. That is the fault this pair of rules replaced:
 * measured on the KAGURA pages it produced 13 breaks that no Japanese typesetter
 * would allow. Running text therefore keeps `line-break: strict` (which enforces
 * 禁則処理) and asks for `pretty`, which reflows earlier lines rather than
 * leaving a lone 。on the last one.
 *
 * `break-word` still rescues a 40-character room name at 320px: unlike
 * `anywhere` it only breaks a run that would otherwise overflow the box, and it
 * does not tempt the browser into breaking well-fitting text.
 */
.qwe-section__title,
.qwe-hero__title,
.qwe-card__title,
.qwe-room-card__name,
.qwe-room-detail__title,
.qwe-plan-card__name,
.qwe-plan-detail__notes-title,
.qwe-planlink__name,
.qwe-access__heading,
.qwe-access__subheading,
.qwe-brand__name,
.qwe-footer__name,
.qwe-prose h1,
.qwe-prose h2,
.qwe-prose h3,
.qwe-prose h4 {
  /* Japanese headings break between characters — that is normal setting, and
     `strict` still keeps 。and small kana off the start of a line. keep-all
     would make the heading one unbreakable run, so a title too wide for 320px
     would spill its last character onto a line of its own
     ("この客室で選べるプラ / ン"). `balance` evens the lines instead. */
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: balance;
  font-family: var(--qwe-font-display);
  font-weight: var(--qwe-weight-display);
  line-height: var(--qwe-leading-display);
  letter-spacing: var(--qwe-tracking-display);
}

/* Sentence-length text that still wants the display face. */
.qwe-section__lead,
.qwe-hero__lead,
.qwe-room-detail__subtitle,
.qwe-faq__question-text {
  line-break: strict;
  overflow-wrap: break-word;
  /* pretty は英文の最終行を守るための指定で、和文では効かなかった。実測で
     「。朝は、谷の音を聞きながら。」の最終行が段の 11% しか埋めていない。
     balance は行数を揃えるので、短い導入文では最終行が取り残されない。
     行数の上限を超える長文には効かないが、そこは元から孤立しない。 */
  text-wrap: balance;
  font-family: var(--qwe-font-display);
  font-weight: var(--qwe-weight-display);
  line-height: var(--qwe-leading-display);
  letter-spacing: var(--qwe-tracking-display);
}

.qwe-section__title,
.qwe-hero__title {
  font-size: var(--qwe-size-h2);
}

.qwe-hero__title {
  font-size: var(--qwe-size-h1);
}

.qwe-card__title,
.qwe-room-card__name,
.qwe-plan-card__name,
.qwe-planlink__name,
.qwe-access__heading {
  font-size: var(--qwe-size-h3);
}

.qwe-room-detail__title {
  font-size: var(--qwe-size-h1);
}

.qwe-room-detail__subtitle,
.qwe-access__subheading,
.qwe-plan-detail__notes-title {
  font-size: var(--qwe-size-h4);
}

.qwe-section__lead,
.qwe-hero__lead {
  font-size: var(--qwe-size-h4);
  font-family: var(--qwe-font-body);
  font-weight: var(--qwe-weight-body);
  line-height: var(--qwe-leading-body);
  max-width: var(--qwe-measure);
}

/* The small line above a heading. Theme wording and ornament only. */
.qwe-section__eyebrow,
.qwe-hero__eyebrow,
.qwe-card__label,
.qwe-room-card__number,
.qwe-room-detail__number,
.qwe-sticky__phone-label {
  font-family: var(--qwe-font-label);
  font-size: var(--qwe-size-label);
  letter-spacing: var(--qwe-tracking-label);
  line-height: var(--qwe-leading-display);
  text-transform: uppercase;
  color: var(--qwe-fg-muted);
}

/* Notes never drop below 16px; the token enforces the floor. */
.qwe-section__note,
.qwe-spec__note,
.qwe-price__note,
.qwe-gallery__note,
.qwe-booking__handoff,
.qwe-booking__note,
.qwe-image-notes__item,
.qwe-plan-detail__media-note,
.qwe-plan-detail__booking-note,
.qwe-footer__note,
.qwe-access__phone-hours,
.qwe-archive__empty,
.qwe-search__empty,
.qwe-search__count,
.qwe-room-list__empty {
  font-size: var(--qwe-size-note);
  line-height: var(--qwe-leading-body);
  color: var(--qwe-fg-muted);
  /* 導入文と同じ理由。「実在する宿の情報ではありません。」の最終行が
     段の 9% しか埋めていなかった。 */
  text-wrap: balance;
}

/* Editor content. */
.qwe-prose {
  max-width: var(--qwe-measure);
}

.qwe-prose > * + * {
  margin-block-start: var(--qwe-gap);
}

.qwe-prose h2 { font-size: var(--qwe-size-h3); }
.qwe-prose h3,
.qwe-prose h4 { font-size: var(--qwe-size-h4); }

.qwe-prose ul,
.qwe-prose ol {
  padding-inline-start: var(--qwe-gap);
}

.qwe-prose ul { list-style: disc; }
.qwe-prose ol { list-style: decimal; }

.qwe-prose li + li {
  margin-block-start: var(--qwe-gap-tight);
}

.qwe-prose blockquote {
  padding-inline-start: var(--qwe-gap);
  border-inline-start: var(--qwe-border-width) solid var(--qwe-rule);
  color: var(--qwe-fg-muted);
}

.qwe-prose table {
  width: 100%;
  border-collapse: collapse;
}

.qwe-prose th,
.qwe-prose td {
  padding: var(--qwe-gap-tight);
  border-block-end: var(--qwe-border-width) solid var(--qwe-rule);
  text-align: start;
  vertical-align: top;
}

/* A wide table scrolls inside itself; the page never scrolls sideways. */
.qwe-prose > table {
  display: block;
  overflow-x: auto;
}

.qwe-prose a,
.qwe-link,
.qwe-faq__answer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: var(--qwe-border-width);
}

/* =========================================================================
   4. Focus and motion
   --------------------------------------------------------------------------
   The ring is drawn in currentColor so it stays visible on the inverted and
   media surfaces without a second token.
   ====================================================================== */

:focus-visible {
  outline: calc(var(--qwe-border-width) * 2) solid currentColor;
  outline-offset: calc(var(--qwe-border-width) * 2);
}

/* Never remove the ring without replacing it. */
:focus:not(:focus-visible) {
  outline: none;
}

/*
 * Restraint is the house style. Interactive elements change opacity and colour
 * on a single short curve, and nothing on this site moves on its own: there are
 * no keyframes in this file, no parallax, no scroll-triggered reveal. Luxury is
 * not produced by animation volume.
 */
a,
button,
summary,
.qwe-cta,
.qwe-button {
  transition:
    opacity var(--qwe-duration) var(--qwe-ease),
    background-color var(--qwe-duration) var(--qwe-ease),
    border-color var(--qwe-duration) var(--qwe-ease),
    color var(--qwe-duration) var(--qwe-ease);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   5. Media
   --------------------------------------------------------------------------
   qwe_image() emits <div class="qwe-image qwe-image--<slot>" style="aspect-
   ratio:var(--qwe-ratio-…)"><img class="qwe-image__img" style="object-position:
   …"></div>. The wrapper carries the ratio so nothing reflows while a
   photograph loads; the image carries the facility's focal point.
   ====================================================================== */

.qwe-image {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: var(--qwe-rule);
}

.qwe-image__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * IA §5-2. A facility's photographs arrive at whatever brightness they arrive
   * at, so darkening them in CSS produces a per-facility tuning job that never
   * ends. This declaration is here to win over any design system that tries:
   * components.css loads after muse.css / kagura.css.
   */
  filter: none;
}

/* An intentionally empty ratio box (qwe_image_placeholder). No icon, no text. */
.qwe-image--empty {
  background-color: var(--qwe-rule);
}

/* Concept-image notices travel with the pictures they describe. */
/* A band of its own, so it takes the band gutter and lines up with the column
   above it. */
.qwe-image-notes {
  padding-inline: var(--qwe-gutter);
  padding-block-end: var(--qwe-section-y);
}

.qwe-image-notes__item + .qwe-image-notes__item {
  margin-block-start: var(--qwe-gap-tight);
}

/* =========================================================================
   6. Controls
   --------------------------------------------------------------------------
   Two class families reach this layer — .qwe-cta (sections, rooms, access) and
   .qwe-button (nav, search, 404, plan detail). They are one control with two
   names, so they are styled together rather than allowed to drift apart. See
   the handover note: the vocabulary should be unified in PHP later.
   ====================================================================== */

.qwe-cta,
.qwe-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--qwe-gap-tight) / 3);
  min-height: var(--qwe-tap);
  min-width: var(--qwe-tap);
  padding: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap);
  border: var(--qwe-border-width) solid transparent;
  border-radius: var(--qwe-radius);
  background: none;
  font-family: var(--qwe-font-label);
  font-size: var(--qwe-size-body);
  line-height: var(--qwe-leading-display);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* A long booking label wraps inside the button instead of widening it.
     §5: keep-all is not paired with overflow-wrap — the pair breaks 禁則. */
  max-width: 100%;
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.qwe-cta__label,
.qwe-cta__sub {
  display: block;
  min-width: 0;
}

.qwe-cta__sub {
  font-size: var(--qwe-size-note);
  opacity: 0.82;
}

/* Filled: the one action the page wants. */
.qwe-cta--primary,
.qwe-cta--action,
.qwe-button--book,
.qwe-button--action,
.qwe-booking__button {
  background-color: var(--qwe-accent-action);
  color: var(--qwe-accent-action-ink);
  border-color: var(--qwe-accent-action);
}

/* Outlined: everything else. */
.qwe-cta--secondary,
.qwe-button:not(.qwe-button--book):not(.qwe-button--action) {
  color: var(--qwe-fg);
  border-color: var(--qwe-rule-strong);
}

.qwe-cta:hover,
.qwe-button:hover {
  opacity: 0.82;
}

.qwe-cta:active,
.qwe-button:active {
  opacity: 0.7;
}

/* =========================================================================
   7. Skip link and the temporary notice
   ====================================================================== */

.qwe-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.qwe-skip:focus,
.qwe-skip:focus-visible {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--qwe-gap-tight) var(--qwe-gap);
  overflow: visible;
  clip-path: none;
  min-height: var(--qwe-tap);
  display: inline-flex;
  align-items: center;
  background-color: var(--qwe-surface-inverted);
  color: var(--qwe-surface-inverted-ink);
  text-decoration: none;
}

.qwe-notice {
  padding: var(--qwe-gap-tight) var(--qwe-section-x);
  border-block-end: var(--qwe-border-width) solid var(--qwe-rule);
}

.qwe-notice__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap-tight);
  max-width: var(--qwe-content-max);
  margin-inline: auto;
  font-size: var(--qwe-size-note);
}

.qwe-notice__kind {
  flex: 0 0 auto;
  padding: 0 calc(var(--qwe-gap-tight) / 2);
  border: var(--qwe-border-width) solid currentColor;
  font-size: var(--qwe-size-note);
  line-height: var(--qwe-leading-display);
}

.qwe-notice__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* =========================================================================
   8. Site header, brand, navigation
   --------------------------------------------------------------------------
   The header does not stick and the menu has no toggle: parts/nav.php wraps
   the list instead, so the menu survives a failed script and a guest can see
   at 320px whether this property has an onsen page at all. The header grows
   taller on a phone as a result, which is fine — nothing is pinned to the top.
   ====================================================================== */

.qwe-header {
  padding: var(--qwe-gap-tight) var(--qwe-section-x);
  border-block-end: var(--qwe-border-width) solid var(--qwe-rule);
}

.qwe-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--qwe-gap-tight) var(--qwe-gap);
  max-width: var(--qwe-content-max);
  margin-inline: auto;
}

.qwe-brand {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 3);
  min-height: var(--qwe-tap);
  justify-content: center;
  text-decoration: none;
}

.qwe-brand__logo {
  display: block;
  height: var(--qwe-logo-height);
}

/* A wide logo must not be cropped square by the slot's object-fit: cover. */
.qwe-brand__logo .qwe-image__img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.qwe-brand__sub {
  font-family: var(--qwe-font-label);
  font-size: var(--qwe-size-note);
  letter-spacing: var(--qwe-tracking-label);
  line-height: var(--qwe-leading-display);
  color: var(--qwe-fg-muted);
}

.qwe-brand__name {
  font-size: var(--qwe-size-h4);
  min-width: 0;
}

.qwe-nav {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
}

.qwe-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--qwe-gap);
}

.qwe-nav__item {
  min-width: 0;
}

.qwe-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--qwe-tap);
  font-size: var(--qwe-size-body);
  text-decoration: none;
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}

.qwe-nav__link:hover {
  opacity: 0.72;
}

.qwe-nav__link--current,
.qwe-nav__link--section {
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: var(--qwe-border-width);
}

/*
 * The current entry is marked by the underline and by aria-current, not by the
 * accent colour: --qwe-accent-primary is one of the two tokens a facility may
 * set, and a facility that picks a pale one would otherwise turn the entry a
 * guest is standing on into the least readable word in the menu.
 */
.qwe-nav__link--current {
  font-weight: var(--qwe-weight-display);
}

.qwe-header__book {
  order: 3;
  flex: 0 0 auto;
}

/* 最低価格をヘッダーに出す型(星のや東京)。basic.price_range_in_header が
   true の施設だけ出る。価格は本文であって装飾ではないので、この設計が自らに
   課している 16px の下限を守る(--qwe-size-note)。--qwe-size-label の 12px は
   使わない。 */
/* 価格を出す型は2段にする。1段目に宿名・価格・予約、2段目にナビ。
   画面幅によらずこの並びにする。900px以上でだけ2段にしたところ、768pxでは
   価格→ナビ→予約の3段になり、予約ボタンだけが左端の3行目へ落ちていた(実測)。
   ナビを丸ごと次の行へ送ってしまえば、予約ボタンは必ず価格の隣に残る。 */
.qwe-header--with-price .qwe-nav {
  order: 5;
  flex: 1 0 100%;
}
.qwe-header--with-price .qwe-nav__list {
  justify-content: flex-start;
}

.qwe-header__price {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--qwe-size-note);
  line-height: 1.35;
  color: var(--qwe-ink-muted);
  text-align: end;
}

@media (min-width: 900px) {
  .qwe-nav {
    order: 2;
    flex: 1 1 auto;
  }
  .qwe-nav__list {
    justify-content: flex-end;
  }
  .qwe-header__price {
    order: 3;
  }
  .qwe-header__book {
    order: 4;
  }
}

/* =========================================================================
   9. Breadcrumb
   ====================================================================== */

.qwe-breadcrumb {
  padding: var(--qwe-gap-tight) var(--qwe-section-x);
}

.qwe-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap-tight);
  max-width: var(--qwe-content-max);
  margin-inline: auto;
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-breadcrumb__item {
  display: flex;
  align-items: baseline;
  gap: var(--qwe-gap-tight);
  min-width: 0;
}

.qwe-breadcrumb__item + .qwe-breadcrumb__item::before {
  content: "/";
  flex: 0 0 auto;
  color: var(--qwe-fg-faint);
}

/* A long room name wraps here rather than pushing the page sideways (IA §9). */
.qwe-breadcrumb__link,
.qwe-breadcrumb__current {
  min-width: 0;
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}

.qwe-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--qwe-tap);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.qwe-breadcrumb__current {
  color: var(--qwe-fg);
}

/* =========================================================================
   10. The section frame
   --------------------------------------------------------------------------
   Every block of the site is a <section class="qwe-section" data-surface="…">.
   Some carry a .qwe-section__inner (the preset renderers and the hero), some
   place their children directly (page.php, the archives, room and plan detail).
   Both shapes have to work, so the frame pads the section and constrains
   whatever sits inside it, one level down.
   ====================================================================== */

.qwe-section {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap);
  padding-block: var(--qwe-section-y);
  padding-inline: var(--qwe-gutter);
}

/*
 * The band pads; the child fills what is left. Nothing here centres a child,
 * because a child that carries its own --qwe-measure would then be centred on
 * the page while the heading above it stayed at the left edge — measured at
 * 344–362px of phantom start margin on every plan and room detail page. Line
 * length is a property of the text block; the position of the column is a
 * property of the band. They are set in different places on purpose.
 */
.qwe-section > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
}

.qwe-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap);
  min-width: 0;
}

.qwe-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
  min-width: 0;
}

.qwe-section__body {
  max-width: var(--qwe-measure);
}

.qwe-section__body > * + * {
  margin-block-start: var(--qwe-gap);
}

.qwe-section__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qwe-gap-tight);
}

.qwe-section__note {
  max-width: var(--qwe-measure);
}

/*
 * Bands that carry very little.
 *
 * The full --qwe-section-y above and below a two-line answer is what turned a
 * plan detail page into 4,727px of mostly air. --qwe-section-y-tight is the
 * design system's answer for that case; these rules decide which bands are in
 * it, structurally, because no template declares the case yet. They cover the
 * shapes that measurably suffer, and nothing else:
 *
 * 1. A band whose own children are a heading and exactly one block — the
 *    "what is included" / "charged separately" / "conditions" sections of a
 *    detail page, and a page head that is only a title. Preset sections wrap
 *    their contents in .qwe-section__inner and so never match: a story with a
 *    heading and prose is not a thin band and keeps the full rhythm.
 * 2. A band whose list turned out to hold a single item — one question, one
 *    room, one card. The facility's input decides that, not the template.
 */
.qwe-section:has(> .qwe-section__head:first-child:nth-last-child(2)),
.qwe-section:has(> .qwe-section__head:only-child),
.qwe-section:has(.qwe-faq__item:only-child),
.qwe-section:has(.qwe-entity-list__item:only-child),
.qwe-section:has(.qwe-cards__item:only-child) {
  padding-block: var(--qwe-section-y-tight);
}

/*
 * 節と節のあいだのリズム。
 *
 * 実測（2026-08-30、1440px）：神楽のトップは9節すべてが上下144pxで、
 * 10,792pxのあいだ節の間隔が288pxのまま一度も変わらなかった。MUSEも8節すべて
 * 130px。間隔が一定だと、どこが一続きでどこが切れ目なのかを画面が何も
 * 言わないので、長いページが「同じ告知の積み重ね」に見える。
 *
 * 色の面（写真・墨・苔）はそれ自身の下余白で終わっている。その下にさらに紙の
 * 全余白を積むと、ページ中で最大の空白がそこにでき、色の面が本文から切り
 * 離される。色の変わり目は境目をすでに描いているので、そこは詰めてよい。
 * 一色の紙が続くところは、境目が空白しかないので全余白のまま残す。
 *
 * 結果として神楽とMUSEでリズムが変わる：面の回り方（sections.php）が
 * 違うので、同じ1本の規則から違う拍が出る。これは意図した分岐である。
 */
[data-surface="media"] + .qwe-section,
[data-surface="inverted"] + .qwe-section,
[data-surface="accent"] + .qwe-section {
  padding-block-start: var(--qwe-section-y-tight);
}

/*
 * A heading inside a detail article is subordinate to that page's h1, and
 * --qwe-size-h2 (54px in KAGURA, 74px in MUSE) over one line of 16px text
 * inverts the hierarchy it is meant to express.
 */
.qwe-plan-detail > .qwe-section:not(.qwe-section--plan-head) > .qwe-section__head > .qwe-section__title,
.qwe-room-detail > .qwe-section:not(.qwe-room-detail__intro) > .qwe-section__head > .qwe-section__title,
.qwe-room-detail > .qwe-section:not(.qwe-room-detail__intro) > .qwe-section__title {
  font-size: var(--qwe-size-h3);
}

/*
 * A section that is only a heading hands its lower space to the section that
 * follows, so a title and the list it introduces do not read as two blocks with
 * a hole between them.
 */
.qwe-section--archive-head:not(:last-child),
.qwe-page__head:not(:last-child),
.qwe-section--plan-head:not(:last-child) {
  padding-block-end: 0;
}

/* =========================================================================
   11. Hero
   --------------------------------------------------------------------------
   The photograph is laid in behind the text and is never filtered. The scrim
   is the single legibility mechanism (--qwe-overlay-scrim).
   ====================================================================== */

.qwe-hero {
  position: relative;
  isolation: isolate;
  justify-content: flex-end;
  min-height: var(--qwe-hero-min);
  overflow: hidden;
}

.qwe-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: none;
  margin: 0;
}

.qwe-hero__media .qwe-image,
.qwe-hero__image {
  width: 100%;
  height: 100%;
}

.qwe-hero__scrim {
  position: absolute;
  inset: 0;
  background-image: var(--qwe-overlay-scrim);
  pointer-events: none;
}

.qwe-hero__inner {
  position: relative;
}

.qwe-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
  /* The block follows the display measure so the title can hold its own line
     breaks; the lead inside it is still capped at the reading measure by its
     own rule, so body copy does not stretch with it. */
  max-width: var(--qwe-measure-display);
  min-width: 0;
}

.qwe-hero__text .qwe-booking,
.qwe-hero__text .qwe-section__ctas {
  margin-block-start: var(--qwe-gap-tight);
}

/* =========================================================================
   12. Cards (highlight) and the feature pair
   ====================================================================== */

.qwe-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qwe-grid-min)), 1fr));
  gap: var(--qwe-gap);
}

.qwe-cards__item {
  min-width: 0;
}

.qwe-card {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
  height: 100%;
  min-width: 0;
  text-decoration: none;
}

.qwe-card__media {
  order: -1;
}

.qwe-card__text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
  min-width: 0;
}

.qwe-card__note {
  color: var(--qwe-fg-muted);
}

a.qwe-card:hover .qwe-card__title {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/*
 * A card that has a photograph is the photograph.
 *
 * Without this the highlight band is two 93px strips of text, which is the one
 * block the reference leans on hardest. The picture fills the card, the text
 * sits on it at the bottom, and legibility comes from --qwe-overlay-scrim on a
 * pseudo-element between the two. The photograph itself is never filtered.
 *
 * The height is an aspect ratio taken from the ratio tokens rather than a
 * pixel floor, so the card is proportional at 320px and at 1440px alike; the
 * ratio is set on the grid item, whose automatic minimum size lets a long
 * caption grow the card instead of spilling out of it. A card with no
 * photograph is untouched and stays a text block.
 */
.qwe-cards__item:has(.qwe-card__media) {
  aspect-ratio: var(--qwe-ratio-landscape);
}

.qwe-cards__item:has(.qwe-card__media) .qwe-card {
  position: relative;
  isolation: isolate;
  justify-content: flex-end;
  gap: 0;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  /* On a photograph the only safe ink is the overlay ink; a muted grey that
     reads on paper disappears here. */
  --qwe-fg: var(--qwe-overlay-ink);
  --qwe-fg-muted: var(--qwe-overlay-ink);
  --qwe-fg-faint: var(--qwe-overlay-ink);
  color: var(--qwe-overlay-ink);
}

/* Both axes are stated so the ratio box qwe_image() writes inline stops
   applying: here the card decides the shape, not the slot. */
.qwe-cards__item:has(.qwe-card__media) .qwe-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.qwe-cards__item:has(.qwe-card__media) .qwe-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--qwe-overlay-scrim);
  pointer-events: none;
}

.qwe-cards__item:has(.qwe-card__media) .qwe-card__text {
  position: relative;
  gap: calc(var(--qwe-gap-tight) / 2);
  padding: var(--qwe-gap);
}

/*
 * The step between the two cards of an editorial pair. --qwe-stagger is 0 by
 * default, so a design system that does not stagger says nothing here; MUSE
 * binds it. Desktop only — on a phone the cards are already stacked and the
 * offset would read as an uneven gap.
 */
@media (min-width: 900px) {
  .qwe-cards__item:has(.qwe-card__media):nth-child(even) {
    margin-block-start: var(--qwe-stagger);
  }
}

.qwe-feature__media,
.qwe-feature__text {
  min-width: 0;
}

.qwe-feature__text {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap);
}

/*
 * The photograph beside its text.
 *
 * The grid goes on .qwe-section__inner, not on the section. inc/display/
 * sections.php puts every child of a preset section inside that wrapper, so a
 * grid declared on the section had exactly one item to place: the wrapper went
 * into the first column, the second column stayed empty for the width of a
 * whole photograph, and the media and the text stacked inside the first one.
 * Measured at 1440px that was a 612px hole down the right of every KAGURA
 * onsen and dining band.
 *
 * The columns are uneven on purpose — the picture leads and the text follows,
 * which is the proportion the reference sets at 1.1fr / 0.9fr. The column gap
 * is a multiple of the rhythm token rather than a length of its own.
 */
/*
 * 写真を持たない帯の組み方（2026-08-30）。
 *
 * 写真の無い施設（いさり＝主写真1枚だけの宿）では、見出しと本文が版面の左半分に
 * 積まれ、**右の55%が最後まで空いたまま**だった。実測で全5,321px、画像1枚。
 * これは「間」ではなく「写真が無いから埋まらなかった穴」に見える。
 *
 * まずいのは見た目ではなく、**売り文句と逆のことを証明してしまう**ことである。
 * この施設は「客室写真が揃っていなくても公開できます」を示すために置いてある。
 * その見本が痩せて見えたら、宿のオーナーは「写真が無いとこうなるのか」と読む。
 *
 * 直し方は写真を足すことではない（足したらこの施設を置いた意味が消える）。
 * **写真がある帯と同じ拍**を、文字だけで作る。見出しが左、本文が右。
 * 写真あり=1.1fr/0.9fr と揃えず 0.9fr/1.1fr にするのは、絵の代わりに
 * 本文が場を持つ側になるため。
 */
@media (min-width: 900px) {
  .qwe-section--feature-plain > .qwe-section__inner > .qwe-feature__text,
  .qwe-section--prose > .qwe-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: calc(var(--qwe-gap) * 3);
    row-gap: var(--qwe-gap);
    align-items: start;
  }

  /* 本文は右の段いっぱいに置く。左の段は見出しの場所。 */
  .qwe-section--feature-plain .qwe-section__body,
  .qwe-section--prose .qwe-section__body {
    max-width: none;
  }

  /* 行き先（あれば）は本文の下に続ける。見出しの側へ回さない。 */
  .qwe-section--feature-plain > .qwe-section__inner > .qwe-feature__text > .qwe-section__ctas,
  .qwe-section--prose > .qwe-section__inner > .qwe-section__ctas {
    grid-column: 2;
  }
}

@media (min-width: 900px) {
  .qwe-section--feature:not(.qwe-section--feature-plain) > .qwe-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: calc(var(--qwe-gap) * 3);
    row-gap: var(--qwe-gap);
    align-items: center;
  }

  /* The concept-image notice belongs to the band, not to one column. */
  .qwe-section--feature:not(.qwe-section--feature-plain) > .qwe-section__inner > .qwe-section__note {
    grid-column: 1 / -1;
  }

  /*
   * Two feature bands in a row are the documented KAGURA pattern (the bath and
   * the food). The second one mirrors, so the page reads as a rhythm instead of
   * two identical rows. Nothing is reordered for a screen reader: only the
   * visual column swaps, and the text keeps its DOM order either way.
   */
  .qwe-section--feature + .qwe-section--feature:not(.qwe-section--feature-plain) > .qwe-section__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .qwe-section--feature + .qwe-section--feature:not(.qwe-section--feature-plain) > .qwe-section__inner > .qwe-feature__media {
    grid-column: 2;
    grid-row: 1;
  }
  .qwe-section--feature + .qwe-section--feature:not(.qwe-section--feature-plain) > .qwe-section__inner > .qwe-feature__text {
    grid-column: 1;
    grid-row: 1;
  }
}

/* =========================================================================
   13. Entity list (the room / plan teaser on the home page)
   ====================================================================== */

.qwe-entity-list {
  display: grid;
  gap: var(--qwe-gap);
}

.qwe-entity-list__item {
  min-width: 0;
}

.qwe-entity-list__link {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
  min-height: var(--qwe-tap);
  min-width: 0;
  text-decoration: none;
}

.qwe-entity-list__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
  min-width: 0;
}

/*
 * The teaser name sits between the band title and the note, so it takes the
 * same step as .qwe-room-card__name. At --qwe-size-h4 it was 18px of MUSE's
 * heavy display face under a 74px title: black, small, and outside the
 * hierarchy the rest of the page keeps.
 */
.qwe-entity-list__name {
  font-family: var(--qwe-font-display);
  font-size: var(--qwe-size-h3);
  line-height: var(--qwe-leading-display);
  /* The heading rule of §3, not keep-all: at the h3 step a long plan name has
     to be allowed to break between characters, or its last character drops
     onto a line of its own at 320px. `strict` still holds 禁則処理. */
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.qwe-entity-list__note {
  color: var(--qwe-fg-muted);
}

.qwe-entity-list__link:hover .qwe-entity-list__name {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* With photographs the list becomes a row of cards; without, it stays a list. */
.qwe-entity-list:has(.qwe-entity-list__media) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qwe-grid-min)), 1fr));
}

.qwe-entity-list:not(:has(.qwe-entity-list__media)) .qwe-entity-list__item {
  border-block-start: var(--qwe-border-width) solid var(--qwe-rule);
  padding-block-start: var(--qwe-gap-tight);
}

/* =========================================================================
   14. Definition rows, benefit lists, cautions, timeline
   ====================================================================== */

/*
 * A definition list is text, so it is measured like text.
 *
 * Left to the full column its hairlines ran 1,267px for values whose longest
 * ink was 551px: the distance from a value to the end of its own rule was
 * greater than the distance between two values, and the page read as an
 * inventory sheet. The cap is the label column plus one measure — the same
 * line length every other block on the page is held to — so the rule stops
 * where the reading stops.
 */
.qwe-spec {
  display: flex;
  flex-direction: column;
  max-width: calc(var(--qwe-spec-label) + var(--qwe-gap) + var(--qwe-measure));
  border-block-start: var(--qwe-border-width) solid var(--qwe-rule);
}

.qwe-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap);
  padding-block: var(--qwe-gap-tight);
  border-block-end: var(--qwe-border-width) solid var(--qwe-rule);
  min-width: 0;
}

.qwe-spec__label,
.qwe-spec__term {
  min-width: 0;
  font-family: var(--qwe-font-label);
  color: var(--qwe-fg-muted);
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}

.qwe-spec__value {
  min-width: 0;
  margin: 0;
}

.qwe-spec__note {
  display: block;
  margin-block-start: calc(var(--qwe-gap-tight) / 2);
}

@media (min-width: 600px) {
  .qwe-spec__row {
    grid-template-columns: minmax(0, var(--qwe-spec-label)) minmax(0, 1fr);
  }
}

/* qwe_render_item_list(): MUSE draws a checked list, KAGURA one sentence. */
.qwe-list--checked,
.qwe-plan-inclusions--check {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
}

.qwe-list--checked .qwe-list__item,
.qwe-plan-inclusions--check .qwe-plan-inclusions__item {
  position: relative;
  padding-inline-start: var(--qwe-gap);
  min-width: 0;
}

/* The mark is drawn, not typed, so it needs no glyph from the body face. */
.qwe-list--checked .qwe-list__item::before,
.qwe-plan-inclusions--check .qwe-plan-inclusions__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.42em;
  width: 0.34em;
  height: 0.62em;
  border-inline-end: var(--qwe-border-width) solid var(--qwe-accent-primary);
  border-block-end: var(--qwe-border-width) solid var(--qwe-accent-primary);
  transform: rotate(45deg);
}

.qwe-list--sentence,
.qwe-plan-inclusions--sentence {
  max-width: var(--qwe-measure);
}

/* Cautions. Never run together into one sentence: two cautions read as one. */
.qwe-notelist {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
  max-width: var(--qwe-measure);
}

.qwe-notelist__item {
  position: relative;
  padding-inline-start: var(--qwe-gap);
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-notelist__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: calc(var(--qwe-gap-tight) / 2);
  border-block-start: var(--qwe-border-width) solid currentColor;
}

/* The shape of a day. Rows keep the order the facility entered them.
   Measured like .qwe-spec, and for the same reason. */
.qwe-timeline {
  display: flex;
  flex-direction: column;
  max-width: calc(var(--qwe-spec-label) + var(--qwe-gap) + var(--qwe-measure));
}

.qwe-timeline__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap);
  padding-block: var(--qwe-gap-tight);
  border-block-start: var(--qwe-border-width) solid var(--qwe-rule);
  min-width: 0;
}

.qwe-timeline__item:last-child {
  border-block-end: var(--qwe-border-width) solid var(--qwe-rule);
}

.qwe-timeline__time {
  font-family: var(--qwe-font-label);
  letter-spacing: var(--qwe-tracking-label);
  color: var(--qwe-fg-muted);
  min-width: 0;
}

.qwe-timeline__text {
  min-width: 0;
}

@media (min-width: 600px) {
  .qwe-timeline__item {
    grid-template-columns: minmax(0, var(--qwe-spec-label)) minmax(0, 1fr);
  }
}

/* =========================================================================
   15. Questions and answers
   --------------------------------------------------------------------------
   <details> / <summary>: openable with the keyboard, with a screen reader and
   with JavaScript switched off.
   ====================================================================== */

.qwe-faq {
  display: flex;
  flex-direction: column;
  border-block-start: var(--qwe-border-width) solid var(--qwe-rule);
}

.qwe-faq__item {
  border-block-end: var(--qwe-border-width) solid var(--qwe-rule);
}

.qwe-faq__question {
  display: flex;
  align-items: center;
  gap: var(--qwe-gap-tight);
  min-height: var(--qwe-tap);
  padding-block: var(--qwe-gap-tight);
  padding-inline-end: var(--qwe-gap);
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: var(--qwe-size-h4);
  min-width: 0;
}

.qwe-faq__question::-webkit-details-marker {
  display: none;
}

.qwe-faq__question-text {
  min-width: 0;
  flex: 1 1 auto;
}

/* A drawn plus that becomes a minus. Two rules, one of which rotates away. */
.qwe-faq__question::before,
.qwe-faq__question::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  width: var(--qwe-gap-tight);
  border-block-start: var(--qwe-border-width) solid currentColor;
  transform: translateY(-50%);
}

.qwe-faq__question::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform var(--qwe-duration) var(--qwe-ease);
}

/* Open: the upright rule lies down and the mark reads as a minus. */
.qwe-faq__item[open] .qwe-faq__question::after {
  transform: translateY(-50%) rotate(0deg);
}

.qwe-faq__answer {
  padding-block-end: var(--qwe-gap);
  max-width: var(--qwe-measure);
  color: var(--qwe-fg-muted);
}

.qwe-faq__answer > * + * {
  margin-block-start: var(--qwe-gap-tight);
}

/* =========================================================================
   16. Access
   ====================================================================== */

.qwe-access {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap);
  min-width: 0;
}

.qwe-access__summary,
.qwe-access__address,
.qwe-access__parking-text {
  max-width: var(--qwe-measure);
  /* 住所は空白の位置で折れるので、375pxで「1-1」だけが最終行に残っていた。 */
  text-wrap: balance;
}

/* 到着と出発の行(2026-08-30 追加)も送迎・駐車場と同じ組。この3つだけが
   「小見出し＋表」という同じ形をしているので、間隔も同じでなければならない。
   足す前は display:block / gap:normal で、この節の中でここだけ小見出しと表が
   詰まっていた。 */
.qwe-access__arrival,
.qwe-access__shuttle,
.qwe-access__parking {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
}

.qwe-access__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qwe-gap-tight);
}

.qwe-access__phone {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap-tight);
}

.qwe-access__phone-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--qwe-tap);
  font-size: var(--qwe-size-h4);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* =========================================================================
   17. Booking block
   ====================================================================== */

.qwe-booking {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qwe-gap-tight);
  min-width: 0;
}

.qwe-booking__handoff,
.qwe-booking__note {
  max-width: var(--qwe-measure);
}

.qwe-booking__channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qwe-gap-tight) var(--qwe-gap);
}

.qwe-booking__channel-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--qwe-tap);
  font-size: var(--qwe-size-note);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* =========================================================================
   18. Galleries
   ====================================================================== */

.qwe-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
  min-width: 0;
}

.qwe-gallery__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qwe-grid-min)), 1fr));
  gap: var(--qwe-gap-tight);
}

.qwe-gallery__item {
  min-width: 0;
}

@media (min-width: 900px) {
  .qwe-gallery[data-columns="1"] .qwe-gallery__list { grid-template-columns: minmax(0, 1fr); }
  .qwe-gallery[data-columns="2"] .qwe-gallery__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qwe-gallery[data-columns="3"] .qwe-gallery__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qwe-gallery[data-columns="4"] .qwe-gallery__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================================
   19. Price
   ====================================================================== */

.qwe-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--qwe-gap-tight) / 2) calc(var(--qwe-gap-tight) / 2);
  min-width: 0;
}

.qwe-price__amount {
  font-family: var(--qwe-font-display);
  font-size: var(--qwe-size-h3);
  line-height: var(--qwe-leading-display);
  min-width: 0;
}

.qwe-price__unit,
.qwe-price__basis {
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-price__note {
  flex: 1 1 100%;
}

/*
 * The converted amount and its as-of date are built inside the yen figure by
 * qwe_price(), so without these rules they inherit the h3 display size and run
 * on as one line: "28,000円〜≈ US$1902026年8月1日時点の目安".
 * They become their own quieter lines under the amount instead. The date is a
 * note, so it keeps the 16px note size (§0-8) rather than shrinking.
 */
.qwe-price__amount:has(.qwe-price__secondary) {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: calc(var(--qwe-gap-tight) / 4);
}

.qwe-price__secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: calc(var(--qwe-gap-tight) / 4);
  font-family: var(--qwe-font-body);
  font-weight: var(--qwe-weight-body);
  font-size: var(--qwe-size-note);
  line-height: var(--qwe-leading-body);
  color: var(--qwe-fg-muted);
  min-width: 0;
}

.qwe-price__secondary-note {
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-price--on-request {
  font-size: var(--qwe-size-h4);
}

/* =========================================================================
   20. Rooms
   --------------------------------------------------------------------------
   Two layouts, chosen by the data and not by a colour: --gallery when the
   facility supplied photographs, --index when it did not (IA §13-6).
   ====================================================================== */

.qwe-room-list {
  display: grid;
  gap: var(--qwe-gap);
  min-width: 0;
}

.qwe-room-list--gallery {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qwe-grid-min)), 1fr));
}

.qwe-room-list--index {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-block-start: var(--qwe-border-width) solid var(--qwe-rule);
}

.qwe-room-list--index .qwe-room-list__item {
  padding-block: var(--qwe-gap);
  border-block-end: var(--qwe-border-width) solid var(--qwe-rule);
}

.qwe-room-list__item {
  min-width: 0;
}

@media (min-width: 900px) {
  .qwe-room-list--gallery[data-columns="1"] { grid-template-columns: minmax(0, 1fr); }
  .qwe-room-list--gallery[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qwe-room-list--gallery[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qwe-room-list--gallery[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.qwe-room-card {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
  height: 100%;
  min-width: 0;
}

.qwe-room-card__media {
  margin: 0;
  min-width: 0;
}

.qwe-room-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
  min-width: 0;
}

.qwe-room-card__name {
  min-width: 0;
}

/* The title is a real tap target, not only a heading. */
.qwe-room-card__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--qwe-tap);
  text-decoration: none;
}

.qwe-room-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.qwe-room-card__latin {
  font-family: var(--qwe-font-label);
  font-size: var(--qwe-size-note);
  letter-spacing: var(--qwe-tracking-label);
  color: var(--qwe-fg-muted);
}

.qwe-room-card__specline,
.qwe-room-card__status {
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-room-card__catch {
  max-width: var(--qwe-measure);
}

.qwe-room-card__price,
.qwe-room-card__more {
  margin-block-start: auto;
}

.qwe-room-card__more {
  padding-block-start: var(--qwe-gap-tight);
}

/* --- Room detail ------------------------------------------------------- */

.qwe-room-detail {
  display: block;
  min-width: 0;
}

/* The opening photograph runs the full width of the band it sits in.
   width:auto and the two margin-inline declarations are load-bearing — see
   .qwe-plan-detail__media. */
.qwe-room-detail__hero {
  width: auto;
  max-width: none;
  margin: 0;
  margin-inline: calc(var(--qwe-section-x) * -1);
  margin-inline: calc(50% - 50cqi);
}

.qwe-room-detail__head {
  min-width: 0;
}

.qwe-room-detail__latin {
  font-family: var(--qwe-font-label);
  font-size: var(--qwe-size-note);
  letter-spacing: var(--qwe-tracking-label);
  color: var(--qwe-fg-muted);
}

.qwe-room-detail__catch {
  font-size: var(--qwe-size-h3);
  max-width: var(--qwe-measure);
}

.qwe-room-detail__body,
.qwe-room-detail__signature {
  max-width: var(--qwe-measure);
}

.qwe-room-detail__body > * + *,
.qwe-room-detail__signature > * + * {
  margin-block-start: var(--qwe-gap);
}

.qwe-room-detail__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qwe-gap-tight);
  padding-block-start: var(--qwe-gap);
  border-block-start: var(--qwe-border-width) solid var(--qwe-rule);
  min-width: 0;
}

.qwe-room-detail__status {
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-room-detail__gallery,
.qwe-room-detail__plans,
.qwe-room-detail__facility,
.qwe-room-detail__others {
  min-width: 0;
}

.qwe-room-detail__floorplan .qwe-image {
  background: none;
}

.qwe-room-detail__floorplan .qwe-image__img {
  object-fit: contain;
}

.qwe-room-detail__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qwe-gap-tight);
}

/* Plans that accept this room. A minimal link list, not a second plan card. */
.qwe-planlink-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qwe-grid-min)), 1fr));
  gap: var(--qwe-gap);
}

.qwe-planlink {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
  min-width: 0;
}

.qwe-planlink__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--qwe-tap);
  text-decoration: none;
}

.qwe-planlink__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.qwe-planlink__meal {
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-planlink__catch {
  max-width: var(--qwe-measure);
}

/* =========================================================================
   21. Plans
   ====================================================================== */

.qwe-plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qwe-grid-min)), 1fr));
  gap: var(--qwe-gap);
  min-width: 0;
}

.qwe-plan-card {
  min-width: 0;
}

.qwe-plan-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
  height: 100%;
  min-width: 0;
  text-decoration: none;
}

.qwe-plan-card__media,
.qwe-plan-card__body,
.qwe-plan-card__name,
.qwe-plan-card__catch,
.qwe-plan-card__summary,
.qwe-plan-card__closed,
.qwe-plan-card__more {
  display: block;
  min-width: 0;
}

.qwe-plan-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
}

/* label_number and plan_badge are facility wording: they wrap at 320px. */
.qwe-plan-card__marks,
.qwe-plan-detail__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--qwe-gap-tight) / 2);
  min-width: 0;
}

.qwe-plan-card__number,
.qwe-plan-detail__number {
  font-family: var(--qwe-font-label);
  font-size: var(--qwe-size-note);
  letter-spacing: var(--qwe-tracking-label);
  color: var(--qwe-fg-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The accent draws the frame; the text keeps the surface's own foreground. */
.qwe-plan-card__badge,
.qwe-plan-detail__badge {
  padding: 0 calc(var(--qwe-gap-tight) / 2);
  border: var(--qwe-border-width) solid var(--qwe-accent-primary);
  color: var(--qwe-fg);
  font-size: var(--qwe-size-note);
  line-height: var(--qwe-leading-display);
  min-width: 0;
  overflow-wrap: anywhere;
}

.qwe-plan-card__summary,
.qwe-plan-card__closed {
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-plan-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap-tight);
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
  min-width: 0;
}

.qwe-plan-card__meta-item {
  min-width: 0;
}

.qwe-plan-card__more {
  margin-block-start: auto;
  padding-block-start: var(--qwe-gap-tight);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/*
 * A closed plan stays legible: it is muted, not greyed out to the point of
 * failing contrast, because a guest still has to be able to read why.
 */
.qwe-plan-card--closed .qwe-plan-card__link {
  opacity: 0.78;
}

.qwe-plan-card__link:hover .qwe-plan-card__name {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* --- Plan detail ------------------------------------------------------- */

.qwe-plan-detail {
  display: block;
  min-width: 0;
}

/*
 * Full bleed.
 *
 * width must go back to auto, or the negative margins only shift a 100%-wide
 * box sideways instead of widening it. The second margin-inline is the exact
 * one — half the band less half the column is the gutter, whatever the gutter
 * happens to be at this width. The first is the fallback for a browser without
 * container query units, and is right up to the point where the column reaches
 * its maximum.
 */
.qwe-plan-detail__media {
  width: auto;
  max-width: none;
  margin: 0;
  margin-inline: calc(var(--qwe-section-x) * -1);
  margin-inline: calc(50% - 50cqi);
}

/* The caption belongs to the column, not to the bleed, so it takes the band
   gutter — correct here because the figure spans the band. */
.qwe-plan-detail__media-note {
  padding-inline: var(--qwe-gutter);
  margin-block-start: var(--qwe-gap-tight);
}

.qwe-plan-detail__catch {
  font-size: var(--qwe-size-h3);
  max-width: var(--qwe-measure);
}

.qwe-plan-detail__summary,
.qwe-plan-detail__body {
  max-width: var(--qwe-measure);
}

.qwe-plan-detail__offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qwe-gap-tight);
  min-width: 0;
}

.qwe-plan-detail__discount,
.qwe-plan-detail__method {
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-plan-detail__closed {
  font-size: var(--qwe-size-h4);
}

.qwe-plan-detail__charges,
.qwe-plan-detail__cancel-list,
.qwe-plan-detail__notes-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
  max-width: var(--qwe-measure);
}

.qwe-plan-detail__charge,
.qwe-plan-detail__cancel-item,
.qwe-plan-detail__note {
  position: relative;
  padding-inline-start: var(--qwe-gap);
  min-width: 0;
}

.qwe-plan-detail__charge::before,
.qwe-plan-detail__cancel-item::before,
.qwe-plan-detail__note::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: calc(var(--qwe-gap-tight) / 2);
  border-block-start: var(--qwe-border-width) solid var(--qwe-rule-strong);
}

/*
 * This paragraph has two jobs. facility_standard writes the whole rule as one
 * sentence and it is the only thing in the block; the itemised type writes a
 * label here and the term in the paragraph below. Only the second case is
 * styled as a label — setting a sentence in the label face would be worse than
 * the fault it fixes.
 */
.qwe-plan-detail__cancel-type,
.qwe-plan-detail__cancel-term {
  font-size: var(--qwe-size-h4);
  max-width: var(--qwe-measure);
}

/* Label and term at the section's own gap read as two stray fragments, and
   "Cancellation fee from" alone says nothing. Tighten the pair and caption it.*/
.qwe-plan-detail__cancel-type:has(+ .qwe-plan-detail__cancel-term) {
  font-family: var(--qwe-font-label);
  font-size: var(--qwe-size-note);
  letter-spacing: var(--qwe-tracking-label);
  color: var(--qwe-fg-muted);
  margin-block-end: calc(var(--qwe-gap-tight) - var(--qwe-gap));
}

/* The link to the accommodation terms stands alone on its own line: it is the
   one action in that block, so it takes the tap floor rather than the inline
   height of its own text. Links inside prose keep their line height, because a
   44px target in the middle of a sentence breaks the paragraph. */
.qwe-plan-detail__terms .qwe-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--qwe-tap);
}

.qwe-plan-detail__notes {
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
}

.qwe-plan-detail__rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qwe-grid-min)), 1fr));
  gap: var(--qwe-gap);
}

.qwe-plan-detail__room {
  min-width: 0;
}

.qwe-plan-detail__room-link {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
  min-height: var(--qwe-tap);
  min-width: 0;
  text-decoration: none;
}

.qwe-plan-detail__room-media,
.qwe-plan-detail__room-name,
.qwe-plan-detail__room-spec {
  display: block;
  min-width: 0;
}

.qwe-plan-detail__room-name {
  font-family: var(--qwe-font-display);
  font-size: var(--qwe-size-h4);
  line-height: var(--qwe-leading-display);
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.qwe-plan-detail__room-spec {
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

.qwe-plan-detail__room-link:hover .qwe-plan-detail__room-name {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* =========================================================================
   22. Post lists, search, pagination, 404
   ====================================================================== */

/*
 * The band reference.
 *
 * A figure inside a section is as wide as the column; to reach the edge of the
 * band it has to cancel the gutter, and the gutter is only knowable from a box
 * that spans the band. Declaring <main> a container gives the two full-bleed
 * figures that reference. Query units read the container, not the viewport, so
 * they stay right when a classic scrollbar makes 100vw wider than the page.
 *
 * The mobile booking bar is emitted after </main> (footer.php), so the layout
 * containment this brings with it cannot capture a fixed-position element.
 */
.qwe-main {
  display: block;
  min-width: 0;
  container-type: inline-size;
}

.qwe-main:focus {
  outline: none;
}

.qwe-archive__list,
.qwe-search__list {
  display: flex;
  flex-direction: column;
  border-block-start: var(--qwe-border-width) solid var(--qwe-rule);
}

.qwe-entry {
  border-block-end: var(--qwe-border-width) solid var(--qwe-rule);
  min-width: 0;
}

.qwe-entry__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap);
  min-height: var(--qwe-tap);
  padding-block: var(--qwe-gap-tight);
  min-width: 0;
  text-decoration: none;
}

.qwe-entry__date,
.qwe-entry__kind {
  flex: 0 0 auto;
  font-family: var(--qwe-font-label);
  font-size: var(--qwe-size-note);
  letter-spacing: var(--qwe-tracking-label);
  color: var(--qwe-fg-muted);
}

.qwe-entry__title {
  flex: 1 1 auto;
  min-width: 0;
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.qwe-entry__link:hover .qwe-entry__title {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.qwe-searchform {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--qwe-gap-tight);
  min-width: 0;
}

.qwe-searchform__label {
  flex: 1 1 100%;
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

/* 16px keeps iOS from zooming the page when the field takes focus. */
.qwe-searchform__field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--qwe-tap);
  padding: 0 var(--qwe-gap-tight);
  border: var(--qwe-border-width) solid var(--qwe-rule-strong);
  border-radius: var(--qwe-radius);
  background-color: transparent;
  color: var(--qwe-fg);
  font-size: var(--qwe-size-body);
}

.qwe-searchform__submit {
  flex: 0 0 auto;
}

.qwe-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qwe-gap-tight);
}

.qwe-404__action {
  min-width: 0;
}

.qwe-pagination {
  padding: var(--qwe-gap) var(--qwe-section-x) var(--qwe-section-y);
}

.qwe-pagination .nav-links,
nav.qwe-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--qwe-gap-tight);
  max-width: var(--qwe-content-max);
  margin-inline: auto;
}

.qwe-pagination .page-numbers,
nav.qwe-pagination > a,
nav.qwe-pagination > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--qwe-tap);
  min-height: var(--qwe-tap);
  padding: 0 var(--qwe-gap-tight);
  border: var(--qwe-border-width) solid var(--qwe-rule);
  text-decoration: none;
}

.qwe-pagination .page-numbers.current {
  background-color: var(--qwe-accent-action);
  color: var(--qwe-accent-action-ink);
  border-color: var(--qwe-accent-action);
}

/* =========================================================================
   23. Site footer
   ====================================================================== */

.qwe-footer {
  padding: var(--qwe-section-y) var(--qwe-section-x);
}

.qwe-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--qwe-grid-min)), 1fr));
  gap: var(--qwe-gap);
  max-width: var(--qwe-content-max);
  margin-inline: auto;
}

.qwe-footer__brand,
.qwe-footer__contact,
.qwe-footer__social,
.qwe-footer__nav {
  min-width: 0;
}

.qwe-footer__brand {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
}

.qwe-footer__name {
  font-size: var(--qwe-size-h4);
}

.qwe-footer__name-latin {
  font-family: var(--qwe-font-label);
  font-size: var(--qwe-size-note);
  letter-spacing: var(--qwe-tracking-label);
  color: var(--qwe-fg-muted);
}

.qwe-footer__address {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 4);
  font-style: normal;
  font-size: var(--qwe-size-note);
  min-width: 0;
}

.qwe-footer__contact {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qwe-gap-tight) / 2);
}

.qwe-footer__contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap-tight);
  min-width: 0;
}

.qwe-footer__phone,
.qwe-footer__email,
.qwe-footer__line,
.qwe-footer__social-link,
.qwe-footer__nav-link,
.qwe-footer__legal-link,
.qwe-footer__operator-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--qwe-tap);
  min-width: 0;
  font-size: var(--qwe-size-body);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  overflow-wrap: anywhere;
}

.qwe-footer__phone {
  font-size: var(--qwe-size-h4);
}

.qwe-footer__social-list,
.qwe-footer__nav-list,
.qwe-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--qwe-gap);
}

.qwe-footer__nav-list {
  flex-direction: column;
  gap: 0;
}

.qwe-footer__social-item,
.qwe-footer__nav-item,
.qwe-footer__legal-item {
  min-width: 0;
}

.qwe-footer__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--qwe-gap-tight);
  padding-block-start: var(--qwe-gap);
  border-block-start: var(--qwe-border-width) solid var(--qwe-rule);
  min-width: 0;
}

.qwe-footer__operator {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--qwe-gap-tight) / 2) var(--qwe-gap);
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
  min-width: 0;
}

.qwe-footer__operator-name,
.qwe-footer__license,
.qwe-footer__invoice {
  min-width: 0;
}

.qwe-footer__copyright {
  font-size: var(--qwe-size-note);
  color: var(--qwe-fg-muted);
}

/* =========================================================================
   24. Mobile booking bar
   --------------------------------------------------------------------------
   IA §9: no fixed booking bar on the desktop. parts/nav.php only emits the bar
   for the sticky region; this is the second half of that guarantee, and the
   safe-area padding is what keeps the label off the home indicator.
   ====================================================================== */

.qwe-sticky {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  gap: var(--qwe-gap-tight);
  padding: var(--qwe-gap-tight);
  padding-block-end: calc(var(--qwe-gap-tight) + env(safe-area-inset-bottom, 0px));
  padding-inline-start: calc(var(--qwe-gap-tight) + env(safe-area-inset-left, 0px));
  padding-inline-end: calc(var(--qwe-gap-tight) + env(safe-area-inset-right, 0px));
  background-color: var(--qwe-surface-base);
  color: var(--qwe-surface-base-ink);
  border-block-start: var(--qwe-border-width) solid var(--qwe-line);
}

.qwe-sticky__phone {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--qwe-gap-tight) / 4);
  min-width: var(--qwe-tap);
  min-height: var(--qwe-tap);
  padding: 0 var(--qwe-gap-tight);
  border: var(--qwe-border-width) solid var(--qwe-line-strong);
  text-decoration: none;
}

.qwe-sticky__phone-number {
  font-size: var(--qwe-size-note);
  line-height: var(--qwe-leading-display);
  overflow-wrap: anywhere;
}

.qwe-sticky__book {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 899px) {
  /*
   * The bar floats over the page, so the document needs a matching foot or the
   * last line of the footer sits underneath it.
   */
  body:has(.qwe-sticky) {
    padding-block-end: calc(
      var(--qwe-tap) + (var(--qwe-gap-tight) * 2) + var(--qwe-border-width) + env(safe-area-inset-bottom, 0px)
    );
  }
}

@media (min-width: 900px) {
  .qwe-sticky {
    display: none;
  }
}

/* =========================================================================
   25. 320px guarantees
   --------------------------------------------------------------------------
   Everything above is written to hold at 320px on its own. These are the last
   resorts for content the theme does not control: a pasted URL in the editor,
   a very long unbroken facility name.
   ====================================================================== */

.qwe-prose a,
.qwe-footer__email,
.qwe-booking__channel-link,
.qwe-access__phone-link {
  overflow-wrap: anywhere;
}

.qwe-section,
.qwe-header,
.qwe-footer,
.qwe-notice,
.qwe-breadcrumb {
  max-width: 100%;
}

/* One-line catch copy: a phrase, so balance the lines rather than only
   protecting the last one. `pretty` measurably left 「八畳」 alone under a
   20-character room catch at 1024px. */
.qwe-room-detail__catch,
.qwe-plan-card__catch,
.qwe-plan-detail__catch,
.qwe-room-card__catch {
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: balance;
  font-family: var(--qwe-font-display);
  font-weight: var(--qwe-weight-display);
  line-height: var(--qwe-leading-display);
  letter-spacing: var(--qwe-tracking-display);
}

/* 写真の無い客室ページ。
   写真がある宿では、見出しと本文のあいだを写真が埋める。無い施設では
   節どうしの余白だけが 239px 残り、画像が抜けているように見える（実測）。
   下側の余白を詰めて、見出しと本文をひとつの塊にする。
   「主写真が一枚しか無い宿でも成立する」ことを見せるのが見本の役目なので、
   ここは詰めるのが正しい。 */
.qwe-room-detail__intro--no-photo {
  padding-block-end: var(--qwe-gap);
}

/* 詰める先を間違えた。intro の下(95px)を削っただけでは 239px は変わらず、
   実際に効いていたのは次の節の上余白 144px だった。両方を詰める。
   :has() ではなく、直後の兄弟に効く + で書く。この設計は商品として配られる
   ので、古いブラウザで崩れない書き方を選ぶ。 */
.qwe-room-detail__intro--no-photo + .qwe-room-detail__main {
  padding-block-start: var(--qwe-gap);
}

/* ヒーローの動画。静止画の上に重ねる。
   動画が届く前、非対応、prefers-reduced-motion のときは静止画がそのまま見える。
   position:absolute で同じ枠に収め、object-fit:cover で静止画と同じ切り取りにする。 */
.qwe-hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* 動きを減らす設定の人には出さない。静止画で成立している。 */
@media (prefers-reduced-motion: reduce) {
  .qwe-hero__video { display: none; }
}

/* 携帯では出さない。6秒の動画に通信量を使わせない。
   星のや東京も帯として置いていて、全画面で見せてはいない。 */
@media (max-width: 820px) {
  .qwe-hero__video { display: none; }
}