/* ==========================================================
   Bucket Miles
   Best Trip
   ========================================================== */


/* ==========================================================
   0. SWELL固定ページの本文幅を解除
   ========================================================== */

body:has(.best-trip-tool) .l-content,
body:has(.best-trip-tool) .l-mainContent,
body:has(.best-trip-tool) .l-mainContent__inner,
body:has(.best-trip-tool) .post_content,
body:has(.best-trip-tool) #content,
body:has(.best-trip-tool) #main_content {
	width: 100% !important;
	max-width: none !important;

	margin-left: 0 !important;
	margin-right: 0 !important;
}


body:has(.best-trip-tool) .post_content {
	padding-left: 24px !important;
	padding-right: 24px !important;
}


/* ==========================================================
   1. ツール全体
   ========================================================== */

.best-trip-tool,
.best-trip-tool *,
.best-trip-tool *::before,
.best-trip-tool *::after {
	box-sizing: border-box;
}


.best-trip-tool {
	display: grid;

	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(0, 1.1fr);

	width: min(1180px, 100%);

	margin: 40px auto 70px;

	color: #172033;

	background: #ffffff;

	border: 1px solid #e6ebf1;
	border-radius: 24px;

	box-shadow:
		0 18px 50px rgba(28, 49, 86, 0.08);

	overflow: hidden;
}


/* ==========================================================
   2. 左側：条件入力
   ========================================================== */

.best-trip-tool__search {
	padding: 52px 46px;

	background:
		linear-gradient(
			145deg,
			#f2fbf8 0%,
			#eaf7f3 100%
		);
}


.best-trip-tool__eyebrow {
	margin: 0 0 10px;

	color: #168069;

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.15em;
}


.best-trip-tool__title {
	margin: 0 !important;
	padding: 0 !important;

	color: #173e37 !important;
	background: transparent !important;

	border: 0 !important;

	font-size: clamp(34px, 3.5vw, 50px);
	font-weight: 800;

	line-height: 1.22;

	box-shadow: none !important;
}


.best-trip-tool__title::before,
.best-trip-tool__title::after {
	display: none !important;
	content: none !important;
}


.best-trip-tool__lead {
	margin: 20px 0 34px;

	color: #60746f;

	font-size: 14px;

	line-height: 1.85;
}


/* ==========================================================
   3. 質問
   ========================================================== */

.best-trip-question {
	margin: 0 0 26px;

	padding: 0;

	border: 0;
}


.best-trip-question__title {
	display: block;

	width: 100%;

	margin-bottom: 11px;

	color: #263f3a;

	font-size: 13px;
	font-weight: 700;
}


.best-trip-question__hint {
	margin: -6px 0 10px;

	color: #889a96;

	font-size: 9px;
}


/* ==========================================================
   4. ラジオ選択肢
   ========================================================== */

.best-trip-options {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 9px;
}


.best-trip-option {
	position: relative;

	display: block;

	cursor: pointer;
}


.best-trip-option input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
}


.best-trip-option__content {
	display: flex;
	align-items: center;

	min-height: 48px;

	padding: 11px 13px;

	color: #546761;

	background: rgba(255, 255, 255, 0.9);

	border: 1px solid #cfe2dc;
	border-radius: 10px;

	font-size: 11px;

	transition:
		border-color 0.2s,
		background-color 0.2s,
		color 0.2s,
		transform 0.2s;
}


.best-trip-option:hover .best-trip-option__content {
	transform: translateY(-1px);

	border-color: #5ca894;
}


.best-trip-option input:checked + .best-trip-option__content {
	color: #10624f;

	background: #dcf3eb;

	border-color: #168069;

	box-shadow:
		0 0 0 2px rgba(22, 128, 105, 0.1);
}


/* ==========================================================
   5. テーマタグ
   ========================================================== */

.best-trip-tags {
	display: flex;
	flex-wrap: wrap;

	gap: 8px;
}


.best-trip-tag {
	position: relative;

	cursor: pointer;
}


.best-trip-tag input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
}


