/* bt-compare — 記事内に差し込む一括検索ブロック。
   配色はカルーセル(.bt-hotels)と揃えている。同じ記事に並ぶので、
   別々の見た目だと広告が2種類あるように見えてしまう。 */

.bt-compare {
	margin: 2.4em 0;
	padding: 18px 16px 14px;
	border: 1px solid #f2c4bc;
	border-radius: 8px;
	background: #fff8f7;
}

.bt-compare__heading {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: #1a2530;
}

/* 見出しの頭にブランドカラーの縦棒（カルーセルと同じ） */
.bt-compare__heading::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 19px;
	background: #e8452f;
	border-radius: 2px;
}

.bt-compare__lead {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.65;
	color: #8a7b78;
}

/* リンク型カード（遊び・体験 / ツアー / WiFi）。
   価格APIが無いタイプなので、カード自体を押せるボタンにする。
   以前は白いカードに小さな青文字リンクで、押せると分かりにくく高さも間延びしていた。 */
.bt-compare__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bt-compare .bt-compare__item {
	flex: 1 1 190px;
	float: none !important;   /* テーマの .content ul li { float:left } を打ち消す */
}

.bt-compare .bt-compare__link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	height: auto;
	padding: 13px 16px;
	border: 1px solid #e8452f;
	border-radius: 5px;
	background: #e8452f;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.bt-compare .bt-compare__link:hover,
.bt-compare .bt-compare__link:focus-visible {
	background: #d13a26;
	border-color: #d13a26;
	text-decoration: none;
}

.bt-compare .bt-compare__link:focus-visible {
	outline: 2px solid #e8452f;
	outline-offset: 2px;
}

.bt-compare .bt-compare__name {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
}

.bt-compare .bt-compare__name::after { content: " ›"; }

.bt-compare .bt-compare__note {
	font-size: 11.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
}

/* ボタン自体が押せると分かるので、別立てのCTA文言は出さない */
.bt-compare .bt-compare__cta { display: none; }

/* ── タブ ─────────────────────────────────
   JSが動いたときだけ .is-tabbed が付く。付くまではタブUIを出さず、
   全パネルを縦に並べたまま見せる（JSが落ちても中身に到達できるようにするため） */
.bt-compare__tabs { display: none; }

.bt-compare.is-tabbed .bt-compare__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 14px;
	border-bottom: 1px solid #f0d5d0;
}

.bt-compare .bt-compare__tab {
	appearance: none;
	border: none;
	background: none;
	margin: 0;
	padding: 9px 14px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	color: #9a8a87;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s ease, border-color .15s ease;
}

