@charset "utf-8";

/*
 * 下層ページ専用スタイル（PC）
 * 例: onsen/ などの下層ページでのみ読み込む
 */

:root {
  /* 温泉ページ（Figmaで使用されている濃い赤） */
  --color-onsen-deep: #a2071b;

  /* 下層ページ側で背景クリーム色を上書き */
  --background-yellow-subpages: #f5f4e4;

  /* 温泉ページ・ヘッダー下ヒーロー用 */
  --onsen-page-hero-image: url("../assets/images/hero-bath@2x.png");

  /* 温泉ページ（Figma assets / 期限あり） */
  --onsen-figma-hero-photo: url("../assets/images/onsen/hero-photo-onsen.jpg");
  --onsen-figma-hero-mask: url("../assets/images/onsen/hero-mask.svg");

  /* 温泉ページ（Figma）：マスク写真（340x255 の右下） */
  --onsen-figma-bath-mask-340x255: url("../assets/images/onsen/bath-mask.svg");
  --onsen-figma-bath-photo-masked: url("../assets/images/onsen/bath-masked.jpg");

  /* ニュース記事 H2 見出し：左の装飾画像（擬似要素で表示） */
  --news-h2-icon-image: url("../assets/icons/hd_square.svg");
}

/* スマホのみ表示（PCでは非表示） */
@media (min-width: 851px) {
  br.sp-only {
    display: none;
  }
}

/* 下層ページ共通：見出し＋下線の装飾コンポーネント（他でも流用可）
 * 使い方: .heading-with-line でラップし、その中に __title と付随する __line を置く
 * 色・余白は親セクションで .section .heading-with-line__title / .section .heading-with-line__line で上書き可能
 */
.heading-with-line__title {
  text-align: center;
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  color: var(--text-brown);
}
.heading-with-line__line {
  width: 50px;
  height: 0;
  margin: 0 auto 40px;
  border: none;
  border-bottom: 4px solid var(--text-brown);
}

/* ========== 下層ページ（温泉）Figma デザイン通り ========== */

/* Figma ステージ（y=100 を 0 にして配置） */
.onsen-figma-stage-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.onsen-figma-stage-wrap.main-sections-bg {
  position: relative;
  /* main-sections-bg の共通背景は使わない（MVだけに限定する） */
  background-image: none;
}

/* MV背景は .onsen-section.onsen-page-hero のセクション背景で指定（高さは直書きしない） */

/* MVより下（640px〜）は白背景（下セクションと分離） */
.onsen-figma-stage-wrap.main-sections-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 560px;
  bottom: 0;
  background: var(--background-white);
  pointer-events: none;
  z-index: 0;
}

.onsen-figma-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
}

/* 下層のFigmaステージ内では、共通の「section間margin-top」を無効化 */
.onsen-figma-stage section + section {
  margin-top: 120px;
}
/* ニュース記事ページのみ section 間 60px */
.onsen-figma-stage.news-page--article section + section {
  margin-top: 60px;
}

.onsen-figma-stage .onsen-figma-onsen-display {
  margin-top: 80px;
}

/* ヒーロー（Figma）：背景のみ100%、コンテンツは通常幅で中央 */
.onsen-section.onsen-page-hero {
  width: 100%;
  padding: 130px 0 80px;
  background-image:
    url("../assets/decor/bg_subpages.png"),
    linear-gradient(
      var(--background-yellow-subpages),
      var(--background-yellow-subpages)
    );
  background-repeat: repeat-y, repeat;
  background-size:
    100% auto,
    auto;
  background-position: center;
  background-size: cover;
}

/* ヒーロー内側：写真は通常フロー、白ボックス・スタンプは absolute */
.onsen-page-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  min-height: 320px;
}

.onsen-page-hero__photo {
  width: 100%;
  max-width: 640px;
  min-height: 320px;
  overflow: hidden;
  /* background-image: url("../assets/images/onsen/hero-photo-onsen.jpg"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: none;
  box-shadow: none;
}

.onsen-page-hero__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  box-shadow: none;
}

/* Figma 625-4 では白ボックスなし（テキストは背景上に直接） */
.onsen-page-hero__box {
  display: none;
}

/* 温泉の文字と説明文を囲む白背景ボックス・画像の20px上に重ねる */
.onsen-page-hero__content-box {
  position: absolute;
  right: 30px;
  top: -50px;
  width: 540px;
  max-width: 100%;
  padding: 50px 50px 70px;
  background: var(--background-white);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 1;
}

/* ヒーロー内タイトル（温泉）＋左右ライン */
.onsen-page-hero__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.onsen-page-hero__title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: normal;
  color: var(--color-onsen);
  white-space: nowrap;
  text-shadow:
    0.1px 0.1px 0,
    -0.1px -0.1px 0;
}

