@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);
  	}
}

/* メインキャッチ */
@-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);
  	}
}

/* ボディコピー */
@-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(-500px);
    	transform: translateY(-500px);
  	}
	10% {
		opacity:1;
	}
  	50% {
		opacity:0;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
	90% {
		opacity:1;
	}
  	100% {
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}
@keyframes intro {
  	0% {
		opacity:0;
    	-webkit-transform: translateY(-500px);
    	transform: translateY(-500px);
  	}
	10% {
		opacity:1;
	}
  	50% {
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
	90% {
		opacity:1;
	}
  	100% {
		opacity:0;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
}
.intro{
	-webkit-animation: intro 10s ease-out;
    animation: intro 10s ease-out;
}