@charset "UTF-8";


/*===============================================
●コンテンツ
===============================================*/

#seasoning_wrap {
	width: 100%;
	min-height: 1600px;
	margin: 0 auto 50px;
	background-image: url("../img/bg_seasoning.png");
	background-position: 100% 0;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/*===============================================
●売上ランキング
===============================================*/

/* 調味料 =======================================*/

#ranking_seasoning {
	width: 770px;
	height: 330px;
	overflow: hidden;
}


.ranking_top_left {
	width: 394px;
	height: 330px;
	padding: 0;
	position: relative;
	z-index: 10;
}

.ranking_top_left img {
}

.ranking_top_right {
	width: 340px;
	height: 290px;
	position: relative;
	left: 390px;
	top: -330px;
	background: url("../img/ranking_waku.jpg") no-repeat;
	padding: 20px;
	z-index: 5;
}


.ranking_inner_left {
	float: left;
	width: 30px;
	margin-right: 20px;
	text-align: center;
}


.ranking_inner_center {
	float: left;
	width: 181px;
	margin-right: 30px;
}

.ranking_inner_center4 {
	float: right;
	width: 280px;
}

.ranking_inner_right {
	float: right;
	width: 69px;
}

.name {
	margin: 0 auto;

}

.name a {
	font-size: 14px;
	color: #1D75CD;
	letter-spacing: 0.1em;
}

.name2 {
	
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0.1em;
	-ms-writing-mode: tb-rl;
	writing-mode: tb-rl; /* IE独自仕様 */
	writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
}

.second_left {
	float: left;
	width: 340px;
	height: 160px;
	padding: 20px;
	margin-right: 10px;
	background: url("../img/second_waku.png") no-repeat;
	overflow: hidden;
	position: relative;
}

.second_right {
	float: left;
	width: 340px;
	height: 160px;
	padding: 20px;
	background: url("../img/second_waku.png") no-repeat;
	overflow: hidden;
	position: relative;
	
}

.ranking_inner_left2 {
	float: left;
	width: 30px;
	margin-right: 10px;
	text-align: center;
}

.ranking_inner_center2 {
	float: left;
	width: 120px;
	margin-right: 10px;
	text-align: center;
}

.ranking_inner_right2 {
	float: left;
	width: 170px;
}

.name3 a {
	color: #1D75CD;
	font-size: 14px;
	text-decoration: none;
	line-height: 20px;
	letter-spacing: 0.1em;
}

.comment {
	color: #8C8C8C;
	font-size: 11px;
	line-height: 15px;
}

.gridbox,
.gridbox a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 6;
}



.ranking_outer {
	display: block;
	width: 380px;
	height: 330px;
	margin: 0;
	padding: 0;
}


/* スープ =======================================*/

#ranking_soup {
	width: 770px;
	height: 330px;
	margin-top: 10px;
	overflow: hidden;
}


.ranking_soup_top_left {
	width: 340px;
	height: 290px;
	position: relative;
	background: url("../img/ranking_waku.jpg") no-repeat;
	padding: 20px;
	z-index: 5;
	overflow: hidden;
	
}

.ranking_soup_top_right {
	width: 394px;
	height: 330px;
	padding: 0;
	position: relative;
	left: 376px;
	top: -330px;
	z-index: 10;
}

/* パパッと =======================================*/

#ranking_papatto {
	width: 770px;
	height: 330px;
	overflow: hidden;
}


.ranking_papatto_top_left {
	width: 394px;
	height: 330px;
	padding: 0;
	position: relative;
	z-index: 10;
}


.ranking_papatto_top_right {
	width: 340px;
	height: 290px;
	position: relative;
	left: 390px;
	top: -330px;
	background: url("../img/ranking_waku.jpg") no-repeat;
	padding: 20px;
	z-index: 5;
	overflow: hidden;
}

.ranking_inner_left3 {
	float: left;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	text-align: center;
}

.ranking_inner_center3 {
	float: left;
	width: 300px;
}

