:root{
  --selected:#ffc052;
  --default:#ff7145;
  --sub:#fff9f1;
  --targerWidth:1160px;
}

/* icon */
.ly-top .c-slider_list-item[data-new="on"] .c-slider_list-item_upper::before{
  background-image: url(../../img/top/new.svg);
}

/* New */
.ly-top .sec-new{
  padding-top: min(calc((20 / var(--pc))*100vw),20px);
  margin-bottom: min(calc((8 / var(--pc))*100vw),8px);
}
@media all and (max-width:960px) {
  .ly-top .sec-new h2 img{
    height: 27px;
  }
  .ly-top .sec-new{
    margin: 0;
    padding: min(calc((10 / var(--sp))*100vw),10px) 0 min(calc((35 / var(--sp)) * 100vw),35px);
  }
  .ly-top .i-accent::before{
    top: -5px;
    right: -15px;
  }
  .ly-top .sec-new .c-slider_list_title{
    margin-top: 5px;
  }
  .ly-top .sec-new .swiper-slide{
    padding: 0 4px;
  }
}
@media all and (max-width:960px) and (min-width:640px) {
  .ly-top .sec-new h2 img{
    height: 35px;
  }
}

/* category */
.ly-top .sec-category{
  background: var(--sub);
  padding:min(calc((80 / 1366)*100vw),80px) 0;
}
.ly-top .sec-category_wrapper{
  max-width: 1180px;
  padding: 0 10px;
  width: 100%;
  margin: 40px auto 24px;
}
.ly-top .sec-category_list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 11px;
  grid-row-gap: 10px;
}
.ly-top .sec-category_list-link{
  transition: var(--transition);
}
.ly-top .sec-category_list-link:hover{
  opacity: 0.7;
}
.ly-top .sec-category_lead{
  text-align: right;
  margin-top: 24px;
}
.ly-top .sec-category_lead-link{
  position: relative;
  font-size: 16px;
  padding-right: 20px;
  font-weight: 500;
}
.ly-top .sec-category_lead-link::before{
  content: "";
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  bottom: -4px;
  left: 0;
  transition: var(--transition);
  opacity: 1;
}
.ly-top .sec-category_lead-link::after{
  content: "";
  width: 6px;
  height: 11px;
  background: #000;
  mask: url(../../img/common/icon/arrow.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/arrow.svg) no-repeat center center / contain;
  position: absolute;
  top: calc((100% - 11px) / 2);
  right: 2px;
  transform: scale(-1, 1);
}
.ly-top .sec-category_lead-link:hover::before{
  opacity: 0;
}
@media all and (max-width:960px) {
  .ly-top .sec-category{
    padding:min(calc((32 / var(--sp))*100vw),32px) 0;
  }
  .ly-top .sec-category_wrapper{
    padding: 0 13px;
    margin: 14px auto 20px;
  }
  .ly-top .sec-category h2 img{
    height: 26px;
  }
  .ly-top .sec-category .i-category::before{
    top: -16px;
    left: 32px;
  }
  .ly-top .sec-category_list{
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .ly-top .c-button_fav .c-button_fav_inner{
    height: 46px;
  }
  .ly-top .c-button_fav .c-button_fav_inner::before{
    top: calc((100% - 12px)/2);
  }
  .ly-top .sec-category_lead{
    margin-top: 14px;
  }
  .ly-top .sec-category_lead-link{
    font-size: 11px;
    padding-right: 10px;
  }
  .ly-top .sec-category_lead-link::before{
    height: 1px;
  }
  .ly-top .sec-category_lead-link::after{
    top: calc((100% - 7px) / 2);
    width: 4px;
    height: 7px;
    right: 0;
  }
}

@media all and (max-width:960px) and (min-width:640px) {
  .ly-top .sec-category h2 img{
    height: 35px;
  }
  .ly-top .sec-category_wrapper{
    padding-left:60px;
    padding-right:60px;
  }
}


/* ranking */
.ly-top .sec-ranking{
  background: #fff;
  padding: min(calc((58 / var(--pc))*100vw),58px) 0 min(calc((85 / var(--pc))*100vw),85px);
}
.ly-top .sec-ranking .i-crown::after{
  right: -52px;
  bottom: 0;
}
.ly-top .sec-ranking .swiper-button_wrapper{
  top: min(calc((27 / var(--pc))*100vw),27px);
}
.ly-top .c-rank_flag{
  background-color: var(--selected);
}
.ly-top .c-rank_flag::before{
  border-top: 8px solid var(--selected);
}
.ly-top .c-rank_flag::after{
  border-top: 8px solid var(--selected);
}
.ly-top .c-ranking h2{
padding-top: 28px;
}
.ly-top .c-ranking{
  background: none;
}
.ly-top .c-category_list-item_label{
  transition: var(--transition);
}

@media all and (max-width:960px) {
  .ly-top .c-ranking{
    margin-top: 0;
    padding: 0;
  }
  .ly-top .c-ranking h2{
    padding-top: 0;
  }
  .c-ranking .swiper h2 img{
    height: 50px;
  }
  .ly-top .c-ranking .i-crown::after{
    right: -28px;
    bottom: -19px;
  }
  .c-ranking .swiper-button_wrapper{
    top:  min(calc((8 / var(--pc))*100vw),8px);
  }
}
@media all and (max-width:960px) and (min-width:640px) {
  .c-ranking .swiper h2 img{
    height: 65px;
  }
  .ly-top .c-ranking .swiper{
    padding-left:60px;
padding-right:60px;
  }
}
/* search */

.ly-top .sec-search{
  background: var(--sub);
  padding: min(calc((60 / var(--pc))*100vw),60px) 0 min(calc((84 / var(--pc))*100vw),84px);
}
.ly-top .sec-search_category{
  margin-top: min(calc((38 / var(--pc))*100vw),38px);
}
.ly-top .c-card_list-item_category_list-item{
  color: #8a8a8a;
}
.ly-top .c-card_list-item_category_list-item::before{
  background: #8a8a8a;
}
.ly-top .c-category_list-item_label{
  border: 1px solid #000;
  background-color: #fff;
}
.ly-top .c-category_list-item_label::after{
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  right: 25px;
  top: 50%;
  border: 2px solid;
  border-color: #000 #000 transparent transparent;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
}
.ly-top .c-category_list-item_label::before{
  background-color: var(--default);
}
.ly-top .c-category_list-item_label:hover{
  color: #fff;
  background: var(--default);
  border-color: var(--default);
}
.ly-top .c-category_list-item_label:hover::before{
  background-color: #fff;
}
.ly-top .c-category_list-item_label:hover::after{
  border-color: #fff #fff transparent transparent;
}
.ly-top .c-category_list-item_check:checked + .c-category_list-item_label::after{
  width: 7px;
  height: 7px;
  left: unset;
  top: 50%;
  border-radius: 0;
  border-color: var(--default) var(--default) transparent transparent;
}
.ly-top .c-category_list-item_check:checked + .c-category_list-item_label{
  outline-color: var(--default);
  color: var(--default);
}
.ly-top .c-category_list-item_check:checked + .c-category_list-item_label::before{
  background-color: var(--default);
}

.ly-top .sec-search_fillter {
  margin-top: min(calc((40 / var(--pc))*100vw),40px);
}
.ly-top .sec-search_fillter .c-button-plus::before{
  right: 34px;
}
.ly-top .sec-search_fillter .c-button_inner{
  font-size: 16px;
  font-weight: 500;
}
.ly-top .sec-search_fillter .c-button_inner::after{
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 24px;
  background: var(--default);
  transform: translateY(-50%);
  mask: url(../../img/common/icon/loupe.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/loupe.svg) no-repeat center center / contain;
  z-index: 1;
}
.ly-top .sec-search_fillter .c-button_inner:hover{
  color: #fff;
  background: var(--default);
  border-color: var(--default);
}
.ly-top .c-button-plus:hover::before{
  color: #fff;
}
.ly-top .c-button-plus:hover::after{
  background-color: #fff;
}

@media all and (max-width:960px) {
  .ly-top .sec-search{
    margin: 0;
    border-radius:0;
    padding: min(calc((32 / var(--sp))*100vw),32px) 0;
  }
  .ly-top .sec-search h2 img{
    height: 25px;
  }
  .ly-top .sec-search .i-menu::before{
    top: -13px;
    left: -15px;
  }
  .ly-top .sec-search_category{
    min-width: 287px;
    margin: 15px auto 0;
    padding: 0 44px;
  }
  .ly-top .sec-search_fillter{
    margin-top: 20px;
  }
  .ly-top .sec-search_fillter .c-button_inner{
    font-size: 12px;
  }
  .ly-top .sec-search_fillter .c-button_inner::after{
    width: 15px;
    height: 15px;
    left: 17px;
  }
  .c-button-plus::before{
    top: calc((100% - 6px) /2);
    transform: translateY(-50%);
    right: 17px;
  }
  .ly-top .sec-search_fillter .c-button-plus::before{
    right: 16px;
    top: calc((100% - 3px) /2);
  }
  .ly-top .c-category_list-item_label::after{
    right: 15px;
  }
}
@media all and (max-width:960px) and (min-width:640px) {
  .ly-top .sec-search h2 img{
    height: 32.5px;
  }
  .ly-top .sec-search_category{
    padding-left:60px;
padding-right:60px;
  }
}

/* feature */
.sec-feature{
  max-width: 1180px;
  padding: 0 min(calc((10 / var(--pc))*100vw),10px);
  margin: min(calc((80 / var(--pc))*100vw),80px) auto 0;
}
.sec-feature + .sec-feature{
  margin: min(calc((42 / var(--pc))*100vw),42px) auto;
}
.sec-feature_card{
  margin-top: min(calc((32 / var(--pc))*100vw),32px);
}
.sec-feature_card_list{
  column-gap: min(calc((17 / var(--pc))*100vw),17px);
}
.js-feature .c-card_list-item_category_list{
  position: absolute;
  bottom: 0;
}
.js-feature .c-card_list-item a{
  display: block;
}
@media all and (max-width:480px) {
  .js-feature .c-card_list-item {
    min-height: clamp(160px,calc((180 / var(--sp))*100vw),200px);  
  }
  .js-feature .c-card_list-item a {
    min-height: clamp(160px,calc((180 / var(--sp))*100vw),200px);    
  }
}
@media all and (min-width:481px) and (max-width:600px) {
  .js-feature .c-card_list-item {
    min-height: clamp(200px,calc((165 / var(--sp))*100vw),240px);  
  }
  .js-feature .c-card_list-item a {
    min-height: clamp(200px,calc((165 / var(--sp))*100vw),240px);    
  }
}
@media all and (min-width:601px) and (max-width:639px) {
  .js-feature .c-card_list-item {
    min-height: clamp(240px,calc((150 / var(--sp))*100vw),260px);
  }
  .js-feature .c-card_list-item a {
    min-height: clamp(240px,calc((150 / var(--sp))*100vw),260px);    
  }
}
@media all and (min-width:640px) and (max-width:799px) {
  .js-feature .c-card_list-item {
    min-height: clamp(240px,calc((130 / var(--sp))*100vw),280px);
  }
  .js-feature .c-card_list-item a {
    min-height: clamp(240px,calc((130 / var(--sp))*100vw),280px);    
  }
}
@media all and (min-width:800px) and (max-width:960px) {
  .js-feature .c-card_list-item {
    min-height: clamp(280px,calc((125 / var(--sp))*100vw),320px);
  }
  .js-feature .c-card_list-item a {
    min-height: clamp(280px,calc((125 / var(--sp))*100vw),320px);    
  }
}
@media all and (min-width:961px) and (max-width:1280px) {
  .js-feature .c-card_list-item {
    min-height: clamp(270px,calc((375 / var(--pc))*100vw),328px);
  }
  .js-feature .c-card_list-item a {
    min-height: clamp(270px,calc((375 / var(--pc))*100vw),328px);    
  }
}
@media all and (min-width:1281px){
  .js-feature .c-card_list-item {
    min-height: 328px;
  }
  .js-feature .c-card_list-item a {
    min-height: 328px;
  }
  .js-feature .c-card_list-item_title{
    max-height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media all and (max-width:960px) {
  .sec-feature{
    margin: 32px 0 0;
    padding: 0 13px;
  }
  .sec-feature_card{
    margin-top: 16px;
  }
  .sec-feature_card_list{
    column-gap: min(calc((8 / var(--sp))*100vw),7.5px);
  }
  .c-card_list-item a{
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .c-card_list-item_bottom{
    flex: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .sec-result_card_list-item_category{
    margin-top: auto;
  }
  .sec-result_card_list-item_category_list{
    margin-top: 3px;
  }
  .sec-feature + .sec-feature{
    margin: 6px auto 0;
  }
}

@media all and (max-width:960px) and (min-width:640px) {
  .sec-feature{
    padding-left:60px;
    padding-right:60px;
  }
}

/* brand */
.sec-brand{
  padding: 0 0 min(calc((76 / var(--pc))*100vw),76px);
}
.sec-brand h2{
  padding-top: min(calc((80 / var(--pc))*100vw),80px);
  margin-bottom: min(calc((40 / var(--pc))*100vw),40px);
}
.sec-brand .swiper-button_wrapper{
  top:min(calc((92 / var(--pc))*100vw),92px);
}
.sec-brand h2 span::before{
  right: -34px;
  top: -50px;
}
.brandSwiper .swiper-slide{
  width: 291px;
}

@media all and (max-width:960px) {
  .sec-brand{
    padding: 0 0 28px;
  }
  .sec-brand .swiper h2 img{
    height: 26px;
  }
  .sec-brand .swiper-button_wrapper{
    display: none;
  }
  .sec-brand .swiper h2{
    padding-top: 32px;
    margin-bottom: 16px;
  }
  .sec-brand .swiper h2 span{
    position: relative;
  }
  .sec-brand .c-slider_list{
    margin: 0;
  }
  .rankSwiper .swiper-slide{
    padding-right: 0;
    margin-right: 8.5px;
  }
  .brandSwiper .swiper-slide{
    width: 100%;
  }
}


/* swiper */
.ly-top .swiper-button-prev,
.ly-top .swiper-button-next{
  background-color: var(--default);
  outline: 1px solid var(--default);
}
.ly-top .swiper-button-prev:hover,
.ly-top .swiper-button-next:hover{
  background-color: #fff;
}
.ly-top .swiper-button-prev::after,
.ly-top .swiper-button-next::after {
  background-color: #fff;
}
.ly-top .swiper-button-prev:hover::after,
.ly-top .swiper-button-next:hover::after{
  background-color: var(--default);
}

.ly-top .c-slider_list_image img{
  vertical-align: bottom;
  object-fit: cover;
}

@media all and (min-width:1366px) {
  .ly-top .c-ranking .swiper{
    padding-left :calc((100% - var(--targerWidth)) / 2);
    padding-right :calc((100% - var(--targerWidth)) / 2);
  }
}

@media all and (max-width:960px) and (min-width:641px) {
  .ly-top .i-accent::before{
    right: -19px;
    top: -22px;
  }
  .ly-top .sec-category .i-category::before{
    left: -24px;
    top: -30px;
  }
  .ly-top .c-ranking .i-crown::after{
    top: -44px;
  }
  .ly-top .sec-search .i-menu::before{
    left: -25px;
    top: -20px;
  }
  .sec-brand .swiper h2 img{
    height: 34px;
  }
  .sec-brand .swiper h2 span::before{
    right: -14px;
    top: -26px;
  }
}
@media all and (max-width:640px) {
  .ly-top .i-accent::before{
    top: -10px;
  }
  .ly-top .sec-category .i-category::before{
    left: -20px;
  }
  .ly-top .c-ranking .i-crown::after{
    top: -28px;
  }
  .sec-brand .swiper h2 span::before{
    right: -14px;
    top: -19px;
  }
}
