/* ==========================================================
   0. SWELL固定ページのレイアウト調整
   ========================================================== */

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

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

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


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

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

.best-card-tool {
	display: grid;

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

	width: min(1180px, 100%);
	max-width: 1180px;

	margin: 40px auto 70px;

	color: #172033;

	background: #ffffff;

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

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

	overflow: hidden;
}


/*
 * ツール本体。
 *
 * SWELL全体に影響しないよう、
 * .best-card-tool 配下だけをデザインする。
 */
.best-card-tool {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

	width: 100%;
	max-width: 1180px;

	margin: 40px auto 70px;

	color: #172033;

	background: #ffffff;

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

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

	overflow: hidden;
}


/* ==========================================================
   2. 左側：紹介エリア
   ========================================================== */

.best-card-tool__intro {
	padding: 58px 54px;

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


/*
 * 小さな英字ラベル
 */
.best-card-tool__eyebrow {
	margin: 0 0 12px;

	color: #e69900;

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

	letter-spacing: 0.16em;
}


/*
 * メインタイトル
 */
/*
 * メインタイトル
 *
 * SWELL標準のh2装飾を打ち消して、
 * Best Card専用デザインにします。
 */
.best-card-tool__title {
	margin: 0 !important;
	padding: 0 !important;

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

	border: 0 !important;
	border-left: 0 !important;
	border-bottom: 0 !important;

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

	line-height: 1.3;

	letter-spacing: 0.01em;

	box-shadow: none !important;
}


/*
 * SWELLがh2に付ける疑似要素も消します。
 */
.best-card-tool__title::before,
.best-card-tool__title::after {
	display: none !important;
	content: none !important;
}


/*
 * タイトル2行目。
 */
.best-card-tool__title span {
	color: #112b52 !important;
	background: transparent !important;
}


/*
 * タイトル内の強調部分
 */
.best-card-tool__title span {
	color: #112b52;
}


/*
 * ツール説明文
 */
.best-card-tool__lead {
	max-width: 520px;

	margin: 24px 0 0;

	color: #657084;

	font-size: 15px;

	line-height: 1.9;
}


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

.best-card-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	gap: 12px;

	margin-top: 38px;
}


