@charset "utf-8";
/* CSS Document */

/* 動く要素には.anicontのクラスをつける */



/* ======================================

           hover animation

=======================================*/

.hoverani-lrclose1{
	/* hover 左右から閉じて色が変わる：黒 */
}
.hoverani-lrclose1{
	overflow: hidden;
	position: relative;
}
.hoverani-lrclose1 .anicont{
	display: block;
	background: transparent;
}
.hoverani-lrclose1 .anicont::before,
.hoverani-lrclose1 .anicont::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.30);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hoverani-lrclose1 .anicont::before {
	left: 0;
}
.hoverani-lrclose1 .anicont::after {
	right: 0;
}
.hoverani-lrclose1:not(:hover) .anicont::before,
.hoverani-lrclose1:not(:hover) .anicont::after {
	opacity: 0;
	transition-duration: .6s;
}
.hoverani-lrclose1:not(:hover) .anicont::before {
	transform: translateX(-50%);
}
.hoverani-lrclose1:not(:hover) .anicont::after {
	transform: translateX(50%);
}


a.hoverani-lropen1 div {
	/* hover 左右へ開いて色が変わる：黒 */
}
a.hoverani-lropen1 div{
	overflow: hidden;
	position: relative;
}
a.hoverani-lropen1 .anicont{
	display: block;
	background: transparent;
}
a.hoverani-lropen1 .anicont::before,
a.hoverani-lropen1 .anicont::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.50);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
a.hoverani-lropen1 .anicont::before {
	left: 50%;
}
a.hoverani-lropen1 .anicont::after {
	right: 50%;
}
a.hoverani-lropen1:hover .anicont::before,
a.hoverani-lropen1:hover .anicont::after {
	opacity: 0;
	transition-duration: .6s;
}
a.hoverani-lropen1:hover .anicont::before {
	transform: translateX(50%);
}
a.hoverani-lropen1:hover .anicont::after {
	transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
	a.hoverani-lropen1 .anicont::before,
	a.hoverani-lropen1 .anicont::after {
		opacity: 0;
	}
}





.hoverani-lrclose1w{
	/* hover 左右から閉じて色が変わる：白 */
}
.hoverani-lrclose1w{
	overflow: hidden;
	position: relative;
}
.hoverani-lrclose1w .anicont{
	display: block;
	background: transparent;
}
.hoverani-lrclose1w .anicont::before,
.hoverani-lrclose1w .anicont::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.30);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hoverani-lrclose1w .anicont::before {
	left: 0;
}
.hoverani-lrclose1w .anicont::after {
	right: 0;
}
.hoverani-lrclose1w:not(:hover) .anicont::before,
.hoverani-lrclose1w:not(:hover) .anicont::after {
	opacity: 0;
	transition-duration: .6s;
}
.hoverani-lrclose1w:not(:hover) .anicont::before {
	transform: translateX(-50%);
}
.hoverani-lrclose1w:not(:hover) .anicont::after {
	transform: translateX(50%);
}



.hoverani-lrclose2{
	/* hover 左から閉じて色が変わる：黒 */
}
.hoverani-lrclose2{
	overflow: hidden;
	position: relative;
}
.hoverani-lrclose2 .anicont{
	display: block;
	background: transparent;
}
.hoverani-lrclose2 .anicont::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.60);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hoverani-lrclose2 .anicont::before {
	left: 0;
}
.hoverani-lrclose2:not(:hover) .anicont::before {
	opacity: 0;
	transition-duration: .6s;
}
.hoverani-lrclose2:not(:hover) .anicont::before {
	transform: translateX(-130%)/* skew(-30deg)*/;
}
@media screen and (max-width: 767px) {
	.hoverani-lrclose2:not(:hover) .anicont::before,
	.hoverani-lrclose2:not(:hover) .anicont::after {
		opacity: 1.0;
		transition-duration: .6s;
	}
	.hoverani-lrclose2:not(:hover) .anicont::before {
	transform: translateX(0px) skew(0deg);
}
.hoverani-lrclose2:not(:hover) .anicont::after {
	transform: translateX(0px) skew(0deg);
}
}


.hoverani-lrclose2w{
	/* hover 左から閉じて色が変わる：白*/
}
.hoverani-lrclose2w{
	overflow: hidden;
	position: relative;
}
.hoverani-lrclose2w .anicont{
	display: block;
	background: transparent;
}
.hoverani-lrclose2w .anicont::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.20);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	z-index: 3;
}
.hoverani-lrclose2w .anicont::before {
	left: 0;
}
.hoverani-lrclose2w:not(:hover) .anicont::before {
	opacity: 0;
	transition-duration: .6s;
}
.hoverani-lrclose2w:not(:hover) .anicont::before {
	transform: translateX(-130%) /*skew(-30deg)*/;
}


/* ======================================

           scroll animation

=======================================*/

/* 親要素には、必ず.aniwrapを入れる */

.aniwrap{
	position: relative;
	overflow: hidden;
}

.fadein100up {
  opacity : 0;
  transform : translate(0, 100px);
	transition-property: all;
  transition-duration: .5s;
  transition-timing-function: ease;
}
.fadein100up.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadein100LtoR {
  opacity : 0;
  transform : translate(-100%, 0);
  transition : all 1s;
}
.fadein100LtoR.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadein100RtoL {
  opacity : 0;
  transform : translate(100%, 0);
  transition : all 1s;
}
.fadein100RtoL.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeindelay00{ transition-delay: 0s; }
.fadeindelay01{ transition-delay: 0.1s; }
.fadeindelay02{ transition-delay: 0.2s; }
.fadeindelay03{ transition-delay: 0.3s; }
.fadeindelay04{ transition-delay: 0.4s; }
.fadeindelay05{ transition-delay: 0.5s; }
.fadeindelay06{ transition-delay: 0.6s; }
.fadeindelay07{ transition-delay: 0.7s; }
.fadeindelay08{ transition-delay: 0.8s; }
.fadeindelay09{ transition-delay: 0.9s; }
.fadeindelay10{ transition-delay: 1.0s; }