@charset "utf-8";

body {
    font-family: 'zocial',"メイリオ",Meiryo,"ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    font-size: 16px;
	color:#3d200d;
}

ul {
	list-style-type: none;
}



a, a:link, a:active, a:visited {
	
	color:#3d200d;
	text-decoration:none;
}


a:hover {
	color:#9d3400;
	text-decoration:underline;
	
	
}

.banner {
	width:100%;
}

.banner img {

	margin:0 auto 20px;
	width:87%;
	max-width:640px;

}



.wid95 {
	width:95%;

}

.twitterSp {

	margin-left:25px; margin-right:25px;
	
}


.nomg {
	margin-left:-15px;
	margin-right:-15px;
}

.mr5 {
	
	margin-right:5px;
	
}

.mt50 {
	margin-top:50px;
	
}

.mb10 {
	margin-bottom:10px;
}

.mb20 {
	margin-bottom:20px;
}

.mb30 {
	margin-bottom:30px;
}


.mb50 {
	margin-bottom:50px;
}

hr {
	border-top:1px dotted #aacb7b;
}

.container-fluid {
	
	padding:0;
}

.container {
	

	
}


/*　メインビジュアル */
h1 {
	margin-top:0;
	margin-bottom:0;
}


h1 > img {
	max-width:100%;
	height:auto;

}






/*　ナビゲーション　*/


div.navbar-header {

	}


nav {

	
}

nav.navbar {
	background-color:#7ca83c;


	}
	
.navbar-nav {

margin-right:0;
margin-left:0;

}
	
.navbar-nav>li>a {

	padding-left:0;
	padding-right:0;
}

ul.nav > li {
	

	position:relative;
	font-size:1.3rem;
	float:left;
	width:25%;
	text-align:center;
	border-left:1px solid #779054;
	
		
	
}

ul.nav >li > a,
ul.nav >li > a:link,
ul.nav >li > a:active {
	color:#fff;
	
	
}

ul.nav >li > a:hover,
ul.nav >li > a:focus {
	color:#ff4e00;
	background-color:rgba(255, 255, 255, 0.8);

	
}



	ul.nav > li.rightb {
		
		border-right:1px solid  #779054;
	}


ul.nav > li > span.badge {
	position:absolute;
	z-index:10;
	background-color:#fff;
	color:red;
	left:1px;
	top:-4px;
	padding:1px;
	
	
	
	
	
}


/*トグルボタン*/

.navbar-toggle {
	background:#fff;
	
	
	
	
	
	　　　　　　
	　
	
	
}

.navbar-toggle .icon-bar {
	 background-color:#abcf78;
	
}



/*シェアボタン*/

.share {
	
	background-color:#f3ecdf;
	padding:7px 0 7px 20px;
	overflow:hidden;
	
	
}

.share p {
	
	color:#777777;
	font-size:2rem;
	letter-spacing:5px;
	margin:0 20px 0 0;
	float:left;
	line-height:40px;

	
}

.share a  {
 display:block;
 width:40px;
 height:auto;
 float:left;
 margin-left:15px;

	

}

.share a img {
	width:40px;
	heigh:auto;

}

}

.share button {
	
	border-radius:25px;
	border:none;
	width:35px;
	height:35px;
	color:#fff;
	margin-right:5px;
}




h2 {
	background-color:#cde2ae;
	font-size:2rem;
	padding:6px 0 6px 20px;
	letter-spacing:1rem;
	border-left:11px solid #563b29;
	font-weight:bold;
	margin-bottom:30px;
	
	
}


h3.defo {
	height:40px;
	line-height:40px;
	padding-left:10px;
	padding-bottom:10px;
	text-align:left;
	font-size:2rem;
	letter-spacing:1rem;
	border-bottom:1px solid #715441;
	
	}


