/* Reset
==============================*/

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}


/* fuwat
==============================*/

.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.8s;
 -ms-animation-duration:0.8s;
 animation-duration:0.8s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% {
 	width:0; }
 100% {
 	opacity: 1;
 	}
}
@keyframes fuwatAnime {
 0% {
 	width:0;
 	}
 100% { opacity: 1;
 		}
}




.fuwatAnimeLeft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fuwatAnimeLeft;
 -ms-animation-name: fuwatAnimeLeft;
 animation-name: fuwatAnimeLeft;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnimeLeft {
 0% { opacity: 0; -webkit-transform: translateX(-30px); }
 100% { opacity: 1; -webkit-transform: translatexX(0); }
}
@keyframes fuwatAnimeLeft {
 0% { opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}


.fuwatAnimeRight {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fuwatAnimeRight;
 -ms-animation-name: fuwatAnimeRight;
 animation-name: fuwatAnimeRight;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnimeRight {
 0% { opacity: 0; -webkit-transform: translateX(20px); }
 100% { opacity: 1; -webkit-transform: translatexX(0); }
}
@keyframes fuwatAnimeRight {
 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}







/* Base
==============================*/
html:before {
    content:"";
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:5px solid;
    border-image: linear-gradient(60deg, #014b87 0%, #58b333 25%,#e4001e 50%,#FFEB3B 75%, #f8bc00 100%);
    border-image-slice: 1;
    z-index:5;
    box-sizing:border-box;
}

body {
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size:16.7px;
	font-weight:bold;
	line-height:2em;
	letter-spacing:0.1em;
}

/* 
body {
  overflow: auto;
  scroll-snap-type: y mandatory;
}
.area {
  scroll-snap-align: start;
}
*/

@media screen and (max-width: 640px) {
	body {
		font-size:13.7px;
		font-weight:bold;
		line-height:1.8em;
		letter-spacing:0.1em;
		font-feature-settings: "palt";
	}

}


/* TOP
==============================*/
section#top{
	width:100vw;
	height:100vh;
	min-height:900px;
	position:relative;
}



section#top .title_box{
	width:60%;
	max-width:1200px;
	height:60vh;
	position:absolute;
	right:0;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
}

section#top .title_box ul{
}

section#top .title_box ul li{
	width:100%;
	list-style:none;
}


section#top .title_box ul li:nth-child(1){
	margin:0 0 2vh 0;
	overflow: hidden;
  	position: relative;
}

section#top .title_box ul li dl{
	margin:0 0 20px 0;
}

section#top .title_box ul li:nth-child(1) dl:nth-child(1){
  animation: cover 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  height: 27%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

section#top .title_box ul li:nth-child(1) dl:nth-child(2) {
  animation: cover 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  height: 27%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

section#top .title_box ul li:nth-child(1) dl:nth-child(3) {
  animation: cover 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  height: 54%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

section#top .title_box ul li:nth-child(1) dl:nth-child(1){
  top: 0;
}

section#top .title_box ul li:nth-child(1) dl:nth-child(2){
  animation-delay: .2s;
  top: 27%;
}

section#top .title_box ul li:nth-child(1) dl:nth-child(3) {
  animation-delay: .4s;
  top: 54%;
}

@keyframes cover {
  100% {
    transform: translateX(100%);
  }
}


section#top .title_box ul li p{
	font-size:18px;
	line-height:2.5em;

}



@media screen and (max-width: 768px) {
	section#top{
		min-height:500px;
	}
	section#top .title_box{
		width:80%;
		position:absolute;
		right:0;
		left:0;
		top:0;
		bottom:0;
		margin:auto;
	}

}



@media screen and (max-width: 500px) {
	section#top .title_box{
		width:80%;
		position:absolute;
		right:0;
		left:0;
		top:0;
		bottom:0;
		margin:auto;
	}
	section#top .title_box ul li p{
		font-size:13px;
		line-height:2em;

	}

}


/* EP
==============================*/
section#ep{
	width:60%;
	max-width:1200px;
	height:100vh;
	min-height:1000px;
	margin: auto;
	position:relative;
}


