@charset "utf-8";
/***************************************************
PC用および共通設定 974px～
***************************************************/

body{
	text-align:center;
	width:100%;
}

*{
	margin:0;
	padding:0;
	border:none;
	color:#000;
	font-size:16px;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
	line-height:1.0;
}
html,body,div,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,address,ul,ol,li,dl,dt,dd,
table,th,td,form,fieldset{
	margin:0;
	padding:0;
}
a.underline {
  color:#7777EE;
	text-decoration: underline;
}
a:link {color:#000000;
	text-decoration: none;
}
a:visited {color:#000000;
	text-decoration: none;
}
a:hover{
	text-decoration: none;
	color:#000;
}
.text_link a:link{
	text-decoration:underline;
}
a img.opacity:hover{opacity:0.6;}

ul li {
	list-style-type: none;
}

body{
	background:#eeece8;
	text-align:center;
	font-family: 'Noto Sans JP', sans-serif;
	font-size:14px;
	width:100%;
}
img{
	width:100%;
	max-width:100%;
}
/*--------------------------------------------------------------

--------------------------------------------------------------*/
.pc{display:block;}
.sp{display:none;}
.br-sp{display:none;}
.br-pc{display:inline;}
.red{color:#FF3300;}
.gray{color:#5d5d5d;}
.xgray{color:#b3b3b3;}
.bold{font-weight:bold;}
.text_left{text-align:left;}
.text_right{text-align:right;}
.center{text-align:center;}
.f90{font-size:90%;}
.f95{font-size:95%;}
.f150{font-size:150%;}
.f120{font-size:120%;}
.f18{font-size:18px;}
.f12{font-size:12px;}

.fl{float:left;}
.last{margin-right:0 !important;}
.last-pc{margin-right:0 !important;}

.clear{clear:both;}
.clear-pc{clear:both;}
.clear-sp{clear:none;}


.mb15{margin-bottom:15% !important;}
.mb1{margin-bottom:1% !important;}
.mb2{margin-bottom:2% !important;}
.mb3{margin-bottom:3% !important;}
.mb5{margin-bottom:5% !important;}
.mr2{margin-right:2% !important;}
.mt2 {margin-top:2% !important;}
.mt3 {margin-top:20px !important;}
.mt5 {margin-top:30px !important;}
.mt8 {margin-top:40px !important;}
.mt10 {margin-top:50px !important;}
.mt240-8 {margin-top:240px !important;}
.auto{margin-right:auto;margin-left:auto;}

.hidden {display: none !important;}

/*--------------------------------------------------------------
　ヘッダー
--------------------------------------------------------------*/
#wrp_header{
	width:100%;
	height:110px;
}
#header{
	width:1200px;
	margin:auto;
	text-align:left;
	padding:20px 0;
	position:relative;
}
#header .title_site{
	font-size:14px;
}
#header p.title_url{
	margin-top:5px;
}#header p a{
	font-size:36px;
}

#header_app_download{
    position: absolute;
	top:20px;
	right:60px;
    padding: 1.5%;

}
#header_app_download span{
	vertical-align:middle;
	margin-right:10px;
}
#header_app_download a{
	vertical-align:middle;

}
#header_app_download img{
	width:100px;
}



/**検索用ハンバーガーメニュー**/
#bt_menu {
    position: absolute;
    top: 20px;
    right: 0;
    width: 30px;
    padding: 2%;
    z-index: 10000;
    cursor: pointer;
}
#bt_menu .cls-1,#bt_menu .cls-2,#bt_menu .cls-3{
	fill:#000;
	transition-duration: .5s;
}

#bt_menu.on .cls-1{
	transition-duration: .5s;
	transform:translate(0px,15px) rotate(45deg);
	transform-origin:center 3px;
}
#bt_menu.on .cls-2{
	opacity:0;
	transition-duration: .5s;
}
#bt_menu.on .cls-3{
	transition-duration: .5s;
	transform:translate(0px,-15px) rotate(-45deg);
	transform-origin:center 35px;

}
.bt_menu_serch{
	font-size:80%;
	text-align:center;
	width:100%;
	margin-top:12%;
}

