@charset "utf-8";


/*-----------------------------
	共通,PC設定
------------------------------*/

/* 汎用スクロールイン表示アニメーション
---------------------------------------------------------- */

.animation /* fadeInDown */ ,
.animation02 /* fadeInLeft */ ,
.animation03 /* fadeInRight */ {
	visibility: hidden;
}

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

.fadeInLeft {
	animation-fill-mode:both;
	animation-duration:2s;
	animation-name: fadeInLeft;
	visibility: visible !important;
}
@keyframes fadeInLeft {
	0% { opacity: 0; transform: translateX(-40px); }
	100% { opacity: 1; transform: translateX(0); }
}

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


/* トップページヘッダースライドイン
---------------------------------------------------------- */

.anime_head01 /* headfadeInLeft */ ,
.anime_head02 /* headfadeInRight */ ,
.anime_head03 /* headfadeInBottom */ ,
.anime_head04 /* headfadeInTop */ {
	animation-fill-mode: both;
	animation-duration: 2s;
}

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

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

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

.anime_head04 {
	animation-delay: 1s;
	animation-name: headfadeInTop;
}
@keyframes headfadeInTop {
	0% { opacity: 0; transform: translateY(-40px); }
	100% { opacity: 1; transform: translateY(0); }
}