/* ==========================================================
   Bucket Miles
   JAL LSP Simulator
   ========================================================== */


/* ==========================================================
   0. SWELLの本文幅制限を解除
   ========================================================== */

/*
 * JAL LSPツールが存在するページだけに適用します。
 *
 * 通常の記事やBest Cardには影響しません。
 */
body:has(.jal-lsp-tool) .l-content,
body:has(.jal-lsp-tool) .l-mainContent,
body:has(.jal-lsp-tool) .l-mainContent__inner,
body:has(.jal-lsp-tool) .post_content,
body:has(.jal-lsp-tool) #content,
body:has(.jal-lsp-tool) #main_content {
	width: 100% !important;
	max-width: none !important;

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


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


/* ==========================================================
   1. 全体
   ========================================================== */

.jal-lsp-tool,
.jal-lsp-tool *,
.jal-lsp-tool *::before,
.jal-lsp-tool *::after {
	box-sizing: border-box;
}


.jal-lsp-tool {
	width: min(1180px, 100%);

	margin: 40px auto 60px;

	color: #172033;
}


/* ==========================================================
   2. ページ上部：タイトルエリア
   ========================================================== */

.jal-lsp-tool__header {
	margin-bottom: 32px;
}


.jal-lsp-tool__eyebrow {
	margin: 0 0 10px;

	color: #d92b2b;

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

	letter-spacing: 0.16em;
}


.jal-lsp-tool__title {
	margin: 0 !important;
	padding: 0 !important;

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

	border: 0 !important;

	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 800;

	line-height: 1.4;

	box-shadow: none !important;
}


.jal-lsp-tool__title::before,
.jal-lsp-tool__title::after {
	display: none !important;
	content: none !important;
}


.jal-lsp-tool__lead {
	margin: 10px 0 0;

	color: #657084;

	font-size: 14px;

	line-height: 1.8;
}


/* ==========================================================
   3. メインエリア：2列グリッド
   ========================================================== */

.jal-lsp-tool__grid {
	display: grid;

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

	gap: 24px;

	align-items: start;
}


/* ==========================================================
   4. 左側：入力フォーム
   ========================================================== */

