@charset "UTF-8";

/* =========================================================================
   おすすめホテル（トップページ）

   ・写真が無くても成立するように、白〜淡いグレーの面と細いゴールドの罫で組む。
   ・黒で塗りつぶした大きな箱は作らない。枠・影・グラデーションも足さない。
   ・写真を登録した記事は .ov-hotelcard（写真あり）に切り替わる。
   ========================================================================= */

.ov-hotels__intro {
  max-width: 34em;
  margin: 0 0 clamp(18px, 2vw, 28px);
  font-size: 13px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.62);
}

body.ov-body .ov-hotels__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ov-hotels__item { margin: 0; }

/* ---- カード本体 ---- */

body.ov-body .ov-hotelcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #F5F4F1;
  color: #1A1D22;
  text-decoration: none;
  transition: background 0.5s var(--ov-ease);
}
body.ov-body .ov-hotelcard:hover { background: #FBFAF8; }
body.ov-body .ov-hotelcard:focus-visible { outline: 2px solid var(--ov-gold-soft); outline-offset: 3px; }

.ov-hotelcard__media {
  position: relative;
  display: block;
  overflow: hidden;
}
.ov-hotelcard__media:before { content: ""; display: block; padding-top: 66.6%; }
body.ov-body .ov-hotelcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.ov-hotelcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(20px, 2vw, 30px) clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px);
}

.ov-hotelcard__area {
  display: block;
  font-family: var(--ov-jp);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #6E6A62;
}
.ov-hotelcard__rule {
  display: block;
  width: 28px;
  height: 1px;
  margin: 12px 0 0;
  background: #B9A26A;
}
.ov-hotelcard__name {
  display: block;
  margin: 14px 0 0;
  font-family: var(--ov-jps);
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.5;
  color: #16191E;
}
.ov-hotelcard__text {
  display: block;
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.95;
  color: #4A4E55;
}
.ov-hotelcard__more {
  display: block;
  margin: auto 0 0;
  padding: 18px 0 0;
  font-family: var(--ov-jp);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #7A6A44;
}
.ov-hotelcard__more span { margin-left: 8px; }
body.ov-body .ov-hotelcard:hover .ov-hotelcard__more { color: #96803F; }

/* 写真が無いカードは、上下の余白を少し広く取って組版で見せる */
.ov-hotelcard--text .ov-hotelcard__body { padding-top: clamp(26px, 2.6vw, 38px); }

/* ---- 一覧への導線 ---- */

.ov-hotels__foot { margin: clamp(18px, 2vw, 28px) 0 0; }
body.ov-body .ov-hotels__all {
  font-family: var(--ov-jp);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ov-gold-soft);
  border-bottom: 1px solid rgba(185, 162, 106, 0.4);
  padding-bottom: 3px;
}
body.ov-body .ov-hotels__all span { margin-left: 8px; }
body.ov-body .ov-hotels__all:hover { border-bottom-color: var(--ov-gold-soft); }

/* ---- iPad ---- */

@media (max-width: 1024px) {
  body.ov-body .ov-hotels__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-hotels__item:nth-child(3) { grid-column: 1 / -1; }
  .ov-hotels__item:nth-child(3) .ov-hotelcard__text { max-width: 46em; }
}

/* ---- スマートフォン ---- */

@media (max-width: 700px) {
  body.ov-body .ov-hotels__list { grid-template-columns: minmax(0, 1fr); }
  .ov-hotels__item:nth-child(3) { grid-column: auto; }
  .ov-hotelcard__name { font-size: 16px; }
  .ov-hotelcard__text { font-size: 12.5px; }
}