@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: 5vw;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;overflow-scrolling: touch;-webkit-overflow-scrolling: touch;box-sizing: border-box;}
#recommenditems .recommend ul li {display: inline-block;width: 30%;margin: 2% 1% 2% 1%;background: #FFF;overflow: hidden;z-index: 1;vertical-align: top;box-sizing: border-box;border-radius: 20px;}
/*#recommenditems .recommend ul li:nth-child(3n) {margin: 0;}*/
#recommenditems .recommend ul li a {display: block; text-decoration: none;line-height: 1.0;position:relative;padding-bottom: 55%;}
#recommenditems .recommend ul li a img {width: 100%;}

#recommenditems .recommend li p {line-height: 1.4;box-sizing: border-box;}

#recommenditems .recommend li p.brand {display:block;width:100%;margin:0;padding: 20% 0;
text-align: center;font-size: 3vw;background: #000;color: #FFF;border:solid 1px #000;
position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);font-weight: 700;
}


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

@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;text-align: center;}
#recommenditems .recommend ul li {width: 14.6%;background: #FFF;text-align: center;}

/*#recommenditems .recommend ul li:nth-child(6n) {margin:  0 0 0 0;}
#recommenditems .recommend ul li:nth-child(3) {margin:  0 1% 0 0;}
#recommenditems .recommend ul li:last-child {margin:  0 0 0 0;}*/

#recommenditems .recommend ul li a {padding-bottom: 55%; text-decoration: none;}
#recommenditems .recommend li p.brand {font-size: 18px;background: #000;color: #FFF;border-radius: 20px;border: 0}


}