@charset "UTF-8";
/* CSS Document */

.sp_only {
    display: none;
}

.fl {
    display: flex;
    flex-wrap: wrap;
}
#Wrap, .wrapTop {width: 110rem;}
#ranking_list img {
    width: 100%;
}

#dvProductSearch , .sideBnr1 , .sideBnr3 {
    display: none !important;
}

.ttl {
    display: none;
}

#Contents {
    color: #053931;
}

#Contents a {
    color: #053931;
}
.cfix li {
    overflow: unset;
    float: none;
}

#js-slide-r1 {
    width: 100% !important;
}

#ranking_list {
    width: 100%;
    margin: 0 auto;
    color: #053931;
    text-align: center;
}

#ranking_list .hdg_l1 {
    padding: 0;
    text-align: center;
    float: none;
    line-height: 1;
    margin: 0 auto;
    font-size: 1.7rem;
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
}


#ranking_list .hdg_l1 span {
    font-family: pragmatica, sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 6.2rem;
    display: block;
    margin: 0 auto 2rem;
}

.tab_wrap {
    margin-top: 10rem;
}

.tab_btn_area {
    flex-wrap: nowrap;
    width: 100rem;
    margin: 0 auto;
}

.tab_btn {
    width: 100%;
    position: relative;
    font-size: 1.4rem;
    font-family: pragmatica, sans-serif;
    font-weight: 400;
    cursor: pointer;
}

.tab_btn::before {
    content: "";
    width: 100%;
    height: 1rem;
    background: #FBFF9A;
    position: absolute;
    top: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.selected::before {
    content: "";
    background: #053931 !important;
}


@media only screen and (max-width: 768px) {

    .pc_only {
        display: none;
    }

    .sp_only {
        display: block !important;
    }

    #Wrap , .wrapBottom , .wrapTop , #ranking-list {
        width: 100%;
        overflow: hidden;
    }

#Contents {
    padding: 0;
}
    .wrapBottom {
        padding: 0;
    }

    .cfix {
        width: 100% !important;
    }

    #js-slide-r1 {
        width: 100% !important;
    }

    #ranking_list {
        width: calc(586* (100vw / 586));
        margin-top: calc(60* (100vw / 586));
    }


    #ranking_list .hdg_l1 {
        font-size: calc(18 * (100vw / 586));
    }

    #ranking_list .hdg_l1 span {
        font-size: calc(70 * (100vw / 586));
        margin: 0 auto calc(7* (100vw / 586));
    }

 .tab_btn_area {
    width: 100%;
}

    .tab_wrap {
        margin-top: calc(50 * (100vw / 586));
        position: relative;
        /* left: calc(-6 * (100vw / 586)); */
    }

    .tab_btn {
        font-size: calc(16 * (100vw / 586));
        z-index: 2;
        width: calc(100% / 6);
        line-height: 1;
        padding-top: calc(2 * (100vw / 586));
    }

    .tab01 {
        padding-top: calc(8 * (100vw / 586));
    }

    .selected {
        color: #fff;
    }

    .tab_btn::before {
        height: calc(50 * (100vw / 586));
        top: calc(-10 * (100vw / 586));
        z-index: -1;
        background: #fff;
        border-top-right-radius: calc(28 * (100vw / 586));
        border: 1px solid #053931;
    }


.breadcrumbs {
     display: none !important;
}

}



#ranking_list .panel_area .item_list__inner {
    display: flex !important;
    flex-wrap: wrap;
    margin-top: 20rem;
    justify-content: center;
}

#ranking_list .panel_area .item_list__item:nth-child(1) {
    width: 42rem;
    margin: 0 34rem 11rem;
}

#ranking_list .panel_area .item_list__item {
    width: 35.5rem;
    height: auto;
    position: relative;
    margin-left: .5rem;
    margin-right: .5rem;
    margin-bottom: 11rem;
}

#ranking_list .panel_area .item_list__item .icn_rank {
    position: absolute;
    z-index: 2;
}

#ranking_list .panel_area .item_list__item .icn_rank span {
  display: none;
}

#ranking_list .panel_area .item_list__item:nth-child(1) .icn_rank {
  background: url(../Contents/ImagesPkg/top/item_rank1.png) no-repeat;
  background-size: 100%;
  font-size: 0;
  width: 7rem;
  height: 7rem;
}

#ranking_list .panel_area .item_list__item:nth-child(2) .icn_rank::before {
  content: "2";
}

#ranking_list .panel_area .item_list__item:nth-child(3) .icn_rank::before {
  content: "3";
}

#ranking_list .panel_area .item_list__item:nth-child(4) .icn_rank::before {
  content: "4";
}

#ranking_list .panel_area .item_list__item:nth-child(5) .icn_rank::before {
  content: "5";
}

#ranking_list .panel_area .item_list__item:nth-child(6) .icn_rank::before {
  content: "6";
}

