/*====================================================================================

		header nav layout

====================================================================================*/

header .drawer_nav_wrapper.open ul.drawer_nav {
	/*will-change: animation;*/
	animation: anime_nav 0.8s cubic-bezier(0.32, 0.1, 0, 1) 0s forwards;
}

@keyframes anime_nav {
	0%{
		transform: translate(110%);
		opacity: 0;
	}
	100%{
		transform: translate(0);
	}
	40%,100% {
		opacity: 1;
	}
}


header .drawer_nav_wrapper.open ul.drawer_nav li {
	/*will-change: animation;*/
}

header .drawer_nav_wrapper.open ul.drawer_nav li:nth-child(1) {
	animation: anime_nav_li 0.8s cubic-bezier(0.32, 0.1, 0, 1) 0.2s forwards;
}

header .drawer_nav_wrapper.open ul.drawer_nav li:nth-child(2) {
	animation: anime_nav_li 0.8s cubic-bezier(0.32, 0.1, 0, 1) 0.25s forwards;
}

header .drawer_nav_wrapper.open ul.drawer_nav li:nth-child(3) {
	animation: anime_nav_li 0.8s cubic-bezier(0.32, 0.1, 0, 1) 0.3s forwards;
}

header .drawer_nav_wrapper.open ul.drawer_nav li:nth-child(4) {
	animation: anime_nav_li 0.8s cubic-bezier(0.32, 0.1, 0, 1) 0.35s forwards;
}

header .drawer_nav_wrapper.open ul.drawer_nav li:nth-child(5) {
	animation: anime_nav_li 0.8s cubic-bezier(0.32, 0.1, 0, 1) 0.4s forwards;
}

header .drawer_nav_wrapper.open ul.drawer_nav li:nth-child(6) {
	animation: anime_nav_li 0.8s cubic-bezier(0.32, 0.1, 0, 1) 0.45s forwards;
}

@keyframes anime_nav_li {
	0%{
		transform: translateX(100px);
		opacity: 0;
	}
	100%{
		transform: translate(0);
		opacity: 1;
	}
}




/*====================================================================================

		#top .main_img text line animation

====================================================================================*/

#top header .main_img .main_slider .item p .txt_cover {
	height: min(100px, 10vw);
	display: inline-block;
	position: relative;
	overflow: hidden;
}

#top header .main_img .main_slider .item p .txt_cover.mt {
	margin: min(10px, 1rem) 0 0;
}

#top header .main_img .main_slider .item p .txt_cover::before {
	content: "";
	width: 0;
	height: 105%;
	background: var(--color_orange);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 0;
	animation: txt_cover 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.4s forwards;
}

@keyframes txt_cover {
	0%{
		left: 0;
		opacity: 1;
	}
	30%{
		width: 100%;
		left: 0;
		opacity: 1;
	}
	90%{
		opacity: 1;
	}
	100%{
		width: 0;
		left: 102%;
		opacity: 0;
	}
}



#top header .main_img .main_slider .item p .anime_txt {
	overflow: hidden;
	color: transparent;
	animation: anime_txt 0.3s ease-out 0.8s forwards;
}

@keyframes anime_txt {
	0%{
		opacity: 0;
	}
	100%{
		color: #fff;
		text-shadow: 0 0 10px rgba(0,0,0,0.9);
		opacity: 1;
	}
}


/*アニメーション要素のスタイル*/
#contents section{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(100px);
}
/*アニメーション要素までスクロールした時のスタイル*/
#contents section.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}