@charset "utf-8";


/* --------------------------------------------


						index　インデックス


---------------------------------------------- */ 
#index main {}

#index main #mainV { height: auto; position: relative;}
#index main #mainV>img { display: block; height: 80%; max-height: 454px; position: absolute; top:10%; left: 50%; margin-left: -5%; z-index: 9999; }
#index main #mainV .flexslider{height: auto; margin:auto; position:relative; overflow:hidden;}
#index main #mainV .flexslider ul { height:auto; overflow:hidden;}
#index main #mainV .flexslider ul li{height: auto; background-size:cover; background-position: top center;}
#index main #mainV .flexslider ul li img{ display:block; height: auto;}
#index main #mainV .flexslider .flex-control-paging{ position:absolute; right:2%; bottom:2%; z-index:9997; width: auto;}

@media (max-width:960px),(max-height:700px) {
#index main #mainV .flexslider .flex-control-paging{ bottom:5%;}
#index main #mainV .flexslider ul { width: 130%; margin-left: -15%;}	
}	


#index main #concept { position: relative; padding: 3em 8%; background: #fff;}
#index main #concept h2 { float: right; padding:0 0 2em 2em; border-left: 1px solid #000; margin-left: 4em; }
#index main #concept p { float: right; padding: 2em 0 1em; position: relative; z-index: 9998;}
#index main #concept>img { display: block; position: absolute; left: 5%; bottom: 0; 
	max-width: 459px; width: 40%; z-index: 9995;}

@media (max-width:640px){
	#index main #concept { padding: 3em 8% 25%; }
	#index main #concept h2 { float: none; text-align: center; padding:0 0 2em 0;
		border-bottom: 1px solid #000; border-left:none; margin-left: 0em; }
	#index main #concept p { float: none; text-align: center; padding: 2em 0 1em; position: relative; z-index: 9998;}
	#index main #concept p img { width: 90%; max-width: 349px;}
	#index main #concept>img { width:60%;}

}


#index main ul { width: 100%;}
#index main ul li { width: 19.6%; margin: 0 0.2%; height:490px;  float: left;
background-size: cover; background-position: center;}
#index main ul li a { display:block; text-align: center; height: 100%; padding-top: 42px; box-sizing: border-box; background-color:rgba(0,0,0,0.5); color: #fff; text-decoration: none;}
#index main ul li a:hover { background-color:rgba(0,0,0,0); transition: all 0.5s;}
#index main ul li p { height: 68%; width: 30%; margin:0px auto; padding: 80px 6% 0 10%;
	font-size: 1.5em; letter-spacing: 0.26em; font-family: 'Tinos', serif; font-weight:normal;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	background: url(../img/index/btnBg.png) no-repeat center 26px; background-size: 28px; }
#index main ul li p span { font-size: 0.53em;
	font-family: 'Tinos', serif; font-weight:normal; }

#index main ul li:nth-child(1) { background-image: url(../img/index/btn01.jpg)}
#index main ul li:nth-child(2) { background-image: url(../img/index/btn02.jpg)}
#index main ul li:nth-child(3) { background-image: url(../img/index/btn03.jpg)}
#index main ul li:nth-child(4) { background-image: url(../img/index/btn04.jpg)}
#index main ul li:nth-child(5) { background-image: url(../img/index/btn05.jpg)}

#index main ul li:nth-child(1) p { border-top: #842b1c 6px solid;}
#index main ul li:nth-child(2) p { border-top: #764926 6px solid;}
#index main ul li:nth-child(3) p { border-top: #842b1c 6px solid;}
#index main ul li:nth-child(4) p { border-top: #292e60 6px solid;}
#index main ul li:nth-child(5) p { border-top: #764926 6px solid;}

@media (max-width:640px){
	#index main ul li { width: 100%; margin: 0.2% 0; height:18vh; min-height: 140px; float:none;}
	#index main ul li a {padding-top: 20px; }
	#index main ul li p { height: auto; width:100%; padding: 10% 0% 0; 
	text-align: center; vertical-align: top;
		line-height: 1.2;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode:lr-tb;
	writing-mode:horizontal-tb;
	background: url(../img/index/btnBg.png) no-repeat center 10px; background-size: 24px;}

	#index main ul li:nth-child(1) p ,
	#index main ul li:nth-child(2) p ,
	#index main ul li:nth-child(3) p ,
	#index main ul li:nth-child(4) p ,
	#index main ul li:nth-child(5) p { border-top:none;}

}



/* --------------------------------------------


						index　釜めしはらだとは


---------------------------------------------- */ 
#harada main {}
#harada main>p {font-size:1.857em; padding-bottom: 1em; letter-spacing: 0.14em; text-align: center; }
#harada main .titleImage { padding-bottom: 3em;}
#harada main .titleImageSp { display: none;}

