@charset "UTF-8";

.animated,
.animated-rm0,
.animated-dly-item,
.animation,
.animated-child {
	opacity: 0;
	animation-duration: 1s;
	animation-fill-mode: both;
}
.animated.move,
.animated-rm0.move,
.animated-dly-item.move,
.animation.move,
.animated-child.move {
	opacity: 1;
}

.animated.infinite { animation-iteration-count:infinite }
.aniDur03 { animation-duration: 0.3s!important; }
.aniDur05 { animation-duration: 0.5s!important; }
.aniDur06 { animation-duration: 0.6s!important; }
.aniDur08 { animation-duration: 0.8s!important; }
.aniDur1 { animation-duration: 1s!important; }

.aniDly03 { animation-delay: 0.3s!important; }
.aniDly05 { animation-delay: 0.5s!important; }
.aniDly06 { animation-delay: 0.6s!important; }
.aniDly08 { animation-delay: 0.8s!important; }
.aniDly1 { animation-delay: 1s!important; }


@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.fadeIn{animation-name:fadeIn}
@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,8vw,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInUp{animation-name:fadeInUp}
@keyframes fadeInUpSmall{0%{opacity:0;transform:translate3d(0,4vw,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInUpSmall{animation-name:fadeInUpSmall}
@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInLeft{animation-name:fadeInLeft}
@keyframes fadeInLeftSmall{0%{opacity:0;transform:translate3d(-50%,0,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInLeftSmall{animation-name:fadeInLeftSmall}
@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInRight{animation-name:fadeInRight}
@keyframes fadeInRightSmall{0%{opacity:0;transform:translate3d(50%,0,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInRightSmall{animation-name:fadeInRightSmall}

.fuwafuwa {
	animation: fuwafuwa 3s ease-in-out infinite alternate;
}
@keyframes fuwafuwa {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(20px);
	}
}


.hover_clickTrans {
	transition: transform 0.3s ease;
}
.hover_clickTrans:hover {
	transform: translate(0.5rem, 0.5rem);
}
@media screen and (max-width: 800px) {
	.clickTrans:hover {
		transform: translate(1vw, 1vw);
	}
}


.cubicTrans {
	transition: all 0.6s cubic-bezier(0.6, 0, 0.4, 1);
}

/*clip-path（→マスク）*/
.clipPath {
	-webkit-clip-path: inset(-50% 101% -50% -1%);
	clip-path: inset(-50% 101% -50% -1%);
	opacity: 1!important;
}
.clipPath.move {
	animation: clip 0.8s cubic-bezier(0.6, 0, 0.4, 1) both;
}
.clipPathR {
	-webkit-clip-path: inset(-50% -1% -50% 101%);
	clip-path: inset(-50% -1% -50% 101%);
	opacity: 1!important;
}
.clipPathR.move {
	animation: clipR 0.8s cubic-bezier(0.6, 0, 0.4, 1) both;
}

@keyframes clip {
	0% {
		-webkit-clip-path: inset(-50% 101% -50% -1%);
		clip-path: inset(-50% 101% -50% -1%);
	}
	99.9% {
		-webkit-clip-path: inset(-50% -1% -50% -1%);
		clip-path: inset(-50% -1% -50% -1%);
	}
	100% {
		-webkit-clip-path: none;
		clip-path: none;
	}
}
@keyframes clipR {
	0% {
		-webkit-clip-path: inset(-50% -1% -50% 101%);
		clip-path: inset(-50% -1% -50% 101%);
	}
	99.9% {
		-webkit-clip-path: inset(-50% -1% -50% -1%);
		clip-path: inset(-50% -1% -50% -1%);
	}
	100% {
		-webkit-clip-path: none;
		clip-path: none;
	}
}


/*ループアニメ*/
@keyframes loopAnime {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}
@keyframes loopAnimeR {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

/*テキストループアニメ*/
@keyframes bgloopTxt01 {
	0% { transform: translateX(100%); }
	to { transform: translateX(-100%); }
}
@keyframes bgloopTxt02 {
	0% { transform: translateX(0); }
	to { transform: translateX(-200%); }
}


/*translateYアニメ*/
.transAnimeY {
	display: block;
	overflow: hidden;
}
.transAnimeY > * {
	display: inline-block;
	transform:  translateY(101%);
	transition: all 1s 0s cubic-bezier(0.8, 0, 0.2, 1);
}
.transAnimeY.move > * {
	transform:  translateY(0);
}



/*ベタアニメーション*/
[class*="bg_reveal"] {
	position: relative;
	opacity: 1!important;
}
[class*="bg_reveal"]::before {
	position: absolute;
	content: '';
	top: -1px;
	width: 100%;
	width: calc(100% + 2px);
	height: 100%;
	height: calc(100% + 2px);
	background-color: rgba(0,86,66,1);
	z-index: 10;
	-webkit-transition: all 1s 0s cubic-bezier(0.8, 0, 0.1, 1);
    transition: all 1s 0s cubic-bezier(0.8, 0, 0.1, 1);
}
.bg_reveal::before {
	right: -1px;
	transform-origin: center right;
}
.bg_reveal_reverse::before {
	left: -1px;
	transform-origin: center left;
}
[class*="bg_reveal"].move::before {
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}


/*ブラー*/
.blur {
	animation: none;
	filter: blur(1em);
	opacity: 0;
	transition: opacity 0.4s linear, filter 0.8s ease-out;
}
.blur.move {
	filter: blur(0);
	opacity: 1;
}


/*スクロール*/
@keyframes scrollAnimeX {
	0%   { transform: translateX(-100%);}
	5%   { transform: translateX(-100%);}
	50%  { transform: translateX(0);}
	95%  { transform: translateX(100%);}
	100% { transform: translateX(100%);}
}
@keyframes scrollAnimeXR {
	0%   { transform: translateX(100%);}
	5%   { transform: translateX(100%);}
	50%  { transform: translateX(0);}
	95%  { transform: translateX(-100%);}
	100% { transform: translateX(-100%);}
}
@keyframes scrollAnimeY {
	0%   { transform: translateY(-100%);}
	5%   { transform: translateY(-100%);}
	50%  { transform: translateY(0);}
	95%  { transform: translateY(100%);}
	100% { transform: translateY(100%);}
}
@keyframes scrollAnimeY7R {
	0%   { transform: translateY(100%);}
	5%   { transform: translateY(100%);}
	50%  { transform: translateY(0);}
	95%  { transform: translateY(-100%);}
	100% { transform: translateY(-100%);}
}


/*矢印アニメ*/
.hoverArrowAnime:hover [class*="icon-"],
.hoverArrowAnime.hover [class*="icon-"],
.hoverArrowAnime_list a:hover [class*="icon-"],
.hoverArrowAnime_list a.hover [class*="icon-"] {
	animation: hoverArrowAnime .4s linear both;
}
@keyframes hoverArrowAnime {
	0%{transform:translateX(-0.6em); opacity: 0;}
	40%{opacity: 1;}
	100%{transform:translateX(0)}
}