/* CSS Document */

header, footer, nav, section, article, figure, aside, main, h1, h2, h3, h4{
display:block;
}
img {border-style:none;vertical-align:bottom;}
/* clear */
.clear { clear:both; } 

 a{
	text-decoration:none;
	}
/* all */
.blue{
	background-color: #9DCDF4;
}
.bcolor-green{
	background-color:#060;}
.bcolor-white{
	background-color:#FFF;}

.max{
	width: 100%;
	height: auto;
}
.max_h{ height: 100%; }
.mlr5{
	margin-left:5px;
	margin-right:5px;}
.mt10{
	margin-top:10px;}
.mb10{
	margin-bottom:10px;}
.mt20{
	margin-top:20px;}
.mb20{
	margin-bottom:20px;}
.pt10{
	padding-top:10px;}
.pb10{
	padding-bottom:10px;}
.pt20{
	padding-top:20px;}
.pb20{
	padding-bottom:20px;}
.bd-t{
	border-top:2px dotted #CCC;}
.bd-b{
	border-bottom:2px dotted #CCC;}

h1{
	margin:0 0 0 15px;
}
h1 img{
	width:180px;
	height:50px;
	}
h2{
	background-color:#060;
	color:#FFF;
	padding:12px 10px 12px 40px;
	font-size:18px;
	margin:0;
	background-image: url(img/h2.png);
	background-repeat:no-repeat;
	background-size: 25px;
	background-position: 8px 8px;
}
/*html, body { height: 100%; }*/
body{
	line-height:1;
	margin:0;
	width:100%;
	max-width:640px;
	margin:0 auto;
	line-height:1.3em;
	font-size:14px;
}

/*==== レイアウト =====*/
/***** header *****/
header{
	width:100%;
	height:50px;
	background:#FFF;
	padding:5px 0;
	border-bottom:1px solid #CCC ;
	z-index: 1;
	position: relative;
}
#rogo{
	float:left;
	width:25%;
	-webkit-tap-highlight-color:(0,0,0,0);
}

/***** drawer *****/
#drawer{
	display:none;
	/*border-top:solid 4px #EFE2C0;*/
}
.drawer {
	-webkit-transform: translate3d(0, -140px, 0);
	-moz-transform: translate3d(0, -140px, 0);
	-o-transform: translate3d(0, -140px, 0);
	transform: translate3d(0, -140px, 0);
	-webkit-transition:-webkit-transform 0.25s linear;
	-moz-transition:-moz-transform 0.25s linear;
	-o-transition:-o-transform 0.25s linear;
	transition:transform 0.25s linear;
	/*margin-bottom:-140px;
	padding-bottom:-140px;*/
}
.drawer.active {
	-webkit-transform: translate3d(0,0px,0);
	-moz-transform: translate3d(0,0px,0);
	-o-transform: translate3d(0,0px,0);
	transform: translate3d(0,0px,0);
}

#drawer ul {
list-style:none;
margin:0;
padding:0;
}
#drawer ul li a {
display: block;
text-decoration: none;
background-color:#eee;
/*background: rgba(0,0,0,0.3);*/
color: #444;
padding: 1em;
margin-bottom: 1px;
text-shadow: 0 1px 1px rgba(255,255,255,.7);
}
#drawer-close{
	display: block;
	text-decoration: none;
	padding:10px;
	text-align:center;
	color: #630;
	font-weight:bold;
	border-bottom:1px solid #CCC ;
}

/***** mainmenu *****/
#main-menu{
	float:right;
	margin-right:10px;
	text-align:center;
}
#main-menu a{
	display: block;
	height: 0px;	
}
#main-menu img{
	height:50px;
	width:50px;
}

/***** footer *****/
footer{
	margin-top:20px;
	color:#060;
	text-align:center;
	}
#f-menu{
	background-color:#FFC;
	padding:4px 0;
	margin:0 ;
	width:100%;
	}
#f-menu ul{
	list-style-type:none;
	margin:0 auto;
	padding:0px;
	width:100%;
}
#f-menu li{
	border-bottom-color:#0C0;
	width:49%;
	border-left:#060 dotted 1px;
	margin:0px;
	padding:0px;
	display:inline-block;
	}
#f-menu li a{
	display:block;
	padding:6px 0;
	}

#f-menu li:first-child{
	border-left:none;
	}
#c-right{
	line-height:1.2em;
	font-size:12px;
	color:#FFF;
	background-color:#060;
	padding:10px 0;
	}