h3.contents {
	
	background-image:url(../images/hutarigohan/bg_ttl.png);
	background-repeat:no-repeat;
	height:50px;
	line-height:50px;
	padding-left:80px;
	font-size:2.5rem;
	letter-spacing:1.5rem;
	border-bottom:1px solid #715441;
	background-size:contain;
	
}


p.contentstxt {
	
	padding:10px;
	line-height:180%;
	
}

div#gallery{
	padding-left:10px;
	
	
	}

p.chu {
	font-size:1.3rem;
	
	
}


div#gallery {
	margin-bottom:50px;
	overflow:hidden;
}

div#gallery ul {
	list-style-type: none;
	padding-left:0px;
	overflow:hidden;
	
}

div#gallery ul li {
	float:left;
	width:20%;
	
}

div#gallery ul li img {
	width:92%;
	height:auto;
	border:1px solid #bdbab9;

}



p.charaname {
	
	text-align:center;
	font-size:3.5rem;
	font-weight:bold;
	letter-spacing:1.5rem;
	color:#b45c52;
	margin-bottom:0;
}



p.charapic img {
	
	border:solid 5px #e9e1d9;
	width:90%;
	max-width:300px;
	height:auto;
}

p.charatxt {
	
	font-size:1.5rem;
	line-height:150%;
	padding:0 10px;
	
}

p.bookpic {
	
	text-align:center;
	padding-left:15px;
	margin-bottom:20px;
	
}

p.bookpic img {
	
	border:solid 1px #989798;
	width:100%;
	max-width:186px;
	
}

.bookdtl {
	padding-left:30px;
	
	
}

.bookdtl img.next {
	max-width:175px;
	
	
}

p.bookttl {
	font-size:1.8rem;
	margin-bottom:0;
	
}


.try-books {
	
	padding:10px;
	background-color:#e3dddf;
	border-radius:4px;
	margin-left:-15px;
	
}

.try-books p.try-tl {
	
	background-image:url(../images/hutarigohan/icon_book.png);
	background-repeat:no-repeat;
	font-size:2rem;
	border-bottom:1px solid #fff;
	padding-left:40px;
	font-weight:bold;
	color:#73555f;
	padding-bottom:5px;
	background-size:contain;
	}
	
.try-books ul li {
	
	padding-top:8px;
}
	
.try-books ul li a {
	text-decoration:underline;
	
	
}


a > button.bookbt {
	border:1px solid #73555f;
	padding:7px 60px;
	color:#fff;
	letter-spacing:5px;
	margin-bottom:7px;
	margin-top:10px;
	background-color:#856670;
	background-image:url(../images/hutarigohan/icon-cart.png);
	background-repeat:no-repeat;
	background-position:7px 4px;
	background-size:contain;
	margin-left:-15px;
	
	

	
	
	
}

a:hover > button.bookbt {
	background-color:#ad788a;
	
	
}


a > button.booktry {
	border:1px solid #73555f;
	padding:7px 60px;
	color:#fff;
	letter-spacing:5px;
	//margin-bottom:7px;
	//margin-top:10px;
	background-color:#856670;
	background-image:url(../images/hutarigohan/icon-book.png);
	background-repeat:no-repeat;
	background-position:7px 4px;
	background-size:contain;
	margin-left:-15px;
	
	

	
	
	
}

a:hover > button.booktry {
	background-color:#ad788a;
	
	
}

/* recipe */
.recipe_mrl5 {
	margin-left:5px;
	margin-right:5px;
	
}


#recipechu {
	margin-bottom:10px;
}



#recipe {
	margin-left:5px;
	margin-right:5px;

	
}


#recipe .col-xs-6 {
	padding-left:5px;
	padding-right:5px;
	}


#recipe p {
	margin:0;
}

#recipe  p a img {
	
	width:100%;
}

.rcph2 {
 height:148px;

}

#recipe h3 {
	font-size:1.5rem;
	margin-top:8px;
	margin-bottom:4px;
	
}

#recipe span.books {
	border-radius:4px;
	background-color:#e5dfdb;
	font-size:1.1rem;
	padding:3px 8px;
	
}

