@charset "utf-8";

/*メインメニュー
---------------------------------------------------------------------------*/
/*スマホ用メニューブロック全体*/
#menubar-s {
	display: inline;
	overflow: auto;
	height: 100%;
	text-align: left;
	position: fixed;
	z-index: 101;
	top: 0px;
	left:100px;
	width: 40%;
	background: rgba(0,0,0,0.8);	/*背景色*/
	border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
	animation-name: opa1;		/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 0.5s;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
	font-size: 16px;	/*文字サイズ*/
}

#menubar-s ul{
	margin-left:50px;
	width:auto;
}
/*メニュー１個あたりの設定と、子メニューの見出し。*/
#menubar-s ul li a,#menubar_hdr2 {
	display: block;
	text-decoration: none;
	padding: 10px 15px;	/*上下、左右へのメニュー内の余白*/
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	color: #fff;		/*文字色*/
}


/*子メニュー
---------------------------------------------------------------------------*/
/*子メニューの見出しの追加。基本は上のブロックで設定しています。*/
#menubar_hdr2 {
	padding-left: 35px;
}
/*子メニューメニューブロック全体*/
#menubar-s2 {
	display: block;
	margin-top: 10px;
	background: rgba(0,0,0,0.5);	/*背景色*/
	/*border: 1px solid #666;		/*上の線の幅、線種、色*/
	border-bottom: none;		/*下の線のみ消す*/
}
/*「＞」アイコン設定*/
#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 {
	color: #fff !important;	/*文字色*/
	padding: 5px;	/*余白*/
	border-bottom: 1px solid #333 !important;		/*下の線の幅、線種、色*/
}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
.menubar_outer{
	width:100px;
	height:100vh;
	background:#fff;
	position:fixed;
	left:0;
	top:0;
	z-index: 100;
	border-right:solid 1px #000;
}
/*３本バーブロック*/
#menubar_hdr {
	display: inline;
	position: fixed;
	z-index: 101;
	top: 0px;		/*上からの配置場所*/
	left: 0px;	/*右からの配置場所*/
	width:100px;
	height:100px;
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 100px;	/*幅*/
	height: 100px;	/*高さ*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: url(../images/icon_menu_open.png) no-repeat center center/50px;	/*背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: url(../images/icon_menu_close.png) no-repeat center center/50px;	/*背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

.menu-logo{
	position:absolute;
	left:25px;
	top:20%;
}
.menu-logo img{
	width:50px;
}



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



/*メインメニュー
---------------------------------------------------------------------------*/
/*スマホ用メニューブロック全体*/
#menubar-s {
	display: inline;
	overflow: auto;
	height: 100%;
	text-align: left;
	position: fixed;
	z-index: 101;
	top: 0px;
	left:0px;
	width: 100%;
	background: rgba(0,0,0,0.8);	/*背景色*/
	border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
	animation-name: opa1;		/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 0.5s;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
	font-size: 16px;	/*文字サイズ*/
}
	
#menubar-s ul{
	margin-left:15%;
	width:85%;
	float:left;
}
	
/*３本バーアイコン設定
---------------------------------------------------------------------------*/
.menubar_outer{
	width:50px;
	height:50px;
	background:#fff;
	position:fixed;
	left:0;
	top:0;
	z-index: 100;
	border-right:none;
}
/*３本バーブロック*/
#menubar_hdr {
	display: inline;
	position: fixed;
	z-index: 101;
	top: 0px;		/*上からの配置場所*/
	left: 0px;	/*右からの配置場所*/
	width:50px;
	height:50px;
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: #fff url(../images/icon_menu.png) no-repeat center top/50px;	/*背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: #fff url(../images/icon_menu.png) no-repeat center bottom/50px;	/*背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

.menu-logo{
	display:none;
}
	
}