@charset "UTF-8";

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

/* ナビゲーション */
@-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(15px);
    	transform: translateY(15px);
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}
@keyframes logo {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateY(15px);
    	transform: translateY(15px);
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}
.logo{
	-webkit-animation: logo 1.5s ease-out;
    animation: logo 1.5s ease-out;
}

/* メインキャッチ */
@-webkit-keyframes main-catch {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateY(15px);
    	transform: translateY(15px);
  	}
  	30% {
    	opacity: 0;
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}
@keyframes main-catch {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateY(15px);
    	transform: translateY(15px);
  	}
  	30% {
    	opacity: 0;
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}
.main-catch{
	-webkit-animation: main-catch 2s ease-out;
    animation: main-catch 2s ease-out;
}

/* ボディコピー */
@-webkit-keyframes bodycopy {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateY(15px);
    	transform: translateY(15px);
  	}
  	50% {
    	opacity: 0;
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}
@keyframes bodycopy {
  	0% {
    	opacity: 0;
    	-webkit-transform: translateY(15px);
    	transform: translateY(15px);
  	}
  	50% {
    	opacity: 0;
  	}
  	100% {
    	opacity: 1;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}

/* 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;
}