@charset "utf-8";

/* ===========================================
	scroll animation
============================================== */
/*ブロックが流れる*/
.mask-bg {
	display: inline-block;
	position: relative;
	color: transparent;
	overflow: hidden;
	transition: color 0ms 450ms;
}

.mask-bg::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #396482;
	transform: translate(0, 100%);
}

.mask-bg.is-active {
	color: #393327;
}

.mask-bg.is-active::after {
	animation: mask-bg 0.8s cubic-bezier(0.8, 0, 0.17, 1);
}

@keyframes mask-bg {
	0% {
		transform: translate(-100%, 0);
	}
	40%,
	60% {
		transform: translate(0%, 0);
	}
	100% {
		transform: translate(101%, 0);
	}
}

/*ポップアップ*/
.popup {
	opacity: 0;
}

.popup.is-active {
	animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes popup {
	0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1);
	}
	80%,
	100% {
		opacity: 1;
	}
}

/*フェードアップ*/
.fadeup {
	opacity: 0;
}

.fadeup.is-active {
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeup {
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/*フェードイン*/
.fadein {
	opacity: 0;
}

.fadein.is-active {
	animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*右下からイン*/
.slide-skew {
	opacity: 0;
}

.slide-skew.is-active {
	animation: slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slide-skew {
	0% {
		transform: translate(180px, 30px);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
	}
	20%,
	100% {
		opacity: 1;
	}
}

/*スライドイン*/
.slidein {
	opacity: 0;
}

.slidein.is-active {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn {
	0% {
		transform: translateX(180px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
	}
	40%,
	100% {
		opacity: 1;
	}
}

/*スライドインレフト*/
.slideinLeft {
	opacity: 0;
}

.slideinLeft.is-active {
	animation: slideInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideInLeft {
	0% {
		transform: translateX(-180px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
	}
	40%,
	100% {
		opacity: 1;
	}
}

/*スライドアップ*/
.slideup {
	opacity: 0;
}

.slideup.is-active {
	animation: slideUp 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideUp {
	0% {
		transform: translateY(180px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
	}
	40%,
	100% {
		opacity: 1;
	}
}

/*スライドダウン*/
.slidedown {
	opacity: 0;
}

.slidedown.is-active {
	animation: slideDown 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideDown {
	0% {
		transform: translateY(-180px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
	}
	40%,
	100% {
		opacity: 1;
	}
}

/*文字が滑らかに表示*/
.smooth {
	clip-path: inset(0 100% 0 0);
	transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
	transition-property: clip-path;
}

.smooth.is-active {
	clip-path: inset(0 -20% 0 0);
}

/*文字が下から表示*/
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
	display: block;
}

.matrix .bg-wrap {
	overflow: hidden;
	opacity: 0;
}

.matrix .bg-wrap .inn {
	opacity: 0;
	transform: matrix(1, 0, 0, 1, 0, 100);
	transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.matrix.is-active .bg-wrap {
	opacity: 1;
}

.matrix.is-active .bg-wrap .inn {
	opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
}

/*背景が流れてから文字表示*/

.bg .bg-wrap {
	position: relative;
}

.bg .bg-wrap{
	transform: scale(0, 1);
    transform-origin: left top;
    transition: .4s;
}

.bg.is-active .bg-wrap{
    transform: scale(1, 1);
}

.bg .bg-wrap .inn {
	position: relative;
	z-index: 1;
    opacity: 0;
}

.bg.is-active .bg-wrap .inn {
    animation: bg 1.2s ease-in-out 1 forwards;
}

@keyframes bg {
	0% {
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

/*ぽよよん2*/
.poyoyon2 {
	opacity: 0;
}

.poyoyon2.is-active {
	animation: poyoyon2 1s ease-in-out 1 forwards;
}

@keyframes poyoyon2 {
	0% {
		transform: scale(1, 1) translate(0, 0);
	}
	15% {
		transform: scale(0.98, 0.9) translate(0, 5px);
	}
	30% {
		transform: scale(1.02, 1) translate(0, 8px);
	}
	50% {
		transform: scale(0.98, 1.05) translate(0, -8px);
	}
	70% {
		transform: scale(1, 0.9) translate(0, 5px);
	}
	100% {
		transform: scale(1, 1) translate(0, 0);
	}
	0%,
	100% {
		opacity: 1;
	}
}

/*遅れてアニメーション*/
.delay.is-active {
	animation-delay: 0.8s;
}