@charset "utf-8";

.bodycolor {
	display: flex;
	flex-direction: column;
	gap: calc(var(--winW) * 15);
	margin-bottom: calc(var(--winW) * 35);
}
.bodycolor_outer {
	width: calc(var(--winW) * 345);
	margin:0 auto;
	background-color:#fff;
	border-radius: calc(var(--winW) * 20);
	padding: calc(var(--winW) * 7) calc(var(--winW) * 7) calc(var(--winW) * 25);
	overflow: hidden;
	position: relative;
}
.bodycolor_back {
	height: calc(var(--winW) * 180);
	border-radius: calc(var(--winW) * 20);
	position: relative;
	margin-bottom: calc(var(--winW) * 100);
}
.bodycolor_back .bodycolor_back_top,
.bodycolor_back .bodycolor_back_bottom {
	height: 50%;
}
.bodycolor_back .bodycolor_back_top {
	border-top-left-radius: calc(var(--winW) * 20);
	border-top-right-radius: calc(var(--winW) * 20);
}
.bodycolor_back .bodycolor_back_bottom {
	border-bottom-left-radius: calc(var(--winW) * 20);
	border-bottom-right-radius: calc(var(--winW) * 20);
}
.v_body_back {
	position: absolute;
	bottom: calc(var(--winW) * -50);
	left: 0;
	width: 100%;
	height: calc(var(--winW) * 230);
	overflow: hidden;
}
.v_body_item {
	position:relative;
	width: 100%;
	height: 100%;
}
.v_body_item:after {
	width: calc(var(--winW) * 800);
	height: calc(var(--winW) * 300);
	left: 50%;
	bottom: calc(var(--winW) * 0);
	content: '';
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-size: calc(var(--winW) * 450);
	background-position: center calc(var(--winW) * 80);
	position:absolute;
	transform: translate(-50%, 0%);
}
.bodycolor_back .bodycolor_text {
	font-size: calc(var(--winW) * 10);
	line-height: calc(16 / 10);
	letter-spacing: calc(5em / 100);
	text-align:right;
	padding: calc(var(--winW) * 10);
	z-index: 2;
	position: relative;
	filter: brightness(60%);
}
.bodycolor_info {
	padding:0 calc(var(--winW) * 10);
	color:#888888;
}
.model {
	margin-bottom: calc(var(--winW) * 10);
}
.m_title {
	font-size: calc(var(--winW) * 10);
	line-height: calc(14 / 10);
	letter-spacing: calc(5em / 100);
	margin-right: calc(var(--winW) * 10);
}
.m_name {
	font-size: calc(var(--winW) * 16);
	line-height: calc(16 / 16);
	letter-spacing: calc(5em / 100);
}
.color_variation {
	font-size: calc(var(--winW) * 10);
	line-height: calc(14 / 10);
	letter-spacing: calc(5em / 100);
	margin-bottom: calc(var(--winW) * 10);
}
.color_radio_area {
	display:flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: calc(var(--winW) * 9.6);
}
.color_radio_area li {
	width: calc(var(--winW) * 36);
}
input[type="radio"] {
	position: relative;
	width: calc(var(--winW) * 36);
	height: calc(var(--winW) * 36);
	border-radius: 50%;
	vertical-align: calc(var(--winW) * -2);
	cursor:pointer;
	border: calc(var(--winW) * 2) solid #fff;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type="radio"]:checked {
	background-color:#fff;
}
input[type="radio"]:checked:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--winW) * 28);
	height: calc(var(--winW) * 28);
	border-radius: 50%;
	content: '';
}

input[type="radio"].half {
	overflow: hidden;
	border: calc(var(--winW) * 0) solid #fff;
}
input[type="radio"].half:checked {
	border: calc(var(--winW) * 2) solid #fff;
}
input[type="radio"].half:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 50%;
	margin-top: 50%;
	transform: translate(-50%, 0%);
}
input[type="radio"].half:checked:after {
	width: calc(var(--winW) * 28);
	height: calc(var(--winW) * 14);
	border-radius: 50% / 0 0 100% 100%;
}

