/*
 * HotelBlocks フロント表示。
 *
 * ・すべて .hotelblocks- 配下に閉じる。タグセレクタ・リセット・* は書かない
 *   （テーマや他プラグインの表示を壊さないため）
 * ・CSS変数は --hotelblocks- で始める
 * ・色はテーマの文字色を活かし、必要な箇所だけ自前で塗る
 */

.hotelblocks-spec,
.hotelblocks-compare,
.hotelblocks-list,
.hotelblocks-ratesum,
.hotelblocks-calendar {
	--hotelblocks-accent: #0f6b6b;
	--hotelblocks-accent-text: #ffffff;
	--hotelblocks-border: rgba(0, 0, 0, 0.12);
	--hotelblocks-soft: rgba(0, 0, 0, 0.04);
	--hotelblocks-muted: #6d7d80;
	--hotelblocks-radius: 6px;

	margin: 1.6em 0;
	font-size: 15px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------- 共通パーツ */
.hotelblocks-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hotelblocks-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--hotelblocks-border);
	background: transparent;
}

.hotelblocks-table th,
.hotelblocks-table td {
	border: 1px solid var(--hotelblocks-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}

.hotelblocks-table thead th {
	background: var(--hotelblocks-accent);
	color: var(--hotelblocks-accent-text);
	text-align: center;
	font-weight: 700;
}

.hotelblocks-table tbody th {
	background: var(--hotelblocks-soft);
	font-weight: 600;
	white-space: nowrap;
}

.hotelblocks-legend,
.hotelblocks-note {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--hotelblocks-muted);
	line-height: 1.6;
}

.hotelblocks-muted {
	color: var(--hotelblocks-muted);
}

.hotelblocks-mark {
	font-weight: 700;
}

.hotelblocks-mark--1 {
	color: #00753b;
}

.hotelblocks-mark--0 {
	color: #b32d2e;
}

.hotelblocks-mark--2 {
	color: var(--hotelblocks-muted);
	font-weight: 400;
}

.hotelblocks-price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hotelblocks-price.is-lowest {
	color: #b32d2e;
}

.hotelblocks-badge-pick {
	display: block;
	margin: 0 0 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #b32d2e;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/* ボタン */
.hotelblocks-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

/* 表のセルの中は横に並べる幅が無いので縦積みにする。 */
.hotelblocks-table .hotelblocks-buttons,
.hotelblocks-card .hotelblocks-buttons,
.hotelblocks-calendar__hotel .hotelblocks-buttons {
	flex-direction: column;
}

.hotelblocks-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: var(--hotelblocks-radius);
	background: var(--hotelblocks-accent);
	color: var(--hotelblocks-accent-text);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.hotelblocks-btn:hover,
.hotelblocks-btn:focus {
	opacity: 0.88;
	color: var(--hotelblocks-accent-text);
}

.hotelblocks-btn--rakuten {
	background: #bf0000;
	color: #fff;
}

/* 楽天以外の予約サイト。色は設定した値をインラインで上書きする。 */
.hotelblocks-btn--ota {
	background: #1c2b4a;
	color: #fff;
	font-size: 13px;
	padding: 8px 14px;
}

/* 表の中の画像。原寸で出ると記事が縦に伸びてしまうので、必ず縮める。 */
.hotelblocks-image {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	max-height: 220px;
	object-fit: cover;
	border-radius: var(--hotelblocks-radius);
}

/* ---------------------------------------------------------------- 地図 */
.hotelblocks-map {
	margin: 12px 0 0;
}

.hotelblocks-map__button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--hotelblocks-border);
	border-radius: var(--hotelblocks-radius);
	background: var(--hotelblocks-soft);
	color: inherit;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

.hotelblocks-map__button:hover,
.hotelblocks-map__button:focus-visible {
	border-color: var(--hotelblocks-accent);
}

.hotelblocks-map__icon {
	font-size: 18px;
	line-height: 1;
}

.hotelblocks-map__label {
	flex: 1 1 auto;
	min-width: 0;
}

.hotelblocks-map__action {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--hotelblocks-accent);
	white-space: nowrap;
}

.hotelblocks-map__frame {
	position: relative;
	border: 1px solid var(--hotelblocks-border);
	border-radius: var(--hotelblocks-radius);
	overflow: hidden;
}

.hotelblocks-map__frame iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