.best-card-feature {
	display: flex;
	align-items: center;

	gap: 10px;

	padding: 14px;

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

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


.best-card-feature__icon {
	display: grid;
	place-items: center;

	flex-shrink: 0;

	width: 38px;
	height: 38px;

	color: #ffffff;

	background: #f0a000;

	border-radius: 50%;

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


.best-card-feature__title {
	margin: 0;

	color: #283348;

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


.best-card-feature__text {
	margin: 2px 0 0;

	color: #858d99;

	font-size: 10px;

	line-height: 1.5;
}


/* ==========================================================
   4. 診断の流れ
   ========================================================== */

.best-card-flow {
	margin-top: 46px;

	padding-top: 28px;

	border-top: 1px solid #efdcae;
}


.best-card-flow__heading {
	margin: 0 0 24px;

	color: #2c3444;

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


.best-card-flow__items {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 10px;
}


.best-card-flow__item {
	flex: 1;

	text-align: center;
}


.best-card-flow__number {
	display: grid;
	place-items: center;

	width: 42px;
	height: 42px;

	margin: 0 auto 9px;

	color: #ffffff;

	background: #f0a000;

	border-radius: 50%;

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


.best-card-flow__title {
	margin: 0;

	color: #343c4b;

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


.best-card-flow__text {
	margin: 4px 0 0;

	color: #89909b;

	font-size: 10px;

	line-height: 1.5;
}


.best-card-flow__arrow {
	color: #dca127;

	font-size: 20px;
}


/* ==========================================================
   5. 右側：フォームエリア
   ========================================================== */

.best-card-tool__form-area {
	padding: 42px;

	background: #ffffff;
}


.best-card-form {
	padding: 30px;

	background: #ffffff;

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

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


/* ==========================================================
   6. フォーム上部
   ========================================================== */

.best-card-form__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 20px;

	margin-bottom: 22px;
}


.best-card-form__label {
	margin: 0 0 3px;

	color: #e69700;

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

	letter-spacing: 0.08em;
}


.best-card-form__title {
	margin: 0;

	color: #222b3b;

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


.best-card-form__time {
	flex-shrink: 0;

	padding: 5px 10px;

	color: #697180;

	background: #f3f5f7;

	border-radius: 999px;

	font-size: 10px;
}


/* ==========================================================
   7. 進捗バー
   ========================================================== */

.best-card-progress {
	display: flex;
	align-items: center;

	gap: 12px;

	margin-bottom: 30px;
}


.best-card-progress__track {
	flex: 1;

	height: 7px;

	background: #edf0f3;

	border-radius: 999px;

	overflow: hidden;
}


/*
 * 初期状態は6問中1問目なので、
 * 約16.7%を表示。
 *
 * 後からJavaScriptで変更する。
 */
.best-card-progress__bar {
	width: 16.7%;
	height: 100%;

	background:
		linear-gradient(
			90deg,
			#ed9c00,
			#ffba2f
		);

	border-radius: inherit;

	transition: width 0.3s ease;
}


.best-card-progress__text {
	margin: 0;

	color: #7c8490;

	font-size: 11px;
}


/* ==========================================================
   8. 質問
   ========================================================== */

.best-card-question {
	margin: 0 0 28px;

	padding: 0;

	border: 0;
}


.best-card-question__title {
	display: block;

	width: 100%;

	margin-bottom: 12px;

	color: #30394a;

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


/* ==========================================================
   9. 選択肢
   ========================================================== */

.best-card-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 9px;
}


/*
 * label全体をクリック可能にする。
 */
.best-card-option {
	position: relative;

	display: block;

	margin: 0;

	cursor: pointer;
}


/*
 * 標準のラジオボタンは画面上では隠す。
 *
 * display:none にしない理由は、
 * キーボード操作などのアクセシビリティを残すため。
 */
.best-card-option input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;

	pointer-events: none;
}


/*
 * ユーザーが実際に見る選択肢。
 */
.best-card-option__content {
	display: flex;
	align-items: center;

	min-height: 52px;

	padding: 12px 14px;

	color: #4f596b;

	background: #ffffff;

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

	font-size: 12px;

	line-height: 1.5;

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


/*
 * マウスを乗せたとき。
 */
.best-card-option:hover .best-card-option__content {
	transform: translateY(-1px);

	border-color: #edae36;

	box-shadow:
		0 5px 15px rgba(36, 52, 79, 0.06);
}


/*
 * ラジオボタンが選択されたとき。
 *
 * :checked
 *   → inputが選択されている状態
 *
 * +
 *   → 直後の兄弟要素を指定
 *
 * つまり、
 * 「選択されたinputの直後にあるspan」
 * のデザインを変更している。
 */
.best-card-option input:checked + .best-card-option__content {
	color: #875600;

	background: #fff7e6;

	border-color: #eca713;

	box-shadow:
		0 0 0 2px rgba(236, 167, 19, 0.12);
}


/*
 * キーボード操作時に、
 * 今どこを選んでいるか分かるようにする。
 */
.best-card-option input:focus-visible + .best-card-option__content {
	outline: 2px solid #d99500;
	outline-offset: 2px;
}


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

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

	gap: 12px;

	width: 100%;

	margin-top: 4px;

	padding: 16px 22px;

	color: #ffffff;

	background:
		linear-gradient(
			90deg,
			#ed9800,
			#ffae00
		);

	border: 0;
	border-radius: 10px;

	cursor: pointer;

	font: inherit;

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

	box-shadow:
		0 8px 20px rgba(238, 155, 0, 0.2);

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


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

	box-shadow:
		0 12px 26px rgba(238, 155, 0, 0.27);
}


.best-card-submit span {
	font-size: 19px;
}


/* ==========================================================
   11. 注意書き
   ========================================================== */

.best-card-form__note {
	margin: 16px 0 0;

	color: #8a919c;

	font-size: 9px;

	line-height: 1.6;

	text-align: center;
}


/* ==========================================================
   12. 診断結果
   ========================================================== */

.best-card-result {
	max-width: 1180px;

	margin: 0 auto 70px;

	padding: 60px 40px;

	background: #f7f9fc;

	border-radius: 20px;

	text-align: center;
}


.best-card-result__eyebrow {
	margin: 0 0 7px;

	color: #e39400;

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

	letter-spacing: 0.15em;
}


.best-card-result__title {
	margin: 0;

	color: #202a3c;

	font-size: 30px;
}


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

@media (max-width: 960px) {

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


	.best-card-tool__intro {
		padding: 46px;
	}


	.best-card-tool__form-area {
		padding: 40px;
	}

}


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

@media (max-width: 640px) {

	.best-card-tool {
		margin: 20px auto 50px;

		border-radius: 16px;
	}


	.best-card-tool__intro,
	.best-card-tool__form-area {
		padding: 26px 18px;
	}


	.best-card-tool__title {
		font-size: 29px;
	}


	.best-card-tool__lead {
		font-size: 14px;
	}


	.best-card-features {
		grid-template-columns: 1fr;
	}


	.best-card-flow__items {
		flex-direction: column;

		align-items: stretch;
	}


	.best-card-flow__arrow {
		transform: rotate(90deg);

		text-align: center;
	}


	.best-card-form {
		padding: 22px 17px;
	}


	.best-card-form__header {
		flex-direction: column;

		gap: 10px;
	}


	/*
	 * PCでは2列、
	 * スマホでは1列に変更。
	 */
	.best-card-options {
		grid-template-columns: 1fr;
	}


	.best-card-result {
		margin-bottom: 50px;

		padding: 44px 20px;
	}

}