/* ==========================================================================
 * Simulation Widget
 * ========================================================================== */
.simulation {
	background: url("../images/pc/simulation_bg.jpg") no-repeat center center / cover;
    padding: 280px 0 130px;
	text-align: center;
}
.simulation .contents__subttl::after {
	background-color: #fff;
}
.simulation__ttl {
	margin: 50px 0 60px;
}

.sim-widget {
	background: rgba(255, 255, 255, 0.96);
	border-radius: 20px;
	padding: 40px 35px;
	max-width: 755px;
	margin: 0 auto;
	text-align: left;
	box-shadow: 0 8px 32px rgba(0, 120, 180, 0.15);
}

/* --- Slider Groups --- */
.sim-inputs {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.sim-input-label {
	font-size: 2.5rem;
	font-weight: 500;
	color: #333;
	margin-bottom: 25px;
	letter-spacing: .04em;
	text-align: center;
}

.sim-input-label .sim-val {
    font-size: 2.5rem;
    font-weight: bold;
    color: #0098dd;
    display: inline-block;
    min-width: 3em;
    text-align: right;

    /* 追加 */
    background-color: #f0f0f0;
    border: none;
    border-radius: 6px;
    padding: 2px 8px;
    outline: none;
    cursor: text;
    font-family: inherit;
    -moz-appearance: textfield;
	width: 3em;
}

/* スピンボタン非表示（Chrome/Safari） */
.sim-input-label .sim-val::-webkit-outer-spin-button,
.sim-input-label .sim-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* フォーカス時 */
.sim-input-label .sim-val:focus {
    background-color: #e4f4fc;
    outline: 2px solid #0098dd;
}

.sim-range-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sim-btn {
	width: 34px;
	height: 34px;
	min-width: 34px;
	background: #fff;
	border: 2px solid #0098dd;
	border-radius: 50%;
	color: #0098dd;
	font-size: 2.2rem;
	font-weight: 300;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background 0.15s, color 0.15s;
	user-select: none;
}
.sim-btn:hover {
	background: #0098dd;
	color: #fff;
}

.sim-range {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 10px;
	border-radius: 10px;
	background: #ddd;
	outline: none;
	cursor: pointer;
}
.sim-range::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 4px;
}
.sim-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #0098dd;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,152,221,0.35);
	margin-top: -8px;
}
.sim-range::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #0098dd;
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 6px rgba(0,152,221,0.35);
}

.sim-range-ends {
	display: flex;
	justify-content: space-between;
	font-size: 1.6rem;
	color: #999;
	margin-top: 6px;
	padding: 0 46px;
}

.sim-divider {
	height: 1px;
	background: #e8e8e8;
	margin: 8px 0;
}

/* --- Rate Section --- */
.sim-rate-section {
	background: #f0f8fd;
	border-radius: 14px;
	padding: 22px 20px 24px;
	margin: 26px 0;
}

.sim-rate-title {
	font-size: 3rem;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 16px;
	letter-spacing: .04em;
}

.sim-rate-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sim-rate-card {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
}

.sim-rate-card {
	background: #fff;
	border: 2px solid #d0e8f5;
	border-radius: 12px;
	padding: 14px 10px 8px;
	text-align: center;
	transition: border-color 0.2s, background 0.2s;
}

.sim-rate-card.active {
	background: #0098dd;
	border-color: #0098dd;
}

.sim-rate-card .rc-radio {
	font-size: 2.2rem;
	color: #333;
	margin-bottom: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.rc-radio130 {
	font-size: 130%;
	font-weight: bold;
}
.sim-rate-card.active .rc-radio {
	color: #fff;
}

.rc-dot {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 2px solid #bbb;
	display: inline-block;
	flex-shrink: 0;
	bottom: -3px;
    position: relative;
}
.sim-rate-card.active .rc-dot {
	border-color: #fff;
}

.rc-range {
	font-size: 1.3rem;
	color: #666;
	margin-bottom: 6px;
}
.sim-rate-card.active .rc-range {
	color: #d6f0ff;
}

.rc-pct {
	font-size: 5rem;
	font-weight: bold;
	color: #333;
	letter-spacing: -.02em;
}
.rc-pct span {
	font-size: 60%;
}
.sim-rate-card.active .rc-pct {
	color: #fff;
}

/* --- Result Box --- */
.sim-result {
	border-radius: 14px;
	border: 3px solid #0098dd;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 100, 160, 0.15);
}

.sim-result-compare {
    display: flex;
}

.sim-result-dealer,
.sim-result-bank {
    flex: 1 1 calc(50% - 0px);
    min-width: 0;
    /* 既存のスタイルはそのまま残す */
}

.sim-result-dealer {
	background: #fff;
	padding: 18px 16px;
	text-align: center;
}

.sim-result-bank {
	padding: 18px 16px;
	text-align: center;
	color: #fff;
}

.sim-result-name {
	font-size: 2.2rem;
	font-weight: 500;
	padding: 8px;
	background-color: #d3d3d3;
	color: #333;
	border-radius: 10px;
	margin-bottom: -10px;
}
.sim-result-name-mycar {
	font-size: 2.2rem;
	font-weight: 500;
	padding: 8px;
	background-color: #0098dd;
	color: #fff;
	border-radius: 10px;
	margin-bottom: -10px;
}


.sim-result-monthly-label {
	font-size: 1.3rem;
	color: #999;
	margin-bottom: 4px;
}
.sim-result-bank .sim-result-monthly-label {
	color: rgba(255,255,255,0.75);
}

.sim-result-monthly {
	font-size: 5rem;
	font-weight: bold;
	color: #333;
	margin-bottom: -5px;
}
.sim-result-monthly .monthly-num {
	letter-spacing: -.02em;
	font-size: 130%;
}
.sim-result-monthly .monthly-unit {
	font-size: 60%;
}
.sim-result-bank .sim-result-monthly {
	color: #0098dd;
}
#savingsTotal {
    font-size: 160%;
}