.onsen-page-hero__title-logo {
  display: block;
  width: auto;
  height: 60px;
  object-fit: contain;
}

.onsen-page-hero__title-line {
  flex-shrink: 0;
  width: 81.203px;
  height: 2px;
  background: var(--color-onsen);
}

/* 左線を「温泉」の左に表示（flex order） */
.onsen-page-hero__title-line--left {
  order: -1;
}

.onsen-page-hero__subtitle {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--text-brown);
  text-align: center;
}

.onsen-page-hero__text {
  margin: 24px 0 0;
  width: 100%;
  max-width: 442px;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 26px;
  color: var(--text-brown);
  text-align: left;
}

.onsen-page-hero__stamp.onsen {
  bottom: 80px;
}

.onsen-page-hero__stamp {
  position: absolute;
  right: -20px;
  bottom: 45px;
  width: 145px;
  height: auto;
  display: block;
  opacity: 0.2;
  z-index: 2;
}

.restaurant-page-hero__stamp {
  width: 150px;
  bottom: 25px;
  transform-origin: bottom right;
}

/* 食事ページ：線・アクセントを食事カラー（orange）に */
.restaurant-page .onsen-page-hero__title-line {
  background: var(--color-dining);
  margin-top: 15px;
}

.restaurant-page .heading-with-line__line {
  border-bottom-color: var(--color-dining);
}
.restaurant-page .onsen-figma-baths__header .section-icon,
.restaurant-page .onsen-figma-baths__heading {
  color: var(--color-dining);
}

/* 食事ページ：宴会の下「お料理」タイトル・見出しのみ */
/* 道内最大級・２種類の泉質（Figma 616:2 厳密）
   中の要素は absolute を使わない。1280ルール（コンテンツ1080px・1280以上で中央・未満は左右100px） */
.onsen-figma-springs {
  width: 94%;
  margin: 83px auto 0;
}

@media (min-width: 851px) and (max-width: 1279px) {
  .onsen-figma-springs {
    width: 1080px;
    margin-left: 100px;
    margin-right: 100px;
  }
}

@media (min-width: 1280px) {
  .onsen-figma-springs {
    width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

.onsen-figma-springs__body {
  margin-top: 0;
  padding-top: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 59px;
}

.onsen-figma-springs__col {
  display: flex;
  flex-direction: column;
}

.onsen-figma-springs__divider {
  flex: 0 0 2px;
  height: 228px;
  background: var(--line-brown);
  margin-top: 0;
}

.onsen-figma-springs__well-head {
  display: flex;
  align-items: center;
  gap: 10px; /* Figma: アイコンとタイトルの間 */
}

.onsen-figma-springs__well-icon {
  width: 35px;
  height: 30.029px;
  display: block;
  object-fit: contain;
  transform: translateY(-2px); /* icon y=239, title y=241 */
}

.onsen-figma-springs__well-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  color: var(--text-brown);
  white-space: nowrap;
}

/* タイトル幅（Figma） */
.onsen-figma-springs__col--alkali .onsen-figma-springs__well-title {
  width: 151px;
  text-align: center;
}

.onsen-figma-springs__col--sodium .onsen-figma-springs__well-title {
  width: 172px;
  text-align: center;
}

.onsen-figma-springs__btn {
  margin-top: 30px;
  background: var(--color-onsen-deep);
  display: flex;
  align-items: center;
  padding: 10px 10px;
  text-align: center;
  justify-content: center;
}

.onsen-figma-springs__btn-text {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--color-white);
}

.onsen-figma-springs__col--alkali .onsen-figma-springs__btn-text {
  box-sizing: border-box;
}

.onsen-figma-springs__col--sodium .onsen-figma-springs__btn-text {
  text-align: center;
}

.no-break {
  white-space: nowrap;
}

.onsen-figma-springs__row {
  margin-top: 28px; /* Figma: 赤バナーと「効能」の間 */
  display: grid;
  grid-template-columns: 70px 1fr;
  column-gap: 0;
  align-items: start;
}

.onsen-figma-springs__label {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--text-brown);
}

.onsen-figma-springs__value {
  margin: 0;
  width: 300px;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--text-brown);
}