@media screen and (max-width:640px){
#harada main .titleImage { display: none;}
#harada main .titleImageSp { display:block; padding-bottom: 2em; }
#harada main .titleImageSp:nth-of-type(3) { width: 60%; max-width: 250px;}
	
}


#harada main h2 { font-size: 2.142em; letter-spacing: 0.14em; text-align: center; }

#harada main div.kodawari { width: 100%; max-width: 820px; margin: auto; padding-bottom: 4em;
 background-position: right center; background-repeat: no-repeat;}
#harada main div.kodawari.k01 {background-image: url(../img/harada/k01img.png) }
#harada main div.kodawari.k02 {background-image: url(../img/harada/k02img.png) }
#harada main div.kodawari.k03 {background-image: url(../img/harada/k03img.png) }
#harada main div.kodawari h3 {}
#harada main div.kodawari h3 img { vertical-align: middle;}
#harada main div.kodawari h3 img:last-child { display: block; margin: -5em 0 1em 82px;}
#harada main div.kodawari p { padding:0 260px 0 82px; font-size: 1.071em }


@media screen and (max-width:640px){
#harada main h2 { font-size: 1.428em; }

#harada main div.kodawari { margin: auto; padding-top: 3em; padding-bottom: 2em;
 background-position: top center; background-size: 16em;}
#harada main div.kodawari h3 img { width: 40px; display: block; margin:0 auto 1em; }
#harada main div.kodawari h3 img:last-child { margin:0 0 1em 0; width:100%; max-width: 452px;}
#harada main div.kodawari p { padding:0 ; font-size: 1.071em }

}


#harada main div#greeting { max-width: 812px; border:1px solid #cbc8c7; padding: 2em 4em; box-sizing: border-box;}
#harada main div#greeting img { float: left; width: 40%; max-width: 163px; padding-right: 2em;}
#harada main div#greeting h2 { font-size: 1.2857em; text-align: left; }

@media screen and (max-width:640px){
#harada main div#greeting {padding: 2em ; }
	
}


/* --------------------------------------------


						index　笠間焼とはらだ


---------------------------------------------- */ 
#kasamayaki main {}
#kasamayaki main .titleImage { padding-bottom: 3em;}
#kasamayaki main h2 { font-size: 2.142em; letter-spacing: 0.14em; padding-bottom: 1em; }
#kasamayaki main>p { font-size: 1.428em; padding-bottom: 2em; }
#kasamayaki main>img { display: block; padding-bottom: 15%; }
#kasamayaki main div { padding-bottom: 3em;}
#kasamayaki main div section { width: 47%; padding-bottom: 2em; float: left;}
#kasamayaki main div section:first-child {margin-right: 6%;}
#kasamayaki main div section h3 { font-size: 1.285em; letter-spacing: 0.14em;}
#kasamayaki main div section p { font-size: 0.928em; padding-top: 1.5em;}
#kasamayaki main div section p img { width: 100%; max-width: 340px; float: right; padding: 2em 0 0;}


@media screen and (max-width:640px){
#kasamayaki main h2 { font-size: 1.428em; }
#kasamayaki main div section { width:100%; float:none;}
#kasamayaki main div section:first-child {margin-right: 0;}

}

/* --------------------------------------------


						index　お品書き


---------------------------------------------- */ 
#menu main {}
#menu main section { background: url(../img/menu/bg.jpg); margin: 0 auto 2em; overflow: hidden;}

#menu main section.km {}
#menu main section.km h2 img { width: 100%;}
#menu main section.km .attention { display: block; text-align: center; padding-right: 40px; color: #a75915;}
#menu main section.km div { width: 50%; max-width: 482px; float: left; padding:2em 0;}
#menu main section.km div p { text-align: center; font-size: 1.714em; line-height: 1.4;}
#menu main section.km div:nth-of-type(1) p { padding-left: 5em;}
#menu main section.km div:nth-of-type(2) p { padding-right: 5em;}
#menu main section.km div small { font-size:0.541em; }
#menu main section.km div span { font-size:1.083em;}
#menu main section.km div img { width: 100%; display: block;}
#menu main section.km>p { clear: both; width: 84%; margin: auto; padding: 2em 4%; background: url(../img/menu/line.png) top center no-repeat;}
#menu main section.km>p img { float: left; max-width: 174px; width: 50%; overflow: hidden; padding-right: 5%;}


@media screen and (max-width:640px){
#menu main section.km .attention { padding-right: 0; margin: 15px 0;}
#menu main section.km div { width: 80%; float: none; margin: auto; padding:1em 0;}
#menu main section.km div p { font-size: 1.428em; }
#menu main section.km div:nth-of-type(1) p { padding-left:0;}
#menu main section.km div:nth-of-type(2) p { padding-right:0;}
#menu main section.km div:nth-of-type(1) img { margin-left: -10%;}
#menu main section.km div:nth-of-type(2) img { margin-left:10%;}

}

