/* Flexnav Base Styles */
#nav_area{
	position:absolute;
	top:43px;
	right:0;
	height:auto;
	width:100%;
	z-index:9999;
}
#nav_area nav{
	border-top: 1px solid transparent;
	position: relative;
	float: none;
}
#nav_area nav .target{
	display:inline-block;
}
.flexnav {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  transition: none;
  -webkit-transform-style: preserve-3d;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  max-height: 0; }
  .flexnav.opacity {
    opacity: 0; }
  .flexnav.flexnav-show {
    max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; }
  .flexnav.one-page {
    position: fixed;
    top: 50px;
    right: 5%;
    max-width: 200px; }
  .flexnav li {
    font-size: 100%;
    position: relative;
    overflow: hidden; }
.flexnav li a,
.flexnav li p {
	position: relative;
	display: block;
	padding: 1em .5em;
	z-index: 100;
	overflow: hidden;
	color: #ffffff;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	background-color: rgba(0,0,0,0.8);
	cursor: pointer;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-ms-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.flexnav li a:hover,
.flexnav li p:hover{
	background-color: rgba(10,10,10,1.0);
	border-bottom: 1px solid rgba(100, 100, 100, 1.0);
	border-top: 1px solid rgba(100, 100, 100, 1.0);
	cursor: pointer;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-ms-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
  .flexnav li ul {
    width: 100%; }
    .flexnav li ul li {
      font-size: 100%;
      position: relative;
      overflow: hidden; }
  .flexnav li ul.flexnav-show li {
    overflow: visible; }
  .flexnav li ul li a {
    display: block;
    background: #b2b2af; }
  .flexnav ul li ul li a {
    background: #bfbfbc; }
  .flexnav ul li ul li ul li a {
    background: #cbcbc9; }
  .flexnav .touch-button {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #acaca1;
    background: rgba(0, 0, 0, 0.075);
    text-align: center; }
    .flexnav .touch-button:hover {
      cursor: pointer; }
    .flexnav .touch-button .navicon {
      position: relative;
      top: 1.4em;
      font-size: 12px;
      color: #666; }

.menu-button {
	position: absolute;
	top:-44px;
	right:0;
	display: block;
	color: #222;
	cursor: pointer;
	width:44px;
	height:44px;
	float:right;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.menu-button.one-page {
	position: fixed;
	top: 0;
	right: 5%;
	padding-right: 45px;
}

.menu-button .touch-button {
	background: transparent;
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	display: inline-block;
	text-align: center;
}
.menu-button .touch-button .navicon {
	display:block;
	position: relative;
	margin:14px auto 0;
	width:16px;
	height:15px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.menu-button .touch-button .navicon:after{
	content:url("../img/common/icn_hamburger.svg");
}
@media all and (min-width: 640px) {
	#nav_area{
		position:relative;
		top:auto;
	}
	#nav_area nav{
		float: right;
	}
	.flexnav,
	.flexnav ul li,
	.flexnav ul li ul li,
	.flexnav ul li a,
	.flexnav ul li ul li a{
	max-width: 100%;
	}
	body.one-page {
		padding-top: 70px;
	}
	
	.flexnav { overflow: visible; text-align:center;}
	.flexnav.opacity { opacity: 1; }
	.flexnav.one-page {
		top: 0;
		right: auto;
		max-width: 1080px;
	}
	.flexnav li {
		position: relative;
		list-style: none;
		display: inline-block;
		overflow: visible;
	}
	.flexnav li a,
	.flexnav li p {
	background: none;
	border-bottom: none;
	font-size: 15px;
	text-align: center;
	padding: 12px 40px 8px 40px;
	color: #ffffff;
	border-bottom: none;
	border-top: none;
	}

	.flexnav > li:before{
		content:"";
		width:1px;
		height:20px;
		display:block;
		position:absolute;
		top:50%;
		margin-top:-10px;
		border-left:1px dotted #999;
	}
	.flexnav li:first-child:before{
		content:none;
	}/*
	.flexnav li a:after,
	.flexnav li p:after{
		position:absolute;
		bottom:0;
		left:0;
		right:0;
		-webkit-transform:scaleY(-0.6) translate(0,0) ;
		-moz-transform:scaleY(-0.6) translate(0,0) ;
		-ms-transform:scaleY(-0.6) translate(0,0) ;
		transform:scaleY(-0.6) translate(0,0) ;
		opacity:.1;
		-webkit-transition: .3s ease-in-out;
		-moz-transition: .3s ease-in-out;
		-ms-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}
	#nav_top a:after		{content:"トップ";}
	#nav_contents p:after	{content:"コンテンツ";}
	#nav_choose a:after		{content:"ヘッドホンの選び方";}
	#nav_about a:after		{content:"このサイトについて";}
*/
	.flexnav li a:hover,
	.flexnav li p:hover{
	opacity: 1 !important;
	-webkit-transform: translate(0,0px);
	-moz-transform: translate(0,0px);
	-mstransform: translate(0,0px);
	transform: translate(0,0px);
	color: #8DD7DB;
	border-bottom: none;
	border-top: none;
	}
	
	#nav_contents ul li a:hover{color:#4c9eb8;}
	
	.top-page #nav_top a{
		color:#8DD7DB;
	}
	.flexnav li a:hover:after,
	.flexnav li p:hover:after{
		-webki-transform:scaleY(-0.6) translate(0,0px) ;
		-moz-transform:scaleY(-0.6) translate(0,0px) ;
		-ms-transform:scaleY(-0.6) translate(0,0px) ;
		transform:scaleY(-0.6) translate(0,0px) ;
	}
	.flexnav .touch-button:hover {
		/*cursor: pointer; */
	}

	.flexnav li > ul {
		position: absolute;
		top: auto;
		left:50%;
		margin-left:-130px;
		background:rgba(255,255,255,.9);
		z-index:999;
	}
	.flexnav li > ul li {
		width: 100%;
		display:block;
		border-top:1px solid #cecece;
		
	}
	.flexnav li > ul li:first-child{
		border-top:none;
	}
	.flexnav li ul {
	width: 260px;
	}
	.flexnav li ul li > ul {
		margin-left: 100%;
		top: 0;
	}
	.flexnav li ul li a {border-bottom: none;color:#333;}
	.flexnav li ul.open {
		display: block;
		opacity: 1;
		visibility: visible;
		z-index: 1;
	}
	.flexnav li ul.open li {
		overflow: visible;
		max-height: 100px;
	}
	.flexnav li ul.open ul.open {
		margin-left: 100%;
		top: 0;
	}

	.menu-button {display: none; }
}



.oldie body.one-page {
padding-top: 70px; }
.oldie .flexnav {
overflow: visible; }
.oldie .flexnav.one-page {
top: 0;
right: auto;
max-width: 1080px; }
.oldie .flexnav li {
position: relative;
list-style: none;
float: left;
display: block;
background-color: #a6a6a2;
width: 20%;
min-height: 50px;
overflow: visible; }
.oldie .flexnav li:hover > ul {
display: block;
width: 100%;
overflow: visible; }
.oldie .flexnav li:hover > ul li {
width: 100%;
float: none; }
.oldie .flexnav li a {
border-left: 1px solid #acaca1;
border-bottom: none;
overflow: visible; }
.oldie .flexnav li > ul {
background: #acaca1;
position: absolute;
top: auto;
left: 0;
display: none;
z-index: 1;
overflow: visible; }
.oldie .flexnav li ul li ul {
top: 0; }
.oldie .flexnav li ul li a {
border-bottom: none; }
.oldie .flexnav li ul.open {
display: block;
width: 100%;
overflow: visible; }
.oldie .flexnav li ul.open li {
width: 100%; }
.oldie .flexnav li ul.open ul.open {
margin-left: 100%;
top: 0;
display: block;
width: 100%;
overflow: visible; }
.oldie .flexnav ul li:hover ul {
margin-left: 100%;
top: 0; }
.oldie .menu-button {
display: none; }
.oldie.ie7 .flexnav li {
width: 19.9%; }