.onsen-figma-springs__row--temp {
  margin-top: 20px;
  align-items: center;
}

.onsen-figma-springs__temp {
  margin: 0;
  width: 202px;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  color: var(--text-brown);
}

/* 当館の温泉表示（Figma 616:2 正確再現・通常フロー・absolute 禁止） */
.onsen-figma-onsen-display {
  width: 100%;
}

.onsen-figma-onsen-display__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 70px 50px 70px;
  background: var(--background-yellow);
  box-sizing: border-box;
}

/* テキストのコンテンツ幅のみ500px固定（PC）。クリームの枠は __inner のまま */
.onsen-figma-onsen-display__content {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

@media (min-width: 851px) {
  .onsen-figma-onsen-display__content {
    width: 500px;
    max-width: 500px;
  }
}

/* 当館の温泉表示：見出しはbrown、付随する線だけ赤 */
.heading-with-line .heading-with-line__title {
  color: var(--text-brown);
}
.heading-with-line .heading-with-line__line {
  border-bottom-color: var(--color-onsen);
}

/* Figma: 2列（キー・値）、左揃え、区切り線は1〜4行目の下のみ */
.onsen-figma-onsen-display__row {
  display: grid;
  grid-template-columns: 184px 41px 1fr;
  align-items: start;
  min-height: 26px;
}

.onsen-figma-onsen-display__row .onsen-figma-onsen-display__k {
  grid-column: 1;
}

.onsen-figma-onsen-display__row .onsen-figma-onsen-display__v {
  grid-column: 3;
}

.onsen-figma-onsen-display__line {
  height: 0;
  margin: 2px 0 20px;
  border: none;
  border-top: 1px solid var(--line-brown);
}

.onsen-figma-onsen-display__line + .onsen-figma-onsen-display__row {
  margin-top: 0;
}

.onsen-figma-onsen-display__k,
.onsen-figma-onsen-display__v {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: var(--text-brown);
}

.onsen-figma-onsen-display__v {
  font-size: 15px;
  font-weight: 400;
}

.onsen-figma-onsen-display__row .onsen-figma-onsen-display__k {
  max-width: 255px;
}

/* ９種類のお風呂・3種のサウナ（Figma）：見出しは .pricing-header で共通化 */
.onsen-figma-baths__header .onsen-figma-baths__icon {
  position: static;
  left: auto;
  top: auto;
  width: 61px;
  height: 24px;
  margin: 0 auto 8px;
  display: block;
}

.onsen-figma-baths__header .onsen-figma-baths__heading {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  color: var(--text-brown);
}

/* 写真＋キャプション：通常フロー・absolute 禁止 */
.onsen-figma-baths__body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}

.onsen-figma-baths__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.onsen-figma-baths__row:last-child {
  margin-bottom: 0;
}

.onsen-figma-baths__actions {
  margin-top: 100px;
  margin-bottom: 120px;
}

/* 会員料金ブロック（温泉ページの入浴料内のみ・トップにはない） */
.pricing-member {
  width: 100%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 50px 5% 40px;
  background: var(--background-white);
  border: 1px solid var(--line-brown);
  border-radius: 0;
  box-sizing: border-box;
}

@media (min-width: 851px) {
  .pricing-member {
    width: 600px;
    max-width: 600px;
    padding: 50px 40px 40px;
  }
  /* スマホのみ改行：PCでは br を非表示 */
  .sp-br {
    display: none;
  }
  /* PC：入会金と注釈の間に20px */
  .pricing-member__admission-note {
    margin-left: 20px;
  }
}

.pricing-member__heading,
.pricing-member__subheading {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  color: var(--text-brown);
}

.pricing-member .heading-with-line__line {
  border-bottom-color: var(--color-onsen-deep);
}
.pricing-member__admission {
  width: 320px;
  margin: 0 auto 40px;
  padding: 12px 20px;
  max-width: 330px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--text-brown);
  background: color-mix(in srgb, var(--text-brown) 8%, var(--background-white));
  border-radius: 999px;
  box-sizing: border-box;
}

.pricing-member__table {
  margin-bottom: 40px;
}

.pricing-member__subheading {
  margin-top: 0;
  margin-bottom: 18px;
}

.pricing-member__terms {
  margin: 0;
  padding-left: 1.2em;
  list-style: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-brown);
}

.pricing-member__terms li {
  position: relative;
  padding-left: 0.6em;
  margin-bottom: 8px;
}

