@charset "utf-8";
	.opening{ position: fixed; background: #fff; left: 0; right: 0; bottom: 0; z-index: 1000; display: block; top: 0;}
	.start .opening{ animation: opening 6s linear 0s both; -webkit-animation: opening 6s linear 0s both; -moz-animation: opening 6s linear 0s both;}
.layerBox .skipBox{ animation: opening2 6s linear 0s both; -webkit-animation: opening2 6s linear 0s both; -moz-animation: opening2 6s linear 0s both;}
	.skipBox{ position: fixed; bottom: 10px; right: 10px; z-index: 1000;}
	.skipBtn{ display: inline-block; background: #333; padding: 5px 15px; color: #fff; line-height: 1em; cursor: pointer;}
/*	.opening::before,*/
	.mvInner img,
	.mvBox::after{ visibility: hidden;}
/*	.start .opening::before,*/
	.start .mvInner img,
	.start .mvBox::after{ visibility: visible;}
	.mvBox{ height: 100vh; position: relative; z-index: 100; overflow: hidden;padding-top: 60px;}
/*	.opening::before{ content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; z-index: 1500; display: block;}*/
/*	.mvBox::before,*/
	.mvBox::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; z-index: 150;}
/*
	.opening::before { background-position: 50% 50%; top: 0; left: 0; background-size: 70%; background-image: url(../img/seane03.png); }
	.start .opening::before { animation: mvAnime3 6s linear 0s both; -webkit-animation: mvAnime3 6s linear 0s both; -moz-animation: mvAnime3 6s linear 0s both;}
*/
	.mvInner{ height: 100vh; display: flex; padding: 10px 15%; position: relative;}
	.mvInner img{ width: 100%; background: url(../../image/top/seane02.png) no-repeat 50% 50% / contain;}
/*	.mvInner img { background-image: url(../img/seane02.png); background-position: 50% 50%; background-size: 70%; background-repeat: no-repeat;}*/
	.start .mvInner img { animation: mvAnime2 6s linear 0s both; -webkit-animation: mvAnime2 6s linear 0s both; -moz-animation: mvAnime2 6s linear 0s both;}
	.mvBox:after{ background-image: url(../../image/top/seane01.png); background-size: 300%;}
	.start .mvBox::after{ animation: mvAnime 6s linear 0s both; -webkit-animation: mvAnime 6s linear 0s both; -moz-animation: mvAnime 6s linear 0s both;}

@keyframes mvAnime3{
	0% { opacity: 0;}
	80% { opacity: 0;}
	100% { opacity: 1;}
}
@-webkit-keyframes mvAnime3{
	0% { opacity: 0;}
	80% { opacity: 0;}
	100% { opacity: 1;}
}
@-moz-keyframes mvAnime3{
	0% { opacity: 0;}
	80% { opacity: 0;}
	100% { opacity: 1;}
}
@keyframes mvAnime2{
	0%,
	28%{ transform: scale(0.9) translateY(-120%);}
	30%{ transform: scale(0.9) translateY(-110%);}
	45%,
	50%{ transform: scale(0.9) translateY(0);}
	70%,
	100%{ transform: scale(1) translateY(0);}
}
@-webkit-keyframes mvAnime2{
	0%,
	28%{ transform: scale(0.9) translateY(-120%);}
	30%{ transform: scale(0.9) translateY(-110%);}
	45%,
	50%{ transform: scale(0.9) translateY(0);}
	70%,
	100%{ transform: scale(1) translateY(0);}
}
@-moz-keyframes mvAnime2{
	0%,
	28%{ transform: scale(0.9) translateY(-120%);}
	30%{ transform: scale(0.9) translateY(-110%);}
	45%,
	50%{ transform: scale(0.9) translateY(0);}
	70%,
	100%{ transform: scale(1) translateY(0);}
}
@keyframes mvAnime{
	0%,
	3%{ background-position: -10% 50%; top: 0;}
	28%,
	30%{ background-position: 110% 50%; top: 0;}
	45%,
	100%{ background-position: 110% 50%; top: 100%;}
}
@-webkit-keyframes mvAnime{
	0%,
	3%{ background-position: -10% 50%; top: 0;}
	28%,
	30%{ background-position: 110% 50%; top: 0;}
	45%,
	100%{ background-position: 110% 50%; top: 100%;}
}
@-moz-keyframes mvAnime{
	0%,
	3%{ background-position: -10% 50%; top: 0;}
	28%,
	30%{ background-position: 110% 50%; top: 0;}
	45%,
	100%{ background-position: 110% 50%; top: 100%;}
}
@keyframes opening{
	0%,
	94%{ opacity: 1;  z-index: 1000; display: block; top: 0;}
	99%{ opacity: 0; z-index: -1; display: block; top: 0;}
	100%{ opacity: 0; z-index: -1; display: none; top: auto;}
}
@-webkit-keyframes opening{
	0%,
	94%{ opacity: 1;  z-index: 1000; display: block; top: 0;}
	99%{ opacity: 0; z-index: -1; display: block; top: 0;}
	100%{ opacity: 0; z-index: -1; display: none; top: auto;}
}
@-moz-keyframes opening{
	0%,
	94%{ opacity: 1;  z-index: 1000; display: block; top: 0;}
	99%{ opacity: 0; z-index: -1; display: block; top: 0;}
	100%{ opacity: 0; z-index: -1; display: none; top: auto;}
}

@keyframes opening2{
	0%,
	94%{ opacity: 1;  z-index: 1000; display: block;}
	99%{ opacity: 0; z-index: -1; display: block;}
	100%{ opacity: 0; z-index: -1; display: none;}
}
@-webkit-keyframes opening2{
	0%,
	94%{ opacity: 1;  z-index: 1000; display: block;}
	99%{ opacity: 0; z-index: -1; display: block;}
	100%{ opacity: 0; z-index: -1; display: none;}
}
@-moz-keyframes opening2{
	0%,
	94%{ opacity: 1;  z-index: 1000; display: block;}
	99%{ opacity: 0; z-index: -1; display: block;}
	100%{ opacity: 0; z-index: -1; display: none;}
}
/* SP */
@keyframes mvAnime2sp{
	0%,
	25%{ background-position: 50% -250%; top: -100%; transform: scale(0.8);}
	30%{ background-position: 50% -60%; top: -100%; transform: scale(0.8)}
	40%,
	50%{ background-position: 50% 50%; top: 0; transform: scale(0.8)}
	70%,
	100%{ background-position: 50% 50%; top: 0; transform: scale(0.9)}
}
@-webkit-keyframes mvAnime2sp{
	0%,
	25%{ background-position: 50% -250%; top: -100%; transform: scale(0.8);}
	30%{ background-position: 50% -60%; top: -100%; transform: scale(0.8)}
	40%,
	50%{ background-position: 50% 50%; top: 0; transform: scale(0.8)}
	70%,
	100%{ background-position: 50% 50%; top: 0; transform: scale(0.9)}
}
@-moz-keyframes mvAnime2sp{
	0%,
	25%{ background-position: 50% -250%; top: -100%; transform: scale(0.8);}
	30%{ background-position: 50% -60%; top: -100%; transform: scale(0.8)}
	40%,
	50%{ background-position: 50% 50%; top: 0; transform: scale(0.8)}
	70%,
	100%{ background-position: 50% 50%; top: 0; transform: scale(0.9)}
}
@media only screen and (max-width: 767px){
	/* .opening{ display: none;}
	.mainVisual::before{ content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 25; transition: all .3s; -webkit-transition: all .3s; visibility: visible;}
	.mainVisual.start::before{ z-index: -1; visibility: hidden;} */
	.layerBox{ position: relative; z-index: 10; overflow: hidden; display: flex; align-items: center; padding: 95px 15px;}
	/* .layerBox:before,
	.layerBox::after, */
	.layerBox>img{ /* visibility: hidden; */ max-width: 100%;}
	/*.start .layerBox:before,
	.start .layerBox::after,
	.start .layerBox>img{ visibility: visible;} */
	
	/* .layerBox:before,
	.layerBox::after{ content: ''; position: absolute; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; z-index: 150; top: 0;} */
	.layerBox>img { background-position: 50% 50%; background-size: 90%; top: 0; background-image: url(../../image/top/seane03.png); }
	/* .start .layerBox>img{ animation: mvAnime3 6s linear 0s both; -webkit-animation: mvAnime3 6s linear 0s both; -moz-animation: mvAnime3 6s linear 0s both;}
	.layerBox::before { background-image: url(../../image/top/seane02.png); background-position: 50% 50%; background-size: contain;}
	.start .layerBox::before { animation: mvAnime2sp 6s linear 0s both; -webkit-animation: mvAnime2sp 6s linear 0s both; -moz-animation: mvAnime2sp 6s linear 0s both;}
	.layerBox::after{ background-size: 300%; background-image: url(../../image/top/seane01.png);}
	.start .layerBox::after{ animation: mvAnime 6s linear 0s both; -webkit-animation: mvAnime 6s linear 0s both; -moz-animation: mvAnime 6s linear 0s both;} */
	
	.skipBox{ position: absolute; bottom: 10px; right: 10px; z-index: 1000;}
	/* .skip */ .layerBox>img { background-size: 95%!important; background-image: url(../../image/top/seane04.png)!important; background-repeat: no-repeat!important; animation: none; -webkit-animation: none; -moz-animation: none;}
	/* .skip */ .layerBox:before,
	/* .skip */ .layerBox::after{ display: none;}
}