@charset "utf-8";
/* CSS Document */

.overlay-is-active #overlay{
pointer-events: auto;
-webkit-animation: fadein 0.2s linear 0s 1;
opacity: 1.0;
}
@-webkit-keyframes fadein{
	0%{
opacity: 0;
	}
	100% {
opacity: 1;
	}
}
@-webkit-keyframes fadeout{
	0%{
opacity: 1;
	}
	100% {
opacity: 0;
	}
}
#overlay{
pointer-events: none;
box-sizing: border-box;
position: fixed;
z-index: 3001;
/*top: 0; bottom: 0; left: 0; right: 0;*/
width: 100%;
height: 10000px;
top: 0; left: 0;
background-color: rgba(43, 46, 56, 0.9);
/* background: #2b2e38e6; */
-webkit-animation: fadeout 0.5s linear 0s 1;
opacity: 0.0;
}
.overlay-is-active #loading{
display: block;
}
#loading,
#loading:after {
border-radius: 50%;
width: 8em;
height: 8em;
margin-top: -4em;
margin-left: -4em;
}
#loading{
display: none;
font-size: 10px;
position: fixed;
z-index: 3010;
top: 50%;
left: 50%;
border-top: 0.9em solid rgba(255,255,255,0.2);
border-right: 0.9em solid rgba(255,255,255,0.2);
border-bottom: 0.9em solid rgba(255,255,255,0.2);
border-left: 0.9em solid #fff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: loadcircle 0.6s infinite linear;
animation: loadcircle 0.6s infinite linear;
}
@-webkit-keyframes loadcircle{
	0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
	}
	100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
	}
}
@keyframes loadcircle{
	0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
	}
	100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
	}
}

.wrap-infobox{
position: relative;
}
.infobox .inner{
background-color: #fff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
box-shadow: #ccc 0px 0px 3px;
-webkit-box-shadow: #ccc 0px 0px 3px;
-moz-box-shadow: #ccc 0px 0px 3px;
-ms-box-shadow: #ccc 0px 0px 3px;
outline: none;
height: auto;
padding: 0;
}
.infobox .inner a{
color: #222;
text-decoration: none;
}
.infobox .inner a:hover{
text-decoration: underline;
}
.infobox .inner .wrap-thumb{
width: 100%;
/* min-height: 100px; */
position: relative;
background-image: url(map-image-loader-line-ball.gif);
background-size: 32px 11px;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: 0;
}
.infobox .inner .wrap-thumb img{
width: 100%;
height: 125px;
object-fit: cover;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-ms-border-radius: 4px 4px 0 0;
object-fit: cover;
vertical-align: bottom;
}
.infobox .inner .wrap-thumb span.area-names{
box-sizing: border-box;
display: inline-block;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
background-color: rgba(0,0,0,.85);
color: #fff;
text-decoration: none;
position: absolute;
right: 40px;
top: 10px;
height: 25px;
line-height: 25px;
padding: 0 12px;
font-size: 11px;
font-weight: bold;
z-index: 1000;
/* display: none; */
}
/*ie11*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .infobox .inner .wrap-thumb{height: 125px; overflow: hidden;}
  *::-ms-backdrop, .infobox .inner .wrap-thumb img{height: auto;}
}
.infobox .inner .wrap-text{
padding: 12px 10px 10px 10px;
}
.infobox .inner .cat-names{
font-size: 11px;
line-height: 1.4em;
font-weight: bold;
font-family: sans-serif;
letter-spacing: 0.2px;
color: #ff7f25;
margin-bottom: 5px;
text-align: center;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.infobox .inner .infobox-title{
font-size: 13px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0 !important; /*override*/
}
.infobox .inner .infobox-desc{
font-size: 12px !important;
line-height: 1.6em;
margin-top: 10px;
color: #444;
}
.infobox .inner .wrap-btns{
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
padding: 0px;
}
.infobox .inner .wrap-btns span{
flex-grow: 1; flex-shrink: 1; flex-basis: 50%;
display: block;
}
.infobox .inner .wrap-btns span.wrap-btn-post a,
.infobox .inner .wrap-btns span.wrap-btn-area a{
margin-right: 4px;
}
.infobox .inner .wrap-btns span.wrap-btn-route a{
margin-left: 4px;
}
.infobox .inner a.btn-detail{
display: block;
padding: 7px 15px;
margin-top: 7px;
background-color: #f7f7f7;
color: #222;
font-size: 11px;
font-weight: bold;
font-family: 'Raleway', sans-serif;
letter-spacing: 1px;
text-align: center;
line-height: 1.4em;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
}
.infobox .inner a.btn-detail:hover{
background-color: #ff7f25;
color: #fff;
text-decoration: none;
}
.btn-infobox-close{
display: block;
width: 25px; height: 25px;
background-color: #222;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
text-decoration: none;
}
.btn-infobox-close:hover{
/*background-color: rgba(0, 0, 0, 0.7);*/
background-color: #fff;
text-decoration: none;
}
.btn-infobox-close:after{
/*::だとIE8が解釈できない*/
color: #fff;
content: "×";
cursor: pointer;
display: block;
width: 25px;
height: 25px;
font-family: Roboto, Arial, sans-serif !important;
font-size: 20px;
line-height: 25px;
text-align: center;
}
.btn-infobox-close:hover:after{
color: #222;
}

