@charset "Shift_JIS";

/* 初期設定されている余白を0にする */
body,h1,h2,h3,h4,h5,h6{
       margin:0;   
}

body{
	font-family:"メイリオ","Time New Roman",sans-serif;
	background-color: #1a0c67;
	
	line-height:1.4;
 	letter-spacing :2.0px;

        color: #000000;
	font-size:96%;  

       /*  color: #1d1a1a;
	font-size:90%;   */
 
} 


h1{
	font-size:120%;
}
h2{
	font-size:100%;
	text-align:left;
}

p{
	text-align:left;
}
	

img{
	border-width:0;
}

/* ヘッダーの設定 */
.header{
	background-color:#4c4b50;
	width:1000px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom:0px;
	                  /* 左右から中央にヘッダーを配置する */
}

/* メインコンテンツの設定 */
.main{
        width:1000px;
        background-color:#170b58;
	background-image:url("images/kabe-shinryokus.jpg");
	margin-right: auto;
	margin-left: auto;
                                /* 左右から中央にメインを配置する */
	overflow:hidden;
}

/* 固定ヘッドの設定 */
.box{
	top:0px;
	height:120px;
	position:fixed;  
	z-index: 10;     
}
/* 固定ヘッドの位置調整の設定 */
.box1{
	color:#ffffff;
	padding-top: 200px;
   	margin-top: -200px;

}
/* 左側のインフォメーション域を設置する */
.saidol{
	background-color:#170b58;
	background-image:url("images/kabe-shinryokus.jpg");
	text-align:center;
	width:140px;
	float:left;
	margin-top:20px;
	margin-left:10px;
	padding:10px;
	position:fixed;
	z-index: 20;
	line-height:1.4;
 	letter-spacing :2.0px;
	display:block;
}


/* メインコンテンツ内容を中央に設置する */

.center{
	text-align:center;
}

.center1{
	width:500px;
	margin-left:auto;
	margin-right:auto;
}
.center2{
	width:82px;
	display:none;
}

/* フッターのデザイン用 */
.footer{
	background-color:#0ea40a;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	
}
.foot{
	color:#1d1a1a;
	margin:0;
	text-align:center;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	
}


/* ボタンエリア */
.navi{
	width:990px;
	padding:0px;
	margin-left:auto;
	margin-right:auto;
	list-style-type:none;
	display:block;
}

.navi li{
	float:left;
}


.aida{
	padding-right:3px;
}

.left{
	text-align:left;
}

/* ボタンエリアここまで */

.fl{
	float:left;
}

.fr{
	float:right;
}

.cl{
	clear:both;
}

/* 画像の枠線を消す */
img{
	border-style:none;
}


/* リンク部分の設定 */
a{
	color:#653e06;
}
a:link{
	color:#653e06;
}
a:hover{
	color:#653e06;
}
a:visited{
	color:#653e06;
}

/* 名物の茶楽の画像を枠で囲む設定 */
.waku0{
	padding:3px;
	width:460px;
	margin-left:5px;
	margin-right:auto;
	float:left;
}
/* 名物の茶楽の文字のを枠で囲む設定 */
.waku1{
	padding:3px;
	width:500px;
	margin-left:auto;
	margin-right:auto;
	font-size:90%;
	float:left;
}
/* 名物の茶楽の画像と文字を枠で囲む設定 */
.waku01{
	width:990px;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	
}

/* 名物の茶楽以外の店舗の文字の装飾、枠で囲む設定 */
.waku2{
	width:930px;
	padding:20px;
	margin-left:auto;
	margin-right:auto;
	font-size:90%;
}
/* フォームを中心 */
.waku-ml{
	width:380px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}


/* トップの興津地図の文字の装飾、枠で囲む設定 */
.top-waku{
	padding:5px;
	width:900px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	
}
/* トップの最下段の店舗概要紹介の文字の装飾、枠で囲む設定 */
.meisai-waku{
	padding:5px;
	width:240px;
	margin-left:auto;
	margin-right:auto;
	float:left;
}

.douga{
	width:920px;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	font-size:90%;
}
/* ここから　追加分 */
/* ボタンエリアここまで */
/* スライドショー用 */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

/* ここまで　スライドショー用 */
/* このlogohは画像サイズ設定用　*/
.logohx{
	width:60px;
	height:30px;
}
.logohx1{
	width:1000px;
	height:50px;
}
.logohx2{
	width:1000px;
	height:30px;
}
.logohh{
	width:1000px;
	height:90px;
}
.logoh0{
	width:1000px;
	height:120px;
}