section#ep ul{
	height:80vh;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}



section#ep h3{
	color:#fff;
	font-size:28px;
	text-align:center;
	margin:5% auto 2% auto;
	background:#3a8dde;
	padding:0.3em 0;
}


section#ep h3 span{
	font-size:130%;
}


section#ep div{
	margin:auto;
	display:flex;
	flex-wrap: wrap;
}

section#ep div li{
	list-style:none;
	display:block;
	width:15%;
	margin:0 2% 2% 0;
}

section#ep div li:nth-child(6n){
	margin-right:0;
}

section#ep div li img{
	width:100%;
}


@media screen and (max-width: 768px) {
	section#ep{
		width:80%;
		height:100vh;
		min-height:600px;
		margin: auto;
		position:relative;
	}

}


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

	section#ep h3{
		font-size:17px;
	}

	section#ep ul{
	height:90vh;
	}

}



/* EP2
==============================*/
section#ep2{
	width:100%;
	height:100vh;
	min-height:900px;
	margin:0 auto 0 auto;
	position:relative;
}


section#ep2 li:nth-child(1){
	list-style:none;
	width:70vw;
	max-width:1200px;
	position:absolute;
	top:40vh;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	padding:50px 0;
	background:rgba(255,255,255,0.9);
	z-index:1;
}

section#ep2 ul li:nth-child(1) h2{
	font-size:40px;
	text-align:center;
	padding:0;
}

section#ep2 ul li:nth-child(1) h3{
	font-size:20px;
	text-align:center;
	margin:1em auto;
}


section#ep2 ul li:nth-child(1) h3 span{
	border:1px solid #000;
	padding:5px 10px;
}

section#ep2 li:nth-child(1) dl{
	font-size:110%;
	margin:0 0 1em 0;
	padding-left:2em;
	padding-bottom:0.7em;
	text-indent:-2em;
	border-bottom:1px dotted #000;
}

section#ep2 li:nth-child(1) dl span{
	font-size:30px;
	margin:0 0.5em 0 0;
	vertical-align:sub;
}

section#ep2 li:nth-child(1) ul {
	margin:auto;
	padding:0;
	display:flex;
	margin-bottom:40px;
}

section#ep2 li:nth-child(1) ul dt{
	margin:0 10px 0 0;
}

section#ep2 li:nth-child(1) ul dt:last-of-type{
	margin:0 0 0 0;
}

section#ep2 li:nth-child(1) ul dt img{
	width:100%;
}


section#ep2 ul li:nth-child(2){
	background-image:url("../img/ep2_img_a.jpg");
	background-size:cover;
	background-position:center;
	height:40vh;
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
}


@media screen and (max-width: 768px) {
	section#ep2{
		min-height:660px;
	}
	section#ep2 li:nth-child(1){
		list-style:none;
		width:80vw;
		position:absolute;
		top:40vh;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
		background:rgba(255,255,255,0.9);
		z-index:1;
	}
	section#ep2 ul li:nth-child(1) h2{
		font-size:30px;
		text-align:center;
		padding:0;
	}

	section#ep2 ul li:nth-child(1) h3{
		font-size:18px;
		text-align:center;
		margin:1em auto;
	}
	section#ep2 li:nth-child(1) dl{
	font-size:105%;
	}	

}


@media screen and (max-width: 640px) {
	section#ep2 ul li:nth-child(1) h2{
		font-size:25px;
		text-align:center;
		padding:0;
	}

	section#ep2 ul li:nth-child(1) h3{
		font-size:15px;
		text-align:center;
		margin:1em auto;
	}
}


