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

/*  01.  top page - mv
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  mv  */
#top-page_mv-wrap {background-image: url("https://signal-garments.com/image_ec/bg_top.jpg"); background-position: center; background-size: cover;}
#top-page_mv {display: flex; flex-wrap: nowrap; padding: 40px; box-sizing: border-box;}

/*  top page  *//*  mv  *//*  bnr  */
#top-page_bnr {width: calc(100% - 340px); margin-right: 40px;}
#top-page_bnr img {width: 100%; height: auto; vertical-align: top;}
     
/*  top page  *//*  mv  *//*  rank  */
#top-page_rank {width: calc(300px - 40px); margin-left: 40px;}
#top-page_rank .body {float: left; width: 100%; height: auto; margin-top: 0px;}
#top-page_rank ol {float: left; width: 100%; height: auto;}
#top-page_rank ul {float: left; width: 100%; height: auto;}
#top-page_rank ul li {position: relative; float: left; width: calc(100% - 20px); height: auto; margin: 20px 10px 0px 10px; box-sizing: border-box; overflow: hidden;}
#top-page_rank ul li:nth-of-type(2n) {margin-bottom: 0px;}
#top-page_rank ul li .image {float: left; width: 100%; height: auto; padding-top: 100%; background-size: cover; background-position: center;}
#top-page_rank ul li .detail {position: relative; float: left; width: 100%; height: auto; margin-top: 10px; padding-bottom: 30px;}
#top-page_rank ul li .detail p.name {line-height: 20px; font-size: 14px; font-weight: normal; letter-spacing: 2px; color: #000;}
#top-page_rank ul li .detail .box {position: absolute; width: 100%; height: auto; left: 0; bottom: 0;}
#top-page_rank ul li .detail .box p.price {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #333;}
#top-page_rank ul li .detail .box p.soldout {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #777;}
#top-page_rank ul li .detail .box p.sale {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #7D0305;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  mv  */
#top-page_mv-wrap {background-image: url("https://signal-garments.com/image_ec/image/bg_top.jpeg"); background-position: center; background-size: cover;}
#top-page_mv {display: flex; flex-wrap: wrap; padding: 0px; box-sizing: border-box;}

/*  top page  *//*  mv  *//*  bnr  */
#top-page_bnr {width: 100%; padding: 10px; box-sizing: border-box;}
#top-page_bnr img {width: 100%; height: auto; vertical-align: top;}
     
/*  top page  *//*  mv  *//*  rank  */
#top-page_rank {width: 100%; margin-top: 40px;}
#top-page_rank .body {float: left; width: 100%; height: auto; margin-top: 10px;}
#top-page_rank ol {float: left; width: 100%; height: auto;}
#top-page_rank ul {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
#top-page_rank ul li {position: relative; float: left; width: calc(50% - 10px); height: auto; margin: 10px 5px 10px 5px; box-sizing: border-box; overflow: hidden;}
#top-page_rank ul li .image {float: left; width: 100%; height: auto; padding-top: 100%; background-size: cover; background-position: center;}
#top-page_rank ul li .detail {position: relative; float: left; width: 100%; height: auto; margin-top: 10px; padding-bottom: 20px;}
#top-page_rank ul li .detail p.name {line-height: 15px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #000;}
#top-page_rank ul li .detail .box {position: absolute; width: 100%; height: auto; left: 0; bottom: 0;}
#top-page_rank ul li .detail .box p.price {line-height: 10px; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #333;}
#top-page_rank ul li .detail .box p.soldout {line-height: 10px; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #777;}
#top-page_rank ul li .detail .box p.sale {line-height: 10px; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #7D0305;}
}

.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: 4px; margin-left: 5px; margin-right: 5px;}
.bx-wrapper .bx-pager.bx-default-pager a {width: 100% !important; height: 4px !important;}

/*  02.  top page - new
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  new  */
#top-page_new {float: left; width: 100%; height: auto; padding: 40px 20px 40px 20px; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; box-sizing: border-box;}
#top-page_new .item-list_body {float: left; width: 100%; height: auto; margin-top: 20px;}
#top-page_new .item-list_body .item-list ul {display: block;}
#top-page_new .item-list_body .item-list ul li {float: left; width: calc(25% - 20px); height: auto;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  new  */
#top-page_new {float: left; width: 100%; height: auto; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD;}
#top-page_new .item-list_body {float: left; width: 100%; height: auto; margin-top: 10px; padding: 0px; box-sizing: border-box;}
#top-page_new .item-list_body .item-list ul {display: block;}
#top-page_new .item-list_body .item-list ul li {float: left; width: calc(50% - 10px); height: auto; margin: 0px 5px 0px 5px;}
}