.sim-result-total {
	font-size: 2rem;
	color: #333;
}

.sim-result-footer {
	background-color: #0098dd;
	color: #fff;
	padding: 5px 13px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.sim-savings-pill-white {
	background-color: #fff;
	padding: 2px 10px;
	border-radius: 5px;
}
.sim-savings-pill-white .sim-savings-val {
	font-size: 3rem;
	font-weight: bold;
	letter-spacing: -.02em;
	color: #0098dd;
}
.sim-savings-pill-white .monthly-unit {
	font-size: 60%;
}
.sim-savings-pill {
	border-radius: 30px;
	text-align: center;
}

.sim-savings-sub {
	font-size: 3.2rem;
	margin-bottom: 2px;
}

.sim-savings-val {
	font-size: 3.2rem;
	font-weight: bold;
	letter-spacing: .02em;
}



/* --- Bonus note --- */
.sim-bonus-note {
	text-align: left;
	margin-top: 16px;
}

/* ===================== SP ===================== */
@media screen and (max-width: 640px) {
	.simulation {
		background: url("../images/sp/simulation_bg@2x.jpg") no-repeat center center / cover;
		padding: 30% 0 15%;
		text-align: center;
	}
	.simulation .contents__subttl::after {
		background-color: #fff;
	}
	.simulation__ttl {
		margin: 10% 0 8%;
	}


	.sim-widget {
		border-radius: 16px;
		padding: 6% 5%;
		max-width: 100%;
	}

	.sim-input-label {
		font-size: 5vw;
	}
	.sim-input-label .sim-val {
		font-size: 7vw;
		width: 2.6em;
	}

	.sim-btn {
		width: 8vw;
		height: 8vw;
		min-width: 8vw;
		font-size: 5vw;
	}

	.sim-range-ends {
		font-size: 3.7vw;
		padding: 0 9.5vw;
	}

	.sim-rate-section {
		padding: 6% 4% 9%;
		margin: 6% 0;
	}
	.sim-rate-card .rc-radio {
		font-size: 3.7vw;
		color: #333;
		margin-bottom: -5%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		line-height: 1.2em;
	}
	.sim-rate-title {
		font-size: 5vw;
		margin-bottom: 4%;
	}

	.sim-rate-grid {
		gap: 3%;
	}
	.sim-rate-card {
		padding: 8% 5% 3%;
		border-radius: 10px;
	}
	.rc-radio {
		font-size: 3vw;
	}
	.rc-range {
		font-size: 3vw;
	}
	.rc-pct {
		font-size: 10vw;
	}
	.rc-pct span {
		font-size: 4vw;
	}
	.rc-dot {
		width: 4vw;
		height: 4vw;
		border-radius: 50%;
		border: 2px solid #bbb;
		display: inline-block;
		flex-shrink: 0;
		bottom: -3px;
		position: relative;
	}
	
	.sim-result-dealer {
		background: #fff;
		padding: 10% 4% 10% 10%;
		text-align: center;
	}
	.sim-result-bank {
		padding: 10% 10% 10% 4%;
		text-align: center;
		color: #fff;
	}
	.sim-result-name {
		font-size: 3.7vw;
		padding: 9% 0;
		border-radius: 5px;
		margin-bottom: 0;
	}
	.sim-result-name-mycar {
		font-size: 3.7vw;
		font-weight: 500;
		padding: 4%;
		background-color: #0098dd;
		color: #fff;
		border-radius: 5px;
		margin-bottom: 0;
		line-height: 1.2em;
	}
	.sim-result-monthly {
		font-size: 7vw;
		font-weight: bold;
		color: #333;
		margin-bottom: -3%;
	}
	.sim-result-monthly-label {
		font-size: 3vw;
	}
	.sim-result-monthly .monthly-num {
		font-size: 8vw;
	}
	.sim-result-monthly .monthly-unit {
		font-size: 3.8vw;
	}
	.sim-result-total {
		font-size: 3.4vw;
	}
	.sim-savings-pill-white {
		background-color: #fff;
		padding: 0 5%;
		border-radius: 5px;
		margin-bottom: 2%;
	}
	.sim-savings-pill-white .sim-savings-val {
		font-size: 7vw;
		font-weight: bold;
		letter-spacing: -.02em;
		color: #0098dd;
	}
	.sim-result-footer {
		gap: 3%;
		padding: 4% 0 2%;
	}
	.sim-savings-val {
		font-size: 8vw;
		line-height: 1.2em;
		
	}
	.sim-savings-sub {
		font-size: 6.5vw;
	}

	
}