.best-trip-tag span {
	display: inline-flex;
	align-items: center;

	min-height: 38px;

	padding: 7px 13px;

	color: #596c67;

	background: rgba(255, 255, 255, 0.9);

	border: 1px solid #cfe2dc;
	border-radius: 999px;

	font-size: 10px;

	transition:
		background-color 0.2s,
		border-color 0.2s,
		color 0.2s;
}


.best-trip-tag input:checked + span {
	color: #0e624f;

	background: #d9f2e9;

	border-color: #168069;
}


/* ==========================================================
   6. 診断ボタン
   ========================================================== */

.best-trip-submit {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 12px;

	width: 100%;

	padding: 16px 20px;

	color: #ffffff;

	background:
		linear-gradient(
			90deg,
			#137763,
			#209b80
		);

	border: 0;
	border-radius: 10px;

	cursor: pointer;

	font: inherit;
	font-size: 13px;
	font-weight: 700;

	box-shadow:
		0 8px 20px rgba(24, 128, 105, 0.22);

	transition:
		transform 0.2s,
		box-shadow 0.2s;
}


.best-trip-submit:hover {
	transform: translateY(-2px);

	box-shadow:
		0 12px 26px rgba(24, 128, 105, 0.3);
}


.best-trip-tool__note {
	margin: 13px 0 0;

	color: #899894;

	font-size: 8px;

	text-align: center;
}


/* ==========================================================
   7. 右側
   ========================================================== */

.best-trip-tool__results {
	padding: 42px;

	background: #ffffff;
}


/* ==========================================================
   8. 結果ヘッダー
   ========================================================== */

.best-trip-result-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 20px;

	margin-bottom: 20px;
}


.best-trip-result-header__eyebrow {
	margin: 0 0 4px;

	color: #168069;

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.14em;
}


.best-trip-result-header__title {
	margin: 0 !important;
	padding: 0 !important;

	color: #243831 !important;
	background: transparent !important;

	border: 0 !important;

	font-size: 22px;
	font-weight: 700;

	box-shadow: none !important;
}


.best-trip-result-header__title::before,
.best-trip-result-header__title::after {
	display: none !important;
	content: none !important;
}


.best-trip-result-header__badge {
	padding: 5px 9px;

	color: #168069;
	background: #e5f5ef;

	border-radius: 999px;

	font-size: 8px;
	font-weight: 700;
}


/* ==========================================================
   9. ランキング
   ========================================================== */

.best-trip-ranking {
	display: grid;

	gap: 9px;

	margin-bottom: 22px;
}


.best-trip-rank {
	display: flex;
	align-items: center;

	gap: 13px;

	padding: 13px 15px;

	background: #ffffff;

	border: 1px solid #e1e7e5;
	border-radius: 11px;
}


.best-trip-rank--first {
	background: #f4fbf8;

	border-color: #96cdbf;
}


.best-trip-rank__number {
	display: grid;
	place-items: center;

	flex-shrink: 0;

	width: 34px;
	height: 34px;

	color: #168069;
	background: #e2f3ed;

	border-radius: 50%;

	font-size: 12px;
	font-weight: 800;
}


.best-trip-rank--first .best-trip-rank__number {
	color: #ffffff;
	background: #168069;
}


.best-trip-rank__content {
	width: 100%;
}


.best-trip-rank__top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 10px;
}


.best-trip-rank__country {
	margin: 0;

	color: #94a09c;

	font-size: 7px;
	font-weight: 700;

	letter-spacing: 0.12em;
}


.best-trip-rank h4 {
	margin: 1px 0 0;

	color: #263a34;

	font-size: 15px;
}


.best-trip-rank__score {
	color: #168069;

	font-size: 17px;
}


.best-trip-rank__description {
	margin: 5px 0 0;

	color: #778580;

	font-size: 9px;
}


/* ==========================================================
   10. 旅行先詳細
   ========================================================== */

.best-trip-detail {
	padding: 24px;

	background: #f8faf9;

	border: 1px solid #e0e8e5;
	border-radius: 15px;
}


