@charset "utf-8";

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

		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;
	}
}

/*
header .drawer_nav_wrapper.open ul.drawer_nav li:nth-child(1) {
	animation: anime_nav_li 0.8s cubic-bezier(0.37, 0, 0.63, 1) 0s forwards;
}

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

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

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

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

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

@keyframes anime_nav_li {
	0%{
		clip-path: inset(0 0 0 100%);
	}
	100%{
		clip-path: inset(0);
	}
}
*/





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

		text line animation

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

header .main_img .box dl dt.on .txt_cover::before {
	animation: txt_cover 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
}

#interview #contents .detail .txt_01 p.caption.on .txt_cover::before {
	animation: txt_cover 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
}

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


header .main_img .box dl dt.on .anime_txt {
	animation: anime_txt 0.3s ease-out 0.3s forwards;
}

#interview #contents .detail .txt_01 p.caption.on .anime_txt {
	animation: anime_txt_02 0.3s ease-out 0.3s forwards;
}

@keyframes anime_txt {
	0%{
		color: transparent;
	}
	50%{
		color: transparent;
	}
	100%{
		color: #000;
	}
}

@keyframes anime_txt_02 {
	0%{
		color: transparent;
	}
	50%{
		color: transparent;
	}
	100%{
		color: #fff;
	}
}


header .main_img .box dl dt.on .anime_txt::before {
	animation: txt_cover_02 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.3s forwards;
}

#interview #contents .detail .txt_01 p.caption.on .anime_txt::before {
	animation: txt_cover_02 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.3s forwards;
}

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




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