/* ==========================================================
   Bucket Miles
   ANA Mile Simulator
   ========================================================== */


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

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

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


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


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

.ana-mile-tool,
.ana-mile-tool *,
.ana-mile-tool *::before,
.ana-mile-tool *::after {
	box-sizing: border-box;
}


.ana-mile-tool {
	display: grid;

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

	width: min(1180px, 100%);

	margin: 40px auto 50px;

	color: #172033;

	background: #ffffff;

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

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

	overflow: hidden;
}


/* ==========================================================
   2. 左側
   ========================================================== */

.ana-mile-tool__intro {
	padding: 58px 54px;

	background:
		linear-gradient(
			135deg,
			#f6faff 0%,
			#edf6ff 100%
		);
}


.ana-mile-tool__eyebrow {
	margin: 0 0 12px;

	color: #1471c9;

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

	letter-spacing: 0.16em;
}


.ana-mile-tool__title {
	margin: 0 !important;
	padding: 0 !important;

	color: #122b50 !important;
	background: transparent !important;

	border: 0 !important;

	font-size: clamp(32px, 3.3vw, 48px);
	font-weight: 800;

	line-height: 1.25;

	box-shadow: none !important;
}


.ana-mile-tool__title::before,
.ana-mile-tool__title::after {
	display: none !important;
	content: none !important;
}


.ana-mile-tool__lead {
	max-width: 500px;

	margin: 24px 0 0;

	color: #627186;

	font-size: 15px;

	line-height: 1.9;
}


/* ==========================================================
   3. 特徴カード
   ========================================================== */

.ana-mile-features {
	display: grid;

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

	gap: 12px;

	margin-top: 38px;
}


.ana-mile-feature {
	display: flex;
	align-items: center;

	gap: 10px;

	padding: 14px;

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

	border: 1px solid #cfe2f6;
	border-radius: 14px;
}


