@charset "utf-8";


/*オープニングアニメーション
---------------------------------------------------------------------------*/
/*全ての写真に対する共通指定*/
.photo {
	position: fixed;
	z-index: -1;
}
/*全ての写真に対する共通指定（※トップページのみへの追加指定）*/
.home .photo {
	animation-duration: 2.0s;	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
	animation-timing-function: ease-in-out;	/*速度の変化パターン*/
}

/* --- PC向け（幅601px以上）--- */
@media screen and (min-width: 601px) {
	.photo{
		width: 50%;
	}
	/*photo1*/
	.photo1 {
		left: -10%;	/*ウィンドウの左からの配置指定*/
		top: -20%;	/*ウィンドウの上からの配置指定*/
	}
	.home .photo1 {
		animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
		animation-delay: 0.2s;	/*アニメーションを遅れて開始させる指定。0.4sは0.4秒の事。*/
	}
	/*photo2*/
	.photo2 {
		right: -15%;	/*ウィンドウの右からの配置指定*/
		bottom: -15%;	/*ウィンドウの下からの配置指定*/
	}
	.home .photo2 {
		animation-name: type2;	/*下の「アニメーション設定」の「type2」を使う指定*/
		animation-delay: 0.4s;	/*アニメーションを遅れて開始させる指定。0.8sは0.8秒の事。*/
	}
	/*photo3*/
	.photo3 {
		left: -20%;		/*ウィンドウの左からの配置指定*/
		bottom: -20%;	/*ウィンドウの下からの配置指定*/
	}
	.home .photo3 {
		animation-name: type3;	/*下の「アニメーション設定」の「type3」を使う指定*/
		animation-delay: 0.5s;	/*アニメーションを遅れて開始させる指定。1sは1秒の事。*/
	}
	/*photo4*/
	.photo4 {
		right: -10%;	/*ウィンドウの右からの配置指定*/
		top: -10%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo4 {
		animation-name: type2;	/*下の「アニメーション設定」の「type2」を使う指定*/
		animation-delay: 0.6s;	/*アニメーションを遅れて開始させる指定。1.2sは1.2秒の事。*/
	}
	/*photo5*/
	.photo5 {
		left: 20%;		/*ウィンドウの左からの配置指定*/
		bottom: -20%;	/*ウィンドウの下からの配置指定*/
	}
	.home .photo5 {
		animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
		animation-delay: 0.7s;	/*アニメーションを遅れて開始させる指定。1.4sは1.4秒の事。*/
	}
	/*photo6*/
	.photo6 {
		left: -10%;	/*ウィンドウの左からの配置指定*/
		top: 20%;	/*ウィンドウの上からの配置指定*/
	}
	.home .photo6 {
		animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
		animation-delay: 0.8s;	/*アニメーションを遅れて開始させる指定。1.6sは1.6秒の事。*/
	}
	/*photo7*/
	.photo7 {
		right: -25%;	/*ウィンドウの右からの配置指定*/
		top: 15%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo7 {
		animation-name: type2;	/*下の「アニメーション設定」の「type2」を使う指定*/
		animation-delay: 0.9s;	/*アニメーションを遅れて開始させる指定。1.8sは1.8秒の事。*/
	}
	/*photo8*/
	.photo8 {
		right: 5%;	/*ウィンドウの右からの配置指定*/
		top: 20%;	/*ウィンドウの上からの配置指定*/
	}
	.home .photo8 {
		animation-name: type3;	/*下の「アニメーション設定」の「type3」を使う指定*/
		animation-delay: 1s;	/*アニメーションを遅れて開始させる指定。2sは2秒の事。*/
	}
	/*photo9*/
	.photo9 {
		left: 25%;	/*ウィンドウの左からの配置指定*/
		top: -10%;	/*ウィンドウの上からの配置指定*/
	}
	.home .photo9 {
		animation-name: type3;	/*下の「アニメーション設定」の「type3」を使う指定*/
		animation-delay: 1.1s;	/*アニメーションを遅れて開始させる指定。2.2sは2.2秒の事。*/
	}
	/*photo10*/
	.photo10 {
	left: 10%;
	bottom: -5%;
	}
	.home .photo10 {
	animation-name: type2;
	animation-delay: 1.2s;
	}
	/*photo11*/
	.photo11 {
	right: 50%;
	top: 30%;
	}
	.home .photo11 {
	animation-name: type3;
	animation-delay: 1.3s;
	}

	/*コマ割り
	---------------------------------------------------------------------------
	opacityは透明度。0は色が0%、100%は色が100%出た状態。
	scaleは大きさ。0はゼロ、1は100%のサイズ。
	rotateは回転角度。
	---------------------------------------------------------------------------*/

	/*「type1」の設定*/
	@keyframes type1 {
		/*0コマ目*/
		0% {
			opacity: 0;
			transform: scale(0) rotate(0deg);
		}
		/*100コマ目0.8*/
		100% {
			opacity: 1;
			transform: scale(1) rotate(100deg);
		}
	}

	/*「type2」の設定*/
	@keyframes type2 {
		/*0コマ目0.6*/
		0% {
			opacity: 0;
			transform: scale(0) rotate(0deg);
		}
		/*100コマ目*/
		100% {
			opacity: 1;
			transform: scale(0.85) rotate(-150deg);
		}
	}

	/*「type3」の設定*/
		@keyframes type3 {
		/*0コマ目0.4*/
		0% {
			opacity: 0;
			transform: scale(0) rotate(0deg);
		}
		/*100コマ目*/
		100% {
			opacity: 1;
			transform: scale(0.7) rotate(180deg);
		}
	}	
}	

/* --- スマホ向け（縦向き、横向き）（〜600px）--- */
@media screen and (max-width: 600px) {
	.photo{
		width: 75%;
	}
	/*photo1*/
	.photo1 {
		left: -10%;	/*ウィンドウの左からの配置指定*/
		top: 0%;	/*ウィンドウの上からの配置指定*/
	}
	.home .photo1 {
		animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
		animation-delay: 0.2s;	/*アニメーションを遅れて開始させる指定。0.4sは0.4秒の事。*/
	}
	/*photo2*/
	.photo2 {
		left: 15%;	/*ウィンドウの左からの配置指定*/
		top: 10%;	/*ウィンドウの上からの配置指定*/
	}
	.home .photo2 {
		animation-name: type2;	/*下の「アニメーション設定」の「type2」を使う指定*/
		animation-delay: 1s;	/*アニメーションを遅れて開始させる指定。0.8sは0.8秒の事。*/
	}
	/*photo3*/
	.photo3 {
		left: 50%;		/*ウィンドウの左からの配置指定*/
		top: 20%;	/*ウィンドウの上からの配置指定*/
	}
	.home .photo3 {
		animation-name: type3;	/*下の「アニメーション設定」の「type3」を使う指定*/
		animation-delay: 0.5s;	/*アニメーションを遅れて開始させる指定。1sは1秒の事。*/
	}
	/*photo4*/
	.photo4 {
		left: -5%;		/*ウィンドウの右からの配置指定*/
		top: 30%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo4 {
		animation-name: type2;	/*下の「アニメーション設定」の「type2」を使う指定*/
		animation-delay: 1.2s;	/*アニメーションを遅れて開始させる指定。1.2sは1.2秒の事。*/
	}
	/*photo5*/
	.photo5 {
		left: 20%;		/*ウィンドウの右からの配置指定*/
		top: 40%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo5 {
		animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
		animation-delay: 0.7s;	/*アニメーションを遅れて開始させる指定。1.4sは1.4秒の事。*/
	}
	/*photo6*/
	.photo6 {
		left: 40%;		/*ウィンドウの右からの配置指定*/
		top: 50%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo6 {
		animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
		animation-delay: 0.8s;	/*アニメーションを遅れて開始させる指定。1.6sは1.6秒の事。*/
	}
	/*photo7*/
	.photo7 {
		left: 0%;		/*ウィンドウの右からの配置指定*/
		top: 60%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo7 {
		animation-name: type2;	/*下の「アニメーション設定」の「type2」を使う指定*/
		animation-delay: 0.9s;	/*アニメーションを遅れて開始させる指定。1.8sは1.8秒の事。*/
	}
	/*photo8*/
	.photo8 {
		left: -5%;		/*ウィンドウの右からの配置指定*/
		top: 70%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo8 {
		animation-name: type3;	/*下の「アニメーション設定」の「type3」を使う指定*/
		animation-delay: 0.4s;	/*アニメーションを遅れて開始させる指定。2sは2秒の事。*/
	}
	/*photo9*/
	.photo9 {
		left: 35%;		/*ウィンドウの右からの配置指定*/
		top: 80%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo9 {
		animation-name: type3;	/*下の「アニメーション設定」の「type3」を使う指定*/
		animation-delay: 1.1s;	/*アニメーションを遅れて開始させる指定。2.2sは2.2秒の事。*/
	}
	/*photo10*/
	.photo10 {
		left: 10%;		/*ウィンドウの右からの配置指定*/
		top: 90%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo10 {
		animation-name: type2;
		animation-delay: 0.6s;
	}
	/*photo11*/
	.photo11 {
		left: -10%;		/*ウィンドウの右からの配置指定*/
		top: 50%;		/*ウィンドウの上からの配置指定*/
	}
	.home .photo11 {
		animation-name: type1;
		animation-delay: 1.3s;
	}

	/*コマ割り
	---------------------------------------------------------------------------
	opacityは透明度。0は色が0%、100%は色が100%出た状態。
	scaleは大きさ。0はゼロ、1は100%のサイズ。
	rotateは回転角度。
	---------------------------------------------------------------------------*/

	/*「type1」の設定*/
	@keyframes type1 {
		/*0コマ目*/
		0% {
			opacity: 0;
			transform: scale(0) rotate(0deg);
		}
		/*100コマ目0.8*/
		100% {
			opacity: 1;
			transform: scale(1) rotate(100deg);
		}
	}

	/*「type2」の設定*/
	@keyframes type2 {
		/*0コマ目0.6*/
		0% {
			opacity: 0;
			transform: scale(0) rotate(0deg);
		}
		/*100コマ目*/
		100% {
			opacity: 1;
			transform: scale(0.85) rotate(-150deg);
		}
	}

	/*「type3」の設定*/
		@keyframes type3 {
		/*0コマ目0.4*/
		0% {
			opacity: 0;
			transform: scale(0) rotate(0deg);
		}
		/*100コマ目*/
		100% {
			opacity: 1;
			transform: scale(0.7) rotate(180deg);
		}
	}
}