@charset utf-8;

* {margin:0;padding:0;border:0; box-sizing:border-box;}

.clearfix:after { content: ""; display: block; clear: both; }
.clearfix {display: inline-block;} /* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;} /* End hide from IE-mac */

body{
	font-size:85%;
	-webkit-text-size-adjust:none;
	line-height:1.7em;
	font-family:Font_Kokoro,"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
	letter-spacing:2px;
	background:url(../../images/bg.jpg) repeat;
}


/* webfont
---------------------------------------------------- */
.webfont{font-family: 'Didact Gothic', sans-serif;}

/* こころ明朝 */
@font-face{ 
	font-family: 'Font_Kokoro';
	src: url('../../fonts/Kokoro.eot'); /* IE9以上用 */
	src: url('../../fonts/Kokoro.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../../fonts/Kokoro.woff') format('woff'), /* モダンブラウザ用 */
		url('../../fonts/Kokoro.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}
.webFontKokoro {
	font-family: 'Font_Kokoro';
}


/* link
---------------------------------------------------- */
a:link,a:visited {color: #666; text-decoration:underline} 
a:hover,a:active {color: #666; text-decoration:none}


/* header
---------------------------------------------------- */
header{
	width:100%;
}
.header{
	height:60px;
	line-height:normal;
	position:relative;
}
header h1{
	position:absolute;
	top:0;
	left:0;
	padding:12px 0px 0px 20px;
}
@media screen and (max-width: 480px){
header h1 img{width:35%;height:auto;}
}
@media screen and (min-width: 481px){
header h1 img{width:25%;height:auto;}
}
header div{
	position:absolute;
	top:0;
	right:0px;
	padding:15px 20px 0px 0px;
}
header div a{font-size:28px;line-height:1.0em; cursor:pointer}
/*header div a:link,
header div a:visited,
header div a:hover{ color:#666;text-decoration:none} */

/*ヘッダー固定ここから（スマホの縦画面のときのみ有効）*/
@media screen and (max-width: 480px){
.header{
    -webkit-display: flex;
    -ms-display: flex;
    /*display: flex;*/
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: stretch;
    -ms-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    transition: all .2s ease;
	z-index:100;
	background:#fff;
}
.header.is-fixed{
    position: fixed;
    /*background:#fff;*/
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, .2);*/
}
#top_scroll,
#h2{ margin-top:60px;}
}
/*ヘッダー固定ここまで*/


/* nav
---------------------------------------------------- */
#category_list{
	display:none;
	width:100%;
 	position: fixed;
	z-index:999;
	top: 0px;
	left: 0px;
}
#category_list ul{
	font-size:14px;
	table-layout: fixed;
	background-color:#eee;
	padding:10px 25px 15px;
	list-style:none;
}
#category_list li{
	border-collapse:collapse;
	border-bottom:1px solid #ddd;
	line-height:normal;
}
#category_list li a:link{ color:#000;}
#category_list li em:before{ content: " \f111";font-family: FontAwesome; font-size:70%; color:#5d2e27;line-height:1.5em; padding-right:5px} 
#category_list li span{font-family: 'Didact Gothic', sans-serif; float:right; font-size:80%; line-height:1.8em; color:#666;}
#category_list li span:after{ content: " \f0da";font-family: FontAwesome; color:#5d2e27;line-height:1.5em;padding-left:5px}
/*最後の入れ子には線はつけない*/
#category_list li:last-child{
    border-bottom:none;
}
#category_list a:link,
#category_list a:visited{color:#333; text-decoration:none; padding:15px 0px; display:block;}

#category_list p{
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	filter: alpha(opacity=100);opacity:1;
	background-color:#5d2e27;
	text-align:right;
	padding:10px 15px;
	cursor:pointer;
	font-size:30px;
	color:#fff;
}


/* mainimage
---------------------------------------------------- */
#top_scroll{ height:250px;}


/* h2
---------------------------------------------------- */
#h2{
	background:url(../../images/bg_header.jpg) no-repeat bottom;
	background-size:cover;
	text-align:center;
	padding:30px 25px; 
}
#h2 h2{
	font-size:20px;
}
#h2 h2 span{
	display:block;
	font-size:12px;
	color:#666;
}


/* main
---------------------------------------------------- */
.main{ padding:25px}

.main2{
	background:url(../../images/bg_shadow.png) no-repeat top center;
	background-size:contain;
	padding:25px;
}

/* 電話番号 */
.phone a:before{ content: " \f095";font-family: FontAwesome; font-size:90%; line-height:1.5em; padding-right:7px}
.phone a:link,
.phone a:visited,
.phone a:hover,
.phone a:active{text-decoration:none;}


/* footer
---------------------------------------------------- */
footer{
	padding:25px;
	font-size:85%;
	line-height:1.5em;
	text-align:center;
}
footer div{
	width:50%;
	margin:0px auto;
}
footer div img{ width:100%; height:auto}
footer small{
	margin-top:15px;
	display:block;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing:0px;
	color:#666;
}


/* footer_btn
---------------------------------------------------- */
#footer_btn li{
	font-family: 'Didact Gothic', sans-serif;
	list-style:none;
	float:left;
	width:33%;
	text-align:center;
	font-size:9px;
	line-height:1.0em;
	/*border-top:1px solid #ddd;*/
}
#footer_btn li a{
	display:block;
	border-right:1px solid #785753;
	padding:10px 0px;
	background-color:#5d2e27;
	text-decoration:none;
	cursor:pointer;
	color:#fff;
}
#footer_btn i{ display:block; font-size:18px; font-weight:normal; margin-bottom:5px}


