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

@media screen and (min-width: 0px) and (max-width: 640px) {

.header ul.topcarousel {
	width:100%;
	margin:30px 0 0;
	padding:0;
	position:relative;
	overflow:hidden;
	list-style:none;
}

ul.topcarousel li.carimg {
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}

ul.topcarousel li.carimg img {
	width:100%;
	overflow:hidden;
}

h2.green {
	color:#23a073;
}

h2.red {
	color:#d66e6e;
}

h2.mds_about {
	font-size:190%;
	line-height:100%;
	font-weight:normal;
	height:40px;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin:10px 0 0;
	padding:0;
	color:#498eb9;
}

.mainmds_grback {
	width:100%;
	margin:0;
	padding:100px 0;
	position:relative;
	overflow:hidden;
	background-color:#23a073;
	text-align:center;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

.mainmds_grback .submds_grback {
	font-size:120%;	
	font-weight:normal;
	color:#fefb26;
	margin:0 0 10px;
	padding:0;
	position:relative;
}

h2.mds_grback {
	font-size:260%;
	line-height:80%;
	font-weight:normal;
	height:40px;
	margin:0;
	padding:0;
	color:#FFFFFF;
	position:relative;
}

.maparea {
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
	background-image:url(../img/top_mapback.png);
	background-repeat:none;
	background-size:cover;
}

.maparea .map {
	width:100%;
	margin:40px auto;
	padding:0;
	position:relative;
}

.map img {
	width:100%;
}

.areaname {
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
	z-index:100;
}

.areaname img {
	width:100%;
}

.areaspace {
	width:100%;
	margin:0 0 100px;
	padding:0;
	position:relative;
	overflow:hidden;
}

/***areaspaceと同じタグに入れるクラス***/
.higashi_bg {
	background-color:#edfccc;
}

.chuo_bg {
	background-color:#ffe2d9;
}

.nishi_bg {
	background-color:#fff7d2;
}

.areaspace .generalarea {
	width:98%;
	margin:0 auto;
	padding:0;
	position:relative;
	overflow:hidden;
}

.areaprevbox {
	width:90%;
	margin:0 auto 30px;
	padding:0;
	position:relative;
	overflow:hidden;
	display:block;
	background-color:#FFFFFF;
	border-radius:10px;
	list-style:none;
}

.areaprevbox .prevwrap {
	width:98%;
	margin:0 auto;
	padding:0;
	position:relative;
	overflow:hidden;
}

.prevwrap .pb_l {
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}

 .pb_l .pb_car {
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}

.pb_car img {
	width:100%;
}

 .pb_l .pb_sub {
	 display:none;
}

 .pb_l .pb_sub img {
	 display:none;
}
.pb_spacer {
	display:none;
}

.prevwrap .pb_r {
	width:100%;
	height:510px;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}

.pb_r .pb_regionname {
	width:100%;
	margin:0 0 30px;
	padding:20px 0;
	position:relative;
	overflow:hidden;
	font-size:200%;
	font-weight:bold;
	color:#2c2c2c;
	text-align:center;
}
/***地域名の背景色***/
.pb_r .rn-higashibg {
	background-color:#ccde5c;
}

.pb_r .rn-chuobg {
	background-color:#fcaf95;
}

.pb_r .rn-nishibg {
	background-color:#f3d753;
}

.pb_r .pb_groupname {
	width:90%;
	height:50px;
	margin:0 auto 30px;
	padding:0 0 20px;
	position:relative;
	overflow:hidden;
	font-size:140%;
	text-align:center;
	border-bottom:solid 1px #A2A2A2;
}

.pb_r .pb_regiondesc {
	width:90%;
	height:230px;
	margin:0 auto;
	padding:0;
	position:relative;
	overflow:hidden;
	font-size:100%;
}

.pb_r .pb_btnwrap {
	width:30%;
	margin:0 auto;
	padding:0;
	position:relative;
	overflow:hidden;
}

.pb_r .pb_btnwrap a {
	text-decoration:none;
}

.pb_btnwrap a .pb_btn {
	width:100%;
	margin:0;
	padding:5px 0;
	background-color:#c4c2c2;
	color:#FFFFFF;
	text-align:center;
	font-size:12px;
}

.generalarea ul.arealist {
	width:98%;
	margin:0 auto;
	padding:0;
	position:relative;
	overflow:hidden;
	list-style:none;
}

ul.arealist li.area {
	width:100%;
	height:80px;
	float:left;
	margin:0 0 20px;
	padding:0;
	background-color:#FFFFFF;
	border-radius:10px;
	opacity: 1;
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}

ul.arealist li.area:nth-child(even) {
	margin:0 0 20px 0;
}

ul.arealist li.area:hover {
	opacity: 0.8;
    filter: alpha(opacity=80); 
}

li.area .a_wrap {
	width:98%;
	margin:0 auto;
	padding:0;
	position:relative;
	overflow:hidden;
}

li.area .regionname {
	width:25%;
	float:left;
	margin:7px 10px 0 0;
	padding:20px 0;
	text-align:center;
	font-size:14px;
	font-weight:normal;
	color:#FFFFFF;
	border-radius:10px 0 0 10px;
}

/***地域名の背景色***/

li.area .bg-higashi {
	background-color:#88a825;
}

li.area .bg-chuo {
	background-color:#f37c55;
}

li.area .bg-nishi {
	background-color:#a18508;
}

li.area .groupname {
	width:70%;
	float:left;
	margin:0;
	padding:30px 0;
	text-align:left;
	font-size:70%;
	font-weight:bold;
	color:#555555;
}

/*****観光ガイド連絡協議会とは？*****/

.aboutarea {
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
	background-color:#f4f4f4;
	background-image: url(../img/top_renrakuback.png);
	background-position:cover;
}

.aboutarea .abouttxt {
	width:90%;
	margin:0 auto 50px;
	padding:0;
	font-size:110%;
	line-height:210%;
	color:#555555;
	text-align:justify;
}

.aboutbtnwrap {
	width:70%;
	margin:0 auto 100px;
	padding:0;
	position:relative;
	overflow:hidden;
}

.aboutbtnwrap a {
	text-decoration:none;
}

.aboutbtnwrap a .aboutbtn {
	width:95%;
	margin:0 auto;
	padding:20px 0;
	background-color:#498eb9;
	border-radius:50px;
	font-size:120%;
	text-align:center;
	color:#FFFFFF;
	opacity: 1;
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}

.aboutbtnwrap a .aboutbtn:hover {
	opacity: 0.8;
    filter: alpha(opacity=80); 
}

/*****関連リンク*****/

.linkarea {
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}

ul.linklist {
	width:90%;
	margin:0 auto 100px;
	padding:0;
	position:relative;
	overflow:hidden;
	list-style:none;
}

ul.linklist li.linkitem {
	width:80%;
	float:none;
	margin:0 auto 10px;
	padding:0;
}

li.linkitem img {
	width:100%;
	opacity: 1;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

li.linkitem img:hover {
	width:100%;
	opacity: 0.8;
    filter: alpha(opacity=80); 
}

}