/*
	Abukumado:English Theme
/*


/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
html {
	font-size: 62.5%; /*10px*/
	margin:0;
	padding: 0;
	overflow-y:scroll;
}



body {
	margin:0;
	padding: 0;	
	font-size: 16px;
	font-size: 1.6rem; 
	font:300 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color:#222;
	line-height: 1.8;
	text-align: center;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
figure{
	margin: 0 0 20px 0;
	padding: 0;
	
}

figcaption{
	color: #444;
	font-size: 1.4rem;
	
}


a {
	color:#0070a7;
	text-decoration: none;
	
}

main a{
	font-weight: bold;
	text-decoration: underline;

}
a:hover {
	color:#444;
	background:#FFEB00;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}

hr{
	display: block;
	width: 100%;
	height: 1px;
	background-color: #aaa;
	border: 0;
}

.red{	color: #dc143c;}



/*-------------------------------------------------------------------
h1
-------------------------------------------------------------------*/

h1{
	clear: both;
	margin:20px 0 20px 0;
	padding: 0;
	text-align: center;
	font-size: 3rem;
}

h1 span{
	padding-bottom: 10px;
	border-bottom: 1px solid #222;
}

@media screen and (min-width: 640px) {
	h1{
		font-size: 4rem;
	}
	
}

@media screen and (min-width: 1024px) {
	h1{
		font-size: 6rem;
	}
	
}


/*-------------------------------------------------------------------
h2
-------------------------------------------------------------------*/

h2{
	clear: both;
	margin:20px 0 20px 0;
	padding: 0;
	text-align: center;
	font-size: 2rem;
}


@media screen and (min-width: 640px) {
	h2{
		font-size: 2.6rem;
	}
	
}

@media screen and (min-width: 1024px) {
	h2{
		font-size: 3.6rem;
	}
	
}

/*-------------------------------------------------------------------
h3
-------------------------------------------------------------------*/

h3{
	margin:10px 0 0px 0;
	padding: 0;
	text-align: justify;	
	font-size: 1.8rem;
	letter-spacing: 2px;
}

h3+p{
	margin:0px 0 40px  0;
	
}

@media screen and (min-width: 640px) {
	h3{
		font-size: 2.0rem;
	}
	
}

@media screen and (min-width: 1024px) {
	h3{
		font-size: 2.4rem;
		text-align: center;
	}
	
}


/*-------------------------------------------------------------------
h4
-------------------------------------------------------------------*/
h4{
	margin:10px 0 0px 0;
	padding: 0;
	font-size: 1.6rem;
	
	
}

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

	
}

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

	
}


/*-------------------------------------------------------------------
p
-------------------------------------------------------------------*/

p,dl{
	font-size: 1.4rem;
	text-align: justify;
}


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

	p,dl{
		font-size: 1.5rem;
	}
	
}

@media screen and (min-width: 1024px) {
	p,dl{
		font-size: 1.6rem;
		text-align: center;
	}
	
}


ul,ul li,
dl,dt,dd{
	margin:0;
	padding: 0;
	list-style: none;
}



/*-------------------------------------------------------------------
m15
-------------------------------------------------------------------*/


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

	
}

@media screen and (min-width: 1024px) {
	.m15{
		margin: 0 15%;
	}
	
}


/*-------------------------------------------------------------------
wrapper 
-------------------------------------------------------------------*/
.wrap {
	margin: 0 10px;
}


@media screen and (min-width: 640px) {
	.wrap {
		margin: 0 20px;
	}
	
}

@media screen and (min-width: 1024px) {
	.wrap {
		max-width:980px;
		margin:0 auto;
		position:relative;
	}
	
}



/* header */
.header {
	overflow: auto;
	background: #222;

}
/* logo */
.logo {
}

/* sitetitle*/
.sitetitle{
	padding: 5px 0;
	color: #fff;
	
}

