.sim {
	--sky-blue: #1375ff;
	--mid-sky-blue: #2f51d7;
	--dark-gray: #b2b2b2;
	--purple: #C978FF;
	--mid-purple: #ac44f2;
	--dark-green: #00996d;
	--mid-red: #ff4381;
	--light-gray: #f6f6f6;
	background: var(--light-gray);
	border-radius: 1rem;
	padding: 1.5rem;
}

.sim--s {
	background: var(--gradient);
	box-shadow: 4px 4px var(--shadow-green);
	border-top: 4px solid var(--white);
	border-left: 4px solid var(--white);
}

.sim__inner {
	background: var(--white);
	border-radius: 1rem;
	padding: 1rem;
	overflow: hidden;
}

.sim__ttl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 4px solid var(--light-gray);
}

.sim__dt-card {
	width: 4rem;
	height: 4rem;
	border-radius: 99%;
	box-shadow: 0rem .25rem var(--gray);
}

.sim__ttl-text {
	font-size: 2rem;
	font-weight: 600;
}

.sim__box {}

.sim__transition {
	transition: transform .5s linear;
}

.sim__transition.active {
	transform: translateX(calc(-100% - 1rem));
}

.sim__flex {
	display: flex;
	gap: 1rem;
}

.sim__flex-item {
	flex: 0 0 100%;
	overflow: hidden;
	height: fit-content;
}

.flex-item--50 {
	flex: 0 0 calc(50% - 1rem/2);
	height: fit-content;
	overflow: hidden;
}

.sim__flex-column {
	flex-direction: column;
}

.sim__justify-between {
	justify-content: space-between;
}

.sim__justify-center {
	justify-content: center;
}

.sim__align-center {
	align-items: center;
}

.sim__st {
	font-size: min(1.75rem, 3vw);
	font-weight: 700;
	color: var(--white);
	border-radius: .5rem;
	padding: .5rem;
}

.sim__st--pink {
	background: var(--red);
	text-align: center;
	box-shadow: 0 .25rem var(--mid-red);
}

.sim__st--blue {
	background: var(--sky-blue);
	text-align: center;
	box-shadow: 0 .25rem var(--mid-sky-blue);
}

.sim__st--green {
	background: var(--mid-green);
	box-shadow: 0 .25rem var(--dark-green);
}

.sim__st--purple {
	background: var(--purple);
	box-shadow: 0 .25rem var(--mid-purple);
}

.sim__amount {
	text-align: center;
	font-size: 2.625rem;
	font-weight: 700;
}

#amount,
#amount_v2 {
	display: inline;
}

.sim__slider {}

.sim__slider-btn {
	flex: 0 1 3rem;
	width: 3rem;
	height: 3rem;
	border-radius: 99%;
	font-size: 2rem;
	color: var(--white);
	border: none;
	background: var(--red);
	box-shadow: 0 .25rem var(--mid-red);
}

.sim__slider-btn--v2 {
	background: var(--sky-blue);
	box-shadow: 0 .25rem var(--mid-sky-blue);
}

.minusBtn {}

.plusBtn {}

.sim__range {
	flex: 0 1 100%;
}

.sim__range--v2 {}

.sim__sst {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
}

.sim__button-unit {
	display: flex;
	gap: .5rem;
}

.button-unit {
	cursor: pointer;
	flex: 0 1 100%;
	border-radius: 2rem;
	height: 3rem;
	font-size: 1.25rem;
	font-weight: 600;
	font-family: 'M PLUS Lounded 1c';
	color: var(--black);
	border: none;
	background: var(--gray);
	box-shadow: 0 .25rem var(--dark-gray);
}

.button-unit--v2 {}

.button--active {
	background: var(--red);
	color: var(--white);
	box-shadow: 0 .25rem var(--mid-red);
}

.button-unit--v2.button--active {
	background: var(--sky-blue) !important;
	box-shadow: 0 .25rem var(--mid-sky-blue) !important;
}

.sim__price {}

.sim__rate-box {
	padding: .5rem 1rem;
	border-radius: .5rem;
	font-size: min(1.5rem, 3vw);
	font-weight: 600;
}

.sim__rate-box--f {
	background: var(--mid-green);
	color: var(--white);
}

.sim__rate-box--r {
	background: var(--purple);
	color: var(--white);
}

.sim__rate {}

.sim__price-box {
	font-size: min(1.875rem, 4vw);
	font-weight: 800;
	flex: 0 1 100%;
}

.sim__price-box--f {
	color: var(--mid-green);
}

.sim__price-box--r {
	color: var(--purple);
}

.sim__price--f {
	color: var(--mid-green);
}

.sim__price--r {
	color: var(--purple);
}

.sim__sites {}

.sim__site {}

.sim__logo-img {
	display: block;
	width: 100%;
	height: 70px;
	object-fit: contain;
}

.swiper {}

.swiper-wrapper {
	max-width: 20vw;
}

.swiper-slide {}

/* range */

/* 共通設定 */
input[type="range"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	max-width: 300px;
	height: 8px;
	background: transparent;
	cursor: pointer;
}

/* トラック部分 */
input[type="range"]::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 4px;
}

input[type="range"]::-moz-range-track {
	height: 8px;
	border-radius: 4px;
}

input[type="range"]::-ms-track {
	background: transparent;
	height: 8px;
	border-color: transparent;
	color: transparent;
}

/* 画像を使った thumb: Chrome, Safari */
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 40px;
	width: 40px;
	background: url('./../img/card/apple.png') no-repeat center center;
	background-size: contain;
	border: none;
	margin-top: -16px;
	/* トラック中央に配置調整 */
	border-radius: 99%;
}

/* 画像を使った thumb: Firefox */
input[type="range"]::-moz-range-thumb {
	height: 40px;
	width: 40px;
	background: url('./../img/card/apple.png') no-repeat center center;
	background-size: contain;
	border: none;
	border-radius: 99%;
}

/* 画像を使った thumb: IE / Edge（旧） */
input[type="range"]::-ms-thumb {
	height: 40px;
	width: 40px;
	background: url('./../img/card/apple.png') no-repeat center center;
	background-size: contain;
	border: none;
	border-radius: 99%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
	font-size: 1.5rem;
	color: var(--black);
}