@charset "UTF-8";


*{
 margin:0px;
 padding:0px;
}

body {
 background-color: #ffffff;
 background-image: url("images/bg.jpg");
 background-repeat: no-repeat;
 background-position: bottom center;
 font-family:"Roboto Slab" , 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック',sans-serif;
 line-height:160%;
}

.mt40{margin-top:40px;
}

img{
 border-style:none;
 vertical-align:top;
 width: 100%;
}
/* clearfix */
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 color: #CC9900;
}
.clearfix {
 display: inline-table;
 min-height: 1%;
 margin-bottom: 0px;
 overflow: auto;
}
/* Hides from IE-mac \*/
* html .clearfix {
 height: 1%;
}
.clearfix {
 display: block;
 overflow: hidden;
}

ul{
 list-style-type:none;
}


#wrap{
	width: 100%;
 max-width:1000px;
 margin-left:auto;
 margin-right:auto;
 position: relative;
  text-align:center;
}

.mainImg{
	background: url("images/topimage.jpg") no-repeat left top #fff;
	background-size: cover;
	width:100%; 
	height:420px;
}
	
	#mainInner{
	position:relative; /* 絶対配置の基準点 */
    width:100%; 
	height:400px;
	text-align:center;
	margin:0 auto;
	display: block
	}




#TitleLogo{
 position:absolute; 
    top:0px; 
    left:50%; 
    width:100%; 
	margin:0 0 0 -50%;
}

#TitleLogo img{
width:98%;	
}	

.sublogo img{
	width:300px;
}
.sublogo {
	text-align:left;
}

#footer{
	font-size:80%;
	color: #fff;
	background-color: #18214f;
	 box-sizing: border-box;
        padding: 20px;
		margin-top:0px;
		position: relative;
		text-align:center;
	
}

#footer img{
width:120px;	
}

#footer .footerlogo{
width:120px;	
}



.globNav-row{
 display: table;
 width: 100%;
 position: relative;
    z-index: 2;

}
 
.globNav-row a{
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 text-decoration:none
}

.globNav-row a {
    background: #18214f;
    padding: 10px 10px;
    color: #fff;
    border-right: 1px dashed #f5f5f5;
    border-bottom: 3px double #f5f5f5;
}
.globNav-row {
    border-left: 1px dashed #f5f5f5;
    border-top: 5px double #f5f5f5;
}

#mainBottom{
	position: relative;
	background: url("../img/main-hall.png") no-repeat left top;
	background-size: 100%;
}

#mainBottom h2{
	position: relative;
	padding-top: 10%;
}

#mainBottom h2 img{
	position: absolute;
	top: 15px;
}

#mainBottom ul{
	padding-top: 25%;
	padding-bottom: 10%;
	position: relative;
}

h2 {font-size: 90%;
font-weight:bold;
text-align:center;
margin: 40px auto 20px;
padding: 15px 20px;
}

#days img {
width: 92%;	
}

h3 {
font-size: 110%;
font-weight:normal;
text-align:center;
margin: 20px auto;
}

.infobox {
margine: 20px auto 40px;
background: #ffebe7;
-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	 display:inline-block;
width: 80%;
}

#h-title {margin: 40px auto 5px;
background-color:#e5e5e5;
-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	 padding: 4px 10px;
	 width: 80%;
	 
	 }

h4 {
font-size: 110%;
font-weight:normal;
text-align:left;
margin: 40px auto 5px;
background-color:#e5e5e5;
-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	 padding: 4px 10px;
}

.center {
	text-align: center;
}

.title {
 text-align: center;
 width: 100%;
}
 
.titleMenu {
margine: 20px auto;
background: #dcead7;
-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	 display:inline-block;
	 width: 80%;
}

.titleMenu p{
	font-size: 100%;
padding: 20px  20px;
text-align:left;}



.titleOption {
font-size: 110%;
font-weight:bold;
padding: 8px  50px;
margin:10px auto;
text-align:center;
color: #580032;
border:solid 2px #580032;
background: #ffffff;
-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
	width: 60%; 
}

.titlePage {
margine: 20px auto;
background: #fff;
-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	 display:inline-block;
	 width: 80%;
}

.titlePage p{
	font-size: 100%;
padding: 20px  20px;
text-align:left;}

.arrow_box {
	position: relative;
	background: #00984b;
	color:#ffffff;
	text-align:center;
	padding: 10px 36px;
	margin:14px auto 7px;
	-moz-border-radius:14px;
	-webkit-border-radius:14px;
	border-radius:14px;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(127, 58, 73, 0);
	border-top-color: #00984b;
	border-width: 12px;
	margin-left: -12px;
}


.tel{
	font-size:300%;
	color:#00984b;
	text-align:center;
	margin-top:5px;
	padding: 20px;
	font-family: Lato, helvetica, arial, sans-serif;
}

.tel a{
	text-decoration:none;
	color:#00984b;
}

.rssArea{
width:78%;
text-align:left;
margin:0 auto;	
}

.blogBtn a{ 
text-decoration:none;
color: #fff;
font-size:120%;

}

