@charset "UTF-8";

/*======================================
	アクセス
=======================================*/
h2 img{
	margin-bottom:20px;
}

#main_wrap{
	padding:3%;
}
#main_wrap h3{
	font-size:120%;
	color:#fff;
	background-color:#84b131;
	padding:0.5em 1em;
	margin-bottom:1em;
	border-radius:0.3em;
}
ul#anchor {
	overflow:hidden;
	margin-bottom:1.0em;
}
#anchor li{
	float:left;
	margin:0 20px 10px 0;
	padding-left:23px;
	background-image:url("../img/arrow1.png");
	background-repeat:no-repeat;
	background-size:17px;
	background-position: 0 center;
	font-size:90%;
}
.contents_wrap{
	clear:both;
	overflow:hidden;
	margin-bottom:3.0em;
}
/* リスト */
#main_wrap dl {
	overflow: hidden;
	border-bottom: solid 1px #000;
	background: url(../img/spage/access/access_back_1x1.png) repeat-y 0 0;
	background-size: 25% 1px;
	margin-top: 1em;
}
#main_wrap dt {
	width: 20%;
	clear: left;
	float: left;
	margin: 0;
	border-top: solid 1px #000;
	overflow: hidden;
}
#main_wrap dd {
	width: 70%;
	float: left;
	margin: 0;
	border-top: solid 1px #000;
	overflow: hidden;
}

/* 交通アクセス */
#contents01 .img img{
	width:50%;
	float:left;
	margin-bottom:1.0em;
}
#contents01 p{
	font-size:90%;
	text-align:center;
}

/* 交通のご案内 */
#contents02 img{
	margin-bottom:20px;
}
#contents02 dl {
	background-size: 40% 1px;
}
#contents02 dt {
	width: 35%;
	padding: 0.5em 2.5%;
}
#contents02 dd {
	width: 55%;
	padding: 0.5em 2.5%;
}
#contents02 dd a{
	word-break: break-all;
}

/* 観光ガイドのご案内 */
#contents04 ul{
	margin-top:20px;
	overflow:hidden;
}
#contents04 li{
	width:30%;
	display: inline-block;
	vertical-align: top;
	margin:0 1% 2.0em 1%;
}
#contents04 li .name{
	margin-top:10px;
	color:#000;
}
#contents04 li .name:hover{
	opacity: 0.5;
}
#contents04 li .tel{
	font-size:95%;
	padding-left:18px;
	background-image:url("../img/tel.png");
	background-repeat:no-repeat;
	background-size:15px;
	background-position: 0 4px;
}
#contents04 li .add{
	font-size:85%;
	margin-bottom:10px;
}

/* レンタサイクル */
#contents05 .img{
	width:25%;
	float:left;
	margin-top:1.0em;
	margin-right:2%;
}
#contents05 dl {
	background-size: 35% 1px;
	width:73%;
}
#contents05 dt {
	width: 32%;
	padding: 0.5em 1.5%;
}
#contents05 dd.time {
	width: 26%;
	padding: 0.5em 1%;
/*
	background-image:url("../img/eigyou.png");
	background-repeat:no-repeat;
	background-size:15px;
	background-position: 0.8em 0.8em;
*/
	padding-left:3%;
}
#contents05 dd.yasumi {
	width: 27%;
	padding: 0.5em 1%;
/*
	background-image:url("../img/yasumi.png");
	background-repeat:no-repeat;
	background-size:15px;
	background-position: 0.8em 0.8em;
*/
	padding-left:3%;
}
#contents05 dd img {
	margin-right: 5px;
}

/* タクシー・貸切バス */
#contents06 dl {
	background-size: 55% 1px;
}
#contents06 dt {
	width: 50%;
	padding: 0.5em 2.5%;
}
#contents06 dd {
	width: 38%;
	padding: 0.5em 1%;
	padding-left:5%;
	background-image:url("../img/tel.png");
	background-repeat:no-repeat;
	background-size:15px;
	background-position: 3% 13px;
}

/* 宿泊案内 */
#contents07 .txt{
	width:69%;
	float:left;
	padding-right:1%;
	margin-bottom:1.0em;
}
#contents07 .img{
	width:30%;
	float:right;
}
#contents07 .more_wrap,
#contents07 .btn_more div{
	width: 210px;
	margin:0 auto;
	float:left;
}
#contents07 .btn_more p{
	background-position: 25px center;
	padding-left:10px;
}


.more_wrap,
.btn_more div{
	width: 160px;
	margin:0 auto;
}
.btn_more p{
	background-position: 30px center;
	padding-left:25px;
}

@media screen and (max-width: 799px) {
	
	/* 2列表示 */
	#contents04 li{
		width:48%;
		margin:0 auto;
		margin-bottom:20px;
	}
}

/*======================================
	タブレット
=======================================*/
@media screen and (max-width: 599px) {

	#contents01 .img{
		width:100%;
		max-width:340px;
		margin:0 auto;
		float:none;
	}
	#contents01 .img img{
		width:100%;
	}
	#contents01 p{
		clear:left;
	}

	#contents04 li{
		width:100%;
	}
	#contents04 li p{
		max-width:340px;
		margin:0 auto;
	}
	#contents04 li img,
	#contents04 li .add{
		margin-bottom:10px;
	}
	#contents04 li .name,
	#contents04 li .tel,
	#contents04 li .add{
		width: 180px;
		margin:0 auto;
	}
	#contents05 .img{
		width:100%;
		max-width:340px;
		margin:0 auto;
		float:none;
	}
	#contents05 dl{
		float:none;
		width:100%;
	}
	#contents06 dd {
		width: 35%;
		padding-left:8%;
	}
	#contents07 .txt,
	#contents07 .img{
		width:100%;
		max-width:340px;
		float:none;
		margin:0 auto;
		margin-bottom:20px;
	}
	#contents07 .more_wrap,
	#contents07 .btn_more div{
		margin:0 auto;
		float:none;
	}


}