.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}

@media (min-width: 560px) {
  .container {
    max-width: 560px;
  }
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
    padding-right: 40px;
    padding-left: 40px;
  }
}

@media (min-width: 900px) {
  .container {
    max-width: 900px;
  }
}

@media (min-width: 1100px) {
  .container {
    max-width: 1100px;
    padding-right: 64px;
    padding-left: 64px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

@media (min-width: 1300px) {
  .container {
    max-width: 1300px;
  }
}

@media (min-width: 1360px) {
  .container {
    max-width: 1360px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

/* =============================================================================
   HOTEL ABEST GRANDE SAPPORO — design system v1.0
   ワイヤー(sapporo-renewal/_wf2/frag/top.html)の構成・コピーを変えずに、
   色・書体・写真・余白だけを与えたデザイン層。
   トークンの由来と使い方は ../../DESIGN-SYSTEM.md が正。
   ========================================================================== */

/* --- 書体 --------------------------------------------------------------
   和文見出しだけ Noto Serif JP を実使用文字にサブセットして自前配信する。
   本文はシステムフォントのみで 0KB。生成は tools/build-fonts.py。            */

/* Webフォントは読まない。見出しも本文もOSの和文フォントで組む。
   実サイトを当たったところ、Noto系のWebフォントを見出しに載せているのは中位帯で、
   上位帯（ふふ・アマン・TRUNK・THE SHARE HOTELS）はシステムフォントか専用書体。
   Notoは「日本語のInter」で、載せるほど既製の顔になる。
   サブセットの仕組みは tools/build-fonts.py に残してあるので、必要になれば戻せる。 */

/* FVのh1だけしっぽり明朝600を使う。白抜きのにじみを抑えるため実ウェイトを使用。ローカルサブセットの出典は research/15_stock-credits.html。 */

@font-face {
  font-family: "Shippori Mincho Abest";

  src: url("../font/abest-mincho-600.woff2") format("woff2");

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

/* --- トークン ---------------------------------------------------------- */

:root {
  /* 色。すべてロゴSVGの実測値から起こしている(DESIGN-SYSTEM.md §2) */
  --ink: #231815;
  /* ロゴタイプと同値。見出し・主要テキスト */
  --ink-2: #4A4A4A;
  /* 本文 */
  --ink-3: #6B6B6B;
  /* メタ・補助 */
  --ink-4: #9A9A9A;
  /* 罫より弱い補助。大きい文字だけ */
  --red: #A70635;
  /* ブランドレッド(主)。ロゴの「SAPPORO」と同値 */
  --red-rgb: 167, 6, 53;
  --red-bright: #B51940;
  /* リボンの明部 */
  --red-deep: #7C192C;
  /* リボンの陰。hover / 押下 */
  --navy: #1F3352;
  /* 二次のボタン。赤の相手として置く濃紺 */
  --navy-soft: #EBEEF3;
  /* その面 */
  --copper: #CD8F5E;
  /* ABEST Half-Inclusive のロゴタイプの色（実測） */
  --paper: #ffffff;
  --paper-1: #F5F5F5;
  /* 色味を入れない薄面 */
  --paper-2: #EBEBEB;
  /* 一段深い面 */
  --dark: #1C1512;
  /* 転換点・フッター */
  --dark-panel: #2A211D;
  --line: #E0E0E0;
  /* コンポーネント内部の区切りだけに使う */
  --line-dark: rgba(255, 255, 255, 0.16);
  /* 書体 */
  /* 見出し。OSの和文ゴシックだけで組む（Webフォント 0KB） */
  --f-head: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", Meiryo, sans-serif;
  --f-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;
  /* 余白は東横イン実測の約1.25倍。DESIGN-SYSTEM.md §4参照。 */
  --s1: 10px;
  --s2: 20px;
  --s3: 30px;
  --s4: 50px;
  --s5: 80px;
  --s6: 120px;
  --wrap: 1184px;
  --pad: 20px;
  --head-h: 62px;
  /* 1行ロゴの上下に余裕を確保する。 */
  --news-h: 36px;
  /* ニュース帯は1行のため幅によらず同じ高さ。 */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 768px) {
  :root {
    --pad: 40px;
    --head-h: 68px;
  }
}

@media (min-width: 1100px) {
  :root {
    --pad: 64px;
    --head-h: 74px;
  }
}

/* --- ベース ------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--f-sans);
  overflow-x: clip;
  /* 描画を維持するため色変数は body スコープに置く。 */
  --dark-rgb: 28, 21, 18;
  --pending-spot-surface: #E4E4E4;
  --facility-tint-band: #E9E7E5;
  --carousel-dot-off: #CFCFCF;
  --hero-shadow-rgb: 26, 18, 12;
  /* 本文は小さくしすぎず、東横インの本文実測15pxを基準にする。 */
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: normal;
  /* antialiased を当てると和文が痩せて「打ちっぱなし」に見えるので既定のまま使う */
  text-rendering: optimizeLegibility;
}

/* JS動的付与(トップ現役): モバイルメニュー開閉時のみ使用 */

body.navopen {
  overflow: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

p, li, dd {
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

[id] {
  scroll-margin-top: calc(var(--head-h) + var(--news-h) + 16px);
}

/* .sr-only / .items-start は Tailwind 本体と重複し、生成ユーティリティが常に優先するため手書きしない。 */

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

  html {
    scroll-behavior: auto;
  }
}

/* --- レイアウト -------------------------------------------------------- */

/* 下層用:
   c2 c4 c6 c8 c12 st5 st6 items-start s2 sd gap-lg mb2 mb4 mb6 statement
   price flag sm bleed ar-4-3 ar-3-4 plan-go uline tags tiles tile svc-list
   svc-row hscroll fit5 fit3 pending flip pricenote cap wide gallery mosaic
   mz mz-lead mz-t mz-wide sec-more faclist fac fac-i fac-n fac-s pgal pg
   pg-lead card-w card-b rib */

/* セクションの区切りは余白だけで取る。見出しの上に罫を引かない */

/* --- タイポグラフィ ---------------------------------------------------- */

/* 和文の詰め。paltで括弧・句読点を締めてから均等に開く */

.jp {
  font-feature-settings: "palt" 1;
  text-wrap: balance;
  letter-spacing: 0em;
  word-break: keep-all;
  word-break: auto-phrase;
}

.display, .h-sec, .h-sub, .statement {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", Meiryo, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
}

.display.jp, .h-sec.jp {
  letter-spacing: 0em;
}

.display {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.38;
}

@media (min-width: 768px) {
  .display {
    font-size: 26px;
    line-height: 1.4;
  }
}

@media (min-width: 1100px) {
  .display {
    font-size: 28px;
  }
}

/* 見出しは本文15pxとの階層を保つ。東横インの実測28pxを基準とする。 */

.h-sec {
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .h-sec {
    font-size: 28px;
    line-height: 1.3;
  }
}

@media (min-width: 1100px) {
  .h-sec {
    font-size: 30px;
    line-height: 1.27;
  }
}

.h-sec {
  /* .h-sec.text-center と共存するため @apply text-center は使わない（循環参照） */
  text-align: center;
}

/* ラベルは本文に近い級数で階層を抑える。 */

.h-sub {
  text-wrap: pretty;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0em;
  word-break: auto-phrase;
}

.statement {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.85;
}

@media (min-width: 768px) {
  .statement {
    font-size: 30px;
  }
}

/* リードは東横イン・ドーミーインの本文実測15px相当に揃える。 */

.lead {
  max-width: 34em;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
  --tw-text-opacity: 1;
  color: rgb(74 74 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .lead {
    font-size: 16px;
  }
}

.body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.01em;
  --tw-text-opacity: 1;
  color: rgb(74 74 74 / var(--tw-text-opacity, 1));
}

.prose h3, .policy-copy .h-sec {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.prose h3:first-child, .policy-copy .h-sec:first-child {
  margin-top: 0;
}

.prose h3, .prose p {
  color: var(--ink-2);
}

/* ポリシーの小見出しは本文より一段大きい19px。.policy-copy の詳細度で全幅に適用する。 */

.policy-copy .h-sec {
  font-size: 19px;
}

/* 段落間 24px。見出しは上を広く(章の切れ目 56px)、下を詰める(20px)。
   space-y-6 はユーティリティ層で後勝ちになり見出しの余白を上書きするため使わず、ここで持つ */

.policy-copy > * + * {
  margin-top: 1.5rem;
}

.policy-copy > .h-sec {
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
}

.policy-copy > .h-sec:first-child {
  margin-top: 0;
}

/* --- トップ: セカンドビュー / 3つの特長 ---------------------------- */

.lead-2col {
  padding: 55px var(--pad) 60px;
}

/* 写真はテンプレートで指定し、写真ボードから差し替えられるようにする。暗幕は ::before に分離。 */

.home-concept-photo {
  position: relative;
  isolation: isolate;
  background: #231815 center / cover no-repeat;
}

.home-concept-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)),
    linear-gradient(to bottom, transparent, rgba(0, 0, 0, .52));
}

.home-concept-photo .lead-2col-heading,
.home-concept-photo .lead-2col-body {
  color: #fff;
}

.lead-2col-inner {
  display: flex;
  width: 100%;
  max-width: 848px;
  margin-inline: auto;
  gap: 38px;
}

.lead-2col-heading {
  width: 360px;
  flex: 0 0 360px;
  margin: 0;
  color: var(--ink);
  font-family: var(--f-head);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.476;
  text-align: left;
}

.lead-2col-body {
  width: 450px;
  margin-left: auto;
  color: var(--ink-2);
  font-size: 18px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: .01em;
}

.feature-showcase {
  padding: var(--s5) 0 var(--s6);
  overflow: hidden;
}

.feature-showcase-layout {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: var(--pad);
}

.feature-showcase-side {
  width: 36%;
  flex: 0 0 36%;
  padding-right: var(--s3);
}

.feature-showcase-heading {
  position: sticky;
  top: 140px;
  /* 固定ヘッダー分を逃がす */
  color: var(--ink);
  font-family: var(--f-head);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.feature-showcase-list {
  /* 右端はウィンドウ端まで抜く(OMO5型)。負マージン分も含めて伸びるよう flex:1 */
  flex: 1 1 0;
  min-width: 0;
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.feature-showcase-item + .feature-showcase-item {
  margin-top: 60px;
}

.feature-showcase-slider, .feature-showcase-slider .splide__track {
  overflow: hidden;
}

.feature-showcase-slide {
  width: auto !important;
}

/* 特長写真は比率3:2で揃え、元画像の比率によらず cover で切り抜く。 */

.feature-showcase-figure {
  position: relative;
  width: 450px;
  height: 300px;
  margin: 0;
  overflow: hidden;
}

.feature-showcase-figure img {
  width: 100%;
  max-width: none;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.feature-showcase-caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 34px 14px 10px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .52));
  color: white;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}

.feature-showcase-copy {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: var(--s2);
  margin-top: var(--s2);
  padding-right: var(--s4);
}

.feature-showcase-number {
  display: block;
  color: var(--ink);
  font-family: var(--f-head);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 1100px) {
  /* 画面右端まで写真を見せるため、見出し列の幅で左端を調整する。 */

  .feature-showcase-side {
    width: calc(36% - 88px);
    flex-basis: calc(36% - 88px);
  }
}

.feature-showcase-title {
  width: min(300px, 100%);
  color: var(--ink);
  font-family: var(--f-head);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}

.feature-showcase-body {
  max-width: 40em;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.71;
}

@media (max-width: 899px) {
  .lead-2col {
    padding: var(--s4) var(--pad) var(--s5);
  }

  .lead-2col-inner {
    display: block;
  }

  .lead-2col-heading {
    width: auto;
    font-size: 24px;
    line-height: 1.5;
    text-align: center;
  }

  .lead-2col-body {
    width: auto;
    max-width: 34em;
    margin: var(--s3) auto 0;
    font-size: 14px;
    line-height: 2;
  }

  .feature-showcase {
    padding: var(--s5) 0;
  }

  .feature-showcase-layout {
    display: block;
    padding-left: var(--pad);
  }

  .feature-showcase-side, .feature-showcase-list {
    width: auto;
  }

  .feature-showcase-side {
    padding-right: var(--pad);
  }

  .feature-showcase-heading {
    position: static;
    font-size: 28px;
    text-align: center;
  }

  .feature-showcase-list {
    margin-top: var(--s3);
    margin-right: 0;
  }

  .feature-showcase-figure {
    width: 300px;
    height: 200px;
  }

  .feature-showcase-item + .feature-showcase-item {
    margin-top: var(--s4);
  }

  .feature-showcase-copy {
    padding-right: var(--pad);
  }
}

.meta {
  font-size: 13px;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  line-height: 1.7;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(107 107 107 / var(--tw-text-opacity, 1));
}

/* ブランドのロゴタイプ（ABEST Half-Inclusive）。英字のセクションラベルは置かない */

.brandmark img {
  height: 1.25rem;
  width: auto;
}

@media (min-width: 768px) {
  .brandmark img {
    height: 30px;
  }
}

.brandmark.center {
  text-align: center;
}

/* conceptのロゴはSPのみコンテンツ幅に合わせる。他の用途と区別するため .xl を使う。 */

@media (max-width: 767px) {
  .brandmark.xl img {
    height: auto;
    width: 100%;
  }
}

/* 中央揃えの本文に使う汎用修飾子 */

.body.center {
  text-align: center;
}

/* 見出し(.h-sec)直下のリード・説明文。PC/SPとも中央揃え。
   .max-w-wrap は本文セクションのコンテナ */

.max-w-wrap > .h-sec + .lead {
  margin-left: auto;
  margin-right: auto;
  word-break: keep-all;
}

.p-family .fa-rules.max-w-wrap > .h-sec + .lead {
  margin-left: auto;
  margin-right: auto;
}

.fa-rules.max-w-wrap > .h-sec + .lead {
  margin-left: auto;
  margin-right: auto;
}

.max-w-wrap > .h-sec + .lead {
  text-align: center;
  overflow-wrap: normal;
}

/* CLUB ABESTバナーは現行サイト実測の比率を維持。上限680pxで中央に置く。 */

.club-banner {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.club-banner img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 420px;
  border-radius: 4px;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 768px) {
  .club-banner img {
    max-width: 680px;
  }
}

.club-banner:hover img {
  opacity: .88;
}

/* 注釈は説明文より弱くする。 */

.note {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1));
}

.num {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  letter-spacing: 0em;
}

.price {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", Meiryo, sans-serif;
  letter-spacing: 0em;
  font-size: 1.15em;
}

/* 割引タイルは文全体を同じウェイトにするため、配下の金額だけ太字にならないようにする。 */

.discount-amount b {
  font-weight: inherit;
}

.flag {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  display: inline-block;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: currentColor;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  vertical-align: 1px;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(167 6 53 / var(--tw-text-opacity, 1));
}

/* --- 画像 -------------------------------------------------------------- */

.fig {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity, 1));
}

.fig.sm {
  border-radius: 4px;
}

/* 全幅写真を版面の外まで広げる。 */

.fig.bleed {
  border-radius: 0px;
  margin-inline: calc(var(--pad) * -1);
}

