/* こずれたび 料金比較（楽天／Agoda 横並び）
   SWELL の記事幅に収まるよう、はみ出しは内側でスクロールさせる。 */

.kzcmp {
	--kzcmp-line: #e3e6ea;
	--kzcmp-ink: #2b2f36;
	--kzcmp-sub: #6b7280;
	--kzcmp-best: #e8590c;
	border: 1px solid var(--kzcmp-line);
	border-radius: 10px;
	padding: 16px;
	margin: 2em 0;
	background: #fff;
	color: var(--kzcmp-ink);
}

.kzcmp__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.kzcmp__title { font-weight: 700; font-size: 1.02em; }

.kzcmp__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.kzcmp__f { display: flex; flex-direction: column; gap: 3px; font-size: .82em; color: var(--kzcmp-sub); }

.kzcmp__f input,
.kzcmp__f select {
	font-size: 1rem;              /* iOS で拡大されないように16px相当 */
	padding: 7px 9px;
	border: 1px solid var(--kzcmp-line);
	border-radius: 6px;
	background: #fff;
	color: var(--kzcmp-ink);
	min-height: 42px;             /* 指で押せる大きさ */
}

.kzcmp__f input[type="date"] { min-width: 10.5em; }

/* 「子ども」の人数ぶん出てくる年齢帯セレクト（.kzcmp__band は .kzcmp__f のスタイルを継承） */
.kzcmp__child-bands {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: -6px 0 14px;
}

.kzcmp__child-bands[hidden] { display: none; }

.kzcmp__band-row .kzcmp__band { min-width: 13em; }

.kzcmp__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Agoda に掲載がない宿は楽天だけ。1枚のときに半分幅にしない */
.kzcmp__cards.is-single { grid-template-columns: 1fr; }

/* テーマ側の [hidden]{display:none} に display:flex が勝ってしまうため明示する */
.kzcmp__card[hidden] { display: none !important; }

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

.kzcmp__card {
	min-width: 0;                  /* 長い英数字でグリッドを押し広げない */
	overflow-wrap: anywhere;
	border: 1px solid var(--kzcmp-line);
	border-radius: 8px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}

.kzcmp__card.is-best { border-color: var(--kzcmp-best); box-shadow: 0 0 0 1px var(--kzcmp-best) inset; }

.kzcmp__card.is-best::after {
	content: "この条件では最安";
	position: absolute;
	top: -10px;
	left: 12px;
	background: var(--kzcmp-best);
	color: #fff;
	font-size: .68em;
	border-radius: 3px;
	padding: 2px 7px;
}

.kzcmp__site { font-weight: 700; font-size: .92em; }

.kzcmp__price { font-size: .85em; color: var(--kzcmp-sub); min-height: 1.9em; }

.kzcmp__num { font-size: 1.55rem; font-weight: 700; color: var(--kzcmp-ink); letter-spacing: -.01em; }

.kzcmp__unit { font-size: .8em; margin-left: 2px; }

.kzcmp__plan {
	font-size: .76em;
	color: var(--kzcmp-sub);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;        /* プラン名は2行まで */
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.3em;
}

.kzcmp__btn {
	margin-top: auto;
	display: block;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	font-size: .92em;
	padding: 11px 12px;
	border-radius: 6px;
	background: var(--kzcmp-ink);
	color: #fff !important;
}

.kzcmp__card.is-best .kzcmp__btn { background: var(--kzcmp-best); }

.kzcmp__btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.kzcmp__note { font-size: .74em; color: var(--kzcmp-sub); line-height: 1.7; margin: 12px 0 0; }

/* 端末のダークモードに引っぱられても読めるようにしておく */
@media (prefers-color-scheme: dark) {
	.kzcmp { background: #fff; color: var(--kzcmp-ink); }
}