@media screen and (min-width: 769px) {
	.bodycolor {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: calc(var(--winW) * 40);
		width: calc(var(--winW) * 1280);
		margin:0 auto;
		margin-bottom: calc(var(--winW) * 73);
	}
	.bodycolor_outer {
		width: calc(var(--winW) * 610);
		margin:0 auto;
		background-color:#fff;
		border-radius: calc(var(--winW) * 30);
		padding: calc(var(--winW) * 12) calc(var(--winW) * 12) calc(var(--winW) * 40);
		overflow: hidden;
		position: relative;
	}
	.bodycolor_back {
		height: calc(var(--winW) * 300);
		margin-bottom: calc(var(--winW) * 140);
	}
	.v_body_back {
		bottom: calc(var(--winW) * -100);
		height: calc(var(--winW) * 330);
	}
	.v_body_item:after {
		width: calc(var(--winW) * 800);
		height: calc(var(--winW) * 400);
		background-size: calc(var(--winW) * 800);
		background-position: center calc(var(--winW) * 0);
	}
	.bodycolor_back .bodycolor_text {
		font-size: calc(var(--winW) * 14);
		line-height: calc(22 / 14);
		padding: calc(var(--winW) * 10);
	}
	.bodycolor_info {
		padding:0 calc(var(--winW) * 30);
	}
	.model {
		margin-bottom: calc(var(--winW) * 12);
	}
	.m_title {
		font-size: calc(var(--winW) * 14);
		line-height: calc(21 / 14);
		margin-right: calc(var(--winW) * 12);
	}
	.m_name {
		font-size: calc(var(--winW) * 24);
	}
	.color_variation {
		font-size: calc(var(--winW) * 14);
		line-height: calc(21 / 14);
		margin-bottom: calc(var(--winW) * 16);
	}
	.color_radio_area {
		gap: calc(var(--winW) * 12);
	}
	.color_radio_area li {
		width: calc(var(--winW) * 55);
	}
	input[type="radio"] {
		width: calc(var(--winW) * 55);
		height: calc(var(--winW) * 55);
		vertical-align: calc(var(--winW) * -2);
		border: calc(var(--winW) * 2) solid #fff;
	}
	input[type="radio"]:checked:before {
		width: calc(var(--winW) * 45);
		height: calc(var(--winW) * 45);
	}
	input[type="radio"].half {
		border: calc(var(--winW) * 0) solid #fff;
	}
	input[type="radio"].half:after {

	}
	input[type="radio"].half:checked:after {
		width: calc(var(--winW) * 45);
		height: calc(var(--winW) * 22.5);
		border-radius: 50% / 0 0 100% 100%;
	}
}


.v_range {
	position: absolute;
	z-index: 5;
	top: calc(var(--winW) * 60);
	left: 0;
	width:100%;
}
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	background: transparent;
	cursor: ew-resize;
	width: 100%;
	padding: calc(var(--winW) * 180) calc(var(--winW) * 42) calc(var(--winW) * 20);
	box-shadow:unset;
}
 
/* Track: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-runnable-track {
	background: #DDDDDD;
	height: calc(var(--winW) * 4);
	border-radius: calc(var(--winW) * 8);
	box-shadow:unset;
}
 
/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: calc(var(--winW) * 12);
	width: calc(var(--winW) * 12);
	margin-top: calc(var(--winW) * -8);
	background-color: #fff;
	border-radius: 50%;
	border: calc(var(--winW) * 4) solid #888888;
	transition: background-color 0.3s ease;
	box-sizing:content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-shadow:unset;
}
/* Track: Firefox */
input[type="range"]::-moz-range-track {
	background: #DDDDDD;
	height: calc(var(--winW) * 4);
	border-radius: calc(var(--winW) * 8);
	box-shadow:unset;
}
/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
	border: none;
	height: calc(var(--winW) * 12);
	width: calc(var(--winW) * 12);
	margin-top: calc(var(--winW) * -8);
	background-color: #fff;
	border-radius: 50%;
	border: calc(var(--winW) * 4) solid #888888;
	box-sizing:content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-shadow:unset;
}

@media screen and (min-width: 769px) {
	.v_range {
		top: calc(var(--winW) * 60);
	}
	input[type="range"] {
		padding: calc(var(--winW) * 330) calc(var(--winW) * 105) calc(var(--winW) * 20);
	}
	 
	/* Track: Chrome, Safari, Opera, Edge Chromium */
	input[type="range"]::-webkit-slider-runnable-track {
		height: calc(var(--winW) * 6);
		border-radius: calc(var(--winW) * 8);
	}
	 
	/* Thumb: Chrome, Safari, Opera, Edge Chromium */
	input[type="range"]::-webkit-slider-thumb {
		height: calc(var(--winW) * 16);
		width: calc(var(--winW) * 16);
		margin-top: calc(var(--winW) * -10);
		border: calc(var(--winW) * 6) solid #888888;
	}
	/* Track: Firefox */
	input[type="range"]::-moz-range-track {
		height: calc(var(--winW) * 6);
		border-radius: calc(var(--winW) * 8);
	}
	/* Thumb: Firefox */
	input[type="range"]::-moz-range-thumb {
		height: calc(var(--winW) * 16);
		width: calc(var(--winW) * 16);
		margin-top: calc(var(--winW) * -10);
		border: calc(var(--winW) * 6) solid #888888;
	}
}