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

WECK分類
PC用

///////////////////////////////w
*/

.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}

/*
Weckctg1　WECKとは？
--------------------------------------------------------------*/
#Weckctg1{background:#e8e8e8; margin:0 25px}
#Weckctg1 h2{background:#f16f4c; margin-bottom:5px; text-align:center}

#about0{padding-top:240px; margin-bottom:30px}
#about0 div{background-color:rgba( 30, 30, 30, 0.55 );color:#fff; padding:40px 30px 30px; line-height:0}
#about0 img{float:left; padding:0 30px 30px 0}
#about0 h3{font-size:26px; font-weight:bold; padding-bottom:20px;}
#about0 h3 br{display:none}

#about1{padding:0 30px 0 490px; margin-bottom:30px}
#about2{background-position:right; padding:0 490px 0 80px;; margin-bottom:60px;  text-align:right}

#about1 h3, #about2 h3{margin-bottom:5px;}
#about3{padding:0 20px 30px 50px; overflow:hidden}
#about3 h3{display:inline-block; float:left}
#about3 p{ float:left; margin-left:30px}
#about3 ol{ float:left; margin-left:30px; overflow:hidden;}
#about3 ol li{float:left; width:160px; margin-right:20px;}



/*
Weckctg2 商品ラインナップ
--------------------------------------------------------------*/
#Weckctg2{ margin:150px 25px 0}
#Weckctg2 h2{background:#f16f4c; margin-bottom:5px; text-align:center}
#Weckctg2 ul#liMenu{overflow:hidden; margin:30px 15px 10px}
#Weckctg2 ul#liMenu li{ float:left; margin:6px 6px}

#Weckctg2 #pickup{background:#e8e8e8; text-align:center; padding-bottom:20px}
#Weckctg2 #pickup h3{padding:20px 0 10px}
#Weckctg2 #pickup div{margin:0 20px; border:5px solid #f16f4c; background:#fff; text-align:left}
#Weckctg2 #pickup h4{margin:40px 20px 0px 40px;}
#Weckctg2 #pickup ul{margin:0 20px 30px 40px; overflow:hidden}
#Weckctg2 #pickup ul li{float:left; margin:0 11px 11px}
#Weckctg2 #pickup .puitem{margin:0 50px 20px}


.weckitem{margin:60px 0!important; border:5px solid #f16f4c; background:#fff; text-align:left; padding:45px 45px;}
.weckitem h3{background:#ff8b6c; border-radius:10px; text-align:center;}
.weckitem h3{font-size:32px; font-weight:bold; }
.weckitem ul.itemCnt{padding:10px 0}

/*CANITSER 瓶*/
dl.itemCnt{overflow:hidden; display:block; padding:5px 0px 5px 0px; font-size:0; text-align:center}
dl.itemCnt dd{ display:inline-block; padding:0; margin:0}
dl.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}

#Weckctg2 dt{ text-align:center; margin:100px 0 0}
#Weckctg2 dd small{height:140px; display:table-cell; vertical-align:bottom}
#Weckctg2 dd small img{}
#Weckctg2 dd div.imgbox{height:240px; display:table-cell; vertical-align:bottom}
#Weckctg2 dd div.imgboxs{height:160px; display:table-cell; vertical-align:bottom}
#Weckctg2 dd div.imgboxss{height:100px; display:table-cell; vertical-align:bottom}

/*OPTION　蓋*/
ul.opBox{margin-left:-40px}
ul.opBox li{display:inline-block; width:240px; text-align:center!important; margin:0 0 5px 37px;  font-size:12px; vertical-align:top; position:relative}
ul.opBox li img{margin:0 20px}
ul.opBox li span{font-size:16px; font-weight:bold; color:#ff8b6c}
ul.opBox li ul.Size{overflow:hidden; margin-top:10px}
ul.opBox li ul.Size li{width:115px!important; float:left; border-radius:3px; margin: 0 5px 5px 0; font-size:14px; background:#eee; color:#fff; font-weight:bold; padding:5px 0; text-align:left}
ul.opBox li ul.Size li a{color:#fff; display:block}
ul.opBox li ul.Size p.Price{display:inline-block; font-weight:normal; font-size:10px; padding-left:5px}
ul.opBox li ul.Size li.sizeXS{background:#ffb482}
ul.opBox li ul.Size li.sizeS{background:#ff9751}
ul.opBox li ul.Size li.sizeM{background:#ff8522}
ul.opBox li ul.Size li.sizeL{background:#ea7211}
ul.opBox li ul.Size li.sizeXL{background:#db6200}


.item4col{margin-left:-5px}
.item4col li{width:195px; display:inline-block; margin-left:5px!important; padding:0!important; vertical-align:top; margin-bottom:20px!important; position:relative}
.item4col li .itemInfo{font-size:12px}

.weckitem h3 span{display:none}


.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 {}
}