@charset "utf-8";

/*body{
	background-color:#FFF7AA;
}
*/


#tour{
background:url(../images/bg_pattern32.gif);
}

#guide{
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.60) 0%,rgba(125,136,175,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.60) 0%,rgba(125,136,175,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.60) 0%,rgba(125,136,175,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,0.60) 0%,rgba(125,136,175,1.00) 100%);
}
#seeing{
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.62) 0%,rgba(34,176,136,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.62) 0%,rgba(34,176,136,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.62) 0%,rgba(34,176,136,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,0.62) 0%,rgba(34,176,136,1.00) 100%);	
}
#access{
	background-image: -webkit-linear-gradient(90deg,rgba(223,177,151,0.78) 0%,rgba(223,177,151,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(223,177,151,0.78) 0%,rgba(223,177,151,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(223,177,151,0.78) 0%,rgba(223,177,151,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(223,177,151,0.78) 0%,rgba(223,177,151,1.00) 100%);	
}
#contact{
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(126,95,119,0.42) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(126,95,119,0.42) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(126,95,119,0.42) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(126,95,119,0.42) 100%);	
}

.clearfix:after{
	display: block;
	content: "";
	clear: both;
}

main {
	margin: 0 auto;
	width: 100%;}
	
img{
	vertical-align: bottom;
}


 
  @media screen and ( min-width: 769px ) {


main {
	margin: 0 auto;
	max-width:100%;
}
	  
	  
    #drawer_btn {
      display: none;
    }

#drawer_header {
   /* font-size: 20px;
    padding: 15px 25px;
    color: #fff;
    font-weight: bolder;*/
	display: none;
  }

#drawer_menu > ul {
	
	padding-left: 0;
	list-style-type: none;
	overflow: hidden;
  }

#drawer_menu li{
	/*display: inline;
	width: 200px;
	border-right: #ccc 1px solid;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;*/
	
	float: left;
	width: 10.3%;
	/*border-right: #ccc 1px solid;*/
	
	
	font-size:0.7rem;
		
}





#drawer_menu li:first-child{
	/*border-left: #ccc 1px solid;*/
}

#drawer_menu ul a{
	display:block;	
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color:#a4a9cf;
}



#drawer_menu ul .gnav01 a{
	border-radius:5px 0 0 5px;
}
#drawer_menu ul .gnav05 a{
	border-radius:0 5px 5px 0;
}



/*----------- color change  -------*/
#drawer_menu ul .gnav06 :nth-child(n+10) a{
background-color:#8FAADC;
}
#drawer_menu ul .gnav06 :nth-child(n+10) a:hover{
background-color:#3C538B;
}
/*----------- end of color -------*/






#drawer_menu ul a:hover{
	background-color:#3C538B;
}


/*#home #drawer_menu .gnav01 a{
	background-color:#a4a9cf;
}*/
#guide #drawer_menu .gnav02 a{
	background-color:#a4a9cf;
}
#seeing #drawer_menu .gnav03 a{
	background-color:#a4a9cf;
}
#access #drawer_menu .gnav04 a{
	background-color:#a4a9cf;
}
#contact #drawer_menu .gnav05 a{
	background-color:#a4a9cf;
}

#tour #drawer_menu .g06_mashiko a{
	color:#3C538B;
}



  
#drawer_menu{
width: 100%;
position: fixed;
	top: 0px;
/*--left: 24.3%;  original data --*/
    left: 14.4%;
    z-index:2;
}


#drawer_menu > ul > li > a {
	text-decoration: none;
	color: #fff;
	  }

/*----------- Toggle taiou -------*/
#drawer_menu ul dt{
	display:block;	
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color:#a4a9cf;
}
#drawer_menu ul li dt{
color:#fff;
}
#drawer_menu ul li dt:hover{
	background-color:#3C538B;
}	  

#drawer_menu ul li dd{

height:31px;
background:#eee;
border:solid 1px #aaa;
display:none;
text-align:center;

}

#drawer_menu ul li dd a{
text-decoration:none;
color:#fff;
}




/*------------ end Toggle ---------*/






/*------------------------------- header ------------------------*/
#header div .hero_img {
	width: 100%;
	height: auto;
	margin-top: 0px;
	position:relative;
	  }
	  
h1{	width:100%;
	position:absolute;
	top:40px;
	left:12.5%;
}