.pricing-member__terms li::before {
  content: "";
  position: absolute;
  left: -1.2em;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-onsen-deep);
}

.pricing-member__terms.orange li::before {
  background: var(--color-dining);
}

.pricing-member__terms.green li::before {
  background: var(--color-stay);
}

.onsen_notice .pricing-member__terms {
  width: 600px;
  margin: 0 auto;
}

.onsen-figma-baths__row--2 .onsen-figma-baths__item {
  flex: 1 1 calc(50% - 15px);
  max-width: calc(50% - 15px);
}

.onsen-figma-baths__row--3 .onsen-figma-baths__item,
.onsen-figma-baths__row--rest .onsen-figma-baths__item {
  flex: 1 1 calc((100% - 60px) / 3);
  min-width: 0;
}

.onsen-figma-baths__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* ギャラリー有効時のみ pointer（非活性化中は不要） */
  /* cursor: pointer; */
}

.onsen-figma-baths__item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 1;
}

.onsen-figma-baths__item figcaption {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  color: var(--text-brown);
}

/* 温泉写真ギャラリー（Slick拡大表示モーダル）※現在は非活性化。有効化時は .onsen-figma-baths__item の cursor: pointer を有効にすること */
.onsen-baths-gallery-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0.2s,
    opacity 0.2s;
}
.onsen-baths-gallery-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.onsen-baths-gallery-modal__backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--text-brown) 60%, transparent);
  cursor: pointer;
}
.onsen-baths-gallery-modal__inner {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: var(--background-white);
  border-radius: 8px;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--text-brown) 30%, transparent);
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.onsen-baths-gallery-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-brown) 20%, transparent);
  color: var(--text-brown);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onsen-baths-gallery-modal__close:hover,
.onsen-baths-gallery-modal__close:focus {
  background: color-mix(in srgb, var(--text-brown) 35%, transparent);
}
.onsen-baths-gallery {
  flex: 1;
  min-height: 0;
}
.onsen-baths-gallery .slick-list,
.onsen-baths-gallery .slick-track {
  height: 100%;
}
.onsen-baths-gallery__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 60px 50px;
  box-sizing: border-box;
}
.onsen-baths-gallery__slide img {
  max-width: 100%;
  width: auto;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  display: block;
}
.onsen-baths-gallery__caption {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-brown);
  text-align: center;
}
.onsen-baths-gallery .slick-prev,
.onsen-baths-gallery .slick-next {
  width: 44px;
  height: 44px;
  z-index: 1;
}
.onsen-baths-gallery .slick-prev {
  left: 10px;
}
.onsen-baths-gallery .slick-next {
  right: 10px;
}
.onsen-baths-gallery .slick-prev:before,
.onsen-baths-gallery .slick-next:before {
  content: none;
}
.onsen-baths-gallery .slick-prev,
.onsen-baths-gallery .slick-next {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-brown);
}
.onsen-baths-gallery .slick-dots {
  bottom: 16px;
}
.onsen-baths-gallery .slick-dots li button:before {
  color: var(--text-brown);
}

/* マスク写真（340x255）：擬似要素は装飾のためのみ */
/* 当館の温泉・温泉ギャラリー：見出し上に湯気アイコン */
.onsen-intro-section {
  padding-top: 100px;
}

.onsen-page-heading {
  text-align: center;
  margin-bottom: var(--section-title-margin-bottom);
}

.onsen-page-heading__icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  background: var(--color-onsen);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.onsen-page-heading--steam .onsen-page-heading__icon {
  mask-image: url("../assets/icons/icon_onsen.svg");
  -webkit-mask-image: url("../assets/icons/icon_onsen.svg");
}

.onsen-page-heading--ribbon .onsen-page-heading__icon {
  mask-image: url("../assets/icons/icon_onsen.svg");
  -webkit-mask-image: url("../assets/icons/icon_onsen.svg");
  opacity: 0.9;
}

.onsen-page-heading__title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-brown);
}

/* 2カラム：効能・泉質｜入浴方法（白カード・三角アイコン・赤ボタン） */
.onsen-twocol-section {
  padding-top: 100px;
}

.onsen-twocol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.onsen-info-card {
  position: relative;
  padding: 32px 28px 40px;
  background: var(--background-white);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.onsen-info-card__triangle {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: 16px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 14px solid var(--color-onsen);
}

.onsen-info-card__title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-onsen);
}

