@charset "UTF-8";

/* フェードインアップ */
@-webkit-keyframes fadeInUp {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateY(40px);
    	-moz-transform: translateY(40px);
    	-ms-transform: translateY(40px);
    	-o-transform: translateY(40px);
    	transform: translateY(40px);
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	-moz-transform: translateY(0);
    	-ms-transform: translateY(0);
    	-o-transform: translateY(0);
    	transform: translateY(0);
  	}
}
@keyframes fadeInUp {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateY(40px);
    	-moz-transform: translateY(40px);
    	-ms-transform: translateY(40px);
    	-o-transform: translateY(40px);
    	transform: translateY(40px);
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	-moz-transform: translateY(0);
    	-ms-transform: translateY(0);
    	-o-transform: translateY(0);
    	transform: translateY(0);
  	}
}
.fadeinup{
	-webkit-animation: fadeInUp 0.7s ease-in forwards;
	-moz-animation: fadeInUp 0.7s ease-in forwards;
	-ms-animation: fadeInUp 0.7s ease-in forwards;
	-o-animation: fadeInUp 0.7s ease-in forwards;
    animation: fadeInUp 0.7s ease-in forwards;
}

/* ナビゲーション */
@-webkit-keyframes navi {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateX(180px);
    	transform: translateX(180px);
  	}
  	30% {
    	opacity: 0;
    	-webkit-transform: translateX(180px);
    	transform: translateX(180px);
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateX(0);
    	transform: translateX(0);
  	}
}
@keyframes navi {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateX(180px);
    	-ms-transform: translateX(180px);
    	transform: translateX(180px);
  	}
  	30% {
    	opacity: 0;
    	-webkit-transform: translateX(180px);
    	-ms-transform: translateX(180px);
    	transform: translateX(180px);
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateX(0);
    	-ms-transform: translateX(0);
    	transform: translateX(0);
  	}
}

/* スクロール */
@-webkit-keyframes sdb {
  	0% {
    	-webkit-transform: rotate(-45deg) translate(0, 0);
    	opacity: 1;
  	}
  	15% {
    	-webkit-transform: rotate(-45deg) translate(-5px, 5px);
  	}
  	30% {
    	-webkit-transform: rotate(-45deg) translate(0, 0);
  	}
  	45% {
    	-webkit-transform: rotate(-45deg) translate(-5px, 5px);
  	}
  	60% {
    	-webkit-transform: rotate(-45deg) translate(0, 0);
  	}
}
@keyframes sdb {
  	0% {
    	-webkit-transform: rotate(-45deg) translate(0, 0);
    	opacity: 1;
  	}
  	15% {
    	-webkit-transform: rotate(-45deg) translate(-5px, 5px);
  	}
  	30% {
    	-webkit-transform: rotate(-45deg) translate(0, 0);
  	}
  	45% {
    	-webkit-transform: rotate(-45deg) translate(-5px, 5px);
  	}
  	60% {
    	-webkit-transform: rotate(-45deg) translate(0, 0);
  	}
}

/* ロゴ */
@-webkit-keyframes logo {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateY(40px);
    	transform: translateY(40px);
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}
@keyframes logo {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateY(40px);
    	transform: translateY(40px);
  	}
  	20% {
    	opacity: 0;
	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}
.logo{
	-webkit-animation: logo 1.5s ease-out;
    animation: logo 1.5s ease-out;
}