/**** パンくず ***/

ul#breadcrumb{
	margin:5%;
}

ul#breadcrumb li a,ul#breadcrumb li{
	font-size:12px;
}
ul#breadcrumb li{
	float:left;
	background:url("../images/icon_arrow_path.png") no-repeat 0 50%;
	padding-left:15px;
	margin-left:10px;
}
ul#breadcrumb li:nth-child(1){
	background:none;
	padding-left:0px;
	margin-left:0px;
}
ul#breadcrumb li a:hover{
	text-decoration:underline;
}

/*--------------------------------------------------------------
　検索
--------------------------------------------------------------*/
#wrp_search{
	width:100%;
	height:100%;
	background:#dbd1c5;
	display:none;
}
#search{
	width:1200px;
	margin:auto;
	text-align:left;
	padding:20px 0;
}




div#types.search{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
div#types.search label{
	padding:2% 0;
	display:block;
	cursor:pointer;
	white-space: nowrap;

}
div#keyword.search{
	width:50%;
	float:left;
}
div#mountain_range{
	width:50%;
	float:left;
}

div#keyword.search input {
	border: 1px solid #CCCCCC;
	vertical-align: middle;
	padding: 10px 25px 10px 10px;
	margin-right:1%;
	height: 18px;
	width:90%;
}
select{
	padding: 10px 25px 10px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #CCCCCC;
	background: url(../images/icon_arrow_pulldown.png) 98% 50% no-repeat #FFF;
	margin:0;
	text-align:left;
	height:40px;
	cursor:pointer;
	width:100%;
}
select::-ms-expand {
	display: none;
}
select option{
	padding:2px 5px;
}

select#toilet_status {
  width: auto;
}

#search_area > div.search{
	float:left;
	width:32%;
	margin-right:2%;
}
#search_area > #check_point{
	margin-right:0;
}


#search_area > div.search:last-child{
	margin-right:0;
}
#search_area > div > p{
	margin-bottom:2%;
	line-height:1.4;
}


#search_button{
    margin: 5% auto 1%;
    /*box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);*/
    border-radius: 25px;
	width:200px;
	color:#fff;
	text-align:center;
	padding:1.3% 0;
	cursor:pointer;
}

.button{
	background: #9d8e7c;
	transition-property:background;


}
.button:hover{
	background-color:#685741;
	transition-property:background;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
	
}

/*--------------------------------------------------------------
　コンテンツ
--------------------------------------------------------------*/
#wrp_contents{
	width:100%;
	height:100%;
}
#contents{
	width:1200px;
	margin:auto;
	text-align:left;
	padding:40px 0 20px 0;
}

h1.toilet_name{
	font-size:140%;
	padding:0 0 2%;
	margin:3% auto 5%;
	border-bottom:1px solid #000;
}

h2.title_search{
	border:1px solid #000;
	padding:1% 2%;
	width:96%;
	margin:4% auto 4%;
	font-size:16px;
	font-weight:bold;
	line-height:1.4;
}


ul.list_toilets {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
flex-wrap:wrap;
}

ul.list_toilets > li{
	width:19%;
	margin:0 1.25% 4% 0;
/*	width:22%;
	margin:0 4% 4% 0;*/
	text-align:left;
}
ul.list_toilets > li:nth-child(5n){
	margin-right:0;
}
/*広告*/
ul.list_ad{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
flex-wrap:wrap;
}
ul.list_ad li.pr{
	width:22%;
	margin:0 4% 4% 0;
	text-align:left;
}

ul.list_ad li.pr:nth-child(4n){
	margin-right:0;
}
ul.list_ad li.pr p{
	color:#777;
	text-align:center;
	font-size:90%;
}