.wrap-image-area{
}
.wrap-image-area img{
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
}
.wrap-btns{
display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;
}
.wrap-btns .wrap-catbtn{
flex-grow: 1;
flex-shrink: 1;
flex-basis: 50%;
}
.wrap-btns p:nth-child(2n) a{
margin-left: 4px;
}
.wrap-btns p:nth-child(2n+1) a{
margin-right: 4px;
}
.wrap-selects{
padding: 25px 15px;
}
/* 
.wrap-selects div:nth-of-type(2n){
padding-left: 5px; padding-right: 10px;
}
.wrap-selects div:nth-of-type(2n+1){
padding-left: 10px; padding-right: 5px;
}
*/
.wrap-selects .inner{
display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;
position: relative;
margin-top: 10px;
font-size: 14px;
}
.wrap-selects .inner-select-city{
display: none;
}
.wrap-selects div:first-of-type{
margin-top: 0;
}
.wrap-selects .inner .select-label{
width: 5em;

}
.wrap-selects .inner .select-ui{
flex: 1;
display: block;
padding: 2px 0 2px 1.2em;
cursor: pointer;
text-overflow: ellipsis;
outline: none;
background-color: #fff;
position: relative;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
background: #fff;
text-decoration: none;
font-weight: bold;
}
.wrap-selects .inner .select-ui:hover{
color: #ff7f25;
}
.wrap-selects .inner .select-cat:hover::before,
.wrap-selects .inner .select-currentposition:hover::before{
border-top: 6px solid #ff7f25;
}
.wrap-selects .inner .select-ui-hitnum{
flex-grow: 0.4;
margin-right: 4px;
cursor: auto;
background-color: #222;
color: #fff;
text-align: center;
padding: 2px;
}
.wrap-selects .inner .select-ui-hitnum:hover{
color: #fff;
}
.wrap-selects .inner .select-currentposition{
flex-grow: 1;
margin-left: 4px;
text-align: center;
padding: 2px;
}
.wrap-selects .inner .select-cat::before{
position: absolute;
top: 1.0em;
right: 1.0em;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #222;
pointer-events: none;
}
.wrap-selects .inner .select-prevnext{
flex-grow: 1;
text-align: center;
padding: 2px;
}
.wrap-selects .inner .select-prev{
margin-right: 4px;
}
.wrap-selects .inner .select-next{
margin-left: 4px;
}
.wrap-selects .inner-select-prevnext .disabled{
pointer-events: none;
opacity: 0.3;
color: #222;
}
.wrap-selects .select-prevnext.disabled:hover{
color: #222;
}
.wrap-selects .notice-position{
font-size: 13px !important;
text-align: left !important;
padding: 0 !important;
margin-bottom: 0 !important;
margin-top: 15px !important;
line-height: 1.5em !important;
letter-spacing: 0.2px;
}