.ranking_inner_bottom3 {
	clear: both;
	width: 100%;
}

.name4 {
	font-size: 14px;
	color: #666;
	text-decoration: none;
}

.name4 a {
	font-size: 14px;
	color: #1D75CD;
	letter-spacing: 0.1em;
}

.comment2 {
	font-size: 14px;
	line-height: 20px;
}

.ranking_inner_left4 {
	float: left;
	width: 142px;
	margin-right: 20px;
	text-align: left;
}


.ranking_inner_right4 {
	float: right;
	width: 178px;
}


/*===============================================
●カテゴリー
===============================================*/

#main_cat_wrap {
	width: 770px;
	margin-top: 35px;


}

.cat_box {
	width: 780px;
    margin: 0 -10px 0 0;
}

.cat_detail {
	float: left;
	width: 250px;
	height: 450px;
	margin-right: 10px;
	position: relative;
	margin-right: 10px;
	z-index: 20;
}

.name_btn_top {
	position: absolute;
	top: 0;
	z-index: 30;
}

.name_btn_bottom {
	position: relative;
	bottom: 103px;
	z-index: 30;
}

.name_btn_top a:hover img {
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.name_btn_bottom a:hover img {
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}


.animation1:hover { 
 animation: frame1 3s;
  animation-iteration-count: infinite;
  -webkit-animation: frame1 5s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite;
	position: relative;
	z-index: 30;
}

@keyframes frame1 { 
  0%   { transform:  translate(0px, 0px);    } 
  50%   { transform:  translate(0px, -50px);   }
  100%  { transform:  translate(0px, 0px);   } 
} 
@-webkit-keyframes frame1 { 
  0%   { -webkit-transform:  translate(0px, 0px) ;   } 
  50%   { -webkit-transform:  translate(0px, -50px);   }
  100%  { -webkit-transform:  translate(0px, 0px);   } 
}


.animation2:hover { 
 animation: frame2 3s;
  animation-iteration-count: infinite;
  -webkit-animation: frame2 5s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite;
	position: relative;
	z-index: 30;
}

@keyframes frame2 { 
  0%   { transform:  translate(0px, 0px);    } 
  50%   { transform:  translate(0px, 50px);   }
  100%  { transform:  translate(0px, 0px);   } 
} 
@-webkit-keyframes frame2 { 
  0%   { -webkit-transform:  translate(0px, 0px) ;   } 
  50%   { -webkit-transform:  translate(0px, 50px);   }
  100%  { -webkit-transform:  translate(0px, 0px);   } 
}

/*===============================================
●カテゴリースライダー
===============================================*/

#slider_area {
	width: 770px;
}


/*===============================================
●シャドウ
===============================================*/
.slide {
	width: 180px;
	height: 240px;
	background-color:rgba(255,255,255,0);
	z-index: 1;
	position: relative;
}

.slide2 {
	width: 180px;
	height: 240px;
	margin-top: -50px;
	background-color:rgba(255,255,255,0);
	z-index: 1;
	position: relative;
}

.off {
	width: 50px;
	height: 50px;
	position: relative;
	left: -65px;
	top: 50px;
	z-index: 2;
}

.effect2 {
  position: relative;
  margin: 0 auto;
  width: 140px;
  height: 170px;
  padding: 20px;
  background-color: #FFFFFF;
  border: 1px solid #CCC;
  border-radius: 2px;
  text-align: center;
}

.effect2 p {
	margin-top: 10px;
	text-align: left;

}

.effect2 a {
	font-size: 12px;
	color: #808080;
	text-decoration: none;

}
 
.effect2::before,
.effect2::after {
  content: '';
  position: absolute;
  top: 193px;
  width: 40%;
  height: 10px;
  z-index: -1;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}
 
.effect2::before {
  left: 15px;
  -webkit-transform: skew(-5deg) rotate(-5deg);
      -ms-transform: skew(-5deg) rotate(-5deg);
          transform: skew(-5deg) rotate(-5deg);
}
 