.bt-compare .bt-compare__tab:hover { color: #1a2530; }

.bt-compare .bt-compare__tab.is-active {
	color: #e8452f;
	border-bottom-color: #e8452f;
}

.bt-compare .bt-compare__tab:focus-visible {
	outline: 2px solid #e8452f;
	outline-offset: -2px;
	border-radius: 3px;
}

/* パネルはJSが有効なときだけ切り替える。
   display:flow-root は、テーマの .content ul li { float:left } で
   中身が浮いても親が高さを持つようにするため（block だと注記が食い込む） */
.bt-compare__panel { display: flow-root; }
.bt-compare.is-tabbed .bt-compare__panel { display: none; }
.bt-compare.is-tabbed .bt-compare__panel.is-active { display: flow-root; }

@media (max-width: 600px) {
	.bt-compare .bt-compare__tab { padding: 9px 10px; font-size: 13px; }
}

/* ── 楽天トラベルAPIの実価格リスト ───────────────── */

/* 記事本文の ul/li スタイルを持ち込まれないように、リストは明示的に潰しておく */
.bt-compare ul.bt-compare__hotels,
.bt-compare ul.bt-compare__list {
	list-style: none !important;
	padding-left: 0 !important;
}

.bt-compare .bt-compare__hotel,
.bt-compare .bt-compare__item {
	margin: 0 !important;
	list-style: none !important;
	float: none !important;
}

.bt-compare .bt-compare__item {
	padding: 0 !important;
	background: none !important;
}

.bt-compare .bt-compare__hotel::before,
.bt-compare .bt-compare__item::before { content: none !important; }

.bt-compare__hotels {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	gap: 8px;
}

/* カード全体は div。中に楽天へのリンクとOTAボタンが入るため、
   カードごと <a> で包むとリンクの入れ子になってしまう */
.bt-compare .bt-compare__hotel {
	border: 1px solid #e4d5d2;
	border-radius: 6px;
	background: #fff !important;
	padding: 12px 14px !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.bt-compare .bt-compare__hotel:hover {
	border-color: #f0b4aa;
	box-shadow: 0 2px 6px rgba(232, 69, 47, .10);
}

.bt-compare__hotel-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.bt-compare .bt-compare__thumb-link {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
	text-decoration: none;
}

/* テーマの `#article_contents img { display:block; width:100%; height:auto; margin-bottom:20px }`
   はID指定で詳細度が高い。負けると画像が全幅になり、フレックスの残り幅が潰れて
   施設名が1文字ずつ縦に折り返される。レイアウトに関わる指定だけ !important で守る。 */
.bt-compare .bt-compare__thumb {
	display: block !important;
	width: 96px !important;
	min-width: 96px !important;
	max-width: 96px !important;
	height: 72px !important;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 3px !important;
	background: #eef1f4;
}

.bt-compare .bt-compare__hotel-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.bt-compare .bt-compare__hotel-access {
	font-size: 12px;
	line-height: 1.55;
	color: #8a7b78;
}

.bt-compare .bt-compare__hotel-name {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	color: #1a2530;
	text-decoration: none;
}

.bt-compare .bt-compare__hotel-name:hover,
.bt-compare .bt-compare__hotel-name:focus-visible { text-decoration: underline; }

.bt-compare__hotel-meta {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-top: 2px;
}

.bt-compare__price {
	font-size: 15px; font-weight: 700; color: #c62d19;
	font-variant-numeric: tabular-nums;
}

.bt-compare__review {
	font-size: 12px; color: #8a7b78; font-variant-numeric: tabular-nums;
}

/* mybest 方式：施設ごとに各社ボタンを横並び。価格はボタンに出さない。
   色はテーマの .aflink-button li a と同じブランドレッド #E8452F を使う。
   4つとも塗りにすると重心が消えてバナーに見えるため、楽天だけ塗り、他は白地に赤枠。
   楽天は価格が出ていて、かつ検索を挟まず直接その宿に着地するので最も成約に近い。 */
.bt-compare__otas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.bt-compare .bt-compare__ota {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 84px;
	padding: 7px 10px;
	border: 1px solid #c8d2da;
	border-radius: 4px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	color: #e8452f;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bt-compare .bt-compare__ota { border-color: #f0b4aa; }

.bt-compare .bt-compare__ota:hover,
.bt-compare .bt-compare__ota:focus-visible {
	background: #fdf1ef;
	border-color: #e8452f;
	text-decoration: none;
}

/* 主導線。テーマの .aflink-button と同じ塗り */
.bt-compare .bt-compare__ota--primary {
	background: #e8452f !important;
	border-color: #e8452f !important;
	color: #fff !important;
}

.bt-compare .bt-compare__ota--primary:hover,
.bt-compare .bt-compare__ota--primary:focus-visible {
	background: #d13a26 !important;
	border-color: #d13a26 !important;
}

.bt-compare .bt-compare__ota:focus-visible { outline: 2px solid #e8452f; outline-offset: 2px; }

.bt-compare__pricenote {
	margin: 0 0 14px;
	font-size: 11px; line-height: 1.6; color: #8a7b78;
}

.bt-compare__admin-note {
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px dashed #d03b3b;
	border-radius: 4px;
	background: #fff5f5;
	font-size: 12.5px;
	line-height: 1.7;
	color: #a32a2a;
	white-space: pre-wrap;
}

@media (max-width: 600px) {
	.bt-compare .bt-compare__thumb {
		width: 72px !important;
		min-width: 72px !important;
		max-width: 72px !important;
		height: 56px !important;
	}
	.bt-compare__hotel-access { display: none; }
	.bt-compare .bt-compare__ota { flex: 1 1 calc(50% - 3px); min-width: 0; font-size: 12px; padding: 8px 6px; }
}

.bt-compare__disclosure {
	clear: both;
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: #8a7b78;
}

@media (max-width: 600px) {
	.bt-compare { padding: 16px 12px 12px; }
	.bt-compare__heading { font-size: 15.5px; }
	.bt-compare .bt-compare__item { flex: 1 1 calc(50% - 4px); }
	.bt-compare .bt-compare__link { padding: 12px 10px; }
	.bt-compare .bt-compare__name { font-size: 13px; }
	.bt-compare .bt-compare__note { display: none; }
}


/* ── 楽天の宿カルーセル（記事途中に差し込む）───────────────
   JSライブラリは使わず CSS の scroll-snap だけ。読み込みを増やさないため。 */

/* 枠・背景・左右パディングを持たせず、記事の本文幅いっぱいに置く。
   以前は薄赤の枠で「広告枠」と分かるようにしていたが、カード自体に
   ブランドロゴと赤いボタンが入るため囲まなくても区別はつく。
   横スクロールのスクロールバーの居場所は .bt-hotels__track 側の padding-bottom。 */
.bt-hotels {
	margin: 2.4em 0;
	padding: 0;
	border: 0;
	background: none;
}

.bt-hotels__heading {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: #1a2530;
}

/* 見出しの頭にブランドカラーの縦棒。広告枠だと分かるように色を付ける */
.bt-hotels__heading::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 19px;
	background: #e8452f;
	border-radius: 2px;
}

.bt-hotels ul.bt-hotels__track {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 0 8px !important;
	display: flex;
	gap: 10px;
	overflow-x: auto;
	/* overflow-x だけを auto にすると、CSS仕様で反対軸の visible が auto に
	   格上げされ、1pxのはみ出しでも縦スクロールバーが出てしまう。
	   縦は溢れさせないので hidden で固定する */
	overflow-y: hidden;
	/* mandatory にしないとカード間で止まって「グラグラ」する。
	   snap-stop: always で1スワイプ1枚に固定する */
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	/* サブピクセルの端数でスナップ位置が揺れないよう、
	   スクロール量の基準になる gap と padding は整数にしておく */
	-webkit-overflow-scrolling: touch;
	/* 横スワイプがページのスクロールやブラウザの「戻る」に伝播しないようにする */
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
	scrollbar-width: thin;
}

.bt-hotels .bt-hotels__card {
	flex: 0 0 auto;
	/* 参考デザインに合わせて 247px。以前は176pxで、1画面に多く並ぶ代わりに
	   写真が小さく宿の雰囲気が伝わらなかった */
	width: 247px;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	list-style: none !important;
	background: none !important;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.bt-hotels .bt-hotels__card::before { content: none !important; }

.bt-hotels .bt-hotels__card > a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	/* 枠線なし。枠を消すと 8px の内側余白は意味を失うので合わせて外し、
	   写真をカード幅いっぱいに出す */
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: none;
}

.bt-hotels .bt-hotels__card > a:hover,
.bt-hotels .bt-hotels__card > a:focus-visible {
	text-decoration: none;
}

/* 枠線が無いので、ホバーはボタンと宿名の色で示す。
   影や translateY は overflow-y: hidden で上下が切れるため使わない */
.bt-hotels .bt-hotels__card > a:hover .bt-hotels__cta,
.bt-hotels .bt-hotels__card > a:focus-visible .bt-hotels__cta {
	background: #b8412d;
}

.bt-hotels .bt-hotels__card > a:hover .bt-hotels__name,
.bt-hotels .bt-hotels__card > a:focus-visible .bt-hotels__name {
	color: #d2533e;
}

/* outline-offset を内側にしないと、トラックの overflow-y: hidden で切れる */
.bt-hotels .bt-hotels__card > a:focus-visible { outline: 2px solid #d2533e; outline-offset: -2px; }

/* テーマの #article_contents img { width:100% } に負けないように */
/* テーマの #article_contents img { width:100% } に負けないように。
   高さは固定せず 16:9 にして、ページ内の他のカード（FV・記事・YouTube）と揃える。
   ★ hotelImageUrl（375x500〜1018x573）を使うこと。hotelThumbnailUrl は
     68x90 程度しかなく、カード幅まで引き伸ばすと粗い。 */
.bt-hotels .bt-hotels__thumb {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	/* 参考デザインの実測（247x150）。ページ内の他カードは16:9だが、
	   ここだけ少し縦を高くして写真の面積を稼いでいる */
	aspect-ratio: 247 / 150;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 4px !important;
	background: #eef1f4;
}

.bt-hotels .bt-hotels__name {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.45;
	color: #1a2530;
	transition: color .15s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bt-hotels__meta {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
}

.bt-hotels__price {
	font-size: 16px;
	font-weight: 700;
	color: #2f58c7;
	font-variant-numeric: tabular-nums;
}

.bt-hotels__review {
	font-size: 11.5px;
	color: #6b7883;
	font-variant-numeric: tabular-nums;
}

/* カード末尾のミニボタン。押せることをはっきりさせる */
.bt-hotels .bt-hotels__cta {
	display: block;
	margin-top: 2px;
	/* 参考デザインの実測（高さ34px）に合わせる */
	padding: 9px 0;
	border-radius: 4px;
	background: #d2533e;
	color: #fff;
	transition: background-color .15s ease;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}

@media (max-width: 600px) {
	/* 端末幅の6割強にして、次のカードが少し覗く＝横に続くと分かる */
	/* ★ 幅は % ではなく整数px。62% だと端末幅によって 241.8px のような
	     端数になり、スナップ位置が毎回わずかにずれて「グラグラ」する。
	     整数pxならカード幅とgapの合計が常に整数になり、止まる位置が安定する。
	     次のカードが少し覗く幅（200px）にして、横に続くことは伝わるようにしている。 */
	.bt-hotels .bt-hotels__card { width: 200px; max-width: none; }
	.bt-hotels .bt-hotels__name { font-size: 13px; }
	.bt-hotels__heading { font-size: 15.5px; }
}


/* ─────────────────────────────────────────────────────────────
   bt-coupons — チケット型のクーポンカード

   記事上部のホテルウィジェットの直下に出る。ウィジェットが「どこで予約するか」、
   こちらが「予約する前にクーポンを取る」で役割が違うので、見た目もあえて分けている。
   ウィジェットは薄赤の枠付きブロック、こちらは白いチケットを並べる。

   横3列にせず縦積みにしているのは、チケットの比率が横長で、3列にすると
   1枚あたり200px弱になり宿名も割引も読めなくなるため。スマホでも同じ形が保てる。
   ─────────────────────────────────────────────────────────── */
.bt-coupons {
	margin: 2.4em 0;
}

.bt-coupons__heading {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: #1a2530;
}

/* 見出しの頭にブランドカラーの縦棒（ウィジェット・カルーセルと同じ） */
.bt-coupons__heading::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 19px;
	background: #e8452f;
	border-radius: 2px;
}

.bt-coupons__lead {
	margin: 0 0 12px;
	font-size: 12.5px;
	line-height: 1.65;
	color: #8a7b78;
}

.bt-coupons__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bt-coupons .bt-coupons__item {
	margin: 0;
	padding: 0;
	float: none !important;   /* テーマの .content ul li { float:left } を打ち消す */
	list-style: none;
}
.bt-coupons .bt-coupons__item::before { content: none !important; }

/* チケット本体。
   切り取り線の左右にある半円の切り欠きは、カード自体の背景を radial-gradient で
   くり抜いて作る。疑似要素で白い丸を重ねる方式だと、記事の背景色を変えたときに
   丸だけ白く浮くので使わない。

   ★ 地色は白のまま。淡い赤を敷くのは切り取り線の右側（.bt-coupons__action）だけ。
     全面に敷くと券面がのっぺりして、切り取り線で分かれている形が読み取れない。 */
.bt-coupons .bt-coupons__ticket {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid #f3c4a5;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(26, 37, 48, .06);
	text-decoration: none !important;
	color: #1a2530;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.bt-coupons .bt-coupons__ticket:hover,
.bt-coupons .bt-coupons__ticket:focus-visible {
	border-color: #e8452f;
	box-shadow: 0 3px 10px rgba(232, 69, 47, .14);
	transform: translateY(-1px);
	text-decoration: none !important;
}

/* ロゴ枠。各社でロゴの縦横比がばらばら（楽天は横長、じゃらんは横長、一休は超横長）なので
   固定の箱に contain で収める。高さを揃えないと3枚並べたときに行がガタつく。 */
.bt-coupons .bt-coupons__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 44px;
}

.bt-coupons .bt-coupons__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.bt-coupons__brandtext {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: #1a2530;
}

.bt-coupons__body {
	flex: 1 1 auto;
	min-width: 0;   /* 長いタイトルで flex アイテムが伸びきるのを防ぐ */
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bt-coupons__service {
	font-size: 11.5px;
	line-height: 1.4;
	color: #9a8a87;
}

.bt-coupons__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: #1a2530;
}

.bt-coupons__meta {
	font-size: 12px;
	line-height: 1.5;
	color: #8a7b78;
}

/* 右側。切り取り線（破線）で本体と分ける。
   min-width で幅を固定しているのは、切り取り線の位置をカード間で揃えるため。
   幅を内容任せにすると「クーポンを見る」と「探す」でボタン幅が変わり、
   縦に並べたときに破線がガタガタの階段になる（実際そうなった）。 */
.bt-coupons .bt-coupons__action {
	position: relative;
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border-left: 1px dashed #e8b6ae;
	align-self: stretch;

	/* ★ 淡い赤はここだけに敷く。
	     チケットが padding:14px 16px を持っているので、そのままだと色が内側に浮いて
	     縁との間に白い隙間ができる。負のマージンで上下右を外まで広げ、
	     そのぶんを padding で戻している。角丸はチケットの10pxから枠線1pxを引いた9px。
	     ★ チケットの padding を変えたら、この負のマージンも合わせること
	       （スマホは 12px なので下の @media で別に指定している）。 */
	margin: -14px -16px -14px 2px;
	padding: 14px 16px 14px 16px;
	background: #fcf0e5;
	border-top-right-radius: 9px;
	border-bottom-right-radius: 9px;
}

/* 切り取り線の上下端に半円の切り欠き。カードの角丸と同じ 1px の枠線に合わせて
   1px 外に出す（線の上に重ねると縁が二重に見える）。
   ★ background はチケットの地色と同じにすること（上のコメント参照） */
.bt-coupons .bt-coupons__action::before,
.bt-coupons .bt-coupons__action::after {
	content: "";
	position: absolute;
	left: -7px;
	width: 14px;
	height: 7px;
	/* ★ ここはページの地色（白）。「穴」なので、右側に淡い赤を敷いても白のまま */
	background: #fff;
	border: 1px solid #f3c4a5;
	z-index: 1;
}
/*
 * ★ 位置は -1px。半円は .bt-coupons__action を基準に置いているので、
 *   その箱の上端がチケットのどこにあるかで値が決まる。
 *     負のマージンを入れる前 … 箱の上端は縁から15px内側（枠1px＋padding14px）→ -15px
 *     入れた後（現在）       … 箱の上端は縁の1px内側（枠1pxぶん）      → -1px
 *   右側に色を敷くため負のマージンを足したとき -15px のままにしていて、
 *   半円がチケットの外に飛び出していた。
 *   .bt-coupons__action のマージンを触ったら、ここも必ず見直すこと。
 */
.bt-coupons .bt-coupons__action::before {
	top: -1px;
	border-top: 0;
	border-radius: 0 0 7px 7px;
}
.bt-coupons .bt-coupons__action::after {
	bottom: -1px;
	border-bottom: 0;
	border-radius: 7px 7px 0 0;
}

.bt-coupons__badge {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	color: #c62d19;
	white-space: nowrap;
}

.bt-coupons .bt-coupons__cta {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: #e8452f;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.bt-coupons .bt-coupons__ticket:hover .bt-coupons__cta,
.bt-coupons .bt-coupons__ticket:focus-visible .bt-coupons__cta {
	background: #d13a26;
}

.bt-coupons__disclosure {
	margin: 10px 0 0;
	padding: 0;
	font-size: 11px;
	line-height: 1.6;
	color: #8a7b78;
}

@media (max-width: 600px) {
	.bt-coupons__heading { font-size: 15.5px; }

	.bt-coupons .bt-coupons__ticket {
		gap: 10px;
		padding: 12px 12px;
	}

	/* スマホではロゴを小さくして本文の幅を確保する。
	   3列に割るより、1枚を横長のまま縮めた方が宿名も割引も読める */
	.bt-coupons .bt-coupons__brand { width: 62px; height: 34px; }

	.bt-coupons__title { font-size: 13.5px; }
	.bt-coupons__meta  { font-size: 11.5px; }

	/* チケットの padding が 12px なので、負のマージンもそれに合わせる */
	.bt-coupons .bt-coupons__action {
		min-width: 120px;
		gap: 5px;
		margin: -12px -12px -12px 2px;
		padding: 12px 12px 12px 10px;
	}
	.bt-coupons__badge { font-size: 11.5px; }
	.bt-coupons .bt-coupons__cta { padding: 7px 12px; font-size: 12px; }
}

/* スマホ実機幅（〜480px）では補足文を落とす。
   ロゴ・本文・ボタンを1行に収めると本文の幅が130px前後しか残らず、
   補足を残すとタイトルと合わせて4〜5行になってチケットが縦に伸びてしまう。
   サービス名とタイトルだけで何のクーポンかは伝わるので、補足は割り切って捨てる。 */
@media (max-width: 480px) {
	.bt-coupons__meta { display: none; }
	.bt-coupons .bt-coupons__action { min-width: 112px; }
	.bt-coupons .bt-coupons__cta { padding: 7px 10px; }
}


/* ─────────────────────────────────────────────────────────────
   bt-hotellist — カテゴリページ（エリアトップ）のホテルセクション

   記事内の比較ウィジェット(.bt-compare)と違い、記事一覧の下に置く縦長の一覧。
   1件あたりの情報量を増やして、OTAの検索結果に近い見え方にしている。

   サムネの比率(3:2)はサイドバーの記事サムネに揃えている。サイドバーは
   WordPress の thumbnail サイズ 300x200 のハードクロップなので、
   ここだけ 4:3 にすると同じページで2種類の比率が並んで落ち着かない。
   ─────────────────────────────────────────────────────────── */
.bt-hotellist { margin: 0; }

.bt-hotellist__heading {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: #1a2530;
}

.bt-hotellist .bt-hotellist__items {
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 枠線と影は付けない。記事カードと同じく「画像＋文字」だけで見せる。
   赤い枠で囲うと1件ごとが広告の箱に見え、記事一覧と別物になってしまう。
   区切りは下線1本で足りる。 */
.bt-hotellist .bt-hotellist__item {
	display: flex;
	gap: 16px;
	margin: 0 !important;
	padding: 0 0 16px !important;
	float: none !important;   /* テーマの .content ul li { float:left } を打ち消す */
	list-style: none !important;
	background: none !important;
	border: 0;
	border-bottom: 1px solid #ececec;
}
.bt-hotellist .bt-hotellist__item::before { content: none !important; }
.bt-hotellist .bt-hotellist__item:last-child { border-bottom: 0; padding-bottom: 0 !important; }

/* サムネ。テーマの `#article_contents img { width:100% }` に負けると
   画像が全幅になってフレックスの残り幅が潰れるので、寸法だけ !important で守る。
   ★ 表示に使うのは hotelImageUrl（実測 375x500〜1018x573）。
     hotelThumbnailUrl は 68x90 程度しかなく、この大きさに引き伸ばすと粗い */
.bt-hotellist .bt-hotellist__thumb {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
	text-decoration: none;
}

.bt-hotellist .bt-hotellist__thumb img {
	display: block !important;
	/* カテゴリページの記事カード（.entry dt img）と同じ200px幅・3:2 */
	width: 200px !important;
	min-width: 200px !important;
	max-width: 200px !important;
	height: 133px !important;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 9px !important;   /* 記事カードと同じ角丸 */
	background: #eef1f4;
	transition: opacity .15s ease;
}

.bt-hotellist .bt-hotellist__thumb:hover img { opacity: .85; }

.bt-hotellist__noimage {
	display: block;
	width: 200px;
	height: 133px;
	border-radius: 9px;
	background: #eef1f4;
}

.bt-hotellist__body {
	flex: 1 1 auto;
	min-width: 0;   /* 長い施設名でフレックスが伸びきるのを防ぐ */
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bt-hotellist .bt-hotellist__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: #1a2530;
	text-decoration: none;
}

.bt-hotellist .bt-hotellist__name:hover,
.bt-hotellist .bt-hotellist__name:focus-visible { text-decoration: underline; }

.bt-hotellist__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
}

/* 評価は塗りのバッジをやめて文字だけにした。
   20件並ぶと赤い箱が縦に20個続き、記事一覧の中で広告の列に見えてしまう。
   数字は太字にしてあるので、塗らなくても十分に目に入る。 */
.bt-hotellist__score {
	display: inline-block;
	padding: 0;
	border-radius: 0;
	background: none;
	color: #1a2530;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.bt-hotellist__score::before {
	content: "★";
	margin-right: 3px;
	color: #f5a623;
	font-size: 13px;
}

.bt-hotellist__score-max { font-size: 11px; font-weight: 400; color: #999; }

.bt-hotellist__reviews {
	font-size: 12.5px;
	line-height: 1.5;
	color: #8a7b78;
	font-variant-numeric: tabular-nums;
}

.bt-hotellist__access {
	margin: 0 !important;
	font-size: 12.5px;
	line-height: 1.6;
	color: #8a7b78;
}

/* 右端。価格とボタンを縦積みにして、視線が「料金 → 予約」の順に落ちるようにする */
.bt-hotellist__action {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 8px;
	padding-left: 12px;
}

.bt-hotellist__price {
	margin: 0 !important;
	display: flex;
	align-items: baseline;
	gap: 1px;
	line-height: 1.2;
}

.bt-hotellist__price-value {
	font-size: 20px;
	font-weight: 700;
	color: #c62d19;
	font-variant-numeric: tabular-nums;
}

.bt-hotellist__price-unit { font-size: 13px; color: #c62d19; }

/* 赤の塗りボタン。以前は「20件並ぶと赤い箱が縦に20個続いて広告の列に見える」
   という理由で白地＋枠線にしていたが、それだと押せることが弱く、
   一覧の中で次の行動が分かりにくかったため塗りに戻した（2026-08-28）。
   評価バッジの方を文字だけに留めてあるので、赤はこのボタンだけに効いている。 */
.bt-hotellist .bt-hotellist__cta {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid #e8452f;
	border-radius: 5px;
	background: #e8452f;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bt-hotellist .bt-hotellist__cta:hover,
.bt-hotellist .bt-hotellist__cta:focus-visible {
	background: #c62d19;
	border-color: #c62d19;
	color: #fff !important;
	text-decoration: none !important;
}

/* ── 続きのフェード ────────────────────────────
   11件目以降を下半分だけ覗かせ、白へのグラデーションで消す。
   件数を切っただけだと一覧がそこで終わったように見え、
   楽天側にまだ在庫があることが伝わらない。 */
.bt-hotellist__more {
	position: relative;
	margin-top: 12px;
	padding-bottom: 8px;
}

/* 覗かせる高さ。1件分(約145px)の半分強にして「まだ続く」とだけ伝える */
.bt-hotellist .bt-hotellist__items--faded {
	max-height: 190px;
	overflow: hidden;
	pointer-events: none;   /* 隠れているカードは押させない */
	user-select: none;
}

.bt-hotellist__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 190px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 45%, #fff 80%);
	pointer-events: none;
}

.bt-hotellist__morewrap { margin: 16px 0 0 !important; text-align: center; }

/* ボタンはフェードの上に重ねる。position:absolute にすると
   親の高さから外れて注記と重なるので、フェード内の下端に絶対配置する */
.bt-hotellist__more .bt-hotellist__morebtn {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}

.bt-hotellist .bt-hotellist__morebtn {
	display: inline-block;
	padding: 12px 26px;
	border: 1px solid #e8452f;
	border-radius: 6px;
	background: #fff;
	color: #e8452f !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none !important;
	box-shadow: 0 2px 8px rgba(26, 37, 48, .08);
	transition: background-color .15s ease, color .15s ease;
}

.bt-hotellist .bt-hotellist__morebtn:hover,
.bt-hotellist .bt-hotellist__morebtn:focus-visible {
	background: #e8452f;
	color: #fff !important;
}

.bt-hotellist__note {
	margin: 16px 0 0 !important;
	font-size: 11px;
	line-height: 1.6;
	color: #8a7b78;
}

.bt-hotellist__error {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 4px;
	background: #fff3f1;
	border: 1px solid #f0b4aa;
	font-size: 12.5px;
	color: #c62d19;
}

/* スマホは「サムネイル｜情報」の2カラムのまま、両者の高さを揃える。
   サムネの高さを固定すると、施設名の行数によって右側に余白が出たり
   はみ出したりしてカードごとに高さがバラつく。
   ここではサムネを stretch させ、情報の高さにぴったり合わせている。

   アクセスの一文はスマホでは出さない。幅が狭く2〜3行に折り返して、
   施設名・評価・料金という肝心な情報を押し下げてしまうため。 */
@media (max-width: 600px) {
	/* ★ 3カラム（サムネ｜情報｜料金＋ボタン）のままだと、360px幅の端末で
	     施設名に約106pxしか残らず「森のスパリゾ／ート 北海道ホテ／ル」のように
	     6文字で折り返してしまう。料金とボタンは本文の下の行に落とす。

	     ただし flex の折り返しでやると、サムネ(80px)が「施設名＋評価」(約44px)より
	     背が高いぶん右側に36pxの死に領域ができ、料金行がサムネの下まで
	     押し下げられて間延びする。
	     grid にしてサムネを2行ぶち抜きにすれば、右カラムに
	     「施設名・評価」→「料金・ボタン」が詰めて積まれ、
	     全体の高さもサムネとほぼ揃う。 */
	.bt-hotellist .bt-hotellist__item {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-content: start;
		column-gap: 10px;
		row-gap: 6px;
		padding: 10px !important;
	}

	.bt-hotellist .bt-hotellist__thumb  { grid-column: 1; grid-row: 1 / span 2; }
	.bt-hotellist .bt-hotellist__body   { grid-column: 2; grid-row: 1; }
	.bt-hotellist .bt-hotellist__action { grid-column: 2; grid-row: 2; }

	/* ★ スマホでも記事カードと同じ比率(3:2)にする。
	     以前は情報側の高さに合わせて stretch させていたが、
	     施設名の行数でサムネの縦横比が変わり、記事一覧と並べたときに
	     写真の形だけ違って見えていた。
	     テーマのスマホ記事カードは .entry dt img が 120px 幅・3:2 なので同じにする。 */
	.bt-hotellist .bt-hotellist__thumb { align-self: flex-start; }

	.bt-hotellist .bt-hotellist__thumb img,
	.bt-hotellist__noimage {
		width: 120px !important;
		min-width: 120px !important;
		max-width: 120px !important;
		height: 80px !important;
		min-height: 0 !important;
	}

	.bt-hotellist__body { gap: 4px; justify-content: flex-start; }

	.bt-hotellist .bt-hotellist__name {
		font-size: 14px;
		line-height: 1.45;
		/* 2行を超える施設名でカードだけ間延びするのを防ぐ。
		   料金・ボタンを下段に逃がして幅が約220pxに広がったので、
		   ほとんどの施設名は1〜2行に収まる */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.bt-hotellist__access { display: none; }
	/* 塗りのバッジをやめた名残の padding。字下げの基準がずれるので消す */
	.bt-hotellist__score { padding: 0; font-size: 12px; }
	.bt-hotellist__reviews { font-size: 11.5px; }

	/* 料金とボタンは右カラムの2行目で横並びにする。
	   字下げは grid の列で決まるので padding は持たせない。 */
	.bt-hotellist__action {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
		gap: 10px;
		margin: 0;
		padding: 0;
	}

	.bt-hotellist__price-value { font-size: 16px; }
	.bt-hotellist__price-unit { font-size: 11px; }
	.bt-hotellist .bt-hotellist__cta { padding: 7px 12px; font-size: 12px; }

	/* 料金行が増えて1件あたりが約30px高くなったので、覗かせる高さも合わせる */
	.bt-hotellist .bt-hotellist__items--faded,
	.bt-hotellist__fade { max-height: 175px; height: 175px; }

	.bt-hotellist .bt-hotellist__morebtn {
		padding: 11px 16px;
		font-size: 13px;
		white-space: normal;
		text-align: center;
	}
	/* スマホは幅が狭く、中央寄せの絶対配置だと文字が2行になってはみ出す */
	.bt-hotellist__more .bt-hotellist__morebtn { width: 88%; }
}

/* ── カテゴリページ: 記事カードに似せたグリッド（.cat-hotels）──────
   カテゴリページを1カラムにして、記事一覧をトップと同じ .post-grid
   （PC4列・16:9・角丸9px）に変えた。宿を横並びのリストのまま残すと、
   同じページに2種類のカード形が並んで「記事の続き」に見えないため、
   宿も同じグリッドに揃える。

   ★ この節は必ずスマホ用 @media より後ろに置くこと。
     基底のスマホ用は .bt-hotellist .bt-hotellist__item を
     「サムネ120px｜情報」の grid にしている。詳細度が同じ(0,2,0)なので、
     打ち消せるかどうかは記述順だけで決まる。 */
.cat-hotels .bt-hotellist__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 20px;   /* .post-grid と同じ */
}

.cat-hotels .bt-hotellist__item {
	display: block;
	padding: 0 !important;
	border-bottom: 0;
}

.cat-hotels .bt-hotellist__thumb { display: block; }

/* 記事カードと同じ16:9。幅は列に追従させるので固定値を全部解除する */
.cat-hotels .bt-hotellist__thumb img,
.cat-hotels .bt-hotellist__noimage {
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	border-radius: 9px !important;
}

.cat-hotels .bt-hotellist__body { margin-top: 12px; gap: 5px; }

/* .post-card__title に合わせる。ただし宿名は記事タイトルより短いので2行で打ち切る */
.cat-hotels .bt-hotellist__name {
	font-size: 15.5px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* 料金とボタンはカード幅いっぱいに振り分ける */
.cat-hotels .bt-hotellist__action {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	gap: 10px;
	margin-top: 10px;
	padding: 0;
}

.cat-hotels .bt-hotellist__access { display: none; }   /* カード幅では入らない */

@media (max-width: 979px) {
	.cat-hotels .bt-hotellist__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
}

@media (max-width: 600px) {
	/* 基底のスマホ用（サムネ120px｜情報の2カラム）を打ち消して縦積みに戻す */
	.cat-hotels .bt-hotellist__item { display: block; padding: 0 !important; }
	.cat-hotels .bt-hotellist__body { margin-top: 9px; }
	.cat-hotels .bt-hotellist__name { font-size: 14px; -webkit-line-clamp: 2; }
	.cat-hotels .bt-hotellist__thumb img,
	.cat-hotels .bt-hotellist__noimage { border-radius: 6px !important; }
	.cat-hotels .bt-hotellist__action { margin-top: 8px; }
}

/* グリッドではカード1枚が約230px（サムネ139＋見出し＋料金行）ある。
   横並びリスト用の190pxのままだと8割見えてしまい「隠れている」感が出ない。
   写真の下半分で切って、続きがあることだけを伝える。 */
.cat-hotels .bt-hotellist__items--faded,
.cat-hotels .bt-hotellist__fade { max-height: 110px; height: 110px; }


/* ─────────────────────────────────────────────────────────
   hs-* — ホテル検索ページ（/hotel/ ・ page-hotel.php）

   上の検索バー（濃紺）／左の絞り込み／右の結果一覧、という3ブロック。
   カードの見た目はカテゴリページのホテル一覧(.bt-hotellist)と揃えているが、
   あちらは記事カードに似せた4列グリッド、こちらは1件ずつ情報量の多い
   横並びリストなので、クラスは分けている。

   ★ このセクションはファイル末尾に置くこと。
     .cat-hotels と同じく、スマホ用の指定を後ろから打ち消す箇所がある。
   ───────────────────────────────────────────────────────── */

/* ── 上部の検索バー ────────────────────────────── */
.hs-bar {
	background: #1e2a78;
	padding: 14px 0;
}

.hs-bar__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.hs-bar__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 150px;
	min-width: 0;
}

.hs-bar__field--area { flex: 2 1 220px; }
.hs-bar__field--num  { flex: 0 1 100px; }

.hs-bar__label {
	font-size: 11px;
	font-weight: 700;
	color: #c9cfee;
	letter-spacing: .02em;
}

.hs-bar__field select,
.hs-bar__field input {
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	color: #1a2530;
	/* iOSは入力欄のフォントが16px未満だとフォーカス時に拡大する。
	   拡大するとバーの外にはみ出て見えるので、スマホでは16pxに戻す（下の@media） */
}

.hs-bar__submit {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 28px;
	border: 0;
	border-radius: 6px;
	background: #e8452f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease;
}

.hs-bar__submit:hover { background: #c62d19; }

/* ── レイアウト ──────────────────────────────── */
.hs-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	/* 行の隙間は 0。見出し帯(.hs-head)が自分で下マージンを持っている */
	gap: 0 32px;
	margin: 28px 0 0;
}

/* ── 左の絞り込み ─────────────────────────────── */
.hs-filters__block { margin: 0 0 24px; }

.hs-filters__block h2 {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: #1a2530;
}

.hs-filters__list {
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
}

.hs-filters__list li {
	margin: 0 0 8px !important;
	padding: 0 !important;
	float: none !important;   /* テーマの .content ul li { float:left } を打ち消す */
	background: none !important;
	list-style: none !important;
}

.hs-filters__list li::before { content: none !important; }

.hs-filters__list label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: #1a2530;
	cursor: pointer;
}

.hs-filters__range {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hs-filters__range label { flex: 1 1 0; min-width: 0; }

.hs-filters__range input {
	width: 100%;
	box-sizing: border-box;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #d9dde1;
	border-radius: 5px;
	font-size: 13px;
}

.hs-filters__dash { flex: 0 0 auto; color: #8a7b78; }

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

.hs-filters__note {
	margin: 8px 0 0 !important;
	font-size: 11.5px;
	line-height: 1.6;
	color: #8a7b78;
}

.hs-filters__submit {
	width: 100%;
	padding: 11px 0;
	border: 1px solid #1a2530;
	border-radius: 6px;
	background: #1a2530;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s ease;
}

.hs-filters__submit:hover { opacity: .85; }

.hs-filters__clear { margin: 10px 0 0 !important; font-size: 12.5px; text-align: center; }

/* ── 結果 ───────────────────────────────────── */
.hs-results__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #1a2530; }

.hs-results__cond {
	margin: 0 0 14px !important;
	font-size: 13px;
	color: #8a7b78;
}

.hs-results__count { margin: 0 0 14px !important; font-size: 15px; color: #1a2530; }
.hs-results__count strong { font-size: 19px; }

.hs-results__error {
	margin: 0 0 14px !important;
	padding: 10px 12px;
	border: 1px solid #f0b4aa;
	border-radius: 4px;
	background: #fff3f1;
	font-size: 13px;
	color: #c62d19;
}

.hs-results__note {
	margin: 0 0 12px !important;
	font-size: 11.5px;
	line-height: 1.6;
	color: #8a7b78;
}

.hs-results__disclosure {
	margin: 24px 0 0 !important;
	font-size: 11px;
	line-height: 1.7;
	color: #8a7b78;
}

/* ── 並び替えタブ ────────────────────────────── */
.hs-sort {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	list-style: none !important;
	margin: 0 0 16px;
	padding: 0 0 10px !important;
	border-bottom: 1px solid #ececec;
}

.hs-sort li {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	background: none !important;
	list-style: none !important;
}

.hs-sort li::before { content: none !important; }

.hs-sort a {
	display: inline-block;
	padding: 4px 0;
	font-size: 13.5px;
	color: #1a2530;
	text-decoration: none;
}

.hs-sort a:hover { text-decoration: underline; }
.hs-sort .is-active a { color: #e8452f; font-weight: 700; }

/* ── カード ───────────────────────────────── */
.hs-cards {
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hs-cards .hs-card {
	display: flex;
	gap: 18px;
	margin: 0 !important;
	padding: 18px 0 !important;
	float: none !important;
	background: none !important;
	list-style: none !important;
	border-bottom: 1px solid #ececec;
}

.hs-cards .hs-card::before { content: none !important; }

.hs-card__thumb { flex: 0 0 auto; display: block; line-height: 0; }

/* テーマの `#article_contents img { width:100% }` に負けないよう寸法を守る */
.hs-card__thumb img,
.hs-card__thumb--none {
	display: block !important;
	width: 220px !important;
	min-width: 220px !important;
	max-width: 220px !important;
	height: 147px !important;    /* 3:2 */
	margin: 0 !important;
	object-fit: cover;
	border-radius: 9px !important;
	background: #eef1f4;
}

.hs-card__thumb:hover img { opacity: .85; }

.hs-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hs-card__name {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.5;
	color: #1a2530;
	text-decoration: none;
}

.hs-card__name:hover { text-decoration: underline; }

.hs-card__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
}

.hs-card__score {
	font-size: 14px;
	font-weight: 700;
	color: #1a2530;
	font-variant-numeric: tabular-nums;
}

.hs-card__score::before { content: "★"; margin-right: 3px; color: #f5a623; font-size: 13px; }
.hs-card__score-max { font-size: 11px; font-weight: 400; color: #999; }

.hs-card__reviews { font-size: 12.5px; color: #8a7b78; font-variant-numeric: tabular-nums; }

.hs-card__station,
.hs-card__address {
	margin: 0 !important;
	font-size: 12.5px;
	line-height: 1.6;
	color: #8a7b78;
}

.hs-card__action {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 160px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 8px;
	padding-left: 12px;
}

.hs-card__price { margin: 0 !important; display: flex; align-items: baseline; gap: 1px; line-height: 1.2; }
.hs-card__price-value { font-size: 22px; font-weight: 700; color: #c62d19; font-variant-numeric: tabular-nums; }
.hs-card__price-unit { font-size: 13px; color: #c62d19; }

.hs-cards .hs-card__cta {
	display: inline-block;
	padding: 9px 22px;
	border: 1px solid #e8452f;
	border-radius: 5px;
	background: #e8452f;
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease;
}

.hs-cards .hs-card__cta:hover { background: #c62d19; border-color: #c62d19; }

/* ── もっと見る ─────────────────────────────
   ページ送りをやめて継ぎ足しにした。押すと前の分も含めて描き直すので、
   URLだけで表示状態が決まる（共有しても同じ画面になる）。 */
.hs-more { margin: 26px 0 0 !important; text-align: center; }

.hs-more__btn {
	display: inline-block;
	min-width: 260px;
	padding: 14px 28px;
	border: 1px solid #1a2530;
	border-radius: 999px;
	background: #fff;
	font-size: 14.5px;
	font-weight: 700;
	color: #1a2530 !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}

.hs-more__btn:hover { background: #1a2530; color: #fff !important; }
.hs-more__sub { margin-left: 6px; font-size: 12.5px; font-weight: 400; opacity: .75; }

/* ── タブレット・スマホ ──────────────────────────── */
@media screen and (max-width: 979px) {
	/* 1カラムに畳む。240pxの列を残すと結果が細くなりすぎる。
	   ★ order は付けないこと。以前は結果を先に出すために
	     .hs-filters{order:2} を入れていたが、見出しを上に出して
	     DOM順を 見出し→絞り込み→結果 に直したあともこれが効いていて、
	     「しぼりこみ」のピルだけがページ最下部に残っていた（実測 top=3482px）。 */
	/* ★ grid のままにしないこと。グリッドアイテムは独立した整形コンテキストを作るので、
	     .hs-filters の中で float させたピルが .hs-results 側に回り込めない
	     （実測でピルが縦に並んだままだった）。ブロックに戻して回り込ませる。 */
	.hs-layout { display: block; }
	.hs-filters__block { margin-bottom: 16px; }
}

@media screen and (max-width: 600px) {
	.hs-bar { padding: 10px 0; }
	.hs-bar__form { gap: 8px; }
	.hs-bar__field { flex: 1 1 calc(50% - 4px); }
	.hs-bar__field--area { flex: 1 1 100%; }
	/* iOSは16px未満の入力欄でフォーカス時に画面を拡大する */
	.hs-bar__field select,
	.hs-bar__field input { height: 40px; font-size: 16px; }
	.hs-bar__submit { flex: 1 1 100%; height: 42px; }

	.hs-results__title { font-size: 18px; }

	/* カードは「サムネ｜情報」の2カラムにして、料金とボタンを2行目に落とす。
	   3カラムのままだと施設名に100pxほどしか残らず数文字で折り返す
	   （.bt-hotellist で踏んだのと同じ）。grid でサムネを2行ぶち抜きにすると
	   右カラムが詰まって高さも揃う。 */
	.hs-cards .hs-card {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-content: start;
		column-gap: 10px;
		row-gap: 6px;
		padding: 14px 0 !important;
	}

	.hs-card__thumb  { grid-column: 1; grid-row: 1 / span 2; align-self: flex-start; }
	.hs-card__body   { grid-column: 2; grid-row: 1; gap: 4px; }
	.hs-card__action { grid-column: 2; grid-row: 2; }

	.hs-card__thumb img,
	.hs-card__thumb--none {
		width: 120px !important;
		min-width: 120px !important;
		max-width: 120px !important;
		height: 80px !important;
	}

	.hs-card__name {
		font-size: 14px;
		line-height: 1.45;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.hs-card__address { display: none; }   /* 幅が狭く、最寄り駅だけで足りる */
	.hs-card__score   { font-size: 12px; }
	.hs-card__reviews { font-size: 11.5px; }

	.hs-card__action {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
		gap: 10px;
		padding: 0;
	}

	.hs-card__price-value { font-size: 17px; }
	.hs-cards .hs-card__cta { padding: 8px 14px; font-size: 12.5px; }

	.hs-sort { gap: 4px 14px; }
	.hs-sort a { font-size: 12.5px; }
}

/* クチコミ点数のチップ（Klookの 3+ / 3.5+ / 4+ / 4.5+ と同じ形）。
   APIに絞り込みが無いのでこちらで間引いている。選ぶと即座に効くリンクなので、
   予算のフォームとは別ブロックにしてある。 */
.hs-filters__chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
}

.hs-filters__chips li {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	background: none !important;
	list-style: none !important;
}

.hs-filters__chips li::before { content: none !important; }

.hs-filters__chips a {
	display: block;
	padding: 9px 0;
	border: 1px solid #d9dde1;
	border-radius: 6px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-align: center;
	color: #1a2530;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.hs-filters__chips a:hover { border-color: #1a2530; text-decoration: none; }

.hs-filters__chips .is-active a {
	border-color: #e8452f;
	background: #fff2ef;
	color: #c62d19;
}

/* 最寄り駅。件数はAPIが返す nearestStation を数えたもの */
.hs-filters__stations a {
	display: block;
	padding: 3px 0;
	font-size: 13px;
	color: #1a2530;
	text-decoration: none;
}

.hs-filters__stations a:hover { text-decoration: underline; }
.hs-filters__stations .is-active a { color: #c62d19; font-weight: 700; }
.hs-filters__count { font-size: 11.5px; color: #8a7b78; }

/* ── 上部の1行（トップバー）と開閉メニュー ─────────────────
   PCは  [しぼりこみ] │ タイトル ……… 検索結果 N軒  [おすすめ順]
   スマホは タイトル → 件数 → [しぼりこみ][おすすめ順] の縦積み。

   開閉はチェックボックス＋label だけで、JSは使っていない。
   このページはフォーム送信で読み直す作りなので、開閉のためだけに
   スクリプトを持ち込む理由がない。

   ★ チェックボックスは .hs-layout 直下に置いてある。パネルは
     .hs-filters / .hs-results の中にあり、CSSの ~ で効かせるには
     チェックボックスがそれらより前の兄弟である必要があるため。 */

.hs-topbar {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 0 32px;          /* 左カラム幅・間隔は .hs-layout と揃える */
	align-items: center;
	margin: 0 0 18px;
	padding: 0;
}

.hs-topbar__filter {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #1a2530;
}

.hs-topbar__main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-width: 0;
}

.hs-topbar__titles { min-width: 0; }

.hs-topbar__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #1a2530;
}

.hs-topbar__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.hs-topbar__count { margin: 0 !important; font-size: 13.5px; color: #1a2530; }
.hs-topbar__count strong { font-size: 16px; }

/* 並び替えボタン。文字はいま何順かを出す */
.hs-topbar__sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	border: 1px solid #d9dde1;
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	color: #1a2530;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: border-color .15s ease;
}

/* 並び替えアイコン（長さの違う3本線）。画像を足さずに疑似要素で描く */
.hs-topbar__sort::before {
	content: "";
	width: 14px;
	height: 10px;
	flex: 0 0 auto;
	background:
		linear-gradient(#1a2530, #1a2530) left 0 top 0 / 14px 2px no-repeat,
		linear-gradient(#1a2530, #1a2530) left 0 top 4px / 10px 2px no-repeat,
		linear-gradient(#1a2530, #1a2530) left 0 top 8px / 6px 2px no-repeat;
}

.hs-topbar__sort:hover { border-color: #1a2530; }
.hs-toggle:checked ~ .hs-topbar .hs-topbar__sort { border-color: #1a2530; background: #f6f8fa; }

/* 絞り込みの中身。PCでは常に開いている */
.hs-toggle__panel { display: block; }

/* 並び替えメニュー。PC・スマホとも既定は閉じていて、ボタンで開く */
.hs-results { position: relative; }

.hs-sortmenu {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 20;
	flex-direction: column;
	gap: 0;
	min-width: 220px;
	margin: 0;
	padding: 6px 0 !important;
	border: 1px solid #d9dde1;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(26, 37, 48, .12);
}

.hs-sortmenu li { width: 100%; }

.hs-sortmenu a {
	display: block;
	padding: 10px 16px;
	font-size: 13.5px;
	text-decoration: none;
}

.hs-sortmenu a:hover { background: #f6f8fa; text-decoration: none; }
.hs-sortmenu .is-active a { color: #e8452f; font-weight: 700; }

#hs-sort-toggle:checked ~ .hs-results .hs-sortmenu { display: flex; }

@media screen and (max-width: 979px) {
	/* ★ grid のままにしないこと。グリッドアイテムは独立した整形コンテキストを作るので、
	     絞り込みの中身が結果の上に重ならず、レイアウトの自由が効かない。 */
	.hs-layout { display: block; }

	.hs-topbar {
		display: block;
		margin-bottom: 14px;
		padding-bottom: 12px;
	}

	.hs-topbar__title { font-size: 17px; }

	/* スマホは
	     タイトル
	     検索結果 N軒
	     [しぼりこみ][おすすめ順]
	   の3段にする。

	   ★ .hs-topbar を flex にしないと order が効かない。
	     block のままだと left が先頭に残り、タイトルより上に出てしまう。
	   ★ 「しぼりこみ」は .hs-topbar__left、「おすすめ順」は
	     .hs-topbar__main > .hs-topbar__meta の中にあり、入れ子の深さが違う。
	     そのままでは同じ行に並べられないので、間の2つを display:contents で
	     畳んで、両方を .hs-topbar の直接の子として扱えるようにしている。 */
	.hs-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
	.hs-topbar__main { display: contents; }
	.hs-topbar__meta { display: contents; }

	.hs-topbar__titles { order: 1; flex: 1 1 100%; }
	.hs-topbar__count  { order: 2; flex: 1 1 100%; margin: 0 0 10px !important; }
	.hs-topbar__left   { order: 3; flex: 0 0 auto; }
	.hs-topbar__sort   { order: 4; flex: 0 0 auto; }

	.hs-topbar__filter {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 9px 20px;
		border: 1px solid #d9dde1;
		border-radius: 999px;
		background: #fff;
		font-size: 13.5px;
		font-weight: 700;
		cursor: pointer;
		user-select: none;
	}

	/* 開いていることが分かるように▾を▴に反転させる */
	.hs-topbar__filter::after { content: "▾"; font-size: 11px; line-height: 1; }
	#hs-filter-toggle:checked ~ .hs-topbar .hs-topbar__filter { background: #1a2530; border-color: #1a2530; color: #fff; }
	#hs-filter-toggle:checked ~ .hs-topbar .hs-topbar__filter::after { content: "▴"; }

	/* 絞り込みの中身はスマホでは畳む */
	.hs-toggle__panel { display: none; }
	#hs-filter-toggle:checked ~ .hs-filters .hs-toggle__panel { display: block; }

	.hs-filters { margin: 0; }
	.hs-filters__block { margin-bottom: 16px; }

	/* メニューは画面幅いっぱいに出す。右上に小さく出すと押しにくい */
	.hs-sortmenu { left: 0; right: 0; min-width: 0; }
}

/* ── しぼりこみモーダル（スマホ）と即時反映（PC）──────────────
   PCは左カラムに出したまま、値を変えた瞬間にJSで送信する。
   スマホは全画面のモーダルにして、最後に「決定する」で送る。
   ここはCSSだけで、開閉はチェックボックス。 */

/* PCではモーダルの飾りを出さない */
.hs-modal__head { display: none; }

/*
 * PCは値を変えた瞬間に送信するので「決定する」は要らない。
 * ただし隠すのはJSが .is-auto を付けたときだけ。
 * JSが動かない環境ではこのボタンが唯一の送信手段になる。
 */
@media screen and (min-width: 980px) {
	.hs-filters__form.is-auto .hs-modal__apply { display: none; }
}

/*
 * PCでは「クリア」を出さない。
 * どの条件も個別に外せるので（クチコミ点数と最寄り駅には「すべて」、
 * こだわり条件はチェックを外す、料金は空にする）、一括リセットは無くても困らない。
 * 一度は「PCで外す手段が消える」と考えて出していたが、それは誤りだった。
 * スマホはモーダルの下部バーで「決定する」と対になるので、そちらには残す。
 */
.hs-modal__clear { display: none; }

.hs-filters__block--sort { display: none; }   /* PCは上部のボタンから開く */

.hs-modal__foot { margin-top: 4px; }

.hs-modal__apply {
	width: 100%;
	padding: 11px 0;
	border: 1px solid #1a2530;
	border-radius: 6px;
	background: #1a2530;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s ease;
}

.hs-modal__apply:hover { opacity: .85; }

/* ラジオ・チェックボックスの行 */
.hs-filters__list label { gap: 10px; }
.hs-filters__list input[type="radio"],
.hs-filters__list input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; accent-color: #e8452f; }

@media screen and (max-width: 979px) {
	/* ── 全画面モーダル ────────────────────────── */
	.hs-toggle__panel {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: #fff;
		/* 中身が長いので縦スクロール。iOSの慣性スクロールも効かせる */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#hs-filter-toggle:checked ~ .hs-filters .hs-toggle__panel { display: block; }

	/* 開いている間は背後を動かさない…はJS無しでは出来ないので、
	   代わりにモーダルを不透明にして背後を見せない作りにしている */

	.hs-modal__head {
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0;
		z-index: 2;
		padding: 16px;
		background: #fff;
		border-bottom: 1px solid #ececec;
	}

	.hs-modal__title { font-size: 16px; font-weight: 700; color: #1a2530; }

	.hs-modal__close {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		line-height: 1;
		color: #1a2530;
		cursor: pointer;
	}

	/* 下の操作バーに隠れないよう、本文の下に余白を取る */
	.hs-modal__body { padding: 16px 16px 96px; }

	.hs-filters__block { margin-bottom: 22px; }
	.hs-filters__block h2 { font-size: 15px; margin-bottom: 10px; }
	.hs-filters__list label { padding: 7px 0; font-size: 14.5px; }
	.hs-filters__list input[type="radio"],
	.hs-filters__list input[type="checkbox"] { width: 20px; height: 20px; }

	/* 並び替えはモーダルの先頭に置く（添付のNEWTと同じ並び） */
	.hs-filters__block--sort { display: block; }

	.hs-filters__sortlist {
		list-style: none !important;
		margin: 0;
		padding: 0 !important;
	}

	.hs-filters__sortlist li {
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		background: none !important;
		list-style: none !important;
		border-bottom: 1px solid #f0f0f0;
	}

	.hs-filters__sortlist li::before { content: none !important; }

	.hs-filters__sortlist a {
		display: block;
		padding: 13px 0;
		font-size: 14.5px;
		font-weight: 700;
		color: #1a2530;
		text-decoration: none;
	}

	/* 選択中はチェックを出す。NEWTと同じ見せ方 */
	.hs-filters__sortlist .is-active a::after {
		content: "✓";
		float: right;
		color: #e8452f;
	}

	/* ── 下部の操作バー ───────────────────────── */
	.hs-modal__foot {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
		display: flex;
		gap: 12px;
		margin: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid #ececec;
		box-shadow: 0 -4px 16px rgba(26, 37, 48, .08);
	}

	.hs-modal__clear {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 34%;
		padding: 13px 0;
		border: 1px solid #d9dde1;
		border-radius: 999px;
		background: #fff;
		font-size: 14px;
		font-weight: 700;
		color: #1a2530;
		text-decoration: none;
	}

	.hs-modal__apply {
		flex: 1 1 auto;
		padding: 13px 0;
		border-radius: 999px;
		background: #e8452f;
		border-color: #e8452f;
		font-size: 14.5px;
	}
}

/* ── スマホの検索バー（1枚のカード）とピルの列 ─────────────
   PCは今までどおり入力欄を出したまま。ここはスマホ専用。 */

/* PCではサマリーもピルの列も出さない */
.hs-bar__summary,
.hs-pills,
.hs-menu { display: none; }

@media screen and (max-width: 979px) {
	/* ── 検索バーを1枚のカードに畳む ───────────────
	   入力欄を5つ出しっぱなしにすると上部だけで約280px使い、
	   検索結果が最初の画面に入らない。押したときだけ開く。 */
	.hs-bar__summary {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 12px 12px 18px;
		border-radius: 999px;
		background: #fff;
		cursor: pointer;
	}

	.hs-bar__summary-text { flex: 1 1 auto; min-width: 0; }

	.hs-bar__summary-area {
		display: block;
		font-size: 16px;
		font-weight: 700;
		color: #1a2530;
		line-height: 1.3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hs-bar__summary-sub {
		display: block;
		margin-top: 2px;
		font-size: 12.5px;
		color: #6b7680;
		line-height: 1.3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 丸い検索ボタン。虫めがねは疑似要素で描く（画像を足さない） */
	.hs-bar__summary-icon {
		flex: 0 0 auto;
		position: relative;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #e8452f;
	}

	.hs-bar__summary-icon::before {
		content: "";
		position: absolute;
		left: 12px;
		top: 12px;
		width: 11px;
		height: 11px;
		border: 2px solid #fff;
		border-radius: 50%;
	}

	.hs-bar__summary-icon::after {
		content: "";
		position: absolute;
		left: 23px;
		top: 23px;
		width: 7px;
		height: 2px;
		background: #fff;
		transform: rotate(45deg);
		transform-origin: left center;
	}

	/* 入力欄は畳んでおき、カードを押したときだけ開く */
	.hs-bar__form { display: none; }
	#hs-search-toggle:checked ~ .hs-bar__form { display: flex; margin-top: 10px; }
	#hs-search-toggle:checked ~ .hs-bar__summary { display: none; }

	/* ── ピルの列（横スクロール）───────────────── */
	.hs-topbar__left { display: none; }   /* 「しぼりこみ」はピルの方に出す */
	.hs-topbar__sort { display: none; }   /* 並び替えも同じ */

	.hs-pills {
		display: flex;
		gap: 8px;
		order: 3;
		flex: 1 1 100%;
		margin: 2px 0 0;
		padding: 2px 0 4px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.hs-pills::-webkit-scrollbar { display: none; }

	.hs-pill {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 9px 18px;
		border: 1px solid #d9dde1;
		border-radius: 999px;
		background: #fff;
		font-size: 13.5px;
		font-weight: 700;
		color: #1a2530;
		white-space: nowrap;
		cursor: pointer;
		user-select: none;
	}

	.hs-pill::after { content: "▾"; font-size: 10px; line-height: 1; }

	/* 条件が入っているピルは色を変えて、絞り込み中だと分かるようにする */
	.hs-pill.is-on { border-color: #e8452f; background: #fff2ef; color: #c62d19; }

	#hs-filter-toggle:checked ~ .hs-topbar .hs-pill[for="hs-filter-toggle"],
	#hs-sort-toggle:checked   ~ .hs-topbar .hs-pill[for="hs-sort-toggle"],
	#hs-price-toggle:checked  ~ .hs-topbar .hs-pill[for="hs-price-toggle"],
	#hs-review-toggle:checked ~ .hs-topbar .hs-pill[for="hs-review-toggle"] {
		background: #1a2530;
		border-color: #1a2530;
		color: #fff;
	}

	/* ── 料金・クチコミのメニュー ─────────────────
	   ピルの列は overflow-x:auto なので、メニューはその外に置いて
	   .hs-layout を基準に絶対配置する。中に入れると横に切られる。 */
	.hs-layout { position: relative; }

	.hs-menu {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 30;
		margin-top: 4px;
		padding: 6px 0;
		border: 1px solid #d9dde1;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 6px 20px rgba(26, 37, 48, .14);
	}

	.hs-menu ul { list-style: none !important; margin: 0; padding: 0 !important; }

	.hs-menu li {
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		background: none !important;
		list-style: none !important;
	}

	.hs-menu li::before { content: none !important; }

	.hs-menu a {
		display: block;
		padding: 12px 18px;
		font-size: 14px;
		color: #1a2530;
		text-decoration: none;
	}

	.hs-menu .is-active a { color: #e8452f; font-weight: 700; }
	.hs-menu .is-active a::after { content: "✓"; float: right; }

	#hs-price-toggle:checked  ~ .hs-menu--price  { display: block; }
	#hs-review-toggle:checked ~ .hs-menu--review { display: block; }
}

/* ── クーポンページ（/coupon/）─────────────────────────
   UIは /hotel/ と同じ .hs-* の部品を使い回している（並び替えボタン・
   しぼりこみモーダル・ピル）。同じサイトで操作感が2種類あると覚え直しが要る。
   カードも記事内のクーポンと同じ .bt-coupons__ticket。
   ここに残すのは、このページ固有の余白と重複の始末だけ。 */

.cpn-others { margin: 26px 0 0; }
.cpn-empty  { margin: 20px 0 !important; font-size: 13.5px; color: #8a7b78; }

/* 見出しはチケット側の .bt-coupons__heading が担う */
.cpn-page .bt-coupons__heading { font-size: 17px; margin-bottom: 6px; }
.cpn-page .bt-coupons__lead    { margin-bottom: 16px !important; }

/* 免責が3ブロックぶん繰り返されるので、最後の1つだけ残す */
.cpn-page .bt-coupons__disclosure { display: none; }
.cpn-page .cpn-others:last-of-type .bt-coupons__disclosure { display: block; }

@media screen and (max-width: 979px) {
	.cpn-others { margin-top: 20px; }
	.cpn-page .bt-coupons__heading { font-size: 15.5px; }
}

/* ── 行き先が未選択のときのエリア選択（.hs-pick）──────────────
   「全国」で引くことはできない（楽天APIの searchRadius は最大3km）。
   中途半端な結果を出すより、選択肢そのものを見せた方が早い。
   ここは検索していないのでAPIも叩かず、表示は速い。 */

.hs-pick { grid-column: 1 / -1; }

.hs-pick__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #1a2530; }

.hs-pick__lead {
	margin: 0 0 26px !important;
	font-size: 13px;
	line-height: 1.7;
	color: #8a7b78;
}

.hs-pick__block { margin: 0 0 22px; }

.hs-pick__block h2 {
	margin: 0 0 10px;
	padding: 0 0 7px;
	border-bottom: 1px solid #ececec;
	font-size: 15px;
	font-weight: 700;
	color: #1a2530;
}

.hs-pick__list {
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.hs-pick__list li {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	background: none !important;
	list-style: none !important;
}

.hs-pick__list li::before { content: none !important; }

.hs-pick__list a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #d9dde1;
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px;
	color: #1a2530;
	text-decoration: none !important;
	transition: border-color .15s ease, background-color .15s ease;
}

.hs-pick__list a:hover { border-color: #1a2530; background: #f6f8fa; }

@media screen and (max-width: 979px) {
	.hs-pick__title { font-size: 18px; }
	.hs-pick__lead { margin-bottom: 20px !important; font-size: 12.5px; }
	.hs-pick__block { margin-bottom: 18px; }
	.hs-pick__block h2 { font-size: 14px; }
	.hs-pick__list { gap: 7px; }
	.hs-pick__list a { padding: 7px 13px; font-size: 12.5px; }
}

/* ── 海外の行き先（/hotel/ の未選択画面の下）─────────────────
   海外は楽天APIで在庫・料金が取れないので一覧は作れない。
   行き先を選んで楽天トラベル海外の検索結果へ送るだけ。
   国内のエリア選択と同じピルを使い、地続きに見せている。 */

.hs-pick__ov {
	margin: 36px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid #ececec;
}

.hs-pick__ovtitle { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #1a2530; }

.hs-pick__ovlead {
	margin: 0 0 22px !important;
	font-size: 12.5px;
	line-height: 1.7;
	color: #8a7b78;
}

/* 地域見出しは国内の h2 より一段小さくする（国内＝h2／海外＝h3） */
.hs-pick__ov .hs-pick__block h3 {
	margin: 0 0 10px;
	padding: 0 0 7px;
	border-bottom: 1px solid #ececec;
	font-size: 14.5px;
	font-weight: 700;
	color: #1a2530;
}

@media screen and (max-width: 979px) {
	.hs-pick__ov { margin-top: 26px; padding-top: 20px; }
	.hs-pick__ovtitle { font-size: 16px; }
	.hs-pick__ovlead { margin-bottom: 16px !important; font-size: 12px; }
	.hs-pick__ov .hs-pick__block h3 { font-size: 13.5px; }
}