@charset "utf-8";

/*------------------------------------------------------------
	animated
------------------------------------------------------------*/
.animated {
	opacity: 0;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.animate-delay-100 {
	-webkit-animation-delay: .1s;
	animation-delay: .1s;
}
.animate-delay-200 {
	-webkit-animation-delay: .2s;
	animation-delay: .2s;
}
.animate-delay-300 {
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}
.animate-delay-400 {
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
}
.animate-delay-500 {
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
}
.animate-delay-600 {
	-webkit-animation-delay: .6s;
	animation-delay: .6s;
}
.animate-delay-700 {
	-webkit-animation-delay: .7s;
	animation-delay: .7s;
}
.animate-delay-800 {
	-webkit-animation-delay: .8s;
	animation-delay: .8s;
}
.animate-delay-900 {
	-webkit-animation-delay: .9s;
	animation-delay: .9s;
}
.animate-delay-1000 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.fadeInUp.on {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
@-webkit-keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
.fadeInLeft.on {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
.fadeIn.on {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-webkit-keyframes fadeInscale {
	from {
		opacity: 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transition: .6s opacity,.6s -webkit-transform cubic-bezier(.175,.885,.32,1.275);
		transition: .6s opacity,.6s transform cubic-bezier(.175,.885,.32,1.275);
		transition: .6s opacity,.6s transform cubic-bezier(.175,.885,.32,1.275),.6s -webkit-transform cubic-bezier(.175,.885,.32,1.275);
	}
	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes fadeInscale {
	from {
		opacity: 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transition: .6s opacity,.6s -webkit-transform cubic-bezier(.175,.885,.32,1.275);
		transition: .6s opacity,.6s transform cubic-bezier(.175,.885,.32,1.275);
		transition: .6s opacity,.6s transform cubic-bezier(.175,.885,.32,1.275),.6s -webkit-transform cubic-bezier(.175,.885,.32,1.275);
	}
	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.fadeInscale.on {
	-webkit-animation-name: fadeInscale;
	animation-name: fadeInscale;
}
/*------------------------------------------------------------
	modaal
------------------------------------------------------------*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}