.blogBtn {font-size: 110%;
font-weight:normal;
padding: 8px 56px;
margin:10px auto;
text-align:center;
color: #fff;
text-decoration:none;
background: #18214f;
-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
	 display:inline-block;
	 cursor:pointer;
	  border: 3px double #fff;

}

.blogBtn:hover {
 background: #666666;
-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
}

.blogBtn:active {
 position:relative;
 top:1px;
}

	
p {
padding: 15px 20px;	
}



.tableMenu{
font-size: 90%;
font-family:lato,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック',sans-serif;
width: 80%;
border-collapse: collapse;
margin:20px auto 40px;
}
.tableMenu th{
font-weight:normal;
padding: 6px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #e5e5e5;
border: 1px solid #b9b9b9;
width: 50%;
}
.tableMenu td{
padding: 6px;
background-color: #fff;
border: 1px solid #b9b9b9;
text-align:center;
width: 8.3%;
}


.tableShopinfo{
width: 100%;
font-size: 90%;
font-family:lato,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック',sans-serif;
border-collapse: collapse;
margin:0px auto 20px;
}
.tableShopinfo th{
white-space: nowrap; 
font-weight:normal;
padding: 6px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #e5e5e5;
border: 1px solid #b9b9b9;
}
.tableShopinfo td{
padding: 6px;
text-align: left;
background-color: #fff;
border: 1px solid #b9b9b9;
}

#section1{
	 background-color: #dcead7;
	 box-sizing: border-box;
        padding: 20px;
		position: relative;
}

.shipinfo{

	
}

.inner{
	float: left;
	width: 50%;
box-sizing: border-box;
padding: 20px 10px 20px 10px;
}





	/*ページトップへ戻る */

#page-top {
	position: fixed;
	bottom: 10px;
	right: 0px;
	text-align:right;
}  

#page-top img{
	width:60%;
}

/* service */

.thumb{
margin:0 auto;}
.thumb dl{
    float: left;
    width: 30%;
    position: relative;
    overflow: hidden;
}


.thumb dl {  
padding: 20px 0px 20px 20px;         
          }
		  
.thumb dl dt {  
padding: 10px 0;
font-size: 80%;
text-align:center;         
          }	





.map{
 max-width: 400px;
 min-width: 300px;
 height: 300px ;
 margin: 0 ;
 border: 1px solid #ccc;
 overflow: hidden ;
}

/* News */
section#news {
	background: url("../img/grey-cardboard-bg.png") repeat 0 0;
}
section#news .align {
	font-size: 6em;
	text-align: center;
}

/* Blog feed */

article .inside {
	margin: 18px 20px 20px;
	padding-top:0em;
	background: url("../img/dot-row-2.png") repeat-x scroll 0 0 transparent !important;
}

.post-date {
	display: none;
	color: #A5A5A2;
	float: right;
	font-size: 13px;
	line-height: 2;
	margin-right: 5px;
}


#news h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}
#news h2 {
	font-size: 21px;
	margin-top: 24px;
	margin-bottom: 16px;
	color: #312A1E;
	clear: right;
}

	article.post {
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
	font-size: 100%;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	width:30%;
	float: left;
	margin:10px 8px;
}	

.img-news {
	max-height: 230px;
	max-width: 100%;
	width: auto;
}

.blogArea {
	box-sizing: border-box;
	float: right;
	width: 100%;
	list-style-type: none;
	padding-left: 1em;
          }


#feed h2 {
	font-family: helvetica, arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	margin-top: 24px;
	margin-bottom: 16px;
	color:#00555F;
	clear: right;
}

#feed a{
	color:#00555F;
	}

#feed a:hover{

	}
	
	
.blogcatch{
	font-size:100%;
	color:#00984b; }
	
	

	
/***** タッチデバイスではGoogleマップを長押しで操作できるようにする
.map{
  margin:0;
  padding-top:50%;
  border:1px solid #ddd;
  overflow:hidden;
  height:0;
  position:relative;
  display:block;
}
.map::before{
  content:"\9577\62BC\3067\64CD\4F5C\304C\3067\304D\307E\3059";

  display:none;
  z-index:100;
  color:#000;
  width:100%;
  position:absolute;
  top:50%;
  left:0;
  margin:-0.5em 0 0 0;
  line-height:1;
  text-align:center;
  font-weight:bold;
  text-shadow:1px 1px 0 #fff;
}
.map::after{
  content:"";
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.5);
}
.map.release::before,
.map.release::after{
  display:none !important;
}
.map > iframe,
.map > div{
レスポンシブデザイン想定
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

@media (max-width:640px) {
  .map::before,
  .map::after{
    display:block;
  }
}
 *****/

/***** GoogleマップAPIをつかって　ここから
 .map
 {
 	max-width: 100% ;
 	height: 0 ;
 	margin: 0 ;
 	padding: 0 0 56.25% ;
  border: 1px solid #ccc;
 	overflow: hidden ;

 	position: relative ;
 	top: 0 ;
 	left: 0 ;
 }

 .map > div
 {
 	position: absolute ;
 	top: 0 ;
 	left: 0 ;

 	width: 100% ;
 	height: 100% ;

 	margin: 0 ;
 	padding: 0 ;
 }

 .map img
 {
 	max-width: none ;
 }
GoogleマップAPIをつかって　ここまで  *****/






@media screen and (max-width:930px){
	
.mainImg{
	background: url("images/topimage.jpg") no-repeat left top #fff;
	background-size: cover;
	width:100%; 
	height:360px;
}
	
	#mainInner{
	position:relative; /* 絶対配置の基準点 */
    width:100%; 
	height:400px;
	text-align:center;
	margin:0 auto;
	display: block
	}



#TitleLogo{
 position:absolute; 
    top:0px; 
    left:50%; 
    width:100%; 
	margin:0 0 0 -50%;
}