/* TOPページのイントロ写真 */
@-webkit-keyframes intro {
  	0% {
		opacity:0;
    	-webkit-transform: translateY(-50px);
    	transform: translateY(-50px);
  	}
	10% {
		opacity:1;
	}
  	50% {
		opacity:0;
    	-webkit-transform: translateY(-550px);
    	transform: translateY(-550px);
  	}
	90% {
		opacity:1;
	}
  	100% {
    	-webkit-transform: translateY(-550px);
    	transform: translateY(-550px);
  	}
}
@keyframes intro {
  	0% {
		opacity:0;
    	-webkit-transform: translateY(-50px);
    	transform: translateY(-50px);
  	}
	10% {
		opacity:1;
	}
  	50% {
    	-webkit-transform: translateY(-550px);
    	transform: translateY(-550px);
  	}
	90% {
		opacity:1;
	}
  	100% {
		opacity:0;
    	-webkit-transform: translateY(-550px);
    	transform: translateY(-550px);
  	}
}
@media (min-width: 375px) {
	@-webkit-keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(-150px);
    		transform: translateY(-150px);
  		}
		10% {
			opacity:1;
		}
  		50% {
			opacity:0;
    		-webkit-transform: translateY(-650px);
    		transform: translateY(-650px);
  		}
		90% {
			opacity:1;
		}
  		100% {
    		-webkit-transform: translateY(-650px);
    		transform: translateY(-650px);
  		}
	}
	@keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(-150px);
    		transform: translateY(-150px);
  		}
		10% {
			opacity:1;
		}
  		50% {
    		-webkit-transform: translateY(-650px);
    		transform: translateY(-650px);
  		}
		90% {
			opacity:1;
		}
  		100% {
			opacity:0;
    		-webkit-transform: translateY(-650px);
    		transform: translateY(-650px);
  		}
	}
}
@media (min-width: 414px) {
	@-webkit-keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(-200px);
    		transform: translateY(-200px);
  		}
		10% {
			opacity:1;
		}
  		50% {
			opacity:0;
    		-webkit-transform: translateY(-700px);
    		transform: translateY(-700px);
  		}
		90% {
			opacity:1;
		}
  		100% {
    		-webkit-transform: translateY(-700px);
    		transform: translateY(-700px);
  		}
	}
	@keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(-200px);
    		transform: translateY(-200px);
  		}
		10% {
			opacity:1;
		}
  		50% {
    		-webkit-transform: translateY(-700px);
    		transform: translateY(-700px);
  		}
		90% {
			opacity:1;
		}
  		100% {
			opacity:0;
    		-webkit-transform: translateY(-700px);
    		transform: translateY(-700px);
  		}
	}
}
@media (min-width: 568px) {
	@-webkit-keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(10px);
    		transform: translateY(10px);
  		}
		10% {
			opacity:1;
		}
  		50% {
			opacity:0;
    		-webkit-transform: translateY(-450px);
    		transform: translateY(-450px);
  		}
		90% {
			opacity:1;
		}
  		100% {
    		-webkit-transform: translateY(-450px);
    		transform: translateY(-450px);
  		}
	}
	@keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(10px);
    		transform: translateY(10px);
  		}
		10% {
			opacity:1;
		}
  		50% {
    		-webkit-transform: translateY(-450px);
    		transform: translateY(-450px);
  		}
		90% {
			opacity:1;
		}
  		100% {
			opacity:0;
    		-webkit-transform: translateY(-450px);
    		transform: translateY(-450px);
  		}
	}
}
@media (min-width: 768px) {
	@-webkit-keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(0);
    		transform: translateY(0);
  		}
		10% {
			opacity:1;
		}
  		50% {
			opacity:0;
    		-webkit-transform: translateY(-500px);
    		transform: translateY(-500px);
  		}
		90% {
			opacity:1;
		}
  		100% {
    		-webkit-transform: translateY(-500px);
    		transform: translateY(-500px);
  		}
	}
	@keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(0);
    		transform: translateY(0);
  		}
		10% {
			opacity:1;
		}
  		50% {
    		-webkit-transform: translateY(-500px);
    		transform: translateY(-500px);
  		}
		90% {
			opacity:1;
		}
  		100% {
			opacity:0;
    		-webkit-transform: translateY(-500px);
    		transform: translateY(-500px);
  		}
	}
}
@media (min-width: 1024px) {
	@-webkit-keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(0);
    		transform: translateY(0);
  		}
		10% {
			opacity:1;
		}
  		50% {
			opacity:0;
    		-webkit-transform: translateY(-500px);
    		transform: translateY(-500px);
  		}
		90% {
			opacity:1;
		}
  		100% {
    		-webkit-transform: translateY(-500px);
    		transform: translateY(-500px);
  		}
	}
	@keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(0);
    		transform: translateY(0);
  		}
		10% {
			opacity:1;
		}
  		50% {
    		-webkit-transform: translateY(-500px);
    		transform: translateY(-500px);
  		}
		90% {
			opacity:1;
		}
  		100% {
			opacity:0;
    		-webkit-transform: translateY(-500px);
    		transform: translateY(-500px);
  		}
	}
}
@media (min-width: 1080px) {
	@-webkit-keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(-100px);
    		transform: translateY(-100px);
  		}
		10% {
			opacity:1;
		}
  		50% {
			opacity:0;
    		-webkit-transform: translateY(-600px);
    		transform: translateY(-600px);
  		}
		90% {
			opacity:1;
		}
  		100% {
    		-webkit-transform: translateY(-600px);
    		transform: translateY(-600px);
  		}
	}
	@keyframes intro {
  		0% {
			opacity:0;
    		-webkit-transform: translateY(-100px);
    		transform: translateY(-100px);
  		}
		10% {
			opacity:1;
		}
  		50% {
    		-webkit-transform: translateY(-600px);
    		transform: translateY(-600px);
  		}
		90% {
			opacity:1;
		}
  		100% {
			opacity:0;
    		-webkit-transform: translateY(-600px);
    		transform: translateY(-600px);
  		}
	}
}
.intro{
	-webkit-animation: intro 10s ease-out;
    animation: intro 10s ease-out;
}