@charset "utf-8";

/*--------------------------------------------------------------------------
	◆jn_menu メイン部分
	
	jn_menu	2017.02.15	var 2.0用

	※装飾用のコードは最下部にあるのでそちらをどうぞ
--------------------------------------------------------------------------*/

html,body{
	position:relative;
}
div#wrap{
	z-index:8000;
	width:100%;
	min-height:100%;
	position:relative;
	overflow:hidden;
}
.menu_fixed{
	position:fixed;
	top:0;
}
	
/*--メニュー--*/
nav{
	top:0;
	left:0;
	z-index:9000;
	width:100%;
}
nav #switch_menu {
	display:table;
	width:100%;
}
nav #nav_wrap #switch_menu div{
	display:table-cell;
}
.sp_btn{
	display:none;
}
nav #nav_wrap #switch_menu div.sp_cls{
	display:none;
}
.sp_btn:hover,.sp_cls:hover{
	cursor:pointer;
}
nav #nav_wrap #switch_menu div .open_menu{
	display:none;
	position:absolute;
	margin:0;
	padding:0;
	z-index:9001;
}
nav #nav_wrap #switch_menu div.menu_last .open_menu{
	right:0;
}
nav #nav_wrap #switch_menu div.sp_only{
	display:none;
}


/*----- 0:リスト型 -----*/
nav .open_menu_li{
	position:relative;
}


/*----- 1:ボタン型 -----*/
nav #nav_wrap #switch_menu div .open_menu_btn{
	width:100%;
	left:0;
}
nav #nav_wrap #switch_menu div .open_menu_btn li{
	display:inline-block;
	vertical-align:top;
	box-sizing:border-box;
}

/*----- 2:パネル型 -----*/
nav #nav_wrap #switch_menu div .open_menu_pl{
	width:100%;
	left:0;
}
nav #nav_wrap #switch_menu div .open_menu_pl li{
	float:left;
	box-sizing:border-box;
}

nav #nav_wrap .line3 .open_menu_pl li{ width:33.3%}
nav #nav_wrap .line4 .open_menu_pl li{ width:25%}
nav #nav_wrap .line5 .open_menu_pl li{ width:20%}
nav #nav_wrap .line6 .open_menu_pl li{ width:16.66%}

nav #nav_wrap #switch_menu .childs-2 li{ width:50%}
nav #nav_wrap #switch_menu .childs-3 li{ width:33.3%}

nav #nav_wrap #switch_menu .childs-4 li{ width:25%}
nav #nav_wrap #switch_menu.line3 .childs-4 li{ width:33.3%}

nav #nav_wrap #switch_menu .childs-5 li{ width:20%}
nav #nav_wrap #switch_menu.line3 .childs-5 li{ width:33.3%}
nav #nav_wrap #switch_menu.line4 .childs-5 li{ width:25%}

nav #nav_wrap #switch_menu.line3 .childs-6 li{ width:33.3%}
nav #nav_wrap #switch_menu.line4 .childs-6 li{ width:25%}
nav #nav_wrap #switch_menu.line5 .childs-6 li{ width:20%}

/*--スマートフォン表示--*/
@media screen and (max-width: 800px){
div#switch_menu{
	position:fixed;
	display:none;
	z-index:9001;
	height:100%;
	overflow:scroll;
	top:0;
	right:0;
	-webkit-overflow-scrolling : touch;
}
nav #nav_wrap #switch_menu div{
	display:block;
}
nav #nav_wrap #switch_menu div a{
	display:block;
}
	nav #nav_wrap #switch_menu div.sp_cls{
	display:block;
}
nav #nav_wrap #switch_menu div .open_menu{
	display:none;
	position:relative;
	top:0;
}
nav #nav_wrap #switch_menu div.menu_last .open_menu{
	right:inherit;
}
nav #nav_wrap #switch_menu div.pc_only{
	display:none;
}
nav #nav_wrap #switch_menu div.sp_only{
	display:block;
}
div.dummy{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:8000;
}

/*----- 1:ボタン型 -----*/
nav #nav_wrap #switch_menu div .open_menu_btn li{
	display:block;
}

/*----- 2:パネル型 -----*/
nav #nav_wrap #switch_menu div .open_menu_pl li{
	float:none;
}

}

/*--------------------------------------------------------------------------
	◆装飾はこちら
--------------------------------------------------------------------------*/

header{
	z-index:8000;
	position:fixed;
	top:0;
	background:#fff;
}
header #h_nav{
	display:table;
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	border-bottom:2px solid #333;
}
header h1{
	display:table-cell;
	padding:10px 20px;
	vertical-align:middle;
}
header #h_btn{
	display:table-cell;
	width:30px;
	padding:10px;
	vertical-align:middle;
}

nav{
	padding:0;
	background-color:#333;
}