/*
ul.list{
	width:100%;
	margin:2% auto 2%;
}
ul.list li{
	width:19%;
	margin:0 1.25% 4% 0;
	float:left;
	text-align:left;
}

ul.list li:nth-child(5n){
	margin-right:0;
}*/


ul.list li p{
	margin-bottom:2%;
}
ul.list li p.thumb{
	width:100%;
	background:#CCC;
}
ul.list li p.thumb img{
	width:100%;
}
ul.list li p.area{
	font-size:12px;
}
ul.list li p.date{
	font-size:14px;
}



#more_button{
    margin: 5% auto 1%;
    /*box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);*/
    border-radius: 25px;
	width:200px;
	color:#fff;
	text-align:center;
	padding:1.3% 0;
	cursor:pointer;
}
/*-------------------------------
 マップエリア
--------------------------------*/
#wrp_contents_map{
	width:100%;
	background:#b1a9a2;
}
h2{
	text-align:left;
	padding:0.3rem 0;
	border-left:5px solid #000;
	margin-bottom:0.6rem;
}
h2 div{
	padding:0 0 0 0.6rem;
}
#contents_map{
	width:1200px;
	margin:auto;
	padding:20px 0;
}
#contents_map ul{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
#contents_map ul li{
	width:45%;
	background:#eeece8;
	padding:1% 2%;
	margin-bottom:2%;
}
#contents_map ul li a{
	display:block;
	width:100%;

}
span.icon_new{
	color:#FF3300;
	padding-left:0.6rem;
	}



#wrp_contents_map ul li span{
	width:49%;
	text-align:left;
	vertical-align:middle;
	line-height:1.6;
}


/*-------------------------------
 コンテンツエリア
--------------------------------*/
#wrp_contents_02{
	width:100%;
	background:#b1a9a2;
}
#contents_02{
	width:1200px;
	margin:auto;
	padding:20px 0;
}
#contents_02 ul{
	display:flex;
	justify-content: space-between;
}
#contents_02 ul li{
	width:45%;
	background:#eeece8;
	padding:1% 2%;
}
#contents_02 ul li a{
	display:flex;
	justify-content: space-between;

}

#contents_02 ul li img{
	width:49%;

}
#contents_02 ul li a:hover img{
	opacity:0.4;
}

#contents_02 ul li span{
	width:49%;
	text-align:left;
	vertical-align:middle;
	line-height:1.6;
}
h2.map{
	text-align:center;
	margin-bottom:3%;
	padding-bottom:2%;
	border-bottom:1px solid #000;
}


	
/*-------------------------------
 SNS
--------------------------------*/
#wrp_sns{
	width:100%;
	height:100%;
}
ul.sns{
	width:1200px;
	margin:0 auto 5%;
	text-align:left;
	padding:20px 0;
}
ul.sns li{
	
	float:right;
	margin-left:1%;
	width:30px;
}
ul.sns li:last-child{
	width:94px;
}





p.title{
	font-size:18px;
	font-weight:bold;
	width:100%;
	border-bottom:1px solid #000;
	padding-bottom:1.5%;
	margin-bottom:2%;
	text-align:center;
}

/*--------------------------------------------------------------
　詳細ページ
--------------------------------------------------------------*/
#contents_detail{
	width:1200px;
	margin:2% auto 0;
	padding:2% 0 5%;

}
.left_cnt{
	width:22%;
	margin:0 4% 5% 0%;
	float:left;
}
.right_cnt{
	width:48%;
	margin:0% 4% 5% 0;
	float:left;
}
/*広告エリア*/
.pr_cnt{
	width:22%;
	margin:0 0 5% 0%;
	float:left;
}
.pr_cnt ul li.pr{
	margin-bottom:5%;
}

.pr_cnt ul li.pr p{
	color:#777;
	text-align:center;
	font-size:90%;
}