.effect2::after {
  right: 15px;
  -webkit-transform: skew(5deg) rotate(5deg);
      -ms-transform: skew(5deg) rotate(5deg);
          transform: skew(5deg) rotate(5deg);
}
 
.effect2:hover::before,
.effect2:hover::after {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
 
.effect2:hover::before {
  left: 5px;
}
 
.effect2:hover::after {
  right: 5px;
}

/*===============================================
●キャプション1
===============================================*/


.caption {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(213,234,254,0.9);
	position: absolute;
	left: 300px;
	top: 250px;
	-webkit-transition: .5s;
	transition: .5s;
	opacity: 1;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.caption .caption_outer {
	padding: 60px;
	text-align: center;

}

.caption .caption_outer a {
	font-size: 14px;
	color: #1D75CD;
	text-decoration: none;
}

.caption .caption_outer .caption_comment {
	margin-top: 20px;
	font-size: 13px;
	color: #000;
	text-align: left;
	line-height: 20px;
}

.caption .caption_outer .caption_price {
	margin-top: 20px;
	font-size: 20px;
	font-weight: bold;
	color: #000;
	text-align: right;
	line-height: 20px;
}

.caption .caption_outer .detail_btn {
	display: block;
	width: 225px;
	height: 40px;
	margin: 30px auto 0;
	background: #7CBFFC;
	color: #FFF;
	line-height: 40px;
	text-align: center;
	font-size: 13px;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
}



.ranking_top_right:hover .caption {
	top: 0;
	left: 0;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	background: rgba(213,234,254,0.9);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99D9ECFE,EndColorStr=#99D9ECFE);/*IE8以下用*/
}

.ranking_soup_top_left:hover .caption {
	top: 0;
	left: 0;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	background: rgba(213,234,254,0.9);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99D9ECFE,EndColorStr=#99D9ECFE);/*IE8以下用*/
}

.ranking_papatto_top_right:hover .caption {
	top: 0;
	left: 0;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	background: rgba(213,234,254,0.9);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99D9ECFE,EndColorStr=#99D9ECFE);/*IE8以下用*/
}

/*===============================================
●キャプション2
===============================================*/

.caption2 {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(233,233,233,0.9);
	position: absolute;
	left: 315px;
	bottom: 215px;
	-webkit-transition: .5s;
	transition: .5s;
	opacity: 1;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.caption_outer2 {
	padding: 20px;
	text-align: center;

}

.caption_outer2 a {
	font-size: 14px;
	color: #1D75CD;

}

.caption_comment2 {
	margin-top: 10px;
	font-size: 13px;
	color: #000;
	text-align: left;
	line-height: 20px;
}

.caption_price2 {
	margin-top: 10px;
	font-size: 18px;
	font-weight: bold;
	color: #000;
	text-align: right;
	line-height: 20px;
}

.caption2 .caption_outer2 .detail_btn2 {
	display: block;
	width: 225px;
	height: 40px;
	margin: 10px auto 0;
	background: #777777;
	color: #FFF;
	line-height: 40px;
	text-align: center;
	font-size: 13px;
	text-decoration: none;
	letter-spacing: 0.1em;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
}


.second_left:hover .caption2 {
	top: 0;
	left: 0;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	background: rgba(233,233,233,0.9);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99e9e9e9,EndColorStr=#99e9e9e9);/*IE8以下用*/
}

.second_right:hover .caption2 {
	top: 0;
	left: 0;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	background: rgba(233,233,233,0.9);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99e9e9e9,EndColorStr=#99e9e9e9);/*IE8以下用*/
}

/*===============================================
●調味料キービジュアル
===============================================*/

.wideslider {
	width: 100%;
	height: 390px;
	margin-top: 37px;
	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: #CCC;
}
.pagination a.active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
	background: #D01010;
}

/* =======================================
	ClearFixElements
======================================= */
.wideslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.wideslider ul {
	display: inline-block;
	overflow: hidden;
}