
/*----------------------------------*/
/* 背景 #nav ,.nav_horizontal , .nav_vertical　すべてに設定する。
/* スマホ時の指定は #nav
/*
/*----------------------------------*/


.area_nav{
	border-left:none;
	border-right:none;
	padding:0;
	background-color:#913558;
}
.area_nav .container{
	border-left:1px solid #B96182;
}

/*! responsive-nav.js v1.0.15 by @viljamis */

#nav ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}
.js #nav{
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

#nav.opened {
  max-height: 9999px;
}

#nav-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 50px;
  height: 30px;
  float: right;
  text-indent: -9999px;
  overflow: hidden;
  background: #669900 url("hamburger.gif") no-repeat 50% 50%;/* トグルの背景色 */
}

@media screen and (min-width:780px) {
  .js #nav{
    position: relative;
  }
  .js #nav.closed {
    max-height: none;
  }
  #nav-toggle {
    display: none;
  }
}



/*---------------------------------------*/
/*  radius指定の場合は親ネスト
/* IE  border-radius と background の併記は表示が乱れるので禁止。
/*---------------------------------------*/
.area_radius{
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	overflow:hidden;
}


/* ---------------------------- */
/* 背景色の指定　*/

.nav_horizontal{
	overflow:hidden;
}
.nav_vertical{
	background-color:#fff;
	overflow:hidden;
}


/* ---------------------------- */
/* holizontal */

.nav_horizontal #nav{  /* セル等倍にするための指定  */
display: table;
width:100%;
}
.nav_horizontal .area_nav_radius{
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.nav_horizontal .area_nav_radius ul{
	border:1px solid  #ccc;
}
.nav_horizontal #nav ul li{
	display: table-cell;
				width: 1%; 
        float: none;
				text-shadow: none;
	list-style:none;
	overflow:hidden;
}
.nav_horizontal #nav ul li a{
	display:block;
	border-right:1px solid #B96182;
	background:url(../img/nav/nav_arrow.png) no-repeat bottom right;
color:#fff;
	text-align:center;
	padding:10px 0;
	text-decoration:none;
}
.nav_horizontal #nav ul li a:hover{
	background:#FB7598;
}


@media screen and (min-width:790px) {

/* ---------------------------- */
/* vertical */

.nav_vertical ul li{
/*	background-color:#eee;*/
	border:1px solid #fff;
	list-style:none;
}
.nav_vertical ul li a{
	display:block;
	text-align:center;
	padding:0.3em 0;
	text-decoration:none;
}

}



/*--------------------------------------------------------/
/* サイドナビ　.nav_vertical
/*--------------------------------------------------------*/



/* ---------------------------- */
/* 背景色の指定　*/

.nav_horizontal,
.nav_vertical{
	overflow:hidden;
}



/* ---------------------------- */
/* vertical */

@media screen and (max-width:780px){
	.nav_vertical{
		background-color:#FED2E2;
	}

}


.nav_vertical ul li{
	border:2px solid #fff;
	list-style:none;
	background:#eee!important;	
}

/* ul 直下のaタグを制御 */
.nav_vertical ul li > a{
	text-align:left!important;
	display:block;
	padding:0.3em 0 0.3em 1.4em;
	text-decoration:none;
background:url(../img/common/ico_nav_side.png) no-repeat 2px 7px;
	border:1px solid #FFAEC0;
		background-color:#FFEEF4;
	color:#000;
}
.nav_vertical ul li > a:hover{
	background-color:#FFEEF4;
}

.nav_vertical ul li ul li{
	background-color:#eee!important;
	border:0 solid #fff;
}

/* ul li ul 直下のaタグを制御 */
.nav_vertical ul li ul li > a{
	padding:0.3em 0 0.2em 1.2em;
	background:url(../img/common/ico_nav_side.png) no-repeat 2px 4px;
	border:none;
	border-top:1px dotted #ccc;
}
.nav_vertical ul li ul li:first-child a{
	border:none;
}

.nav_vertical ul li ul li > a:hover{
	color:#33C!important;
	background:none!important;
	background:url(../img/common/ico_nav_side.png) no-repeat 2px 4px !important;
	text-decoration:underline;
}

.nav_vertical ul li ul li ul li a{
	margin-left:10px;
	padding:0.1em 0 0.1em 1.2em;
	border:none;
}

.nav_vertical ul li ul li ul li  ul li a{
	margin-left:20px;
	padding:0.1em 0 0.1em 1.2em;
	border:none;
		background:url(../img/common/ico_nav_side.png) no-repeat 2px 2px;
	font-size:0.9em;

}

.nav_vertical ul li ul li ul li  ul li ul li a{
	margin-left:40px;
	padding:0.1em 0 0.1em 1.2em;
	border:none;

}