.fig img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.group .fig img {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.group:hover .fig img {
  opacity: 0.88;
}

/* --- ボタン・導線 ------------------------------------------------------ */

.btn, .btn-out, .btn-inv {
  display: inline-flex;
  min-height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0em;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 768px) {
  .btn, .btn-out, .btn-inv {
    min-width: 200px;
  }
}

.btn, .btn-out, .btn-inv {
  text-align: center;
}

/* ホバー時も同じ枠幅を保持して位置ずれを防ぐ。写真背景でも読めるようホバーの地は白にする。 */

.btn {
  background-color: var(--red);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn:hover {
  --tw-border-opacity: 1;
  border-color: rgb(167 6 53 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(167 6 53 / var(--tw-text-opacity, 1));
  background-color: #ffffff;
}

/* 三角はCTAだけ。本文中の導線には出さない */

.tlink .iarrow, .plan-go .iarrow {
  display: none;
}

.tlink::after, .plan-go::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 2px;
}

.btn-inv {
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
}

.btn-inv:hover {
  --tw-border-opacity: 1;
  border-color: rgb(167 6 53 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(167 6 53 / var(--tw-text-opacity, 1));
}

.btn-inv {
  background-color: #ffffff;
}

.btn-inv:hover {
  background-color: #ffffff;
}

.btn-head {
  min-height: 44px;
  min-width: 0px;
  padding-left: 18px;
  padding-right: 18px;
  font-size: 15px;
}

/* 副導線の角丸と間隔は主導線より小さくする。枠幅はホバー前後で保持する。 */

.btn-out {
  gap: 0.5rem;
  border-radius: 4px;
  --tw-bg-opacity: 1;
  background-color: rgb(31 51 82 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background-color: var(--navy);
}

.btn-out:hover {
  --tw-border-opacity: 1;
  border-color: rgb(31 51 82 / var(--tw-border-opacity, 1));
  color: var(--navy);
  background-color: #ffffff;
}

.btn-out .iarrow {
  color: currentColor;
}

.tlink {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 1px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tlink:hover, .group:hover .tlink {
  background-size: 100% 1px;
}

.iarrow {
  display: inline-flex;
  align-items: center;
  transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* preflight無効時は --tw-translate-y が未定義のため @apply translate-x-* を使わない。 */

.group:hover .iarrow, a:hover > .iarrow, button:hover > .iarrow {
  transform: translateX(3px);
}

.uline {
  padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

/* --- ヘッダー ---------------------------------------------------------- */

.site-head {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 60;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
  background-color: #ffffff;
}

/* ヘッダーだけは本文の幅に縛らず、画面幅いっぱいに近いところまで使う。
   東横インも header は全幅で、ロゴを左端・予約ボタンを右端まで振っている。
   内側の幅・flex は news-band.php のユーティリティ（max-w-wrap は使わない） */

/* ニュース帯。リッチモンドホテルズの最上部帯と同じ位置付け(常時1行)。
   色はボタンと同じ紺 --navy のベタ、文字は白。台帳の実在お知らせ1件のみ(捏造しない) */

.head-news {
  --tw-bg-opacity: 1;
  background-color: rgb(31 51 82 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background-color: var(--navy);
}

/* ニュースは日付・題名・矢印を一組で中央に置く。長い題名だけ省略表示する。 */

/* richmondhotel.jp実測の外形36px（上下9px＋行18px）を基準とする。 */

.head-news-i {
  display: flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  gap: 0.625rem;
  overflow: hidden;
  font-size: 12.5px;
  letter-spacing: 0em;
  line-height: 18px;
  min-height: 18px;
}

.head-news-i .date {
  flex-shrink: 0;
  flex-grow: 0;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  opacity: 0.75;
}

.head-news-i .ttl {
  min-width: 0px;
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head-news-i .more {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.125rem;
  white-space: nowrap;
  opacity: 0.85;
}

.head-news-i.group:hover .more, .head-news-i.group:focus-visible .more {
  opacity: 1;
}

/* 横型ロゴのインク比率32%を基準に、見かけの文字高を揃える。 */

.logo {
  display: flex;
  min-height: 44px;
  flex-shrink: 0;
  align-items: center;
}

.logo img {
  height: 42px;
  width: auto;
}

@media (min-width: 768px) {
  .logo img {
    height: 2.5rem;
  }
}

@media (min-width: 1100px) {
  .logo img {
    height: 2.75rem;
  }
}

/* ヘッダーの立地表記は現行サイトのヘッダー実測を基準とする。 */

.head-tagline {
  display: none;
}

@media (min-width: 1300px) {
  .head-tagline {
    margin-left: 18px;
    display: block;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0em;
    opacity: 0.7;
  }
}

.nav {
  display: none;
}

@media (min-width: 1100px) {
  .nav {
    margin-left: auto;
    display: flex;
    flex: 0 1 auto;
    align-items: center;
  }

  .nav .ni {
    position: relative;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .nav .ni:first-child {
    padding-left: 0;
  }

  .nav .ni:last-child {
    padding-right: 0;
  }

  /* 項目間だけに縦棒。最初と最後の外側には付けない。currentColorで両ヘッダー状態に追随させる */

  .nav .ni:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: currentColor;
    opacity: 0.3;
  }

  .nav .ni > a {
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: normal;
    white-space: nowrap;
    padding-bottom: 4px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 300ms var(--ease);
  }

  .nav .ni:hover > a {
    background-size: 100% 1px;
  }

  /* 子メニュー(ワイヤー ../_wf2/assemble.js のNAV定義通り、ビュッフェ・客室のみ)。
     .head-lang .sub と同じ流儀(paper地のフラットな箱・ホバーでopacity/visibility) */

  .nav .ni.has-sub > a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-top-color: currentColor;
    opacity: 0.7;
    margin-left: 6px;
    vertical-align: middle;
  }

  .nav .ni.has-sub .sub {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 200px;
    padding: 8px 0;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-4px);
    transition: opacity 200ms var(--ease), visibility 200ms, transform 200ms var(--ease);
    z-index: 5;
  }

  .nav .ni.has-sub:hover .sub, .nav .ni.has-sub:focus-within .sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .nav .ni.has-sub .sub a {
    display: flex;
    min-height: 44px;
    align-items: center;
    white-space: nowrap;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0em;
    --tw-text-opacity: 1;
    color: rgb(74 74 74 / var(--tw-text-opacity, 1));
    background: none;
  }

  .nav .ni.has-sub .sub a:hover {
    background: #F5F5F5;
    color: #231815;
  }
}

.head-right {
  margin-left: auto;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 1100px) {
  .head-right {
    margin-left: 1rem;
  }
}

@media (min-width: 1200px) {
  .head-right {
    margin-left: 28px;
  }

  .nav .ni {
    padding-inline: 14px;
  }
}

.head-phone {
  display: none;
}

@media (min-width: 1400px) {
  .head-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    text-align: center;
  }
}

.head-phone .no {
  --tw-text-opacity: 1;
  color: rgb(167 6 53 / var(--tw-text-opacity, 1));
}

@media (min-width: 1400px) {
  .head-phone .no {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0em;
  }

  .head-phone .t {
    margin-top: 0px;
    display: block;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0em;
  }
}

.head-phone .t {
  opacity: 0.8;
}

.head-cta {
  display: none;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .head-cta {
    display: block;
    text-align: center;
  }
}

/* 用途不明・要確認: ヘッダー補助文(.micro)はトップ未使用。下層展開で要確認 */

.head-cta .micro {
  margin-top: 5px;
  display: none;
  font-size: 10px;
  letter-spacing: 0em;
}

@media (min-width: 1440px) {
  .head-cta .micro {
    display: block;
  }
}

.head-cta .micro {
  opacity: 0.85;
}

.burger {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-width: 0px;
  padding: 0px;
  color: inherit;
}

@media (min-width: 1100px) {
  .burger {
    display: none;
  }
}

.burger {
  background: none;
}

.burger span {
  display: block;
  height: 1.5px;
  width: 39px;
  background: currentColor;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.burger:hover span:first-child {
  transform: translateY(2px);
}

.burger:hover span:last-child {
  transform: translateY(-2px);
}

body.navopen .burger span:first-child,
body.navopen .burger:hover span:first-child {
  transform: translateY(10.5px) rotate(45deg);
}

body.navopen .burger span:nth-child(2) {
  opacity: 0;
}

body.navopen .burger span:last-child,
body.navopen .burger:hover span:last-child {
  transform: translateY(-10.5px) rotate(-45deg);
}

.mobmenu {
  position: fixed;
  z-index: 55;
  overflow-y: auto;
  inset: calc(var(--head-h) + var(--news-h)) 0 0;
  background-color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease), visibility 300ms;
  padding-block: 32px 120px;
}

body.navopen .mobmenu {
  opacity: 1;
  visibility: visible;
}

.mm-g {
  border-width: 0px;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
  padding-top: 18px;
  padding-bottom: 18px;
}

.mm-g > span {
  margin-bottom: 0.5rem;
  display: block;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", Meiryo, sans-serif;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
}

.mm-g > a {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 14px;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(74 74 74 / var(--tw-text-opacity, 1));
}

.mm-top {
  display: block;
  padding-bottom: 18px;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", Meiryo, sans-serif;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
}

/* --- ファーストビュー -------------------------------------------------- */

/* ヒーロー側を伸縮させ、検索フォームが折り返しても収まるようにする。 */

.firstview {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--head-h) + var(--news-h));
}

/* 写真高と見出しの下余白で、文字ブロックの中央位置を調整する。 */

.fv {
  position: relative;
  display: flex;
  height: 600px;
  flex: 1 1 auto;
  align-items: flex-end;
  overflow: hidden;
}

@media (min-width: 768px) {
  .fv {
    aspect-ratio: auto;
    height: 540px;
  }
}

.fv::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 上は写真を見せたいので薄く、文字が乗る下だけ強く締める */
  background: linear-gradient(180deg, rgba(var(--dark-rgb), .22) 0%, rgba(var(--dark-rgb), 0) 24%, rgba(var(--dark-rgb), .50) 62%, rgba(var(--dark-rgb), .82) 100%);
}

@media (min-width: 768px) {
  .fv::after {
    background: linear-gradient(180deg, rgba(var(--dark-rgb), .18) 0%, rgba(var(--dark-rgb), 0) 26%, rgba(var(--dark-rgb), .40) 64%, rgba(var(--dark-rgb), .72) 100%);
  }
}

/* 非表示スライドは visibility:hidden で描画対象から外し、GPU負荷を抑える。フェードアウト完了後に隠すため visibility に遅延を入れる。 */

.fv-still {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms cubic-bezier(.22, .61, .36, 1), visibility 0s linear 900ms;
}

.fv-still.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .fv-still {
    transition: none;
  }
}

.fv .display, .fv .lead {
  color: #ffffff;
}

.fv .display {
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.28);
}

.fv .lead {
  max-width: 30em;
}

.fv-intro-lead {
  margin-top: 0.75rem;
}

/* 狭い画面では原稿の改行位置が崩れるので、自然改行に任せる */

@media (max-width: 767px) {
  .fv .lead br, .fv .display br {
    display: none;
  }
}

.field {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.375rem;
}

.field label {
  font-size: 14px;
  letter-spacing: 0em;
  color: color-mix(in srgb, #ffffff 72%, transparent);
}

.field input, .field select {
  height: 2.75rem;
  width: 100%;
  border-radius: 0px;
  border-width: 0px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
  background: #F5F5F5;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5L5 7L8.5 3.5H1.5Z' fill='%236E605A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}

.searchbtn {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .searchbtn {
    grid-column: auto;
  }
}

.searchbtn .btn {
  width: 100%;
}

.sub-note {
  grid-column: 1 / -1;
  margin-top: 2px;
  word-break: keep-all;
  overflow-wrap: normal;
}

.sub-note .uline {
  color: var(--ink-2);
  margin-left: 6px;
}

/* 下層用: .tags は客室系下層ページ用の先行定義 */

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: normal;
  color: var(--red);
  background: color-mix(in srgb, #A70635 8%, transparent);
  border-radius: 4px;
  padding: 2px 10px;
}

/* buttonの既定枠線を消す。preflight無効のため明示的にリセットする。 */

button.badge {
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: inherit;
  cursor: pointer;
}

/* 選択中のカテゴリpill(newsページ)。塗りの反転で示す(枠線は使わない) */

.badge-ink {
  color: #ffffff;
  background: var(--red);
}

/* 客室カードのスペック行(ワイヤーrooms.htmlの.tags相当)。.badgeを並べるだけ */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ページネーションだけ正円にするため、カテゴリ用 .badge と修飾子を分ける。 */

.badge-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 9999px;
}

/* お知らせ一覧のページネーション */

.news-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.news-pager-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.news-pager-pages--mobile {
  display: none;
}

@media (max-width: 767px) {
  .news-pager {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .news-pager-pages--desktop {
    display: none;
  }

  .news-pager-pages--mobile {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 1;
    min-width: 0;
    gap: 6px;
  }

  .news-pager-edge.tlink {
    gap: 2px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .news-pager-prev.tlink::before {
    margin-right: 1px;
  }

  .news-pager-next.tlink::after {
    margin-left: 1px;
  }

  .news-pager .badge-num {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .news-pager-ellipsis {
    flex-shrink: 0;
    min-width: auto;
    letter-spacing: 0;
  }
}

.news-pager-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.news-pager .badge-num {
  width: 34px;
  height: 34px;
  font-size: 13px;
  line-height: 1;
}

.news-pager-edge.tlink {
  min-height: 34px;
  font-size: 13px;
}

/* 「前へ」は矢印を左向き・左側へ */

.news-pager-prev.tlink::after {
  content: none;
}

.news-pager-prev.tlink::before {
  content: "";
  width: 5px;
  height: 5px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-right: 4px;
}

/* お客様の声はグレー地に白いカードを置き、枠線を使わず面の段差で区別する。 */

.voice-card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 26px;
  padding-top: 1.5rem;
  /* @apply bg-paper は .bg-paper .tile を巻き込むため使わない */
  background-color: #ffffff;
}

.voice-ava {
  margin-bottom: 0.75rem;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-text-opacity: 1;
  color: rgb(107 107 107 / var(--tw-text-opacity, 1));
}

.voice-ava.voice-ava-red-soft {
  background: color-mix(in srgb, #A70635 8%, transparent);
}

.voice-ava.voice-ava-navy-soft {
  background: color-mix(in srgb, #1F3352 8%, transparent);
}

.voice-ava.voice-ava-red {
  background: color-mix(in srgb, #A70635 14%, transparent);
}

.voice-stars {
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(167 6 53 / var(--tw-text-opacity, 1));
}

.voice-src {
  margin-top: 0.5rem;
  font-size: 12px;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1));
}

/* --- 汎用ブロック ----------------------------------------------------- */

/* 3つ並べる箱。枠線ではなく面と余白で分ける */

.tiles {
  /* タイルは塗りと間隔で区切る。 */
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 900px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tiles.c2 {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .tiles.c2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 面の段差: グレー面では白タイル、白面(.bg-paper)ではグレータイル */

.tile {
  background: var(--paper);
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
}

.tile > p:last-child {
  margin-top: auto;
}

@media (min-width: 900px) {
  .tile {
    padding: 22px 22px 24px;
  }
}

.bg-paper .tile {
  background: var(--paper-1);
}

.tile .h-sub {
  margin-bottom: 4px;
  text-wrap: balance;
}

/* ラベルと値を左右に置く定義行。 */

.svc-list {
  margin-top: 14px;
}

.svc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  letter-spacing: normal;
}

.svc-row:last-child {
  border-bottom: 1px solid var(--line);
}

.svc-row .k {
  color: var(--ink);
}

.svc-row .v {
  color: var(--ink-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 横スクロールの並び */

.hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 68%;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  scrollbar-width: none;
}

.hscroll::-webkit-scrollbar {
  display: none;
}

.hs-item {
  scroll-snap-align: start;
}

.hs-item .fig {
  margin-bottom: 10px;
}

.hs-item .acc {
  font-size: 14px;
  color: var(--ink);
  letter-spacing: normal;
  text-align: center;
}

.hs-item .acc small {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: normal;
  margin-top: 2px;
}

@media (min-width: 768px) {
  .hscroll {
    grid-auto-columns: 30%;
  }

  .hscroll.fit5 {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 25px;
  }

  .hscroll.fit3 {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 20px;
    max-width: 560px;
  }
}

/* 定義リスト。罫はここでだけ引く。dl/ddのUAデフォルト余白はdiv構文に合わせて打ち消す */

/* preflight無効のため、片側だけ罫を引くときは先に border-0 で全辺を0にする。
   しないと border-solid が未指定辺に UA の medium（約3px）を残し、枠が太くなる */

.deflist {
  margin: 0px;
  border-width: 0px;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
}

.deflist dd {
  margin: 0px;
}

.deflist .k, .deflist .v {
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
}

.row-i {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-width: 0px;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
  padding-top: 18px;
  padding-bottom: 18px;
}

@media (min-width: 768px) {
  .row-i {
    flex-direction: row;
    gap: 30px;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

/* 項目名と本文の初行を揃える。実測行高22.2pxと24.5pxの差の半分が1.15px。 */

.dl-rows .row-i .k {
  font-size: 12px;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(107 107 107 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .dl-rows .row-i .k {
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 132px;
  }
}

.dl-rows .row-i .k {
  padding-top: 1.15px;
}

/* アイコン付き項目名: 行全体の中央ではなく1行目に揃える(items-centerだと本文が2行のとき項目名が沈む)。
   アイコン20pxを行高22.2pxの1行目中央に置く。項目名が折り返さないよう幅を広げる */

.dl-rows .row-i .k.has-icon {
  align-items: flex-start;
}

@media (min-width: 768px) {
  .dl-rows .row-i .k.has-icon {
    flex-basis: 176px;
  }
}

.dl-rows .row-i .k.has-icon > span:first-child {
  margin-top: 1.1px;
}

.dl-rows .row-i .v {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
}

.subsection-title {
  margin-block: 24px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(31 51 82 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background-color: var(--navy);
}

/* button要素で使うとUA既定の枠線が出るため、.badgeと同様にリセットする */

button.tag-pill {
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: inherit;
  cursor: pointer;
}

/* お知らせ1行カード（トップ・一覧）内のカテゴリ pill */

.news-card .tag-pill {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 11px;
  line-height: 1;
}

/* 定義リスト直後の注記は、行内の上下余白と同じだけ罫線から離す。 */

.deflist + .note {
  margin-top: 18px;
}

#plan .deflist + .note {
  margin-top: 46px;
}

@media (min-width: 768px) {
  .deflist + .note {
    margin-top: 1.25rem;
  }
}

/* FAQ */

/* FAQはJSが高さをアニメーションさせるため、CSSでは overflow:hidden のみ指定する。 */

.faq {
  border-width: 0px;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
}

.faq details {
  overflow: hidden;
  border-width: 0px;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
}

.faq summary {
  position: relative;
  cursor: pointer;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 2.5rem;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--red);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.faq summary::before {
  width: 14px;
  height: 1.5px;
  margin-top: -0.75px;
}

.faq summary::after {
  width: 1.5px;
  height: 14px;
  margin-top: -7px;
  right: 12.25px;
}

.faq details[open] summary::after {
  opacity: 0;
  transform: rotate(90deg);
}

.faq .a {
  padding-bottom: 1.25rem;
  font-size: 15px;
  line-height: 1.8;
  --tw-text-opacity: 1;
  color: rgb(74 74 74 / var(--tw-text-opacity, 1));
}

/* --- 予約再掲バンド --------------------------------------------------- */

/* --- フッター --------------------------------------------------------- */

.site-foot {
  background: var(--dark);
  color: color-mix(in srgb, #ffffff 78%, transparent);
  padding-block: 80px 0;
}

@media (min-width: 768px) {
  .site-foot {
    padding-top: 110px;
  }
}

.foot-brand .logo img {
  height: 76px;
  filter: brightness(0) invert(1);
}

.foot-brand address {
  font-style: normal;
  font-size: 13px;
  line-height: 2.1;
  margin-top: 22px;
  color: color-mix(in srgb, #ffffff 66%, transparent);
  font-variant-numeric: tabular-nums;
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.foot-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding-right: 9px;
  font-size: 13px;
  letter-spacing: normal;
  width: -moz-fit-content;
  width: fit-content;
  /* 語の途中で折り返さない。「サービ／ス」で1文字だけ落ちるのを防ぐ */
  word-break: keep-all;
  overflow-wrap: normal;
}

.foot-col a:hover {
  color: #ffffff;
}

.foot-col .strong {
  color: #ffffff;
  font-weight: 500;
}

.foot-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 56px;
  padding-block: 26px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
  color: color-mix(in srgb, #ffffff 60%, transparent);
}

.foot-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -5px;
}

@media (min-width: 768px) {
  .foot-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* --- モバイル固定バー ------------------------------------------------- */

.mfix {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  align-items: stretch;
  background: var(--paper);
  box-shadow: 0 -1px 0 var(--line);
}

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

.mfix a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--ink);
  border: 1px solid transparent;
  box-sizing: border-box;
}

.mfix .m-main {
  background: var(--red);
  color: #ffffff;
}

.mfix .m-main:hover {
  background: #ffffff;
  border-color: var(--red);
  color: var(--red);
}

.mfix .m-sub:hover {
  border-color: var(--line-dark);
}

@media (max-width: 899px) {
  body {
    padding-bottom: 58px;
  }
}

/* 撮影待ちの枠。中に文字や斜線を入れず、面だけで示す */

.fig.pending {
  background: var(--paper-2);
}

.bg-paper .fig.pending {
  background: var(--pending-spot-surface);
}

/* --- 言語切替（ヘッダー） --------------------------------------------------- */

.head-lang {
  position: relative;
  display: none;
}

@media (min-width: 1100px) {
  .head-lang {
    display: block;
  }
}

.head-lang > button {
  display: inline-flex;
  min-height: 44px;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-width: 0px;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 13px;
  letter-spacing: 0em;
  color: inherit;
  background: none;
}

/* 地球儀アイコン。24グリッド・stroke 1.25・round・単色の自作SVG(既存アイコン規範に合わせる)。
   currentColorをmaskで拾わせるため、色指定はwhite/透明のdata URIにしてある */

.head-lang > button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.4%27%2F%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2712%27%20rx%3D%273.6%27%20ry%3D%278.4%27%2F%3E%3Cpath%20d%3D%27M3.8%209.4h16.4%27%2F%3E%3Cpath%20d%3D%27M3.8%2014.6h16.4%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.4%27%2F%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%2712%27%20rx%3D%273.6%27%20ry%3D%278.4%27%2F%3E%3Cpath%20d%3D%27M3.8%209.4h16.4%27%2F%3E%3Cpath%20d%3D%27M3.8%2014.6h16.4%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

.head-lang > button::after {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  margin-top: 4px;
}

.head-lang .sub {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 168px;
  padding: 8px 0;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 200ms var(--ease), visibility 200ms, transform 200ms var(--ease);
}

.head-lang:hover .sub, .head-lang:focus-within .sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.head-lang .sub a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  padding-left: 18px;
  padding-right: 18px;
  font-size: 13px;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(74 74 74 / var(--tw-text-opacity, 1));
}

.head-lang .sub a:hover {
  background: var(--paper-1);
  color: var(--ink);
}

/* 選択中は赤+太字に加え、チェックマークを表示。全項目にアイコン分の枠を確保して
   文字の頭を揃え、選択中だけmaskを可視化する */

.head-lang .sub a::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012.5l5.5%205.5L20%206.5%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012.5l5.5%205.5L20%206.5%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

.head-lang .sub a[aria-current] {
  color: var(--red);
  font-weight: 700;
}

.head-lang .sub a[aria-current]::before {
  opacity: 1;
}

/* --- ヒーローの操作（ドット + 一時停止） ------------------------------------ */

/* --- 地図（Googleマップの埋め込み） ---------------------------------------- */

/* モバイル固定バーの副導線（主導線 .m-main と対で使う） */

.mfix .m-sub {
  background: var(--paper);
}

/* 版面から外に出す大判写真。1ページに1箇所だけ */

@media (min-width: 1360px) {
  .fig.bleed {
    margin-inline: calc((100vw - var(--wrap)) / -2 - var(--pad));
  }
}

/* 料金注記は宿泊料金と別だと分かる位置に置く。 */

.pricenote {
  margin-top: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-1);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: normal;
  color: var(--ink);
}

.pricenote .num {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 600;
}

.pricenote .cap {
  display: block;
  width: 100%;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* =============================================================================
   ブラッシュアップ版の追加部品
   ワイヤーの内容は落とさず、文章量と構成を整理した版で使う。
   狙いは「駅前の実用ホテルが食で勝負している」温度。情報を詰めて、写真を大きく切る。
   ========================================================================== */

/* --- 数字の帯。ファーストビュー直後に実用情報を出す ------------------------- */

/* --- 客室スライダー / プランカルーセル（Splide） --------------------------- */

.carousel {
  --car-side-scale: .9;
  --car-active-scale: 1;
}

/* scale は slide 本体に付けない（getBoundingClientRect が変わり中央計算が右へずれる） */

.carousel.splide .splide__slide {
  min-width: 0px;
}

.carousel.splide .splide__slide > * {
  transform: scale(var(--car-side-scale));
  transform-origin: center center;
  opacity: .62;
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
}

.carousel.splide .splide__slide.is-active > * {
  transform: scale(var(--car-active-scale));
  opacity: 1;
}

.carousel.splide .splide__track {
  overflow: hidden;
}

/* カルーセル矢印（Figma 382:16実測）。写真410×273pxの中央は137px。隣スライドの可視端245.5pxに半径28pxを足し、左右位置を273.5pxとする。 */

.carousel.splide .splide__arrow {
  top: 137px;
  transform: translateY(-50%);
  /* Tailwindの -translate-y-1/2 が splide側のreset に負けるので明示 */
  color: #ffffff;
  background: var(--navy);
  opacity: 1;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.carousel.splide .splide__arrow--prev {
  left: 12px;
}

.carousel.splide .splide__arrow--next {
  right: 12px;
}

.carousel.splide .splide__arrow:hover:not(:disabled) {
  color: #ffffff;
  background: var(--navy);
  opacity: 1;
}

.carousel.splide .splide__arrow:disabled {
  opacity: .3;
}

.carousel.splide .splide__arrow svg {
  width: 13px;
  height: 20px;
  fill: currentColor;
  transform: none;
}

/* splide既定の prev svg scaleX(-1) を無効化(下のrotateと二重になり右向きになる) */

.carousel.splide .splide__arrow svg path {
  fill: currentColor;
}

.carousel.splide .splide__arrow--prev .iarrow {
  transform: rotate(180deg);
  position: relative;
  left: -1px;
}

.carousel.splide .splide__arrow--next .iarrow {
  position: relative;
  left: 1px;
}

.carousel.splide .splide__arrow--prev:hover:not(:disabled) .iarrow {
  transform: rotate(180deg) translateX(1.5px);
}

.carousel.splide .splide__arrow--next:hover:not(:disabled) .iarrow {
  transform: translateX(1.5px);
}

@media (min-width: 1024px) {
  .carousel.splide .splide__arrow--prev {
    left: calc(50% - 273.5px);
  }

  .carousel.splide .splide__arrow--next {
    right: calc(50% - 273.5px);
  }
}

/* 客室とSPのプラン矢印は写真中央137px。PCのプラン矢印は本文を含むカード全高の中央。 */

/* .splide__arrows は inset-0 でページネーション行分だけ下を上げ、トラック下端を基準にする。 */

@media (min-width: 1024px) {
  .carousel-plan.splide .splide__arrows {
    bottom: 8px;
  }

  .carousel-plan.splide .splide__arrow {
    top: 50%;
    transform: translateY(-50%);
  }
}

.carousel.splide .splide__pagination {
  position: static;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0px;
}

.carousel-rooms.splide .splide__pagination,
.carousel-plan.splide .splide__pagination {
  margin-top: 40px;
}

.carousel.splide .splide__pagination__page {
  margin: 0px;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  border-width: 0px;
  background: #CFCFCF;
  opacity: 1;
  transform: none;
}

.carousel.splide .splide__pagination__page.is-active {
  background: #A70635;
  transform: none;
}

/* --- 横スクロールの写真列（滞在のイメージ） -------------------------------- */

.hscroll.wide {
  grid-auto-columns: 74%;
}

@media (min-width: 900px) {
  .hscroll.wide {
    grid-auto-columns: 380px;
  }
}

.hs-item .acc .num {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: normal;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .carousel.splide .splide__slide > * {
    transition: none;
  }
}

/* --- ギャラリー。写真だけを版面いっぱいに流す ------------------------------ */

/* 下層用 */

.gallery {
  padding-block: 0;
}

.gallery .hscroll {
  margin-inline: 0;
  padding-inline: 0;
  gap: 2px;
  grid-auto-columns: 74%;
}

@media (min-width: 900px) {
  .gallery .hscroll {
    grid-auto-columns: 30%;
  }
}

.gallery .fig {
  border-radius: 0;
}

/* --- ファーストビュー 案C: 写真全面。見出しは上、検索は写真の上に浮かせる ---- */

.fv-c {
  align-items: flex-end;
}

/* 見出しとリードは動画の上。検索だけ下の白地へ出す */

/* 見出しはヘッダー下端と検索フォーム上端の中央に置く。下余白は写真高・文字高・フォーム重なり量から求める。 */

/* SPの白抜きロゴを350pxに収めた状態で再実測し、ロゴ+見出し+リード文の中心を
   ヘッダー下端〜検索カード上端の中央に保つ。PC値は次のmedia内で維持 */

.fv-c .fv-in {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 246px;
  padding-top: 0px;
}

@media (min-width: 768px) {
  .fv-c .fv-in {
    padding-bottom: 192px;
  }
}

.fv-c .fv-in {
  text-align: center;
}

.fv-c .lead {
  margin-left: auto;
  margin-right: auto;
}

.p-family .fa-rules.fv-c .lead {
  margin-left: auto;
  margin-right: auto;
}

.fa-rules.fv-c .lead {
  margin-left: auto;
  margin-right: auto;
}

.fv-c .display, .fv-c .lead {
  color: #ffffff;
}

/* 薄い暗幕を文字の影で補い、可読性を確保する。 */

/* 写真の茶系トーンに馴染む色を使い、薄く広い影で文字を読みやすくする。 */

.fv-c .display {
  font-size: 36px;
  text-shadow: 0 2px 24px rgba(var(--hero-shadow-rgb), .35);
}

.fv-c .lead {
  max-width: 36em;
  font-size: 15px;
  font-weight: 400;
  text-shadow: 0 2px 20px rgba(var(--hero-shadow-rgb), .3);
}

/* 見出しの実測はドーミーイン36px・カンデオ40px・東横イン28px。その帯の中で大きめに取る */

@media (min-width: 768px) {
  .fv-c .display {
    font-size: 48px;
  }

  .fv-c .lead {
    font-size: 16px;
  }
}

@media (min-width: 1100px) {
  .fv-c .display {
    font-size: 54px;
  }
}

/* 白抜きロゴはラビスタ東京ベイ実測の幅比29%・下余白40pxを基準とする。明朝の読み込み前も書体が跳ねないよう serif にフォールバックする。 */

.fv-c .display {
  font-family: "Shippori Mincho Abest", serif;
  font-weight: 600;
}

.fv-head {
  background-color: #F5F5F5;
}

/* 検索は動画と白地の境目にまたがらせる。上半分が動画に、下半分が白地にかかる */

.fv-panel {
  position: relative;
  z-index: 3;
  border-radius: 8px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 22px;
  padding-bottom: 22px;
}

@media (min-width: 768px) {
  .fv-panel {
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.fv-panel {
  background-color: #ffffff;
  margin-top: -56px;
}

@media (min-width: 768px) {
  .fv-panel {
    margin-top: -64px;
  }
}

.fv-panel form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: flex-end;
  -moz-column-gap: 14px;
       column-gap: 14px;
  row-gap: 0.75rem;
}

@media (max-width: 899px) {
  .site-foot .fv-panel form {
    justify-items: center;
    text-align: center;
  }
}

@media (min-width: 900px) {
  .fv-panel form {
    grid-template-columns: repeat(4,1fr) auto;
    gap: 1rem;
  }
}

.fv-panel .field label {
  color: var(--ink-3);
}

.fv-panel .field input, .fv-panel .field select {
  border-radius: 6px;
  border-width: 0px;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
  background: #EBEBEB;
}

.fv-panel .searchbtn {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .fv-panel .searchbtn {
    grid-column: auto;
  }
}

.fv-panel .searchbtn .btn {
  width: 100%;
}

.fv-panel .sub-note {
  grid-column: 1 / -1;
  margin-top: 0;
  color: var(--ink-3);
}

.fv-panel .sub-note .uline {
  color: var(--ink-2);
  margin-left: 6px;
}

/* 明るい写真でも白文字を読めるよう、中間帯に薄い暗幕を残す。可読性は文字とロゴの影で補う。 */

.fv-c::after {
  background: linear-gradient(180deg, rgba(var(--dark-rgb), .16) 0%, rgba(var(--dark-rgb), .08) 26%, rgba(var(--dark-rgb), .30) 100%);
}

/* --- 画面幅いっぱいの写真モザイク。余白を作らず写真を敷き詰める --------------- */

.mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

@media (min-width: 900px) {
  .mosaic {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mz {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--dark);
}

.mz .fig {
  border-radius: 0;
  background: none;
}

.mz .fig img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 3 / 2;
}

@media (min-width: 900px) {
  .mz-lead {
    grid-column: span 2;
    grid-row: span 2;
  }

  .mz-lead .fig img {
    aspect-ratio: 3 / 2;
    height: 100%;
  }
}

.mz::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--dark-rgb), 0) 46%, rgba(var(--dark-rgb), .68) 100%);
}

.mz-t {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  color: #ffffff;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .mz-t {
    left: 18px;
    right: 18px;
    bottom: 16px;
    font-size: 14px;
  }
}

.mz-lead .mz-t {
  font-size: 15px;
}

@media (min-width: 900px) {
  .mz-lead .mz-t {
    font-size: 19px;
  }
}

.mz-t span {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  opacity: .82;
  margin-top: 2px;
}

.mz .fig img {
  transition: transform 600ms var(--ease);
}

.mz:hover .fig img {
  transform: scale(1.03);
}

/* --- 他拠点の一覧（フッターの上） ------------------------------------------- */

/* グループ施設への導線。 */

.groupnav {
  background: var(--paper);
  padding-block: 45px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .groupnav {
    padding-block: 60px;
  }
}

.gn-h {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: normal;
  margin-bottom: 18px;
}

.gn-k {
  font-size: 13px;
  letter-spacing: normal;
  color: var(--ink-3);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.groupnav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--ink);
  width: -moz-fit-content;
  width: fit-content;
}

.groupnav a:hover {
  color: var(--red);
}

.groupnav a[aria-current] {
  color: var(--red);
}

/* 予約フォームのラベルにアイコン。東横インも各項目にアイコンを添えている */

.field label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.field label .fi {
  flex: 0 0 auto;
  opacity: .85;
}

/* モザイクの下段を1枚で受ける。4枚でも穴が空かない */

@media (min-width: 900px) {
  .mz-wide {
    grid-column: span 2;
  }
}

/* --- セクションの見出し ------------------------------------------------------
   実サイト9本を調べたところ、多数派(7本)は「見出しだけ置いて、右端に一覧への
   リンクを1つ」で、リード文を挟まずすぐ写真やカードに入る。左に見出し・右に説明
   という2カラムはNOHGAとMIMARUの一部セクションだけだったので、多数派に寄せる */

.sec-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}

.sec-more:hover {
  color: var(--red);
}

/* --- 館内設備の一覧 -----------------------------------------------------------
   スーパーホテル(5項目)と三井ガーデン銀座プレミア(6項目)がどちらも横一列で並べて
   いる。囲み枠は付けず、アイコンを上・文字を下に置く形もプレミアに倣った */

.faclist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 12px;
  margin-top: 28px;
  list-style: none;
}

@media (min-width: 768px) {
  .faclist {
    grid-template-columns: repeat(6, 1fr);
  }
}

.fac {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fac-i {
  color: var(--ink-2);
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.fac-n {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 6px;
}

.fac-s {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 2px;
}

/* 2枚のときは画面幅を半分ずつ使う */

@media (min-width: 900px) {
  .mosaic:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- フォトギャラリー ---------------------------------------------------------
   三井ガーデン銀座プレミアの Photo Gallery に倣い、見出しと一覧へのリンクだけ置いて
   すぐ写真に入る。角丸と影は付けない（多拠点19サイト中17サイトが写真を角丸にしない） */

.pgal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 900px) {
  .pgal {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pg .fig {
  border-radius: 0;
  background: var(--paper-2);
}

.pg .fig img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 3 / 2;
  display: block;
}

@media (min-width: 900px) {
  .pg-lead {
    grid-column-end: span 2;
    grid-row-end: span 2;
  }

  .pg-lead .fig, .pg-lead .fig img {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* --- 予約再掲バンド。相鉄フレッサインと同じく左右で写真を分ける -----------------
   1枚の写真の上に2列を置くと、右側が壁の面になって文字が沈む。左右それぞれに
   別の写真を敷いて、中央に文字を置く */

.rebook2 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .rebook2 {
    grid-template-columns: 1fr 1fr;
  }
}

.rb {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  min-height: 300px;
  display: flex;
}

@media (min-width: 768px) {
  .rb {
    min-height: 380px;
  }
}

.rb-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.rb-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 左右の写真に境目が出ないよう、予約帯全体に一枚の連続した暗幕を重ねる。 */

.rebook2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--dark-rgb), .50) 0%, rgba(var(--dark-rgb), .60) 100%);
}

.rb-in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: 50px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .rb-in {
    padding: 60px 40px;
  }
}

.rb-h {
  font-family: var(--f-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: normal;
}

.rb-k {
  font-size: 13px;
  color: color-mix(in srgb, #ffffff 86%, transparent);
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.rb-k::before, .rb-k::after {
  content: "";
  width: 24px;
  height: 1px;
  background: color-mix(in srgb, #ffffff 50%, transparent);
}

.rb-t {
  font-size: 15px;
  color: color-mix(in srgb, #ffffff 86%, transparent);
  margin-top: 8px;
}

.rb-phone {
  font-family: var(--f-head);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  margin-top: 14px;
}

.rb-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
  text-align: left;
}

.rb-form .rb-dr-field {
  grid-column: 1 / -1;
}

.rb-form .field label {
  color: color-mix(in srgb, #ffffff 78%, transparent);
}

.rb-form .field input, .rb-form .field select {
  background: var(--paper-2);
  border: 0;
  border-radius: 6px;
  color: var(--ink);
}

.rb-btn {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}

/* --- 薄い地の帯。東横インの「東横INNについて」と同じ組み ----------------------
   実測: 地は rgba(192,210,221,.18) を画面幅いっぱいに敷き、その上に白いカードを
   置く。カードは border 1px・radius 12px・padding 32/24、アイコンは56pxの地付きタイル。
   こちらは地の色をブランドの赤から起こしている */

.tintband {
  position: relative;
}

.tintband .tint {
  position: absolute;
  inset: 0;
  background: var(--facility-tint-band);
}

.tint-in {
  position: relative;
}

/* 白いカードにすると左右の余白のぶん見出しと左端がずれるので、地の上に直接置く。
   区切りは罫1本だけにする（枠線は使わない） */

.fcard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-width: 0px;
  border-top-width: 1px;
  border-style: solid;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-top-color: color-mix(in srgb, #231815 12%, transparent);
}

.fcard-i {
  margin-top: 1px;
  display: flex;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(74 74 74 / var(--tw-text-opacity, 1));
  flex-basis: 26px;
}

.fcard > div {
  min-width: 0px;
}

.fcard-h {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", Meiryo, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.fcard-t {
  margin-top: 0.25rem;
  font-size: 15px;
  line-height: 1.7;
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
  overflow-wrap: anywhere;
}

/* 薄い地の上に置くカードは白で抜く */

.card-w {
  overflow: hidden;
  border-radius: 12px;
  /* @apply bg-paper は .bg-paper .tile を巻き込むため使わない */
  background-color: #ffffff;
}

.card-w .fig {
  border-radius: 0px;
}

.card-w .card-b {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 22px;
  padding-top: 18px;
}

/* 最低価格保証の注記は色で区別する。 */

.sub-link {
  margin-left: 0.375rem;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgb(167 6 53 / var(--tw-text-opacity, 1));
}

.sub-link:hover {
  --tw-text-opacity: 1;
  color: rgb(124 25 44 / var(--tw-text-opacity, 1));
}

.sub-link {
  margin-block: -10px;
}

/* 見出しの脇に置く総括。カードの下に1文だけ置くと片側にぶら下がって見える */

.sec-meta {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 6px;
}

/* ビュッフェはコンテンツ幅内の2カラム。カードグリッドの既定を使う。 */

/* 料金だけ大きく出す。同価格帯のサイトは、数字だけ本文の2倍前後まで上げている。
   ここが1ページで唯一の大きい数字になる */

.price-big {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--navy);
  vertical-align: -2px;
}

@media (min-width: 768px) {
  .price-big {
    font-size: 34px;
  }
}

/* 主料金と補助料金は級数・色・ウェイトで区別する。 */

.price-sub {
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-3);
}

.price-cap {
  display: inline-block;
  font-size: 12px;
  color: var(--ink-4);
  margin-left: 8px;
}

/* 料金はラベルと金額を一組で折り返し、ラベル途中の改行を防ぐ。 */

.price-line {
  margin-top: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
  row-gap: 0.25rem;
}

.price-line .price-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  white-space: nowrap;
  font-size: 13.5px;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(74 74 74 / var(--tw-text-opacity, 1));
}

.price-line .price-cap {
  margin-left: 0px;
  white-space: nowrap;
}

.price-line.price-line-sub {
  margin-top: 0.125rem;
}

/* --- セクションごとに余白を変える ---------------------------------------------
   同価格帯10サイトを測ったところ、セクションの高さを揃えているサイトは0件だった。
   主役(ビュッフェ)に余白を寄せ、事務のセクション(館内・お知らせ・FAQ)は詰める */

@media (min-width: 768px) {
  #dining {
    padding-block: 90px 80px;
  }

  #concept {
    padding-block: 75px;
  }

  #rooms {
    padding-block: 50px;
  }

  #plan {
    padding-block: 55px;
  }

  #facility {
    padding-block: 45px;
  }

  #topics {
    padding-block: 40px 50px;
  }

  #faq {
    padding-block: 45px 60px;
  }
}