.logoh1{
	width:1000px;
	height:600px;
}
/* このlogoh3はGIFアニメ */
.logoh2{
	width:500px;
	height:70px;
}
/* このlogoh3は興津の地図 */
.logoh3{
	width:800px;
	height:569px;
}
/* このlogoh4はサイト毎のトップ画像 */
.logoh4{
	width:1000px;
	height:400px;
}

/* このhabaはサムネイル画像 */
.habax{
	width:225px;
	height:135px;
}
.haba{
	width:230px;
	height:138px;
}
/* このhabaはサムネイル画像見出し */
.haba0{
	width:230px;
	height:35px;
}
/* このhaba1はフナッシー画像 */
.haba1{
	width:97px;
	height:147px;
}
/* このhaba2は拡大画像のサムネイル */
.haba2{
	width:320px;
	height:250px;
}
/* このhaba3は公共施設画像 */
.haba3{
	width:450px;
	height:270px;
}
/* このhaba4,5,6は茶楽の画像 */
.haba4{
	width:450px;
	height:225px;
}
.haba5{
	width:300px;
	height:180px;
}
.haba6{
	width:108px;
	height:180px;
}
/* このhaba7は清見寺の画像 */
.haba7{
	width:300px;
	height:180px;
}
.haba8{
	width:400px;
	height:321px;
}
.haba9{
	width:150px;
	height:250px;
}


/* これは西来寺の画像 */
.haba-t1{
	width:450px;
	height:338px;
}
.haba-t2{
	width:320px;
	height:246px;
}
.haba-t3{
	width:320px;
	height:256px;
}
.haba-t4{
	width:320px;
	height:264px;
}
.haba-t5{
	width:400px;
	height:560px;
}
.haba-t6{
	width:480px;
	height:356px;
}

.lichi{
	margin-left:10px;
}
.richi{
	margin-right:10px;
}
.sumaho{
	display:none;
}
.pc{
	display:block;
}
/*　ここから　ドロワーメニュー */
nav.menu{
	display:none;
}
#menu{
	display:none;
}