ul#image_toilet li{
	width:100%;
/*	height:250px;*/
	background:#CCC;
	margin:0 0 5% 0;
}

p.chart{
	width:60%;
	margin:0 auto 5%;
}

.table{
	width:100%;
	margin:0 auto 5%;
	display:table;
}
.table div.table-row{
	display:table-row;

}

.table div.table-th{
	display:table-cell;
	border-top:1px solid #CCC;
	border-right:1px solid #CCC;
	padding:2% 3%;
	background:#f8f8f7;
	
}
.table div.table-th.last,.table div.table-td.last{
	border-bottom:1px solid #CCC;
}
.table div.table-td{
	display:table-cell;
	border-top:1px solid #CCC;
	padding:2% 3%;
	background:#f1f1f0;
}
.table div.table-td p{
	display:inline-block;
	border-radius:5px;
	padding:2% 0%;
	width:29%;
	margin:1% 2%;
	font-size:12px;
	background:#d1ccc1;
	color:#000;
}
.table div .pl{
	padding:3% 3%;
}
#contents_detail p.star{
	font-size:36px;
	margin-bottom:5%;
}

p#remarks{
	background:#f1f1f0;
	padding:3%;
	line-height:1.4;
	text-align:left;
	border-radius:5px;
}
#contents_detail ul.list li p.star {
	font-size:16px;
}

p.title_s{
	margin-bottom:4%;
	padding-bottom:2%;
		border-bottom:1px solid #000;

}

/*ブログ記事エリア*/
.cnt_blog ul li{


}
.cnt_blog ul li a img{
	width:50%;
	margin-right:2%;
	float:left;
}



/*ブログ*/
ul.list_blog {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
flex-wrap:wrap;
}

ul.list_blog  li{
	width:45%;
	margin:0 2% 5% 0;
	background:#f1f1f0;
	padding:1.5%;
	text-align:left;
}
ul.list_blog  li:nth-child(2n){
	margin-right:0;
}

ul.list_blog li a img{
	width:50%;
	margin-right:2%;
	float:left;
}

ul.list_blog li a{
	font-size:130%;
	line-height:1.8;
	display:block;
}
ul.list_blog li:hover{
	cursor:pointer;
}
ul.list_blog li:hover a{
	text-decoration:underline;
}

/*--------------------------------------------------------------
　フッター
--------------------------------------------------------------*/
#wrp_link_area01,#wrp_link_area02{
	width:100%;
	background:#e5dfd2;
}
#link_area01,#link_area02 {
	width:1100px;
	margin:0 auto;
	padding:3% 0;
}
#link_area02 ul {
	width:28%;
	float:left;
}
#link_area02 ul#mountain_range01{
	margin:0 3% 0 5%;
}
#link_area02 ul#mountain_range02{
	margin:0 3% 0 0;
}
#link_area02 ul#mountain_range03{
	margin:0 5% 0 0;
}
#link_area01 ul{
	margin:0 5%;
}
#link_area01 ul li,#link_area02 ul li {
	margin-bottom: 0.4em;
	list-style-type: disc;
	margin-left: 1.5em;
	text-align:left;
	margin-right:5%;
}
#link_area01 ul li{
	float:left;
}

#footer{
	background:#FFF;
	width:100%;
	padding:1% 0;
	margin:auto;
	font-size:12px;
}
#gotop{
	position:fixed;
	text-align:right;
	margin-right:0;
	z-index:999;
}
/*map*/
.modal{
	display:none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
}

.needs-review {
  border: red 2px solid;
}

/***************************************************
タブレット用 768px～973px
***************************************************/

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


body{
	width:100%;
}
#header,#contents,#link_area01,#link_area02{
	width:92%;
	margin-left:auto;
	margin-right:auto;
}
ul.sns{
	width:96%;
	margin-left:auto;
	margin-right:auto;
}
#contents_detail{
	width:96%;
	margin-left:auto;
	margin-right:auto;
}