.ana-mile-feature__icon {
	display: grid;
	place-items: center;

	flex-shrink: 0;

	width: 38px;
	height: 38px;

	color: #ffffff;
	background: #1471c9;

	border-radius: 50%;

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


.ana-mile-feature__title {
	margin: 0;

	color: #263750;

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


.ana-mile-feature__text {
	margin: 2px 0 0;

	color: #8290a2;

	font-size: 10px;

	line-height: 1.5;
}


/* ==========================================================
   4. ガイド
   ========================================================== */

.ana-mile-guide {
	margin-top: 46px;
	padding-top: 28px;

	border-top: 1px solid #cbdff2;
}


.ana-mile-guide__heading {
	margin: 0 0 18px;

	color: #25364e;

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


.ana-mile-guide__list {
	display: grid;

	gap: 10px;
}


.ana-mile-guide__item {
	display: flex;
	align-items: center;

	gap: 13px;

	padding: 13px 15px;

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

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


.ana-mile-guide__item span {
	display: grid;
	place-items: center;

	flex-shrink: 0;

	width: 32px;
	height: 32px;

	color: #1471c9;
	background: #eaf4fd;

	border-radius: 50%;

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


.ana-mile-guide__item p {
	margin: 0;

	color: #5e6c80;

	font-size: 11px;

	line-height: 1.6;
}


.ana-mile-guide__note {
	margin: 12px 0 0;

	color: #8c98a7;

	font-size: 9px;
}


/* ==========================================================
   5. 右側
   ========================================================== */

.ana-mile-tool__simulator-area {
	padding: 42px;

	background: #ffffff;
}


.ana-mile-simulator {
	padding: 30px;

	border: 1px solid #e3e9f0;
	border-radius: 18px;

	box-shadow:
		0 10px 30px rgba(25, 43, 74, 0.055);
}


/* ==========================================================
   6. シミュレーターヘッダー
   ========================================================== */

.ana-mile-simulator__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 20px;

	margin-bottom: 10px;
}


.ana-mile-simulator__label {
	margin: 0 0 4px;

	color: #1471c9;

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

	letter-spacing: 0.08em;
}


.ana-mile-simulator__title {
	margin: 0 !important;
	padding: 0 0 12px !important;

	color: #202e43 !important;
	background: transparent !important;

	border: 0 !important;
	border-bottom: 1px solid #dfe6ed !important;

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

	box-shadow: none !important;
}


.ana-mile-simulator__title::before,
.ana-mile-simulator__title::after {
	display: none !important;
	content: none !important;
}


.ana-mile-simulator__time {
	flex-shrink: 0;

	padding: 5px 10px;

	color: #697180;
	background: #f3f5f7;

	border-radius: 999px;

	font-size: 10px;
}


.ana-mile-simulator__description {
	margin: 13px 0 20px;

	color: #88919d;

	font-size: 10px;

	line-height: 1.6;
}


/* ==========================================================
   7. サービス一覧
   ========================================================== */

.ana-mile-services {
	display: grid;

	gap: 9px;
}


.ana-mile-service {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		120px
		90px;

	align-items: center;

	gap: 10px;

	padding: 11px 12px;

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

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


.ana-mile-service:hover {
	border-color: #8ebce8;
	background: #f9fcff;
}


/*
 * 数値入力を必要としないサービス用
 */
.ana-mile-service--simple {
	grid-template-columns:
		minmax(0, 1fr)
		90px;
}


/* ==========================================================
   8. チェックボックス
   ========================================================== */

.ana-mile-check {
	display: flex;
	align-items: center;

	gap: 10px;

	margin: 0;

	cursor: pointer;
}


.ana-mile-check input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
}


.ana-mile-check__box {
	position: relative;

	flex-shrink: 0;

	width: 21px;
	height: 21px;

	background: #ffffff;

	border: 1px solid #ccd6e1;
	border-radius: 6px;
}


.ana-mile-check input:checked + .ana-mile-check__box {
	background: #1471c9;
	border-color: #1471c9;
}


.ana-mile-check input:checked + .ana-mile-check__box::after {
	content: "✓";

	position: absolute;

	top: 50%;
	left: 50%;

	color: #ffffff;

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

	transform: translate(-50%, -50%);
}


.ana-mile-check__text {
	display: flex;
	flex-direction: column;

	gap: 2px;
}


.ana-mile-check__text strong {
	color: #29384d;

	font-size: 11px;
}


.ana-mile-check__text small {
	color: #929ba8;

	font-size: 8px;
}


/* ==========================================================
   9. 数値入力
   ========================================================== */

.ana-mile-service__input {
	display: flex;
	align-items: center;

	gap: 5px;
}


.ana-mile-service__input input {
	width: 67px;
	height: 37px;

	padding: 0 7px;

	background: #f9fafc;

	border: 1px solid #dce3ea;
	border-radius: 7px;

	font: inherit;
	font-size: 10px;
}


.ana-mile-service__input span {
	color: #7f8996;

	font-size: 8px;

	white-space: nowrap;
}


/* ==========================================================
   10. 獲得マイル表示
   ========================================================== */

.ana-mile-service__sample {
	text-align: right;
}


.ana-mile-service__sample span,
.ana-mile-service__sample small {
	display: block;

	color: #929aa5;

	font-size: 7px;
}


.ana-mile-service__sample strong {
	display: block;

	color: #1471c9;

	font-size: 13px;
}


/* ==========================================================
   11. 計算ボタン
   ========================================================== */

.ana-mile-submit {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 12px;

	width: 100%;

	margin-top: 24px;
	padding: 16px 22px;

	color: #ffffff;

	background:
		linear-gradient(
			90deg,
			#0872d4,
			#1686eb
		);

	border: 0;
	border-radius: 10px;

	cursor: pointer;

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

	box-shadow:
		0 8px 20px rgba(20, 113, 201, 0.22);

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


.ana-mile-submit:hover {
	transform: translateY(-2px);

	box-shadow:
		0 12px 26px rgba(20, 113, 201, 0.3);
}


.ana-mile-simulator__note {
	margin: 14px 0 0;

	color: #9299a4;

	font-size: 9px;

	text-align: center;
}


/* ==========================================================
   12. 結果エリア
   ========================================================== */

.ana-mile-result {
	width: min(1180px, calc(100% - 48px));

	margin: 0 auto 70px;
	padding: 44px;

	background:
		linear-gradient(
			135deg,
			#f6faff,
			#eef6fd
		);

	border-radius: 20px;
}


.ana-mile-result__heading {
	text-align: center;
}


.ana-mile-result__eyebrow {
	margin: 0 0 6px;

	color: #1471c9;

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

	letter-spacing: 0.15em;
}


.ana-mile-result__title {
	margin: 0 !important;
	padding: 0 !important;

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

	border: 0 !important;

	font-size: 28px;

	text-align: center;

	box-shadow: none !important;
}


.ana-mile-result__title::before,
.ana-mile-result__title::after {
	display: none !important;
	content: none !important;
}


/* ==========================================================
   13. 結果本体
   ========================================================== */

.ana-mile-result__main {
	display: grid;

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

	gap: 18px;

	max-width: 850px;

	margin: 30px auto 0;
}


.ana-mile-total,
.ana-mile-breakdown {
	padding: 28px;

	background: #ffffff;

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


.ana-mile-total {
	text-align: center;
}


.ana-mile-total > p {
	margin: 0;

	color: #6f7c8c;

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


.ana-mile-total > strong {
	display: block;

	margin: 10px 0 0;

	color: #0872d4;

	font-size: 44px;
	font-weight: 800;

	line-height: 1.1;
}


.ana-mile-total > span {
	display: block;

	margin-top: 5px;

	color: #667486;

	font-size: 11px;
}


.ana-mile-total__increase {
	margin-top: 22px;
	padding-top: 17px;

	border-top: 1px solid #e4ebf2;
}


.ana-mile-total__increase small {
	display: block;

	color: #8b95a2;

	font-size: 9px;
}


.ana-mile-total__increase b {
	display: block;

	margin-top: 4px;

	color: #1471c9;

	font-size: 16px;
}


/* ==========================================================
   14. 内訳
   ========================================================== */

.ana-mile-breakdown__heading {
	margin: 0 0 12px;

	color: #344257;

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


.ana-mile-breakdown__row {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 9px 0;

	border-bottom: 1px solid #edf1f5;
}


.ana-mile-breakdown__row:last-child {
	border-bottom: 0;
}


.ana-mile-breakdown__row span {
	color: #667486;

	font-size: 10px;
}


.ana-mile-breakdown__row strong {
	color: #1c2c43;

	font-size: 11px;
}


/* ==========================================================
   15. アドバイス
   ========================================================== */

.ana-mile-advice {
	display: flex;
	align-items: center;

	gap: 14px;

	max-width: 850px;

	margin: 18px auto 0;
	padding: 18px 20px;

	background: #ffffff;

	border: 1px solid #d8e6f3;
	border-radius: 13px;
}


.ana-mile-advice__icon {
	display: grid;
	place-items: center;

	flex-shrink: 0;

	width: 40px;
	height: 40px;

	background: #eaf4fd;

	border-radius: 50%;
}


.ana-mile-advice__label {
	margin: 0;

	color: #1471c9;

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


.ana-mile-advice__text {
	margin: 2px 0 0;

	color: #687689;

	font-size: 10px;

	line-height: 1.6;
}


.ana-mile-result__sample {
	margin: 16px 0 0;

	color: #979fa9;

	font-size: 9px;

	text-align: center;
}


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

@media (max-width: 960px) {

	.ana-mile-tool {
		grid-template-columns: 1fr;
	}


	.ana-mile-tool__intro {
		padding: 46px;
	}


	.ana-mile-tool__simulator-area {
		padding: 40px;
	}

}


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

@media (max-width: 640px) {

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


	.ana-mile-tool {
		margin-top: 20px;

		border-radius: 16px;
	}


	.ana-mile-tool__intro,
	.ana-mile-tool__simulator-area {
		padding: 26px 18px;
	}


	.ana-mile-tool__title {
		font-size: 30px;
	}


	.ana-mile-features {
		grid-template-columns: 1fr;
	}


	.ana-mile-simulator {
		padding: 22px 17px;
	}


	.ana-mile-simulator__header {
		flex-direction: column;

		gap: 10px;
	}


	.ana-mile-service,
	.ana-mile-service--simple {
		grid-template-columns: 1fr;
	}


	.ana-mile-service__input {
		padding-left: 31px;
	}


	.ana-mile-service__sample {
		padding-left: 31px;

		text-align: left;
	}


	.ana-mile-result {
		width: calc(100% - 24px);

		padding: 35px 18px;
	}


	.ana-mile-result__main {
		grid-template-columns: 1fr;
	}

}