/* index.html
---------------------------------------------------- */
/* 春夏秋冬季節のお菓子 */
.top_cl{
	list-style: none;
	/*margin: 0px -10px;
	overflow: hidden;*/
	margin-bottom:20px;
}
.top_cl li{
	/*float: left;
	width: 43%;
	margin:10px 10px 0px;*/
	text-align:center;
	margin-top:10px;
}
.top_cl li img{
	width:100%;
	height:auto;
	border-radius:7px;
	display:block;
	margin-bottom:5px;
}

/* 餡の背景 */
.top_an{
	background:url(../../images/bg_an.jpg) no-repeat center;
	background-size:cover;
	text-align:center;
	color:#fff;
	font-size:110%;
	line-height:1.8em;
	padding:30px 0px;
}

/* 3つのボタン */
.top_btn{
	margin-bottom:30px;
}
.top_btn li{
	list-style:none;
	width:48%;
}
.top_btn li img{ width:100%; height:auto}

/* お知らせ */
.top_info{
	margin-bottom:30px;
}
.top_info dt{
	padding-top:10px;
	font-size:85%;
}
.top_info dt img{ margin-left:10px; vertical-align:middle; width:12%; height:auto}
.top_info dd{
	padding-bottom:10px;
	border-bottom:1px dotted #ccc;
}


/* item.html
---------------------------------------------------- */
#ctnav{
	list-style:none;
	text-align:center;
	font-weight:bold;
}
#ctnav li a{
	display:block;
	border:1px solid #907774;
	border-radius:7px;
	padding:10px;
	margin-bottom:5px;
}
#ctnav li a:after{ content:"\f107";font-family: FontAwesome; text-align:center; margin-left:5px;}
#ctnav a:link,
#ctnav a:visited { color:#5d2e27; text-decoration:none}


/* store.html
---------------------------------------------------- */
.store_map{
	border:3px solid #ddd;
}


/* title
---------------------------------------------------- */
.tit_h3{
	background:url(../../images/bg_an.jpg) no-repeat center;
	text-align:center;
	padding:30px 0px 40px;
	font-size:20px;
	font-weight:normal;
	text-align:center;
	color:#fff;
}
.tit_h3 h3{
	display:inline;
	padding-bottom:10px;
	border-bottom:1px dotted #907774;
}

.tit01{
	font-weight:normal;
	margin-bottom:10px;
}
.tit01 span{
	display:block;
	background:url(../../images/bg_tit01.png) no-repeat;
	min-width:46px;
	min-height:49px;
	font-size:20px;
	line-height:20px;
	color:#fff;
	padding:14px 0px 0px 13px;
}
.tit01 strong{
	display:block;
	font-size:16px;
	color:#5d2e27;
}

.tit02{
	font-size:110%;
	margin-bottom:10px;
}
.tit02:before { content: "― ";} 


/* table, dl
---------------------------------------------------- */
.dl{width:100%;m}
.dl dt{
	clear:both;
	font-weight:bold;
	padding-top:10px;
	line-height:normal;
}
.dl dd{
	padding:0px 0px 10px 15px;
	border-bottom:1px dotted #ccc;}
.dl .last{ border-bottom:none;}


/* link, btn
---------------------------------------------------- */
.btn{
	display:block;
	padding:10px 0px;
	background-color:#5d2e27;
	border-radius:30px;
	text-align:center;
	font-weight:bold;
	line-height:normal;
}
.btn:link,
.btn:visited{ color:#fff; text-decoration:none}

.btn-s{
	font-size:15px;
	line-height:1.0em;
	padding:1px 12px 4px;
	background-color:#5d2e27;
	border-radius:2px;
	text-align:center;
}
.btn-s:link,
.btn-s:visited{ color:#fff; text-decoration:none}


/* common
---------------------------------------------------- */
* html .dtb { zoom: 1; } /* IE6 */
*:first-child+html .dtb { zoom: 1; } /* IE7 */
h2,h3,h4,h5,h6{ clear:both; font-size:100%;line-height:normal;}
img{ vertical-align:top}
iframe{vertical-align: bottom;}

.clear {clear:both}

.f-left{float:left}
.f-right{float:right}

.ul_style li{padding:8px 0px; margin-left:20px}
.ul_style li+li{border-top:1px dotted #aaa;}

.center-block{ margin:0px auto}

.img100{width:100%;height:auto;}
.img_round{
	border-radius:7px;
}

.box{ border:6px solid #d6d6d6; padding:20px 15px;}

/* テキスト関係 */
.tac{ text-align:center !important}
.tar{ text-align:right}
.lsn{ list-style:none}
.lss{ list-style:square; margin-left:20px}
.lhn{ line-height:normal}
.fs80{ font-size:80%; line-height:1.6em}
.fs100{ font-size:100%}
.fs120{ font-size:120%}
.fs150{ font-size:150%}
.red{color:#fe0000}
em{ font-style:normal}

/* サイズ指定 */
.w-20{ width:20%}
.w-30{ width:30%}
.w-40{ width:40%}
.w-50{ width:50%}
.w-60{ width:60%}
.w-70{ width:70%}
.w-80{ width:80%}

.mb5{ margin-bottom:5px}
.mb10{ margin-bottom:10px}
.mb15{ margin-bottom:15px}
.mb20{ margin-bottom:20px}
.mb30{ margin-bottom:30px}
.ml10{ margin-left:10px;}
.ml20{ margin-left:20px;}
.mr3{ margin-right:3px;}
.mr10{ margin-right:10px;}