/*-------------------------------
 コンテンツエリア
--------------------------------*/

#contents_02{
	width:96%;
}
/*-------------------------------
 マップエリア
--------------------------------*/

#wrp_contents_map{
	text-align:center;
	}

#contents_map{
	width:92%;
	margin:auto;
	padding:20px 0;
}
#contents_map ul{
	width:100%;
	display:block;
	margin:auto;
}
#contents_map ul li{
	width:96%;
	background:#eeece8;
	padding:1% 2%;
	margin-bottom:2%;
}

}




/***************************************************
スマートフォン用 ～767px
***************************************************/
@media only screen and (max-width: 767px){

.pc{display:none;}
.sp{display:block;}
.br-sp{display:inline;}
.br-pc{display:none;}
.clear-pc{clear:none;}
.clear-sp{clear:both;}


/*--------------------------------------------------------------
　ヘッダー
--------------------------------------------------------------*/
#header{
	width:90%;
	margin:auto;
	padding:5% 2% 1%;
}
#header p a {
    font-size: 26px;
}
#header .title_site{
	font-size:10px;
}
#bt_menu {
    position: absolute;
    top: 14%;
    right: 0;
    width: 9%;
    padding: 2%;
    z-index: 10000;
    cursor: pointer;
}
#header_app_download{
    top: 14%;
    right: 10%;
    width: 20%;
    padding: 2%;

}
/**** パンくず ***/

ul#breadcrumb{
	display:none;
}
#header #logo{
	float:left;
	width:15%;
	margin-left:5%;
}
#header #logo_text{

	width:25%;
	float:left;
	margin:5% 2% 0 0;
}
#header ul.sns li{
	float:right;
	margin-left:2%;
	width:8%;
}
#header ul.sns li:last-child{
	width:24%;
}
#header ul.sns li:first-child{
	margin-right:5%;
}

/*--------------------------------------------------------------
　検索
--------------------------------------------------------------*/
#search{
	width:96%;
	margin:auto;
	text-align:left;
	padding:2%;
}


div#types.search{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
	width:100%;
	flex-wrap:wrap;
	margin-bottom:4%;

}
div#types.search label{
	width:50%;
	padding:2% 0;
	display:block;
	cursor:pointer;
	white-space: nowrap;

}
div#keyword.search{
	width:100%;
	float:none;
	margin-bottom:4%;

}
div#mountain_range{
	width:100%;
	float:none;
	margin-bottom:7%;
}



#search_area > div.search{
	float:left;
	width:32%;
	margin-right:2%;
}
#search_area > #check_point{
	margin-right:0;
}


#search_area > div.search:last-child{
	margin-right:0;
}
#search_area > div > p{
	margin-bottom:2%;
	line-height:1.4;
}




.button{
	background: #9d8e7c;
	transition-property:background;


}
.button:hover{
	background-color:#685741;
	transition-property:background;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
	
}
/*--------------------------------------------------------------
　検索
--------------------------------------------------------------*/

input {
  padding: 1% 2%;
}
#search_area{
	padding:6% 3%;
}
#search_area > div.search{
	float:none;
	width:100%;
	margin:2% auto 4%;
}
#search_area > #check_point{
	margin-right:0;
}

#keyword input{
	width:96%;
}





#search_button{
	margin: 3% auto 5%;
	width:80%;
	padding:3% 0;
}


/*--------------------------------------------------------------
　コンテンツ
--------------------------------------------------------------*/
/*--------------------------------------------------------------
　リスト
--------------------------------------------------------------*/

ul.list_toilets{
	width:100%;
	margin:2% auto 2%;
}
ul.list_toilets > li{
	width:48%;
	margin:0 4% 4% 0;
	float:left;
	text-align:left;
}
ul.list_toilets  > li:nth-child(5n) {
    margin-right: 4%;
}
ul.list_toilets > li:nth-child(2n){
	margin-right:0;
}
ul.list_toilets > li p{
	margin-bottom:2%;
}
ul.list_toilets > li p.thumb{
	width:100%;
	background:#CCC;
}

