/* CSS Document */

/* shippingdate */


/* sale用右 */
div#sale-right1 {
width: 125px;
height: 200px;
background: url("../img/nohin.png") no-repeat left;
position: fixed;
top: 70px; 
right:0px;
z-index: 9999;
display: block;
}

div#sale-right1 a{
display: block;
width: 100%;
height: 100%;
}

div#sale-right1:hover{
	outline:none;
	display: block;
width: 200px;/* バナーが伸びた時の幅 */
/* 以下アニメーションの設定 */
-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}


div#sale-right2 {
width: 125px;
height: 100px;
background: url("../img/boss-right.png") no-repeat left;
position: fixed;
right:0px;
top: 290px; 
z-index: 9999;
}


#sale-right2 a {/* リンクするエリアをバナー全体に広げる設定 */
display: block;
width: 100%;
height: 100%;
}

#sale-right2:hover {/* カーソルが乗った時の動きを指定 */
width: 400px;/* バナーが伸びた時の幅 */
/* 以下アニメーションの設定 */
-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}

div#sale-right3 {
width: 125px;
height: 100px;
background: url("../img/soy_light.png") no-repeat left;
position: fixed;/* バナーを固定します */
right:0px;
top: 400px; 
z-index: 9999;
}
#sale-right3 a {/* リンクするエリアをバナー全体に広げる設定 */
display: block;
width: 100%;
height: 100%;
}
#sale-right3:hover {/* カーソルが乗った時の動きを指定 */
width: 400px;/* バナーが伸びた時の幅 */
/* 以下アニメーションの設定 */
-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}

div#sale-right4 {
width: 125px;
height: 100px;
background: url("../img/yebisu.png") no-repeat left;
position: fixed;
right:0px;
top: 510px; 
z-index: 9999;
}


#sale-right4 a {
display: block;
width: 100%;
height: 100%;
}
#sale-right4:hover {
width: 400px;

-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}

div#sale-right5 {
width: 125px;
height: 100px;
background: url("../img/200off.png") no-repeat left;
position: fixed;
right:0px;
top: 620px; 
z-index: 9999;
}
#sale-right5 a {
display: block;
width: 100%;
height: 100%;
}
#sale-right5:hover {
width: 400px;

-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}


/* sale用左 */

div#sale-left1 {
width: 125px;
height: 100px;
background: url("../img/monthsale.png") no-repeat right;
position: fixed;
left: 0;
top: 70px; 
z-index: 9999;
}

#sale-left1 a {/* リンクするエリアをバナー全体に広げる設定 */
display: block;
width: 100%;
height: 100%;
}

#sale-left1:hover {/* カーソルが乗った時の動きを指定 */
width: 400px;/* バナーが伸びた時の幅 */
/* 以下アニメーションの設定 */
-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}

div#sale-left2 {
width: 125px;
height: 100px;
background: url("../img/asort.png") no-repeat right;
position: fixed;/* バナーを固定します */
left: 0;/* 右から0pxの位置に指定 */
top: 180px; 
z-index: 9999;
}

div#sale-left2 a {/* リンクするエリアをバナー全体に広げる設定 */
display: block;
width: 100%;
height: 100%;
}

div#sale-left2:hover {/* カーソルが乗った時の動きを指定 */
width: 400px;/* バナーが伸びた時の幅 */
/* 以下アニメーションの設定 */
-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}

/*
div#sale-left3 {
width: 125px;
height: 100px;
background: url("../img/sekitoba.png") no-repeat right;
position: fixed;
left: 0;
top: 290px; 
z-index: 9999;
}
*/



div#sale-left3 {
width: 125px;
height: 100px;
background: url("../img/gift.png") no-repeat right;
position: fixed;
left: 0;
top: 290px; 
z-index: 9999;
}


#sale-left3 a {/* リンクするエリアをバナー全体に広げる設定 */
display: block;
width: 100%;
height: 100%;
}

#sale-left3:hover {/* カーソルが乗った時の動きを指定 */
width: 400px;/* バナーが伸びた時の幅 */
/* 以下アニメーションの設定 */
-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}

div#sale-left4 {
width: 125px;
height: 100px;
background: url("../img/pm2.png") no-repeat right;
position: fixed;/* バナーを固定します */
left: 0;/* 右から0pxの位置に指定 */
top: 400px; 
z-index: 9999;
}
#sale-left4 a {/* リンクするエリアをバナー全体に広げる設定 */
display: block;
width: 100%;
height: 100%;
}
#sale-left4:hover {/* カーソルが乗った時の動きを指定 */
width: 400px;/* バナーが伸びた時の幅 */
/* 以下アニメーションの設定 */
-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}

/*
div#sale-left5 {
width: 125px;
height: 100px;
background: url("../img/hsrtd.png") no-repeat right;
position: fixed;
left: 0;
top: 510px; 
z-index: 9999;
}
*/
/*
div#sale-left5 {
width: 125px;
height: 100px;
background: url("../img/kibun.png") no-repeat right;
position: fixed;
left: 0;
top: 510px; 
z-index: 9999;
}


#sale-left5 a {
display: block;
width: 100%;
height: 100%;
}
#sale-left5:hover {
width: 400px;

-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}
*/

div#sale-left6 {
width: 125px;
height: 100px;
background: url("../img/1020.png") no-repeat right;
position: fixed;
left: 0;
top: 620px; 
z-index: 9999;
}
#sale-left6 a {
display: block;
width: 100%;
height: 100%;
}
#sale-left6:hover {
width: 400px;

-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}