#recipe p.books {
	border-radius:4px;
	background-color:#e5dfdb;
	font-size:0.8rem;
	padding:3px;
	width:80%;
	margin:0 auto;
	
}

.btn {
	 width:100%;
	height:50px;
	 margin:30px auto 50px;
	 display:block;
	 text-align:center;
	 font-size:1.4rem;
	 border-top: 1px solid #BBB;
	border-left: 1px solid #BBB;
	border-right: 3px solid #aaa;
	border-bottom: 3px solid #aaa;
	background-color:#fff;
	padding:0;



}

p.btn > a {
	 display:block;
	 width:100%;
	 height:50px;
	 line-height:50px;
}

p.btn > a:hover,
p.btn > a:focus  {
	 background-color:#BBAEAE;
	 text-decoration:none;
}


div.twitter {


overflow:hidden;



}

div.twitter iframe
 {

border-left:solid 1px #dfdfdf !important;
	border-right:solid 1px #dfdfdf !important;
	border-top:1px solid rgba(255, 255, 255, 0);
	
	margin-top:0 !important;
	margin-bottom:20px !important;



}

div.twitterSp iframe
 {

border-left:solid 1px #dfdfdf !important;
	border-right:solid 1px #dfdfdf !important;
	border-top:1px solid rgba(255, 255, 255, 0);
	
	margin-top:0 !important;
	margin-bottom:20px !important;
	width:100% !important;



}


div.twitterTl {
padding:15px 10px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-right:1px solid #ddd;

}


div.twitterTl a,
div.twitterTl a:link,
div.twitterTl a:visited,
div.twitterTl a:active {
color:#FF691F;

}

div.twitterBtsp {
 margin-left:25px;
margin-right:25px;
padding:0px 10px 0 10px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    display:block;
    overflow:hidden;
}


div.twitterBtsp h2 {
	background:none;
	font-size:1.8rem;
	border:none;
	font-weight:normal;
	letter-spacing:0;
	padding:10px 0 5px;
	margin:0;
	float:left;
	}

div.twitterBtsp iframe {
	
	margin:10px 0;
}



div.twitterTlsp {
padding:15px 10px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
margin-left:25px;
margin-right:25px;


}





div.twitterTlsp a,
div.twitterTlsp a:link,
div.twitterTlsp a:visited,
div.twitterTlsp a:active {
color:#FF691F;

}

iframe#twitter-widget-0 {
/*
border-left:solid 1px #dfdfdf !important;
	border-right:solid 1px #dfdfdf !important;
	border-top:1px solid rgba(255, 255, 255, 0);
	
	margin-top:0 !important;
	margin-bottom:20px !important;
*/
}




div.twitterBtsp iframe {

 	float:right;
 	margin-bottom:10px !important;

	
}





.forPc {
			display:none;
		
		}
		
.forSp {
			display:block;
		
		}

.video-container {
    position: relative;
/*    padding-bottom: 56.25%;*/
    padding-bottom: 50%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom:20px;
    margin-top:10px;
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*page to top for SP */
#page-top {
    position: fixed;
    bottom: 5%;
    right: 5%;
    font-size: 70%;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
#page-top a {
    display: block;
    text-decoration: none;
    padding-top: 42px;
    width: 42px;
    height: 0px;
    overflow: hidden;
    background: url(../images/hutarigohan/pagetop_sp.png) no-repeat 0 0;//画像のURLを指定。
}
  
#page-top a:hover {
    background-position: 0 -42px;
}


.yoyaku {
 color:red; margin:15px 0 -10px -15px;

}

div.twitterTl {
	display:none;


}

div.twitterTl2 {
	display:none;


}

div.twitterTlsp {
	display:block;


}

/* ------------------タブレットのスタイル-------------------------- */


@media all and (min-width:410px) {

	#recipe {
	margin-bottom:20px;
	}
	
	#recipe .rcph2 {
		height:170px;
	
	
	}

	


}

