@charset "euc-jp";
/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  top page - mv
/*  02.  top page - bnr
/*  03.  top page - rank
/*  04.  top page - rank
/*  05.  top page - recommend
/*  06.  top page - history
/*  07.  top page - category
/*  08.  top page - news
--------------------------------
------------------------------*/

/*  01.  top page - mv
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  mv  */
#top-page_mv {border-bottom: 1px solid #DDD;}
#top-page_mv-body {float: left; width: 100%; height: auto; padding: 20px 20px 40px 20px; box-sizing: border-box;}
#top-page_mv-body img {width: 100%; height: auto; vertical-align: top;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  mv  */
#top-page_mv {float: left; width: 100%; height: auto; padding: 10px 10px 35px 10px; border-bottom: 1px solid #DDD; box-sizing: border-box;}
#top-page_mv img {width: 100%; height: auto; vertical-align: top;}
}

.bx-wrapper {margin: 0!important;}
.bx-viewport {left: 0!important; background-color: rgba(0,0,0,0); box-shadow: 0px 0px 0px #FFF !important; border: 0px!important;}
.bx-wrapper .bx-controls {position: absolute; width: 100%; height: auto; left: 0; bottom: -20px;}
.bx-wrapper .bx-pager {padding: 0!important; bottom: 0!important;}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {width: 20px; height: 2px; margin-left: 5px; margin-right: 5px;}
.bx-wrapper .bx-pager.bx-default-pager a {width: 100% !important; height: 2px !important;}

/*  02.  top page - bnr
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  bnr  */
#top-page_bnr-body {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
#top-page_bnr-body ul {float: left; width: 100%; height: auto;}
#top-page_bnr-body ul {display: flex; flex-wrap: wrap;}
#top-page_bnr-body ul li {width: calc(100% / 3 - 20px); margin: 10px;}
#top-page_bnr-body ul li:hover {opacity: 0.7;}
#top-page_bnr-body ul li img {width: 100%; height: auto; vertical-align: top;}
#top-page_bnr-body ul li .detail {float: left; width: 100%; height: auto; margin-top: 5px;}
#top-page_bnr-body ul li .detail p {line-height: 20px; font-size: 12px; font-weight: bold; color: #000;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  bnr  */
#top-page_bnr-body {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
#top-page_bnr-body ul {float: left; width: 100%; height: auto;}
#top-page_bnr-body ul li {float: left; width: 100%; height: auto; margin-bottom: 10px;}
#top-page_bnr-body ul li:last-of-type {margin-bottom: 0px;}
#top-page_bnr-body ul li img {width: 100%; height: auto; vertical-align: top;}
#top-page_bnr-body ul li .detail {float: left; width: 100%; height: auto; margin-top: 10px;}
#top-page_bnr-body ul li .detail p {line-height: 20px; font-size: 12px; font-weight: bold; color: #000;}
}

/*  03.  top page - new
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  new  */
#top-page_new {padding-top: 40px; padding-bottom: 20px; background-color: #F0F0EF;}
#top-page_new-body {float: left; width: 100%; height: auto;}
#top-page_new-body .content_title {margin-bottom: 20px;}
#top-page_new-body ul {display: block;}
#top-page_new-body ul li {float: left; height: auto;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  new  */
#top-page_new {padding-top: 20px; padding-bottom: 10px; background-color: #F0F0EF; overflow: hidden;}
#top-page_new-body {float: left; width: 100%; height: auto;}
#top-page_new-body .content_title {margin-bottom: 10px;}
#top-page_new-body ul {display: block;}
#top-page_new-body ul li {float: left; height: auto;}
}

/*  04.  top page - rank
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  rank  */
#top-page_rank {padding-top: 40px; padding-bottom: 20px; border-bottom: 1px solid #DDD; background-color: #FFF;}
#top-page_rank-body {float: left; width: 100%; height: auto;}
#top-page_rank-body .content_title {margin-bottom: 20px;}
#top-page_rank-body ul {display: block;}
#top-page_rank-body ul li {float: left; height: auto;}

