@charset "utf-8";

/* ===========================================
	scroll animation
============================================== */
/*カーテンが開くと現れる*/
.animation {
	position: relative;
	overflow: hidden;
}

.animation::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #f7f5ef;
	transform: translateX(-100%);
	z-index: 5;
}

@keyframes showMask {
	0% {
		transform: translateX(-100%);
	}
	45%,
	50% {
		transform: translate(0%);
	}
	100% {
		transform: translateX(100%);
	}
}

.animation.is-active::after {
	animation: showMask 1s forwards;
}

.animation div {
	opacity: 0;
}

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

.animation.is-active div {
	animation: showElements 0.01s 0.6s forwards;
}

/*ブロックが流れる*/
.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;
	z-index: 2;
}

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

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

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

/*ぽよよん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;
	}
}

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

.delay1.is-active {
	animation-delay: 1s;
}

/*背景色が横に伸びる*/
/*.extend_left::after,
.extend_right::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 0;
	background-color: #b40519;
	transform: translateX(0);
	z-index: 11;
	opacity: 1;
	visibility: visible;
}

.extend_left::after {
	transform-origin: left top;
}

.extend_right::after {
	transform-origin: right top;
}

.extend_left.is-active::after,
.extend_right.is-active::after {
	animation: loadingGrow 1.2s ease forwards,
		loadingSlide 0.8s ease forwards 1.3s, hidePanel 0s linear 2.1s forwards;
}*/

/* 左から横に伸びて覆う */
/*@keyframes loadingGrow {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}*/

/* 右にスライドして消える */
/*@keyframes loadingSlide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100%);
	}
}

@keyframes hidePanel {
	to {
		opacity: 0;
		visibility: hidden;
	}
}*/

/*背景色が縦に伸びる*/
.extend_left::after,
.extend_right::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: #b40519;
	transform: translateY(100%);
	z-index: 11;
	opacity: 1;
	visibility: visible;
}

.extend_left::after {
	transform-origin: left bottom;
}

.extend_right::after {
	transform-origin: right top;
}

.extend_left.is-active::after,
.extend_right.is-active::after {
	animation: loadingGrow 1s ease forwards, loadingSlide 0.8s ease forwards 1s,
		hidePanel 0s linear 2.8s forwards;
}

/* パネルが下から伸びる */
@keyframes loadingGrow {
	0% {
		height: 0;
	}
	100% {
		height: 100%;
	}
}

/* 上にスライドして消える */
@keyframes loadingSlide {
	0% {
		transform: translateY(100%); /* 下から登場 */
	}
	100% {
		transform: translateY(-100%); /* 上に消える */
	}
}

@keyframes hidePanel {
	to {
		opacity: 0;
		visibility: hidden;
	}
}