.remodal{
max-width: 600px;
padding: 35px 25px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
background-color: #f5f5f5;
}
.remodal p.wrap-catbtn{
margin-bottom: 0;
margin-top: 10px;
}
.remodal a.catbtn{
display: block;
font-size: 14px;
font-weight: bold;
color: #222;
background-color: #fff;
height: 40px;
line-height: 40px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
text-decoration: none;
}
.remodal a.catbtn:hover{
color: #ff7f25;
}
.remodal .wrap-areabtns a.catbtn:hover{
color: #fff;
}
.remodal .wrap-areabtns a.areabtn-all:hover{
color: #ff7f25;
}
.remodal button.cancelbtn{
display: block;
font-size: 14px;
font-weight: bold;
color: #fff;
letter-spacing: 0;
background-color: #222;
height: 30px;
min-width: 100px;
line-height: 30px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
text-decoration: none;
padding: 0;
margin: 20px auto 0;
}
.remodal button.cancelbtn:hover{
background-color: #666;
}
.remodal button.remodal-close{
left: auto;
right: 0;
color: #222;
}
.remodal button.remodal-close:hover{
background-color: transparent;
color: #666;
}
.remodal a.areabtn:hover{
color: #fff;
}
.remodal a.areabtn-all:hover{
color: #ff7f25;
}
.remodal a.areabtn-murakami{
color: #91bb00;
}
.remodal a.areabtn-murakami:hover{
background-color: #91bb00;
}
.remodal a.areabtn-sado{
color: #ff7f25;
}
.remodal a.areabtn-sado:hover{
background-color: #ff7f25;
}
.remodal a.areabtn-niigata{
color: #29a84d;
}
.remodal a.areabtn-niigata:hover{
background-color: #29a84d;
}
.remodal a.areabtn-myoko{
color: #ff6c6c;
}
.remodal a.areabtn-myoko:hover{
background-color: #ff6c6c;
}
.remodal a.areabtn-yahiko{
color: #009ad6;
}
.remodal a.areabtn-yahiko:hover{
background-color: #009ad6;
}
.remodal a.areabtn-yuzawa{
color: #9d56a8;
}
.remodal a.areabtn-yuzawa:hover{
background-color: #9d56a8;
}
.remodal a.areabtn-nagaoka{
color: #4060ad;
}
.remodal a.areabtn-nagaoka:hover{
background-color: #4060ad;
}
.remodal .komid{
margin-bottom: 0 !important;
font-size: 13px;
font-weight: bold;
}
.remodal .komid-genre-small{
margin-top: 15px;
}

body.page .infobox .inner .wrap-btns span.wrap-btn-area{
display: none;
}
body.page .wrap-googlemap{
border-top: 3px solid #ff7f25
}
body.single .wrap-googlemap{
border-top: 2px solid #ff7f25
}
body.single .wrap-selects{
padding: 15px;
}
body.single .wrap-selects .inner-select-gnere,
body.single .wrap-selects .inner-select-area{
display: none;
}
body.single .wrap-selects .inner .select-ui-hitnum{
flex-grow: 1;
}

.wrap-ui{
width: 800px;
margin: 0 auto;
background-color: #e6e2dc;
}
.single-post .wrap-ui{
width: 100%;
}

/* desktop, tablet ex.ipad pro(12.9) */
@media only screen and (max-width: 1024px) {

.wrap-ui{
width: 100%;
margin: 0 auto;
}
body.page .wrap-googlemap{
border-top: none;
}

}

/* tablet ex.ipad pro(10.5&11) */
@media only screen and (max-width: 834px) {

.wrap-ui{
width: 100%;
}

}

/* tablet ex.ipad 2,3,4,air,pro(9.7) */
@media only screen and (max-width: 768px) {



}

/* almost smartphone */
@media only screen and (max-width: 767px) {



}

/* iphone xs max */
@media only screen and (max-width: 414px) {

.wrap-selects .inner .select-ui-hitnum{
flex-grow: 0.6;
}
.wrap-selects .inner .select-currentposition{
flex-grow: 1;
}

}

/* android smartphone */
@media only screen and (max-width: 360px) {

.wrap-selects .inner .select-ui-hitnum{
flex-grow: 1;
}
.wrap-selects .inner .select-currentposition{
flex-grow: 1;
}

}

/* old smartphone */
@media only screen and (max-width: 320px) {

.infobox .inner .wrap-thumb img{
width: 100%;
height: 85px;
}
.remodal{
padding: 25px 15px;
}

}