.onsen-info-card__btn {
  display: inline-block;
  margin-bottom: 24px;
  padding: 12px 24px;
  background: var(--color-onsen);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.3s;
}

.onsen-info-card__btn:hover {
  opacity: 0.9;
}

.onsen-info-card__table {
  margin: 0 0 20px;
  font-size: 14px;
}

.onsen-info-card__table dt {
  margin-top: 12px;
  font-weight: 600;
  color: var(--text-brown);
}

.onsen-info-card__table dt:first-child {
  margin-top: 0;
}

.onsen-info-card__table dd {
  margin: 4px 0 0;
  line-height: 1.6;
  color: var(--text-dark);
}

.onsen-info-card__list {
  margin: 0 0 20px;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dark);
}

.onsen-info-card__link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--color-onsen);
}

.onsen-info-card__link-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* 温泉ギャラリー：3列4行・キャプション */
.onsen-gallery-section {
  padding-top: 100px;
}

.onsen-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.onsen-gallery-grid figure {
  margin: 0;
}

.onsen-gallery-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.onsen-gallery-grid figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-dark);
}

/* 当館のこだわり：白背景テキストブロック */
.onsen-commit-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.onsen-commit-box {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 40px;
  background: var(--background-white);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.onsen-commit-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-dark);
}

/* ========== 食事ページ：お得なプラン・宴会のご予約（Figma 630:10 厳密再現） ========== */

.restaurant-plans__inner,
.restaurant-party__inner {
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (min-width: 1280px) {
  .restaurant-plans__inner,
  .restaurant-party__inner {
    margin-left: auto;
    margin-right: auto;
  }
}

/* お料理セクション（Figma 630:11・flex のみ） */
.restaurant-dining-section__inner {
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
}

.restaurant-dining-section__body {
  margin-top: 0;
}

.restaurant-dining-section__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.restaurant-dining-section__row:last-child {
  margin-bottom: 0;
}

.restaurant-dining-section__row--2 {
  margin-bottom: 20px;
}

.restaurant-dining-section__row--2 .restaurant-dining-section__item {
  flex: 1 1 calc(50% - 15px);
  max-width: calc(50% - 15px);
  min-width: 280px;
}

.restaurant-dining-section__row--3 .restaurant-dining-section__item {
  flex: 1 1 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
  min-width: 200px;
}

.restaurant-dining-section__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.restaurant-dining-section__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.restaurant-dining-section__item--large img {
  aspect-ratio: 525 / 394;
}

.restaurant-dining-section__row--3 .restaurant-dining-section__item img {
  aspect-ratio: 1;
}

.restaurant-dining-section__item figcaption {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  color: var(--text-brown);
}

/* ========== 下層ページ共通 CTA ボタン（他下層でも流用） ========== */
.subpage-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 44px 15px 60px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--color-white);
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.subpage-cta-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.15);
}

.subpage-cta-btn:hover .subpage-cta-btn__arrow {
  transform: translateX(4px);
}

.subpage-cta-btn__text {
  display: inline-block;
}

.subpage-cta-btn__arrow {
  display: inline-block;
  flex-shrink: 0;
  width: 55px;
  height: 35px;
  transition: transform 0.3s ease;
  margin-top: 4px;
}

.restaurant-page .hours-title span {
  font-size: 16px;
  display: block;
  margin-top: 25px;
}

.hours-header + div .heading-with-line__title {
  margin-top: 60px;
}

.restaurant-page .heading-with-line__title {
  margin-top: 100px;
}

.subpage-cta-btn--dining {
  background: var(--color-dining);
}

/* メニューダウンロードセクション（Figma 630:12 厳密再現） */
.restaurant-menu-dl__inner {
  max-width: 1080px;
  margin: 0 auto 100px;
  text-align: center;
  box-sizing: border-box;
}

.restaurant-menu-dl__lead {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-brown);
}

/* お得なプラン：タイトル以外をクリーム背景・1280pxで括る */
.restaurant-plans__body {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  background: var(--background-yellow);
  padding: 100px 80px 100px;
  box-sizing: border-box;
}

/* お得なプラン内の宴会のご予約：カードとの間の余白 */
.restaurant-plans .restaurant-party {
  margin-top: 60px;
}

/* お得なプラン：3カード（flex・grid 禁止） */
.restaurant-plans__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.restaurant-plans__card {
  flex: 1 1 280px;
  max-width: 280px;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  box-sizing: border-box;
}

