@charset "utf-8";


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

/*photo1*/
.photo1 {
	left: -10%;	/*ウィンドウの左からの配置指定*/
	top: -20%;	/*ウィンドウの上からの配置指定*/
}
.home .photo1 {
	animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
	animation-delay: 0.4s;	/*アニメーションを遅れて開始させる指定。0.4sは0.4秒の事。*/
}
/*photo2*/
.photo2 {
	right: -15%;	/*ウィンドウの右からの配置指定*/
	bottom: -15%;	/*ウィンドウの下からの配置指定*/
}
.home .photo2 {
	animation-name: type2;	/*下の「アニメーション設定」の「type2」を使う指定*/
	animation-delay: 0.8s;	/*アニメーションを遅れて開始させる指定。0.8sは0.8秒の事。*/
}
/*photo3*/
.photo3 {
	left: -20%;		/*ウィンドウの左からの配置指定*/
	bottom: -20%;	/*ウィンドウの下からの配置指定*/
}
.home .photo3 {
	animation-name: type3;	/*下の「アニメーション設定」の「type3」を使う指定*/
	animation-delay: 1s;	/*アニメーションを遅れて開始させる指定。1sは1秒の事。*/
}
/*photo4*/
.photo4 {
	right: -10%;	/*ウィンドウの右からの配置指定*/
	top: -10%;		/*ウィンドウの上からの配置指定*/
}
.home .photo4 {
	animation-name: type2;	/*下の「アニメーション設定」の「type2」を使う指定*/
	animation-delay: 1.2s;	/*アニメーションを遅れて開始させる指定。1.2sは1.2秒の事。*/
}
/*photo5*/
.photo5 {
	left: 20%;		/*ウィンドウの左からの配置指定*/
	bottom: -20%;	/*ウィンドウの下からの配置指定*/
}
.home .photo5 {
	animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
	animation-delay: 1.4s;	/*アニメーションを遅れて開始させる指定。1.4sは1.4秒の事。*/
}
/*photo6*/
.photo6 {
	left: -10%;	/*ウィンドウの左からの配置指定*/
	top: 20%;	/*ウィンドウの上からの配置指定*/
}
.home .photo6 {
	animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
	animation-delay: 1.6s;	/*アニメーションを遅れて開始させる指定。1.6sは1.6秒の事。*/
}
/*photo7*/
.photo7 {
	right: -25%;	/*ウィンドウの右からの配置指定*/
	top: 15%;		/*ウィンドウの上からの配置指定*/
}
.home .photo7 {
	animation-name: type2;	/*下の「アニメーション設定」の「type2」を使う指定*/
	animation-delay: 1.8s;	/*アニメーションを遅れて開始させる指定。1.8sは1.8秒の事。*/
}
/*photo8*/
.photo8 {
	right: 5%;	/*ウィンドウの右からの配置指定*/
	top: 20%;	/*ウィンドウの上からの配置指定*/
}
.home .photo8 {
	animation-name: type3;	/*下の「アニメーション設定」の「type3」を使う指定*/
	animation-delay: 2s;	/*アニメーションを遅れて開始させる指定。2sは2秒の事。*/
}
/*photo9*/
.photo9 {
	left: 25%;	/*ウィンドウの左からの配置指定*/
	top: -10%;	/*ウィンドウの上からの配置指定*/
}
.home .photo9 {
	animation-name: type3;	/*下の「アニメーション設定」の「type3」を使う指定*/
	animation-delay: 2.2s;	/*アニメーションを遅れて開始させる指定。2.2sは2.2秒の事。*/
}

/*コマ割り
---------------------------------------------------------------------------
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);
}
}



/*画面を「縦向き」にした場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait) {

/*photo1*/
.photo1 {
	left: -20%;	/*ウィンドウの左からの配置指定*/
	top: -20%;	/*ウィンドウの上からの配置指定*/
}
/*photo2*/
.photo2 {
	right: -25%;	/*ウィンドウの右からの配置指定*/
	bottom: -10%;	/*ウィンドウの下からの配置指定*/
}
/*photo3*/
.photo3 {
	left: -30%;		/*ウィンドウの左からの配置指定*/
	bottom: -10%;	/*ウィンドウの下からの配置指定*/
}
/*photo4*/
.photo4 {
	right: -30%;	/*ウィンドウの右からの配置指定*/
	top: -10%;		/*ウィンドウの上からの配置指定*/
}
/*photo5*/
.photo5 {
	left: 0%;		/*ウィンドウの左からの配置指定*/
	bottom: -30%;	/*ウィンドウの下からの配置指定*/
}
/*photo6*/
.photo6 {
	left: -30%;	/*ウィンドウの左からの配置指定*/
	top: 20%;	/*ウィンドウの上からの配置指定*/
}
/*photo7*/
.photo7 {
	right: -30%;	/*ウィンドウの右からの配置指定*/
	top: 10%;		/*ウィンドウの上からの配置指定*/
}
/*photo8*/
.photo8 {
	right: -35%;	/*ウィンドウの右からの配置指定*/
	top: 25%;	/*ウィンドウの上からの配置指定*/
}
/*photo9*/
.photo9 {
	left: 5%;	/*ウィンドウの左からの配置指定*/
	top: -15%;	/*ウィンドウの上からの配置指定*/
}

}