@media screen and (max-width: 500px) {
		
	section#ep2 li:nth-child(1){
		width:90vw;
		padding:0;
		top:5vh;
	}
	section#ep2 ul li:nth-child(1) h2{
		font-size:20px;
		margin:20px 0 0 0;
	}

	section#ep2 ul li:nth-child(1) h3{
		margin:0 0 30px 0;
	}
	section#ep2 ul li:nth-child(1) h3 span{
		font-size:12px;
		padding:0;
		border:none;
	}
	section#ep2 li:nth-child(1) ul {
		margin:auto;
		padding:0;
		display:flex;
		flex-wrap:wrap;
		margin-bottom:30px;
	}

	section#ep2 li:nth-child(1) ul dt{
		width:18%;
		margin:0 2% 2% 0;
	}

	section#ep2 li:nth-child(1) dl{
	font-size:90%;
	}

	section#ep2 ul li:nth-child(2){
		display:none;
	}

}



/* detail
==============================*/

section#detail{
	width:100%;
	margin:0 auto;
}


section#detail li{
	width:100%;
	height:100vh;
	min-height:900px;
	margin:0 auto;
	list-style:none;
}

section#detail li dl{
	width:80vw;
	max-width:1200px;
	height:100vh;
	margin:0 auto;
	position:relative;
}

section#detail li dl dt.logo{
	width:17vw;
	max-width:220px;
	left:0;
	top:5vh;
	position:absolute;
	z-index:2;
}
section#detail li dl dt.logo img{
	width:100%;
	overflow:hidden;
}

section#detail li dl dt.img{
	width:80vw;
	max-width:1200px;
	height:60vh;
	left:0;
	top:20vh;
	bottom;0
	right:0;
	margin:auto;
	position:absolute;
	overflow:hidden;
}

section#detail li dl dt.img img{
	width:80vw;
	max-width:1200px;
}

section#detail li:nth-of-type(1) dl dt.img{
	background-image:url("../img/detail_img_a.jpg");
	background-size:cover;
	}
section#detail li:nth-of-type(2) dl dt.img{
	background-image:url("../img/detail_img_b.jpg");
	background-size:cover;
	}
section#detail li:nth-of-type(3) dl dt.img{
	background-image:url("../img/detail_img_c.jpg");
	background-size:cover;
	}
section#detail li:nth-of-type(4) dl dt.img{
	background-image:url("../img/detail_img_d.jpg");
	background-size:cover;
	}
section#detail li:nth-of-type(5) dl dt.img{
	background-image:url("../img/detail_img_e.jpg");
	background-size:cover;
	}
section#detail li:nth-of-type(6) dl dt.img{
	background-image:url("../img/detail_img_f.jpg");
	background-size:cover;
	}
section#detail li:nth-of-type(7) dl dt.img{
	background-image:url("../img/detail_img_g.jpg");
	background-size:cover;
	}
section#detail li:nth-of-type(8) dl dt.img{
	background-image:url("../img/detail_img_h.jpg");
	background-size:cover;
	}
section#detail li:nth-of-type(9) dl dt.img{
	background-image:url("../img/detail_img_i.jpg");
	background-size:cover;
	}
section#detail li:nth-of-type(10) dl dt.img{
	background-image:url("../img/detail_img_j.jpg");
	background-size:cover;
	}
	
section#detail li dl dd{
	width:30vw;
	max-width:600px;
	position:absolute;
	z-index:2;
	bottom:5vh;
	right:0;
	background:#fff;
	padding:3% 0 3% 3%;
}


@media screen and (max-width: 768px) {
	section#detail li dl{
		width:80vw;
	}

	section#detail li dl dt.logo{
		width:30vw;
		max-width:500px;
	}

	section#detail li dl dt.img{
		width:80vw;
		height:70vh;
		top:10vh;
	}
	section#detail li dl dd{
		width:55vw;
		padding:5% 0 5% 5%;
	}

	section#detail li dl dt.img{
		background-size:80vw;
	}
	
	section#detail li:nth-of-type(1) dl dt.img{
		background-image:url("../img/detail_img_a_sp.jpg");
	}
	section#detail li:nth-of-type(2) dl dt.img{
		background-image:url("../img/detail_img_b_sp.jpg");
	}
	section#detail li:nth-of-type(3) dl dt.img{
		background-image:url("../img/detail_img_c_sp.jpg");
	}
	section#detail li:nth-of-type(4) dl dt.img{
		background-image:url("../img/detail_img_d_sp.jpg");
	}
	section#detail li:nth-of-type(5) dl dt.img{
		background-image:url("../img/detail_img_e_sp.jpg");
	}
	section#detail li:nth-of-type(6) dl dt.img{
		background-image:url("../img/detail_img_f_sp.jpg");
	}
	section#detail li:nth-of-type(7) dl dt.img{
		background-image:url("../img/detail_img_g_sp.jpg");
	}
	section#detail li:nth-of-type(8) dl dt.img{
		background-image:url("../img/detail_img_h_sp.jpg");
	}
	section#detail li:nth-of-type(9) dl dt.img{
		background-image:url("../img/detail_img_i_sp.jpg");
	}
	section#detail li:nth-of-type(10) dl dt.img{
		background-image:url("../img/detail_img_j_sp.jpg");
	}
}