.hotelblocks-map__close {
	display: block;
	width: 100%;
	padding: 8px;
	border: 0;
	border-top: 1px solid var(--hotelblocks-border);
	background: var(--hotelblocks-soft);
	color: inherit;
	font-size: 12px;
	cursor: pointer;
}

.hotelblocks-map__link {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
}

/* ---------------------------------------------------------------- 基本情報 */
.hotelblocks-spec__heading,
.hotelblocks-compare__heading,
.hotelblocks-list__heading,
.hotelblocks-ratesum__heading,
.hotelblocks-calendar__heading {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
}

/* ---- 基本情報は1枚のカードにまとめる（囲み＋見出しバー） ---- */
.hotelblocks-spec {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	padding: 16px;
	border: 1px solid var(--hotelblocks-border);
	border-radius: var(--hotelblocks-radius);
	background: #fff;
	box-sizing: border-box;
}

/* 見出しはカードの上辺いっぱいに敷く。 */
.hotelblocks-spec .hotelblocks-spec__heading {
	margin: -16px -16px 14px;
	padding: 10px 16px;
	background: var(--hotelblocks-accent);
	border-radius: var(--hotelblocks-radius) var(--hotelblocks-radius) 0 0;
	color: var(--hotelblocks-accent-text);
	font-size: 15px;
}

.hotelblocks-spec__section {
	margin: 0 0 18px;
}

.hotelblocks-spec__section:last-of-type {
	margin-bottom: 0;
}

.hotelblocks-spec__group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 6px;
	padding: 0 0 4px;
	border-bottom: 2px solid var(--hotelblocks-accent);
	font-size: 15px;
	font-weight: 700;
}

.hotelblocks-spec__verified {
	font-size: 11px;
	font-weight: 400;
	color: var(--hotelblocks-muted);
}

.hotelblocks-spec__verified--old {
	color: #b32d2e;
}

.hotelblocks-spec__verified--warn {
	color: #996800;
}

.hotelblocks-spec .hotelblocks-table th {
	width: 32%;
	white-space: normal;
}

.hotelblocks-spec .hotelblocks-table {
	font-size: 14px;
}

.hotelblocks-spec .hotelblocks-map,
.hotelblocks-spec .hotelblocks-buttons {
	margin-top: 14px;
}

/* ---------------------------------------------------------------- カード比較 */
.hotelblocks-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.hotelblocks-card {
	position: relative;
	flex: 1 1 0;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #fff;
	border: 1px solid var(--hotelblocks-border);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hotelblocks-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.hotelblocks-card.is-highlighted {
	border-color: var(--hotelblocks-accent);
	box-shadow: 0 0 0 2px var(--hotelblocks-accent), 0 6px 18px -10px rgba(0, 0, 0, 0.4);
}

.hotelblocks-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--hotelblocks-accent);
	color: var(--hotelblocks-accent-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
}

/* 施設と客室の2枚。高さを固定して、どのカードでも同じ大きさに見せる
   （元画像の縦横比がばらばらでも、カードの行がそろうようにするため）。 */
.hotelblocks-card__media {
	display: flex;
	gap: 8px;
	margin: 0 0 4px;
}

.hotelblocks-card__shot {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.hotelblocks-card__shot img,
.hotelblocks-card__noimage {
	display: block;
	width: 100%;
	height: 110px;
	border-radius: calc(var(--hotelblocks-radius) - 1px);
	object-fit: cover;
}

.hotelblocks-card__noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hotelblocks-soft);
	color: var(--hotelblocks-muted);
	font-size: 12px;
}

.hotelblocks-card__shot figcaption {
	margin-top: 2px;
	font-size: 11px;
	color: var(--hotelblocks-muted);
	text-align: center;
}

/* レビュー評価 */
.hotelblocks-card__review {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 0;
}

.hotelblocks-card__star {
	color: #f0a202;
}

.hotelblocks-card__score {
	font-size: 16px;
	font-weight: 700;
}

.hotelblocks-card__reviewcount {
	font-size: 11px;
	color: var(--hotelblocks-muted);
}

