@charset "utf-8";


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

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

/*photo1*/
.photo1 {
	right: 0%;	/*ウィンドウの左からの配置指定*/
	top: 10%;	/*ウィンドウの上からの配置指定*/
}
.home .photo1 {
	animation-name: type1;	/*下の「アニメーション設定」の「type1」を使う指定*/
	animation-delay: 0s;	/*アニメーションを遅れて開始させる指定。0.4sは0.4秒の事。*/
}

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

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


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

/*photo1*/
.photo1 {
	left: -20%;	/*ウィンドウの左からの配置指定*/
	top: -20%;	/*ウィンドウの上からの配置指定*/
}