@charset "UTF-8";
/* CSS Document */

.virtual_main{
	width:100%;
	background:#000;
	padding:0x 0;
}
.virtual_main dl{
	width:96%;
	max-width:1200px;
	margin:auto;
	display:flex;
	justify-content:space-between;
}
.virtual_main dl dt{
	width:60%;
	margin-top:100px;
}
.virtual_main dl dt h5{
	color:#fff;
	font-weight:bold;
	letter-spacing:0.2em;
	margin-bottom:20px;
}
.virtual_main dl dt img{
	width:100%;
}

.virtual_main dl dd#viewArea{
	width:200px;
	height:200px;
	margin:100px auto 0;
	}

.virtual_main dl dd div#cube div{
position:absolute;
height:200px;
width:200px;
border:1px solid #fff;
}

.virtual_main dl dd div#cube{
-webkit-animation-name:animation;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:13s;
-webkit-transform-style:preserve-3d;
-webkit-transform-origin: 100px 100px 0;
-webkit-transform: rotateY(55deg) rotateX(51deg);
}
.virtual_main dl dd div#cube img{
	width:100%;
}
.virtual_main dl dd div#cube .one{
-webkit-transform: translateZ(100px);
}
.virtual_main dl dd div#cube .two{
-webkit-transform: rotateX(-90deg) translateZ(100px);
}
.virtual_main dl dd div#cube .three{
-webkit-transform: rotateX(90deg) translateZ(100px);
}
.virtual_main dl dd div#cube .three{
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
}
.virtual_main dl dd div#cube .four {
-webkit-transform: rotateY(180deg) rotateZ(90deg)  translateZ(100px);
}
.virtual_main dl dd div#cube .five {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
}
.virtual_main dl dd div#cube .six {
-webkit-transform: rotateY(90deg) translateZ(100px);
}

@-webkit-keyframes animation{
from,to{}
16% { -webkit-transform: rotateY(-45deg);}
33% { -webkit-transform: rotateY(-110deg) rotateZ(185deg);}
50% { -webkit-transform: rotateY(125deg) rotateZ(235deg);}
66% { -webkit-transform: rotateY(235deg) rotateX(205deg);}
83% { -webkit-transform: rotateX(335deg);}
}


.virtual_ep{
	color:#fff;
	width:100%;
	background:#222;
	padding:40px 0;
	margin-bottom:50px;
}

.virtual_ep ol{
	width:96%;
	max-width:1200px;
	margin:auto;
}

.virtual_ep p{
	width:70%;
}


.virtual_list{
	width:100%;
}
.virtual_list ul{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	position:relative;
	margin-bottom:100px;
}
.virtual_list ul:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 1px;
    height: 100%;
    margin: auto;
    border-left: 1px solid #ccc;
}
.virtual_list ul li{
	width:48%;
	padding:0 5% 40px;
	margin-bottom:70px;
	box-sizing:border-box;
	border-bottom:1px solid #ccc;
}

/* 展示場が奇数の時のアンダーライン */
/* .virtual_list ul li:last-child{
	border-bottom:none;
	margin-bottom:0;
} */