/*==== indexページ =====*/
#navi-info{
	padding:8px 15px;
	/*background-color:#E7D5CB;*/
	background-color:#FFC;
	color:#444;	
	font-size:13px;
	}
/***** menu *****/
#menu{
  list-style: none;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
li.main_menu{
	margin:0;

	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	border-bottom: 1px dotted #ccc;
	margin:0px 0px;
		/*background-color: #9DCDF4;*/
}
/*li.main_menu:first-child{
	border-top: 2px dotted #ccc;
}*/
li.main_menu a.active{
  background: url(img/list-area.png),url(img/minus.png);
	background-repeat:no-repeat,no-repeat;
	background-size: 25px,23px;
	background-position: 10px 10px,95% 11px;
	/*background-color: #9DCDF4;*/
	background-color: #A3D394;
	color:#060;
}

li.main_menu a {
  display: block;
	color: #333;
  text-decoration:none;
  padding: 12px 40px;
	text-shadow: 0 1px 1px rgba(255,255,255,.7);
		
	background-image:url(img/list-area.png),url(img/plus.png);
	background-repeat:no-repeat,no-repeat;
	background-size: 25px,23px;
	background-position: 10px 10px,95% 11px;

}
/*
#menu li a:hover{
	background-color: #9DCDF4;
}


#menu li a:hover{
  color: #FFF;
	background-color:#589EEB;
}*/

#menu li ul {
  list-style: none;
  /*background: #E0EDFC;*/
	background: #E7F7E1;
  margin:0px 0px;
  padding: 0;
}
#menu li ul li a{
  background: none;
  padding: 10px 60px;
	border-top: 1px dotted #fff;
}
ul.sub_menu li{
	background-image:url(img/point.png);
	background-repeat:no-repeat;
	background-size: 17px;
	background-position: 35px 11px;
}

/*list*/
#search-menu{
	background-color:#FFC;
	padding:4px 0;
	margin:0 ;
	width:100%;
	text-align:center;}
#search-menu ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
#search-menu li{
	float:left;
	border-bottom-color:#0C0;
	width:49%;
	border-left:#060 dotted 1px;
	margin:0;
	}
#search-menu li a{
	display:block;
	padding:6px 0;
	}

#search-menu li:first-child{
	border-left:none;
	}
	
.Page{
	padding:5px 10px;
	color:#390;}
.Page a{
	color:#390;
	text-decoration:none;
	display:block;
	}
.Page dl{
	margin:5px 0;
}
.Page dl dt{
}
dd.select{
	background-color:#060;
	color:#FFF;
	font-weight:bold;
	}
.Page dl dd{
	float:left;
	display:block;
	border:1px solid #CCC;
	width:40px;
	text-align:center;
	margin:2px 2px 0 2px;
	border-radius:3px;
	padding:2px 0;
	}

.list:first-child{
	border-top:1px dotted #CCC ;
	}
.list{
	border-bottom:1px dotted #CCC ;
	padding:10px 10px;
	color:#999;
	font-size:13px;
	line-height:1.2em;
	display:block;
	}
.list h3{
	margin:1px 0 2px 0;
	color:#630;
	font-size:15px;
	line-height:1.3em;
	}
.list p{
	margin:0;
	color:#FFA826;
	font-size:12px;
	}
	
.list .l{
	float:left;
	margin-right:5px;
	width:35%;
	max-width:120px;
	}
.list .l img{
	width:100%;
	height:auto;
	max-width:120px;
	}
.list .r{
	float:left;
	width:60%;
	}

/*spot*/
.bxslider {
}

#submenu{
	margin:30px 0px 20px 0px;
}
#submenu ul{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;
	}
#submenu ul li{
	display:inline-block;
	width:31%;
	margin:0 2px;
	padding:10px 0;
	border-radius: 5px;
	list-style-type:none;
	text-align:center;
	}

#bbq-map,#bbq-photo,#bbq-info{
	/*display:none;*/
	width:100%;
	/*margin-bottom:20px;*/
	/*background-color:#C66;*/
	padding-bottom:20px;
}

#bbq-info dl{
	width:90%;
	margin:auto;
	padding:0px;
}

#bbq-info dl dt{
	background-image:url(img/spot-point.png);
	background-repeat:no-repeat;
	background-size: 10px;
	background-position: 0px 5px;
	padding: 0px 0px 0px 12px;
	color:#2890CF;
	font-size:16px;
	}
#bbq-info dl dd{
	margin:2px 10px 10px 10px;
	color:#444;
	font-size:15px;
	padding:0px;}
	