#ranking_list .panel_area .item_list__item:nth-child(7) .icn_rank::before {
  content: "7";
}

#ranking_list .panel_area .item_list__item:nth-child(8) .icn_rank::before {
  content: "8";
}

#ranking_list .panel_area .item_list__item:nth-child(9) .icn_rank::before {
  content: "9";
}

#ranking_list .panel_area .item_list__item:nth-child(10) .icn_rank::before {
  content: "10";
}

#ranking_list .btn_wrap {
    display: none;
}

#ranking_list .panel_area .item_list__img {
    background: #fff;
    position: relative;
    z-index: 0;
    height: auto;
    margin: 0 auto 2rem;
}

#ranking_list .panel_area .item_list__img #picture {
    width: 72%;
    padding: 2rem 0;
}

#ranking_list .panel_area .item_list__item p {
    text-align: center;
    font-size: 1.7rem;
}

#ranking_list .panel_area .item_list__img::before {
    position: absolute;
    top: 0;
    right: 0;
    left: -100%;
    bottom: -100%;
    z-index: -1;
    display: block;
    border: 1px solid #053931;
    transform: scale(.5);
    transform-origin: 100% 0;
    content: "";
}

#ranking_list .panel_area .item_list__title {
    margin: 2rem 0 1rem;
}

#ranking_list .panel_area .item_list__item .icn_rank {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: #FBFF9A;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    font-size: 2.2rem;
    line-height: 1.9;
}

#ranking_list .panel_area .item_list__price.fixed_purchase_price {
  padding: 1rem 0;
  font-size: 1.4rem;
}

#ranking_list .panel_area .item_list__price.fixed_purchase_price span {
  font-weight: 500;
}

@media only screen and (max-width: 768px) {
#ranking_list .panel_area .item_list__inner {
	margin: 0;
	padding: calc(140* (100vw / 586)) calc(20* (100vw / 586));
	background: #053931;
}
#ranking_list .panel_area .item_list__inner a {
	color: #fff;

}
#ranking_list .panel_area .item_list__item:nth-child(1) {
    width: calc(340* (100vw / 586));
    margin: 0 calc(103* (100vw / 586)) calc(65* (100vw / 586));
}

#ranking_list .panel_area .item_list__item {
    color: #fff;
}

#ranking_list .panel_area .item_list__item {
    width: calc(255* (100vw / 586));
    margin: 0 calc(5 * (100vw / 586)) calc(65* (100vw / 586));
}

#ranking_list .panel_area .item_list__title a {
    color: #fff;
    line-height: 1.5;
}

#ranking_list .panel_area .item_list__item p {
    font-size: calc(16* (100vw / 586));
}

#ranking_list .panel_area .item_list__item:nth-child(1) .icn_rank {
    width: calc(70* (100vw / 586));
    height: calc(70* (100vw / 586));
}

#ranking_list .panel_area .item_list__item .icn_rank {
    top: calc(-10* (100vw / 586));
    left: calc(-10* (100vw / 586));
    height: calc(50* (100vw / 586));
    width: calc(50* (100vw / 586));
    color: #053931;
    font-size: calc(22* (100vw / 586));
    line-height: 2.4;
}

#ranking_list .panel_area .item_list__price.fixed_purchase_price {
  padding: calc(10* (100vw / 586)) 0 calc(5* (100vw / 586));
  font-size: calc(13* (100vw / 586));
}

#ranking_list .panel_area .item_list__price.fixed_purchase_price span {
  font-size: calc(16* (100vw / 586));
  font-weight: 500;
}


.reviewFeature__RankingParts {
    margin: calc(20 * (100vw / 586)) auto;
}
}


/*  Animation
---------------------------------- */

/* -- keyframes -- */

@-webkit-keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@-webkit-keyframes tra1 {
  0% {
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    -ms-transform: translateY(60px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@keyframes tra1 {
  0% {
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    -ms-transform: translateY(60px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@-webkit-keyframes tra2 {
  0% {
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
    -ms-transform: translateY(80px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@keyframes tra2 {
  0% {
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
    -ms-transform: translateY(80px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@-webkit-keyframes tra3 {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -ms-transform: translateY(20px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -ms-transform: translateY(20px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

.ef {
  opacity: 0;
}

.ef.effect {
  -webkit-animation: opa1 1s ease-in-out 0s 1 forwards;
  animation: opa1 1s ease-in-out 0s 1 forwards;
}

.ef-top {
  opacity: 0;
  -webkit-transform: translateY(60px);
  transform: translateY(60px);
  -ms-transform: translateY(60px);
}

.ef-top.effect {
  -webkit-animation: opa1 1s ease-in-out 0s 1 forwards, tra1 1s ease-in-out 0s 1 forwards;
  animation: opa1 1s ease-in-out 0s 1 forwards, tra1 1s ease-in-out 0s 1 forwards;
}