/* -------------------------------------------------------------------
lang 
-------------------------------------------------------------------*/
.lang{
	padding: 10px 0 20px 0 ;
}

	.lang ul{
		list-style: none;
	}


		.lang ul li{
width: 15%;
    display: inline-block;
    font-size: 10px;
		}

		.lang ul li a{
			display: block;
			border: 1px  solid #fff;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			line-height: 3;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}

		.lang ul li a.now{
			background: #666;
		}

		.lang ul li a:hover{
			background: #999;
		}


@media screen and (min-width: 640px) {
.lang{
	width: 260px;
	float: left;
	padding: 10px 0 0 0 ;
}

	.lang ul{
	/*	margin:10px 0 0 0; */
		list-style: none;
	}


		.lang ul li{
			width: -webkit-calc(33% - 6px);
			width: -moz-calc(33% - 6px);
			width: calc(33% - 6px); 
			float: left;
			font-size: 0.8rem;
    margin: 3px;

		}
	
	.lang ul li+li{
		/*margin: 0 0 0 3px;*/
    margin: 3px;
	}


		.lang ul li a{
			line-height: 2;
      font-weight: normal;
		}

	
}

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


/*-------------------------------------------------------------------
nav 
-------------------------------------------------------------------*/
.nav{
	width: 100%;
	
}

	.nav ul{
		width: 100%;
		
	}

		.nav ul li{	
			display: inline-table;
			vertical-align:top;
			text-align: center;
			width: 18%;
		}



		.nav ul li a{
			display: block;			
			height: 80px;
			padding: 10px 0 0 0;
			color: #222;
			font-size: 1.2rem;
			font-weight: bold;
			text-align: center;
			line-height: 3;
		}

		.nav ul li a:hover{
			filter:alpha(opacity=50);
			-moz-opacity: 0.5;
			opacity: 0.5;
		}


		.nav ul li a span{
			display: block;
		}

		.nav ul li.home a{background: #FF716A;}
		.nav ul li.welcome a{background: #FFCA63;}
		.nav ul li.infomation a{background: #1BDD61;}
		.nav ul li.food-shopping a{background: #00CDF2; line-height: 1.5;}
		.nav ul li.tourism a{background: #FF7AC0; line-height: 1.5;}


		.nav ul li img{
			height: 40%;
			display:block;
			margin: 0px auto;
		}

		.nav ul li.food-shopping  img{
			margin-bottom: 5px;
		}
		.nav ul li.tourism  img{
			margin-bottom: 5px;
		}





@media screen and (min-width: 640px) {
.nav{	
	width: -webkit-calc(100% - 280px);
	width: -moz-calc(100% - 280px);
	width: calc(100% - 280px);  
	height: 150px;
	float: right;}
	
	.nav ul{
	}
	
		.nav ul li{
			float: left;
			vertical-align:top;
			text-align: center;
			width: 20%;
		}
	
		.nav ul li+li{
			border-left: 2px solid #222;
		}
		.nav ul li a{
			display: block;			
			height: 150px;
			padding: 30px 0 0 0;
			color: #222;
			font-size: 1rem;
			font-weight: bold;
			text-align: center;
			line-height: 3;
		}
		.nav ul li img{
			height: 45%;
			display:block;
			margin: 0px auto;
		}
}

@media screen and (min-width: 1024px) {
	
		.nav ul li a{
			padding: 20px 0 0 0;
			color: #222;
			font-size: 1.7rem;
			font-weight: bold;
			text-align: center;
			line-height: 3;
		}
	
	.nav ul li+li{
			border-left: 8px solid #222;
		}
	
}




/*-------------------------------------------------------------------
read
-------------------------------------------------------------------*/
.read {
	clear: both;
	display: block;
	width: 100%;
	height: 200px;
	vertical-align: middle;
	line-height: 200px;
	font-size: 3rem;
	font-weight: bold;
	color: #fff;
	text-shadow:0px 0px 8px #000000;

}
	

	.r-welcome{ background: url(img/bg/welcome.jpg) no-repeat center;}
	.r-infomation{ background: url(img/bg/infomation.jpg) no-repeat bottom;}
	.r-food-shopping{ background: url(img/bg/food-shopping.jpg) no-repeat center;}
	.r-tourism{ background: url(img/bg/tourism.jpg) no-repeat center ;}

	.r-welcome,
	.r-infomation,
	.r-food-shopping,
	.r-tourism{
		background-size: cover;
		  position: relative;
		  z-index: 0;
		  overflow: hidden;

	}

	.r-welcome:before,
	.r-infomation:before,
	.r-food-shopping:before,
	.r-tourism:before{
		  content: '';
		  background: inherit;
		  -webkit-filter: blur(5px);
		  -moz-filter: blur(5px);
		  -o-filter: blur(5px);
		  -ms-filter: blur(5px);
		  filter: blur(5px);
		  position: absolute;
		  top: -5px;
		  left: -5px;
		  right: -5px;
		  bottom: -5px;
		  z-index: -1;
	}

@media screen and (min-width: 640px) {
.read {
	height: 300px;
	line-height: 300px;
	font-size: 6rem;
}
	
}

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



/*-------------------------------------------------------------------
subnav
-------------------------------------------------------------------*/
.subnav{
	padding: 0px 0;
	background: #E6E6E6;
}


	.subnav ul{
	}

		.subnav ul li{
			text-align: justify;
			font-size: 1.6rem;
			
			
		}

		.subnav ul li a{
			font-weight: normal;
			padding: 10px 0;
		}

		

@media screen and (min-width: 640px) {
		.subnav ul li{
			text-align: center;
				font-size: 2rem
			}

	
}

@media screen and (max-width: 1023px) {
		.subnav ul li a:before{			
			content: ">   ";
			color: #222;
		}
	
		.subnav ul li+li{
			border-top: 1px dotted #aaa;
		 }
		.subnav ul li a{
			display: block;
		}
		
}

@media screen and (min-width: 1024px) {
.subnav{
	padding: 20px 0;
	background: #E6E6E6;
}
	
		.subnav ul li{
			display: inline;
			font-size: 2.5rem;
			white-space: nowrap;
		}
	
		.subnav ul li:before,
		.subnav ul li+li:after{
			content: "|";
			color: #999;
		}
	
		.subnav ul li a{
			padding: 20px;
		}

		

	
}


/*-------------------------------------------------------------------
outline
-------------------------------------------------------------------*/
.outline{	
}

.outline div:first-child{
}
	.outline  img{
		width: auto;
		height: 300px;
		
	}

.outline div:nth-child(2){
	margin-bottom: 40px;
	}
	
@media screen and (min-width: 640px) {
.outline{	
}	
	.outline p{
		text-align: justify;
	}

.outline div:first-child{
	float: left;
	width: 40%;
	padding-right: 30px;
	background:#fff;
}
	
	.outline img{
		width: 100%;
		height: auto;
		margin-bottom: 30px;
		
	}
	
.outline div:nth-child(2){
	float:left;
	width: -webkit-calc(100% - 40%);
	width: -moz-calc(100% - 40%);
	width: calc(100% - 40%);
	margin-bottom: 40px;
	}	
	

	.outline h3{
		margin: 0 0 10px 0;
		padding: 0;
		font-size: 2.6rem;
		line-height: 1;
		text-align: justify;
	}	
	
	
}

@media screen and (min-width: 1024px) {
.outline{	
}	
	.outline p{
		text-align: justify;
	}

.outline div:first-child{
	float: left;
	width: 400px;
	padding-right: 30px;
	background:#fff;
}
	
	.outline img{
		min-width: 380px;
		max-width: 380px;
		height: auto;
		
		
	}
	
.outline div:nth-child(2){
	float:left;
	width: -webkit-calc(100% - 400px);
	width: -moz-calc(100% - 400px);
	width: calc(100% - 400px);
	}	
	

	.outline h3{
		margin: 0 0 10px 0;
		padding: 0;
		font-size: 3.6rem;
		line-height: 1;
		text-align: justify;
	}
	
}



/*-------------------------------------------------------------------
narabi
-------------------------------------------------------------------*/
.narabi{
	}

		.narabi dl dt{
			float: left;
			text-align: justify;
			line-height: 2;
		}

		.narabi dl dd{
			text-align: right;
			border-bottom: 1px solid #aaa;
			line-height: 2;
		}


/*-------------------------------------------------------------------
narabi2
-------------------------------------------------------------------*/
.narabi2{
	}

	.narabi2 dl:after{
			clear: both;
			display: block;
			content: "";
	}
		.narabi2 dl > dt{
			float: left;	
			text-align: justify;
			line-height: 2;
		}

		.narabi2 dl > dd{
			border-bottom: 1px solid #aaa;
			line-height: 2;
			padding-left: 40px;
		}



		.narabi2 dl dd > dl dd{
			text-align: justify;
			border-bottom:none;
			line-height: 2;
		}

		.narabi2 dl dd > dl dd+dd{
		}



@media screen and (min-width: 640px) {
	
		.narabi2 dl dd > dl dd{
			float:left;
			text-align: justify;
			border-bottom:none;
			line-height: 2;
		}
	
		.narabi2 dl dd > dl dd+dd{
			float: right;
		}

	
}

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

	
}


.attention{
	display: block;
	clear: both;
	margin: 20px auto;
}

	.attention a{
		display: block;
		padding: 10px 0;
		border: 2px solid #222;
		color: crimson;
		font-weight: bold;
		letter-spacing: 1px;
	}

	


/*-------------------------------------------------------------------
dantai
-------------------------------------------------------------------*/
.dantai{
	margin-bottom: 30px;
	padding:0 10px;
	background: #E6E6E6;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.dantai hr{
	background-color: #ccc;
}

.dantai h3+p{
	margin: 0 0 10px 0;
}

@media screen and (min-width: 640px) {
.dantai{
	}
	
}

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

	
}




/*-------------------------------------------------------------------
kubun
-------------------------------------------------------------------*/
.kubun{
	margin: 0px 0 0 0;
	padding: 0 0 30px 0;
}
	.kubun section{
		margin: 0;
		padding: 5px 10px 20px 10px;
		background: #FFFFFF;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

	.kubun section+section{
		margin: 3% 0 0 0;
	}

	.kubun section p{
		margin: 0;
		padding: 0;
		text-align: center;
	}


@media screen and (min-width: 640px) {
	
	.kubun section{
		display: inline-block;
		width: -webkit-calc(30%);
		width: -moz-calc(30%);
		width: calc(30%);		
		
	}


	.kubun section+section{
		margin: 0 0 0 2%;
	}
}


/*-------------------------------------------------------------------
kubun2
-------------------------------------------------------------------*/
.kubun2{
	margin: 0px 0 0 0;
	padding: 0 0 30px 0;
}
	.kubun2 section{
		margin: 0;
		padding: 5px 10px 20px 10px;
		background: #FFFFFF;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

	.kubun2 section+section{
		margin: 3% 0 0 0;
	}

	.kubun2 section p{
		margin: 0;
		padding: 0;
		text-align: center;
	}


@media screen and (min-width: 640px) {
	
	.kubun2 section{
		display: inline-block;
		width: -webkit-calc(45%);
		width: -moz-calc(45%);
		width: calc(45%);		
		
	}


	.kubun2 section+section{
		margin: 0 0 0 2%;
	}
}


/*-------------------------------------------------------------------
cose
-------------------------------------------------------------------*/
.ippan,.acose{
	padding: 0  0 0 10px; 
	border-left: 30px solid #4AC1F1;
}

.tanken,.bcose{
	padding: 0  0 0 10px; 
	border-left: 30px solid #EDADC8;
}

.ccose{
	padding: 0  0 0 10px; 
	border-left: 30px solid #A0C912;
}

.cose{
	margin: 20px 0 0 0;
	padding: 20px 0;
	background: #E6E6E6;
}




/*-------------------------------------------------------------------
photo
-------------------------------------------------------------------*/
.photo{
	padding: 40px 0;
	background: #444;
	
}



	.photo ul:after{
		clear: both;
		display: block;
		content: " ";

	}

	.photo ul li{
		float: left;
		margin: 0;
		padding: 0;
		width: -webkit-calc(50%);
		width: -moz-calc(50%);
		width: calc(50%);

	}


	.photo img:hover{
		filter:alpha(opacity=50);
		-moz-opacity: 0.5;
		opacity: 0.5;
	}

	.photo figure{
		margin:0;
		padding: 0;
		position: relative;
	}
	
	.photo figcaption{
		padding: 0 5px;
		bottom: 0;		
		font-weight: bold;
		color: #fff;
	}


	.photo a{
		text-decoration: none;
	}


.photo img{
	width: 100%;
	height: auto;
}


@media screen and (min-width: 640px) {
	
	.photo ul li{
		float: left;
		margin: 0;
		padding: 0;
		width: -webkit-calc(33%);
		width: -moz-calc(33%);
		width: calc(33%);

	}

	
	.photo figure{
		margin:0;
		padding: 0;
		position: relative;
	}
	
	.photo figcaption{
		padding: 0 5px;
		position: absolute;
		bottom: 0;		
		font-weight: bold;
		color: #fff;
		text-shadow:0px 0px 5px #000000;
	}
	
	
}

@media screen and (min-width: 1024px) {
	
	
	.photo ul li{
		float: left;
		margin: 0;
		padding: 0;
		width: -webkit-calc(25%);
		width: -moz-calc(25%);
		width: calc(25%);

	}

	
}



/*-------------------------------------------------------------------
food-shopping
-------------------------------------------------------------------*/

.fs{
	margin-top: 20px;
	padding: 30px 0;
	background: #D7DFF2;
}


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

		.fs div,
		.fs section{
		
			overflow: auto;
			padding: 5px 10px 20px 10px;
			background: #FFFFFF;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}

		.fs div+div,
		.fs section+section{
			margin-top: 40px;
		}

		.fs  img{
			width: auto;
		}


		.fs div dl{		
			text-align: justify;

		}

		.fs div dl dt{
			margin: 0 0 10px 0;
			padding: 10px 0 5px 0;
			font-size: 1.8rem;
			font-weight: bold;
			line-height: 1.2;
			border-bottom: 1px solid #aaa;
		}
		.fs div dl dd.price{
			margin-bottom: 10px;
			font-weight: bold;
			line-height: 1.4;
		}

	
@media screen and (min-width: 640px) {
	.fs div{
	}	

	.fs div dl{
		float: right;
		margin-bottom: 20px;
		padding-right: 20px;
		background:#fff;
		width: -webkit-calc(100% - 280px);
		width: -moz-calc(100% - 280px);
		width: calc(100% - 280px);
	}
	
	.fs div dl dt{
		font-size: 2.0rem; 
	}

	.fs div img{
		float:left;
		margin: 10px;
		}	
	

	
}

@media screen and (min-width: 1024px) {
	.fs div{	
	}	
	.fs div dl dt{
		font-size: 2.6rem; 
	}




}



/*-------------------------------------------------------------------
kennai
-------------------------------------------------------------------*/
.kennai img{
	width: 24%;
	height: auto;
}

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

	
}

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

	
}



/*-------------------------------------------------------------------
footer
-------------------------------------------------------------------*/
.footer {
	border-top:10px  solid #444444;

}

.footer p{
	text-align: center;
}

/*------------------------------------*\
    pano
\*------------------------------------*/

.pano{
	position: relative;
	text-align: center;
}

.pano iframe{
	width: 100%;
	height: 600px;
	background: #E6E6E6;
	z-index: 0;
}

.pano .more{
	z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 500px;
}

.pano .more a:hover{
	background: none;
	
}

.pano .more a:hover img{
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

.pano .comment {
	z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px;
  margin: auto;
  width: 400px;
	background: #ccc;
	font-weight: bold;
}



/*-------------------------------------------------------------------
access
-------------------------------------------------------------------*/
.aceess{
	clear: both;
	
}
	.map{
		overflow: auto;
		margin: 10px -10px -10px -10px;
	}

	.map img{
		margin: 0 0 20px 0;
	}
	.map iframe{
		width: 100%;
		height: 250px;
	}

	


@media screen and (min-width: 640px) {
	.map{
		overflow: auto;
		margin: 10px -20px -10px -20px;
	}
	
	.map iframe{
		height: 400px;

	}
	
}

@media screen and (min-width: 1024px) {
	.map{
		margin: 30px 0;
	}
	.map img{
		float: left;
	}
	.map iframe{
		width: 600px;
		float: right;
	}
}


/*-------------------------------------------------------------------
root
-------------------------------------------------------------------*/
.root{
	clear: both;
	margin: 0;
	padding: 30px 0;
	background: #E6E6E6;
}


	.root section{
		background: #fff;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

	.root section+section{
		margin-top: 30px;
	}

	.root h2{
		margin: 0;
		padding: 10px 0 ;
	}

	.root dl {
		margin:0px 20px;
		padding: 10px 0px 30px 0;
		border-top: 1px solid #ccc;
		font-size: 1.4rem;
		text-align: justify;
	}

	.root dl dt{
		font-size: 1.6rem;
		font-weight: bold;
	}

	.root dl  dd{
		font-size: 1.4rem;
	}

	.root dl dt+dd+dt{
		margin-top: 20px;
	}


@media screen and (min-width: 640px) {
	
	.root dl{
		text-align: center;
		font-size: 1.6rem;
	}
	
	.root dl dt{
		font-size: 2rem;
		font-weight: bold;
	}

	.root dl  dd{
		font-size: 1.6rem;
	}
	
}

@media screen and (min-width: 1024px) {
	.root h2{
		font-size: 2.5rem;
	}
	
}

.event-medhia {
    max-width: 800px;
    margin: 10px auto;
}