/* 施設紹介。高さをそろえたうえで、続きは枠の中でスクロールして読める。 */
.hotelblocks-card__intro {
	margin: 8px 0 0;
	padding: 10px 12px;
	background: var(--hotelblocks-soft);
	border-radius: calc(var(--hotelblocks-radius) - 1px);
	font-size: 13px;
	line-height: 1.6;
	height: 7.6em;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hotelblocks-card__body {
	/* カードの残りを本文が占めることで、ボタンを下端にそろえられる。 */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px;
}

.hotelblocks-card__name {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--hotelblocks-accent);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	/* 名前の高さを先に確保する。名前の長さで料金・項目・ボタンの位置がずれないように。
	   em ではなく px で押さえるのは、下の is-long で文字サイズが変わっても
	   確保する高さを同じに保つため。 */
	min-height: 56px;
	/* 3行を超える名前は省略する（それ以上はカードが崩れるため）。 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 名前が長いホテルは文字を一段ずつ小さくして、行数をそろえる。
   クラスは文字数を数えてPHP側で付ける（CSSでは文字数を測れないため）。 */
.hotelblocks-card__name.is-long {
	font-size: 14px;
}

.hotelblocks-card__name.is-longer {
	font-size: 13px;
	line-height: 1.4;
}

.hotelblocks-compare__name.is-long,
.hotelblocks-list__name.is-long,
.hotelblocks-calendar__name.is-long,
.hotelblocks-ratesum__name.is-long {
	font-size: 0.93em;
}

.hotelblocks-compare__name.is-longer,
.hotelblocks-list__name.is-longer,
.hotelblocks-calendar__name.is-longer,
.hotelblocks-ratesum__name.is-longer {
	font-size: 0.86em;
	line-height: 1.4;
}

.hotelblocks-card__area {
	margin: 0;
	font-size: 12px;
	color: var(--hotelblocks-muted);
}

.hotelblocks-card__price {
	margin: 6px 0 0;
	/* 料金が無いホテルが混ざっても、下の項目の位置がずれないようにする。 */
	min-height: 1.4em;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.hotelblocks-card__price span {
	font-size: 12px;
	font-weight: 600;
}

.hotelblocks-card__price.is-lowest {
	color: #b32d2e;
}

.hotelblocks-card__pricetag {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #b32d2e;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	vertical-align: middle;
}

.hotelblocks-card__specs {
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--hotelblocks-border);
	display: grid;
	gap: 4px;
}

.hotelblocks-card__spec {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
}

.hotelblocks-card__spec dt {
	margin: 0;
	color: var(--hotelblocks-muted);
	font-weight: 400;
}

.hotelblocks-card__spec dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	/* 住所のような長い値でもカードからはみ出さないようにする。 */
	min-width: 0;
	word-break: break-word;
}

.hotelblocks-card__spec dt {
	min-width: 0;
	word-break: break-word;
}

.hotelblocks-card__spec dd .hotelblocks-image {
	max-width: 120px;
	max-height: 80px;
}

.hotelblocks-card .hotelblocks-buttons {
	margin-top: auto;
	padding-top: 12px;
}

.hotelblocks-card .hotelblocks-btn {
	display: block;
	width: 100%;
}

.hotelblocks-table .hotelblocks-btn {
	display: block;
}

/* ---------------------------------------------------------------- 比較表 */
.hotelblocks-compare__table {
	min-width: 560px;
}

/* 表の中に出る画像項目も、列ごとに同じ大きさにそろえる。 */
.hotelblocks-compare__table .hotelblocks-image {
	height: 140px;
	max-height: 140px;
	object-fit: cover;
}

.hotelblocks-compare__corner {
	background: var(--hotelblocks-accent);
	width: 24%;
}

/* 0.21.2: 強調ラベルの行を全列で同じ高さ確保する（ハイライト列だけ画像・ホテル名が
   下にずれる不具合の修正）。ラベルが無い列も同じ高さの空行を出し、ベースラインをそろえる。 */
.hotelblocks-compare__table .hotelblocks-badge-pick-row {
	display: block;
	min-height: 24px;
	margin: 0 0 6px;
}
.hotelblocks-compare__table .hotelblocks-badge-pick {
	display: inline-block;
	margin: 0;
}

/* 列ごとに画像の大きさをそろえる（縦横比の違う写真が混ざっても行がずれないように）。 */
.hotelblocks-compare__image {
	display: block;
	width: 100%;
	max-width: 160px;
	height: 120px;
	object-fit: cover;
	margin: 0 auto 6px;
	border-radius: var(--hotelblocks-radius);
}

.hotelblocks-compare__name {
	display: block;
	font-size: 13px;
	line-height: 1.4;
}