/* リボンはロゴのマークを見出しと背景装飾に使う。 */

.rib {
  display: inline-block;
  width: 3.1em;
  height: auto;
  color: var(--red);
  vertical-align: -0.3em;
  margin-right: 0.3em;
}

.h-sec .rib {
  opacity: .9;
}

/* グループ一覧のリボンは右下に置き、セクション幅からはみ出す部分をマスクする。 */

/* SPのリボンは左右と下端を見切れさせるため、overflow:hidden を保持する。 */

.groupnav .rib-bg {
  position: absolute;
  right: -260px;
  bottom: -190px;
  width: 1550px;
  height: 470px;
  color: var(--red);
  opacity: .12;
  transform: rotate(-32deg);
  transform-origin: center;
  pointer-events: none;
}

@media (max-width: 900px) {
  .groupnav .rib-bg {
    width: 1000px;
    height: 303px;
    right: -120px;
    bottom: -70px;
    transform: rotate(-38deg);
  }
}

/* 周辺スポットの名称と距離を一まとまりに見せる。PC/SP共通 */

.foot-links {
  display: flex;
  gap: 24px;
}

/* --- 下層ページヒーロー --------------------------------------------------- */

.pagehero {
  background: #F5F5F5;
  /* 固定ヘッダー(白座布団)+ニュース帯のぶん本文を下げる。.firstviewと同じ作法 */
  margin-top: calc(var(--head-h) + var(--news-h));
  min-height: 240px;
  display: flex;
  align-items: flex-end;
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6B6B6B;
}

.crumb a:hover {
  color: #231815;
}

.pagehero .label {
  margin-top: 20px;
  margin-bottom: 20px;
}

.pagehero .lead {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .pagehero {
    min-height: 360px;
  }
}

/* 写真なしFVは本文までの空きを抑える。 */

.pagehero.pagehero-compact {
  min-height: 0;
}

/* 写真入りFVは400pxの写真に暗幕と白見出しを重ねる。リードは写真の直下に置く。 */