#menu main section.list {  padding: 2.5em 0 1.5em;}
#menu main section.list h2,
#menu main section.list h3 { margin:0 0 0 5%;}
#menu main section.list h2 { font-size: 1.714em; padding-left: 0.9em;
	background: url(../img/menu/h2Bg.png) left center no-repeat; background-size: 0.6em}
#menu main section.list h2 small { font-size:0.541em; padding-left: 2em; vertical-align:text-bottom; }
#menu main section.list h3 {font-size:1.142em; color: #a75915;}
#menu main section.list h3 small { font-size:0.687em; color: #000; }
#menu main section.list ul { width: 92%; margin: 1em auto 2em; }
#menu main section.list ul li { float: left; position: relative; width: 29%; margin: 0 2% ; padding: 0.6em 0;
	font-size: 1.142em; border-bottom: 1px solid #b9b9b9;}
#menu main section.list-higawari ul li { width: 46%;}
#menu main section.list ul li.col2 { width: 62%;}
#menu main section.list ul li small { display: block; font-size: 0.687em; }
#menu main section.list ul li span { display: block; position: absolute; top: 0.5em; right: 0; text-align: right;}
#menu main section.list div { width: 78%; padding:1em 5%; margin: 1em auto 2em; background: #fff;}
#menu main section.list div strong {font-size: 1.142em; font-weight:normal; }
#menu main section.list>img { margin:0 auto 2em;}
#menu main section.list>span { display: block; width: 90%; margin: auto; text-align: right; }
#menu main section.list>span img { width: 32%; padding: 0.6%;}
#menu main section.list>span.zen {  margin-top: -220px;}


@media screen and (max-width:960px){
#menu main section.list ul li { width: 46%;}
#menu main section.list ul li.col2 { width: 96%;}
#menu main section.list>span { text-align: center;  }
#menu main section.list>span.zen {  margin-top: 0px;}


}

@media screen and (max-width:640px){
#menu main section.list ul li {  width: 96%;}

}



/* --------------------------------------------


						index　ご宴会・法事


---------------------------------------------- */ 
#enkai main {}
#enkai main .titleImage { padding-bottom: 3em;}
#enkai main h2 { font-size: 2.142em; letter-spacing: 0.14em; }
#enkai main>h2+p {font-size: 1.142em; padding: 0.5em 0 2em; letter-spacing: 0.05em;}

#enkai main table { float: left; border: 1px solid #cbc8c7; width: 44%; font-size: 1.428em;}
#enkai main table th,
#enkai main table td { padding: 0.5em 6% 0; border-top: 1px solid #cbc8c7;}
#enkai main table tr:nth-of-type(1) th,
#enkai main table tr:nth-of-type(1) td { padding-top: 0.8em;}
#enkai main table th { white-space: nowrap;}
#enkai main table th.ex { white-space:normal; border: none; padding: 0 7% 1em; font-size:0.55em; }
#enkai main table th small { display: block; padding-bottom: 1em; font-size: 0.6em; }
#enkai main table th small:before { content: url(../img/enkai/icon.png); padding-right: 0.5em; vertical-align: middle;}
#enkai main table td { text-align: right;}
#enkai main table.kaiseki { background:url(../img/enkai/line01.png) repeat-x; margin-right: 5%;} 
#enkai main table.kaisekiB { background:url(../img/enkai/line02.png) repeat-x;}

@media screen and (max-width:960px){
#enkai main h2 { font-size: 1.428em; }
#enkai main table { width: 98%; margin: 0;}

}



#enkai main div { padding-bottom: 3em;}
#enkai main div h2 { font-size: 1.285em; background: url(../img/enkai/line03.png) left center no-repeat;  padding:1.5em 1.2em;}
#enkai main div p { font-size: 1.142em; padding-bottom: 1.5em;}
#enkai main div img {width: 100%; max-width: 854px;}


/* --------------------------------------------


						index　店舗情報


---------------------------------------------- */ 
#information main * { text-align: center;}
#information main .titleImage { padding-bottom: 3em;}
#information main p { padding-bottom: 1em; font-size: 1.142em; }
#information main p a { color: #b92b1c; text-decoration: underline;}
#information main p strong { color: #b92b1c; font-size: 38px; line-height: 1.4; }
#information main p strong small { font-size: 0.447em; }
#information main p strong span { font-size: 0.578em; }
#information main #mapCanvas { margin-top: 3em; max-height: 355px; height: 40vh;}
#information main #mapCanvas iframe { display: block; width: 100%; height: 100%;}


@media screen and (max-width:640px){
#information main p strong { font-size: 24px; }

}