@charset "utf-8";

/*menubar
---------------------------------------------------------------------------*/
#menubar li {
	float: left;
	font-size: 13px;
	position: relative;
}
#menubar li a {
	display: block;text-decoration: none;
	color: #fff;
	text-align: center;
	height: 75px;		/*ここと、下の合計がfixmenuの数字（80）になるように。*/
	padding-top: 5px;	/*ここと、上の合計がfixmenuの数字（80）になるように。*/
}
#top #menubar li a {
	height: 250px;
	padding: 10px 10px 0 20px;
	text-align: left;
}

/*大見出し（共通）*/
#menubar .title {
	display: block;
	font-size: 20px;
}
#top #menubar .title {
	font-size: 32px;
}

/*小見出し（共通）*/
#menubar .sub-title {display: block;font-size: 18px;margin-bottom: 10px;}

/*小さな端末用メニューを表示させない*/
#menubar-s {display: none;}

/*「▼」マーク（共通）
---------------------------------------------------------------------------*/
#menubar > li::after {
	display: block;position: absolute;bottom: 0px;width: 100%;text-align: center;
	content: "▼";
	font-size: 10px;
	line-height: 30px;
	background: rgba(0,0,0,0.3);
	color: #fff;
}

/*1.テンプレート
---------------------------------------------------------------------------*/
#menubar li.template {
	width: 40%;
	background: #bf0751;
}
#top #menubar li.template {
	background: #bf0751 url(../images/top/img_temp.png) no-repeat right top / 30%;
}
/*ddmenuのhover*/
#menubar li.template ul.ddmenu li a:hover {
	background: #bf0751;
}

/*2.CMS
---------------------------------------------------------------------------*/
#menubar li.cms {
	width: 40%;
	background: #075f97;
}
#top #menubar li.cms {
	background: #075f97 url(../images/top/img_cms.png) no-repeat right top / 42%;
}
/*ddmenuのhover*/
#menubar li.cms ul.ddmenu li a:hover {
	background: #075f97;
}

/*3.その他
---------------------------------------------------------------------------*/
#menubar li.others {
	width: 20%;
	background: #999;
}

/*ddmenu
---------------------------------------------------------------------------*/
#menubar ul.ddmenu {
	position:absolute;visibility: hidden;z-index: 20;
	width: 100%;
	font-size: 12px;
	border-top: 1px solid #fff;
}
#menubar ul.ddmenu li {
	float: none;
}
#menubar ul.ddmenu li a {
	width: 90%;
	padding: 7px 5% !important;
	height: auto !important;
	background: #000;
	background: rgba(0,0,0,0.8);
	color: #fff;
	text-align: left;
	border: none;
	border-bottom: 1px solid #fff;
}
/*小見出し*/
#menubar ul.ddmenu .title {
	font-size: 14px !important;
	background: #777;
	text-align: center;
	color: #fff;
	border-bottom: 1px solid #fff;
}
/*プルダウンの一番上のメニュー（比較）*/
#menubar ul.ddmenu li.hikaku a {
	text-align: center !important;
	padding: 15px 5%;
	color: #FFF700;
}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*1.テンプレート
---------------------------------------------------------------------------*/
#menubar-s li.template {
	background: #bf0751;
	font-size: 12px;
}

/*2.CMS
---------------------------------------------------------------------------*/
#menubar-s li.cms {
	background: #075f97;
	font-size: 12px;
}

/*3.その他
---------------------------------------------------------------------------*/
#menubar-s li.others {
	background: #999;
	font-size: 12px;
}

/*大見出し（共通）*/
#menubar-s .title {
	display: block;
	font-size: 20px;
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*スマホ用メニューブロック全体*/
#menubar-s {
	display: block;overflow: auto;width: 100%;height: 100%;
	animation-name: frame1;animation-duration: 0.5s;animation-fill-mode: both;
	position: fixed;z-index: 100;
	top: 44px;
	left: 0px;
	background: rgba(0,0,0,0.8);
	border-top: 1px solid #fff;
	font-size: 16px;
}
/*メニュー１個あたりの設定と、子メニューの見出し。*/
#menubar-s ul li a,#menubar_hdr2,#menubar_hdr3 {
	display: block;text-decoration: none;
	padding: 10px 15px;
	border-bottom: 1px solid #fff;
	color: #fff;
}
/*PC用メニューを非表示にする*/
#header-menu, #menubar {display: none;}

/*子メニュー
---------------------------------------------------------------------------*/
/*子メニューの見出しの追加。基本は上のブロックで設定しています。*/
#menubar_hdr2 {
	padding-left: 35px;
}
/*子メニューメニューブロック全体*/
#menubar-s2 {
	display: block;
	margin-top: 10px;
	margin-bottom: 5px;
	border-radius: 5px;
	border: 1px solid #999;
}
/*「＞」アイコン設定*/
#menubar_hdr2.close {
	background: url(../images/arrow2.png) no-repeat 10px 18px / 18px;
}
/*「＾」アイコン設定*/
#menubar_hdr2.open {
	background: url(../images/arrow3.png) no-repeat 10px 18px / auto 18px;
}
/*子メニュー１個あたりの設定*/
#menubar-s2 li a {
	border-bottom: 1px solid #999 !important;
	padding: 5px;
}
#menubar-s2 li:last-child a {
	border-bottom: none !important;
}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;position: fixed;z-index: 100;
	top: 2px;
	right: 3%
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 40px;
	height: 40px;
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: url(../images/icon_menu.png) no-repeat center top/40px;
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: url(../images/icon_menu.png) no-repeat center bottom/40px;
}

}