@charset "UTF-8";
/**********************************************************************
				ANIMATION
**********************************************************************/
.fadeInLeft {
	opacity: 0;
}
.fadeInLeftON {
	animation: fadeInLeft 0.5s forwards;
	visibility: visible !important;
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform:translateX(-200px);
	}
	100% {
		opacity: 1;
		transform:translateX(0);
	}
}

.fadeInRight {
	opacity: 0;
}
.fadeInRightON {
	animation: fadeInRight 0.5s forwards;
	visibility: visible !important;
}
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform:translateX(200px);
	}
	100% {
		opacity: 1;
		transform:translateX(0);
	}
}

.fadeInUp {
	opacity: 0;
}
.fadeInUpON {
	animation: fadeInUp 0.5s forwards;
	visibility: visible !important;
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform:translateY(100px);
	}
	100% {
		opacity: 1;
		transform:translateX(0);
	}
}

.photoFadeIn {
	opacity: 0;
	position: relative;
}
.photoFadeInON {
	  animation: photoFadeIn 0.5s forwards;
	  visibility: visible !important;
}
@keyframes photoFadeIn {
	  0% { opacity: 0;}
	  100% { opacity: 1;}
}

.photoFadeIn .mask {
	width: 101%;
	height: 100%;
	background-color: #fff;
	margin-left: -1%;
}
.photoFadeInON .mask {
	animation: mask 1.5s forwards;
	visibility: visible !important;
}
@keyframes mask {
	0% {
		width: 101%;
	}
	100% {
		width: 0;
	}
}

.bg { opacity: 0;
	  animation: bg 1.5s forwards;
	  visibility: visible !important;
}
@keyframes bg {
	0% {
		opacity: 0;
		transform:translateX(-30px);
	}
	100% {
		opacity: 1;
		transform:translateX(0);
	}
}
.pageTitle {
	position: absolute;
	right: 0;
	bottom: 12vh;
	display: inline;
	font-size: 80px;
	letter-spacing: 0.8rem;
	color: #30384f;
	vertical-align: middle;
	opacity: 0;
	animation: pageTitle 1s forwards;
	visibility: visible !important;
}
@keyframes pageTitle {
	  0% { opacity: 0; -ms-transform:translateX(-30px); -webkit-transform:translateX(-30px); transform:translateX(-30px);}
	  100% { opacity: 1; -ms-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0);}
}
@-moz-keyframes pageTitle {
	  from { opacity: 0; -ms-transform:translateX(-30px); -webkit-transform:translateX(-30px); transform:translateX(-30px);}
	  to { opacity: 1; -ms-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0);}
}
@-webkit-keyframes pageTitle {
	  from { opacity: 0; -ms-transform:translateX(-30px); -webkit-transform:translateX(-30px); transform:translateX(-30px);}
	  to { opacity: 1; -ms-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0);}
}
.dl1 { animation-delay: 0.1s; }
.dl2 { animation-delay: 0.2s; }
.dl3 { animation-delay: 0.3s; }
.dl4 { animation-delay: 0.4s; }
.dl5 { animation-delay: 0.5s; }
.dl6 { animation-delay: 0.6s; }
.dl7 { animation-delay: 0.7s; }
.dl8 { animation-delay: 0.8s; }
.dl9 { animation-delay: 0.9s; }
.dl10 { animation-delay: 1.0s; }
.dl11 { animation-delay: 1.1s; }
.dl12 { animation-delay: 1.2s; }
.dl13 { animation-delay: 1.3s; }
.dl14 { animation-delay: 1.4s; }
.dl15 { animation-delay: 1.5s; }
.dl16 { animation-delay: 1.6s; }
.dl17 { animation-delay: 1.7s; }
.dl18 { animation-delay: 1.8s; }
.dl19 { animation-delay: 1.9s; }
.dl20 { animation-delay: 2.0s; }

/**************************************** SMALL PC (1100px以下) ****************************************/
@media screen and (max-width:1100px) {


}
/**************************************** TABLET / SP (900px以下) ****************************************/
@media screen and (max-width:900px) {

}