#bbq-photo{
	text-align:center;
}
#bbq-photo p{
	display:block;
	text-align:left;
	margin:0 auto 0px auto;
	padding:10px 10px;
	color:#666;
	background-color:#DFF1FF;
	width:90%;
	max-width:400px;
}
#bbq-photo img{
	width:100%;
	height:auto;
	margin-bottom:5px
	}
#btn-info,#btn-map,#btn-photo{
	color: #630;
	background-color:#FFDD50;}
#btn-photo-no{
	background-color: #EEE;
	color:#aaa;}

	
	
	
.ct{
	text-align:center;}

.spot{
	margin:0px 5px;
	/*background-color:#9F0;*/
	}
.spot h3{
	color:#630;
	font-size:18px;
	margin:10px 0 8px 5px;
	
	padding:0px 0px 2px 20px;
	background-image: url(img/bbq.png);
	background-repeat:no-repeat;
	background-size: 18px;
	background-position: 0px 1px;

	}
.spot h4{
	color:#333;
	background-color:#eee;
	margin:0px 0 12px 0;
	padding:8px 8px;
	font-weight:normal;
	font-size:15px;
	text-align:left;}

ul.precautions{
	background-color:#E9FFD9;
	padding:10px;
	margin:0px 15px ;
	color:#444;
	border-radius:5px;
	}
ul.precautions li{
	margin-left:15px;
	}

#map{
	width:95%;
	height: 100%;
	max-width:500px;
	max-height:250px;
	padding: 60% 0px 0px 0px;
	margin:5px auto 0px auto;
 }
 
 #page-top{
	width:50px;
	height:50px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background-color: rgba(0,0,0,0.5);
	-webkit-border-radius: 25px;/* width,heightの半分 */
	-moz-border-radius: 25px;
	border-radius: 25px;
	box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}
 
#page-top a:hover {
	background-color: rgba(255, 220, 0,0.8);
	-webkit-border-radius: 25px;/* width,heightの半分 */
	-moz-border-radius: 25px;
	border-radius: 25px;
	}
 
#move-page-top{
	color:#fff;
	text-decoration:none;
	display:block;
	cursor:pointer;
	height:38px;
	line-height:0.8em;
	padding-top:12px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
}


#backmenu{
	border-top:2px dotted #CCC;
	margin:10px 10px 0px 10px;
	padding:20px 0px 0px 0px;
}
#backmenu ul{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;
	}
#backmenu ul li{
	display:inline-block;
	width:40%;
	margin:0px 5px;
	list-style-type:none;
	text-align:center;
	border:#ddd solid 1px;
	border-radius:5px;
	background-image:-moz-linear-gradient(
    top,
    #fff 0%,
    #eee 100%);
	background-image:-webkit-gradient(
    linear,left top,left bottom,
    from(#fff),
    to(#eee ));
	}
#backmenu ul li a{
	display:block;
	text-decoration:none;
	padding:10px 0;
	color:#444;
	}
/* アドセンス */
.ad{
	text-align:center;}
/* 404 */
#notfound{
	text-align:center;
	padding:0px 0px;
	margin: 0px auto;
	color:#444;
	}

#notfound h3{
	color:#C00;
	font-size:20px;
	border-top:3px dotted #C00 ;
	border-bottom:3px dotted #C00 ;
	margin:30px 15px 30px 15px;
	padding:10px;
	}
#notfound p{
	margin:5px 0px;
	line-height:1.6em;
	}
#notsp{
	border-top:2px dotted #CCC;
	padding:10px 10px 0px 10px;
	/*background-color:#FF9;*/

	margin: 30px 15px 10px 15px;
	color:#C00;
	}
.top-button{
/*	display:inline-block;
	width:40%;
	margin:0px 5px;
	list-style-type:none;
	text-align:center;
	border:#ddd solid 1px;
	border-radius:5px;
	background-image:-moz-linear-gradient(
    top,
    #fff 0%,
    #eee 100%);
	background-image:-webkit-gradient(
    linear,left top,left bottom,
    from(#fff),
    to(#eee ));*/
		
	margin: 5px 50px;
	text-decoration:none;
	display:block;
	text-align:center;
	padding:10px 0px;
	color:#444;
	border:#ddd solid 1px;
	border-radius:5px;
	background-image:-moz-linear-gradient(
    top,
    #fff 0%,
    #eee 100%);
	background-image:-webkit-gradient(
    linear,left top,left bottom,
    from(#fff),
    to(#eee ));
	}
	
@media screen and (min-width: 401px) {
	.bxslider img{
	width:400px;
}
}
@media screen and (max-width: 400px) {
	.bxslider img{
	width:85%;
}
}