#header h2{
	color: #FF7C80;
	font-weight: bold;
	font-size: 36px;
	text-align: center;
	line-height: 1.0;
	margin-top:5px;
	/*vertical-align: middle;*/
	margin-bottom: 0px;
	/*background: #00f;*/
}

#header h3{
width:75%;
margin-left:12.5%;
padding:5px;
font-size:1.2rem;
line-height:1.5rem;
border-radius:3px;
box-shadow:0 0 0 1px #fff inset;
background-color: rgba(247,248,248,0.75);
overflow:hidden;
margin-bottom:10px;
position:relative;
}

#header a{
font-weight:bold;
display:block;
padding-left:5px;
border-left:#00c4ab 8px solid;
color:#000;
}
#header h3 span{
font-weight:bold;
display:block;
padding-left:5px;
border-left:#00c4ab 8px solid;
color:#000;
}



#header h3 img{
	width:147px;
	height:31px;
	position:absolute;
	right:50px;
	bottom:10px;
}




/*------------------- inner ----------------*/
#main-contents h2 {
	font-weight: bold;
	font-size: 24px;
	line-height: 31.5px;
	padding-bottom: 0px;
	color: #515555;
}
#inner1 h2{
margin-left:35%;
}
#inner2 h2{
margin-left:33%;
}
#inner3 h2{
margin-left:38%;
}
#map h2{
margin-left:44%;
}

#main-contents a{
text-decoration:none;
}

main #inner1,
main #inner2,
main #inner3{
	width:100%;
	margin-left:12.5%;
}

main #inner1 img,
main #inner2 img,
main #inner3 img{
	width:100%;
	height:auto;
}

#inner1 p,
#inner2 p,
#inner3 p{
	padding: 10px;
	line-height: 1.5em;
}



#inner1 .sino{
	width: 26.0%;
	height: 540px;
	background-color: rgba(255,255,255,0.70);
	position: relative;
	float: left;
	margin-right:20px;
	margin-bottom: 20px;
}

#inner1 h3  {
	font-weight: bold;
	line-height:1.5em; 
	font-size: 21px;
	border-bottom: 2px solid #DD0000;
	margin: 0 auto;
	margin-top:-30px;
	width: 100%;
	text-align: center;
	color:#dddddd;
}

#inner1 .sino h3{
color: #dddddd;
}
#inner1 .karatu h3{
color: #ff9529;
}
#inner1 .setoguro h3{
color: #dddddd;
}


#inner1 .sino .ipage{
	position: absolute;
	right: 5px;
	bottom: 0px;
	width:89px;
	height:31px;
}


#inner1 .karatu{
	width: 26.0%;
	height: 540px;
	background-color: rgba(255,255,255,0.70);
	position:relative;
	float: left;
	margin-right:20px;
	margin-bottom:20px;
}
#inner1 .karatu .ipage{
	position:absolute;
	right:5px;
	bottom:0px;
	width:90px;
	height:31px;
}


#inner1 .setoguro{
	width: 26.0%;
	height: 540px;
	background-color: rgba(255,255,255,0.70);
	position:relative;
	float: left;
	margin-bottom: 20px;
}

#inner1 .setoguro .ipage{
	position:absolute;
	right:5px;
	bottom:0px;
	width:90px;
	height:31px;
}


/*------------------- inner2 ----------------*/
#inner2 .kiseto h3{
color: #A53F88;
}
#inner2 .cole h3{
color: #208DC3;
}

#inner2 .kiseto{
	width: 26.0%;
	height: 500px;
	background-color: rgba(255,255,255,0.80);
	position: relative;
	float: left;
	
	margin-right:20px;
	margin-bottom: 20px;
}
#inner2 .kiseto .ipage{
	position:absolute;
	right:5px;
	bottom:0px;
	width:90px;
	height:31px;
}

#inner2  h3 {
	font-weight: bold;
	line-height:1.5em; 
	font-size: 21px;
	border-bottom: 2px solid #DD0000;
	margin: 0 auto;
	margin-top:-30px;
	width: 100%;
	text-align: center;
	color: #dddddd;
}

#inner2 .cole{
	width: 26.0%;
	height: 500px;
	background-color: rgba(255,255,255,0.80);
	position: relative;
	float: left;
	margin-bottom: 20px;
	margin-right:20px;
}
#inner2 .cole .ipage{
	position:absolute;
	right:5px;
	bottom:0px;
	width:90px;
	height:31px;
}