#TitleLogo img{
width:98%;	
}	

}

@media screen and (max-width:750px){
 body {
  background-image: none;
 }
 #wrap{
  width:100%;
  position: relative;
 }
 
 .inner{
	width: 100%;
box-sizing: border-box;
padding: 20px;
}

  .google-maps {
    position: relative;
    padding-bottom: 75%; 
    height: 0;
    overflow: hidden;
    }
    .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
	

 #date .aa{
  text-indent:5px;
 }
 .cap{
  margin-top: 10px;
 }
 
 

}

@media screen and (max-width:640px){
	
	.mainImg{
	background: url("images/topimage.jpg") no-repeat left top #fff;
	background-size: cover;
	width:100%; 
	height:200px;
}
	
	#mainInner{
	position:relative; /* 絶対配置の基準点 */
    width:100%; 
	height:400px;
	text-align:center;
	margin:0 auto;
	display: block
	}



#TitleLogo{
 position:absolute; 
    top:5px; 
    left:50%; 
    width:100%; 
	margin:0 0 0 -50%;
}

#TitleLogo img{
width:100%;	
}	
	
.thumb dl {  
padding: 10px 0px 10px 10px;         
          }
		  
.thumb dl dt {  
padding: 10px 0;
font-size: 70%;
text-align:left;  
line-height:130%;       
          }	
		  
		
.titleMenu {
padding: 1.5em;
margine: 10px 0;
text-align:left;
background: #dcead7;
-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	 display:inline-block;
}

.titleMenu p{
	font-size: 100%;
padding: 20px  20px;
text-align:left;}


 .mainImg{
	background: url("images/topimage.jpg") no-repeat left top #fff;
	background-size: cover;
	width:100%; 
	height:230px;
}
	
	#mainInner{
	position:relative; /* 絶対配置の基準点 */
    width:80%; 
	
	text-align:center;
	margin:0 auto;
	display: block
	}
	
	#TitleLogo{
 position:absolute; 
    top:5%; 
    left:50%; 
    width:100%; 
	margin:0 0 0 -50%;
}

	



}



@media screen and (max-width:500px){
	
	.mainImg{
	background: url("images/topimage.jpg") no-repeat left top #fff;
	background-size: cover;
	width:100%; 
	height:200px;
}
	
	#mainInner{
	position:relative; /* 絶対配置の基準点 */
    width:100%; 
	text-align:center;
	margin:0 auto;
	display: block
	}
	
	#TitleLogo{
 position:absolute; 
    top:5px; 
    left:50%; 
    width:100%; 
	margin:0 0 0 -50%;
}

.titleMenu {
padding: 1.2em;
margine: 10px 0;
text-align:left;
background: #dcead7;
-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	 display:inline-block;
	 width:96%;
}

.titleMenu p{
	font-size: 100%;
padding: 14px  14px;
text-align:left;}

	
	h2 {font-size: 100%;
font-weight:normal;
text-align:center;
margin: 20px auto;
padding: 15px 20px;
}



#days img {
width: 100%;	
}

p{
font-size: 90%;	
}

h3 {
font-size: 96%;
font-weight:normal;
text-align:center;
margin: 20px auto;
}

.br-sp { display:none; }


	

.tableShopinfo th,
.tableShopinfo td{
        width: 100%;
        display: block;		
}

#page-top {
	position: fixed;
	bottom: 10px;
	right: 0px;
	text-align:right;
}  

#page-top img{
	width:50%;
	
}

	#mainBottom{
		margin-top: 10%;
	}

	#mainBottom h2 img{
		top: -105%;
	}
	
	article.post {
	font-size: 100%;
	width:90%;
	margin:10px 10px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}	

 
 #date{
  width:100%;
 }
 
 .tel{
	font-size:200%;
	text-decoration:underline;
	
}
	


}

@media screen and (max-width:380px){
	
.mainImg{
	background: url("images/topimage.jpg") no-repeat left top #fff;
	background-size: cover;
	width:100%; 
	height:160px;
}

.sublogo img{
	width:160px;
}
	
.blogBtn a{ 
text-decoration:none;
color: #fff;
font-size:100%;

}

.blogBtn {
font-weight:normal;
padding: 8px 30px;
margin:10px auto;
text-align:center;
color: #fff;
text-decoration:none;
background: #18214f;
-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
	 display:inline-block;
	 cursor:pointer;
	  border: 3px double #fff;

}

	
}