.best-trip-detail__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 15px;

	padding-bottom: 17px;

	border-bottom: 1px solid #e0e7e4;
}


.best-trip-detail__label {
	margin: 0;

	color: #168069;

	font-size: 8px;
	font-weight: 700;

	letter-spacing: 0.12em;
}


.best-trip-detail__title {
	margin: 1px 0 0 !important;
	padding: 0 !important;

	color: #253d36 !important;
	background: transparent !important;

	border: 0 !important;

	font-size: 27px;

	box-shadow: none !important;
}


.best-trip-detail__title::before,
.best-trip-detail__title::after {
	display: none !important;
	content: none !important;
}


.best-trip-detail__flag {
	font-size: 31px;
}


/* ==========================================================
   11. 評価
   ========================================================== */

.best-trip-ratings {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 7px 16px;

	margin-top: 18px;
}


.best-trip-rating {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 10px;

	padding-bottom: 7px;

	border-bottom: 1px dashed #e0e6e4;
}


.best-trip-rating span {
	color: #65756f;

	font-size: 9px;
}


.best-trip-rating strong {
	color: #e6a018;

	font-size: 10px;

	letter-spacing: 0.03em;
}


/* ==========================================================
   12. 必要マイル
   ========================================================== */

.best-trip-mile {
	margin-top: 22px;
	padding-top: 20px;

	border-top: 1px solid #e0e7e4;
}


.best-trip-mile__heading {
	margin: 0 0 13px;

	color: #30443e;

	font-size: 12px;
	font-weight: 700;
}


.best-trip-mile__airline {
	margin-bottom: 12px;
	padding: 14px;

	background: #ffffff;

	border: 1px solid #e0e6e4;
	border-radius: 10px;
}


.best-trip-mile__airline-title {
	display: flex;
	align-items: center;

	gap: 9px;

	margin-bottom: 11px;
}


.best-trip-mile__airline-name {
	color: #1a334e;

	font-size: 12px;
	font-weight: 800;
}


.best-trip-mile__airline-title small {
	color: #8c9793;

	font-size: 8px;
}


.best-trip-mile__classes {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 8px;
}


.best-trip-mile__classes div {
	padding: 9px 8px;

	background: #f8faf9;

	border-radius: 8px;

	text-align: center;
}


.best-trip-mile__classes span {
	display: block;

	color: #89948f;

	font-size: 7px;
}


.best-trip-mile__classes strong {
	display: block;

	margin-top: 2px;

	color: #283c36;

	font-size: 11px;
}


.best-trip-mile__note {
	margin: 9px 0 0;

	color: #969f9c;

	font-size: 7px;

	line-height: 1.5;
}


/* ==========================================================
   13. 詳細リンク
   ========================================================== */

.best-trip-detail__link {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 10px;

	width: 100%;

	margin-top: 18px;
	padding: 12px;

	color: #ffffff !important;

	background: #173e37;

	border-radius: 9px;

	font-size: 10px;
	font-weight: 700;

	text-decoration: none !important;

	transition:
		background-color 0.2s,
		transform 0.2s;
}


.best-trip-detail__link:hover {
	color: #ffffff !important;

	background: #22594e;

	transform: translateY(-1px);
}


/* ==========================================================
   14. タブレット
   ========================================================== */

@media (max-width: 960px) {

	.best-trip-tool {
		grid-template-columns: 1fr;
	}


	.best-trip-tool__search,
	.best-trip-tool__results {
		padding: 40px;
	}

}


/* ==========================================================
   15. スマートフォン
   ========================================================== */

@media (max-width: 640px) {

	body:has(.best-trip-tool) .post_content {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}


	.best-trip-tool {
		margin-top: 20px;

		border-radius: 16px;
	}


	.best-trip-tool__search,
	.best-trip-tool__results {
		padding: 26px 18px;
	}


	.best-trip-tool__title {
		font-size: 31px;
	}


	.best-trip-options {
		grid-template-columns: 1fr;
	}


	.best-trip-ratings {
		grid-template-columns: 1fr;
	}


	.best-trip-mile__classes {
		grid-template-columns: 1fr;
	}

}