/* head-anime ---------------------------------------------------------------------------------------------- */
.mvbg01 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity : 1;
	transform : translate(0, 0);
	transition : all 1s;
	z-index: 9999;
}
.mvbg01.active{
	position: absolute;
	top: 0;
	left: 0;
	animation-name: fade-in-mvbg01;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	
}
@keyframes fade-in-mvbg01 {
	0% {
		transform : translateX(0%);
	}
	60% {
		transform : translateX(-100%);
	}
	100% {
		transform : translateX(-100%);
	}
}
.mvbg02 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity : 1;
	transform : translate(0, 0);
	transition : all 1s;
	z-index: 9999;
}
.mvbg02.active{
	position: absolute;
	top: 0;
	left: 0;
	animation-name: fade-in-mvbg02;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	
}
@keyframes fade-in-mvbg02 {
	0% {
		transform : translateX(0%);
	}
	60% {
		transform : translateX(100%);
	}
	100% {
		transform : translateX(100%);
	}
}
.display {
	opacity : 1;
	transform : translateX(-100%);
	transition : all 0.5s;
}
.display.active{
	opacity : 1;
	transform : translateX(0%);
}

.gbc-mv{
	background: #FAF6ED;
	background-size: 200% 200%;
	animation: bggradient 3s linear infinite;
}
@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.op-img {
	animation-name: op-img;
	animation-duration: 5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes op-img {
	0% {
		opacity: 0;
		transform: scale(1.1);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.fade01-1 {
	animation-name: mv01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade01-2 {
	animation-name: mv01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade01-3 {
	animation-name: mv01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade01-4 {
	animation-name: mv01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.6s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade01-5 {
	animation-name: mv01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.8s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade01-6 {
	animation-name: mv01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv01 {
	0% {
		opacity: 0;
		transform: translateY(30%);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.fade02 {
	animation-name: mv02;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv02 {
	0% {
		opacity: 0;
		transform: translateY(30%);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.fade02-2 {
	animation-name: mv02-2;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv02-2 {
	0% {
		opacity: 0;
		transform: translateX(-120%);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.fade03 {
	animation-name: mv03;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv03 {
	0% {
		opacity: 0;
		transform: translateX(-10%);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
.fade04 {
	animation-name: mv04;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv04 {
	0% {
		opacity: 0;
		transform: translateX(10%);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.fade05 {
	animation-name: mv05;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: 3.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv05 {
	0% {
		opacity: 0;
		transform: translateX(10%);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.fade06 {
	animation-name: mv06;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: 3.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv06 {
	0% {
		opacity: 0;
		transform: translateX(-10%);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
.fade07 {
	animation-name: mv07;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv07 {
	0% {
		opacity: 0;
		transform: translateY(-120%);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}



/* body-anime ---------------------------------------------------------------------------------------------- */
.fadein-up {
	opacity : 0;
}
.fadein-up.active{
	opacity : 1;
	animation-name: fadein-up;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-up {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.fadein-up1 {
	opacity : 0;
}
.fadein-up1.active{
	opacity : 1;
	animation-name: fadein-up1;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadein-up2 {
	opacity : 0;
}
.fadein-up2.active{
	opacity : 1;
	animation-name: fadein-up1;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadein-up3 {
	opacity : 0;
}
.fadein-up3.active{
	opacity : 1;
	animation-name: fadein-up1;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-up1 {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.fadein-l {
	opacity : 0;
}
.fadein-l.active{
	opacity : 1;
	animation-name: fadein-l;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-l {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.fadein-r {
	opacity : 0;
}
.fadein-r.active{
	opacity : 1;
	animation-name: fadein-r;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-r {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.fadein-up-zoom {
	opacity : 0;
}
.fadein-up-zoom.active{
	opacity : 1;
	animation-name: fadein-up-zoom;
	animation-duration: 4s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-up-zoom {
	0% {
		opacity: 0;
		transform: scale(1.1);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.fadein-bg {
	opacity : 0;
}
.fadein-bg.active{
	opacity : 1;
	animation-name: fadein-bg;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-bg {
	0% {
		opacity: 1;
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.line-ani01 {
	opacity : 0;
}
.line-ani01.active{
	opacity : 1;
	animation-name: line-ani01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes line-ani01 {
	0% {
		opacity: 0;
		transform: translateX(120%);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
.line-ani02 {
	opacity : 0;
}
.line-ani02.active{
	opacity : 1;
	animation-name: line-ani02;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes line-ani02 {
	0% {
		opacity: 1;
		transform: translateY(-100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.fadein-zoom {
	opacity : 0;
}
.fadein-zoom.active{
	opacity : 1;
	animation-name: fadein-zoom;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-zoom {
	0% {
		opacity: 0;
		transform: scale(1.1) rotate(-30deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}



.icon-ani {
	opacity : 0;
}
.icon-ani.active{
	opacity : 1;
	animation-name: icon-ani;
	animation-duration: .5s;
	animation-timing-function: ease-in;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes icon-ani {
	0% {
		opacity: 1;
		transform: rotate(15deg) scale(1.3);
	}
	100% {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
}

.txt-ani01 {
	opacity : 0;
}
.txt-ani01.active{
	opacity : 1;
	animation-name: txt-ani;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.txt-ani02 {
	opacity : 0;
}
.txt-ani02.active{
	opacity : 1;
	animation-name: txt-ani;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .7s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.txt-ani03 {
	opacity : 0;
}
.txt-ani03.active{
	opacity : 1;
	animation-name: txt-ani;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .9s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.txt-ani04 {
	opacity : 0;
}
.txt-ani04.active{
	opacity : 1;
	animation-name: txt-ani;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.txt-ani05 {
	opacity : 0;
}
.txt-ani05.active{
	opacity : 1;
	animation-name: txt-ani;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.3s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes txt-ani {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}



/* marker */
.marker-color00{
	background-image: linear-gradient(90deg, rgba(230,205,213,1), rgba(230,205,213,1));
}
.marker-color00-1{
	background-image: linear-gradient(90deg, rgba(57,84,113,.6), rgba(57,84,113,.6));
}
.marker-color00-2{
	background-image: linear-gradient(90deg, rgba(213,213,212,.6), rgba(213,213,212,.6));
}
.marker-color01{
	background-image: linear-gradient(90deg, rgba(221,218,219,1), rgba(221,218,219,1));
}
.marker-color02{
	background-image: linear-gradient(90deg, rgba(239,213,206,1), rgba(239,213,206,1));
}
.marker-color03{
	background-image: linear-gradient(90deg, rgba(170,149,151,1), rgba(170,149,151,1));
}
.marker-color04{
	background-image: linear-gradient(90deg, rgba(185,222,209,1), rgba(185,222,209,1));
}
.marker-color05{
	background-image: linear-gradient(90deg, rgba(230,236,126,1), rgba(230,236,126,1));
}
.marker-color06{
	background-image: linear-gradient(90deg, rgba(45,120,213,1), rgba(45,120,213,1));
}
.marker-color07{
	background-image: linear-gradient(90deg, rgba(35,24,21,1), rgba(35,24,21,1));
}
.marker-color08{
	background-image: linear-gradient(90deg, rgba(31,56,94,1), rgba(31,56,94,1));
}
.marker{
	display: inline;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 10px;
	padding: 0 10px 6px 10px;
	transition: all 2s ease;
}
.marker.active {
	background-size: 100% 10px;
}
.marker-txt{
	display: inline;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 10px;
	padding: 0 2px 2px 5px;
	transition: all 2s ease;
}
.marker-txt.active {
	background-size: 100% 10px;
}



/*//////////////////////////////// for iphone ////////////////////////////*/
@media (min-width:0px) and ( max-width:766px) {

	.marker-txt{
		display: inline;
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 0 5px;
		padding: 0 2px 0px 5px;
		transition: all 2s ease;
	}
	.marker-txt.active {
		background-size: 100% 5px;
	}
}