@charset "utf-8";


/* ==========================================================
   01. 基本アニメーション
========================================================== */


/* ---------- ページフェードイン ---------- */

body {animation-fill-mode:both;animation-duration:2s;animation-delay:1s;animation-name:fadeIn;}
@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}



/* ---------- スクロールイン表示 ---------- */

.animation /* fadeInDown */ ,
.animation02 /* fadeInLeft */ ,
.animation03 /* fadeInRight */ ,
.animation04 /* jackInTheBox */ ,
.animation05 /* bounceIn */ ,
.animation06 /* flipInX */ {
	visibility: hidden;
}

.fadeInDown {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: fadeInDown;
	visibility: visible !important;
}
@keyframes fadeInDown {
	0% { opacity: 0;  transform: translateY(calc(var(--space-20) * -1)); }
	100% { opacity: 1; transform: translateY(0); }
}

.fadeInLeft {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: fadeInLeft;
	visibility: visible !important;
}
@keyframes fadeInLeft {
	0% { opacity: 0; transform: translateX(calc(var(--space-20) * -1)); }
	100% { opacity: 1; transform: translateX(0); }
}

.fadeInRight {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: fadeInRight;
	visibility: visible !important;
}
@keyframes fadeInRight {
	0% { opacity: 0; transform: translateX(var(--space-20)); }
	100% { opacity: 1; transform: translateX(0); }
}

.jackInTheBox {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: jackInTheBox;
	visibility: visible !important;
}
@keyframes jackInTheBox {
	from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; }
	50% { transform: rotate(-10deg); }
	70% { transform: rotate(3deg); }
	to { opacity: 1; transform: scale(1); }
}

.bounceIn {
	animation-fill-mode:both;
	animation-duration: 0.75s;
	animation-name: bounceIn;
	visibility: visible !important;
}
@keyframes bounceIn {
	from,20%,40%,60%,80%,to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

.flipInX {
	animation-fill-mode:both;
	animation-duration:1s;
	backface-visibility: visible !important;
	animation-name: flipInX;
	visibility: visible !important;
}
@keyframes flipInX {
	from {
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		animation-timing-function: ease-in;
	}
	60% {
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	to {
		transform: perspective(400px);
	}
}



/* ---------- トップページヘッダー表示 ---------- */

.anime_head01 /* 1秒後にheadfadeInRight */ ,
.anime_head02 /* 1.5秒後にheadfadeInBottom */ ,
.anime_head03 /* 2秒後にheadfadeInTop */ {
	animation-fill-mode:both;
	animation-duration:1s;
}

.anime_head01 {
	animation-delay:1s;
	animation-name: headfadeInRight;
}
@keyframes headfadeInRight {
	0% { opacity: 0; transform: translate(30%, 0%); }
	100% { opacity: 1; transform: translate(0%, 0%); }
}

.anime_head02 {
	animation-delay:1.5s;
	animation-name: headfadeInBottom;
}
@keyframes headfadeInBottom {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

.anime_head03 {
	animation-delay:2s;
	animation-name: headfadeInTop;
}
@keyframes headfadeInTop {
	0% { opacity: 0; transform: translate(-50%, -30px); }
	100% { opacity: 1; transform: translate(-50%, 0); }
}



/* ---------- 二重スライドイン ---------- */

.slidein_animation,
.head_slidein_animation {
	width: fit-content;
}
.inner {
	display: block;
	position: relative;
	overflow: hidden;
}
.inner:after {
	content: '';
	position: absolute;
	opacity: 1;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	background-color: rgb(var(--color-accent));
}
.show .inner:after,
.done .inner:after{
	transition-property: transform, opacity;
	transition-duration: 0.5s;
	transition-delay: 0s;
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.slidein_animation.show .inner:after,
.head_slidein_animation.show .inner:after {
	transform: translate3d(0, 0, 0);
}

.slidein_animation img,
.slidein_animation p,
.head_slidein_animation img,
.head_slidein_animation p,
.about_content,
.info_content {
	display: inline-block;
	opacity: 0;
}
.done img,
.done p,
.done .about_content,
.done .info_content {
	opacity: 1;
}

/* 左から右 */
.inleft .inner:after {
	transform: translate3d(-101%, 0, 0);
}
.inleft.done .inner:after {
	transform: translate3d(101%, 0, 0);
}

/* 右から左 */
.inright .inner:after {
	transform: translate3d(101%, 0, 0);
}
.inright.done .inner:after {
	transform: translate3d(-101%, 0, 0);
}



/* ==========================================================
   02. レスポンシブ
========================================================== */

@media screen and (max-width: 960px)
{
	
.scroll {
	bottom: var(--space-20);
	right: var(--space-80);
}

}