@charset "utf-8";


/* PC用
------------------------------------------------------------*/

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


/* メインメニュー　PC用
------------------------------------------------------------*/

nav#mainNav { background-color:#595757; }
nav#mainNav .inner { display: table; }
nav div.panel { display:block !important; }

a#menu { display:none; }
#mainNav { z-index: 20; }
#mainNav li {
 position: relative; float: left; color:#fff ; font-size: 14px ; line-height: 1 ;  
}


.panel ul li a {
  padding:15px 2.7vw ; display: block;
  color: #fff; text-decoration: none; white-space:nowrap;
}

.panel ul li ul {   list-style: none;   position: absolute;   z-index: 100; }
.panel ul li ul li {   overflow: hidden;   height: 0;   transition: .5s; }

.panel ul li a:hover { background-color:#4c4a4a; }
.panel ul li ul li a:hover { background-color:#3d3c3c; }



.panel > ul > li ul li { width: 100%; }


.panel ul li ul li a {  
  padding:10px; text-align: center;
  border-bottom: 1px solid #595757;
  background-color:#4c4a4a; 
}

#mainNav li ul li:hover > ul > li ,
.panel ul li:hover > ul > li {   overflow: visible;  height: 35px; }

.panel ul  li ul li ul  {   top: 0px;   left: 100%;   margin: 0px ; }

.panel input[type="checkbox"].on-off { display: none; }

}



@media only screen and (max-width:891px){
.panel > ul > li a {
  padding:1.8vw 1.1vw ; background-color:#595757; 
  display: block;  color: #fff; font-size: 1.6vw; text-decoration: none;
}


.panel > ul > li ul li a {     font-size: 1.6vw;   height: 28px;}
.panel > ul > li:hover > ul > li , #mainNav li ul li:hover > ul > li {
  overflow: visible;
  height: 28px;
}


/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/

@media only screen and (max-width:600px){



	nav#mainNav{
	display:block;
	margin:0 ;
	background-color:#595757;  letter-spacing:1px;
	}
	

	nav#mainNav a.menu:before{content:" ▶︎";margin-right:5px }
	nav#mainNav a.menu{
	display:block;
	color:#fff;
	padding:10px;
	margin:0 ;
	text-align:left;
	}

	nav#mainNav a{ display:block; font-size: 14px;  text-decoration:none; }
	
	nav#mainNav a#menu span{padding-left:35px;}
	nav#mainNav a.menuOpen:before{content:" ▼"; }
	nav#mainNav a#menu:hover{cursor:pointer;}
	
	nav .panel{
	display: none;
	position: relative;
	right: 0;
	top:0;
	z-index: 1;
	}

	nav#mainNav ul{margin:0;padding:0 0 5px 0 ;}

	nav#mainNav ul li{
	float: none;
/*	clear:both;*/
	width:100%;
	height:auto;
	line-height:1.2;
	}

	nav#mainNav ul li:first-child{}
	nav#mainNav ul li li:first-child{border-top:0;}

	nav#mainNav ul li a{
	display: block;
	padding:13px ;
	text-align:left;
	border-bottom:1px solid #595757;
	background:#4c4a4a;
	color:#fff; 
height:40px;
	}

	nav#mainNav ul li li{
	float:left;
	border:0;
	}

#mainNav li ul li:hover > ul > li ,
#mainNav li ul li > ul > li ,
#mainNav li ul li > ul > li a  {   overflow: visible;  height: 40px; }

nav#mainNav ul li li a:before{ opacity: 0.5; font-size:60%; content:"├"; margin-right:10px; }
nav#mainNav ul li li a {
padding-left:10px;	display:block;cursor:pointer; background:#3d3c3c;
}

nav#mainNav ul li li:last-child a:before{ font-size:60%; content:"└"; margin-right:10px}
nav#mainNav ul li li:last-child a {
padding-left:10px; display:block;cursor:pointer; background:#3d3c3c;
}

nav#mainNav ul li li ul li a {
padding-left:20px; display:block;cursor:pointer; background:#373535;
}
nav#mainNav ul li li ul li:last-child a {
padding-left:20px; display:block;cursor:pointer; background:#373535;
}


nav#mainNav ul li a:hover { background:#4c4a4a;;}
nav#mainNav ul li ul li a:hover { background:#373535;;}
nav#mainNav ul li li ul li a:hover { background:#312f2f;;}
nav#mainNav ul li li ul { background:#373535; }

nav#mainNav ul li li ul li:nth-child(odd) { width:49.9%; }
nav#mainNav ul li li ul li:nth-child(even) { width:50.0%; }
nav#mainNav ul li li ul li{ white-space:nowrap; }

#mainNav li ul li:hover > ul > li { padding-bottom:10px }

nav#mainNav ul li li:nth-child(odd) { width:49.9%; }
nav#mainNav ul li li:nth-child(even) { width:50.0%; }
nav#mainNav ul li li { white-space:nowrap; }


/*	#mainImg{margin-bottom:20px;}*/


label {
    display: block;
    margin: 0;
    cursor:pointer;
}

#mainNav a.menu2:after{font-size:70%;line-height:100%; content:" ▶︎";margin-right:5px }
#mainNav a.menuOpen2:after{font-size:70%;line-height:100%; content:" ▼"; }


.panel input[type="checkbox"]{ display: none; }

.panel ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
    height: 100%;
}




}


/* 600px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width: 768px){

	#wrapper, .inner{width:100%; padding:0px}
	#header{width:100%;padding:5px;}
	nav#mainNav ul{margin:0 auto;}
	nav#mainNav ul ul{padding:0;}
	nav div.panel{float:none;}
	#content, #sidebar
{ clear:both;width:100%;float:none;margin:0 auto;padding:0;	}
h2.title{

border-radius: 0px ;-ms-border-raduis: 0px ;

}
}

}