/*広告*/
ul.list_ad li.pr{
	width:48%;
	margin:0 4% 4% 0;
	float:left;
	text-align:left;
}

ul.list_ad li.pr:nth-child(2n){
	margin-right:0;
}



h2.title_search{
	width:86%;
}
/*-------------------------------
 マップエリア
--------------------------------*/

#wrp_contents_map{
	text-align:center;
	}

#contents_map{
	width:92%;
	margin:auto;
	padding:20px 0;
}
#contents_map ul{
	width:100%;
	margin:auto;
	display:block;
}
#contents_map ul li{
	width:96%;
	background:#eeece8;
	padding:1% 2%;
	margin-bottom:2%;
}
/*-------------------------------
 コンテンツエリア
--------------------------------*/

#contents_02{
	width:100%;
	margin:auto;
	padding:3% 0;
}
#contents_02 ul{
	display:block;
}
#contents_02 ul li{
	width:90%;
	background:#eeece8;
	padding:1% 2%;
	margin:0 auto 1%;
}
#contents_02 ul li a{
	display:flex;
	justify-content: space-between;

}

#contents_02 ul li img{
	width:49%;
object-fit: contain;

}
#contents_02 ul li span{
	width:49%;
	text-align:left;
	vertical-align:middle;
	line-height:1.6;
	font-size:95%;
}
/*--------------------------------------------------------------
　詳細ページ
--------------------------------------------------------------*/
#contents_detail{
	width:100%;
}
.left_cnt{
	width:90%;
	margin:0 5% 5% 5%;
	float:none;
}

.right_cnt{
	width:90%;
	margin:0% 5% 5% 5%;
	float:none;
}
/*広告エリア*/
.pr_cnt{
	width:90%;
	margin:0% 5% 5% 5%;
	float:none;
}
.pr_cnt ul li.pr{
	float:left;
	width:47%;
	margin:0 6% 6% 0;
}
.pr_cnt ul li.pr:nth-child(2n){
	margin-right:0;

}
/*ブログエリア*/
.cnt_blog{
	width:90%;
	margin:auto;
}
ul.list_blog  li{
	width:100%;
	margin:0 0 4% 0;
}


ul#image_toilet li{
	width:47%;
	background:#CCC;
	margin:0 6% 6% 0;
	float:left;
}
ul#image_toilet li:nth-child(2n){
	margin-right:0;
}
p.chart{
	width:80%;
	margin:0 auto 5%;
}

.table{
	width:100%;
	margin:0 auto 5%;
	display:block;
}
.table div.table-row{
	display:block;
}

.table div.table-th{
	display:block;
	padding:2% 3%;
	background:#f8f8f7;
	border-right:none;
}
.table div.table-td{
	display:block;
	padding:2% 3%;
	background:#f1f1f0;
}







/*-------------------------------
 SNS
--------------------------------*/

ul.sns{
	width:96%;
}
/*--------------------------------------------------------------
　フッター
--------------------------------------------------------------*/
#link_area01,#link_area02 {
	width:94%;
	padding:3%;
}
#link_area02 ul {
	width:100%;
	float:none;
}
#link_area02 ul#mountain_range01{
	margin:0;
}
#link_area02 ul#mountain_range02{
	margin:0;
}
#link_area02 ul#mountain_range03{
	margin:0;
}
#link_area01 ul{
	margin:0 0 0 0;
}
#link_area01 ul li,#link_area02 ul li {
	line-height:1.4;
}
#link_area01 ul li{
	float:none;
	width:95%;
}

#footer{
	background:#FFF;
	width:100%;
	padding:3% 0;
	margin:auto;
	font-size:12px;
}


}