.restaurant-plans__card-header {
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--color-white);
  background: var(--color-dining);
  text-align: center;
}

.restaurant-plans__card-photo {
  overflow: hidden;
  margin-top: 10px;
}

.restaurant-plans__card-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.restaurant-plans__card-price {
  margin: 0;
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  color: var(--text-brown);
  text-align: center;
}

/* 宴会のご予約：白ボックス */
.restaurant-party__inner {
  padding: 60px 40px 70px;
  background: var(--background-white);
}

.restaurant-party__inner .pricing-member__terms {
  width: 550px;
  margin: 0 auto;
}

.restaurant-party .heading-with-line__title {
  font-size: 24px;
}

.restaurant-party .heading-with-line__line {
  border-bottom-color: var(--color-dining);
}

.restaurant-party__lead {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-brown);
  text-align: center;
}

/* 宴会のご予約内：pricing-member__admission を流用（レイアウトのみ上書き） */
.restaurant-party .pricing-member__admission {
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  max-width: none;
}

/* 宿泊・ご予約セクション：pricing-member__admission を宴会と同じレイアウトで表示 */
.stay-booking .pricing-member__admission {
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  max-width: none;
}

.restaurant-party__contact-tel {
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  color: var(--text-brown);
  text-decoration: none;
  transition: all 0.3s ease;
}

.restaurant-party__contact-tel:hover {
  opacity: 0.7;
}

.restaurant-party__notes {
  margin: 0;
  padding: 0 0 0 1.2em;
  list-style: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-brown);
  text-align: left;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.restaurant-party__notes li {
  position: relative;
  padding-left: 0.4em;
  margin-bottom: 8px;
}

.restaurant-party__notes li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ========== 宿泊ページ（Figma 187:75・他下層のMV/見出し/写真配置CSSを流用） ========== */
.stay-page .onsen-page-hero__title {
  color: var(--color-stay);
}
.stay-page .onsen-page-hero__title-line {
  background: var(--color-stay);
  margin-top: 18px;
}
.stay-page .heading-with-line__line {
  border-bottom-color: var(--color-stay);
}

.stay-booking,
.stay-rooms,
.stay-facilities,
.stay-services {
  margin-top: var(--section-gap);
}
.stay-booking__inner,
.stay-rooms__inner,
.stay-facilities__inner,
.stay-services__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}
@media (min-width: 851px) and (max-width: 1279px) {
  .stay-booking__inner,
  .stay-rooms__inner,
  .stay-facilities__inner,
  .stay-services__inner {
    margin-left: 100px;
    margin-right: 100px;
  }
}
@media (min-width: 1280px) {
  .stay-booking__inner,
  .stay-rooms__inner,
  .stay-facilities__inner,
  .stay-services__inner {
    margin-left: auto;
    margin-right: auto;
  }
}

.stay-booking__lead {
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-brown);
  text-align: center;
}

.stay-booking__inner .section-heading {
  margin-bottom: 20px;
}

/* お部屋セクション（Figma 640:13）：3箇条・13枚グリッド(2+3+2+3+3) */
.stay_box {
  padding: 60px 40px 20px;
  margin-bottom: 60px;
  width: 670px;
  max-width: unset;
}
.stay_box .pricing-col {
  max-width: unset;
}
.stay-rooms .pricing-member__terms {
  width: fit-content;
  /* margin: 0 auto 40px; */
}
.stay_box .pricing-cat {
  width: 120px;
}
.stay_box .pricing-row {
  justify-content: flex-start;
}
.stay-rooms .pricing-price {
  flex-shrink: unset;
}

.stay-rooms .onsen-figma-baths__row--2 .onsen-figma-baths__item {
  flex: unset;
  max-width: calc(49%);
}
.stay-rooms .onsen-figma-baths__row {
  gap: 2%;
}

.stay-rooms__grid {
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-top: 24px;
}
.stay-rooms__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.stay-rooms__row--2 .stay-rooms__item {
  flex: 1 1 calc(50% - 10px);
  max-width: calc(50% - 10px);
}
.stay-rooms__row--3 .stay-rooms__item {
  flex: 1 1 calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
}
.stay-rooms__item {
  overflow: hidden;
}
.stay-rooms__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1;
}
.facility-actions.stay-rooms__actions {
  margin-top: 60px;
  margin-bottom: 120px;
  justify-content: center;
}
.stay-services__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 24px;
}
.stay-services__col {
  flex: 1 1 280px;
}
.stay-services__subtitle {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-brown);
}
.stay-services__list {
  margin: 0;
  padding-left: 1.2em;
  list-style: none;
  font-size: 14px;
  color: var(--text-brown);
  line-height: 1.8;
}
.stay-services__list li {
  position: relative;
}
.stay-services__link {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-brown);
}
.stay-page__actions-wrap {
  margin-top: var(--section-gap);
}