/* スマフォサイズCSS */
@media(max-width:500px){
/* トップの興津地図の文字の装飾、枠で囲む設定 */
.top-waku{
	width:90%;
	height:auto;
}
/* トップの最下段の店舗概要紹介の文字の装飾、枠で囲む設定 */
.meisai-waku{
	padding:5px;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	float:none;

}
.center1{
	width:90%;
	top:60px;
	left:60px;
	position:fixed;  
	z-index: 10;   
}
.center2{
	top:38px;
	left:1px;
	position:fixed;  
	z-index: 10;  
	display:block; 
}
.logohx1{
	width:100%;
	height:auto;
}
.logohx2{
	width:100%;
	height:auto;
}

.logohh{
	width:100%;
	height:auto;
}
.logoh0{
	width:100%;
	height:auto;
}
.logoh1{
	width:90%;
	height:90%;
}
.logoh2{
	width:90%;
	height:90%;
}
.logoh3{
	width:90%;
	height:90%;
}
.logoh4{
	width:100%;
	height:100%;
}
.habax{
	width:90%;
	height:90%;
}
.haba{
	width:90%;
	height:90%;
}
.haba0{
	width:90%;
	height:90%;
}
.haba1{
	width:70%;
	height:70%;
}
.haba2{
	width:100%;
	height:100%;
}
/* haba3は公共施設の画像 */
.haba3{
	width:100%;
	height:100%;
}
/* haba4,5,6は茶楽の画像 */
.haba4{
	width:100%;
	height:100%;
}
.haba5{
	width:45%;
	height:45%;
}
.haba6{
	width:45%;
	height:45%;
}
.haba7{
	width:90%;
	height:auto;
}
.haba8{
	width:90%;
	height:auto;
}
.haba9{
	width:45%;
	height:45%;
}

.haba-t1{
	width:90%;
	height:90%;
}
.haba-t2{
	width:90%;
	height:90%;
}
.haba-t3{
	width:90%;
	height:90%;
}
.haba-t4{
	width:90%;
	height:90%;
}
.haba-t5{
	width:90%;
	height:90%;
}
.haba-t6{
	width:90%;
	height:90%;
}
.lichi{
	margin-left:4px;
}
.richi{
	margin-right:4px;
}

/* 名物の茶楽の画像を枠で囲む設定 */
.waku0{
	padding:3px;
	width:90%;
	margin-left:5px;
	margin-right:auto;
	float:left;
}
/* 名物の茶楽の文字のを枠で囲む設定 */
.waku1{
	padding:5px;
	width:95%;
	margin-left:auto;
	margin-right:auto;
	float:left;
}

/* 名物の茶楽の画像と文字を枠で囲む設定 */
.waku01{
	width:100%;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	
}

/* 名物の茶楽以外の店舗の文字の装飾、枠で囲む設定 */
.waku2{
	width:90%;

}
/* フォームを中心 */
.waku-ml{
	width:50%;
	height:auto;
	margin:0;
}


/* 左側のインフォメーション域を設置する */

.saidol{	
	width:20%;
	font-size:70%;
	background-color:rgba(0,0,102,0.5);
	margin-top:50px;
	margin-left:5px;
	display:none;
}
.header {
	width: 100%;
}
.main{
	width: 95%;
}

/* .footer {
	width: 95%;
}
.foot {
	width: 95%;
} */

.footer{
	background-color:#0ea40a;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	
}
.foot{
	color:#1d1a1a;
	margin:0;
	text-align:center;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	
}




.box{
	width: 95%;
	float: none;
}
.box1{
	width: 95%;
}

/* ボタンエリア */
.navi{
	display:none;
}

.navi li{
	float:none;
}

.navi ul{
	width:70%;
	padding:0;
	margin-right: auto;
	margin-left: auto;
}
.navi2{
	width:90%;
	margin-right: auto;
	margin-left: auto;
	display:block;
}
.navi2 img{
	width:100%;
	height:auto;
}
/* 動画の個々の枠の設定 */
.douga{
	width:90%;
	height:90%;
	float:none;
}

/* 動画の横3つをセンターへ設定 */
.dougawaku{
	width:100%;
	height:auto;
}

.sumaho{
	display:block;
}
.pc{
	display:none;
}
nav.menu{
	display:block;
}
#menu{
	display:block;
}
.navi{
	display:none;
}
/* ハンバーガーボタン */

nav.menu			{ width:40px; height:38px; top: 60px; left:10px; position:fixed; cursor:pointer; overflow:hidden; z-index:9999; background-color: #64f288; }
nav .menu1			{ width:25px; height:2px; background-color: #000; top:0px; position:absolute; margin:8px; } 
nav .menu2			{ width:25px; height:2px; background-color: #000; top:8px; position:absolute;  margin:8px; } 
nav .menu3
			{ width:25px; height:2px; background-color: #000; top:16px; position:absolute; margin:8px;  }
/* ハンバーガーボタン */
nav .menu1,nav .menu2,nav .menu3
					{ transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; /* Opera */ -moz-transition: all 0.5s ease-out; /* Firefox */
					 -webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */ -ms-transition: all 0.5s ease-out; /* IE */ }
/* ハンバーガーボタン */
nav .menuclick1		{ top:8px; -o-transform: rotate(405deg); -moz-transform: rotate(405deg); -webkit-transform: rotate(405deg);
				 	-ms-transform: rotate(405deg); transform: rotate(405deg); }
nav .menuclick2		{ background-color:rgba(255,255,255,0);  }
nav .menuclick3		{ top:8px; -o-transform: rotate(-405deg); -moz-transform: rotate(-405deg);
					-webkit-transform: rotate(-405deg); -ms-transform: rotate(-405deg); transform: rotate(-405deg); }
/*　ドロワーメニュー */
#menu{
color:#e632e4;
position: fixed;
width:220px;
height:320px;
font-weight: bold;
display: none;
left: 10px;
top: 90px;
line-height:1.9;

list-style-type: none;
background-color: rgba(255, 255, 255, 0.8);
border: 0px solid #000;
padding: 20px 20px 0px 20px;
z-index: 9999;
}
/*by misallychan.com*/
/*　ここまで　ドロワーメニュー */
/* リンク部分のデザイン用 */
/* リンク部分の設定 */
a{
	color:#653e06;
	font-size:100%;
}
a:link{
	color:#653e06;
	font-size:100%;	
}
a:hover{
	color:#653e06;
	font-size:100%;
}
a:visited{
	color:#653e06;
	font-size:100%;
}


}