.hotelblocks-compare__table td {
	text-align: center;
}

.hotelblocks-compare__table .is-highlighted {
	background: rgba(179, 45, 46, 0.06);
}

.hotelblocks-compare__table thead th.is-highlighted {
	background: #b32d2e;
}

/* ---------------------------------------------------------------- 一覧 */
.hotelblocks-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.hotelblocks-list__item {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 14px;
	position: relative;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--hotelblocks-border);
	border-radius: var(--hotelblocks-radius);
}

/* 0.21.2: grid item は既定で行の高さいっぱいに stretch されるため、右側の項目数が
   多いホテルほど画像スロットが伸びて120〜129pxとばらついていた。画像列は上端固定にする。 */
.hotelblocks-list__media {
	align-self: start;
}

@media (max-width: 600px) {
	.hotelblocks-list__item {
		grid-template-columns: 1fr;
	}
}

.hotelblocks-list__rank {
	position: absolute;
	top: -10px;
	left: -10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--hotelblocks-accent);
	color: var(--hotelblocks-accent-text);
	font-weight: 700;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}

.hotelblocks-list__media img {
	width: 100%;
	height: auto;
	border-radius: var(--hotelblocks-radius);
}

.hotelblocks-list__name {
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.hotelblocks-list__area {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--hotelblocks-muted);
}

.hotelblocks-list__price {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: #b32d2e;
	font-variant-numeric: tabular-nums;
}

.hotelblocks-list__specs {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
}

.hotelblocks-list__specs li {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	margin: 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--hotelblocks-soft);
	font-size: 12px;
}

.hotelblocks-list__spec-label {
	color: var(--hotelblocks-muted);
}

/* ---------------------------------------------------------------- 料金の比較 */
.hotelblocks-ratesum__plan,
.hotelblocks-calendar__plan {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--hotelblocks-muted);
}

.hotelblocks-ratesum__table {
	min-width: 560px;
}

.hotelblocks-ratesum__table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hotelblocks-ratesum__date {
	display: block;
	font-size: 11px;
	color: var(--hotelblocks-muted);
}

/* ---------------------------------------------------------------- カレンダー */
.hotelblocks-calendar__hotel {
	margin: 0 0 12px;
	border: 1px solid var(--hotelblocks-border);
	border-radius: var(--hotelblocks-radius);
}

.hotelblocks-calendar__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	cursor: pointer;
	font-weight: 700;
}

.hotelblocks-calendar__hotel[open] .hotelblocks-calendar__summary {
	border-bottom: 1px solid var(--hotelblocks-border);
}

.hotelblocks-calendar__body {
	padding: 12px 14px;
}

/* ---- 人数条件のタブ（ラジオボタン＋:checked。JavaScriptなしで切り替える） ---- */
.hotelblocks-calendar__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.hotelblocks-calendar__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 14px;
}

.hotelblocks-calendar__tab {
	flex: 1 1 0;
	min-width: 90px;
	padding: 10px 8px;
	background: var(--hotelblocks-soft);
	border-radius: var(--hotelblocks-radius) var(--hotelblocks-radius) 0 0;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hotelblocks-muted);
	cursor: pointer;
}

/* タブが2つ以上あるときは、選ばれた条件だけを見せる。 */
.hotelblocks-calendar__tablist ~ .hotelblocks-calendar__pane {
	display: none;
}

.hotelblocks-calendar__radio:nth-of-type(1):checked ~ .hotelblocks-calendar__pane--1,
.hotelblocks-calendar__radio:nth-of-type(2):checked ~ .hotelblocks-calendar__pane--2,
.hotelblocks-calendar__radio:nth-of-type(3):checked ~ .hotelblocks-calendar__pane--3 {
	display: block;
}

.hotelblocks-calendar__radio:nth-of-type(1):checked ~ .hotelblocks-calendar__tablist .hotelblocks-calendar__tab:nth-child(1),
.hotelblocks-calendar__radio:nth-of-type(2):checked ~ .hotelblocks-calendar__tablist .hotelblocks-calendar__tab:nth-child(2),
.hotelblocks-calendar__radio:nth-of-type(3):checked ~ .hotelblocks-calendar__tablist .hotelblocks-calendar__tab:nth-child(3) {
	background: var(--hotelblocks-accent);
	color: var(--hotelblocks-accent-text);
}

