@charset "utf-8";

.cl-w{
  color: rgb(255,255,255);
}

.animation-title{
  animation-name: fadeIn;
  animation-duration: 2.5s;
  animation-timing-function: ease-out;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.products-name{
  opacity: 0;
  /* transform: translate3d(0, 100px, 0); */
  transition: opacity 2.5s;
  /* //アニメーション用スタイル */
  &.is-animated {
      opacity: 1;
      /* transform: translate3d(0, 0, 0); */
  }
  }

/*  */
.contents-block{
  max-width: 840px;
  min-width: 320px;
  margin: auto;
}

/*  */
.top-bn{
  position: relative;
  margin-top: 32px;
}

.main-title{
  width: 100%;
  position: absolute;
  z-index: 1;
  top: 160px;
  /* top: 264px; */
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 24px 0px 20px;
}@media screen and (min-width:420px) {
  .main-title{
    top: 176x!important;
    padding: 36px 0px 30px;
  }
}

.main-title-1{
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 46px;
  padding-left: 3%;
}@media screen and (min-width:420px) {
  .main-title-1{
    font-size: 32px;
    line-height: 52px;
  }
}
.main-title-2{
  font-size: 12px;
  margin-top: 4px;
}@media screen and (min-width:420px) {
  .main-title-2{
    font-size: 18px;
    margin-top: 12px;
  }
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
  }
  .scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
    margin-top: -16px;
    /* margin-bottom: 146px; */
}@media screen and (min-width:420px) {
    .scroll-infinity__wrap {
      /* margin-bottom: 168px; */
    }
  }
  .scroll-infinity__wrap:last-child{
    margin-bottom: 0px;
  }

  .scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin-bottom: 8px;
  }
  .scroll-infinity__list--left {
    animation: infinity-scroll-left 50s infinite linear 0.1s both;
  }
  .scroll-infinity__item {
    width: 160px;
    padding: 0 8px;
}@media screen and (min-width:420px) {
    .scroll-infinity__item  {
      width: 184px;
          padding: 0 12px;
    }
  }


  .scroll-infinity__item>img {
    width: 100%;
    border-radius: 16px;
  }

  @keyframes infinity-scroll-right {
    from {
      transform: translateX(-100%);
    }
      to {
      transform: translateX(0%);
    }
    }
    .scroll-infinity__list--right{
      animation :infinity-scroll-right 50s infinite linear 0.1s both;
    }

    /*  */
    .contents-main-container{
      margin: 42px 0 0;
      padding-top: 16px;
      padding-left: 6.25%;
      padding-right: 6.25%;
      padding-bottom: 36px;
      /* background-color: var(--tile-background-color-bg); */
  }@media screen and (min-width:420px) {
      .contents-main-container{
        margin: 48px 0 0;
        padding-top: 32px;
        padding-left: 0;
        padding-right: 0
      }
    }

    .main-copy{
      margin: 0 0;
    }

    .main-copy h2{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
}@media screen and (min-width:420px) {
      .main-copy h2{
        font-size: 22px;
        line-height: 36px;
      }
    }
    
    .main-copy p{
      font-size: 13px;
      text-align: center;
      margin: 0 6% 48px;
      line-height: 16pxpx;
      max-width:600px;
}@media screen and (min-width:420px) {
      .main-copy p{
        font-size: 14px;
        margin: 0 auto 62px;
      }
    }

    .product-block{
      display: block;
    }

    .grid{
      display: block;
}

/* @media screen and (min-width:420px) {
      .grid{
        margin-left: auto;
        margin-right: auto;
        grid-column-gap: 46px;
        grid-row-gap: 46px;
        padding: 0 24px;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
      }
    } */

    .product-block-p{
      position: relative;
      max-width: 360px;
      max-height:500px;
      margin: 48px auto;
      /* background-color: rgb(255, 255, 255); */
      border-radius: 16px;
      background-size: auto;

}

/* @media screen and (min-width:420px) {
      .product-block-p{
        width: 320px;
        height: 520px;
        display: grid;
        grid-column: span 6;
        margin: 0;
      }
    } */

    .product-block-p:last-child{
      margin-bottom: 16px;
    }

/*     
    .bk1{
      background-image:  url(../img/img42617.jpg);
    }
    .bk2{
      background-image:  url(../img/20241114_ga_01.jpg);
    }
    .bk3{
      background-image:  url(../img/bn-3.png);
    }
    .bk4{
      background-image:  url(../img/41168.jpg);
    }
    .bk5{
      background-image:  url(../img/bn-2.png);
    }
    .bk6{
      background-image:  url(../img/41986.jpg);
    }
    .bk7{
      background-image:  url(../img/bn-1.png);
    } */


    .p-img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 16px;
    }

    .b-logo{
      position: absolute;
      top: 24px;
      left: 24px;
    }
    .rfone{
      width: 32px;
    }
    .ga{
      width: 48px;
    }
    .kc{
      width: 44px;
    }
    .itohan{
      width: 52px;
    }
    .vege{
      width: 72px;
      top: 40px !important;
    }
    .yugo{
      width: 38px;
    }
    .rfff{
      width: 46px;
    }

    .f-rfone{
      width: 28px;
    }
    .f-ga{
      width: 44px;
    }
    .f-kc{
      width: 40px;
    }
    .f-itohan{
      width: 48px;
    }
    .f-vege{
      width: 68px;
      top: 40px !important;
    }
    .f-yugo{
      width: 34px;
    }
    .f-gg{
      width: 68px;
    }
    .f-rfff{
      width: 42px;
    }


    .products-name{
      text-align: center;
            display: grid;
      place-items: center;
      height:50px;
      font-size: 20px;
      font-weight: 600;
      position: absolute;
      bottom: 86px;
      right: 0;
      left: 0;
      line-height: 26px;
}@media screen and (min-width:420px) {
      .products-name{
        bottom: 80px;
      }
    }
    .products-name span{
      font-size: 13px;
    }

    .product-block-p a{
      position: absolute;
      bottom: 14px;
      right: 0;
      left: 0;
}@media screen and (min-width:420px) {
      .product-block-p a{
        bottom: 10px;
      }
    }
    .products-contents-bt{
      text-align: center;
      width: 80px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
      background-color: rgb(255, 255, 255);
      border: 1px solid rgb(204, 204, 204);
      border-radius: 28px;
      padding: 6px 11px 5px;
      margin: 16px auto;
    }