/* ========== 館内紹介ページ（Figma 640:14 厳密再現・写真配置 2-3-3-2-3-2 行） ========== */
.facility-page .onsen-figma-stage-wrap.main-sections-bg::after {
  top: 260px;
}
.facility-page-hero {
  width: 100%;
  padding: 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    url("../assets/decor/bg_subpages2.png"),
    linear-gradient(
      var(--background-yellow-subpages),
      var(--background-yellow-subpages)
    );
  background-repeat: repeat-y, repeat;
  background-size:
    100% auto,
    auto;
  background-position: center;
  background-size: cover;
}
.facility-page-hero__inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.facility-page-hero__title {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: normal;
  color: var(--text-brown);
}

/* ========== ニュース一覧ページ（MVは施設紹介と同様） ========== */
.news-page .onsen-figma-stage-wrap.main-sections-bg::after {
  top: 260px;
}
.news-page-hero {
  width: 100%;
  padding: 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    url("../assets/decor/bg_subpages2.png"),
    linear-gradient(
      var(--background-yellow-subpages),
      var(--background-yellow-subpages)
    );
  background-repeat: repeat-y, repeat;
  background-size:
    100% auto,
    auto;
  background-position: center;
  background-size: cover;
}
.news-page-hero__inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.news-page-hero__title {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: normal;
  color: var(--text-brown);
}

/* ニュースカテゴリページ：h2下に中央で「カテゴリ：カテゴリ名」装飾つき */
.news-category-label {
  margin: 0 auto 40px;
  padding: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-brown);
}
.news-category-label__prefix {
  margin-right: 4px;
}
.news-category-label__name {
  display: inline-block;
  padding: 4px 16px 6px;
  background: var(--surface-light);
  border-radius: 999px;
  font-weight: 600;
}

/* 下層ページのみ .info-section の padding を 0 に */
.onsen-figma-stage .info-section {
  padding: 0 0 0;
}

.news-page .news-section {
  background: var(--background-white);
}
.news-page .news-section.news-list {
  margin-bottom: 120px;
  max-width: unset;
}

.news-page .news-item {
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--line-brown);
}
.news-page .news-item:last-child {
  border-bottom: none;
}
.news-page .news-item__link {
  padding: 30px 0;
}
.news-page .news-item__body {
  margin-top: 0;
  gap: 10px;
}
.news-page .news-list {
  gap: 0;
}
/* 下層のみ：アイキャッチ150pxスクエア */
.news-page .news-item__thumb {
  width: 150px;
  height: 150px;
}
.news-page .news-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 下層のみ：日付の下にカテゴリ */
.news-page .news-meta {
  flex-direction: column;
  align-items: flex-start;
}
.news-page .news-meta ul {
  padding-left: 0;
  margin: 10px 0 0;
}
/* 下層のみ：タイトル18px・weight600・本文15px・色はbrown */
.news-page .news-title,
.news-page .news-title a {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-brown);
}
/* 下層のみ：タイトルの下に本文2行・最後は...（CSSで省略） */
.news-page .news-item__excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-brown);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-page .news-item__excerpt a {
  color: inherit;
  text-decoration: none;
}
.news-page .news-item__excerpt a:hover {
  opacity: 0.7;
}

/* ========== ニュース記事ページ（Figma 232:9849） ========== */
.news-article .news-header {
  margin-bottom: var(--section-title-margin-bottom);
}
.news-article__title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-brown);
  text-align: center;
}
.news-article__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 80px;
  padding: 0;
  text-align: center;
}
.news-article__date {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-brown);
}

