@charset "euc-jp";
/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  top page - mv
/*  02.  top page - ranking
/*  03.  top page - group
/*  04.  top page - recommend
/*  05.  top page - pick up
/*  06.  top page - bg
--------------------------------
------------------------------*/

/*  01.  top page - mv
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  mv  */
#mv {float: left; width: 100%; height: auto;}
#mv_body {float: left; width: 100%; height: auto;}
#mv_body img {width: 100%; height: auto; vertical-align: top;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  mv  */
#mv {float: left; width: 100%; height: auto; overflow: hidden;}
#mv_body {float: left; width: 150%; height: auto; margin-left: -25%;}
#mv_body img {width: 100%; height: auto; vertical-align: top;}
}

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

/*  02.  top page - ranking
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  ranking  */
#top-page_ranking {padding: 80px 80px 40px 80px; box-sizing: border-box; overflow: hidden;}
#top-page_ranking-body {float: left; width: 100%; height: auto; margin-top: 80px;}
#top-page_ranking-body .item-list ul {display: block;}
#top-page_ranking-body .item-list ul::before,
#top-page_ranking-body .item-list ul::after {display: none;}
#top-page_ranking-body .item-list ul li {position: relative; float: left; width: calc(100% / 3 - 80px); height: auto; margin: 0px 40px 0px 40px;}