.jal-lsp-form {
	padding: 28px;

	background: #ffffff;

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

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


.jal-lsp-form__heading {
	display: flex;
	align-items: center;

	gap: 8px;

	margin: 0 0 22px;
	padding: 0 0 16px;

	color: #d92b2b;
	background: transparent;

	border: 0;
	border-bottom: 1px solid #eef0f3;

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

	box-shadow: none;
}


.jal-lsp-form__heading::before,
.jal-lsp-form__heading::after {
	display: none;
	content: none;
}


.jal-lsp-form__heading-icon {
	font-size: 16px;
}


/* ==========================================================
   5. 現在LSP入力
   ========================================================== */

.jal-lsp-current {
	margin-bottom: 22px;
	padding: 18px;

	background: #f8fafc;

	border: 1px solid #e6ebf1;
	border-radius: 12px;
}


.jal-lsp-field__label {
	display: block;

	margin-bottom: 10px;

	color: #313b4c;

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


.jal-lsp-number-input {
	display: flex;
	align-items: center;

	gap: 10px;
}


.jal-lsp-number-input input {
	width: 100%;
	height: 46px;

	padding: 0 14px;

	color: #283348;
	background: #ffffff;

	border: 1px solid #dce2e9;
	border-radius: 9px;

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


.jal-lsp-number-input span {
	flex-shrink: 0;

	color: #6e7785;

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


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

.jal-lsp-services {
	display: flex;
	flex-direction: column;

	gap: 9px;
}


.jal-lsp-service {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 12px;

	padding: 12px 14px;

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

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


.jal-lsp-service:hover {
	border-color: #f0b3b3;
	background: #fffafa;
}


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

.jal-lsp-check {
	display: flex;
	align-items: center;

	gap: 11px;

	margin: 0;

	cursor: pointer;
}


.jal-lsp-check input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
}


.jal-lsp-check__box {
	position: relative;

	flex-shrink: 0;

	width: 20px;
	height: 20px;

	background: #ffffff;

	border: 1px solid #ccd4de;
	border-radius: 6px;

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


.jal-lsp-check input:checked + .jal-lsp-check__box {
	background: #d92b2b;
	border-color: #d92b2b;
}


.jal-lsp-check input:checked + .jal-lsp-check__box::after {
	content: "✓";

	position: absolute;

	top: 50%;
	left: 50%;

	color: #ffffff;

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

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


.jal-lsp-check__text {
	color: #30394a;

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


/* ==========================================================
   8. サービスごとの数値入力
   ========================================================== */

.jal-lsp-service__input {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	flex-shrink: 0;

	gap: 6px;
}


.jal-lsp-service__input-label {
	color: #9299a4;

	font-size: 10px;

	white-space: nowrap;
}


.jal-lsp-service__input input {
	width: 90px;
	height: 36px;

	padding: 0 8px;

	background: #f9fafb;

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

	font: inherit;
	font-size: 12px;

	text-align: right;
}


.jal-lsp-service__input--wide input {
	width: 110px;
}


.jal-lsp-service__input span {
	color: #7c8592;

	font-size: 10px;

	white-space: nowrap;
}


/*
 * 固定ポイントのサービス（利用有無だけのもの）は
 * 数値の代わりに「◯◯LSP」というラベルだけ表示します。
 */
.jal-lsp-service__fixed-point {
	flex-shrink: 0;

	color: #9299a4;

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

	white-space: nowrap;
}


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

.jal-lsp-submit {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 10px;

	width: 100%;

	margin-top: 22px;
	padding: 15px 22px;

	color: #ffffff;

	background:
		linear-gradient(
			90deg,
			#e02f2f,
			#ff5a5a
		);

	border: 0;
	border-radius: 10px;

	cursor: pointer;

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

	box-shadow:
		0 8px 20px rgba(224, 47, 47, 0.22);

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


.jal-lsp-submit:hover {
	transform: translateY(-2px);

	box-shadow:
		0 12px 26px rgba(224, 47, 47, 0.3);
}


/* ==========================================================
   10. 右側：シミュレーション結果
   ========================================================== */

.jal-lsp-result {
	padding: 26px;

	background:
		linear-gradient(
			160deg,
			#fff5f5 0%,
			#ffffff 55%
		);

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

	box-shadow:
		0 10px 30px rgba(217, 43, 43, 0.08);
}


.jal-lsp-result__heading {
	display: flex;
	align-items: center;

	gap: 8px;

	margin: 0 0 20px;

	color: #b81f1f;

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


/* ==========================================================
   11. メインの数字（年間予想LSP）
   ========================================================== */

.jal-lsp-result__main {
	padding: 20px;

	background: #ffffff;

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


.jal-lsp-result__main-label {
	display: block;

	color: #9a3a3a;

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


.jal-lsp-result__main-value {
	display: block;

	margin-top: 6px;

	color: #d92b2b;

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

	line-height: 1.2;
}


.jal-lsp-result__main-value small {
	margin-left: 4px;

	color: #d92b2b;

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


/* ==========================================================
   12. 現在LSP／JGCまで
   ========================================================== */

.jal-lsp-result__stats {
	display: grid;

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

	gap: 10px;

	margin-top: 14px;
}


.jal-lsp-result__stat {
	padding: 14px;

	background: #ffffff;

	border: 1px solid #f0dede;
	border-radius: 12px;

	text-align: center;
}


.jal-lsp-result__stat span {
	display: block;

	color: #8a8f99;

	font-size: 10px;
}


.jal-lsp-result__stat strong {
	display: block;

	margin-top: 6px;

	color: #283348;

	font-size: 18px;
}


/* ==========================================================
   13. 到達見込み
   ========================================================== */

.jal-lsp-result__forecast {
	margin-top: 14px;
	padding: 14px 16px;

	color: #7a3300;
	background: #fff4e5;

	border: 1px solid #f6dcae;
	border-radius: 12px;

	font-size: 12px;

	line-height: 1.7;
	text-align: center;
}


.jal-lsp-result__forecast strong {
	color: #d98b00;

	font-size: 14px;
}


/* ==========================================================
   14. おすすめの追加施策
   ========================================================== */

.jal-lsp-result__tips {
	margin-top: 18px;
}


.jal-lsp-result__tips-heading {
	margin: 0 0 10px;

	color: #30394a;

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


.jal-lsp-result__tips-list {
	display: flex;
	flex-direction: column;

	gap: 8px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.jal-lsp-result__tips-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 10px;

	padding: 10px 12px;

	background: #ffffff;

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

	font-size: 11px;
}


.jal-lsp-result__tips-list li span {
	color: #626c7b;
}


.jal-lsp-result__tips-list li strong {
	flex-shrink: 0;

	color: #d92b2b;

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


/* ==========================================================
   15. 注記
   ========================================================== */

.jal-lsp-result__note {
	margin: 16px 0 0;

	color: #9399a2;

	font-size: 9px;

	line-height: 1.6;
	text-align: center;
}


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

@media (max-width: 960px) {

	.jal-lsp-tool__grid {
		grid-template-columns: 1fr;
	}

}


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

@media (max-width: 640px) {

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


	.jal-lsp-tool {
		margin-top: 20px;
	}


	.jal-lsp-form,
	.jal-lsp-result {
		padding: 18px;
	}


	.jal-lsp-service {
		flex-wrap: wrap;
	}


	.jal-lsp-result__main-value {
		font-size: 32px;
	}


	.jal-lsp-result__stats {
		grid-template-columns: 1fr;
	}

}