/* select_color_2nd.css */

/* colorBox */
.colorBox{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	margin: 5em auto 5em;
}
.colorBox_main,
.colorBox_door{
	width: 47%;
}

@media screen and (max-width: 767px) {
.colorBox_main,
.colorBox_door{
	width: 100%;
}
.colorBox_main{
	margin-top: 3em;
}
}


/* color-options */
.color-options {
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	/*width: 100%;
	max-width: 600px;
    margin: 0 auto 50px;*/
}

.car-preview {
    margin-top: 4em;
}

.car-preview img {
    max-width: 100%;
    height: auto;
}

.color-options label{
	display: inline-block;
	width: 18%; /*80px*/
	text-align: center;
	vertical-align: top;
}
.color-options label .txt{
	display: block;
	font-size: 18px;
	font-size: clamp(14px, 1.6vw, 18px);
	margin-top: 0.5em;
}

@media screen and (max-width: 767px) {
.color-options label{
	/*width: 13%;*/
}
}



/* 画像の切り替えをふわっとアニメーション化するためのトランジション */
.car-preview img {
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}




/* checkbox radio共通 ボタン消去・生成、色付け  */
    input[type=checkbox],input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    vertical-align: -0.8rem;
    transition:all .15s ease-out 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    outline: none;
    border-radius: 10%;
}

/* Radio */
input[type=radio] {
    border-radius: 50%;
}
input[type=radio]:checked:before {
    transform: scale(1);
}
input[type=radio]:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 5px; /*50%*/
    margin: 3px auto; /*3px*/
    transform: scale(0);
    transition: all ease-out 250ms;
}
/* Colors */
input[type=radio] {
    border: 2px solid #c9d1b0;
	transform:scale(1.7); /*scale(1.5)*/
}
input[type=radio]:checked:before {
    background: #c9d1b0;
}
/* Complement colors */
/* clr_sakura */
input[type=radio].clr_sakura { border: 2px solid #ecc6c1;}
input[type=radio].clr_sakura:checked:before { background: #ecc6c1;}

/* clr_aozora */
input[type=radio].clr_aozora { border: 2px solid #b6d5ea;}
input[type=radio].clr_aozora:checked:before { background: #b6d5ea;}

/* clr_mugiwara */
input[type=radio].clr_mugiwara { border: 2px solid #f3ddb0;}
input[type=radio].clr_mugiwara:checked:before { background: #f3ddb0;}

/* clr_wakaba */
input[type=radio].clr_wakaba { border: 2px solid #c4d9a3;}
input[type=radio].clr_wakaba:checked:before { background: #c4d9a3;}

/* clr_kurumi */
input[type=radio].clr_kurumi { border: 2px solid #d5c0a3;}
input[type=radio].clr_kurumi:checked:before { background: #d5c0a3;}




@media screen and (max-width: 767px) {
input[type=radio] {
	transform:scale(1.5);
}
}