@charset "utf-8";



/*ロゴアニメーション。全体で100コマあるアニメーションだと思って設定して下さい。

---------------------------------------------------------------------------
*/
@keyframes logo {


/*0コマ目(最初)のキーフレーム*/
0% {

	left: -3%;
		
/*headerブロックに対して左から-3%の場所に配置
*/
	bottom: 200px;
	
/*headerブロックに対して下から200pxの場所に配置
*/
	animation-timing-function: ease-in;
	
/*ゆっくり動き出して、加速する設定
*/
	transform: rotate(40deg);
	
/*回転する角度
*/
}

/*80コマ目のキーフレーム
*/
70% {

	bottom: -20px;
	
/*headerブロックに対して下から-20pxの場所に配置
*/
}

/*90コマ目のキーフレーム
*/
80% {

	bottom: -40px;
	
/*headerブロックに対して下から-40pxの場所に配置
*/
}

/*100コマ目(最後)のキーフレーム
*/
90% {

	bottom: -30px;
	
/*headerブロックに対して下から-30pxの場所に配置
*/
}
100% {

	bottom: -40px;
	
/*headerブロックに対して下から-40pxの場所に配置
*/
	transform: rotate(-20deg);
	
/*回転する角度
*/
}

}


/*トップページのロゴ画像追加設定（※style.cssにも設定があります）

---------------------------------------------------------------------------
*/
#top #logo {

	position: absolute;

	left: -3%;
	
/*ヘッダーブロックに対して左から-3%の場所に配置
*/
	animation-name: logo;
	
/*上のアニメーションで指定しているkeyframesの名前（logo）
*/
	animation-duration: 1.4S;
	
/*アニメーションの実行時間
*/
	animation-fill-mode: forwards;
	
/*アニメーションの完了後、最後のキーフレームを維持する
*/
	width: 25%;
	
/*ロゴ画像の幅
*/
	transform: rotate(-20deg);
	
/*回転する角度
*/
}




/*画面幅1200px以上の設定

------------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (min-width:1200px){

#top #logo {

	width: 20%;
	
/*ロゴ画像の幅
*/
}

}




/*画面幅600px以下の設定

------------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:600px){

#top #logo {

	width: 30%;
	
/*ロゴ画像の幅
*/
}

}



/*画面幅380px以下の設定

------------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:380px){

#top #logo {

	width: 40%;
	
/*ロゴ画像の幅
*/
}

}