/*  top page  *//*  rank  *//*  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: 30px; height: 30px; line-height: 30px; top: 5px; left: 5px; font-size: 14px; font-weight: normal; text-align: center; color: #777; background-color: #FFF; border: 1px solid #DDD; border-radius: 50%; z-index: 4;}
#top-page_rank .item-list ul li:nth-of-type(1)::before {color: #DBB854; border: 1px solid #DBB854;}
#top-page_rank .item-list ul li:nth-of-type(2)::before {color: #BBBBBB; border: 1px solid #BBBBBB;}
#top-page_rank .item-list ul li:nth-of-type(3)::before {color: #9A6E01; border: 1px solid #9A6E01;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  rank  */
#top-page_rank {padding-top: 20px; padding-bottom: 10px; background-color: #FFF; border-bottom: 1px solid #DDD; overflow: hidden;}
#top-page_rank-body {float: left; width: 100%; height: auto;}
#top-page_rank-body .content_title {margin-bottom: 10px;}
#top-page_rank-body ul {display: block;}
#top-page_rank-body ul li {float: left; height: auto;}

/*  top page  *//*  rank  *//*  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: 30px; height: 30px; line-height: 30px; top: 5px; left: 5px; font-size: 14px; font-weight: normal; text-align: center; color: #777; background-color: #FFF; border: 1px solid #DDD; border-radius: 50%; z-index: 4;}
#top-page_rank .item-list ul li:nth-of-type(1)::before {color: #DBB854; border: 1px solid #DBB854;}
#top-page_rank .item-list ul li:nth-of-type(2)::before {color: #BBBBBB; border: 1px solid #BBBBBB;}
#top-page_rank .item-list ul li:nth-of-type(3)::before {color: #9A6E01; border: 1px solid #9A6E01;}
}

/*  05.  top page - recommend
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  recommend  */
#top-page_recommend {padding-top: 40px; padding-bottom: 20px;}
#top-page_recommend-body {float: left; width: 100%; height: auto;}
#top-page_recommend-body .content_title {margin-bottom: 20px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  recommend  */
#top-page_recommend {padding-top: 20px; padding-bottom: 10px;}
#top-page_recommend-body {float: left; width: 100%; height: auto;}
#top-page_recommend-body .content_title {margin-bottom: 10px;}
}

/*  06.  top page - history
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  recommend  */
#top-page_history {padding-top: 40px; padding-bottom: 20px; border-top: 1px solid #DDD;}
#top-page_history-body {float: left; width: 100%; height: auto;}
#top-page_history-body .content_title {margin-bottom: 20px;}
#top-page_history-body ul li {width: calc(100% / 8 - 20px); padding-bottom: 0px;}
#top-page_history-body ul li .image {border-radius: 10px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  recommend  */
#top-page_history {padding-top: 20px; padding-bottom: 10px; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD;}
#top-page_history-body {float: left; width: 100%; height: auto;}
#top-page_history-body .content_title {margin-bottom: 10px;}
#top-page_history-body ul li {width: calc(100% / 4 - 10px); padding-bottom: 0px;}
#top-page_history-body ul li .image {border-radius: 5px;}
}

