@charset "euc-jp";
/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  top page - mv
/*  02.  top page - new item
/*  03.  top page - ranking
/*  04.  top page - recommend
--------------------------------
------------------------------*/

/*  01.  top page - mv
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  mv  */
#mv_wrap {float: left; width: 100%; height: auto;}
#mv {width: 100%; max-width: 1400px; height: auto; margin: auto; padding: 40px; box-sizing: border-box;}
#mv img {width: 100%; height: auto;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  mv  */
#mv_wrap {float: left; width: 100%; height: auto;}
#mv {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
#mv img {width: 100%; height: auto;}
}

.bx-viewport {margin: 0; padding: 0; border: 0px!important; box-shadow: 0px 0px 0px #000!important;}

/*  02.  top page - new item
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  new  */
#top-page_new {padding-top: 40px; padding-bottom: 40px; background-color: #EFEFEF; box-sizing: border-box;}
#top-page_new .item-list {margin-top: 20px; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
#top-page_new .item-list ul {display: block;}
#top-page_new .item-list ul li {float: left; width: 25%; margin: 10px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  new  */
#top-page_new {padding: 20px 5px 20px 5px;  background-color: #EFEFEF; box-sizing: border-box; overflow: hidden;}
#top-page_new .item-list {margin-top: 20px;}
#top-page_new .item-list ul {display: block; padding-left: 5px; padding-right: 5px; box-sizing: border-box;}
#top-page_new .item-list ul li {float: left; width: 150px; margin: 5px;}
}

/*  03.  top page - ranking
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  ranking  */
#top-page_rank {padding-top: 40px; padding-bottom: 40px; background-color: #B7C8CB;}
#top-page_rank .item-list {margin-top: 20px; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
#top-page_rank .item-list ul {display: block;}
#top-page_rank .item-list ul li {float: left; width: 25%; margin: 10px;}

/*  top page  *//*  ranking  *//*  number  */
#top-page_rank .item-list ul {counter-reset: ranking-list;}
#top-page_rank .item-list ul li::before {content: counter(ranking-list, decimal); counter-increment: ranking-list; position: absolute; width: 26px; height: 26px; line-height: 30px; top: 5px; left: 5px; font-size: 16px; font-weight: bold; font-family: 'Hind', sans-serif; text-align: center; color: #FFF; background: #121A27; border: 2px solid #FFF; z-index: 4;}
#top-page_rank .item-list ul li:nth-of-type(1)::before {background: #DBB854;}
#top-page_rank .item-list ul li:nth-of-type(2)::before {background: #BBBBBB;}
#top-page_rank .item-list ul li:nth-of-type(3)::before {background: #9A6E01;}
#top-page_rank .item-list ul li::after {position: absolute; content: ""; width: 30px; height: 30px; top: 7px; left: 7px; background: #121A27; z-index: 3;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  ranking  */
#top-page_rank {padding: 20px 5px 20px 5px; background-color: #B7C8CB; box-sizing: border-box; overflow: hidden;}
#top-page_rank .item-list {margin-top: 20px;}
#top-page_rank .item-list ul {display: block; padding-left: 5px; padding-right: 5px; box-sizing: border-box;}
#top-page_rank .item-list ul li {float: left; width: 150px; margin: 5px;}

/*  top page  *//*  ranking  *//*  number  */
#top-page_rank .item-list ul {counter-reset: ranking-list;}
#top-page_rank .item-list ul li::before {content: counter(ranking-list, decimal); counter-increment: ranking-list; position: absolute; width: 24px; height: 24px; line-height: 25px; top: 2px; left: 2px; font-size: 14px; font-weight: bold; font-family: 'Hind', sans-serif; text-align: center; color: #FFF; background: #121A27; border: 1px solid #FFF; z-index: 4;}
#top-page_rank .item-list ul li:nth-of-type(1)::before {background: #DBB854;}
#top-page_rank .item-list ul li:nth-of-type(2)::before {background: #BBBBBB;}
#top-page_rank .item-list ul li:nth-of-type(3)::before {background: #9A6E01;}
#top-page_rank .item-list ul li::after {position: absolute; content: ""; width: 25px; height: 25px; top: 4px; left: 4px; background: #121A27; z-index: 3;}
}

/*  04.  top page - recommend
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  recommend  */
#top-page_recommend {padding-top: 20px; padding-bottom: 20px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  recommend  */
#top-page_recommend {padding-top: 0px; padding-bottom: 0px;}
}

/*  05.  top page - news
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  news  */
#top-page_news {padding: 40px; border-top: 1px solid #DDD; box-sizing: border-box;}
#top-page_news .content {width: 800px;}
#top-page_news .content_title {float: left; width: 200px; height: auto;}
#top-page_news .top-page_news {float: right; width: calc(100% - 300px); height: auto; line-height: 150%; font-size: 80%;}
#top-page_news .top-page_news p {float: left; width: 100%; height: auto; line-height: 24px; font-size: 12px; font-weight: normal;}
#top-page_news .top-page_news p a {display: inline-block; color: #FF6600;}
#top-page_news .top-page_news p a:hover {text-decoration: underline;}

#top-page_news .content_title h2,
#top-page_news .content_title p {text-align: left;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  news  */
#top-page_news {padding: 20px; border-top: 1px solid #DDD; box-sizing: border-box;}
#top-page_news .top-page_news {float: left; width: 100%; height: auto; line-height: 150%; margin-top: 20px; font-size: 70%;}

#top-page_news .top-page_news p {float: left; width: 100%; height: auto; line-height: 20px; font-size: 10px; font-weight: normal;}
#top-page_news .top-page_news p a {display: inline-block; text-decoration: underline; color: #FF6600;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
.top-page_concept-image,
.top-page_concept-detail,
.top-page_news ul li,
.top-page_info dl dd a {transition: all 0.4s;}