.virtual_list ul li .model_image{
	width:100%;
	height:250px;
	position:relative;
}
.virtual_list ul li .model_image:before{
	content:"";
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	background: rgba(0, 0, 0, 0.3);
}
.virtual_list ul li .model_image .new{
	color: #fff;
    font-family: 'Jost', sans-serif;
    padding: 1.5em 1em;
    background-image: linear-gradient(-210deg, #231557 0%, #44107a 10%, #ff1361 50%, #fff800 100%);
    position: absolute;
    top: 0;
    left: 0;
}
.virtual_list ul li .model_image.horizon{
	background:url("../img/virtual_list_model_horizon.jpg") no-repeat center center;
	background-size:cover;
}
.virtual_list ul li .model_image.plaisir{
	background:url("../img/virtual_list_model_plaisir.jpg") no-repeat center center;
	background-size:cover;
}
.virtual_list ul li .model_image.likas{
	background:url("../img/virtual_list_model_likas.jpg") no-repeat center center;
	background-size:cover;
}
.virtual_list ul li .model_image.paus{
	background:url("../img/virtual_list_model_paus.jpg") no-repeat center center;
	background-size:cover;
}
.virtual_list ul li .model_image.corsie{
	background:url("../img/virtual_list_model_corsie.jpg") no-repeat center center;
	background-size:cover;
}
.virtual_list ul li .model_image.box{
	background:url("../img/virtual_list_model_box.jpg") no-repeat center center;
	background-size:cover;
}
.virtual_list ul li .model_image.cras{
	background:url("../img/virtual_list_model_cras.jpg") no-repeat center center;
	background-size:cover;
}
.virtual_list ul li .model_image.sumai{
	background:url("../img/virtual_list_model_sumai.jpg") no-repeat center center;
	background-size:cover;
}
.virtual_list ul li .model_image.castle{
	background:url("../img/virtual_list_model_castle.jpg") no-repeat center center;
	background-size:cover;
}
.virtual_list ul li .model_image.garage{
	background:url("../img/virtual_list_model_garage.jpg") no-repeat center center;
	background-size:cover;
}

.model_detail{
	margin:10px 0;
}

.model_detail h5{
	font-size:120%;
    font-weight:bold;
    margin-bottom:0.5em;
}
.model_detail h6{
	color:#ccc;
    font-size:75%;
    letter-spacing:0.2em;
}
.model_detail p{
	line-height:1.7em;
}
.model_detail .btn{
	box-sizing:border-box;
	text-align:center;
}
.model_detail .btn a{
    margin-top:20px;
}
.model_detail .btn a:hover{
}
.model_detail .btn a i{
	margin-left:0.5em;
}

.virtual_list ul li .model_3dbtn {
	width:100%;
	height:100%;
  box-sizing:border-box;
  position:relative;
}

.virtual_list ul li .model_3dbtn img{
	width:30%;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
.virtual_list ul li .model_3dbtn a{
	width:100%;
	height:100%;
	display:block;
}
.virtual_list ul li .model_3dbtn:hover {
}



@media screen and (max-width: 1119px) {
	.virtual_main dl dt{
	    width:60%;
	    margin-top:70px;
	    margin-bottom:30px;
    }
    .virtual_main dl dt img{
	    width:100%;
    }
    .virtual_ep{
	    color:#fff;
	    width:100%;
	    padding:40px 0;
	    margin-bottom:50px;
    }

    .virtual_ep ol{
	    width:96%;
	    max-width:1200px;
	    margin:auto;
    }

    .virtual_ep p{
	    width:100%;
    }

    .virtual_list{
    	width:96%;
    	margin:auto;
    }
    .virtual_list ul li{
	    margin-bottom:50px;
    }
    .virtual_list ul li .model_image .model_detail{
       width:50%;
       min-width:210px;
       padding:10px;
       position:absolute;
    }

}


@media screen and (max-width: 768px) {
	.virtual_main dl{
	    width:96%;
	    max-width:unset;
	    margin:unset;
	    display:unset;
	    justify-content:unset;
    }
       .virtual_main dl dt{
	    width:85%;
	    margin:0px auto 0;
	    padding:10px 0;
    }
       .virtual_main dl dt h5{
   	    font-size:110%;
	    margin:10px auto;
    }
    .virtual_main dl dd#viewArea{
    	width:200px;
    	height:200px;
    	margin:50px auto 0;
    }

	.virtual_list ul{
	    display:block;
	    justify-content:unset;
	    flex-wrap:unset;
	    position:unset;
    }
    .virtual_list ul:before{
		display:none;
    }
    .virtual_list ul li{
	    width:96%;
	    margin:0 auto 40px auto;
	    padding:0 0 30px 0;
	   }
    .virtual_list ul li .model_image .model_detail{
       width:40%;
       padding:15px;
        position:absolute;
    }

    .virtual_list ul li .model_3dbtn{
      border:1px solid #fff;
      width:100%;
      margin:20px auto;
      padding:10px 20%;
      box-sizing:border-box;
      }

}


@media screen and (max-width: 599px) {
	 .virtual_main dl dt h5{
   	    font-size:70%;
	    margin:10px auto;
    }
    .virtual_list ul li .model_image .model_detail{
       width:60%;
       padding:15px;
        position:absolute;
    }
    .virtual_list ul li .model_image .model_detail p{
    	font-size:80%;
    }
   .virtual_list ul li .model_3dbtn{
      padding:10px 12%;
   }
}