@charset "utf-8";

.contents01 .text01::after{
	position: absolute;
	top: 20px;
	bottom: auto;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	animation: pathmove 3.0s ease-in-out infinite;
}
.mv .text01::after{
	position: absolute;
	top: 25px;
	bottom: auto;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	animation: pathmove 3.0s ease-in-out infinite;
}
@keyframes pathmove{
	0%{
		height: 0;
		top: 20px;
		opacity: 0;
	}
	50%{
		height: 30px;
		opacity: 1;
	}
	100%{
		height: 0;
		top: 60px;
		opacity: 0;
	}
}

.open{
	width: auto;
	height: auto;
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1000;
	overflow: hidden;
}
.open.none{
	display: none;
}
/*.open::before{
	content: '';
	width: 100%;
	height: 100%;
	background-image:
	radial-gradient(#F9AD2B 20%, transparent 20%),
	radial-gradient(#F9AD2B 20%, transparent 20%);
	background-size: 70px 70px;
	background-position: 0 0, 35px 35px;
	background-color: #F9A519;
	position: absolute;
	top: 0;
	bottom: auto;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
	transition: top 1s ease-in-out .5s;

}
.open.hide::before{
	top: 100%;
	transition: top 1s ease-in-out .5s;
}
.open::after{
	content: '';
	width: 100%;
	height: 100%;
	background-image:
	radial-gradient(#FFF7DA 20%, transparent 20%),
	radial-gradient(#FFF7DA 20%, transparent 20%);
	background-size: 70px 70px;
	background-position: 0 0, 35px 35px;
	background-color: #FFFCE8;
	position: absolute;
	top: 0;
	bottom: auto;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 0;
	transition: top 1s ease-in-out 1.5S;
}
.open.hide::after{
	top: 100%;
	transition: top 1s ease-in-out 1.5S;
}*/
.open .open01{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: auto;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
	transition: top 0.9s ease-in-out 0.75s;
}
.open.hide .open01{
	top: 100%;
	transition: top 0.9s ease-in-out 0.75s;
}
.open .open01 .img00{
	width: 350px;
	height: auto;
	margin: 0;
	transform: scale(0.8,0.8);
	display: block;
	opacity: 0;
	transition: transform 0.4s ease-in-out .5s, opacity 0.3s ease-in-out .5s;
}
@media only screen and (max-width: 767px) {
	.open .open01 .img00{
		width: 209px;
	}
}
.open .open01.active .img00{
	transform: scale(1.0,1.0);
	opacity: 1;
	transition: transform 0.4s ease-in-out .5s, opacity 0.3s ease-in-out .5s;
}
.open .before{
	content: '';
	width: 100%;
	height: 100%;
	background-image:
	radial-gradient(#F9AD2B 20%, transparent 20%),
	radial-gradient(#F9AD2B 20%, transparent 20%);
	background-size: 70px 70px;
	background-position: 0 0, 35px 35px;
	background-color: #F9A519;
	position: absolute;
	top: 0;
	bottom: auto;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
	transition: top 1s ease-in-out .5s;
}
@media only screen and (max-width: 767px) {
	.open .before{
		background-size: 40px 40px;
		background-position: 0 0, 20px 20px;
	}
}
.open.hide .before{
	top: 100%;
	transition: top 1s ease-in-out .5s;
}
.open .after{
	content: '';
	width: 100%;
	height: calc(100% + 9.2%);
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 0;
	transition: top 1s ease-in-out 1.5s;
}
@media only screen and (max-width: 767px) {
	.open .after{
		height: calc(100% + 8.5%);
	}
}
.open .after::before{
	content: '';
	width: 100%;
	height: auto;
	padding-top: 9.2%;
	margin: 0 auto;
	mask-image: url(../img/index/anime_bg.svg);
	-webkit-mask-image: url(../img/index/anime_bg.svg);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: top center;
	-webkit-mask-position: top center;
	mask-size: cover;
	-webkit-mask-size: cover;
	background-image:
	radial-gradient(#FFF7DA 20%, transparent 20%),
	radial-gradient(#FFF7DA 20%, transparent 20%);
	background-size: 70px 70px;
	background-position: 0 0, 35px 35px;
	background-color: #FFFCE8;
	display: block;
}
@media only screen and (max-width: 767px) {
	.open .after::before{
		padding-top: 8.5%;
		margin: -8.5% 0 0;
		mask-image: url(../img/index/anime_bg_sp.svg);
		-webkit-mask-image: url(../img/index/anime_bg_sp.svg);
		background-size: 40px 40px;
		background-position: 0 0, 20px 20px;
	}
}
.open .after::after{
	content: '';
	width: 100%;
	height:100%;
	margin: 0 auto;
	background-image:
	radial-gradient(#FFF7DA 20%, transparent 20%),
	radial-gradient(#FFF7DA 20%, transparent 20%);
	background-size: 70px 70px;
	background-position: 0 0, 35px 35px;
	background-color: #FFFCE8;
	display: block;
}
@media only screen and (max-width: 767px) {
	.open .after::after{
		background-size: 40px 40px;
		background-position: 0 0, 20px 20px;
	}
}
.open.hide .after{
	transition: top 1s ease-in-out 1.5s;
}
.open .clear{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: auto;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 3;
}
main .mv .mv_01{
	margin-top: -50px;
	transition: margin-top 1s ease-in-out 2.0s;
}
main.active .mv .mv_01{
	margin-top: 0;
	transition: margin-top 1s ease-in-out 2.0s;
}

main .mv .mv_01 .item_bg .item {
	opacity: 0;
	transform: scale(0.5);
	transition: all 1s ease-in-out 2.0s;
}
main.active .mv .mv_01 .item_bg .item{
	opacity: 1;
	transform: scale(1);
	transition: all 2s ease-in-out 2.0s;
}
main .mv .mv_01 .item_bg .item01,
main .mv .mv_01 .item_bg .item02,
main .mv .mv_01 .item_bg .item03 {
	top: 0;
	right: 0;
}
main.active .mv .mv_01 .item_bg .item01 {
	top: -195px;
	right: 538px;
}
main.active .mv .mv_01 .item_bg .item02{
	top: -80px;
	right: 224px;
}
main.active .mv .mv_01 .item_bg .item03 {
	top: 147px;
	right: 417px;
}
main .mv .mv_01 .item_bg .item04,
main .mv .mv_01 .item_bg .item05 {
	top: 0;
	left: 0;
}
main.active .mv .mv_01 .item_bg .item04 {
	top: -110px;
	left: 251px;
}
main.active .mv .mv_01 .item_bg .item05 {
	top: 58px;
	left: 511px;
}