@charset "utf-8";

body { font-family: 'Noto Sans JP', sans-serif; /*font-family: 'Noto Serif JP', serif;*/ font-size: 18px; line-height: 180%; font-weight: normal; color: #222;}
* { box-sizing: border-box; }
* img { vertical-align: bottom; }

body { height: 100vh;}
main { max-width: 1800px; min-width: 900px; width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; padding: 1%}

/*indexページ*/
.logo { width: 100%; aspect-ratio: 64 / 3; background: url("../img/logo.svg") no-repeat; background-size: cover;}

.allplay { text-align: right; padding: 0 4.5% 0 0;}
.allplay img { max-width: 16%; margin: 1.3% 0 1%; }

/*動画自動再生*/
.movie_area { position: relative;}
.bgMv { width: 100%; height: 100%; object-fit: cover; position: absolute; }
source { z-index: 1; }
.moji { position: absolute; z-index: 0; width: 100%; }
.moji img { width: 100%; height: auto}
/*メニュー*/
.contents_area { display: flex;}
.movie_area {width: 78.545%; }
.btn_area { width: 21.4551%; background: #0e62a9; padding: 0 0.7%; }
.btn_area li { width: 100%; padding-top: 2.36%;}
.btn_area li img { width: 100%; height: auto; }
.btn_area li a { display: block; aspect-ratio: 125 / 21; background: #fff; transition: background .5s; }
.btn_area li a:hover { display: block; aspect-ratio: 125 / 21; background: #d4edfc;}
.btn_area li:first-child { padding-top: 2.5%;}
.btn_area li:last-child { padding-bottom: 2.5%;} 

/*下層ページ*/
.back_img { height: 100%; background: url("../img/back_img.svg") no-repeat; background-size: cover;}
.title_area { aspect-ratio: 64 / 3; text-align: center;}
.title_area img { height: 100%; width: auto;}
.contents_container { display: flex; padding: 0 1%; margin-top: 3.2%;}
.movie_container { width: 73%; height: 80%; border: solid 10px #0e62a9; border-radius: 10px;}
.movie { aspect-ratio: 16 / 9; border: solid 2px #fff;}
.video { aspect-ratio: 16 / 9; display: block; width: 100%;}
.text_area { width: 26%; margin-left: 1%; background: #ecf5fc; border: solid 7px #0e62a9; padding: 1.2%; }
.text_area img { width: 100%;}
.text_area p { height: 100%; overflow: auto;}
.back_btn { aspect-ratio: 64 / 2.1; margin-top: 3.1%; text-align: right; padding: 0% 3.5% 0%; }
.back_btn img { width: auto; height: 80%; padding: 0.3% 0 }

@media screen and (max-width: 1250px) {
	.text_area p { font-size: 15px; line-height: 24px;}
	.back_btn { margin-top: 2.8%; }
	.back_btn img { height: 80%; padding: 0.3% 0 }
}
@media screen and (max-width: 1000px) {
	.text_area p { font-size: 14px; line-height: 20px;}
	.back_btn { margin-top: 2.35%;}
	.back_btn img { height: 80%; padding: 0.3% 0 }
}