/* ============================================================
   structure.css — レイアウトの骨格のみを定義する
   色・フォント・装飾はここに書かない（すべて theme.css 側）。
   着せ替えは theme.css の差し替えだけで行う設計。
   ============================================================ */

/* --- リセット（最小限） --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
iframe { border: 0; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }

/* --- 幅の基準（コンテンツ幅） --- */
.site-header__inner,
.site-footer__inner,
.section,
.legal {
  width: min(100% - 40px, 1040px);
  margin-inline: auto;
}

/* --- ヘッダー --- */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 14px;
}
.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

/* --- セクション共通 --- */
.main { padding-block-end: 80px; }
.section { padding-block-start: 64px; }
.section__title { margin-block-end: 24px; }

/* --- ヒーロー --- */
.hero__image {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}
.hero__body {
  width: min(100% - 40px, 1040px);
  margin-inline: auto;
  padding-block: 28px 8px;
  display: grid;
  gap: 8px;
}
.hero--top .hero__body {
  padding-block: 96px 40px;
  text-align: center;
}

/* --- 宿について --- */
.about__description {
  max-width: 46em;
  margin-block-end: 28px;
}
.about__features-heading { margin-block-end: 12px; }
.feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-end: 28px;
}
.fact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
}
.fact-list__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

/* --- ギャラリー --- */
.gallery__notice { margin-block-end: 16px; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (max-width: 760px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 空室カレンダー --- */
.calendar-section__note { margin-block-end: 20px; }
.calendar__months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
}
.calendar__month-title { margin-block-end: 8px; }
.calendar__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}
.calendar__weekday, .calendar__day { padding-block: 8px; }
.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-block-start: 16px;
}
.calendar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.calendar__legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
}

/* --- 料金とプラン --- */
.plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-block-end: 28px;
}
.plan-card { padding: 24px; }
.plan-card__name { margin-block-end: 4px; }
.plan-card__name-en { margin-block-end: 12px; }
.plan-card__price { margin-block-end: 12px; }
.plan-card__rules { display: grid; gap: 6px; }
.plans__notes-heading { margin-block-end: 10px; }
.plans__notes-list { display: grid; gap: 6px; }

/* --- 予約リクエスト --- */
.booking__approval-note {
  max-width: 46em;
  margin-block-end: 24px;
}
.booking__notice {
  max-width: 46em;
}
.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  max-width: 640px;
}
.booking-form__plan-fieldset,
.booking-form__field--wide,
.booking-form__status,
.booking-form__submit {
  grid-column: 1 / -1;
}
.booking-form__plan-fieldset {
  display: grid;
  gap: 8px;
}
.booking-form__plan-option {
  display: flex;
  align-items: center;
  gap: 8px;
}
.booking-form__field { display: grid; gap: 6px; }
.booking-form__input, .booking-form__textarea { width: 100%; }
@media (max-width: 560px) {
  .booking-form { grid-template-columns: 1fr; }
}

/* --- アクセス --- */
.access__address { margin-block-end: 6px; }
.access__address-label { margin-inline-end: 8px; }
.access__route { margin-block-end: 20px; }
.access__map-frame {
  width: 100%;
  height: 360px;
}
.access__map-link { margin-block-start: 10px; }

/* --- ハウスルール --- */
.rules__times {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-block-end: 20px;
}
.rules__time { display: flex; gap: 12px; align-items: baseline; }
.rules__list { display: grid; gap: 10px; max-width: 46em; }

/* --- フッター --- */
.site-footer { margin-block-start: 80px; }
.site-footer__inner {
  display: grid;
  gap: 12px;
  padding-block: 36px;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

/* --- トップ: 4宿カード --- */
.stay-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.stay-card__link { display: block; height: 100%; }
.stay-card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.stay-card__body {
  padding: 20px;
  display: grid;
  gap: 6px;
}
.stay-card__badge {
  justify-self: start;
  display: inline-block;
}

/* --- 法定ページ --- */
.legal { padding-block-start: 40px; }
.legal__title { margin-block-end: 28px; }
.legal__intro { max-width: 46em; margin-block-end: 24px; }
.legal-table { display: grid; }
.legal-table__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px 24px;
  padding-block: 14px;
}
@media (max-width: 640px) {
  .legal-table__row { grid-template-columns: 1fr; }
}
.legal-table__value { display: grid; gap: 6px; }
.legal-section { margin-block-start: 32px; }
.legal-section__heading { margin-block-end: 12px; }
.legal-section__paragraph { max-width: 46em; margin-block-end: 10px; }
.legal-section__list { display: grid; gap: 6px; max-width: 46em; margin-block-start: 8px; }
.legal-plans { display: grid; gap: 16px; margin-block-start: 12px; }
.legal-plan__name { margin-block-end: 6px; }
.legal-plan__rules { display: grid; gap: 4px; }
.legal-notes { display: grid; gap: 4px; }
.legal-facilities { display: grid; gap: 20px; }
.legal-facility { display: grid; gap: 4px; }
.legal__enacted { margin-block-start: 36px; }