/* キーボードでもタブを選べるように、フォーカスを見せる。 */
.hotelblocks-calendar__radio:focus-visible ~ .hotelblocks-calendar__tablist .hotelblocks-calendar__tab {
	outline: 2px solid var(--hotelblocks-accent);
	outline-offset: 2px;
}

/* ---- 月ごとのカレンダー ---- */
.hotelblocks-cal-month {
	margin: 0 0 18px;
}

.hotelblocks-cal-month:last-child {
	margin-bottom: 0;
}

.hotelblocks-cal-month__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
}

.hotelblocks-cal {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	table-layout: fixed;
}

.hotelblocks-cal th,
.hotelblocks-cal td {
	border: 1px solid var(--hotelblocks-border);
	padding: 4px;
	text-align: center;
	vertical-align: top;
}

.hotelblocks-cal__wday {
	padding: 6px 4px;
	background: var(--hotelblocks-soft);
	font-size: 12px;
	font-weight: 700;
}

.hotelblocks-cal__wday--0 {
	color: #b32d2e;
}

.hotelblocks-cal__wday--6 {
	color: #1c5fa8;
}

.hotelblocks-cal__cell {
	height: 52px;
}

.hotelblocks-cal__cell.is-empty {
	background: var(--hotelblocks-soft);
}

.hotelblocks-cal__day {
	display: block;
	font-size: 11px;
	color: var(--hotelblocks-muted);
}

/* 料金を取得していない日（期間の外）は、空欄だと分かるように薄くする。 */
.hotelblocks-cal__cell.is-out {
	background: var(--hotelblocks-soft);
}

/* 今日のマスは丸で囲む（カレンダーらしい目印）。 */
.hotelblocks-cal__cell.is-today .hotelblocks-cal__day {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--hotelblocks-accent);
	color: var(--hotelblocks-accent-text);
	font-weight: 700;
}

.hotelblocks-cal__cell--0 .hotelblocks-cal__day {
	color: #b32d2e;
}

.hotelblocks-cal__cell--6 .hotelblocks-cal__day {
	color: #1c5fa8;
}

.hotelblocks-cal__price {
	display: block;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: inherit;
}

.hotelblocks-cal__price.is-none {
	color: var(--hotelblocks-muted);
	font-weight: 400;
}

/* 料金の高さ。安い日ほど薄く、高い日ほど濃く塗る。 */
.hotelblocks-cal__cell.is-level-1 {
	background: rgba(0, 117, 59, 0.14);
}

.hotelblocks-cal__cell.is-level-2 {
	background: rgba(0, 117, 59, 0.06);
}

.hotelblocks-cal__cell.is-level-3 {
	background: rgba(179, 45, 46, 0.07);
}

.hotelblocks-cal__cell.is-level-4 {
	background: rgba(179, 45, 46, 0.16);
}


/* ----------------------------------------------------------------
 * カレンダーの開閉
 * 閉じているときに「これは料金カレンダーで、押すと開く」と分かるようにする。
 * -------------------------------------------------------------- */
.hotelblocks-calendar__summary {
	display: block;
	list-style: none;
}

.hotelblocks-calendar__summary::-webkit-details-marker {
	display: none;
}

.hotelblocks-calendar__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 10px;
}

.hotelblocks-calendar__name {
	flex: 1 1 auto;
	min-width: 0;
}

.hotelblocks-calendar__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 8px 12px;
	border: 1px solid var(--hotelblocks-accent);
	border-radius: var(--hotelblocks-radius);
	background: #fff;
	color: var(--hotelblocks-accent);
	font-size: 13px;
	font-weight: 700;
}

.hotelblocks-calendar__chevron {
	margin-left: auto;
	font-size: 10px;
	transition: transform 0.15s;
}

.hotelblocks-calendar__hotel[open] .hotelblocks-calendar__chevron {
	transform: rotate(180deg);
}

.hotelblocks-calendar__hotel:not([open]) .hotelblocks-calendar__toggle-open,
.hotelblocks-calendar__hotel[open] .hotelblocks-calendar__toggle-closed {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.hotelblocks-calendar__chevron {
		transition: none;
	}
}

/* ----------------------------------------------------------------
 * スマートフォン
 * 記事はほとんどスマホで読まれるので、横スクロールさせないことを優先する。
 * -------------------------------------------------------------- */

