@charset "UTF-8";
/*====================================================
00 wideslider [ Original ]
=====================================================*/
.wideslider { width: 100%; height: 400px; text-align: left; position: relative; overflow: hidden; }
.wideslider ul,
.wideslider ul li { float: left; display: inline; overflow: hidden;}
.wideslider_base { top: 0; position: absolute; }
.wideslider_wrap { top: 0; position: absolute; overflow: hidden; }
.slider_prev,
.slider_next { top: 0; overflow: hidden; position: absolute; z-index: 100; cursor: pointer;}
.slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(../img/next.jpg) no-repeat left center;}
.pagination { bottom: 10px; left: 0; width: 100%; height: 15px; text-align: center; position: absolute; z-index: 200; }
.pagination a { margin: 0 5px; width: 15px; height: 15px; display: inline-block; overflow: hidden; background: #333; }
.pagination a.active { filter:alpha(opacity=100)!important; -moz-opacity: 1!important; opacity: 1!important;}
 
/* =======================================
    ClearFixElements
======================================= */
.wideslider ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
.wideslider ul { display: inline-block; overflow: hidden;}

/*====================================================
00 wideslider [ custom ]
=====================================================*/
@media only screen and (max-width:767px) {
	.wideslider {padding-bottom: 20px;}
}
@media only screen and (min-width:768px) and (max-width:959px) {
	
}
.pagination{bottom: 0px; left: 0; width: 100%; height: 22px; }
.pagination a  { filter:alpha(opacity=100)!important; -moz-opacity: 1!important; opacity: 1!important; margin: 0 8px; width: 22px; height: 22px; border-radius:11px; display: inline-block; overflow: hidden; background: #c9bfb4; }
.pagination a:hover{ background:#ad0000;}
.pagination a.active { background:#ad0000;}
/*====================================================
00 新着情報
=====================================================*/
div.index-news{ padding:40px 0}
div.index-news div.hgroup{ width:100%; height:62px; background:url(../img/index-t01bg.png) no-repeat; background-size: cover; display:table; }
div.index-news div.hgroup h2,
div.index-news div.hgroup p { display:table-cell; height:62px; vertical-align:middle;}
div.index-news div.hgroup h2 img{ width:110px; height:25px;}
div.index-news div.hgroup p { text-align:right;}
div.index-news div.hgroup p a {
    padding: 5px;
    border: 1px solid #333;
    color: #333;
    border-radius: 3px;
}

.index-news dl dd h3{ padding:10px 0}

div.index-news div.article:after{ content: ".";  display: block;  height: 0;  font-size:0; clear: both;  visibility:hidden;}
div.index-news div.article dl dt{  width:160px; height:160px;}
@media only screen and (max-width:767px) {
	div.index-news div.article dl { margin:20px 0; }
	div.index-news div.article dl dt{margin: 0 auto 15px;}
}
@media only screen and (min-width:768px) and (max-width:959px) {
	div.index-news div.article dl { display:table; margin:15px 0; }
	div.index-news div.article dl dt,
	div.index-news div.article dl dd{ display:table-cell; }
	div.index-news div.article dl dd{ padding:0 0 0 15px;}
}
@media only screen and (min-width:960px) {
	div.index-news div.article dl { display:table; width:480px; float:left; margin:15px 0;}
	div.index-news div.article dl dt,
	div.index-news div.article dl dd{ display:table-cell; vertical-align:top;}
	div.index-news div.article dl dd{ padding:0 20px 0 15px;}
}


/*====================================================
00 重要なお知らせ
=====================================================*/
div.index-news div.topics {
    border: 2px solid #AD0000;
    margin-bottom: 20px;
    padding: 20px;
    font-size: 150%;
}
div.index-news div.topics h3{
	margin-bottom:10px;
    text-align: center;
    font-weight: bold;
    font-size: 130%;
}



/*====================================================
00 トップウィジェットバナー
=====================================================*/
div.index-widget{ line-height:0; background:#f1e9d4;}
div.index-widget ul.widget-position:after{ content: ".";  display: block;  height: 0;  font-size:0; clear: both;  visibility:hidden;}
@media only screen and (max-width:767px) {
	div.index-widget{ padding:20px 0;}
	div.index-widget ul.widget-position:after{ content: ".";  display: block;  height: 0;  font-size:0; clear: both;  visibility:hidden;}
	div.index-widget ul.widget-position{ width:100%; margin:0 auto;}
	div.index-widget ul.widget-position li{ padding:5px;}
	div.index-widget ul.widget-position+ul.widget-position li{ width:50%; float:left;}
}
@media only screen and (min-width:768px) and (max-width:959px) {
	div.index-widget{ padding:20px 0;}
	div.index-widget ul.widget-position{ width:760px; margin:0 auto;}
	div.index-widget ul.widget-position li{width:50%; float:left;}
	div.index-widget ul.widget-position li{ padding:5px;}
	div.index-widget ul.widget-position+ul.widget-position li{ width:253px; float:left;}
}
@media only screen and (min-width:960px) {
	div.index-widget{ padding:40px 0;}
	div.index-widget ul.widget-position{ width:980px; margin:0 auto;}
	div.index-widget ul.widget-position li{ float:left; margin:10px 10px;}
	div.index-widget ul.widget-position+ul.widget-position{}
}



/*====================================================
00 スタッフオススメ商品を紹介します
=====================================================*/
#index-recommended{ background:#f5f5f0; border-bottom:10px solid #c9aa73;}
#index-recommended h2{ background:url(../img/index-t02bg.png) no-repeat center center; text-align:center;}
#index-recommended .multiple-items div ul li dl dd:after{ content: ".";  display: block;  height: 0;  font-size:0; clear: both;  visibility:hidden;}
#index-recommended .multiple-items div ul li dl dd p:after{ content: ".";  display: block;  height: 0;  font-size:0; clear: both;  visibility:hidden;}
@media only screen and (max-width:767px) {
	#index-recommended { padding:20px 0;}
	#index-recommended h2{ width:95%; margin:0 auto; background-size: contain; padding:25px 0;}
	#index-recommended h2 img{ width:55%; height:auto;}
	#index-recommended .multiple-items div{padding:0 1% ;}
	#index-recommended .multiple-items div ul{ background:#FFFFFF; padding:15px; border-radius:10px;}
	#index-recommended .multiple-items div ul li span.figure{ display:block; text-align:center; width:200px; height:200px; margin:0 auto; }
	#index-recommended .multiple-items div ul li h3{padding:15px 0;}
	#index-recommended .multiple-items div ul li dl dt{ padding:0 0 5px 0;}
	#index-recommended .multiple-items div ul li dl dd span.member{ width:80px; height:80px; display:block; float:right; margin:0 0 10px 10px;}
	}
@media only screen and (min-width:768px) and (max-width:959px) {
	#index-recommended { padding:40px 0;}
	#index-recommended h2{ width:768px; margin:0 auto; background-size: contain; padding:25px 0;}
	#index-recommended h2 img{ width:50%; height:auto;}
	#index-recommended .multiple-items div{padding:10px ;}
	#index-recommended .multiple-items div ul{ background:#FFFFFF; padding:15px; border-radius:10px;}
	#index-recommended .multiple-items div ul li span.figure{ display:block; text-align:center; width:200px; height:200px; margin:0 auto; }
	#index-recommended .multiple-items div ul li h3{text-align:center; padding:15px 0;}
	#index-recommended .multiple-items div ul li dl dt{ padding:0 0 5px 0;}
	#index-recommended .multiple-items div ul li dl dd span.member{ width:80px; height:80px; display:block; float:right; margin:0 0 10px 10px;}
	}
@media only screen and (min-width:960px) {
	#index-recommended { padding:40px 0;}
	#index-recommended h2{ width:960px; margin:0 auto; background-size: contain; padding:25px 0;}
	#index-recommended .multiple-items div ul{ background:#FFFFFF; padding:15px; border-radius:10px;}
	#index-recommended .multiple-items div{padding:15px;}
	#index-recommended .multiple-items div ul li span.figure{ display:block; text-align:center; width:200px; height:200px; margin:0 auto; }
	#index-recommended .multiple-items div ul li span.figure img{ display:inline;}
	#index-recommended .multiple-items div ul li h3{text-align:center; padding:15px 0;}
	#index-recommended .multiple-items div ul li dl dt{ padding:0 0 5px 0;}
	#index-recommended .multiple-items div ul li dl dd span.member{ width:80px; height:80px; display:block; float:right; margin:0 0 10px 10px;}
}

/*====================================================
00 ヒシクのレシピを紹介・会社紹介
=====================================================*/
#index-etcetera{ background:#fffec7 url(../img/index-bg.jpg) repeat-x;}
#index-etcetera .article{ background:#fff; border-radius:15px; padding:20px;}
#index-etcetera .article:after{ content: ".";  display: block;  height: 0;  font-size:0; clear: both;  visibility:hidden;}

#index-etcetera h2{ padding-top:16px; background:url(../img/index-etcbg.gif) repeat-x; background-size:5px 61px; height:61px; margin-bottom:15px; }
#index-etcetera .article .recipe ul li dl dd h3{ padding:8px 0 0;}
#index-etcetera h2 img{ width:auto; height:25px;}
#index-etcetera .recipe ul li{ border-top:dotted 1px #B6B6B6; margin-bottom:15px; padding-top:15px;}
#index-etcetera .recipe ul li:first-child{border-top: none;padding-top:0px;}
#index-etcetera .recipe ul li p{ margin-top:15px;}
#index-etcetera .section dl{ display:table;}
#index-etcetera .section dl dt,
#index-etcetera .section dl dd{ display:table-cell; vertical-align:top; }
#index-etcetera .section dl dd{ padding-left:15px; }

@media only screen and (max-width:767px) {
	#index-etcetera{ padding:40px 0 150px;}
	#index-etcetera .section dl dt span.figure{ width:50px; height:50px; display:block;}
	#index-etcetera .section{ padding:0 0 30px 0;}
	#index-etcetera .section+.section{ padding:0;}
	#index-etcetera .section+.section ul li{ margin-bottom:8px;}
}
@media only screen and (min-width:768px) and (max-width:959px) {
	#index-etcetera{ padding:40px 0 220px;}
	#index-etcetera .section dl dt span.figure{ width:90px; height:90px; display:block;}
	#index-etcetera .section{ padding:0 0 30px 0;}
	#index-etcetera .section+.section{ padding:0;}
	#index-etcetera .section+.section ul li{ width:48%; float:left; margin:1%;}
}
@media only screen and (min-width:960px) {
	#index-etcetera{ padding:40px 0 220px;}
	#index-etcetera .section dl dt span.figure{ width:90px; height:90px; display:block;}
	#index-etcetera .section{ float:left; width:493px;}
	#index-etcetera .section+.section{ float: right; width:397px;}
	#index-etcetera .section+.section ul li{ margin-bottom:8px;}
}