/*  03.  top page - select
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  select  */
#top-page_select {padding: 40px 20px 40px 20px; background-color: #EEE; box-sizing: border-box;}
#top-page_select .brand-list_body {float: left; width: 100%; height: auto; margin-top: 20px; box-sizing: border-box;}
#top-page_select .brand-list {float: left; width: 100%; height: auto;}
#top-page_select .brand-list ul {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
#top-page_select .brand-list ul {display: flex; flex-wrap: wrap;}
#top-page_select .brand-list ul li {position: relative; width: calc(100% / 4 - 20px); height: auto; margin: 10px;}
#top-page_select .brand-list ul li .image {float: left; width: 100%; height: auto; padding-top: 75%; background-size: cover; background-position: center;}
#top-page_select .brand-list ul li .detail {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4);}
#top-page_select .brand-list ul li:hover .detail {background-color: rgba(0,0,0,0.2);}
#top-page_select .brand-list ul li .detail p {position: absolute; width: 100%; height: auto; line-height: 20px; top: 50%; left: 0; padding-left: 10px; padding-right: 10px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #FFF; box-sizing: border-box; transform: translateY(-50%);}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  select  */
#top-page_select {padding: 20px 0px 0px 0px; background-color: #EEE; box-sizing: border-box;}
#top-page_select .brand-list_body {float: left; width: 100%; height: auto; box-sizing: border-box;}
#top-page_select .brand-list {float: left; width: calc(100% - 20px); height: auto; margin: 0px 10px 0px 10px; padding: 10px 0px 10px 0px; box-sizing: border-box; overflow-x: scroll;}
#top-page_select .brand-list ul {float: left; width: 800px; height: auto;}
#top-page_select .brand-list ul {display: flex; flex-wrap: nowrap;}
#top-page_select .brand-list ul li {position: relative; width: 180px; height: auto; margin: 10px;}
#top-page_select .brand-list ul li .image {float: left; width: 100%; height: auto; padding-top: 75%; background-size: cover; background-position: center;}
#top-page_select .brand-list ul li .detail {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4);}
#top-page_select .brand-list ul li .detail p {position: absolute; width: 100%; height: auto; line-height: 15px; top: 50%; left: 0; padding-left: 10px; padding-right: 10px; font-size: 10px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #FFF; box-sizing: border-box; transform: translateY(-50%);}
}

/*  04.  top page - brand
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  top page  *//*  brand  */
#top-page_brand {padding: 40px 20px 40px 20px; background-color: #DDD; box-sizing: border-box;}
#top-page_brand .brand-list_body {float: left; width: 100%; height: auto; margin-top: 20px; box-sizing: border-box;}
#top-page_brand .brand-list {float: left; width: 100%; height: auto;}
#top-page_brand .brand-list ul {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
#top-page_brand .brand-list ul {display: flex; flex-wrap: wrap;}
#top-page_brand .brand-list ul li {position: relative; width: calc(100% / 4 - 20px); height: auto; margin: 10px;}
#top-page_brand .brand-list ul li:nth-of-type(-n+4) {display: none;}
#top-page_brand .brand-list ul li .image {float: left; width: 100%; height: auto; padding-top: 66.6%; margin-bottom: 10px; background-size: cover; background-position: center;}
#top-page_brand .brand-list ul li p {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 2px; text-align: center; color: #000;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  brand  */
#top-page_brand {padding: 20px 0px 0px 0px; background-color: #DDD; box-sizing: border-box;}
#top-page_brand .brand-list_body {float: left; width: 100%; height: auto; box-sizing: border-box;}
#top-page_brand .brand-list {float: left; width: calc(100% - 10px); height: auto; margin: 0px 5px 0px 5px; padding: 10px 0px 10px 0px; box-sizing: border-box; overflow-x: scroll;}
#top-page_brand .brand-list ul {float: left; width: auto; height: auto;}
#top-page_brand .brand-list ul {display: flex; flex-wrap: nowrap;}
#top-page_brand .brand-list ul li {position: relative; width: 180px; height: auto; margin: 5px;}
#top-page_brand .brand-list ul li:nth-of-type(-n+4) {display: none;}
#top-page_brand .brand-list ul li .image {float: left; width: 100%; height: auto; padding-top: 66.6%; background-size: cover; background-position: center;}
#top-page_brand .brand-list ul li p {line-height: 20px; font-size: 10px; font-weight: normal; text-align: center;  letter-spacing: 1px; color: #000;}
}

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

/*  sp  */
@media screen and (max-width: 979px) {
/*  top page  *//*  recommend  */
#top-page_recommend {float: left; width: 100%; height: auto; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD;}
#top-page_recommend .item-list_body {float: left; width: 100%; height: auto;}
}

/*  ex. animation
----------------------------*/
/*  animation  */
#top-page_select .brand-list ul li .detail,
#top-page_brand .brand-list ul li .detail {transition: all .2s;}