@charset "UTF-8";
/* ============================================================
   ホテル・ボーネン｜土台のCSS
   ------------------------------------------------------------
   リセット／本文の見た目／横幅の枠 だけを持つ。
   個別の部品（見出し・ボタン・カード等）は別ファイルに分ける。
   出典：デザイン仕様書_採寸_2026-08-14.md
   ============================================================ */

/* --- 1. リセット（最低限だけ） ----------------------------- */

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

html {
  /* 1rem = 10px にそろえる（採寸表がpx基準のため計算しやすい）
     10px直書きではなく62.5%にして、利用者の文字サイズ設定を殺さない */
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

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

ul, ol { list-style: none; }

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

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

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


/* --- 2. 本文の基本 ---------------------------------------- */

body {
  font-family: var(--hw-font-ja);
  font-size: 1.4rem;          /* 14px */
  line-height: 2;             /* 28px＝2.0倍。このサイトの読みやすさの正体 */
  font-weight: 500;
  letter-spacing: 0.06em;     /* 14px時 ≒ 0.84px */
  color: var(--hw-text);
  background: var(--hw-white);
  /* 明朝の細い線をきれいに出す */
  -webkit-font-smoothing: antialiased;
}

@media screen and (max-width: 767px) {
  body {
    font-size: 1.3rem;        /* 13px */
    line-height: 2;           /* 26px */
  }
}

/* 標準の段落（改行位置をこちらで決める文章に使う） */
.hw-p {
  font-size: 1.4rem;
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.06em;
}

@media screen and (max-width: 767px) {
  .hw-p { font-size: 1.3rem; }
}

/* 段落が続くときの間 */
.hw-p + .hw-p { margin-top: 2.8rem; }


/* --- 3. 横幅の枠（3種類だけ） ------------------------------ */

.hw-w1520,
.hw-w1200,
.hw-w900 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hw-w1520 { max-width: var(--hw-w-wide); }  /* 1520px */
.hw-w1200 { max-width: var(--hw-w-main); }  /* 1200px */
.hw-w900  { max-width: var(--hw-w-lead); }  /* 900px  */

/* スマホでは画面の左右に3%のあきを取る */
@media screen and (max-width: 767px) {
  .hw-w1520,
  .hw-w1200,
  .hw-w900 {
    padding-left: var(--hw-pad-side);
    padding-right: var(--hw-pad-side);
  }
}


/* --- 4. 縦の余白（セクションの上下） ------------------------ */

.hw-sec       { padding-top: var(--hw-gap-130); padding-bottom: var(--hw-gap-130); }
.hw-sec--wide { padding-top: var(--hw-gap-140); padding-bottom: var(--hw-gap-140); }
/* 写真を背景に敷くブロックの内側（PC 200px／スマホ 70px） */
.hw-sec--visual { padding-top: var(--hw-gap-vis); padding-bottom: var(--hw-gap-vis); }


/* --- 5. 画面の外に出さないための共通の受け皿 ---------------- */

.hw-body-wrap { overflow-x: hidden; }


/* --- 6. 読み上げ用（目には見えない見出し等） ---------------- */

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