@charset "UTF-8";

ul li,
ol li {
  margin-left: 0;
  list-style-type: none;
}

a img {
  border: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
}

.l-main {
  width: 100%;
  overflow: hidden;
}

@media screen and (min-width: 901px), print {
  .l-main {
    /*padding-top: 102px;*/
  }
}

.l-main__content {
  width: 100%;
  /*max-width: 920px;*/ /* 1440px */
  /*min-width: 768px;*/
  margin: 0;
}

.l-main__content--full-width {
  max-width: 920px; /* none */
}

.c-product__item {
  width: 18.12444%;
  min-width: 150px;
  position: relative;
}

@media screen and (min-width: 901px), print {
  .c-product__item + .c-product__item {
    margin-left: 2.34%;
  }
}

.c-product__thumb {
  height: auto;
  padding-top: 131.34328%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #f7f7f7;
  position: relative;
}

.c-product__thumb:after {
  content: '';
  position: absolute;
  width: 101%;
  height: 101%;
  top: 0;
  left: 0;
  background: url("frame_product_s.png") no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 10;
  pointer-events: none;
}

.c-product__thumb__img {
  width: 97.1831%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.c-product__thumb__img img {
  width: 100%;
}

@media screen and (min-width: 901px), print {
  .c-product__thumb__img {
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
  }

  .c-product__thumb__img:hover {
    opacity: 0.5;
  }
}

@media screen and (min-width: 901px), print {
  .c-product__about {
    padding: 0 0 0 3.58209%;
  }
}

.c-product__product-name {
  /*font-weight: bold;*/
  font-size: 12px;
  color: #3b4043;
  display: block;
}

@media screen and (min-width: 901px), print {
  .c-product__product-name {
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.714;
    letter-spacing: 0.03em;
    cursor: pointer;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
  }

  .c-product__product-name:hover {
    opacity: 0.5;
  }
}

.c-product__item--grey .c-product__thumb {
  background-color: #fff;
  position: relative;
}

.c-product__item--grey .c-product__thumb:after {
  content: '';
  position: absolute;
  width: 101%;
  height: 101%;
  top: 0;
  left: 0;
  background: url("frame_product_s.png") no-repeat; /* frame_product_s_grey.png */
  background-size: cover;
  background-position: center;
  z-index: 10;
  pointer-events: none;
}

@-webkit-keyframes faveAnim {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
  }

  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2);
  }

  75% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes faveAnim {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
  }

  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2);
  }

  75% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

.p-top-section__hdg {  
  font-size: 30px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
  color: #3b4043;
}

@media screen and (min-width: 901px), print {
  .p-top-section__hdg {
    font-size: 30px;
    /*letter-spacing: .18em;*/
  }
}

.p-top-ranking__container {
  margin: 0;
  position: relative;
}

@media screen and (min-width: 901px), print {
  .p-top-ranking__container {
    width: 100%;
    max-width: 920px; /*1440px*/
  }
}

.p-top-ranking__item {
  position: relative;
  margin-bottom: 30px;
}

.p-top-ranking__item:after {
  pointer-events: none;
  content: '';
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #d23a6f; /* 48add3 */
  z-index: 50;
  border-radius: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;  
  font-size: 16px;
  color: #fff;
}



@-webkit-keyframes ko_gradation_skybluemix {
  0% {
    background-position: 50% 0%;
  }

  50% {
    background-position: 50% 100%;
  }

  100% {
    background-position: 50% 0%;
  }
}

@keyframes ko_gradation_skybluemix {
  0% {
    background-position: 50% 0%;
  }

  50% {
    background-position: 50% 100%;
  }

  100% {
    background-position: 50% 0%;
  }
}

.c-product__about {
  position: relative;
}

.c-product__about > .c-product__brand {
  font-size: 14px;
  margin-top: 27px;
  font-weight: 600;

}


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

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}