.news-article__categories {
  text-align: center;
  padding: 0;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.news-article__meta .news-tag {
  margin-right: 0;
}
.news-article__eyecatch {
  margin: 0 0 80px;
  overflow: hidden;
  background: var(--surface-light);
  width: 500px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.news-article__eyecatch img {
  width: 500px;
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  min-height: 200px;
  box-sizing: border-box;
}
.news-article__body {
  margin: 0 0 48px;
}
.news-article__block {
  margin-bottom: 40px;
}
.news-article__block:last-child {
  margin-bottom: 0;
}
/* 見出し H2：CSS で装飾（オレンジのアイコン＋テキスト） */
/* 見出し H2：左の装飾は擬似要素で画像を配置（画像パスは :root --news-h2-icon-image） */
.news-article__h2 {
  position: relative;
  z-index: 0;
  margin: 0 0 30px;
  padding: 14px 0 0 30px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-brown);
}
.news-article__h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 68px;
  height: 57px;
  background-image: var(--news-h2-icon-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.news-article__body p {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-brown);
}
.news-article__body p:last-child {
  margin-bottom: 0;
}
/* 記事の下・ニュース一覧の上：左右に前の記事／次の記事 */
.news-article__prev-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 80px 0 0;
  padding: 0;
  gap: 16px;
}
.news-article__prev {
  margin-right: auto;
}
.news-article__next {
  margin-left: auto;
}
.news-article__prev,
.news-article__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-brown);
  text-decoration: none;
  transition: opacity 0.2s ease;
  width: 50%;
}

.news-article__next {
  flex-direction: row-reverse;
}

.news-article__prev-next-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  display: flex;
  align-items: center;
}
.news-article__prev a::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  left: 2px;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  vertical-align: middle;
  box-sizing: border-box;
  border-top: 2px solid var(--color-dining);
  border-left: 2px solid var(--color-dining);
  transform: rotate(-45deg);
  transition: left 0.2s ease;
}
.news-article__prev a:hover::before {
  left: -5px;
}
.news-article__next a::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  right: 2px;
  width: 11px;
  height: 11px;
  margin-left: 8px;
  vertical-align: middle;
  box-sizing: border-box;
  border-top: 2px solid var(--color-dining);
  border-right: 2px solid var(--color-dining);
  transform: rotate(45deg);
  transition: right 0.2s ease;
}
.news-article__next a:hover::after {
  right: -5px;
}

.news-article__cta {
  text-align: center;
  margin-bottom: 100px;
  margin-top: 100px;
}

.facility-intro__body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}
@media (min-width: 851px) and (max-width: 1279px) {
  .facility-intro__body {
    margin-left: 100px;
    margin-right: 100px;
  }
}
@media (min-width: 1280px) {
  .facility-intro__body {
    margin-left: auto;
    margin-right: auto;
  }
}
.facility-intro__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.facility-intro__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
}
.facility-intro__row--2 .facility-intro__item {
  flex: 1 1 calc((100% - 30px) / 2);
  min-width: 0;
}
.facility-intro__row--3 .facility-intro__item {
  flex: 1 1 calc((100% - 60px) / 3);
  min-width: 0;
}
.facility-intro__item {
  margin: 0;
  min-height: 0;
}
.facility-intro__item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  vertical-align: top;
  /* 画像未配置・読み込み失敗時も枠を確保（正方形） */
  aspect-ratio: 1;
  background: var(--line-brown);
}
.facility-intro__actions {
  margin-top: 100px;
  margin-bottom: 120px;
}

/* ========== プライバシーポリシーページ（Figma 232:10693） ========== */
.privacy-policy {
  padding-bottom: 100px;
}
.privacy-policy__body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}
.privacy-policy__intro {
  margin: 0 0 60px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-brown);
}
.privacy-policy__block {
  margin: 0 0 60px !important;
}
.privacy-policy__block:last-child {
  margin-bottom: 0;
}
.privacy-policy__h3 {
  margin: 0 0 30px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-brown);
}
/* プライバシー見出し：記事ページと同じ装飾クラスで hd_square_pink.svg */
.privacy-policy .news-article__h2::before {
  background-image: url("../assets/icons/hd_square_pink.svg");
}
.privacy-policy__block p {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-brown);
}
.privacy-policy__block p:last-child {
  margin-bottom: 0;
}
.privacy-policy__list {
  margin: 0 0 1em;
  padding-left: 1.5em;
  list-style: disc;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-brown);
}
.privacy-policy__list li {
  margin-bottom: 0.5em;
}
.privacy-policy__list li:last-child {
  margin-bottom: 0;
}
.privacy-policy__list--nested {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
  list-style: circle;
}
@media (min-width: 851px) and (max-width: 1279px) {
  .privacy-policy__body {
    margin-left: 100px;
    margin-right: 100px;
    margin-bottom: 120px;
  }
}
@media (min-width: 1280px) {
  .privacy-policy__body {
    margin-left: auto;
    margin-right: auto;
  }
}