@media screen and (max-width: 508px) {
	section#detail li{
		min-height:inherit;
		margin:0 auto;
	}

	section#detail li dl{
		width:80vw;
	}
	section#detail li dl dd{
		width:70vw;
	}
	section#detail li:nth-of-type(1) dl dt.img{
		background-image:url("../img/detail_img_a_sp2.jpg");
	}
	section#detail li:nth-of-type(2) dl dt.img{
		background-image:url("../img/detail_img_b_sp2.jpg");
	}
	section#detail li:nth-of-type(3) dl dt.img{
		background-image:url("../img/detail_img_c_sp2.jpg");
	}
	section#detail li:nth-of-type(4) dl dt.img{
		background-image:url("../img/detail_img_d_sp2.jpg");
	}
	section#detail li:nth-of-type(5) dl dt.img{
		background-image:url("../img/detail_img_e_sp2.jpg");
	}
	section#detail li:nth-of-type(6) dl dt.img{
		background-image:url("../img/detail_img_f_sp2.jpg");
	}
	section#detail li:nth-of-type(7) dl dt.img{
		background-image:url("../img/detail_img_g_sp2.jpg");
	}
	section#detail li:nth-of-type(8) dl dt.img{
		background-image:url("../img/detail_img_h_sp2.jpg");
	}
	section#detail li:nth-of-type(9) dl dt.img{
		background-image:url("../img/detail_img_i_sp2.jpg");
	}
	section#detail li:nth-of-type(10) dl dt.img{
		background-image:url("../img/detail_img_j_sp2.jpg");
	}

}


/* FOOTER
==============================*/
section#footer{
	width:100vw;
	height:100vh;
	position:relative;
}


section#footer ul{
	width:35vw;
	max-width:400px;
	height:45vh;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	z-index:100;
}

section#footer ul dt:nth-of-type(1){
	width:25vw;
	max-width:300px;
	overflow:hidden;
	margin:0 auto;
}

section#footer ul dt:nth-of-type(1) img{
	width:25vw;
	max-width:300px;
	margin:0 0 2vh 0;
}

section#footer ul dt:nth-of-type(1) a{
	height:100%;
	width:100%;
	display:block;
}

section#footer ul dt:nth-of-type(2){
	width:35vw;
	max-width:400px;
	overflow:hidden;
}

section#footer ul dt:nth-of-type(2) img{
	width:35vw;
	max-width:400px;
	margin:0 0 2vh 0;
}


section#footer ul dd{
	font-size:90%;
	font-feature-settings: "palt";
	letter-spacing:0;
	line-height:1.78em;
}


section#footer .copy{
	font-size:11px;
	width:100%;
	position:absolute;
	bottom:10px;
	text-align:center;
}


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

	section#footer ul{
		width:60vw;
	}
	section#footer ul dt:nth-of-type(1){
		width:40vw;
	}
	section#footer ul dt:nth-of-type(1) img{
		width:40vw;
	}
	section#footer ul dt:nth-of-type(2){
		width:60vw;
	}
	section#footer ul dt:nth-of-type(2) img{
		width:60vw;
	}
	section#footer ol{
	font-size:7px;
	}
}