@charset "utf-8";


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

/*0コマ目(最初)のキーフレーム*/
0% {
	left: -3%;		/*headerブロックに対して左から-3%の場所に配置*/
        top: -200%;	/* ページの上から1%の場所に配置 */

/*	bottom: 80px;	headerブロックに対して下から80pxの場所に配置*/
	animation-timing-function: linear;	/*ゆっくり動き出して、加速する設定*/
	transform: rotate(40deg);	/*回転する角度*/
}
/*80コマ目のキーフレーム*/
70% {
	top: -100%;	/* ページの上から1%の場所に配置 */
}
/*90コマ目のキーフレーム*/
80% {
	top: -40%;	/* ページの上から1%の場所に配置 */
}
/*100コマ目(最後)のキーフレーム*/
90% {
	top: -10%;	/* ページの上から1%の場所に配置 */
}
100% {
	top: 1%;	/* ページの上から1%の場所に配置 */
	transform: rotate(-13deg);	/*回転する角度*/
}

}

/*トップページのロゴ画像追加設定（※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%;	/*ロゴ画像の幅*/
}

}