.flickity-prev-next-button {top: 50%; width: 40px; height: 40px; transform: translateY(-50%)scale(1);}
.flickity-prev-next-button:hover {transform: translateY(-50%)scale(1.2);}
.flickity-prev-next-button.previous {left: -20px;}
.flickity-prev-next-button.previous::after {position: absolute; content: ""; width: 40px; height: 1px; top: 50%; left: -20px; background-color: #777;}
.flickity-prev-next-button.next {right: -20px;}
.flickity-prev-next-button.next::after {position: absolute; content: ""; width: 40px; height: 1px; top: 50%; right: -20px; background-color: #777;}
.flickity-prev-next-button .flickity-button-icon {display: none;}
.flickity-page-dots {display: none;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  ranking  */
#top-page_ranking {padding: 40px 20px 20px 20px; box-sizing: border-box; overflow: hidden;}
#top-page_ranking-body {float: left; width: 100%; height: auto; margin-top: 20px;}
#top-page_ranking-body .item-list ul {display: block;}
#top-page_ranking-body .item-list ul::before,
#top-page_ranking-body .item-list ul::after {display: none;}
#top-page_ranking-body .item-list ul li {position: relative; float: left; width: calc(100% / 2 - 20px); height: auto; margin: 0px 10px 0px 10px;}

.flickity-prev-next-button {top: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translateY(-50%);}
.flickity-prev-next-button.previous {left: -10px;}
.flickity-prev-next-button.previous::after {position: absolute; content: ""; width: 15px; height: 1px; top: 50%; left: -10px; background-color: #777;}
.flickity-prev-next-button.next {right: -10px;}
.flickity-prev-next-button.next::after {position: absolute; content: ""; width: 15px; height: 1px; top: 50%; right: -10px; background-color: #777;}
.flickity-prev-next-button .flickity-button-icon {display: none;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
.flickity-prev-next-button {transition: all 0.4s;}
.flickity-page-dots .dot,
.flickity-page-dots .dot::before {transition: all 0.4s;}

.flickity-enabled {position: relative;}
.flickity-enabled:focus {outline: none;}
.flickity-button {position: absolute; background-color: #FFF; border: 1px solid #777; border-radius: 50%; outline: none; z-index: 333;}
.flickity-button:hover {cursor: pointer;}

/*  03.  top page - group
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  group  */
#top-page_group {padding: 80px 80px 40px 80px; background-color: #EEE; box-sizing: border-box;}
#top-page_group ul {float: left; width: 100%; height: auto; margin-top: 80px;}
#top-page_group ul {display: flex; flex-wrap: wrap; justify-content: space-between}
#top-page_group ul::after {display: block; content: ""; width: calc(100% / 3 - 20px);}
#top-page_group ul li {width: calc(100% / 3 - 20px); margin-bottom: 40px;}
#top-page_group ul li a {width: 100%; height: 100%;}
#top-page_group ul li .image {width: 100%; height: auto; padding-top: 66.6%; background-size: 100%; background-position: center; background-repeat: no-repeat;}
#top-page_group ul li:hover .image {background-size: 110%;}
#top-page_group ul li p.title {line-height: 30px; margin-top: 10px; font-size: 14px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #000;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  group  */
#top-page_group {padding: 40px 20px 20px 20px; background-color: #EEE; box-sizing: border-box;}
#top-page_group ul {float: left; width: 100%; height: auto;}
#top-page_group ul li {float: left; width: 100%; height: auto; margin-top: 20px;}
#top-page_group ul li a {width: 100%; height: 100%;}
#top-page_group ul li .image {width: 100%; height: auto; padding-top: 66.6%; background-size: 100%; background-position: center; background-repeat: no-repeat;}
#top-page_group ul li p.title {line-height: 20px; margin-top: 10px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #000;}
}
     
/*  04.  top page - recommend
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  recommend  */
#top-page_recommend {padding: 80px 80px 0px 80px; box-sizing: border-box;}
#top-page_recommend-body {float: left; width: 100%; height: auto; margin-top: 80px; margin-bottom: 40px;}
}

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

/*  05.  top page - pick up
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  pick up  */
#top-page_pickup {padding: 80px; box-sizing: border-box;}
#top-page_pickup-body {float: left; width: 100%; height: auto;}
#top-page_pickup-body .block {float: left; width: 100%; height: auto; margin-top: 40px;}
#top-page_pickup-body .block {display: flex; flex-wrap: nowrap;}
#top-page_pickup-body .block .cell {padding: 40px; box-sizing: border-box;}
#top-page_pickup-body .block:nth-of-type(2n) .cell:first-of-type {width: 40%; order: 2;}
#top-page_pickup-body .block:nth-of-type(2n) .cell:last-of-type {width: 60%; order: 1;}
#top-page_pickup-body .block:nth-of-type(2n+1) .cell:first-of-type {width: 40%; order: 1;}
#top-page_pickup-body .block:nth-of-type(2n+1) .cell:last-of-type {width: 60%; order: 2;}
#top-page_pickup-body .block .cell .thumbnail {float: left; width: 100%; height: 100%; background-size: cover; background-position: center;}
#top-page_pickup-body .block .cell p.title {line-height: 40px; margin-top: 80px; font-size: 30px; font-weight: 200; letter-spacing: 4px;}
#top-page_pickup-body .block .cell p.text {line-height: 30px; margin-top: 40px; font-size: 14px; font-weight: normal; letter-spacing: 2px;}
#top-page_pickup-body .block .cell .list {float: left; width: 100%; height: auto; margin-top: 40px;}
#top-page_pickup-body .block .cell .list ul {float: left; width: 100%; height: auto;}
#top-page_pickup-body .block .cell .list ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
#top-page_pickup-body .block .cell .list ul li {width: calc(100% / 3 - 20px); margin-top: 40px; transform: translateY(0px);}
#top-page_pickup-body .block .cell .list ul li:hover {transform: translateY(-20px);}
#top-page_pickup-body .block .cell .list ul li a {width: 100%; height: 100%;}
#top-page_pickup-body .block .cell .list ul li .image {width: 100%; height: auto; padding-top: 150%; background-size: 100%; background-position: center; background-repeat: no-repeat;}
#top-page_pickup-body .block .cell .list ul li p.name {line-height: 20px; margin-top: 10px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #777;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  pick up  */
#top-page_pickup {padding: 40px 20px 40px 20px; box-sizing: border-box;}
#top-page_pickup-body {float: left; width: 100%; height: auto;}
#top-page_pickup-body .block {float: left; width: 100%; height: auto; margin-top: 40px;}
#top-page_pickup-body .block .cell {float: left; width: 100%; height: auto;}
#top-page_pickup-body .block .cell .thumbnail {float: left; width: 100%; height: auto; padding-top: 66.6%; background-size: cover; background-position: center;}
#top-page_pickup-body .block .cell p.title {line-height: 30px; margin-top: 40px; font-size: 20px; font-weight: 200; letter-spacing: 4px;}
#top-page_pickup-body .block .cell p.text {line-height: 30px; margin-top: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px;}
#top-page_pickup-body .block .cell .list {float: left; width: 100%; height: auto;}
#top-page_pickup-body .block .cell .list ul {float: left; width: 100%; height: auto;}
#top-page_pickup-body .block .cell .list ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
#top-page_pickup-body .block .cell .list ul li {width: calc(100% / 3 - 5px); margin-top: 20px; transform: translateY(0px);}
#top-page_pickup-body .block .cell .list ul li a {width: 100%; height: 100%;}
#top-page_pickup-body .block .cell .list ul li .image {width: 100%; height: auto; padding-top: 150%; background-size: 100%; background-position: center; background-repeat: no-repeat;}
#top-page_pickup-body .block .cell .list ul li p.name {line-height: 20px; margin-top: 10px; font-size: 10px; font-weight: normal; text-align: center; letter-spacing: 1px; color: #777;}
}

/*  06.  top page - bg
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  bg  */
.top-page_bg {float: left; width: 100%; height: 400px; background-size: cover; background-position: center; background-attachment: fixed;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  bg  */
.top-page_bg {float: left; width: 100%; height: 200px; background-size: cover; background-position: center;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
#top-page_group ul li .image {transition: all 1.4s;}
#top-page_pickup-body .block .cell .list ul li {transition: all 1.4s;}