/* ホテル名は折り返す。折り返さないと列が広がり、肝心の数字が画面外に出る。 */
.hotelblocks-ratesum__table tbody th {
	white-space: normal;
	min-width: 8em;
}

@media (max-width: 782px) {

	/* 料金の比較：1ホテル＝1枚のカードに積み直す。 */
	.hotelblocks-ratesum__table {
		min-width: 0;
	}

	.hotelblocks-ratesum__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.hotelblocks-ratesum__table,
	.hotelblocks-ratesum__table tbody,
	.hotelblocks-ratesum__table tr,
	.hotelblocks-ratesum__table th,
	.hotelblocks-ratesum__table td {
		display: block;
		width: auto;
	}

	.hotelblocks-ratesum__table {
		border: 0;
	}

	.hotelblocks-ratesum__table tr {
		margin: 0 0 12px;
		border: 1px solid var(--hotelblocks-border);
		border-radius: 10px;
		overflow: hidden;
	}

	.hotelblocks-ratesum__table tbody th {
		border: 0;
		font-size: 15px;
		line-height: 1.5;
	}

	.hotelblocks-ratesum__table td {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		gap: 12px;
		border: 0;
		border-top: 1px solid var(--hotelblocks-border);
		text-align: right;
	}

	/* 何の数字かをセルごとに書く（見出し行を隠しているため）。 */
	.hotelblocks-ratesum__table td::before {
		content: attr(data-label);
		color: var(--hotelblocks-muted);
		font-size: 12px;
		text-align: left;
	}

	.hotelblocks-ratesum__table td .hotelblocks-btn {
		display: block;
		width: 100%;
	}

	/* カレンダー：文字を詰めて、7列を画面内に収める。 */
	.hotelblocks-cal {
		min-width: 0;
	}

	.hotelblocks-cal th,
	.hotelblocks-cal td {
		padding: 2px 1px;
	}

	.hotelblocks-cal__cell {
		height: 46px;
	}

	.hotelblocks-cal__price {
		font-size: 10px;
	}

	.hotelblocks-cal__day {
		font-size: 10px;
	}

	.hotelblocks-calendar__body {
		padding: 10px 8px;
	}

	/* 人数条件のタブは、狭い画面では2段に折り返す。 */
	.hotelblocks-calendar__tab {
		min-width: 72px;
		padding: 8px 4px;
		font-size: 12px;
	}

	.hotelblocks-cal-month__title {
		font-size: 14px;
	}

	/* 比較カード：スマホでは1列に積む。 */
	.hotelblocks-cards {
		gap: 12px;
	}

	.hotelblocks-card {
		flex-basis: 100%;
	}

	/* 1列に積むので高さをそろえる必要が無い。名前も省略せず全部出す。 */
	.hotelblocks-card__name {
		min-height: 0;
		display: block;
		font-size: 15px;
	}

	/* 紹介文も、積んでしまえば高さをそろえる必要が無い。 */
	.hotelblocks-card__intro {
		height: auto;
		max-height: 12em;
	}

	.hotelblocks-card__price {
		min-height: 0;
	}

	/* 基本情報の表：項目名の列を狭くして、値の側を広く使う。 */
	.hotelblocks-spec .hotelblocks-table th {
		width: 38%;
	}

	.hotelblocks-table th,
	.hotelblocks-table td {
		padding: 8px 10px;
	}
}