.pagehero-photo-mode {
  display: block;
  min-height: 0;
  background: #fff;
}

.pagehero-photo {
  position: relative;
  height: 280px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #231815;
}

.pagehero-photo-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.pagehero-photo-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}

.pagehero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.5) 100%);
}

.pagehero-photo.is-dark::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);
}

/* パンくずと題名が互いの位置に影響しないよう、それぞれ絶対配置する。 */

.pagehero-photo-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pagehero-photo-crumb-row {
  position: absolute;
  inset-inline: 0;
  top: 36px;
}

.pagehero-photo-crumb, .pagehero-photo-crumb a {
  color: rgba(255,255,255,.8);
}

.pagehero-photo-crumb a:hover {
  color: #fff;
}

.pagehero-photo-title-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pagehero-photo-title {
  color: #fff;
}

.pagehero-photo-lead {
  margin-inline: auto;
  max-width: 720px;
}

@media (min-width: 768px) {
  .pagehero-photo {
    height: 400px;
  }
}

/* 料金表は行区切りだけに罫線を使い、数字は等幅で桁を揃える。 */

.tablewrap {
  overflow-x: auto;
}

.wt {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}

.wt th, .wt td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.wt thead th {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
}

.wt tbody th {
  font-weight: 700;
  white-space: nowrap;
}

.wt .price, .wt .num {
  font-variant-numeric: tabular-nums;
}

.wt .price {
  font-weight: 700;
}

/* 問い合わせフォームは明色面のため、濃色面用ラベルの白を墨色に上書きする。 */

.p-contact-form .field label {
  color: var(--ink-2);
}

.p-contact-form .field .req {
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
}

/* .fig直下の画像は枠に合わせて切り抜く。picture経由の画像とは分けて指定する。 */

.fig > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* 1カラムの見出しと説明は中央、左右分割の2カラムは左に揃える。 */

.lg\:grid-cols-12 .h-sec {
  text-align: left;
}

.lg\:grid-cols-12 .lead {
  margin-inline: 0;
  text-align: left;
}

/* 明示指定（stack-deflist の heading_align など） */

.h-sec.text-left {
  text-align: left;
}

.h-sec.text-center {
  text-align: center;
}

/* --- 記事本文（single.php / Gutenberg出力）。ブロックCSSはdequeueしているためここで組む
   級数・行間は .body、見出しは .h-sub / title-compact。色はトークンのみ ----------- */

.entry {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.entry > *:first-child {
  margin-top: 0;
}

.entry > *:last-child {
  margin-bottom: 0;
}

.entry p {
  margin: 0 0 1.15em;
}

.entry h2, .entry h3, .entry h4,
.entry .wp-block-heading {
  font-family: var(--f-head);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: normal;
  word-break: auto-phrase;
}

.entry h2, .entry h2.wp-block-heading {
  font-size: 19px;
  line-height: 1.45;
  margin: 1.75em 0 0.65em;
}

.entry h3, .entry h3.wp-block-heading {
  font-size: 16px;
  line-height: 1.5;
  margin: 1.5em 0 0.5em;
}

.entry h4, .entry h4.wp-block-heading {
  font-size: 15px;
  line-height: 1.5;
  margin: 1.35em 0 0.45em;
}

.entry a:not(.btn):not(.btn-out):not(.tlink):not(.badge) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.entry a:not(.btn):not(.btn-out):not(.tlink):not(.badge):hover {
  color: var(--red);
}

.entry ul, .entry ol {
  margin: 0 0 1.15em;
  padding-left: 1.25em;
}

.entry ul {
  list-style: disc;
}

.entry ol {
  list-style: decimal;
}

.entry li + li {
  margin-top: 0.4em;
}

.entry li::marker {
  color: var(--ink-3);
}

.entry img {
  border-radius: 4px;
  height: auto;
}

.entry figure {
  margin: 1.5em 0;
}

.entry figcaption {
  margin-top: 0.5em;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-3);
  text-align: center;
}

.entry blockquote {
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 3px solid var(--red);
  color: var(--ink);
}

.entry hr, .entry .wp-block-separator {
  margin: 1.75em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.entry table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
  margin: 1.5em 0;
}

.entry th, .entry td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.entry thead th {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
}

.entry .aligncenter {
  margin-inline: auto;
}

.entry .alignleft {
  float: left;
  margin: 0 1em 0.75em 0;
}

.entry .alignright {
  float: right;
  margin: 0 0 0.75em 1em;
}

.entry .has-text-align-center {
  text-align: center;
}

.entry .has-text-align-right {
  text-align: right;
}

.entry .wp-block-embed {
  margin: 1.5em 0;
}

.entry .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper-2);
}

.entry .wp-block-embed iframe,
.entry .wp-block-embed embed,
.entry .wp-block-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.entry .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.5em 0;
}

