/* Tokyu Hotels & Resorts — 全67ホテル（地域駆動の地図＋横1行カルーセル） */

.hotels67 {
  width: min(calc(100% - (2 * clamp(40px, 8vw, 134px))), 1520px);
  margin-inline: auto;
  padding: clamp(70px, 7vw, 110px) 0 clamp(90px, 9vw, 140px);
  color: #584B3A;
  font-family: "Shippori Mincho B1", serif;
}

.hotels67__top {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 44fr);
  column-gap: 4%;
  align-items: stretch;
}

.hotels67__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: clamp(48px, 5.6vw, 92px); /* 地図ヘッダーの上余白と揃える */
}

/* ---- map ---- */
.hotels67 .rei-map__stage {
  position: relative;
}

.hotels67 .rei-map {
  /* ベージュ(--cream)をやめ、REI BROWN の列島に。境界線は紙色で反転 */
  --rm-base: #584B3A;
  --rm-line: rgba(241, 237, 228, .8);
}

.hotels67 .rei-map__stage,
.hotels67 .rei-map,
.hotels67__mapcol { overflow: hidden; }

.hotels67 .rei-map__svg {
  display: block;
  width: 100%;
  height: clamp(440px, 56vh, 560px);
  overflow: hidden;
  transition: opacity .7s ease, transform .7s ease;
}

/* 端のフェードは CSS mask をやめ、同色オーバーレイで再現する。
   mask は SVG 全体をラスターレイヤー化し、地域ズーム時にベクター地図が粗く見える原因だった。
   オーバーレイなら SVG は純ベクターのまま＝どのズームでもシャープ。見た目は従来と同一。 */
