@charset "utf-8";

/**************************************
*	<div id="TOPMENU"> 内の共通設定
***************************************/
#TOPMENU
{
	padding-top: 40px;
}

/**************************************
*	PC用のスタイル定義
***************************************/
@media screen and (min-width: 993px)
{
	/* トップ全体ををセンタリングする */
	#TOPMENU ul.topmenu
	{
		position: relative;
		float: left;
		width: 971px;
		left: 50%;
		margin-left: -485px;
	}
	/*
	#TOPMENU ul.topmenu li.topmenu
	{
		position: relative;
		float: left;
		left: -50%;
	}
	*/

	/* ロゴの横にメニューを持ってくる */
	#TOPMENU ul.logo
	{
		float: left;
		width: 365px;
	}

	/* メニューを横に並べる */
	#TOPMENU ul.menu
	{
		float: left;
		width: 606px;
	}
	#TOPMENU li.menu
	{
		float: left;
	}
}

/**************************************
*	タブレット、スマホ用のスタイル定義
***************************************/
@media screen and (max-width: 992px)
{
	.l_img{ width: 80%; }

	/* トップ全体をセンタリングする */
	#TOPMENU ul
	{
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	/* ロゴのサイズを可変にする */
	#TOPMENU ul.logo
	{
		width: 100%;
	}

	#TOPMENU ul.menu
	{
		padding-top: 10px;	/* メニューの上を 10px 空ける */
		width: 303px;		/* メニューを３列にする */
	}

	#TOPMENU li.menu
	{
		width: 101px;		/* メニュー１つの横幅指定 */
		float: left;		/* 横並び処理 */
	}
}

/**************************************
*	スマホ用のスタイル定義
***************************************/
@media screen and (max-width: 600px)
{
	#TOPMENU ul.menu
	{
		width: 202px;	/* メニューを２列にする */
	}
}