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


/* ---------------------------------------------------------------------------------------------

   Main-visual-wrap

--------------------------------------------------------------------------------------------- */
.main-visual-wrap{
	width: 100%;
	height: 100vh;
}

.main-visual-wrap video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
    min-height: 100%;
	transform: translate(-50%, -50%);
    width: 177vh; /*1920÷1080=177*/
    height: 56vw;  /*1080÷1920=56*/
}

.centerBox{
	width: 100%;
	position: absolute;
	top: 1.0%;
	left: 0;
}

.visual-contents{
	width: 1000px;
	margin: 0 auto;
}

.title-study img{
	width: 500px;
	height: auto;
	margin: 0 auto;
}

.title-jp img{
	width: 833px;
	height: auto;
	margin: 0 auto;
}

.title-visual img{  
	width: 800px;
	height: auto;
	margin: 15px auto 0 auto;
}

@media screen and (max-width:1000px) {

.visual-contents{
	width: 98%;
}
	
}

@media screen and (max-width:833px) {
	
.title-study img{
	width: 60%;
}
	
.title-jp img{
	width: 100%;
}
	
.title-visual img{  
	width: 100%;
}
	
}

@media screen and (max-width:750px) {

.main-visual-wrap{
	height: 95vh;
}

}
@media screen and (max-width:700px) {

.main-visual-wrap{
	height: 90vh;
}

}
@media screen and (max-width:650px) {

.main-visual-wrap{
	height: 85vh;
}

}
@media screen and (max-width:600px) {

.main-visual-wrap{
	height: 80vh;
}

}
@media screen and (max-width:550px) {

.main-visual-wrap{
	height: 75vh;
}

}
@media screen and (max-width:500px) {

.main-visual-wrap{
	height: 70vh;
}

}
@media screen and (max-width:450px) {

.main-visual-wrap{
	height: 75vh;
}

}
@media screen and (max-width:400px) {

.main-visual-wrap{
	height: 85vh;
}

}
@media screen and (max-width:350px) {

.main-visual-wrap{
	height: 95vh;
}

}