/* Preserve each image slot even when the source is absent or fails. */
.hotelblocks-image-slot { display: block; position: relative; background: #fff; overflow: hidden; height: 120px; }
.hotelblocks-image-slot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hotelblocks-card__shot .hotelblocks-image-slot { height: 110px; border-radius: calc(var(--hotelblocks-radius) - 1px); }
.hotelblocks-card__shot .hotelblocks-image-slot > img { height: 100%; }
.hotelblocks-image-slot > img.is-unavailable { visibility: hidden; }
.hotelblocks-list__media .hotelblocks-image-slot { height: 120px; min-height: 120px; }
.hotelblocks-spec .hotelblocks-spec__heading { min-height: 46px; box-sizing: border-box; }

/* Hotel summary: inherit the site's accent unless overridden in the editor. */
.hotelblocks-spec.hotelblocks-spec--summary { padding:0; overflow:hidden; }
.hotelblocks-spec--summary .hotelblocks-spec__heading { margin:0; padding:16px 20px; border:0; border-radius:0; background:var(--hotelblocks-accent); color:var(--hotelblocks-accent-text); font-size:20px; font-weight:700; line-height:1.5; }
.hotelblocks-spec--summary .hotelblocks-spec__heading::before,.hotelblocks-spec--summary .hotelblocks-spec__heading::after { display:none; }
.hotelblocks-spec__hero a { display:block; }
.hotelblocks-spec__hero .hotelblocks-image-slot { width:100%; height:auto; aspect-ratio:16/9; border-radius:0; }
.hotelblocks-spec__hero .hotelblocks-image-slot img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }
.hotelblocks-spec__content { padding:20px; }
.hotelblocks-spec--summary .hotelblocks-table { margin:0; table-layout:fixed; }
.hotelblocks-spec--summary .hotelblocks-table th { width:32%; white-space:normal; }
.hotelblocks-spec--summary .hotelblocks-table td { overflow-wrap:anywhere; }
.hotelblocks-spec__details { margin-top:10px; border:1px solid var(--hotelblocks-border); border-radius:4px; }
.hotelblocks-spec__details summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; min-height:44px; box-sizing:border-box; list-style:none; cursor:pointer; color:inherit; background:var(--hotelblocks-soft); font-weight:600; }
.hotelblocks-spec__details summary::-webkit-details-marker { display:none; }
.hotelblocks-spec__details summary::after { content:''; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); flex-shrink:0; }
.hotelblocks-spec__details[open] summary::after { transform:rotate(225deg); }
.hotelblocks-spec__details summary:focus-visible,.hotelblocks-map__resize:focus-visible,.hotelblocks-spec__hero a:focus-visible { outline:3px solid var(--hotelblocks-accent); outline-offset:-3px; }
.hotelblocks-spec__details-body { padding:8px; }
.hotelblocks-spec--summary .hotelblocks-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:20px 0; }
.hotelblocks-spec--summary .hotelblocks-buttons .hotelblocks-btn { flex:1 1 160px; min-height:48px; max-width:280px; margin:0; width:auto; min-width:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; text-align:center; }
.hotelblocks-map--compact { margin:16px 0; }
.hotelblocks-map__viewport { position:relative; height:180px; }
.hotelblocks-map__viewport iframe { width:100%; height:100%; display:block; border:0; pointer-events:none; }
.hotelblocks-map__resize { position:absolute; inset:0; width:100%; border:0; cursor:pointer; background:transparent; color:#222; }
.hotelblocks-map__resize span { position:absolute; right:8px; bottom:8px; background:#fff; border:1px solid #ccc; border-radius:4px; padding:8px 12px; font-size:13px; }
.hotelblocks-map--compact.is-expanded .hotelblocks-map__viewport { height:420px; }
.hotelblocks-map--compact.is-expanded iframe { pointer-events:auto; }
.hotelblocks-map--compact.is-expanded .hotelblocks-map__resize { inset:8px 8px auto auto; width:auto; height:auto; }
.hotelblocks-map--compact.is-expanded .hotelblocks-map__resize span { position:static; display:block; }
@media(max-width:600px) {
 .hotelblocks-spec__content { padding:12px; }
 .hotelblocks-spec--summary .hotelblocks-spec__heading { padding:14px 16px; font-size:18px; }
 .hotelblocks-spec--summary .hotelblocks-buttons .hotelblocks-btn { flex-basis:100%; max-width:none; }
 .hotelblocks-spec--summary .hotelblocks-table th,.hotelblocks-spec--summary .hotelblocks-table td { padding:9px 10px; }
}

/* Override theme link/heading colors, including visited and hover states. */
.hotelblocks-spec.hotelblocks-spec--summary .hotelblocks-spec__heading { color:#fff !important; -webkit-text-fill-color:#fff; }
.hotelblocks-spec--summary .hotelblocks-spec__hero { margin:16px 20px 0; }
.hotelblocks-spec--summary .hotelblocks-spec__hero .hotelblocks-image-slot { border-radius:4px; }
a.hotelblocks-btn,a.hotelblocks-btn:link,a.hotelblocks-btn:visited,a.hotelblocks-btn:hover,a.hotelblocks-btn:focus,a.hotelblocks-btn:active,a.hotelblocks-btn span { color:#fff !important; -webkit-text-fill-color:#fff; }
.hotelblocks-icon { display:inline-block; vertical-align:middle; flex-shrink:0; }
.hotelblocks-card__star .hotelblocks-icon { width:16px; height:16px; }
@media(max-width:600px){.hotelblocks-spec--summary .hotelblocks-spec__hero { margin:12px 12px 0; }}
.hotelblocks-calendar__radio:nth-of-type(4):checked ~ .hotelblocks-calendar__pane--4{display:block;}
.hotelblocks-calendar__radio:nth-of-type(4):checked ~ .hotelblocks-calendar__tablist .hotelblocks-calendar__tab:nth-child(4){background:var(--hotelblocks-accent);color:#fff;}
.hotelblocks-calendar__radio:nth-of-type(5):checked ~ .hotelblocks-calendar__pane--5{display:block;}
.hotelblocks-calendar__radio:nth-of-type(5):checked ~ .hotelblocks-calendar__tablist .hotelblocks-calendar__tab:nth-child(5){background:var(--hotelblocks-accent);color:#fff;}
.hotelblocks-calendar__radio:nth-of-type(6):checked ~ .hotelblocks-calendar__pane--6{display:block;}
.hotelblocks-calendar__radio:nth-of-type(6):checked ~ .hotelblocks-calendar__tablist .hotelblocks-calendar__tab:nth-child(6){background:var(--hotelblocks-accent);color:#fff;}
.hotelblocks-calendar__radio:nth-of-type(7):checked ~ .hotelblocks-calendar__pane--7{display:block;}
.hotelblocks-calendar__radio:nth-of-type(7):checked ~ .hotelblocks-calendar__tablist .hotelblocks-calendar__tab:nth-child(7){background:var(--hotelblocks-accent);color:#fff;}
.hotelblocks-calendar__radio:nth-of-type(8):checked ~ .hotelblocks-calendar__pane--8{display:block;}
.hotelblocks-calendar__radio:nth-of-type(8):checked ~ .hotelblocks-calendar__tablist .hotelblocks-calendar__tab:nth-child(8){background:var(--hotelblocks-accent);color:#fff;}
.hotelblocks-ratesum__controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:12px 0;}
.hotelblocks-ratesum__controls label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;}
.hotelblocks-ratesum__controls select,.hotelblocks-ratesum__controls input{width:100%;max-width:100%;box-sizing:border-box;min-height:44px;padding:8px;border:1px solid var(--hotelblocks-border);background:#fff;color:#333;border-radius:4px;}
.hotelblocks-ratesum__status{font-size:13px;}
.hotelblocks-ratesum tr[hidden]{display:none!important;}

:is(.hotelblocks-spec,.hotelblocks-compare,.hotelblocks-list,.hotelblocks-ratesum,.hotelblocks-calendar) a.hotelblocks-btn,:is(.hotelblocks-spec,.hotelblocks-compare,.hotelblocks-list,.hotelblocks-ratesum,.hotelblocks-calendar) a.hotelblocks-btn:is(:visited,:hover,:focus,:active){color:#fff!important;-webkit-text-fill-color:#fff;}
.hotelblocks-calendar__chevron { display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; width:20px; height:20px; line-height:1; }
.hotelblocks-calendar__chevron .hotelblocks-icon { display:block; width:20px; height:20px; }
.hotelblocks-ratesum__table .hotelblocks-buttons { min-width:0; }
.hotelblocks-ratesum__table td .hotelblocks-btn { box-sizing:border-box; min-width:0; max-width:100%; white-space:normal; }
@media(max-width:600px){ .hotelblocks-ratesum__table td { grid-template-columns:auto minmax(0,1fr); } }

/* Comparison cards: contain buttons and reserve optional content rows. */
.hotelblocks-compare .hotelblocks-card__body { min-width:0; }
.hotelblocks-compare .hotelblocks-card .hotelblocks-buttons { width:100%; min-width:0; box-sizing:border-box; }
.hotelblocks-compare .hotelblocks-card a.hotelblocks-btn { box-sizing:border-box; width:100%; max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:center; }
.hotelblocks-compare .hotelblocks-card__badge-row { min-height:32px; margin:4px 0; }
.hotelblocks-compare .hotelblocks-card__badge { position:static; display:inline-block; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; color:#fff; }
.hotelblocks-compare .hotelblocks-card__review { min-height:46px; box-sizing:border-box; align-content:center; margin:4px 0 0; }
.hotelblocks-compare .hotelblocks-card__review.is-empty { visibility:hidden; }