header{
	width:100%;
}

nav #nav_wrap {
	max-width:960px;
	margin:0 auto;
}

nav #nav_wrap #switch_menu > div{
	height:50px;
	text-align:center;
	vertical-align:middle;
	font-size:14px;
}

nav #nav_wrap #switch_menu div > a{
	display:block;
	padding:14px 0;
	color:#fff;
	text-decoration:none;
}

nav #nav_wrap #switch_menu div > a:hover{
	background-color:#F90;
}

nav #nav_wrap #switch_menu div > a.active{
	background-color:#F90;
}

nav #nav_wrap #switch_menu div ul li a{
	display:block;
	min-width:110px;
	padding:12px 20px;
	color:#fff;
	background-color: rgba(0,0,0,0.5);
	text-decoration:none;
	text-align:left;
}

nav #nav_wrap #switch_menu div ul li a:hover{
	background-color:#F90;
}

#wrap nav #nav_wrap #switch_menu div .menu_last{
    right: 0;
}


/*----- 1:ボタン型 装飾例 -----*/
nav #nav_wrap #switch_menu div .open_menu_btn ul{
	max-width:1000px;
	margin:0 auto;
	padding:1px;
	background-color:rgba(255,255,255,0.75);
	border:1px solid #000;
	border-top:none;
}
nav #nav_wrap #switch_menu div .open_menu_btn li{
	width:20%;
	padding:1px;
}
nav #nav_wrap #switch_menu div .open_menu_btn li a{
	height:80px;
	padding:50px 0 0;
	text-align:center;
}

/*----- 2:パネル型 装飾例 -----*/
nav #nav_wrap #switch_menu div .open_menu_pl li a{
	padding:50px 0;
	text-align:center;
}
nav #nav_wrap #switch_menu div .open_menu_pl{
	background-color:rgba(255,255,255,0.75);
	border-top:1px solid #fff;
}

nav #nav_wrap #switch_menu div .open_menu_pl li{
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	box-sizing:border-box;
}



@media screen and (max-width: 800px){
nav div#switch_menu{
	padding:15px;
	font-size:16px;
	background:rgba(255,255,255,0.8);
	box-sizing:border-box;
}

nav #nav_wrap #switch_menu div{
	margin-bottom:1px;
	height:auto;
	text-align:left;
}

nav #nav_wrap #switch_menu div#home{
	width:100%;
	background:none;
}

nav #nav_wrap #switch_menu div > a{
	display:block;
	padding:10px 12px;
	background:url(../img/ar_w.png) right 12px center no-repeat #333;
	background-size:16px;
}

nav #nav_wrap #switch_menu div > a.close{
	background:url(../img/ico_close_w.png) right 10px center no-repeat #333;
}

nav #nav_wrap #switch_menu div > a.open{
	background:url(../img/ico_open_w.png) right 10px center no-repeat #333;
}

nav #nav_wrap #switch_menu div > a:hover{
	background-color:#F90;
}

nav #nav_wrap #switch_menu div ul li a{
	margin-top:1px;
	padding:10px 25px 10px 10px;
	font-size:12px;
	line-height:1.3;
	color:#333;
	background:url(../img/ar_w.png) right 10px center no-repeat #ccc;
	background-size:12px;
}
nav #nav_wrap #switch_menu div ul li a:hover{
	background-color:#F90;
}

/*----- 1:ボタン型 装飾例 -----*/
nav #nav_wrap #switch_menu div .open_menu_btn ul{
	padding:0;
	background-color:inherit;
	border:none;
}
nav #nav_wrap #switch_menu div .open_menu_btn li{
	width:auto;
	padding:0;
}
nav #nav_wrap #switch_menu div .open_menu_btn li a{
	height:auto;
	margin-top:1px;
	padding:10px 25px 10px 10px;
	text-align:left;
}

/*----- 2:パネル型 装飾例 -----*/
nav #nav_wrap #switch_menu div .open_menu_pl ul{
	padding:0;
	background-color:inherit;
	border:none;
}
nav #nav_wrap #switch_menu div .open_menu_pl li{
	width:auto;
	padding:0;
}
nav #nav_wrap #switch_menu div .open_menu_pl li a{
	height:auto;
	margin-top:1px;
	padding:10px 25px 10px 10px;
	text-align:left;
}

/*----- メニュー表示ボタン 装飾例 -----*/
.sp_btn{
	display:block;
	width:30px;
	height:30px;
	text-align:center;
	background:url(../img/sp_btn.png) center center no-repeat;
	background-size:16px auto;
	border:1px solid #333;
	box-sizing:border-box;
}
.opened{
	background:url(../img/sp_opened.png) center center no-repeat;
	background-size:13px;
}
.sp_btn:hover{
	background-color:#F90;
}

}