/*
汎用クラスCSS
*/
@charset "UTF-8";

body {
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Segoe UI",
    "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN",
    "メイリオ",
    Meiryo,
    sans-serif;
}

.midashi-f {
  font-weight: bold;     /* 700 */
  font-size: 1.05rem;    /* 少し小さめに */
  letter-spacing: 0.02em;/* 気持ち広げる */
}

/* 区切り線 */
.divider {
  height: 1px;
  background: #e0e0e0;
  border: none;
  margin: 24px 0;
  width: 100%;
  list-style: none;
}


/* 特定のリンクの色を変える汎用クラス */
.link-blue {
  color: #008cbe !important;
}

.link-blue:hover,
.link-blue:focus-visible {
  text-decoration-color: #008cbe !important; 
}

.link-red {
  color: red;
}

.link-red:hover,
.link-red:focus-visible {
  text-decoration-color: red !important; 
}

/* PCだけ改行 */
.br-pc-only {
  display: block;
}

/* SPでは改行しない */
@media (max-width: 767px) {
  .br-pc-only {
    display: none;
  }
}

/* SPだけ改行 */
.br-sp-only {
  display: none;
}

@media (max-width: 767px) {
  .br-sp-only {
    display: block;
  }
}

/* =============================================================
   Trend Utility – 共通ユーティリティ
   ・比率ボックス（館内設備・周辺スポット・朝食など）
   ・角丸ヘルパー
   ============================================================= */

/* 比率ボックス（汎用） */
.ratio-350x230,
.ratio-16x10 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f2f2f2;
  border-radius: 8px;
  display: block;
}

.ratio-350x230 {
  aspect-ratio: 350 / 230;
}

.ratio-350x230 > img,
.ratio-16x10 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 角丸画像用のヘルパー */
.br-12 {
  border-radius: 8px;
  overflow: hidden;
}

hr.sp-divider{
  border: 0;
  height: 1px;
  background: #ddd;
  margin: 14px 0;
}

@media (min-width: 768px){
  hr.sp-divider{
    margin: 18px 0;
    background: #e6e6e6;
  }
}