@charset "utf-8";


/* ==========================================================

select menu 
	
========================================================== */


#selectMenu li{
box-sizing: border-box;
text-align:center;
transition-duration:200ms;
transition-timing-function:ease-in-out;
}


#selectMenu ul.style01,
#selectMenu ul.style02 {
    display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display:-webkit-flex;/*--- safari（PC）用 ---*/
    display:flex;
	
-webkit-flex-wrap: nowrap; /* Safari */
flex-wrap:         nowrap;

-webkit-flex-direction: row; /* Safari */
flex-direction:         row;

-webkit-justify-content: space-between; /* Safari */
justify-content:         space-between;

box-sizing: border-box;
}


#selectMenu ul.style01 {
border-bottom:2px solid #e5e5e5;
}

#selectMenu ul.style01 br{
display: none;
}


#selectMenu ul.style01 li {
width:49.8%;
border:2px solid #e5e5e5;
border-bottom: 0;
cursor: pointer;
padding: 10px;
margin: 0;
}

#selectMenu ul.style01 li:first-of-type {
margin-right: 0.4%;
}

#selectMenu ul.style01 li:hover {
background: #e5e5e5;
}

#selectMenu ul.style01 li.active {
border:2px solid #e5e5e5;
background:#e5e5e5;
cursor: default;
border-bottom: 0;
font-weight: 600 !important;
}

/*  */

#selectMenu ul.style02 {
background: #e5e5e5;
padding: 2px 4px 0;
}

#selectMenu ul.style02 li {
width:25%;
border:1px solid #e5e5e5;
background: #fff;
float: left;
padding: 8px 10px;
cursor: pointer;
}

#selectMenu ul.style02 li:hover{
border-top:3px solid #F00;

}

#selectMenu ul.style02 li.active {
border-top:3px solid #F00;
border-bottom-color: #fff;
cursor: default;
color: #f00;
}


#selectMenu ul.iso li:first-of-type{ width: 13%;}
#selectMenu ul.iso li:nth-of-type(2){ width: 9%;}
#selectMenu ul.iso li:nth-of-type(3){ width: 13%;}
#selectMenu ul.iso li:nth-of-type(4){ width: 9%;}
#selectMenu ul.iso li:nth-of-type(5){ width: 20%;}
#selectMenu ul.iso li:nth-of-type(6){ width: 13%;}
#selectMenu ul.iso li:nth-of-type(7){ width: 23%;}



/*  */

#selectMenu .panel {display:none;}
#selectMenu .show {display:block;}

#selectMenu div.panel {
padding:10px;
 border: 5px solid #e5e5e5;
 border-top: none;
}

#selectMenu div.panel ul{
margin-top: 10px;
padding: 0 0 5px 10px;
}

#selectMenu div.panel ul li{
text-align: left;
display: inline-block;
margin-right: 45px;
}

#selectMenu div.panel ul li:last-of-type{
margin-right: 0;
}

@media all and (max-width: 767px) {
#selectMenu{
width: 90%;
margin: 0 auto;
}
#selectMenu ul.style02{
font-size: 90%;
line-height: 1.4;
}

#selectMenu ul.style02 li{
padding-left: 3px;
padding-right: 3px;
}
}

@media all and (max-width: 540px) {
#selectMenu div.panel ul li{
display: block;
margin-right: 0;
}
}

@media all and (max-width: 390px) {
#selectMenu ul.style01 br{
display: inline;
}
}