@media all and (min-width:530px) {
	
	#recipe .rcph2 {
		width:25%;
	
	
	}

	


}

/* PCのスタイル */



@media all and (min-width:768px) {

	.banner img {
	
	margin:20px auto 0;
	width:100%;
	
	}
	

	
	.mb0 {
	margin-bottom:0px;
}

	h1 > img {
	margin:0 auto;
	}
	
	/*　ナビゲーション　*/
	
	
	.container {
		
		padding-left:15px;
		padding-right:15px;
		
	}


	nav {
		
	}
	
	nav.navbar {
		background-color:#7ca83c;
		margin:0 0 20px;
		border:none;
		border-radius:0;
		padding:7px 0px;
		
	}
	
	ul.nav > li {
		
		border-left:1px solid #779054;
		position:relative;
		border-bottom:none;
		letter-spacing:5px;
		font-size:1.5rem;
		width:auto;
			
		
	}
	
	ul.nav >li > a,
ul.nav >li > a:link,
ul.nav >li > a:active, a:hover, a:focus {
	
	border-bottom:none;
	
}
	
	
	

	
	
	
	ul.nav > li > span.badge {
		top:2px;
		left:4px;
		padding:1px 2px;
		letter-spacing:0;
		
		
		
		
	}

	
	.nav>li>a:focus, .nav>li>a:hover {
		
		background-color:transparent;
		text-decoration:underline;
	}

	ul.nav >li > a {
		
		padding:15px 40px;
	}
	
	
	h3.defo {
	height:50px;
	line-height:50px;
	
	}
	
	
	p.charatxt {

	padding:0;
	
}

h3.contents {

    }

p.bookpic {
	
	text-align:right;
	margin-bottom:0;
	
}


p.bookttl {
	font-size:2.5rem;
	margin-bottom:0;
	padding-left:0px;
	
}

.bookdtl {
	padding-left:0;
	
	
}

a > button.bookbt {

	margin-left:0px;
	
	

	
	
	
}

a > button.booktry {

	margin-left:0px;
	
	

	
	
	
}

.try-books {

margin-left:0px;

	
}
	
	.btn {

	 font-size:1.6rem;




}

.recipe_mrl5 {
	margin-left:0px;
	margin-right:0px;
	
}

#recipe {
	margin-left:0px;
	margin-right:0px;
}


#recipechu {
	margin-bottom:0px;
}

	
	.forPc {
			display:inline !important;
		
		}
		
	.forSp {
			display:none;
		
		}
		
	.video-container {
	
	width:80%;
	margin:0 auto 20px;


	}
	
	/*page to top */
	
	#page-top {
	right:20%;
	
	}
    #page-top a:hover {
    background-position: 0 -84px;
    
    }
    #page-top a {
    padding-top: 84px;
    width: 84px;
    background: url(../images/hutarigohan/pagetop.png) no-repeat 0 0;//画像のURLを指定。
    
	}
    
    p.sub{
    font-size:1.4rem;
    line-height: 35px;
    }
    
    .yoyaku {
	margin-left:0;

}

div.twitterTlsp {
	display:none;


}

div.twitterBtsp {
	display:none;


}


div.twitterTl {
	display:block;


}

div.twitterTl2 {
	padding:0px 10px 0 10px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    display:block;
    overflow:hidden;
    margin-top:20px;


}

div.twitterTl2 h2 {
	background:none;
	font-size:2rem;
	border:none;
	font-weight:normal;
	letter-spacing:0;
	padding:10px 0 0;
	margin:0;
	float:left;
	}


div.twitterTl2 iframe {

 	margin:10px 0 10px;
 	float:right;
	
}
	#recipe p.books {

	font-size:1.1rem;

	
}

.rcph2 {
 height:180px;

}
  

}



@media all and (min-width:980px) {
	p.bookttl {
		font-size:3rem;
		
	}
	



}