@charset "EUC-JP";
/* ///////////////////////////////

スパイス特集
PC用

///////////////////////////////w
*/
#pageContents{ font-size:12px; line-height:1.9em; letter-spacing:0.05em;}
	
	
.block{width:950px; margin:0 auto; position:relative;}
.nav{margin: 0 20px 100px 25px; overflow:hidden}
.nav li{float:left}
.ttlCnt p{margin:0px 20px}

.bklineup{right:0;  z-index:9999; position:absolute; text-align:right; margin-top:60px}
.bklineup img{border-bottom: 3px solid #666; width: 90px;}
.fixed { position: fixed; top: 20px; z-index: 10000;}

    

.itemInfo mark.newicon{ background:#ffc600; padding:2px 7px; line-height:1.0em; font-weight:bold; color:#fff; top:-19px; left:0; position:absolute; z-index:8888}
.opBox mark.newicon{ background:#ffc600; padding:2px 7px; line-height:1.0em; font-weight:bold; color:#fff; top:200px; left:0; position:absolute; z-index:8888}

.itemCnt li mark.omake{ background:#ffc600; border-radius:32px; height:40px; width:40px; padding:12px; line-height:1.0em; font-weight:bold; color:#fff; top:70px; left:-10px; position:absolute; z-index:8888}

.imgL{float:left;}
.imgR{float:right;}
/*

--------------------------------------------------------------*/
.spiceCnt h1{line-height:0}
.ttlimg{float:left; margin-right:20px; margin-bottom:40px}
#ttlCnt p{padding:25px 20px 0 0;}


/*profile
--------------------------------------------------------------*/
#profile{text-align:center; margin:50px 76px}
#profile .profile_content{background:#e5e5e5; padding:20px 30px; display:block; text-align:left; clear:both; font-size:10px}
#profile .imgR{margin:20px 0 5px;}
#profile p{font-size:18px; font-weight:bold; line-height:1.9em; margin:70px 0 0 40px}


/*menu
--------------------------------------------------------------*/
nav ul{overflow:hidden; margin: 0 39px;}
nav ul li{float:left; margin:0 8px}
nav ul li:last-child{margin:15px 0 0 35px; text-align:center}


/*share*/
.cntBox{margin:100px 25px; text-align:center; overflow:hidden}
.cntBox h2 span{display:none}

.recipeR a,
.recipeBox2 li p a{text-decoration:underline; font-weight:bold}


/*
interview01
--------------------------------------------------------------*/
#int01{}
#int01 h2 .pcOnly{text-align:center; margin:25px 0 40px}
#int01 .imgL{float:left; margin:0 40px 0 50px}
#int01 p{text-align:left;  margin:0 50px; }
#int01 .imgR{clear:both; margin:0 50px 0 40px}
#int01 p{text-align:left;  margin:0 50px; }
#int01 p b,
#int02 p b{font-weight:bold; color:#e47b00;}


/*
interview02
--------------------------------------------------------------*/
#int02{}
#int02 h2 .pcOnly{text-align:center; margin:25px 0 0}
#int02 p{text-align:center; margin:40px 0}
#int02 h3{line-height: 0; margin-top:10px}
#int02 h3 span{display:none}

.int02Box ul{display:none}
/*
Recipe01+02
--------------------------------------------------------------*/
#rec01{}
#rec01 h2 .pcOnly{text-align:center; margin:25px 0 0}
#rec01 p{text-align:center; margin:0px 0}
#rec01 h3{text-align:left; font-weight:bold; line-height:1.5em; font-size:20px;}

#rec01 .imgL{}
.recipeBox{margin:40px 50px; overflow:hidden}
.recipeBox h4{border:1px solid #000; border-left:none; border-right:none; padding:0 10px; margin:10px 0; font-weight:bold}
.recipeR{margin-left:40px; float:left; text-align:left; width: 280px;}
.recipeBox th{font-weight:normal; padding:0 0 0 10px}
.recipeBox td{text-align:right;  padding:0 0 0 10px}
.recipeBox1{width:100%}
.recipeBox1a th{padding-top:10px;}
.recipeBox2{float:left; overflow:hidden; margin-top:50px}
.recipeBox2 li{width:192px ; float:left; background:#b5cde3; border-radius:10px; margin-right:8px;}
.recipeBox2 li p{ margin: 10px 10px 15px 15px!important; text-align: left!important; height:25em; }
.useitem{clear:both; padding-top:50px!important}
.useitem p{text-align:center; margin:0 auto}
.useitem #onepoint{ width:323px ; height:140px; margin:30px 0 0 68px; text-align:left; padding: 60px 190px 0 160px; font-size:1.0em}
.useitem p img{text-align:center; margin:0 auto}

#rec02{}
#rec02 h2 .pcOnly{text-align:center; margin:25px 0 0}
#rec02 p {
    text-align: center;
    margin: 20px 0;
}#rec02 h3{font-size:24px; font-weight:bold; margin-bottom:30px; padding-top:10px}
#rec02 .recipeBox{margin:40px 50px; overflow:hidden; text-align:center}
#rec02 img.imgL{width:340px}
.recipehow{clear:both}
.recipehow h4{border:0; text-align:left}
.recipehow ol{background:#e5e5e5; border-radius:20px; overflow: hidden; padding:20px 20px 20px 40px}
.recipeSlider .recipeView ul li .recipehow ol li{border:0!important; padding:0 0 10px 0px!important; height:auto!important; text-align:left; width:auto!important;list-style-position: outside;
    list-style-type: decimal;}
#rec02 .recipeR{width:300px}
.recipehow a{text-decoration:underline}

.sprecipe{position:relative}
.sprecipe img.icon{right:-10px; top:-70px; position:absolute; z-index:999; width: 40%!important;}
.sprecipebox{position:relative}
.sprecipebox img.icon{left:240px; top:0px; position:absolute; z-index:999; width: 10%!important;}


/*
lineup
--------------------------------------------------------------*/
#lineup{}
#lineup h2 .pcOnly{text-align:center; margin:25px 0 50px}
#lineup ul.itemCnt{overflow:hidden; display:block; padding:5px 0px 5px 0px; font-size:0; text-align:center}
#lineup ul.itemCnt dd{ display:inline-block; padding:0; margin:0}
#lineup ul.itemCnt.item3col dd{ width:200px; margin:10px 0px 0 0; font-size:14px; vertical-align:top;}
img.itemImg{ width:100%; margin-bottom:5px;}
img.itemImg2{ margin-bottom:5px;}
.itemCnt li a:hover{text-decoration:none;}
.itemInfo {text-align:center; position:relative}
.itemInfo span.Name{text-align:center; margin-top:10px}
.item3col .itemInfo span.Name,
.item4col .itemInfo span.Name,
.itemInfo p.Price{text-align:center; color:#ff8b6c;}
.itemInfo p.Price{margin:5px 0 0 0; font-size:12px}




/*
column

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

#column{margin:60px auto 0; font-size:1.0em}
#column ul{margin:40px 50px 0; font-size:1.2em; text-align:left}
#column ul li{margin-bottom: 20px}
#column ul li a{border-bottom:1px #333 dashed; padding-bottom:5px;}
#column ul li a span{font-weight:bold;  margin-left:10px}
#column ul li a em{background:#c9c733; padding:2px 10px; font-style:normal; font-size:0.9em; margin-right:10px; color:#fff;}




/*recipeスライド
---------------------------------------------------------*/

/* .recipeSlider
--------------------------- */
.recipeSlider { margin: 0 auto; text-align: left;}

 
/* .recipeThumb
--------------------------- */
.recipeSlider .recipeThumb { width: 812px; margin:60px auto;}
.recipeSlider .recipeThumb ul li { cursor:pointer; float:left; width:190px; padding:0 6px;}
.recipeSlider .recipeThumb ul li img { width: 100%;}
.recipeSlider .recipeThumb ul li.active { filter:alpha(opacity=100)!important; -moz-opacity: 1!important; opacity: 1!important;}
 
/* sideNavi
 
 
 
/* =======================================
    ClearFixElements
======================================= */
.recipeSlider .recipeView ul:after,
.recipeSlider .recipeThumb ul:after {content: "."; height: 0;  clear: both; display: block; visibility: hidden;}
 
.recipeSlider .recipeView ul,
.recipeSlider .recipeThumb ul { }

.recipeView ul li{border:10px #b5cde3 solid; box-sizing:border-box; height:1180px}
.recipeView ul li.sprecipebox{border:10px #c9c733 solid}


.slick-prev,
.slick-next{
font-size: 0; line-height: 0; position: absolute; top: 0; display: block;
    width: 23px; height: 80%; margin: 0px 0; cursor: pointer;
    color: transparent; border-radius: 5px; outline: none;
    background: url(../images/spice1706/spice1706-arrowl.png) no-repeat left 50%; background-size:100% auto;
	z-index:999; border:0}
.slick-next{
    background: url(../images/spice1706/spice1706-arrowr.png) no-repeat left 50%; background-size:100% auto;}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus{
    color: transparent; outline: none;}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before{opacity: 1;}

.slick-prev:before,
.slick-next:before{
	font-size: 20px; line-height: 1; opacity: .75; color: #000;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

.slick-prev{left: 0px;}
[dir='rtl'] .slick-prev{left: 0px;right: auto;}
.slick-prev:before{content: ;}
[dir='rtl'] .slick-prev:before{content: ;}
.slick-next{right:0px;}
[dir='rtl'] .slick-next{right: 0;left: auto;}
.slick-next:before{content: ;}
[dir='rtl'] .slick-next:before{content:;}





/*アニメーション
---------------------------------------------------------*/

.animate_item{
	position: absolute;
	top: 0;
	left: 0;
	z-index:996;
	opacity:0;
}
.animate_item.fadeIn{
	-webkit-animation-duration: 2.4s;
	animation-duration: 2.4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	z-index:997;
}
.animate_item.fadeOut{
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
	z-index:996;
}
@-webkit-keyframes fadeIn{
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes fadeIn{
	from{opacity: 0;}
	to{opacity: 1;}
}
@-webkit-keyframes fadeOut{
	from{opacity: 1;}
	to{opacity: 0;}
}
@keyframes fadeOut{
	from{opacity: 1;}
	to{opacity: 0;}
}


/*animation*/
.move2{transition: 0.8s; opacity: 0; transform: translate(0,60px); -webkit-transform: translate(0,60px); }
.move2on{opacity: 1.0; transform: translate(0,0); -webkit-transform: translate(0,0);}

.anime1 {animation-duration: 1s;animation-name: slidein;}

@keyframes fadein {
from {opacity:0;}
to {}
}