/*  07.  top page - category
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  category  */
#top-page_cat {padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #DDD; background: repeating-linear-gradient(-45deg,#EEE 0px,#EEE 2px,#FFF 2px,#FFF 4px);}
#top-page_cat-body {float: left; width: 100%; height: auto;}
#top-page_cat-body ul {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
#top-page_cat-body ul {display: flex; flex-wrap: wrap; justify-content: center;}
#top-page_cat-body ul li {width: calc(100% / 4 - 20px); margin: 10px; background-color: #FFF; border-radius: 10px; border: 1px solid #DDD; box-sizing: border-box; overflow: hidden;}
#top-page_cat-body ul li:hover {box-shadow: 0px 0px 10px #AAA;}
#top-page_cat-body ul li .image {float: left; width: 100%; height: auto; padding-top: 50%; background-size: cover; background-position: center; box-sizing: border-box;}
#top-page_cat-body ul li .title {float: left; width: 100%; height: auto; padding: 5px; box-sizing: border-box;}
#top-page_cat-body ul li .title p.title {line-height: 20px; font-size: 14px; font-weight: normal; text-align: center; color: #333;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  category  */
#top-page_cat {padding-top: 20px; background: repeating-linear-gradient(-45deg,#EEE 0px,#EEE 2px,#FFF 2px,#FFF 4px);}
#top-page_cat-body {float: left; width: 100%; height: auto; margin-top: 20px;}
#top-page_cat-body ul {float: left; width: 100%; height: auto; padding: 1px; box-sizing: border-box;}
#top-page_cat-body ul {display: flex; flex-wrap: wrap;}
#top-page_cat-body ul li {width: calc(100% / 3 - 2px); margin: 1px; background-color: #FFF; box-sizing: border-box; overflow: hidden;}
#top-page_cat-body ul li:hover {box-shadow: 0px 0px 10px #AAA;}
#top-page_cat-body ul li .image {float: left; width: 100%; height: auto; padding-top: 50%; background-size: cover; background-position: center; box-sizing: border-box;}
#top-page_cat-body ul li .title {float: left; width: 100%; height: auto; padding: 5px; box-sizing: border-box;}
#top-page_cat-body ul li .title p.title {line-height: 15px; font-size: 10px; font-weight: bold; text-align: center; color: #333;}
}

/*  08.  top page - news
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  news  */
#top-page_news {padding-top: 40px; padding-bottom: 40px; background-color: #EEE;}
#top-page_news .content {width: 800px;}
#top-page_news .content_title {margin-bottom: 20px;}
#top-page_news #top-page_news-body {float: left; width: 100%; height: auto;}
#top-page_news #top-page_news-body dl {float: left; width: 100%; height: auto; padding: 20px; background-color: #FFF; box-sizing: border-box;}
#top-page_news #top-page_news-body dl {display: flex; flex-wrap: nowrap;}
#top-page_news #top-page_news-body dl dt {width: 160px; line-height: 30px; font-size: 14px; letter-spacing: 1px; color: #898580;}
#top-page_news #top-page_news-body dl dd {width: calc(100% - 160px); line-height: 30px; font-size: 14px; letter-spacing: 1px; color: #898580;}
#top-page_news #top-page_news-body dl dd a {display: inline; color: #574A3E;}
#top-page_news #top-page_news-body dl dd a:hover {text-decoration: underline;}
#top-page_news #top-page_news-body dl dd p.title {line-height: 30px; font-size: 14px; font-weight: bold;}
#top-page_news #top-page_news-body dl dd p.text {line-height: 20px; margin-top: 5px; font-size: 12px; font-weight: normal;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  news  */
#top-page_news {padding: 20px; background-color: #EEE; box-sizing: border-box;}
#top-page_news .content_title {margin-bottom: 20px;}
#top-page_news #top-page_news-body {float: left; width: 100%; height: auto;}
#top-page_news #top-page_news-body dl {float: left; width: 100%; height: auto; padding: 10px; background-color: #FFF; box-sizing: border-box;}
#top-page_news #top-page_news-body dl dt {float: left; width: 100%; height: auto; line-height: 20px; font-size: 12px; letter-spacing: 1px; color: #898580;}
#top-page_news #top-page_news-body dl dd {float: left; width: 100%; height: auto;  line-height: 20px; margin-top: 5px; font-size: 12px; letter-spacing: 1px; color: #898580;}
#top-page_news #top-page_news-body dl dd a {display: inline; color: #574A3E;}
#top-page_news #top-page_news-body dl dd p.title {line-height: 20px; font-size: 12px; font-weight: bold;}
#top-page_news #top-page_news-body dl dd p.text {line-height: 15px; margin-top: 5px; font-size: 12px; font-weight: normal;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
#top-page_bnr-body ul li,
#top-page_cat-body ul li {transition: all 0.3s;}