@charset "utf-8";
/* CSS Document */

#recommenditems {width: 100%;margin: 0;padding: 0;overflow: auto;background: #fff;box-sizing: border-box;}
#recommenditems section {display: block;font-size: 3.5vw;margin:0 2%;padding:2% 4%;letter-spacing: 2px;line-height: 1.0; color: #FFF;background: #000;border-radius: 3px;box-sizing: border-box;}
#recommenditems section.choutitle {font-size: 4vw;margin:0 0 2% 0;padding:4% 0;color: #F00;background: #FF0;text-align: center;border-radius: 0;}
#recommenditems section.picktitle {font-size: 4vw;margin:0 0 2% 0;padding:4% 0;color: #F00;background: #F1F1F1;text-align: center;border-radius: 0;}

#recommenditems .genretitle {font-size: 3vw;background: #FFF;color:#222;width: 60%; margin:5% 20%;line-height: 2.4em; text-align: center;border-radius: 60px;box-sizing: border-box;}
/*#recommenditems .genretitle > span {position: relative;top: -55px;display: block;}*/

#recommenditems img {width: 100%;}

/**************/

#recommenditems .recommend {width: 100%; margin: 10px 0 0 0;padding:0 0 10% 0;text-align: center;box-sizing: border-box;}
#recommenditems .recommend ul {margin: 0 auto;padding: 0;width: 100%;font-size: 0;overflow-x: auto;white-space: nowrap;overflow-scrolling: touch;-webkit-overflow-scrolling: touch;box-sizing: border-box;}
#recommenditems .recommend ul li {display: inline-block;width: 40%;margin: 2% 0 2% 2%;background: #FFF;border-radius:3px;overflow: hidden;z-index: 1;vertical-align: top;box-sizing: border-box;}
#recommenditems .recommend ul li:last-child {margin: 2%;}
#recommenditems .recommend ul li a {display: block; text-decoration: none;line-height: 1.0;}
#recommenditems .recommend ul li a img {width: 100%;}

#recommenditems .recommend li p {line-height: 1.0;box-sizing: border-box;}
#recommenditems .recommend li p.label {width: 84%;margin:2% 8%;line-height: 1.6em;letter-spacing: 1px;text-align:center;background: #F00;color: #FF0; font-size:2vw;border-radius:18px;}
#recommenditems .recommend li p.name {margin:2% 2%; color: #000;font-size: 2.5vw;text-align: left;}
#recommenditems .recommend li p.name span {display: block; font-size: 3vw; font-weight: 600;color: #000;font-family: 'Roboto', sans-serif;}
#recommenditems .recommend li p.brand {display:block;width:100%;margin:2% 0;padding: 3% 0;text-align: center;font-size: 2.5vw;background: #000;color: #FFF;border:solid 1px #000;}
#recommenditems .recommend li p.add2 {display: inline-block;width:36%;margin:2% 1%;padding: 2% 0;text-align: center;font-size: 2vw;background: #000;color: #FFF;border:solid 1px #000;}
#recommenditems .recommend li p.sale {display: block;color: #cc0000;font-size: 4vw;font-family: 'Oswald', sans-serif;margin-bottom: 3%;text-align: right;text-decoration-line: none;}
#recommenditems .recommend li p.price {display: block;color: #000;font-size: 4vw;font-family: 'Oswald', sans-serif;margin-bottom: 3%;text-align: right;text-decoration-line: none;}
#recommenditems .recommend li p.yen {display: inline-block;font-size: 3vw;color: #000;text-align: center;}
#recommenditems .recommend li p.yen span {display: block; font-size: 1vw;color: #000;}
#recommenditems .recommend li p.cou {width: 94%;margin:0 3% 3% 3%; text-align: right;padding: 2%;background-color: #F00;color: #FFF;font-size: 2vw;}
#recommenditems .recommend li p.cou span {color: #FFF;font-size: 6vw;font-family: 'Oswald', sans-serif;}
#recommenditems .recommend li p.icon {background-image: url("../images/coupon_icon.png");background-position: top left;background-repeat:no-repeat;background-size:contain;}


/*******************************************************************************/

@media only screen and (min-width: 1000px) {

#recommenditems {width: 100%;margin:0;padding:0;overflow: auto;background: inherit;}
#recommenditems section {display:block;font-size: 32px;width: 1200px; margin:80px auto 40px auto;padding:0 0 20px 0;text-align: center;color: #000;background:none;border-bottom: solid 2px #000;}
#recommenditems section.choutitle {font-size: 42px;margin: 20px auto 0 auto; padding:20px 0;color: #F00;background: #FF0;border: none;text-align: center;border-radius: 10px 10px 0 0;}
#recommenditems section.picktitle {font-size: 42px;margin: 60px auto 0 auto; padding:20px 0;color: #F00;background:inherit;border: none;}

#recommenditems .genretitle {font-size: 24px;background: #fff;color:#222;width: 50%; margin:80px 25% 40px 25%;}


/**************/



#recommenditems .recommend {width: 1000px; margin: 0 auto;padding:0 0 100px 0;text-align: left;}
#recommenditems .recommend ul {overflow-x: inherit;white-space:normal;}
#recommenditems .recommend ul li {width: 22%;margin: 0 4% 4px 0;border: solid 1px #999;background: #FFF;text-align: center;}
#recommenditems .recommend ul li:nth-child(4n) {margin:  0 0 12px 0;;}
#recommenditems .recommend ul li:last-child {margin:  0 0 12px 0;;}
#recommenditems .recommend ul li a {padding: 5px 5px 10px 5px; text-decoration: none;}

#recommenditems .recommend li p.label {font-size:12px;}
#recommenditems .recommend li p.name {font-size: 12px;}
#recommenditems .recommend li p.name span {font-size: 16px;}
#recommenditems .recommend li p.brand {font-size: 12px;background: #000;color: #FFF;}
#recommenditems .recommend li p.add2 {font-size: 12px;}
#recommenditems .recommend li p.sale {font-size: 24px;}
#recommenditems .recommend li p.price {font-size: 24px;}
#recommenditems .recommend li p.yen {font-size: 16px;}
#recommenditems .recommend li p.yen span {font-size: 12px;}
#recommenditems .recommend li p.cou {font-size: 16px;}
#recommenditems .recommend li p.cou span {font-size:34px;}





}