#simulator{
    padding:130px 0 106px 0;
    background-image: linear-gradient(#3B4146, #272B31);
}
#simulator .main .simulator-box{
    position: relative;
    overflow:hidden;
    width:100%;
}
#simulator .main .simulator-box div{
    position: absolute;
    top:0;
    left:0;
}



.hidden{
    display:none;
}
#simulator .main .simulator-box .background{z-index: 1;}
#simulator .main .simulator-box .background-backdoor-open{z-index: 1;}
#simulator .main .simulator-box .shadow-black-set{z-index: 2;}
#simulator .main .simulator-box .shadow-normal{z-index: 2;}
#simulator .main .simulator-box .car-closed{z-index: 4;}
#simulator .main .simulator-box .car-opened{z-index: 4;}
#simulator .main .simulator-box .car-opened-tent-closed{z-index: 4;}
#simulator .main .simulator-box .car-opened-tent-opened{z-index: 4;}
#simulator .main .simulator-box .black-set-closed-awning-closed{z-index: 4;}
#simulator .main .simulator-box .black-set-closed-awning-opened{z-index: 4;}
#simulator .main .simulator-box .black-set-opened-awning-closed{z-index: 4;}
#simulator .main .simulator-box .black-set-opened-awning-opened{z-index: 4;}
#simulator .main .simulator-box .tent-closed{z-index: 5;}
#simulator .main .simulator-box .tent-opened{z-index: 5;}
#simulator .main .simulator-box .awning-closed{z-index: 5;}
#simulator .main .simulator-box .awning-opened{z-index: 5;}
#simulator .main .simulator-box .interaction-layer{
    width:100%;
    height:100%;
    z-index: 10;
    cursor:grab;
}

#simulator .main .simulator-box div img{
    width:100%;
}
#simulator .main span{
    display: inline-block;
    color:#fff;
    cursor:pointer;
}
#simulator .main .checkbox label{color:#fff;}




#simulator .simulator-filter{
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px 20px 10px 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display:none;
}
#simulator .simulator-filter ul{
    display:flex;
    justify-content: space-between;
}
#simulator .simulator-filter ul li{
    width: 200px;
    text-align: center;
    margin-right: 20px;
}
#simulator .simulator-filter ul li:last-of-type{
    margin-right: 0;
}
#simulator .simulator-filter ul li h4{
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
    background: #000;
    color: #fff;
    border-radius: 3px;
    padding: 3px 0;
}
#simulator .simulator-filter ul li img{
    max-width: 100px;
    margin-bottom:10px;
}
#simulator .simulator-filter ul li label{
    display:block;
    margin-bottom:5px;
    font-size:14px;
}
#simulator .simulator-filter ul li > div{
    margin-bottom:20px;
}
#simulator .simulator-filter ul li .switch{
    width:45px;
    height:20px;
    border-radius: 16px;
    position:relative; 
    background-color:#ccc;
    cursor:pointer;
    margin:0 auto;
}
#simulator .simulator-filter ul li .switch:after{
    content:" ";
    width:14px;
    height:14px;
    background-color:#fff;
    position:absolute;
    top:3px;
    right:27px;
    border-radius: 20px;
}
#simulator .simulator-filter ul li .switch-on{
    animation: switch_color_on .5s forwards;
}
#simulator .simulator-filter ul li .switch-off{
    animation: switch_color_off .5s forwards;
}
#simulator .simulator-filter ul li .switch-on:after{
    animation: switch_position_on .5s forwards;
}
#simulator .simulator-filter ul li .switch-off:after{
    animation: switch_position_off .5s forwards;
}

@keyframes switch_color_on{
    0%{
        background-color:#ccc;
    }
    100%{
        background-color:#9CEA85;
    }
}
@keyframes switch_color_off{
    0%{
        background-color:#9CEA85;
    }
    100%{
        background-color:#ccc;
    }
}
@keyframes switch_position_on{
    0%{
        right: 27px;
    }
    100%{
        right: 3px;
    }
}
@keyframes switch_position_off{
    0%{
        right: 3px;
    }
    100%{
        right: 27px; 
    }
}
#simulator .simulator-filter ul li .switch-tabs{
    width:100%;
    display:flex;
}
#simulator .simulator-filter ul li .switch-tabs strong{
    width:50%;
    box-sizing: border-box;
    text-align:center;
    font-size:12px;
    border:1px solid #000;
    padding:5px;
    cursor:pointer;
}
#simulator .simulator-filter ul li .switch-tabs strong:first-of-type{
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
#simulator .simulator-filter ul li .switch-tabs strong:last-of-type{
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
#simulator .simulator-filter ul li .switch-tabs .selected-tab{
    background-color:#000;
    color:#fff;
    cursor:default;
}
#simulator .simulator-filter ul #awning .awning-state{
    visibility:hidden;
}
#simulator .simulator-filter ul #tent .tent-state{
    visibility:hidden;
}


@media screen and (max-width: 1050px){
    #simulator .simulator-filter ul li .switch-tabs strong{
        font-size:10px;
    }
}
@media screen and (max-width: 850px){
    #simulator .container{
        width:90%;
    }
    #simulator .main{
        display:block;
    }
    #simulator .simulator-filter ul li h4{
        font-size:16px;
    }
    #simulator .simulator-filter ul li .switch-tabs{
        display:block;
    }
    #simulator .simulator-filter ul li .switch-tabs strong{
        width:100%;
        display:block;
    }
    #simulator .simulator-filter ul li .switch-tabs strong:first-of-type{
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    #simulator .simulator-filter ul li .switch-tabs strong:last-of-type{
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}
@media screen and (max-width: 550px){
    #simulator .container{
        width:100%;
    }
    #simulator .simulator-filter{
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}
@media screen and (max-width: 500px){
    #simulator .simulator-filter{
        width:100%;
        padding:15px 0;
        overflow-x:scroll;
    }
    #simulator .simulator-filter ul{
        width:200%;
    }
    #simulator .simulator-filter ul li{
        width: 50%; 
        margin-right: 0;
        box-sizing: border-box;
        padding: 0 5px;
    }
}
@media screen and (max-width: 400px){
}