@charset "UTF-8";

.animation-fadein {
	position: relative;
	transition: all cubic-bezier(0.65, 0, 0.2, 1) 1s;
	opacity: 0;
}
.animation-fadein.active {
	opacity: 1;
}

.animation-txt-cover {
	display: inline-block;
	position: relative;
	color: transparent;
	transition: color 0s .5s;
}
.animation-txt-cover .t1a,
.animation-txt-cover .t2a {
	color: transparent;
	transition: color 0s .5s;
	font-size: 42px;
}
.animation-txt-cover .t1b,
.animation-txt-cover .t2b {
	color: transparent;
	transition: color 0s .5s;
	font-size: 24px;
}
.animation-txt-cover.active {
	color: #fff;
}
.animation-txt-cover.active .t1a,
.animation-txt-cover.active .t1b { color: #ff7373;}
.animation-txt-cover.active .t2a,
.animation-txt-cover.active .t2b { color: #77ddff;}

@media only screen and (max-width: 768px) {
	.animation-txt-cover .t1a,
	.animation-txt-cover .t2a {
		font-size: 20px;
	}
	.animation-txt-cover .t1b,
	.animation-txt-cover .t2b {
		font-size: 16px;
	}
}
.animation-txt-cover::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left top;
}
.animation-txt-cover.active::before {
	animation: txt_cover cubic-bezier(0.65, 0, 0.2, 1) 1s forwards;
}

@keyframes txt_cover {
	0% {
		transform: scaleX(0);
		transform-origin: left top;
	}
	49% {
		transform: scaleX(1);
		transform-origin: left top;
	}
	51% {
		transform: scaleX(1);
		transform-origin: right top;
	}
	100% {
		transform: scaleX(0);
		transform-origin: right top;
	}
}

.animation-txt-cover-02 {
	display: inline-block;
	position: relative;
	color: transparent;
	transition: color 0s .6s;
	padding: 1px;
}
.animation-txt-cover-02 .t1,
.animation-txt-cover-02 .t2,
.animation-txt-cover-02 .t3,
.animation-txt-cover-02 .t4,
.animation-txt-cover-02 .t5,
.animation-txt-cover-02 .t6,
.animation-txt-cover-02 .t7,
.animation-txt-cover-02 .t8,
.animation-txt-cover-02 .t9 {
	color: transparent;
	transition: color 0s .6s;
}
.animation-txt-cover-02.active {
	color: #fff;
}
.animation-txt-cover-02.active .t1 { color: #e7796c;}
.animation-txt-cover-02.active .t2 { color: #73d4e5;}
.animation-txt-cover-02.active .t3 { color: #35cabb;}
.animation-txt-cover-02.active .t4 { color: #3eb679;}
.animation-txt-cover-02.active .t5 { color: #f8df00;}
.animation-txt-cover-02.active .t6 { color: #e15d4c;}
.animation-txt-cover-02.active .t7 { color: #e581a1;}
.animation-txt-cover-02.active .t8 { color: #7ac5d1;}
.animation-txt-cover-02.active .t9 { color: #92b024;}

.animation-txt-cover-02::before,
.animation-txt-cover-02::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	z-index: 2;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left top;
}
.animation-txt-cover-02::after {
	top: 50%;
}
.animation-txt-cover-02.active::before {
	animation: txt_cover cubic-bezier(0.65, 0, 0.2, 1) 1s forwards;
}
.animation-txt-cover-02.active::after {
	animation: txt_cover cubic-bezier(0.65, 0, 0.2, 1) 1s .15s forwards;
}

.animation-txt-cover-03 {
	display: inline-block;
	position: relative;
}
.animation-txt-cover-03.active {
}
.animation-txt-cover-03::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100.5%;
	height: 100.5%;
	z-index: 2;
	background: #eee;
	transform-origin: right top;
	transform: scaleX(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) .5s .5s;
}
.animation-txt-cover-03.active::before {
	transform: scaleX(0);
}

.animation-txt-cover-04 {
	display: inline-block;
	position: relative;
}
.animation-txt-cover-04.active {
}
.animation-txt-cover-04::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100.5%;
	height: 100%;
	z-index: 2;
	background: #fff;
	transform-origin: right top;
	transform: scaleX(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) .8s;
}
.animation-txt-cover-04.active::before {
	transform: scaleX(0);
}

.animation-txt-cover-05 {
	display: inline-block;
	position: relative;
}
.animation-txt-cover-05.active {
}
.animation-txt-cover-05::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100.5%;
	height: 103%;
	z-index: 2;
	background: #fff;
	transform-origin: right top;
	transform: scaleX(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) .5s .2s;
}
.animation-txt-cover-05.active::before {
	transform: scaleX(0);
}

.text-color-02.active {
	color: #decabb;
}
.text-color-03.active {
	color: #111;
}

.animation-txt-01 {
	display: inline-block;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	opacity: 1;
	width: 0 !important;
}
.animation-txt-01.active {
	opacity: 1;
	width: 100% !important;
	transition: all cubic-bezier(0.65, 0, 0.2, 1) 2s;
}

.animation-bg-01 {
	transform-origin: top left;
	transform: scaleX(0);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-bg-01.active {
	transform: scaleX(1);
}

.animation-bg-02 {
	transform-origin: top right;
	transform: scaleX(0);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-bg-02.active {
	transform: scaleX(1);
}

.animation-bg-03 {
	transform-origin: top right;
	transform: scaleY(0);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) .5s .8s;
}
.animation-bg-03.active {
	transform: scaleY(1);
}

.animation-bg-04 {
	transform-origin: top right;
	transform: scaleY(0);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-bg-04.active {
	transform: scaleY(1);
}

.animation-bg-05 {
	transform-origin: top right;
	transform: scaleY(0);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) .7s;
}
.animation-bg-05.active {
	transform: scaleY(1);
}

.animation-bg-06 {
	transform-origin: top left;
	transform: scaleX(0) skewX(-30deg);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s .8s;
}
.animation-bg-06.active {
	transform: scaleX(1) skewX(-30deg);
}

.animation-img-cover-01 {
	position: relative;
	overflow: hidden;
	opacity: 0;
}
.animation-img-cover-01.active {
	opacity: 1;
}
.animation-img-cover-01::before{
	content: "";
	display: block;
	width: 160%;
	height: 160%;
	position: absolute;
	top: 80%;
	left: 160%;
	background: #f6f6f6;
	z-index: 3;
	transform-origin: top left;
	transform: rotate(-210deg) scaleY(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-img-cover-01.active::before{
	transform: rotate(-210deg) scaleY(0);
}

.animation-img-cover-02 {
	position: relative;
	overflow: hidden;
	opacity: 0;
}
.animation-img-cover-02.active {
	opacity: 1;
}
.animation-img-cover-02::before{
	content: "";
	display: block;
	width: 160%;
	height: 160%;
	position: absolute;
	top: 80%;
	left: 160%;
	background: #f6f6f6;
	z-index: 3;
	transform-origin: top left;
	transform: rotate(-210deg) scaleY(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1.3s;
}
.animation-img-cover-02.active::before{
	transform: rotate(-210deg) scaleY(0);
}

.animation-img-cover-02b {
	position: relative;
	overflow: hidden;
	opacity: 0;
}
.animation-img-cover-02b.active {
	opacity: 1;
}
.animation-img-cover-02b::before{
	content: "";
	display: block;
	width: 160%;
	height: 160%;
	position: absolute;
	top: 80%;
	left: 160%;
	background: #fff;
	z-index: 3;
	transform-origin: top left;
	transform: rotate(-210deg) scaleY(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1.3s;
}
.animation-img-cover-02b.active::before{
	transform: rotate(-210deg) scaleY(0);
}

.animation-img-cover-03 {
	position: relative;
	overflow: hidden;
	opacity: 0;
}
.animation-img-cover-03.active {
	opacity: 1;
}
.animation-img-cover-03::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #f6f6f6;
	z-index: 3;
	transform-origin: top right;
	transform: scaleX(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1.5s;
}
.animation-img-cover-03.active::before {
	transform: scaleX(0);
}

.animation-img-cover-04 {
	position: relative;
	overflow: hidden;
	opacity: 0;
}
.animation-img-cover-04.active {
	opacity: 1;
}
.animation-img-cover-04::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #f6f6f6;
	z-index: 3;
	transform-origin: top right;
	transform: scaleY(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-img-cover-04.active::before {
	transform: scaleY(0);
}

.animation-img-cover-05 {
	position: relative;
	opacity: 0;
}
.animation-img-cover-05.active {
	opacity: 1;
}
.animation-img-cover-05::before,
.animation-img-cover-05::after {
	content: "";
	display: block;
	width: 50%;
	height: 101%;
	padding: 2px 0;
	position: absolute;
	top: 0;
	left: 0;
	background: #f6f6f6;
	z-index: 3;
	transform-origin: bottom left;
	transform: scaleY(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-img-cover-05::after {
	left: 50%;
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s .2s;
}
.animation-img-cover-05.active::before,
.animation-img-cover-05.active::after {
	transform: scaleY(0);
}

.animation-img-cover-06 {
	position: relative;
	overflow: hidden;
}
.animation-img-cover-06.active {
}
.animation-img-cover-06::before{
	content: "";
	display: block;
	width: 180%;
	height: 180%;
	position: absolute;
	top: 80%;
	left: 160%;
	background: #f6f6f6;
	z-index: 3;
	transform-origin: top left;
	transform: rotate(-210deg) scaleY(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1.5s;
}
.animation-img-cover-06.active::before{
	transform: rotate(-210deg) scaleY(0);
}

.animation-img-cover-06b {
	position: relative;
	overflow: hidden;
}
.animation-img-cover-06b.active {
}
.animation-img-cover-06b::before{
	content: "";
	display: block;
	width: 150%;
	height: 200%;
	position: absolute;
	top: 80%;
	left: 160%;
	background: #f6f6f6;
	z-index: 3;
	transform-origin: top left;
	transform: rotate(-210deg) scaleY(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-img-cover-06b.active::before{
	transform: rotate(-210deg) scaleY(0);
}

.animation-img-cover-07 {
	position: relative;
	opacity: 0;
}
.animation-img-cover-07.active {
	opacity: 1;
}
.animation-img-cover-07::before,
.animation-img-cover-07::after {
	content: "";
	display: block;
	width: 100%;
	height: 51%;
	padding: 2px 0;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 3;
	transform-origin: top left;
	transform: scaleY(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-img-cover-07::after {
	top: 50%;
	transform-origin: bottom left;
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-img-cover-07.active::before,
.animation-img-cover-07.active::after {
	transform: scaleY(0);
}

.animation-img-cover-08 {
	position: relative;
	opacity: 0;
}
.animation-img-cover-08.active {
	opacity: 1;
}
.animation-img-cover-08::before,
.animation-img-cover-08::after {
	content: "";
	display: block;
	width: 100%;
	height: 51%;
	padding: 2px 0;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 3;
	transform-origin: top left;
	transform: scaleY(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s .7s;
}
.animation-img-cover-08::after {
	top: 50%;
	transform-origin: bottom left;
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s .7s;
}
.animation-img-cover-08.active::before,
.animation-img-cover-08.active::after {
	transform: scaleY(0);
}

.animation-img-cover-09 {
	position: relative;
	overflow: hidden;
	opacity: 0;
}
.animation-img-cover-09.active {
	opacity: 1;
}
.animation-img-cover-09::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 3;
	transform-origin: top right;
	transform: scaleX(1);
	transition: transform cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-img-cover-09.active::before {
	transform: scaleX(0);
}

.animation-img-slide-01 {
	position: relative;
	overflow: hidden;
	width: 0 !important;
	transition: all cubic-bezier(0.65, 0, 0.2, 1) 1s;
}
.animation-img-slide-01.active {
	width: 100% !important;
}

.animation-btn-01 {
	position: relative;
	overflow: hidden;
	opacity: 1;
	width: 0 !important;
}
.animation-btn-01.active {
	opacity: 1;
	width: 262px !important;
	transition: all cubic-bezier(0.65, 0, 0.2, 1) 1s .5s;
}
@media only screen and (max-width: 768px) {
	.animation-btn-01.active {
		opacity: 1;
		width: 152px !important;
		transition: all cubic-bezier(0.65, 0, 0.2, 1) 1s .5s;
	}
}