.hotels67 .rei-map__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(115% 115% at 50% 45%, transparent 58%, var(--paper, #F1EDE4) 92%);
}

/* HAWAII ラベルはフェード帯より前面に */
.hotels67 .hotels67__hawaii { z-index: 2; }

.hotels67 .rei-pref.is-lit {
  fill: var(--gold, #AA8534) !important;
  filter: drop-shadow(0 0 6px rgba(170, 133, 52, .7)) drop-shadow(0 0 16px rgba(170, 133, 52, .4));
}

.hotels67 .rei-map__stage.is-hawaii .rei-map__svg,
.hotels67 .rei-map__stage.is-okinawa .rei-map__svg {
  opacity: 0;
  transform: translate(12%, -8%) scale(.72);
}

.hotels67__hawaii,
.hotels67__okinawa {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: block;
  opacity: 0;
  transform: translate(-62%, -42%) scale(.78);
  transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.hotels67__hawaii { width: 100%; }

.hotels67__okinawa { width: min(82%, 480px); }

.hotels67__hawaii img {
  display: block;
  width: 100%;
  height: auto;
}

.hotels67__okinawa svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 230 / 170;
  overflow: visible;
}

.hotels67__okinawa use {
  fill: #AA8534;
  stroke: rgba(88, 75, 58, .35);
  stroke-width: .8;
}

.hotels67 .rei-map__stage.is-hawaii .hotels67__hawaii,
.hotels67 .rei-map__stage.is-okinawa .hotels67__okinawa {
  opacity: 1;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .hotels67 .rei-map__svg,
  .hotels67__hawaii,
  .hotels67__okinawa {
    transition: none;
  }
}

/* ---- side column ---- */
.hotels67__regions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(18px, 2.2vw, 36px);
  padding-bottom: clamp(16px, 1.6vw, 24px);
  margin-bottom: clamp(18px, 1.8vw, 26px);
  border-bottom: 1px solid rgba(88, 75, 58, .2);
}

.h67-chip {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 9px 16px 10px;
  background: none;
  border: 1px solid rgba(88, 75, 58, .32);
  color: #584B3A;
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 500;
  letter-spacing: .1em;
  white-space: nowrap;
  cursor: pointer;
  transform-origin: center;
  transition: color .7s ease, border-color .7s ease, background .7s ease,
              transform .9s cubic-bezier(.22, 1, .36, 1);
}

.h67-chip i {
  font-style: normal;
  font-family: "Marcellus", serif;
  font-size: .82em;
  letter-spacing: .06em;
  color: #584B3A;
  opacity: .65;
  transition: color .8s ease, opacity .8s ease;
}

.h67-chip:hover {
  color: #3E7150;
  border-color: rgba(62, 113, 80, .6);
  transform: scale(1.08);
}

.h67-chip:hover i { color: #3E7150; opacity: 1; }

.h67-chip.is-active {
  background: #3E7150;
  border-color: #3E7150;
  color: #F1EDE4;
  transform: none;
}

.h67-chip.is-active i { color: rgba(241, 237, 228, .85); opacity: 1; }

.hotels67__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: auto;
  padding-top: clamp(20px, 2vw, 30px);
}

.hotels67__page {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
}

.hotels67__page b {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .05em;
  margin-right: 6px;
}

.hotels67__page i { font-style: normal; opacity: .5; }

.hotels67__page span { margin-left: 6px; opacity: .55; }

.hotels67__arrows { display: flex; align-items: center; gap: 14px; }

.hotels67__arrow[disabled] { opacity: .3; pointer-events: none; }

.hotels67__all {
  display: inline-block;
  white-space: nowrap;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(88, 75, 58, .4);
  color: #584B3A;
  font-size: 12px;
  letter-spacing: .16em;
  text-decoration: none;
  transition: color .4s ease, border-color .4s ease;
}

.hotels67__all:hover { color: #3E7150; border-color: rgba(62, 113, 80, .6); }

/* ---- carousel panel ---- */


.hotels67__arrow {
  appearance: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid rgba(88, 75, 58, .34);
  border-radius: 50%;
  cursor: pointer;
  transition: background .4s ease, border-color .4s ease;
}

.hotels67__arrow svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #584B3A;
  stroke-width: 1.5;
  transition: stroke .4s ease;
}

.hotels67__arrow:hover { background: #584B3A; border-color: #584B3A; }

.hotels67__arrow:hover svg { stroke: #F1EDE4; }

.hotels67__row { display: none; }

.hotels67__row.is-active { display: block; }

.hotels67__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 30px) clamp(16px, 1.6vw, 24px);
}

.h67-card {
  display: none;
  color: #584B3A;
  text-decoration: none;
}

.h67-card.is-shown { display: block; }

.hotels67__row.is-active .h67-card.is-shown .h67-card__media {
  animation: h67Wipe 1.15s cubic-bezier(.22, 1, .36, 1) backwards;
}

.hotels67__row.is-active .h67-card.is-shown .h67-card__media img {
  animation: h67Settle 1.6s cubic-bezier(.22, 1, .36, 1) backwards;
}

.hotels67__row.is-active .h67-card.is-shown .h67-card__name {
  animation: h67Name .9s ease .3s backwards;
}

.hotels67__row.is-active .h67-card.is-shown:nth-of-type(4n+2) .h67-card__media,
.hotels67__row.is-active .h67-card.is-shown:nth-of-type(4n+2) .h67-card__media img { animation-delay: .1s; }
.hotels67__row.is-active .h67-card.is-shown:nth-of-type(4n+2) .h67-card__name { animation-delay: .4s; }

.hotels67__row.is-active .h67-card.is-shown:nth-of-type(4n+3) .h67-card__media,
.hotels67__row.is-active .h67-card.is-shown:nth-of-type(4n+3) .h67-card__media img { animation-delay: .2s; }
.hotels67__row.is-active .h67-card.is-shown:nth-of-type(4n+3) .h67-card__name { animation-delay: .5s; }

.hotels67__row.is-active .h67-card.is-shown:nth-of-type(4n) .h67-card__media,
.hotels67__row.is-active .h67-card.is-shown:nth-of-type(4n) .h67-card__media img { animation-delay: .3s; }
.hotels67__row.is-active .h67-card.is-shown:nth-of-type(4n) .h67-card__name { animation-delay: .6s; }

@keyframes h67Wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes h67Settle {
  from { transform: scale(1.1); }
}

@keyframes h67Name {
  from { opacity: 0; transform: translateY(10px); }
}

.h67-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: color-mix(in srgb, #BEB098 18%, #F1EDE4);
}

.h67-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

/* ホバーのズームは reveal アニメが完全に終わってから（.is-revealed）だけ効かせる。
   アニメ中は transform をアニメが占有しており、終了瞬間にホバーへ切り替わると「がくっ」と飛ぶため。
   .is-revealed 付与後はこの transition が 1.0→1.05 を滑らかに補間する。 */
.h67-card.is-revealed:hover .h67-card__media img { transform: scale(1.05); }

.h67-card__name {
  display: block;
  padding-top: 11px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
}

.h67-card__name .nw { display: inline-block; }

/* ---- SP: 地図とホテルが1画面に同居するコンパクト構成 ---- */
@media (max-width: 768px) {
  .hotels67 { padding: 36px 0 52px; }

  .hotels67__top {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .hotels67 .rei-map__head { padding: 0 0 10px; gap: 6px; }

  /* キッカーは1行で収める */
  .hotels67 .rei-map__kicker {
    font-size: 10px;
    letter-spacing: .3em;
    white-space: nowrap;
  }

  .hotels67 .rei-map__count { font-size: 15px; }

  .hotels67 .rei-map__count b { font-size: 32px; }

  .hotels67 .rei-map__svg { height: clamp(280px, 50vw, 360px); }

  .hotels67__okinawa {
    width: min(82%, 250px);
  }

  .hotels67__side { padding-top: 8px; }

  /* タブは2行折返し（横スクロールはしない） */
  /* 4等分グリッドで必ず2段（4+3）に収める。件数は金色カウンターが担うのでSPでは省略 */
  .hotels67__regions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px 6px;
    padding-bottom: 10px;
    margin-bottom: 12px;
  }

  .h67-chip {
    font-size: 11px;
    letter-spacing: .02em;
    padding: 7px 2px 8px;
    gap: 0;
    justify-content: center;
  }

  .h67-chip i { display: none; }

  .h67-chip:hover { transform: none; }

  .hotels67__track { gap: 14px 12px; }

  .h67-card__name {
    padding-top: 7px;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .03em;
    min-height: calc(11px * 1.45 * 2 + 7px);
  }

  /* 送りは1段目、公式リンクは段を下げて1行 */
  .hotels67__pager {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 10px;
  }

  .hotels67__arrow { width: 36px; height: 36px; }

  .hotels67__all { font-size: 11px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .hotels67__row.is-active .h67-card .h67-card__media,
  .hotels67__row.is-active .h67-card .h67-card__media img,
  .hotels67__row.is-active .h67-card .h67-card__name { animation: none; }

  .h67-chip { transition: none; transform: none; }

  .hotels67 .rei-pref { transition: none; }

  .h67-card__media img { transition: none; }
}


/* ===== 数字はシンプルに（Cormorant/Marcellusの「11」がローマ数字に見える対策） ===== */
.hotels67 .rei-map__count b {
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 200;
  font-size: clamp(44px, 4.6vw, 66px);
  letter-spacing: 0;
}

.hotels67 .rei-map__tot,
.hotels67 .rei-map__count i {
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 300;
}

.h67-chip i {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: .72em;
  letter-spacing: .02em;
}

.hotels67__page,
.hotels67__page b {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.hotels67__page b {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .06em;
}

/* ===== PC: 右カラムを縦に圧縮（低い画面でも1画面に収める） ===== */
@media (min-width: 769px) {
  .hotels67 { padding: clamp(48px, 5vw, 80px) 0 clamp(60px, 6vw, 96px); }

  .hotels67__side { padding-top: clamp(32px, 4vw, 64px); }

  .hotels67__regions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
    gap: 10px 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
  }

  .h67-card__media {
    aspect-ratio: auto;
    height: clamp(132px, 20vh, 200px);
  }

  .h67-card__name {
    padding-top: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    min-height: calc(12.5px * 1.45 * 2 + 9px);
  }

  .hotels67__track { gap: clamp(14px, 1.6vh, 22px) clamp(14px, 1.5vw, 22px); }

  .hotels67__pager { padding-top: clamp(12px, 1.8vh, 22px); }

  .hotels67__arrow { width: 38px; height: 38px; }

  .hotels67 .rei-map__svg { height: clamp(400px, 56vh, 540px); }
}