.entry .wp-block-button__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 6px;
  background: var(--navy);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.entry .wp-block-button__link:hover {
  background: var(--paper);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.entry .wp-block-columns {
  display: grid;
  gap: 1.25em;
  margin: 1.5em 0;
}

@media (min-width: 768px) {
  .entry .wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* お知らせ本文: 公式サイト同等の画像2列（3〜4枚時は折り返し） */

.entry .news-img-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.5em 0;
}

.entry .news-img-item {
  width: 100%;
  min-width: 0;
}

.entry .news-img-item figure,
.entry .news-img-wide figure {
  margin: 0;
}

.entry .news-img-item img,
.entry .news-img-wide img {
  display: block;
  width: 100%;
  height: auto;
}

.entry .news-img-wide {
  margin: 1.5em 0;
}

@media (min-width: 768px) {
  .entry .news-img-item {
    width: calc(50% - 6px);
  }
}

/* サイトマップは既定のバレットとインデントを外し、見出しとリンクの左端を揃える。 */

.sitemap-list ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.sitemap-list li {
  margin: 0;
}

.sitemap-list li + li {
  margin-top: 8px;
}

.sitemap-list a {
  color: var(--ink) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
}

.sitemap-list a:hover {
  color: var(--ink-2) !important;
  text-decoration: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.z-10 {
  z-index: 10;
}

.z-2 {
  z-index: 2;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-start-4 {
  grid-column-start: 4;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-\[10px\] {
  margin-bottom: 10px;
}

.mb-\[11px\] {
  margin-bottom: 11px;
}

.mb-\[14px\] {
  margin-bottom: 14px;
}

.mb-\[25px\] {
  margin-bottom: 25px;
}

.mb-\[4px\] {
  margin-bottom: 4px;
}

.mb-\[56px\] {
  margin-bottom: 56px;
}

.mb-\[6px\] {
  margin-bottom: 6px;
}

.mb-s2 {
  margin-bottom: 20px;
}

.mb-s3 {
  margin-bottom: 30px;
}

.mt-0 {
  margin-top: 0px;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-\[18px\] {
  margin-top: 18px;
}

.mt-\[22px\] {
  margin-top: 22px;
}

.mt-\[25px\] {
  margin-top: 25px;
}

.mt-\[2px\] {
  margin-top: 2px;
}

.mt-\[36px\] {
  margin-top: 36px;
}

.mt-\[40px\] {
  margin-top: 40px;
}

.mt-\[56px\] {
  margin-top: 56px;
}

.mt-auto {
  margin-top: auto;
}

.mt-s2 {
  margin-top: 20px;
}

.mt-s3 {
  margin-top: 30px;
}

.mt-s4 {
  margin-top: 50px;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-full {
  width: 100%;
  height: 100%;
}

.h-\[3px\] {
  height: 3px;
}

.h-\[var\(--head-h\)\] {
  height: var(--head-h);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.min-h-6 {
  min-height: 1.5rem;
}

.min-h-\[140px\] {
  min-height: 140px;
}

.min-h-full {
  min-height: 100%;
}

.w-24 {
  width: 6rem;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-\[40em\] {
  max-width: 40em;
}

.max-w-\[560px\] {
  max-width: 560px;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[760px\] {
  max-width: 760px;
}

.max-w-\[calc\(50\%-7px\)\] {
  max-width: calc(50% - 7px);
}

.max-w-full {
  max-width: 100%;
}

.max-w-none {
  max-width: none;
}

.max-w-wrap {
  max-width: 1184px;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.basis-full {
  flex-basis: 100%;
}

.border-collapse {
  border-collapse: collapse;
}

.origin-center {
  transform-origin: center;
}

.origin-left {
  transform-origin: left;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-x-0 {
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.content-center {
  align-content: center;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-center {
  justify-content: center;
}

.justify-items-center {
  justify-items: center;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-\[14px\] {
  gap: 14px;
}

.gap-\[15px\] {
  gap: 15px;
}

.gap-\[25px\] {
  gap: 25px;
}

.gap-\[50px\] {
  gap: 50px;
}

.gap-\[7px\] {
  gap: 7px;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-\[10px\] {
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.gap-x-\[14px\] {
  -moz-column-gap: 14px;
       column-gap: 14px;
}

.gap-x-\[22px\] {
  -moz-column-gap: 22px;
       column-gap: 22px;
}

.gap-x-\[25px\] {
  -moz-column-gap: 25px;
       column-gap: 25px;
}

.gap-x-\[50px\] {
  -moz-column-gap: 50px;
       column-gap: 50px;
}

.gap-y-0 {
  row-gap: 0px;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-y-\[14px\] {
  row-gap: 14px;
}

.gap-y-\[22px\] {
  row-gap: 22px;
}

.gap-y-\[30px\] {
  row-gap: 30px;
}

.gap-y-s3 {
  row-gap: 30px;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-\[56px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(56px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(56px * var(--tw-space-y-reverse));
}

.self-center {
  align-self: center;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-balance {
  text-wrap: balance;
}

.rounded-abest {
  border-radius: 4px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-none {
  border-radius: 0px;
}

.rounded-t-abest {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-solid {
  border-style: solid;
}

.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
}

.bg-\[rgba\(0\2c 0\2c 0\2c \.28\)\] {
  background-color: rgba(0,0,0,.28);
}

.bg-\[var\(--red\)\] {
  background-color: var(--red);
}

.bg-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(28 21 18 / var(--tw-bg-opacity, 1));
}

.bg-navy {
  --tw-bg-opacity: 1;
  background-color: rgb(31 51 82 / var(--tw-bg-opacity, 1));
}

.bg-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-paper-1 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.bg-paper-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-2 {
  padding: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-\[14px\] {
  padding-left: 14px;
  padding-right: 14px;
}

.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}

.px-\[var\(--pad\)\] {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-\[14px\] {
  padding-top: 14px;
  padding-bottom: 14px;
}

.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}

.py-\[35px\] {
  padding-top: 35px;
  padding-bottom: 35px;
}

.py-\[45px\] {
  padding-top: 45px;
  padding-bottom: 45px;
}

.py-s3 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.py-s6 {
  padding-top: 120px;
  padding-bottom: 120px;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-\[45px\] {
  padding-bottom: 45px;
}

.pb-s1 {
  padding-bottom: 10px;
}

.pl-0 {
  padding-left: 0px;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pt-2\.5 {
  padding-top: 0.625rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-\[16px\] {
  padding-top: 16px;
}

.pt-\[18px\] {
  padding-top: 18px;
}

.pt-s2 {
  padding-top: 20px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.align-top {
  vertical-align: top;
}

.font-head {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", Meiryo, sans-serif;
}

.font-sans-jp {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;
}

.text-\[1\.15em\] {
  font-size: 1.15em;
}

.text-body {
  font-size: 15px;
}

.text-caption {
  font-size: 13px;
}

.text-compact {
  font-size: 12.5px;
}

.text-detail {
  font-size: 13.5px;
}

.text-heading-sm {
  font-size: 24px;
}

.text-meta {
  font-size: 14px;
}

.text-micro {
  font-size: 12px;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.leading-\[1\.45\] {
  line-height: 1.45;
}

.leading-\[1\.4\] {
  line-height: 1.4;
}

.leading-\[1\.5\] {
  line-height: 1.5;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.leading-\[1\.8\] {
  line-height: 1.8;
}

.tracking-\[0\.01em\] {
  letter-spacing: 0.01em;
}

.tracking-normal {
  letter-spacing: 0em;
}

.text-inherit {
  color: inherit;
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(35 24 21 / var(--tw-text-opacity, 1));
}

.text-ink-2 {
  --tw-text-opacity: 1;
  color: rgb(74 74 74 / var(--tw-text-opacity, 1));
}

.text-ink-3 {
  --tw-text-opacity: 1;
  color: rgb(107 107 107 / var(--tw-text-opacity, 1));
}

.text-ink-4 {
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1));
}

.text-red {
  --tw-text-opacity: 1;
  color: rgb(167 6 53 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.no-underline {
  text-decoration-line: none;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-\[180ms\] {
  transition-duration: 180ms;
}

.duration-\[260ms\] {
  transition-duration: 260ms;
}

.duration-\[400ms\] {
  transition-duration: 400ms;
}

.ease-abest {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere;
}

.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

.\[transform\:scale\(\.\.\.\)\] {
  transform: scale(...);
}

.\[transform\:scale\(1\)\] {
  transform: scale(1);
}

.\[word-break\:keep-all\] {
  word-break: keep-all;
}

.marker\:text-ink-3 *::marker {
  color: rgb(107 107 107 );
}

.marker\:text-ink-3::marker {
  color: rgb(107 107 107 );
}

.hover\:bg-paper-2:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 235 235 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-red {
  --tw-text-opacity: 1;
  color: rgb(167 6 53 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-\[\.88\] {
  opacity: .88;
}

.group:hover .group-hover\:opacity-\[0\.88\] {
  opacity: 0.88;
}

.group.is-on .group-\[\.is-on\]\:\[transform\:scale\(1\.25\)\] {
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:hidden {
    display: none;
  }
}

@media not all and (min-width: 900px) {
  .max-lg\:relative {
    position: relative;
  }

  .max-lg\:after\:pointer-events-none::after {
    content: var(--tw-content);
    pointer-events: none;
  }

  .max-lg\:after\:sticky::after {
    content: var(--tw-content);
    position: sticky;
  }

  .max-lg\:after\:right-0::after {
    content: var(--tw-content);
    right: 0px;
  }

  .max-lg\:after\:flex-\[0_0_32px\]::after {
    content: var(--tw-content);
    flex: 0 0 32px;
  }

  .max-lg\:after\:self-stretch::after {
    content: var(--tw-content);
    align-self: stretch;
  }

  .max-lg\:after\:bg-\[linear-gradient\(90deg\2c rgba\(245\2c 245\2c 245\2c 0\)\2c theme\(colors\.paper-1\)\)\]::after {
    content: var(--tw-content);
    background-image: linear-gradient(90deg,rgba(245,245,245,0),#F5F5F5);
  }

  .max-lg\:after\:content-\[\'\'\]::after {
    --tw-content: '';
    content: var(--tw-content);
  }
}

@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .md\:mt-\[80px\] {
    margin-top: 80px;
  }

  .md\:h-\[30px\] {
    height: 30px;
  }

  .md\:h-s3 {
    height: 30px;
  }

  .md\:w-\[120px\] {
    width: 120px;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:max-w-none {
    max-width: none;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:grid-cols-\[minmax\(240px\2c 40\%\)_1fr\] {
    grid-template-columns: minmax(240px,40%) 1fr;
  }

  .md\:gap-\[25px\] {
    gap: 25px;
  }

  .md\:gap-s2 {
    gap: 20px;
  }

  .md\:space-y-\[72px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(72px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(72px * var(--tw-space-y-reverse));
  }

  .md\:py-\[160px\] {
    padding-top: 160px;
    padding-bottom: 160px;
  }

  .md\:py-\[65px\] {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .md\:py-\[70px\] {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .md\:py-s4 {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .md\:pb-8 {
    padding-bottom: 2rem;
  }

  .md\:pb-\[65px\] {
    padding-bottom: 65px;
  }

  .md\:pb-s2 {
    padding-bottom: 20px;
  }

  .md\:pt-\[24px\] {
    padding-top: 24px;
  }

  .md\:pt-s3 {
    padding-top: 30px;
  }

  .md\:text-center {
    text-align: center;
  }

  .md\:text-body-lg {
    font-size: 16px;
  }
}

@media (min-width: 900px) {
  .lg\:relative {
    position: relative;
  }

  .lg\:isolate {
    isolation: isolate;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:col-start-5 {
    grid-column-start: 5;
  }

  .lg\:col-start-7 {
    grid-column-start: 7;
  }

  .lg\:col-start-8 {
    grid-column-start: 8;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:aspect-auto {
    aspect-ratio: auto;
  }

  .lg\:h-\[320px\] {
    height: 320px;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.4fr_1fr_1fr_1fr\] {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  .lg\:grid-cols-\[1fr_3fr\] {
    grid-template-columns: 1fr 3fr;
  }

  .lg\:grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:gap-\[60px\] {
    gap: 60px;
  }

  .lg\:gap-x-\[28px\] {
    -moz-column-gap: 28px;
         column-gap: 28px;
  }

  .lg\:gap-x-\[30px\] {
    -moz-column-gap: 30px;
         column-gap: 30px;
  }

  .lg\:gap-y-0 {
    row-gap: 0px;
  }

  .lg\:gap-y-\[25px\] {
    row-gap: 25px;
  }

  .lg\:overflow-visible {
    overflow: visible;
  }

  .lg\:whitespace-normal {
    white-space: normal;
  }

  .lg\:border-t {
    border-top-width: 1px;
  }

  .lg\:border-solid {
    border-style: solid;
  }

  .lg\:border-line {
    --tw-border-opacity: 1;
    border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
  }

  .lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-\[18px\] {
    padding-left: 18px;
    padding-right: 18px;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-\[22px\] {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .lg\:last\:border-b:last-child {
    border-bottom-width: 1px;
  }

  .min-\[900px\]\:flex {
    display: flex;
  }

  .min-\[900px\]\:w-\[calc\(33\.333\%-14\.667px\)\] {
    width: calc(33.333% - 14.667px);
  }

  .min-\[900px\]\:flex-none {
    flex: none;
  }

  .min-\[900px\]\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .min-\[900px\]\:flex-wrap {
    flex-wrap: wrap;
  }

  .min-\[900px\]\:justify-center {
    justify-content: center;
  }

  .min-\[900px\]\:px-\[22px\] {
    padding-left: 22px;
    padding-right: 22px;
  }

  .min-\[900px\]\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .min-\[900px\]\:pt-\[22px\] {
    padding-top: 22px;
  }
}

@media (min-width: 1100px) {
  .xl\:\!hidden {
    display: none !important;
  }

  .xl\:\!min-w-0 {
    min-width: 0px !important;
  }

  .xl\:\!gap-2 {
    gap: 0.5rem !important;
  }

  .xl\:\!gap-4 {
    gap: 1rem !important;
  }

  .xl\:\!px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .xl\:\!pl-0 {
    padding-left: 0px !important;
  }

  .xl\:\!pl-2 {
    padding-left: 0.5rem !important;
  }

  .xl\:\!pr-0 {
    padding-right: 0px !important;
  }

  .xl\:\!pr-2 {
    padding-right: 0.5rem !important;
  }
}

@media (min-width: 1200px) {
  .\32xl\:\!ml-3 {
    margin-left: 0.75rem !important;
  }

  .\32xl\:\!block {
    display: block !important;
  }

  .\32xl\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.\[\&\.is-on\]\:z-1.is-on {
  z-index: 1;
}

.\[\&\.is-on\]\:block.is-on {
  display: block;
}

.\[\&\.is-on\]\:font-bold.is-on {
  font-weight: 700;
}

.\[\&\.is-on\]\:text-red.is-on {
  --tw-text-opacity: 1;
  color: rgb(167 6 53 / var(--tw-text-opacity, 1));
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

/* =============================================================================
   ページ別の調整（旧 tuning.css）。utilities より後ろに置き、カスケード順を保つ
   ========================================================================== */

/* ファーストビュー */

/* 768〜899pxではフォームが2列になりカードが高いため、写真エリアにも高さを確保する。 */

.fv {
  height: 700px;
}

@media (min-width: 768px) {
  .fv {
    height: 725px;
  }
}

@media (min-width: 900px) {
  .fv {
    height: 690px;
  }
}

/* 検索カードの食い込み量はフォーム列数ごとの実測値。カードの重なりと見出しの中央位置に同じ変数を使う。 */

:root {
  --fv-overlap: 313px;
}

@media (min-width: 430px)  {
  :root {
    --fv-overlap: 313px;
  }
}

@media (min-width: 768px)  {
  :root {
    --fv-overlap: 274px;
  }
}

@media (min-width: 900px)  {
  :root {
    --fv-overlap: 160px;
  }
}

@media (min-width: 1100px) {
  :root {
    --fv-overlap: 134px;
  }
}

.fv-panel {
  margin-top: calc(-1 * var(--fv-overlap));
}

.fv-c {
  align-items: stretch;
}

.fv-c .fv-in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  padding-bottom: var(--fv-overlap);
}

/* h1 の文字サイズは元のまま（SP 36px / 768〜 48px / 1100〜 54px） */

.fv-c::after {
  background: linear-gradient(180deg,
    rgba(var(--dark-rgb), .24) 0%,
    rgba(var(--dark-rgb), .20) 45%,
    rgba(var(--dark-rgb), .38) 100%);
}

.fv-c .display {
  text-shadow:
    0 1px 3px  rgba(var(--hero-shadow-rgb), .30),
    0 2px 28px rgba(var(--hero-shadow-rgb), .45);
}

/* 「アベストグランデ札幌、」11文字が1行で入るサイズ（30pxだと側カラム幅を超えて
   3行に折れる） */

.feature-showcase-heading {
  font-size: 26px;
  line-height: 1.55;
}

.fv-eyebrow {
  margin-bottom: 15px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  text-shadow: 0 1px 3px rgba(var(--hero-shadow-rgb), .35), 0 2px 20px rgba(var(--hero-shadow-rgb), .40);
}

.fv-brand {
  margin-top: 20px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .14em;
  text-shadow: 0 1px 3px rgba(var(--hero-shadow-rgb), .35), 0 2px 20px rgba(var(--hero-shadow-rgb), .40);
}

@media (min-width: 768px) {
  .fv-eyebrow {
    margin-bottom: 20px;
    font-size: 20px;
  }

  .fv-brand {
    margin-top: 24px;
    font-size: 18px;
  }
}

.fv-video {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.lead-2col-body strong {
  font-weight: 700;
  color: var(--ink);
}

/* 3つの特長 */

/* stickyの追従範囲を保つため overflow-x:clip を使い、見出し列を高さ方向に伸ばす。 */

.feature-showcase {
  overflow: visible;
  overflow-x: clip;
}

.feature-showcase-side {
  align-self: stretch;
}

/* 固定ヘッダーと重ならないよう、追従位置にヘッダー高と余白を足す。 */

.feature-showcase-heading {
  top: calc(var(--head-h) + 56px);
}

.feature-showcase-logo {
  display: block;
  width: 260px;
  height: auto;
  margin-top: 12px;
}

@media (min-width: 768px) {
  .feature-showcase-logo {
    width: 300px;
    margin-top: 14px;
  }
}

/* ロゴは見出しの一部として見せたいので、本文との間を少し空ける */

.feature-showcase-logo + .feature-showcase-body {
  margin-top: 14px;
}

/* 写真は同じ並びを2組並べて継ぎ目なく流す。移動距離には継ぎ目のgap半分を含める。速度20px/秒はOMO7旭川の実測。周回時間と開始位置はHTMLの --fs-dur / --fs-delay で指定する。 */

/* splide.min.css は mount 前の .splide を visibility:hidden にして隠しておき、
   JS が is-initialized を付けたときに visible へ戻す。mount しない今の作りでは
   隠れたままになるので、ここで戻す（この1行が無いと写真が丸ごと消える） */

.feature-showcase-slider {
  visibility: visible;
}

.feature-showcase-slider .splide__list {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  gap: 8px;
  animation: fs-marquee var(--fs-dur, 115s) linear infinite;
  /* 3本が同じ位置から動き出すと、写真の継ぎ目が縦に揃って機械的に見える。
     負の delay で「すでに進んだ状態」から始め、1枚の1/3ずつ位相をずらす */
  animation-delay: var(--fs-delay, 0s);
}

@keyframes fs-marquee {
  from {
    transform: translateX(0);
  }

  to   {
    transform: translateX(calc(-50% - 4px));
  }
}

@media (max-width: 899px) {
  .feature-showcase-slider .splide__list {
    gap: 3px;
    animation-duration: var(--fs-dur-sp, 76s);
    animation-delay: var(--fs-delay-sp, 0s);
    animation-name: fs-marquee-sp;
  }

  @keyframes fs-marquee-sp {
    from {
      transform: translateX(0);
    }

    to   {
      transform: translateX(calc(-50% - 1.5px));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-showcase-slider .splide__list {
    animation: none;
  }
}

/* PCでは意味の切れ目で改行し、SPでは自動の折り返しに任せる。 */

.feature-showcase-title {
  width: min(320px, 100%);
}

@media (max-width: 767px) {
  .feature-showcase-title br {
    display: none;
  }
}

/* 本文の各行が離れすぎないよう行間を抑える。 */

.lead-2col-body {
  line-height: 1.85;
}

/* ヘッダーの赤は予約ボタンに絞る。 */

.head-phone .no {
  color: var(--ink);
}

/* ナビ項目は余白で区切る。 */

.nav .ni::before,
.nav .ni::after {
  display: none;
}

@media (min-width: 1200px) {
  .nav .ni {
    padding-inline: 14px;
  }
}

/* 宿泊プランのサンプル価格。数字を主役に、条件は小さく
   （数値はサンプル。正式料金に差し替えること） */

.plan-price {
  margin-bottom: 10px;
  color: var(--ink);
}

.plan-price .num {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .01em;
}

.plan-price .u {
  margin-left: 4px;
  font-size: 12px;
  color: var(--ink-2);
}

/* 特長の目次は追従中の現在地を示す。状態はJSの IntersectionObserver が切り替える。 */

.feature-showcase-heading-wrap {
  position: sticky;
  top: calc(var(--head-h) + 56px);
}

.feature-showcase-heading {
  position: static;
  top: auto;
}

.feature-showcase-nav {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-showcase-nav li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  max-width: 250px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
  transition: color 300ms ease;
}

.feature-showcase-nav li.is-current {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 899px) {
  .feature-showcase-nav {
    display: none;
  }

  .feature-showcase-heading-wrap {
    position: static;
  }
}

/* SPのカルーセル矢印を縮小。写真を覆いすぎている（B-6） */

@media (max-width: 767px) {
  .carousel.splide .splide__arrow {
    width: 40px;
    height: 40px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  }

  .carousel.splide .splide__arrow:hover:not(:disabled) {
    background: var(--ink);
    color: #ffffff;
  }

  .carousel.splide .splide__arrow svg {
    width: 8px;
    height: 12px;
  }
}

.m-sub-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.2;
}

.m-sub-tel .n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* フォトギャラリーはOMO7旭川実測のモザイク寸法を基準とする。タイル918×454px、gap10px、速度20px/秒。SPは先頭6枚を縦に並べる。 */

.pg-viewport {
  width: 100%;
  overflow: hidden;
}

.pg-track {
  display: flex;
  gap: 10px;
  width: -moz-max-content;
  width: max-content;
  /* 1周 = (918+10)×2 = 1856px ÷ 20px/秒 = 92.8s */
  animation: pg-marquee 92.8s linear infinite;
}

@keyframes pg-marquee {
  from {
    transform: translateX(0);
  }

  to   {
    transform: translateX(calc(-50% - 5px));
  }
}

.pg-viewport:focus-within .pg-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .pg-track {
    animation: none;
  }
}

.pg-tile {
  display: grid;
  grid-template-columns: 252px 192px 192px 252px;
  grid-template-rows: 252px 192px;
  gap: 10px;
}

.pg-slot {
  overflow: hidden;
  border-radius: 3px;
}

.pg-slot img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 鏡像配置: 左ブロックは大が上、右ブロックは大が下 */

.pg-s1 {
  grid-area: 1 / 1 / 2 / 3;
}

.pg-s2 {
  grid-area: 2 / 1 / 3 / 2;
}

.pg-s3 {
  grid-area: 2 / 2 / 3 / 3;
}

.pg-s4 {
  grid-area: 1 / 3 / 2 / 4;
}

.pg-s5 {
  grid-area: 1 / 4 / 2 / 5;
}

.pg-s6 {
  grid-area: 2 / 3 / 3 / 5;
}

@media (max-width: 899px) {
  .pg-track {
    display: block;
    width: auto;
    animation: none;
    padding: 0 20px;
  }

  /* SPは先頭タイルだけを縦モザイクに展開 */

  .pg-tile:not(:first-child) {
    display: none;
  }

  .pg-tile {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 3px;
  }

  .pg-slot {
    grid-area: auto !important;
    border-radius: 2px;
  }

  .pg-s1, .pg-s6 {
    grid-column: 1 / -1 !important;
    aspect-ratio: 9 / 5;
  }

  .pg-s2, .pg-s3, .pg-s4, .pg-s5 {
    aspect-ratio: 4 / 3;
  }
}

/* 見出しまわり。カウントは見出し直下の中央に */

.gal-head {
  text-align: center;
  margin-bottom: 26px;
}

.gal-count {
  display: block;
  margin-top: 6px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ベストレート保証と会員割引の帯。カードのpaddingを打ち消して全幅に敷く。 */

.rate-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  margin: -22px -18px 18px;
  padding: 11px 18px;
  border-radius: 8px 8px 0 0;
  background: var(--navy);
  color: #ffffff;
  text-align: center;
}

@media (min-width: 768px) {
  .rate-band {
    margin: -30px -26px 22px;
    padding: 13px 26px;
  }
}

.rate-band-ttl {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
}

.rate-band-sub {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  opacity: .92;
}

@media (min-width: 768px) {
  .rate-band-ttl {
    font-size: 20px;
  }

  .rate-band-sub {
    font-size: 14px;
  }
}

.fv-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  grid-column: 1 / -1;
}

.fv-foot-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}

.fv-foot-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

/* 電話ブロック。番号は太く、条件は小さく添える */

.fv-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 180ms ease;
}

.fv-tel:hover {
  opacity: .78;
}

.fv-tel-ico {
  flex: 0 0 auto;
  color: var(--navy);
}

.fv-tel-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}

.fv-tel-no {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.fv-tel-note {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .fv-foot {
    justify-content: center;
    text-align: center;
  }

  .fv-foot-main {
    justify-content: center;
    width: 100%;
  }

  /* SPは下部固定バーに電話があるので、カード内は控えめに */

  .fv-tel-no {
    font-size: 18px;
  }
}

.member-off {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  transition: opacity 180ms ease;
}

.member-off:hover {
  opacity: .78;
}

.member-off-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 3px;
  background: var(--red);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.member-off-txt strong {
  margin-left: 2px;
  color: var(--red);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
}

@media (min-width: 768px) {
  .member-off {
    font-size: 15px;
  }

  .member-off-txt strong {
    font-size: 21px;
  }
}

/* 補助リンクは控えめに（読みたい人だけが押せばよい） */

.fv-foot-links .sub-link {
  color: var(--ink-3);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.fv-foot-links .sub-link:hover {
  color: var(--ink-2);
}

/* ヘッダーの価格は条件・金額・補足の3段に分ける。OMO7旭川の表示構造を基準とする。 */

.head-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  line-height: 1.25;
  white-space: nowrap;
}

.head-price-cond {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
}

.head-price-amount {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}

.head-price-amount .yen {
  margin-left: 1px;
  font-size: .78em;
  font-weight: 700;
}

.head-price-note {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
}

/* CTAを2段に。上が動作（空室検索）、下が理由（当サイトが最もお得） */

.btn-head .btn-head-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.25;
}

.btn-head-main {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

.btn-head-sub {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .01em;
  opacity: .92;
}

.btn.btn-head {
  padding-top: 9px;
  padding-bottom: 9px;
  height: auto;
}

/* 予約フォーム下のCLUB ABESTバナーは、検索ボタンとの間をしっかり空ける */

#plan .club-banner {
  display: block;
}

#plan .mt-\[18px\] {
  margin-top: 46px;
}

/* 価格ブロックはナビが出る幅（1100px以上／ハンバーガーが消える境界）でだけ表示する。
   それ未満はロゴ＋ハンバーガーで幅が埋まり、元の電話番号も出していなかった。
   狭い画面の予約導線は下部固定バーが受け持つ */

.head-price {
  display: none;
}

@media (min-width: 1100px) {
  .head-price {
    display: flex;
  }

  /* HTML側に xl:!gap-2 (8px !important) が付いているので、こちらも !important で上書きする */

  .head-right {
    gap: 20px !important;
  }

  .head-lang {
    margin-left: 12px;
    margin-right: 4px;
  }
}

/* ハーフインクルーシブ：到着から翌朝までの時間軸。 */

.hi-intro {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

/* トップの「ビジネスから家族旅行まで、」と同じ級数（38px / SP 24px） */

.hi-intro-heading {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.476;
}

@media (min-width: 900px) {
  .hi-intro-heading {
    font-size: 38px;
  }
}

.pagehero-photo {
  height: 200px;
}

@media (min-width: 768px) {
  .pagehero-photo {
    height: 300px;
  }
}

.hi-intro-logo {
  display: block;
  width: min(300px, 100%);
  height: auto;
  margin: 26px auto 0;
}

@media (min-width: 768px) {
  .hi-intro-logo {
    width: 460px;
    margin-top: 32px;
  }
}

.hi-intro-body {
  margin-top: 22px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .01em;
  text-align: left;
}

@media (min-width: 768px) {
  .hi-intro-body {
    font-size: 16px;
    text-align: center;
  }
}

/* --- 時間軸 ---------------------------------------------------------------
   左に時刻の軸、右に内容。軸の線と点で「一泊の流れ」を示す。
   写真は .hi-step-figs の data-n（枚数）でグリッドが変わるので、
   figure を足すだけで1〜4枚に対応する */

.hi-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hi-step {
  position: relative;
  padding: 0 0 40px 26px;
}

@media (min-width: 768px) {
  .hi-step {
    padding: 0 0 52px 40px;
  }
}

/* 縦の軸線。最後の項目は線を出さない */

.hi-step::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: var(--line, #E0E0E0);
}

@media (min-width: 768px) {
  .hi-step::before {
    left: 6px;
  }
}

.hi-step:last-child::before {
  display: none;
}

/* 軸上の点 */

.hi-step::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}

@media (min-width: 768px) {
  .hi-step::after {
    top: 8px;
    left: 2px;
  }
}

.hi-step-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.hi-step-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .02em;
  white-space: nowrap;
}

.hi-step-title {
  margin: 0;
  font-family: var(--f-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

@media (min-width: 768px) {
  .hi-step-time {
    font-size: 14px;
  }

  .hi-step-title {
    font-size: 22px;
  }
}

.hi-step-body {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.9;
}

@media (min-width: 768px) {
  .hi-step-body {
    font-size: 15px;
    max-width: 46em;
  }
}

/* 写真。1枚なら大きく、2枚以上は並べる */

.hi-step-figs {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.hi-step-fig {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 3 / 2;
  background: var(--paper-2, #EEE);
}

.hi-step-fig img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 768px) {
  .hi-step-figs {
    gap: 10px;
    max-width: 860px;
  }

  .hi-step-figs[data-n="1"] {
    grid-template-columns: minmax(0, 520px);
  }

  .hi-step-figs[data-n="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hi-step-figs[data-n="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hi-step-figs[data-n="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* SPは1枚なら全幅、複数なら2列 */

@media (max-width: 767px) {
  .hi-step-figs[data-n="1"] {
    grid-template-columns: 1fr;
  }

  .hi-step-figs:not([data-n="1"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* イントロ下の注記。本文より一段落として置く */

.hi-intro-note {
  margin-top: 16px;
  text-align: left;
}

@media (min-width: 768px) {
  .hi-intro-note {
    text-align: center;
  }
}

/* 各サービスの但し書きは本文に続けて小さく */

.hi-step-note {
  display: inline-block;
  margin-left: 2px;
  font-size: 12px;
  color: var(--ink-3);
}

/* 下層の写真帯は共通速度20px/秒で流す。写真は高さ260px・比率3:2。枚数に応じてHTMLの --fm-dur を指定する。 */

.fm-viewport {
  overflow: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  margin-top: 44px;
}

.fm-track {
  display: flex;
  gap: 10px;
  width: -moz-max-content;
  width: max-content;
  animation: fm-marquee var(--fm-dur, 240s) linear infinite;
}

@keyframes fm-marquee {
  from {
    transform: translateX(0);
  }

  to   {
    transform: translateX(calc(-50% - 5px));
  }
}

.fm-viewport:focus-within .fm-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .fm-track {
    animation: none;
  }
}

.fm-item {
  flex: 0 0 auto;
  width: 390px;
  height: 260px;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper-2, #EEE);
}

.fm-item img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 767px) {
  .fm-viewport {
    margin-top: 30px;
  }

  .fm-track {
    gap: 6px;
    /* SPは1枚が小さいぶん1周の距離も短いので、同じ速度になるよう時間を詰める */
    animation-duration: calc(var(--fm-dur, 240s) * 0.62);
  }

  @keyframes fm-marquee-sp {
    from {
      transform: translateX(0);
    }

    to   {
      transform: translateX(calc(-50% - 3px));
    }
  }

  .fm-track {
    animation-name: fm-marquee-sp;
  }

  .fm-item {
    width: 240px;
    height: 160px;
  }
}

/* 朝食ビュッフェの本文。写真と素材の出典は現行 breakfast.html。 */

/* 写真＋テキストの2カラム。duo-rev で左右反転 */

.duo {
  display: grid;
  gap: 24px;
  align-items: center;
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: 5fr 6fr;
    gap: 48px;
  }

  .duo-rev .duo-fig {
    order: 2;
  }
}

.duo-fig {
  margin: 0;
}

.duo-fig img {
  display: block;
  height: auto;
  width: 100%;
}

/* 実写JPEGは角丸で他ページの写真と揃える（切り抜きPNGはそのまま） */

.duo-fig img[src$=".jpg"] {
  border-radius: 4px;
}

.duo-fig-photo img {
  aspect-ratio: 3 / 2;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

.duo-txt {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.duo-txt .h-sub,
.duo-txt .h-sec {
  margin: 0;
}

.h-left {
  text-align: left;
}

@media (max-width: 899px) {
  .h-left {
    text-align: center;
  }
}

/* 本文中の切り抜き画像（茶漬けの椀・野菜のカゴなど） */

.cutout {
  margin: 4px 0 0;
  align-self: center;
}

.cutout img {
  max-width: 200px;
  display: block;
  height: auto;
}

/* アンビシャスファームのロゴ */

.bf-farm-logo {
  margin: 0 0 30px;
  text-align: center;
}

.bf-farm-logo img {
  display: inline-block;
  max-width: min(317px, 86%);
  height: auto;
}

/* おすすめメニューの縦積み */

.bf-osusume {
  display: flex;
  flex-direction: column;
  gap: 52px;
}

@media (min-width: 900px) {
  .bf-osusume {
    gap: 64px;
  }
}

/* ひとことアレンジ（切り抜き小画像＋短文の帯） */

.tip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 4px;
  background: var(--paper-1, #F5F5F5);
}

.bg-paper-1 .tip {
  background: #ffffff;
}

.tip img {
  flex: 0 0 auto;
  width: 86px;
  display: block;
  height: auto;
}

.tip p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* スライドショーの前置き（旧: 丸写真4つの「ほかにも」） */

.marquee-lead {
  /* 上は .bf-osusume の項目間と同じ間隔をとる（旧・丸写真ブロックの margin-top を引き継ぐ）。
     下はスライドショー側の margin-top が持つのでゼロ */
  margin: 52px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

@media (min-width: 900px) {
  .marquee-lead {
    margin-top: 64px;
  }
}

/* 朝食会場の4枚 */

.photo-grid4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 900px) {
  .photo-grid4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

.photo-grid4 figure {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 3 / 2;
}

.photo-grid4 img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 海鮮丼のヒーロー画像（現行サイトの「選ばれる理由No.1」ビジュアル）。
   画像の下半分は白へ抜けて丼だけが飛び出す作りなので、上（白セクション）と
   下（グレーセクション）の境目をまたぐように置き、丼が両方にかかるようにする。
   画像の写真部分は上から約65%、そこから下は白地。境目を写真の下端に合わせて、
   飛び出した丼だけがグレー側へ落ちる */

.hero-bridge {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  /* 上65%＝白（写真の背景と地続き）／下35%＝グレー */
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 65%, var(--paper-1, #F5F5F5) 65%, var(--paper-1, #F5F5F5) 100%);
}

.hero-bridge picture,
.hero-bridge img {
  display: block;
}

.hero-bridge img {
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin-inline: auto;
}

/* 画像の直後のセクションは、丼が乗る余白を上に確保する */

.hero-bridge + section {
  padding-top: 0;
}

/* 海鮮丼の写真はベタ貼り（No.1ビジュアルと同じ扱い・加工なし）。
   テキストは画像の上に置く */

.lead-p {
  margin: 0 auto 28px;
  max-width: 46em;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
  text-align: center;
}

@media (min-width: 900px) {
  .lead-p {
    font-size: 15px;
    margin-bottom: 36px;
  }
}

.photo-flat {
  width: 100%;
  margin: 0;
}

.photo-flat img {
  width: 100%;
  max-width: 1080px;
  display: block;
  height: auto;
  margin-inline: auto;
}

/* 海鮮丼のネタ4枚。現行サイトと同じく、正方形を横一列にぴたりと並べる（説明なし） */

/* 直上のベタ貼り画像と横幅・左右位置をそろえる（親のpaddingを打ち消す） */

.photo-row4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 1080px;
  margin: 8px auto 0;
  padding: 0;
  list-style: none;
}

.photo-row4 li {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 1 / 1;
}

.photo-row4 img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 767px) {
  .photo-row4 {
    gap: 4px;
  }
}

.photo-row4-wrap {
  width: 100%;
  margin-inline: 0;
}

/* イントロ直下の親見出し */

.kd-intro {
  margin: 45px auto 0;
}

@media (min-width: 900px) {
  .kd-intro {
    margin-top: 60px;
  }
}

/* 「こだわり 01」のアイキャッチ */

.kd-no {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  line-height: 1;
}

.kd-no-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-indent: .22em;
  /* 字間ぶんの右ズレを打ち消して中央に */
  color: var(--navy);
}

.kd-no-num {
  font-family: var(--f-head);
  font-size: 31px;
  font-weight: 700;
  color: var(--navy);
}

/* アイキャッチ直下の見出し（リード文が続くので余白は小さめ） */

.kd-h {
  margin: 0 0 14px;
}

/* 01 の中の小ブロック（海鮮茶漬け）との区切り */

.block-gap {
  margin-top: 50px;
}

@media (min-width: 900px) {
  .block-gap {
    margin-top: 70px;
  }
}

/* 03: アンビシャスファームの小見出し */

.sub-h {
  margin: 40px 0 10px;
  font-size: 18px;
  text-align: center;
}

.duo-txt .h-sub {
  font-size: 18px;
}

@media (min-width: 900px) {
  .duo-txt .h-sub {
    font-size: 21px;
  }
}

/* 吹き出しメモの文字もあわせて半ポイント上げる */

.tip p {
  font-size: 14px;
}

/* === page: /facility/ ・ /access/ ・ /access/parking/ =========================
   館内案内とアクセスで使う部品。Tailwindのビルドに grid-cols-3 / 5 が入って
   いないため、列数を持つレイアウトはここで素のCSSとして組む */

/* --- 設備カード（コンビニ・コインランドリー等の一覧）3列 --- */

.fc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px 22px;
}

@media (min-width: 600px) {
  .fc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .fc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }
}

.fc-card {
  margin: 0;
}

.fc-fig {
  position: relative;
  margin: 0 0 11px;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
}

.fc-fig img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 場所（1階・4・6・8・10階 など）。カード見出しの上に小さく置く */

.fc-where {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .02em;
}

.fc-card h3 {
  margin: 0 0 5px;
}

.fc-card p {
  margin: 0;
}

/* --- 道順（写真＋ひとこと説明を番号つきで並べる） --- */

.rt-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .rt-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .rt-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }

  /* 3ステップの道順（空港連絡バス・車）は3列で置く */

  .rt-steps.rt-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.rt-step {
  margin: 0;
}

.rt-fig {
  position: relative;
  margin: 0 0 9px;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 5 / 3;
  background: var(--paper-2);
}

.rt-fig img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.rt-no {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #ffffff;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 700;
}

.rt-txt {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}

/* --- 経路・時刻表・料金のテーブル --- */

.tt {
  width: 100%;
  border-collapse: collapse;
}

.tt caption {
  caption-side: top;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  text-align: left;
}

.tt th,
.tt td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 11px 10px 11px 0;
  text-align: left;
  vertical-align: top;
}

.tt thead th {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
}

.tt tbody th {
  width: 92px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.tt td {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-2);
}

/* 発車時刻の「分」は等幅ぎみに置いて拾いやすくする */

.tt .min {
  font-family: var(--f-head);
  letter-spacing: .08em;
  color: var(--ink);
}

/* 団体キャンセル料など、数値を並べる表は中央寄せ */

.tt-c td {
  text-align: center;
  white-space: nowrap;
}

.tt-c thead th {
  text-align: center;
}

.tt-c thead th:first-child,
.tt-c tbody th {
  text-align: left;
}

.tt-c tbody th {
  width: auto;
}

/* --- Googleマップの埋め込み --- */

.gmap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper-2);
  aspect-ratio: 16 / 7;
}

@media (max-width: 767px) {
  .gmap {
    aspect-ratio: 4 / 3;
  }
}

.gmap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- 左右2分割（時刻表を並べる・地図と情報を並べる） --- */

.cols2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

@media (min-width: 900px) {
  .cols2 {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* --- 番号つきの手順（駐車場のご利用の流れ・車での道順） --- */

.steps-num {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stepnum;
}

.steps-num li {
  position: relative;
  margin: 0;
  padding-left: 38px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
}

.steps-num li::before {
  counter-increment: stepnum;
  content: counter(stepnum);
  position: absolute;
  left: 0;
  top: 1px;
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 700;
}

/* --- 貸出備品のような短い語の一覧 --- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

.bg-paper .chips li {
  background: var(--paper-1);
  border-color: transparent;
}

/* --- ハーフインクルーシブ5サービスの時間割 --- */

.hi-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hi-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 600px) {
  .hi-list li {
    flex-direction: row;
    gap: 20px;
    align-items: baseline;
  }
}

.hi-list .t {
  flex: 0 0 auto;
  width: 108px;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .02em;
}

.hi-list .n {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}

.hi-list .n small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}

/* --- 図解画像（駐車場までの位置関係など） --- */

.figmap {
  margin: 0;
}

.figmap img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
  border-radius: 6px;
}

.figmap figcaption {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-4);
  text-align: center;
}

/* === page: /rooms/（客室） ================================================
   11タイプのカード一覧・集いの間の写真列・安全設備・貸出品チップ。
   写真は現行サイト img/gr/ の各タイプ公式写真（950x449）を切り出して流用。
   元が横長パノラマのため 3:2 に切ると室内の約3割が落ちる。そのためカードの
   写真比だけは 2:1（900x450）に統一している（他ページの 3:2 とは意図的に別）。
   -------------------------------------------------------------------------- */

/* 客室タイプのカード一覧。SP1列 / PC2列 */

.rm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .rm-grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px 30px;
  }
}

.rm-card {
  display: flex;
  flex-direction: column;
}

.rm-card-fig {
  margin: 0 0 14px;
}

.rm-card-fig img {
  display: block;
  height: auto;
  width: 100%;
  aspect-ratio: 2 / 1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

/* 和名と英名を同じ行のベースラインで揃える */

.rm-card-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
}

.rm-card-en {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink-4);
}

.rm-card-lead {
  margin: 0 0 14px;
}

/* 定員・広さ・ベッドの3行。deflist より行を詰めてカード内に収める */

.rm-spec {
  margin: auto 0 0;
  border-top: 1px solid var(--line);
}

.rm-spec > div {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.rm-spec dt {
  flex: 0 0 6.5em;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
}

.rm-spec dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
}

/* 集いの間の補足写真（窓辺・洗面・トイレ）。SP2列 / PC3列 */

.rm-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .rm-shots {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.rm-shots figure {
  margin: 0;
}

.rm-shots img {
  display: block;
  height: auto;
  width: 100%;
  aspect-ratio: 2 / 1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

.rm-shots figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ウェルカムベビー認定マーク。見出しの脇に小さく置く */

.rm-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
}

.rm-mark img {
  flex: 0 0 auto;
  width: 74px;
  display: block;
  height: auto;
}

.rm-mark span {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* お部屋の安全設備。元画像が 200x180 と小さいので上限を揃えて3つ並べる */

.rm-safety {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  max-width: 520px;
}

.rm-safety figure {
  margin: 0;
}

.rm-safety img {
  display: block;
  height: auto;
  width: 100%;
  aspect-ratio: 10 / 9;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

.rm-safety figcaption {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-align: center;
}

/* 貸出品。品目が多いので箇条書きではなくチップで並べる */

.rm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-tags li {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* 早見表。列が多いので狭い画面では横スクロールさせる */

.rm-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 640px;
}

.rm-table th,
.rm-table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 13px 16px 13px 0;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.7;
}

.rm-table thead th {
  padding-top: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
}

.rm-table tbody th {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.rm-table td {
  color: var(--ink-2);
}

.rm-table .sz {
  white-space: nowrap;
}

/* 早見表のタイプ名から各カードへ飛ぶので、固定ヘッダーに隠れないよう逃がす */

.rm-card,
#rm-washitsu {
  scroll-margin-top: calc(var(--head-h, 80px) + 24px);
}

.rm-card-name h3 {
  margin: 0;
}

.rm-safety {
  margin-inline: auto;
}

/* 集いの間の3ショットは箇条書きのマーカーを出さない */

.rm-shots > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 早見表の列幅。auto に任せるとタイプ名の列だけ極端に広がって読みにくい */

.rm-table th:first-child {
  width: 26%;
}

.rm-table .sz            {
  width: 14%;
}

.rm-table .cap           {
  width: 16%;
}

/* 貸出品のチップは見出し・リード文が中央寄せなので、並びも中央で揃える */

.rm-tags {
  justify-content: center;
}

/* 集いの間は単独セクションなので、カードの .rm-card-en にあたる英名を見出し下に置く */

.rm-en-sub {
  margin: 0 0 26px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-4);
}

/* 早見表は min-width 640px なので、狭い画面でだけスクロールできることを伝える */

.rm-swipe-hint {
  display: none;
  margin: -10px 0 10px;
}

@media (max-width: 719px) {
  .rm-swipe-hint {
    display: block;
  }
}

/* ディナービュッフェ */

/* 切り抜き画像＋見出し＋短文を3つ横並びにする。カニ3種の食べ比べ、
   海鮮丼の具材など「並列で見比べさせたいもの」に使う。
   SPは1列（画像が円形切り抜きなので、3列だと小さくなりすぎる） */

.dn-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 24px;
}

@media (min-width: 768px) {
  .dn-trio {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.dn-trio figure {
  margin: 0 auto;
  width: min(230px, 70%);
}

@media (min-width: 768px) {
  .dn-trio figure {
    width: 100%;
  }
}

.dn-trio img {
  display: block;
  height: auto;
  width: 100%;
}

.dn-trio h3 {
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.dn-trio p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-2);
  text-align: center;
}

/* 全60品の品目一覧。写真を出せない品も含めて名前だけは全部並べたいので、
   タグ状に折り返して置く */

.dn-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dn-menu li {
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* おすすめメニューの duo は、写真が切り抜きで縦に伸びるぶん間隔を広めに */

.dn-osusume > .duo + .duo {
  margin-top: 44px;
}

@media (min-width: 768px) {
  .dn-osusume > .duo + .duo {
    margin-top: 56px;
  }
}

/* === page: /family/（ファミリー） =========================================
   現行 welcomefamily.html / welcomebaby.html からの移植で必要になった部品。
   添い寝条件の図解・小さな品目カード（貸出品/食事サービス）・アイコン列。
   図解PNGは現行サイトの加工済み画像をそのまま流用している（BRIEF §5）。 */

/* --- 添い寝の対象年齢表。PC(686x150)とSP(690x240)で別画像を出し分ける --- */

.fa-age {
  margin: 0 auto 26px;
  max-width: 686px;
}

.fa-age img {
  display: block;
  height: auto;
  width: 100%;
}

/* --- ベッド台数別の添い寝パターン図解。高さが揃わないので上寄せで並べる --- */

.fa-soine {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .fa-soine {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.fa-soine li {
  margin: 0;
}

.fa-soine img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-inline: auto;
  border-radius: 8px;
}

/* --- 品目カード（貸出アイテム・食事サービス・プラン特典）。
       元画像が 340x240 前後と小さいので、1枚を大きく見せない4列基調 --- */

.fa-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .fa-items {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 16px;
  }
}

@media (min-width: 900px) {
  .fa-items {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 18px;
  }
}

.fa-items li {
  margin: 0;
}

.fa-items img {
  display: block;
  height: auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  background: var(--paper-2);
}

.fa-items .n {
  display: block;
  margin: 9px 0 0;
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.fa-items .p {
  display: block;
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.fa-items .y {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--navy);
}

/* 図解（アレルギー表示など）は切らずに全体を見せる */

.fa-items img.fa-fit {
  -o-object-fit: contain;
     object-fit: contain;
  background: #ffffff;
}

/* 説明文が長い組（食事まわりのサービス）。元画像が324pxしかないので、
   狭い画面では1列に伸ばさず「小さい写真＋テキスト」の横並びにする */

.fa-items-wide {
  grid-template-columns: 1fr;
  gap: 18px;
}

.fa-items-wide li {
  display: grid;
  grid-template-columns: 108px 1fr;
  grid-template-rows: auto 1fr;
  align-items: start;
  -moz-column-gap: 14px;
       column-gap: 14px;
  row-gap: 3px;
}

.fa-items-wide img {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.fa-items-wide .n {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

.fa-items-wide .p {
  grid-column: 2;
  grid-row: 2;
}

@media (min-width: 600px) {
  .fa-items-wide {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  .fa-items-wide li {
    display: block;
  }

  .fa-items-wide .n {
    margin-top: 9px;
  }
}

@media (min-width: 900px) {
  .fa-items-wide {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fa-items-wide .p {
  font-size: 13px;
  line-height: 1.75;
}

/* --- キッズスペースの遊具アイコン（正方形の切り抜きPNG） --- */

.fa-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .fa-icons {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    max-width: 720px;
    margin-inline: auto;
  }
}

.fa-icons li {
  margin: 0;
  text-align: center;
}

.fa-icons img {
  display: block;
  width: 100%;
  max-width: 96px;
  height: auto;
  margin-inline: auto;
}

.fa-icons span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* --- 注意事項・お願いの箇条書き（本文より一段小さく） --- */

.fa-rules {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.fa-rules li {
  position: relative;
  margin: 0;
  padding: 0 0 0 15px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-2);
}

.fa-rules li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
}

.fa-rules li + li {
  margin-top: 4px;
}

/* === page: /group/（団体・グループ） =======================================
   ご利用例の6枚は現行サイトの素材が 300x211 のストックフォトで、撮り下ろしと
   質感が揃わないためテキストカードで構成する（情報は全件残す）。 */

.gp-cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .gp-cases {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (min-width: 900px) {
  .gp-cases {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

.gp-cases li {
  margin: 0;
  padding: 22px 22px 24px;
  border-radius: 8px;
  background: var(--paper);
}

.bg-paper .gp-cases li {
  background: var(--paper-1);
}

.gp-cases h3 {
  margin: 0 0 7px;
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
}

.gp-cases p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

/* --- 客室配列図（3・8階／4〜7階）。図解PNGをそのまま並べる --- */

.gp-floors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .gp-floors {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
}

.gp-floors li {
  margin: 0;
}

.gp-floors img {
  display: block;
  width: 100%;
  max-width: 462px;
  height: auto;
  margin-inline: auto;
}

/* --- お問い合わせの流れ。.steps-num の丸番号に見出しを足して使う --- */

.gp-steps li {
  padding-bottom: 4px;
  font-size: 13.5px;
}

.gp-steps li b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* === page: /banquet/ ・ /conference/（宴会場・会議場） =======================
   現行 banquet.html / conference.html の内容を移植するのに要った部品。
   4会場の紹介・会場費の一覧表・宴会プラン・料理スタイル・飲み放題・
   レンタル備品。会場写真は現行サイトの img/conf/ を 3:2 に切り出して流用。
   接頭辞 bq- は2ページ共通で使う（会議場側も同じ部品を読む） */

/* --- 会場カード。写真とスペックを左右に置き、交互に振る --- */

.bq-halls {
  display: grid;
  gap: 44px;
}

@media (min-width: 900px) {
  .bq-halls {
    gap: 62px;
  }
}

.bq-hall {
  display: grid;
  gap: 18px;
  align-items: center;
}

@media (min-width: 900px) {
  .bq-hall {
    grid-template-columns: minmax(0, 46%) 1fr;
    gap: 44px;
  }

  .bq-hall-rev .bq-hall-fig {
    order: 2;
  }
}

.bq-hall-fig {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 3 / 2;
  background: var(--paper-2);
}

.bq-hall-fig img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.bq-hall-body {
  min-width: 0;
}

/* 会場名は和名を大きく、読みを右に小さく添える */

.bq-hall-name {
  margin: 0 0 10px;
  font-family: var(--f-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

@media (min-width: 900px) {
  .bq-hall-name {
    font-size: 26px;
  }
}

.bq-hall-name .kana {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink-3);
}

.bq-hall-lead {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
}

.bq-hall .dl-rows .row-i:first-child {
  padding-top: 0;
}

/* --- 会場費の一覧表。列が8本あるので狭い画面では横に送る --- */

.bq-scroll {
  overflow-x: auto;
}

.bq-scroll .tt {
  min-width: 720px;
}

@media (min-width: 1000px) {
  .bq-scroll .tt {
    min-width: 0;
  }
}

/* 横スクロールの案内。表が畳めなくなる幅と、消える幅を揃える
   （.rm-swipe-hint は719pxで消えるため、この表には合わない） */

.bq-hint,
.bq-hint-wide {
  display: block;
  margin: -4px 0 10px;
}

@media (min-width: 1000px) {
  .bq-hint {
    display: none;
  }
}

@media (min-width: 1180px) {
  .bq-hint-wide {
    display: none;
  }
}

/* 会議場の表は「最大収容人数」の2列ぶん増えて10列。畳める幅が一段広い */

.bq-scroll-wide {
  overflow-x: auto;
}

.bq-scroll-wide .tt {
  min-width: 880px;
}

@media (min-width: 1180px) {
  .bq-scroll-wide .tt {
    min-width: 0;
  }
}

/* 見出しは2段。上段が「会議 / 懇親会 / 展示会」、下段が時間区分 */

.bq-rate th,
.bq-rate td {
  padding-left: 8px;
  padding-right: 8px;
}

.bq-rate th:first-child,
.bq-rate td:first-child {
  padding-left: 0;
}

.bq-rate thead tr:first-child th {
  padding-top: 8px;
  padding-bottom: 7px;
  border-bottom: 0;
  color: var(--navy);
}

.bq-rate thead tr:first-child th[colspan],
.bq-rate thead tr:first-child th.grp {
  background: var(--navy-soft);
}

.bq-rate thead tr + tr th {
  padding-top: 7px;
  font-size: 11px;
  font-weight: 400;
}

.bq-rate tbody th {
  width: auto;
  font-size: 14px;
}

.bq-rate tbody td {
  font-family: var(--f-head);
  color: var(--ink);
}

/* --- カード（宴会プラン・料理スタイル・飲み放題）--- */

.bq-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .bq-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .bq-cards-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

.bq-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 22px 20px 20px;
  border-radius: 6px;
  background: #ffffff;
}

/* 白セクションの上に置くときは、面を反転させて境目を出す */

.bg-paper .bq-card {
  background: var(--paper-1);
}

.bq-card h3 {
  margin: 0 0 8px;
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.bq-card p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-2);
}

/* 写真つきカードは、写真をカードの角までベタで見せる */

.bq-card-fig {
  margin: -22px -20px 14px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  aspect-ratio: 3 / 2;
  background: var(--paper-2);
}

.bq-card-fig img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 金額は下端に揃える（カードの高さが違っても目線が横一線に並ぶ） */

.bq-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: auto 0 0;
}

.bq-price .n {
  font-family: var(--f-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

.bq-price .u {
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-3);
}

.bq-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.bq-meta li {
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
}

/* --- 飲み放題カードの中身（対象のお酒を並べる）--- */

.bq-drinks {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-2);
}

/* --- 連絡先ブロック（電話・メール）--- */

.bq-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

@media (min-width: 640px) {
  .bq-contact {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.bq-contact-i {
  padding: 20px 16px;
  border-radius: 6px;
  background: #ffffff;
}

.bg-paper .bq-contact-i {
  background: var(--paper-1);
}

.bq-contact-k {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--navy);
}

.bq-contact-v {
  margin: 0;
  font-family: var(--f-head);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .bq-contact-v {
    font-size: 23px;
  }
}

/* メールアドレスは27文字あり、電話番号と同じ級数だと2行目に「om」だけ落ちる。
   カード幅（SP 318px）に1行で収まるところまで下げる */

.bq-contact-v.is-mail {
  font-size: 16px;
  letter-spacing: -.01em;
}

@media (min-width: 900px) {
  .bq-contact-v.is-mail {
    font-size: 18px;
  }
}

.bq-contact-n {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.75;
  color: var(--ink-3);
}

/* === page: /sightseeing/ ・ /gourmet/ ・ /snow/ ==============================
   スポット紹介の3ページ。カードの器は館内案内で作った .fc-grid / .fc-card /
   .fc-fig / .fc-where をそのまま流用し、ここでは「お店の名前と住所」「体験の
   開催情報」という2つの中身だけを足す */

/* --- カードの中に置く、お店・施設の名前と住所 ---
   .tip と同じ考え方で、灰背景セクションの中では白地に反転させる */

.ss-shop {
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--paper-1);
}

.bg-paper-1 .ss-shop {
  background: #ffffff;
}

.ss-shop .nm {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.ss-shop .ad {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* --- 体験プログラムの開催情報（開催地・開催時期・所要時間）---
   .deflist はページ幅いっぱい用で3列カードの中では窮屈なため、
   ラベルを詰めた小さい版をここで組む */

.ss-spec {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}

.ss-spec > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ss-spec dt {
  flex: 0 0 4.6em;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink-3);
}

.ss-spec dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* 周辺案内カードは内容量が異なるため、名前・住所・開催情報を下端に揃える。:has() で対象カードだけに適用する。 */

.fc-card:has(.ss-shop),
.fc-card:has(.ss-spec) {
  display: flex;
  flex-direction: column;
}

.fc-card:has(.ss-shop) .body,
.fc-card:has(.ss-spec) .body {
  margin-bottom: 12px;
}

.fc-card:has(.ss-shop) .ss-shop,
.fc-card:has(.ss-spec) .ss-spec {
  margin-top: auto;
}

/* --- モデルコースの写真 ---
   現行サイトから引き継いだ写真は幅300px前後。hi-flow の既定（1枚のとき520px）
   まで引き伸ばすとぼやけるので、このページだけ上限を下げる */

.ss-course .hi-step-figs[data-n="1"] {
  max-width: 340px;
}

@media (min-width: 768px) {
  .ss-course .hi-step-figs[data-n="1"] {
    grid-template-columns: minmax(0, 340px);
  }

  .ss-course .hi-step-figs[data-n="2"] {
    max-width: 560px;
  }
}

/* === page: /rentalcar/ ・ /business/ ======================================
   レンタカー料金表（現行サイトの5列テーブルをそのまま持ってきた）と、
   正方形の切り抜きPNG（チャイルドシート）の置き方。
   ビジネス・出張は既存部品（.fc-grid / .hi-list / .chips / .faq）で足りている */

/* --- 料金表。駐車料金・延長料金は全行にかかる rowspan セル --- */

.rc-price {
  min-width: 620px;
}

/* 「6時間／当日返却」は注記が続くので、見出し列だけ折り返しを許す */

.rc-price tbody th {
  width: 168px;
  white-space: normal;
}

.rc-price th small,
.rc-price td small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-4);
}

.rc-price td[rowspan] {
  vertical-align: middle;
  background: rgba(255, 255, 255, .55);
}

.rc-price .num {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--ink);
}

/* --- 正方形の切り抜きPNGは、2カラムいっぱいに伸ばすと大きすぎる --- */

.rc-fig-sq img {
  max-width: 320px;
  margin-inline: auto;
}

/* === page: /faq/ ・ /contact/ ・ /bestrate/ ・ /news/ ・ /sitemap/ ==========
   サポート系5ページで使う部品。共通の接頭辞は付けず、ページ別に
   faq- / ct- / br- / nw- / sm- を使い分ける。
   .faq / .chips / .steps-num / .deflist は既存部品をそのまま流用している */

/* --- 質問カテゴリーへの目次。.chips のリンク版 --- */

.faq-jump {
  margin-top: 26px;
}

.faq-jump .chips {
  justify-content: center;
}

.faq-jump .chips li {
  padding: 0;
}

.faq-jump .chips a {
  display: block;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}

.faq-jump .chips a:hover {
  background: var(--navy);
  color: #ffffff;
}

/* --- 回答の中に段落・リスト・定義リストが入るときの間隔 --- */

.faq .a > * + * {
  margin-top: 12px;
}

.faq .a p {
  margin: 0;
}

.faq .a .deflist {
  border-top: 1px solid var(--line);
}

.faq .a .note {
  margin-top: 10px;
}

.faq .a ul,
.faq .a ol {
  margin: 0;
}

/* 予約確認の3手順。丸番号の中に見出しを立てる（.gp-steps と同じ作り） */

.faq-steps li b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* --- 回答内の表（宿泊税・団体キャンセル料）。狭い画面では横スクロール --- */

.faq-table,
.ct-table,
.nw-table {
  overflow-x: auto;
}

.faq-table table,
.ct-table table,
.nw-table table {
  width: 100%;
  min-width: 380px;
  border-collapse: collapse;
  text-align: left;
}

.faq-table th,
.faq-table td,
.ct-table th,
.ct-table td,
.nw-table th,
.nw-table td {
  padding: 12px 14px 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}

.faq-table thead th,
.ct-table thead th,
.nw-table thead th {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}

.faq-table tbody th,
.ct-table tbody th,
.nw-table tbody th {
  font-weight: 700;
  color: var(--ink);
}

.faq-table td.num,
.nw-table td.num {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* 列数の多い表（団体キャンセル料）は狭い画面で横に送るので、その案内 */

.faq-swipe-hint {
  display: none;
  margin: 0 0 8px;
}

@media (max-width: 699px) {
  .faq-swipe-hint {
    display: block;
  }
}

/* --- お問い合わせ: 用件別の窓口一覧 --- */

.ct-table table {
  min-width: 560px;
}

.ct-table tbody th {
  width: 34%;
}

.ct-who {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
}

/* 狭い画面では横スクロールさせず、1件ずつ縦に積む（電話番号が切れないように） */

@media (max-width: 699px) {
  .ct-table {
    overflow-x: visible;
  }

  .ct-table table {
    min-width: 0;
  }

  .ct-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ct-table tr {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
  }

  .ct-table tbody th,
  .ct-table td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .ct-table tbody th {
    margin-bottom: 6px;
  }

  .ct-table td + td {
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--ink-3);
  }
}

/* --- お問い合わせ: 不審メールの注意帯 --- */

.ct-alert {
  max-width: 760px;
  margin-inline: auto;
  padding: 22px 24px;
  border-radius: 4px;
  background: #ffffff;
  border-left: 3px solid var(--red);
}

.bg-paper .ct-alert {
  background: var(--paper-1);
}

.ct-alert p + p {
  margin-top: 12px;
}

/* --- 最低価格保証: 申告の流れ3ステップ --- */

.br-flow {
  display: grid;
  gap: 22px;
  margin-top: 34px;
}

@media (min-width: 900px) {
  .br-flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
}

.br-step {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 4px;
  background: var(--paper-1);
}

.bg-paper-1 .br-step {
  background: #ffffff;
}

.br-step-no {
  margin: 0 0 6px;
  font-family: var(--f-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}

.br-step-h {
  margin: 0 0 8px;
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.br-step-b {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
}

.br-badge {
  margin: 14px 0 0;
}

.br-badge img {
  display: block;
  width: 92px;
  height: auto;
}

/* --- 最低価格保証: 9つの条件（チェック印つき）と、除外の2項目 --- */

.br-cond {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .br-cond {
    grid-template-columns: 1fr 1fr;
    gap: 10px 26px;
  }
}

.br-cond li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 30px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
}

.br-cond li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}

.br-exclude {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 0 20px;
  list-style: disc;
}

.br-exclude li {
  margin: 0;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
}

.br-exclude li::marker {
  color: var(--ink-3);
}

/* --- お知らせ: 1ページに全文を畳み込むアコーディオン --- */

.nw {
  border-top: 1px solid var(--line);
}

.nw-item {
  border-bottom: 1px solid var(--line);
}

.nw-item details {
  overflow: hidden;
}

.nw-item summary {
  position: relative;
  display: block;
  padding: 18px 44px 18px 0;
  cursor: pointer;
  list-style: none;
}

.nw-item summary::-webkit-details-marker {
  display: none;
}

.nw-item summary::after,
.nw-item summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--red);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.nw-item summary::before {
  width: 14px;
  height: 1.5px;
  margin-top: -0.75px;
}

.nw-item summary::after {
  width: 1.5px;
  height: 14px;
  margin-top: -7px;
  right: 12.25px;
}

.nw-item details[open] summary::after {
  opacity: 0;
  transform: rotate(90deg);
}

.nw-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-3);
}

.nw-ttl {
  display: block;
  margin-top: 4px;
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  transition: color 180ms var(--ease);
}

@media (min-width: 900px) {
  .nw-ttl {
    font-size: 18px;
  }
}

.nw-item summary:hover .nw-ttl {
  color: var(--red);
}

.nw-lead {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

.tag-pill.is-alert {
  background: var(--red);
}

.nw-body {
  padding: 14px 0 34px;
  max-width: 62em;
}

.nw-body > * + * {
  margin-top: 16px;
}

.nw-body p {
  margin: 0;
}

.nw-body .h-sub {
  margin: 26px 0 0;
}

.nw-body .deflist {
  border-top: 1px solid var(--line);
}

/* --- サイトマップ: 全ページ一覧（説明文つき） --- */

.sm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 30px;
}

@media (min-width: 700px) {
  .sm-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .sm-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sm-k {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.sm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sm-list li {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.sm-list a {
  font-family: var(--f-head);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  text-decoration: none;
  transition: color 180ms var(--ease);
}

.sm-list a:hover {
  color: var(--red);
  text-decoration: underline;
}

.sm-d {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* === page: sightseeing（周辺の便利な店舗3枚） === */

.duo-cards3 {
  display: grid;
  gap: 24px;
  max-width: 1080px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .duo-cards3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.duo-cards3 figure {
  margin: 0;
}

.duo-cards3 img {
  height: auto;
  width: 100%;
  aspect-ratio: 3 / 2;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  display: block;
}

.duo-cards3 figcaption {
  margin-top: 10px;
}

.duo-cards3 strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.duo-cards3 span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* === page: gourmet（duoを縦に2つ並べたときの間隔） === */

.duo + .duo {
  margin-top: 40px;
}

@media (min-width: 900px) {
  .duo + .duo {
    margin-top: 56px;
  }
}

@media (min-width: 1100px) and (max-width: 1279px) {
  .nav .ni {
    padding-left: 4px;
    padding-right: 4px;
  }

  .nav .ni > a {
    font-size: 13px;
  }

  /* 矢印の左余白も詰める */

  .nav .ni.has-sub > a::after {
    margin-left: 4px;
  }
}

/* ドロップダウン内の小見出し（ご利用シーン／ホテルの周辺） */

.nav .ni.has-sub .sub .sub-cap {
  margin: 6px 0 2px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-3);
}

.nav .ni.has-sub .sub .sub-cap:first-child {
  margin-top: 0;
}

/* FV予約フォーム：神戸ポートタワーホテルの項目構成を基準とする。 */

@media (min-width: 900px) {
  /* 日付範囲を1行で表示できるよう、日付欄は幅を広く取る。 */

  .fv-panel form {
    grid-template-columns: 1.8fr 1fr 1fr 1fr auto;
  }

  .fv-panel .searchbtn .btn {
    white-space: nowrap;
  }
}

/* SPは2列組みなので、日付欄だけ横いっぱいに使う */

@media (max-width: 899px) {
  .fv-panel .dr-field {
    grid-column: 1 / -1;
  }
}

/* ラベル「チェックイン日 - チェックアウト日」を1行に収める */

.dr-field label {
  font-size: 13px;
  white-space: nowrap;
}

.fv-opt {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: -2px;
}

.fv-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-2);
}

.fv-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

.fv-opt-note {
  font-size: 12.5px;
  color: var(--ink-3);
}

/* --- 宿泊日レンジピッカー（神戸ポートタワーホテルと同じ選び方） --------------- */

.dr-field {
  position: relative;
}

.dr-input {
  cursor: pointer;
}

.dr-field.is-disabled {
  opacity: .5;
}

.dr-cal {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 14px 14px 10px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.dr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dr-title {
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.dr-nav {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.dr-nav:hover:not(:disabled) {
  background: var(--paper-1, #F5F5F5);
}

.dr-nav:disabled {
  opacity: .25;
  cursor: default;
}

.dr-week,
.dr-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.dr-week span {
  padding-bottom: 6px;
  font-size: 11.5px;
  text-align: center;
  color: var(--ink-3);
}

.dr-week span:first-child {
  color: #C0392B;
}

.dr-week span:last-child  {
  color: #2E6FA7;
}

.dr-d {
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.dr-d:hover:not(:disabled) {
  background: var(--paper-1, #F5F5F5);
}

.dr-d.is-out {
  visibility: hidden;
}

.dr-d.is-past {
  color: var(--ink-3);
  opacity: .4;
  cursor: default;
}

.dr-d.is-today {
  font-weight: 700;
}

/* 選択した範囲。両端は塗り、あいだは淡く */

.dr-d.is-in {
  background: var(--navy-soft, #EBEEF3);
}

.dr-d.is-start,
.dr-d.is-end {
  background: var(--navy);
  color: #ffffff;
  font-weight: 700;
}

.dr-d.is-start {
  border-radius: 4px 0 0 4px;
}

.dr-d.is-end   {
  border-radius: 0 4px 4px 0;
}

.dr-d.is-start.is-end {
  border-radius: 4px;
}

.dr-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* 客室カードは室内と水回りを見せるため大1枚とサブ3枚を並べる。写真比率は2:1で揃える。 */

.rm-photos {
  margin: 0 0 14px;
}

/* メインとサブの間だけ詰める（.rm-card-fig の 14px はカード外に効かせたいので上書き） */

.rm-photos .rm-card-fig {
  margin-bottom: 6px;
}

.rm-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-thumbs > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-thumbs img {
  display: block;
  height: auto;
  width: 100%;
  aspect-ratio: 2 / 1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

.gn-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px 30px;
  align-items: start;
}

@media (min-width: 640px) {
  .gn-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .gn-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 36px;
  }
}

.gn-col {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.gn-b {
  display: flex;
  flex-direction: column;
}

/* ブランド名の右に種別を小さく添える（OMOのフッターと同じ見せ方） */

.gn-note {
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  opacity: .85;
}

/* 施設名が長いので、折り返しても読めるように行の高さを可変にする */

.gn-b a {
  min-height: 38px;
  width: 100%;
  padding-block: 4px;
  line-height: 1.45;
  word-break: auto-phrase;
}

/* ディナーの加工済み素材は現行 dinner.html を出典とする。 */

/* --- 供給元・監修元・産地のマーク（八洲水産／GARAKU／北海道産／焼きたて） ---
   現行サイトが見出しの直上に置いているのと同じ扱い。朝食ページの
   .bf-farm-logo（アンビシャスファームのロゴ）の縦組み版にあたる。
   見出しが .h-left（PC左寄せ・899px以下センター）なので、それに追従させる */

.dn-badge {
  margin: 0 0 10px;
  line-height: 0;
}

.dn-badge img {
  display: inline-block;
  width: auto;
  height: 24px;
}

@media (max-width: 899px) {
  .dn-badge {
    text-align: center;
  }
}

/* --- イントロ直下の「3つの名物」予告バンド ---
   現行サイト冒頭のスライドショー写真（1901x801のワイド）を3枚だけ使い、
   下に続く「名物 01〜03」への目次にする。SPは縦積み */

.dn-meibutsu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767px) {
  .dn-meibutsu {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 26px;
  }
}

.dn-meibutsu li {
  margin: 0;
  min-width: 0;
}

.dn-meibutsu img {
  display: block;
  height: auto;
  width: 100%;
  border-radius: 4px;
}

.dn-meibutsu p {
  margin: 10px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

/* 番号は本文より一段小さく、色を落として添える（.kd-no と同じ考え方） */

.dn-meibutsu-n {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-3);
}

/* === page: dinner ── 料金表: 正規料金との並べ方 =============================
   90分コースは宿泊者だけ割引になる。表の行が「ご宿泊の方」と「一般」で
   離れていて差額が読めなかったので、宿泊者行のセルに正規料金を打ち消しで
   重ねる。並べ方は harbor-sapporo ワイヤーの「一般／宿泊者特別」に合わせた。 */

/* 打ち消しの正規料金。特別価格の上に一段小さく置く */

.pr-was {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 0;
}

/* 特別価格。ブランドレッドで、正規料金と別物だと分かるようにする */

.pr-now {
  display: block;
  color: var(--red);
}

/* 「宿泊者特別」の札。行見出しに添える */

.pr-chip {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--red-rgb), .08);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--red);
  white-space: nowrap;
}

/* 差額の一文。表の上に置く */

.pr-lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

.pr-lead b {
  font-weight: 700;
  color: var(--red);
}

/* === page: dinner ── FVサブテキスト下のCTA ==================================
   THE HARBOR SAPPORO の特設ページ（現行サイト /harbor/）へ送る導線。
   .hi-intro が中央寄せなので、ボタンもその流れに乗せて中央に置く。 */

.hi-intro-cta {
  margin: 26px 0 0;
  text-align: center;
}

/* iOS Safariの入力時ズームを防ぐため、予約フォームの入力類は16px以上にする。 */

.field input,
.field select {
  font-size: 16px;
}

/* 下部固定バーの保険: 中身がどれだけ育ってもバーを100vwからはみ出させない */

.mfix a {
  min-width: 0;
}

/* SPのFVはSafariでも折り返せるよう、通常の折り返しを使う。 */

@media (max-width: 767px) {
  .fv .display {
    max-width: 100%;
    /* 2行目「ご馳走ビュッフェホテル。」12.5文字が必ず入るサイズに縮める */
    font-size: min(36px, 7vw);
    text-wrap: wrap;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
  }

  /* 語の途中で折れないよう、意味の塊ごと（読点の後）で折る */

  .fv .display .fv-seg {
    display: inline-block;
  }
}

/* SPの見出しはSafariでも折り返せるようにする。意図した改行はHTMLの wbr と span で指定する。 */

@media (max-width: 767px) {
  .jp {
    word-break: normal;
    /* Safariで横にはみ出さず折り返せるようにする。 */
    word-break: auto-phrase;
    /* Chrome: 語単位の折返し（対応ブラウザのみ上書き） */
    text-wrap: wrap;
    overflow-wrap: break-word;
    /* anywhereは禁則を壊す（ー・ッが行頭に落ちる）ため使わない */
    line-break: strict;
  }
}

/* SPの本文は長い文が横にはみ出さないよう、通常の折り返しと禁則処理を使う。 */

@media (max-width: 767px) {
  body {
    line-break: strict;
  }

  p, li, dd, dt, td, th, figcaption,
  .max-w-wrap > .h-sec + .lead,  /* main.css の keep-all（詳細度0,3,0）に勝たせる */
  .lead, .lead-p, .body, .sub-note {
    word-break: normal;
    /* Safari: 折り返せず横にはみ出すのを防ぐ */
    word-break: auto-phrase;
    /* Chrome: 「生ビール」等を語の塊で折る */
    overflow-wrap: break-word;
  }
}

/* === パンくずが明るい写真に埋もれる（news が最悪・facility / sightseeing 等） ======
   文字に影を足し、ヒーロー写真の上部に薄い暗色を敷いて、どんな写真でも読めるように */

.pagehero-photo-crumb,
.pagehero-photo-crumb a,
.pagehero-photo-crumb span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 1px 8px rgba(0, 0, 0, .35);
}

.pagehero-photo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 72px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.pagehero-photo-inner {
  /* main.css の position:absolute; inset:0 を維持したまま、上のグラデより手前に。
     relative に上書きすると flex アイテム化して幅0に潰れる（news で実発生） */
  z-index: 2;
}

/* 団体ページの客室配列図がSPで右に切れる対策（元PNGは462px幅） */

.gp-floors img {
  display: block;
  height: auto;
  width: 100%;
}

/* === 見出しの文節改行を全ブラウザで揃える =====================================
   word-break:auto-phrase は Chrome 専用で、Safari/Firefox は宣言ごと破棄する。
   そこで h1/h2 は BudouX で <wbr> を静的挿入済み（insert-wbr.mjs）。
   keep-all にすると CJK は <wbr> の位置でだけ折れる＝どのブラウザでも同じ文節改行。
   overflow-wrap は <wbr> の無い長い塊が出たときのはみ出し防止 */

h1.jp,
h2.jp {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.mfix {
  grid-template-columns: 1fr 1.6fr 1fr;
}

/* 「電話（24時間）」が1frの枠に収まるように。24時間はフロントの実際の営業時間 */

.m-sub-tel .l {
  font-size: 12px;
}

@media (max-width: 767px) {
  .fv-head {
    display: none;
  }
}

:root {
  --news-h: 0px;
}

/* 透過⇄白の切り替えは、目が追える速さで色だけを渡す（形は動かさない） */

.site-head {
  transition: background-color 400ms var(--ease), color 400ms var(--ease);
}

/* トップだけ、FVをヘッダーの下から画面の天まで引き上げる。
   FVの文字は .fv が align-items:flex-end で下端に寄っているのでヘッダーとは当たらない */

body.home .firstview {
  margin-top: 0;
}

/* --- ここから「動画の上にいる間」の見え方。
       メニューを開いている間は真下が白いパネルなので透過を解いて白ヘッダーに戻す --- */

body.home:not(.navopen) .site-head:not(.solid) {
  background-color: transparent;
  color: #ffffff;
}

/* 動画は寿司・カニ・海鮮丼の明るい絵柄で、白抜きだけでは沈む瞬間がある。
   足場として黒を敷くが、ヘッダーの高さの倍近くまで引き延ばして下端をゼロに抜く。
   帯に見せず、映像の上部が少し締まっただけに見える濃度に留めている */

body.home .site-head::before {
  content: "";
  position: absolute;
  inset: 0 0 -72px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .40) 38%, rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity 400ms var(--ease);
  pointer-events: none;
  z-index: -1;
}

body.home:not(.navopen) .site-head:not(.solid)::before {
  opacity: 1;
}

/* スクリムだけに頼らず、文字側にも FV見出しと同じ流儀の影を持たせる
   （.fv .display の text-shadow: 0 1px 24px と同族。距離だけ詰めた） */

body.home .site-head .main-row {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0);
  transition: text-shadow 400ms var(--ease);
}

body.home:not(.navopen) .site-head:not(.solid) .main-row {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .38);
}

/* スクリムは ::before なので、中身を前に出しておく */

body.home .site-head .main-row {
  position: relative;
}

/* ロゴは既存アセットのフィルターで白にする。 */

body.home .site-head .logo img {
  filter: brightness(1) invert(0) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  transition: filter 400ms var(--ease);
}

body.home:not(.navopen) .site-head:not(.solid) .logo img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0, 0, 0, .45));
}

/* 価格ブロックは地の色が変わるだけで、3段の階層（条件10px／金額19px／補足11px）は保つ */

body.home:not(.navopen) .site-head:not(.solid) .head-price-amount {
  color: #ffffff;
}

body.home:not(.navopen) .site-head:not(.solid) .head-price-cond,
body.home:not(.navopen) .site-head:not(.solid) .head-price-note {
  color: rgba(255, 255, 255, .82);
}

/* メニュー文字・区切り線・地球儀アイコン・ハンバーガーはすべて currentColor 追随なので
   個別指定は不要。ドロップダウン（.sub）は白地に濃色を明示済みなので巻き込まれない */

/* 影は映像に直接乗る文字だけのもの。白地のドロップダウンと赤ベタのCTAには載せない */

body.home:not(.navopen) .site-head:not(.solid) .sub,
body.home:not(.navopen) .site-head:not(.solid) .btn-head {
  text-shadow: none;
}

/* カード下に残す動画の余白。カードの高さが変わってもここは一定に保つ */

:root                      {
  --fv-gap: 24px;
}

@media (min-width: 900px)  {
  :root {
    --fv-gap: 40px;
  }
}

/* 初回描画用の実測値（カードの高さ + --fv-gap）。
   カードの高さはフォームの折り返しで 544 / 348 / 303 / 277px と変わる。
   読み込み後は main.js が実寸で上書きするので、ここは最初の1フレームのための値 */

:root                      {
  --fv-overlap: 58px;
}

/* SP: カード非表示。下部固定バー58pxの逃げ */

@media (min-width: 430px)  {
  :root {
    --fv-overlap: 58px;
  }
}

@media (min-width: 768px)  {
  :root {
    --fv-overlap: 568px;
  }
}

/* 544 + 24 */

@media (min-width: 900px)  {
  :root {
    --fv-overlap: 388px;
  }
}

/* 348 + 40 */

@media (min-width: 920px)  {
  :root {
    --fv-overlap: 343px;
  }
}

/* 303 + 40 */

@media (min-width: 960px)  {
  :root {
    --fv-overlap: 317px;
  }
}

/* 277 + 40 */

:root {
  --fv-peek: 88px;
}

/* 動画を画面1枚ぶんに。height ではなく min-height にして、
   ウィンドウが低いときは見出しとカードに合わせて伸びるようにする */

body.home .fv {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}

/* カードは動画の上に全部が載ったまま、1枚目には --fv-peek だけ顔を出す。
   そのぶん動画を画面より下へ伸ばして、カードの下にも映像が続くようにする。
   （動画を切らずにカードだけ下げると、カードの下半分が地の白に落ちてしまう）
   見出しは .fv-in の flex 中央寄せなので、カードの上端が下がれば自動で追随する。
   SPはカード非表示なので、画面ちょうど1枚のまま触らない */

@media (min-width: 768px) {
  body.home .fv {
    min-height: calc(100vh + var(--fv-overlap) - var(--fv-peek));
    min-height: calc(100svh + var(--fv-overlap) - var(--fv-peek));
  }
}

/* カードは動画の上に重ねるため、背景を透過する。 */

body.home .fv-head {
  background-color: transparent;
}

/* 見出しをヘッダー下端とカード上端の中央に置くため、上下にそれぞれの高さを渡す。 */

body.home .fv-c .fv-in {
  padding-top: var(--head-h);
}

.tintband .tint {
  background: var(--paper);
}

:root {
  --navy: #3E2D1A;
  /* 変数名は互換のため据え置き。中身はブラウン */
  --navy-soft: #F4EFE7;
}

/* 副導線の背景はページ側の配色変数に追随させる。 */

.tag-pill,
.bg-navy {
  background-color: var(--navy);
}

.voice-ava.voice-ava-navy-soft {
  background: color-mix(in srgb, var(--navy) 8%, transparent);
}

/* 副ボタンは枠線で示し、ホバー時に墨色へ反転する。 */

.btn-out {
  background-color: transparent;
  color: var(--ink);
  border: 1px solid rgba(35, 24, 21, .45);
}

.btn-out:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

/* ベストレート帯は生成りの地にブラウン文字。 */

.rate-band {
  background: var(--navy-soft);
  color: var(--navy);
}

/* 赤の塗りは空室検索に絞るため、会員バッジは枠線で示す。 */

.member-off-badge {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}

/* 見出し: 太字の圧を抜く。Hiragino Sans を先頭にして W5 を拾わせる
   （Kaku Gothic ProN は W3/W6 しか持たず、500 を指定しても W3 に落ちる）。
   FV の h1（.display＝明朝）は対象外 */

h1.jp:not(.display),
h2.jp,
.h-sec,
.lead-2col-heading,
.feature-showcase-heading,
.hi-intro-heading {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans CJK JP", Meiryo, sans-serif;
  font-weight: 500;
  letter-spacing: .04em;
}

@media (min-width: 768px) {
  .lead-2col-heading {
    font-size: 34px;
  }
}

.splide__arrow {
  background: var(--ink);
}

body.home .site-head .btn-head {
  transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease);
}

body.home:not(.navopen) .site-head:not(.solid) .btn-head {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .85);
  color: #ffffff;
}

body.home:not(.navopen) .site-head:not(.solid) .btn-head:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--red);
}

.note,
.figmap figcaption {
  font-weight: 400;
}

/* 「名物」「ポイント」の番号ラベルがPCで小さい（SPはこのままで可） */

@media (min-width: 768px) {
  .kd-no-label {
    font-size: 14px;
  }
}

/* ひとこと帯は画像と文字を組にして目立たせる。 */

.tip {
  gap: 20px;
  padding: 18px 22px;
}

.tip img {
  width: 120px;
}

.tip p {
  font-size: 14.5px;
}

@media (max-width: 767px) {
  .tip img {
    width: 96px;
  }
}

/* 写真×テキスト2カラムの写真側の高さを 3:2 で統一。
   切り抜きPNGは箱の中で中央に収め、実写は従来どおり全面 */

.duo-fig {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.duo-fig:not(.duo-fig-photo) img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.duo-fig-photo img {
  width: 100%;
  height: 100%;
}

/* 写真側のループスライドショー（ラウンジ→宴会場→会議場 など）。初期化は main.js */

.duo-slide .splide,
.duo-slide .splide__track,
.duo-slide .splide__list {
  width: 100%;
  height: 100%;
}

.duo-slide .splide__slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}

.duo-slide .splide__pagination {
  bottom: 8px;
}

.duo-slide .splide__pagination__page {
  background: rgba(255, 255, 255, .6);
  opacity: 1;
}

.duo-slide .splide__pagination__page.is-active {
  background: #ffffff;
  transform: none;
}

@media (max-width: 1100px) {
  .rm-mark {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* SPのフッターは中央配置、ナビは2列にする。 */

@media (max-width: 899px) {
  .site-foot .grid {
    justify-items: center;
    text-align: center;
  }

  .foot-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .foot-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    width: 100%;
    max-width: 440px;
  }

  .foot-col .strong {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .foot-col a {
    justify-content: center;
    width: auto;
    padding-right: 0;
  }

  .foot-bottom,
  .foot-links {
    justify-content: center;
    text-align: center;
  }
}

/* 写真のクリック拡大（ライトボックス）。コンテナに data-lightbox、または a[data-lightbox] */

[data-lightbox] img,
a[data-lightbox] {
  cursor: zoom-in;
}

#lb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 24, 32, .86);
}

#lb.is-open {
  display: flex;
}

#lb img {
  max-width: min(1200px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  cursor: default;
}

#lb .lb-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink, #1A2130);
  font-size: 26px;
  line-height: 44px;
  cursor: pointer;
}

#lb .lb-x:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

body.lb-lock {
  overflow: hidden;
}

@media (min-width: 768px) {
  /* ページネーション行分だけ下を上げ、トラック下端を矢印の基準にする */

  .carousel.splide .splide__arrows {
    bottom: 8px;
  }

  .carousel.splide .splide__arrow {
    top: auto;
    bottom: -18px;
    /* 矢印の中心をドットの行に。カード下端のボタンに掛からない位置 */
    width: 36px;
    height: 36px;
    transform: none;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  }

  .carousel.splide .splide__arrow:hover:not(:disabled) {
    background: var(--ink);
    color: #ffffff;
  }

  .carousel.splide .splide__arrow--prev {
    left: calc(50% - 110px);
  }

  .carousel.splide .splide__arrow--next {
    right: calc(50% - 110px);
  }

  /* 客室・宿泊プランはドットが矢印に隠れないよう左右を広げる */

  .carousel-rooms.splide .splide__arrow--prev,
  .carousel-plan.splide .splide__arrow--prev {
    left: calc(50% - 160px);
  }

  .carousel-rooms.splide .splide__arrow--next,
  .carousel-plan.splide .splide__arrow--next {
    right: calc(50% - 160px);
  }

  .carousel.splide .splide__arrow svg {
    width: 8px;
    height: 12px;
  }
}

@media (min-width: 900px) {
  .home .lead-2col-inner {
    max-width: 900px;
  }

  .home .lead-2col-body {
    width: 502px;
  }
}

/* 本文の文中改行（「ご馳／走」等）を止める。HTML側で文節に <wbr> を入れてあるので、見出し（.jp）と同じ keep-all 方式。
   万一 <wbr> 間が幅を超えたときの保険に overflow-wrap: anywhere */

.home .lead-2col-body {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (max-width: 899px) {
  .home .pg-track {
    display: flex;
    gap: 10px;
    width: -moz-max-content;
    width: max-content;
    padding: 0;
    animation: pg-marquee 62s linear infinite;
  }

  .home .pg-viewport:focus-within .pg-track {
    animation-play-state: paused;
  }

  .home .pg-tile,
  .home .pg-tile:not(:first-child) {
    display: grid;
    grid-template-columns: 168px 128px 128px 168px;
    grid-template-rows: 168px 128px;
    gap: 6px;
  }

  .home .pg-slot {
    border-radius: 3px;
    aspect-ratio: auto;
  }

  .home .pg-s1 {
    grid-area: 1 / 1 / 2 / 3 !important;
  }

  .home .pg-s2 {
    grid-area: 2 / 1 / 3 / 2 !important;
  }

  .home .pg-s3 {
    grid-area: 2 / 2 / 3 / 3 !important;
  }

  .home .pg-s4 {
    grid-area: 1 / 3 / 2 / 4 !important;
  }

  .home .pg-s5 {
    grid-area: 1 / 4 / 2 / 5 !important;
  }

  .home .pg-s6 {
    grid-area: 2 / 3 / 3 / 5 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .pg-track {
    animation: none;
  }
}

@media (max-width: 767px) {
  .p-dinner .overflow-x-auto > table th,
  .p-dinner .overflow-x-auto > table td {
    padding-right: 8px;
  }

  .p-dinner .overflow-x-auto > table th:last-child,
  .p-dinner .overflow-x-auto > table td:last-child {
    padding-right: 0;
  }
}

.p-dinner .dn-badge img {
  height: 30px;
}

.rm-table td small {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  white-space: nowrap;
}

/* レンタカーとアクセスの補助案内 */

.note.rc-etc-note {
  color: var(--red);
  font-weight: 400;
}

@media (max-width: 899px) {
  .rc-opt-price {
    text-align: center;
  }
}

.ac-bus-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
}

.ac-bus-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}

.ac-bus-legend .ac-key-chuo::before {
  background: var(--red);
}

.ac-bus-legend .ac-key-hokto::before {
  background: #1E7A4C;
}

.ac-bt {
  display: inline-block;
  min-width: 1.8em;
  font-weight: 700;
}

.ac-bt + .ac-bt {
  margin-left: 8px;
}

.ac-bt-chuo {
  color: var(--red);
}

.ac-bt-hokto {
  color: #1E7A4C;
}

/* 宴会場・ベストレート・お知らせ */

/* 宴会場: 4プランカードの「詳細はこちら」（現行サイトのプラン画像をライトボックスで開く） */

.bq-card p.bq-card-more {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
}

/* ベストレート 01: 人物イラスト（bestrate-check.webp）がPCで大きすぎるので、PCだけ小さく中央に */

@media (min-width: 900px) {
  .duo-fig.br-check-fig img {
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ベストレート／お知らせ: リード文を PC では「。」ごとに改行（SP は自然な折り返しのまま） */

.br-intro .pc-br,
.nw-intro .pc-br {
  display: none;
}

@media (min-width: 900px) {
  .br-intro .pc-br,
  .nw-intro .pc-br {
    display: inline;
  }
}

.p-family .fa-rules.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 899px) {
  .p-family .duo-txt p.mt-s2 {
    text-align: center;
  }
}

/* --- /family/ パンケーキのループスライド（パンケーキ→プチパン→海鮮茶漬け）。
   1・2枚目は切り抜きPNG（486x405 / 476x433）なので 3:2 の枠に「収める」。
   cover のままだと機械の上端とパンの下端が切れる。3枚目の実写JPGは cover のまま */

.p-family .duo-slide img[src$=".png"] {
  -o-object-fit: contain;
     object-fit: contain;
}

.p-group .gp-cases li {
  overflow: hidden;
}

.p-group .gp-cases figure {
  margin: -22px -22px 16px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-2);
}

.p-group .gp-cases figure img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/*  .fa-rules は margin の一括指定が .mx-auto より後に適用されるため、中央寄せをここで明示する。  */

.fa-rules.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* duo-slide の箱は flex 中央寄せにしない（Splide のトラック計算に干渉して隣スライドの端が数px見える） */

.duo-fig.duo-slide {
  display: block;
}

:root {
  --head-h: 66px;
}

@media (min-width: 768px) {
  :root {
    --head-h: 76px;
  }
}

@media (min-width: 1100px) {
  :root {
    --head-h: 88px;
  }

  .site-head .main-row > div {
    padding-left: calc(var(--pad) - 4px);
    padding-right: calc(var(--pad) + 8px);
  }
}

/* お知らせ一覧カテゴリフィルタ（末尾配置: 汎用 .tag-pill の塗り指定より後で勝たせる） */

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-tags .tag-pill {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(35, 24, 21, 0.28);
  background-color: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.news-tags a.tag-pill:hover,
.news-tags button.tag-pill:hover {
  border-color: var(--navy);
  background-color: var(--navy-soft);
  color: var(--navy);
}

.news-tags .tag-pill.is-current,
.news-tags .tag-pill[aria-current="page"],
.news-tags .tag-pill[aria-pressed="true"] {
  border-color: var(--navy);
  background-color: var(--navy);
  color: #fff;
  box-shadow: 0 1px 0 rgba(35, 24, 21, 0.12);
}

.news-tags .tag-pill.is-current:hover,
.news-tags .tag-pill[aria-current="page"]:hover,
.news-tags .tag-pill[aria-pressed="true"]:hover {
  border-color: var(--ink);
  background-color: var(--ink);
  color: #fff;
}