﻿@charset "UTF-8";
/* [localNavi] ローカルナビ ----------*/

/* [localNavi] ローカルナビ ----------*/
.localNavi {
}
.localNavi input {
	opacity: 0;
	display: none;
}
.localNavi label {
	display: block;
	color: #523B25;
}
.localNavi label:hover {
	color: #C9A48F;
	cursor:pointer;
}
.localNavi li {
	display:table;
	float:left;
	margin:0 20px 11px 0;
}
.localNavi a {
	display:table-cell;
	width:100%;
	height:70px;
	border:2px solid #000;
	text-align:center;
	vertical-align:middle;
	font-size:13px;
}
.localNavi a:hover,
.localNavi li.selected0 a {
	background:#000;
	color:#FFF;
}
@media screen and (min-width:769px) {
	.localNavi ul {
		display:block !important;
	}
}
@media screen and (max-width:768px) {
	.spSelectedItem0,
	.spSelectedItem1,
	.spSelectedItem2,
	.spSelectedItem3,
	.spSelectedItem4 {
		position:relative;
		padding:0.5em 3em 0.5em 1em;
		font-weight:bold; 
	}
	.spSelectedItem0:before,
	.spSelectedItem0:after,
	.spSelectedItem1:before,
	.spSelectedItem1:after,
	.spSelectedItem2:before,
	.spSelectedItem2:after,
	.spSelectedItem3:before,
	.spSelectedItem3:after,
	.spSelectedItem4:before,
	.spSelectedItem4:after{
		content:"";
		position:absolute;
		top:50%;
		right:10px;
		width:19px;
		height:19px;
		margin-top:-9.5px;
		background-size:cover;
	}
	.spSelectedItem0:before,
	.spSelectedItem1:before,
	.spSelectedItem2:before,
	.spSelectedItem3:before,
	.spSelectedItem4:before{
		opacity:1;
		background-image:url(../img/icon_arrowdown.png);
	}
	.spSelectedItem0.active:before,
	.spSelectedItem1.active:before,
	.spSelectedItem2.active:before,
	.spSelectedItem3.active:before,
	.spSelectedItem4.active:before{
		opacity:0;
	}
	.spSelectedItem0:after,
	.spSelectedItem1:after,
	.spSelectedItem2:after,
	.spSelectedItem3:after,
	.spSelectedItem4:after{
		opacity:0;
		background-image:url(../img/icon_arrowup.png);
	}
	.spSelectedItem0.active:after,
	.spSelectedItem1.active:after,
	.spSelectedItem2.active:after,
	.spSelectedItem3.active:after,
	.spSelectedItem4.active:after{
		opacity:1;
	}
	.localNavi {
		margin:0 15px 10px;
		border:1px solid #000;
	}
	.localNavi ul {
		display:none;
	}
	.localNavi li,
	.localNavi a {
		display:block;
		float:none;
		width:auto;
		margin:0;
		border:0;
	}
	.localNavi li {
		border-top:1px dashed #EEE;
	}
	.localNavi a {
		padding:0.5em 1em;
		height:auto;
		text-align:left;
	}
	.localNavi li.selected a {
		background:inherit;
		color:inherit;
	}

}