#inner2 .kano{
	width: 26.0%;
	height: 500px;
	background-color: rgba(255,255,255,0.80);
	position: relative;
	float: left;
	margin-bottom: 20px;
}
#inner2 .kano .ipage{
	position:absolute;
	right:5px;
	bottom:0px;
	width:90px;
	height:31px;
}

/*------------------- inner3 ----------------*/
#inner3 .koto{
	width: 26.0%;
	height: 500px;
	background-color: rgba(255,255,255,0.80);
	position: relative;
	float: left;
	margin-right:20px;
	margin-bottom: 20px;
}
#inner3 .koto h3{
color:#dddddd;
}
#inner3 .koto .ipage{
	position:absolute;
	right:5px;
	bottom:0px;
	width:90px;
	height:31px;
}
#inner3 .tuka{
	width: 26.0%;
	height: 500px;
	background-color: rgba(255,255,255,0.80);
	position: relative;
	float: left;
	margin-bottom: 20px;
	margin-right:20px;
}
#inner3 .tuka .ipage{
	position:absolute;
	right:5px;
	bottom:0px;
	width:90px;
	height:31px;
}
#inner3 .aka{
	width: 26.0%;
	height: 500px;
	background-color: rgba(255,255,255,0.80);
	position: relative;
	float: left;
	margin-bottom: 20px;
}
#inner3 .aka .ipage{
	position:absolute;
	right:5px;
	bottom:0px;
	width:90px;
	height:31px;
}
#inner3  h3 {
	font-weight: bold;
	line-height:1.5em; 
	font-size: 21px;
	border-bottom: 2px solid #DD0000;
	margin: 0 auto;
	margin-top:-30px;
	width: 100%;
	text-align: center;
	color: #dddddd;
}


/*------------------- map ----------------*/
#map{
	width:81.1%;
	margin-left:12.5%;
	position:relative;
	box-shadow:2px 2px 5px #999;
	margin-bottom:10px;
}
/*------------------- logo on_off ----------------*/
main #map .tour_map{
	width:100%;
	height:auto;
	position:relative;
}


main #map .on_k{
width:7.3%;
height:auto;
position:absolute;
left:25.6%;
top:43.7%;
display:none;
}
main #map .on_c{
width:6.82%;
height:auto;
position:absolute;
left:92.4%;
top:51.55%;
display:none;
}
main #map .on_m{
width:7.79%;
height:auto;
position:absolute;
left:49.2%;
top:49.0%;
display:none;
}
main #map .on_s{
width:7.79%;
height:auto;
position:absolute;
left:63.77%;
top:20.8%;
display:none;
}
main #map .on_ky{
width:7.79%;
height:auto;
position:absolute;
left:56.4%;
top:53.3%;
display:none;
}
main #map .on_mi{
width:7.79%;
height:auto;
position:absolute;
left:35.3%;
top:63.1%;
display:none;
}
main #map .on_ka{
width:7.79%;
height:auto;
position:absolute;
left:76.3%;
top:40.83%;
display:none;
}
main #map .on_t{
width:7.79%;
height:auto;
position:absolute;
left:72.6%;
top:23.5%;
display:none;
}
main #map .on_a{
width:5.84%;
height:auto;
position:absolute;
left:40.7%;
top:63.7%;
display:none;
}
	
#map h3{
	color:#fff;
	text-align:center;
	font-weight: bold;
	line-height:1.5em; 
	font-size: 24px;
	position:absolute;
	left:120px;
	top:50px;
}
#map .ilink img{
	float: left;	
	position:absolute;
	left:480px;
	top:50px;
	width:36px;
	height:36px;
}



#top a{
	text-align:center;
	}



	  
footer{
	width:100%;
	background-color:#a4a9cf;
	color:#fff;
}


footer .logo_img{
margin-left:35%;
float:left;
}
footer ul{
	margin-top:10px;
	margin-left:10px;
	float:left;
	line-height:1.5rem;
	color: #fff;
	font-size:1.2rem;
}
footer ul img{
margin-bottom:10px;
}
footer ul :nth-child(2),
footer ul :last-child{
font-size:1.0rem;
} 
footer p{
margin-top:10px;
text-align:center;
color:#515555;
padding-bottom:10px;
}

}