@charset 'UTF-8';

.onlineshop_box {
  background-color: #1a1a1a;
  padding: 0 0 8vh 0;
}

.onlineshop_box a {
  display: contents;
}

.onlineshop {
  margin: auto;
  width: 60%;
  opacity: 0;
  position: relative;
  transition: opacity 2s ease-out;
  overflow: hidden;
}

.onlineshop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 1;
  transform: translateX(0);
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.onlineshop.visible {
  opacity: 1;
}

.onlineshop.visible::before {
  transform: translateX(100%);
  opacity: 0;
}


.carshop1_box {
  display: flex;
  justify-content: center;
  margin: 10px 0 3% 0;
  padding: 0 13vw 0 13vw;
  overflow: visible;
  max-width: 100%;
  flex-wrap: wrap;
}

.carshop1_box a {
  display: contents;
}

.tyuukosya {
  padding: 8vh 0 0 0;
}

.icon {
  margin: auto;
  width: 20%;
}

.carshop1_box img {
  margin-bottom: 10vh;
  opacity: 0;
  transform: translateY(50px);
}

.carshop1_box img.slide-in {
  opacity: 1;
  transform: translateY(0);
  animation: slide-in-up 4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onlineshop img,
.carshop1_box img {
  transition: filter 0.3s ease-in-out, opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.onlineshop_box a:hover img {
  filter: brightness(1.6);
}

.carshop1_box a:hover img {
  filter: brightness(1.6);
}

@media screen and (min-width: 1920px) {
  .onlineshop_box {
    padding: 10vh 0 10vh 0;
  }
  .tyuukosya {
    padding: 0;
  }
  
  .carshop1_box {
    margin: 10px 0 1% 0;
  }
  
}

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

  .carshop1_box img[alt="カーセンサー"] {
    margin-bottom: 0 !important;
  }
}



@media screen and (max-width: 795px) {
  .icon {
    width: 30%;
  }

  .carshop1_box {
    padding: 0 10vw 0 10vw;
  }

}

@media screen and (max-width: 480px) {
  .onlineshop {
    padding: 0 0;
    width: 80%;
  }

  .icon {
    width: 50%;
  }

  .carshop1_box {
    display: block;
    margin-bottom: 20px;
    width: 70vw;
    margin: auto;
    padding: 10px 0 30px 0;
  }

  .carshop1_box img {
    margin-bottom: 0;
  }
}

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

  .onlineshop {
    padding: 0;
  }

  .tyuukosya {
    padding: 0;
  }

  .onlineshop_box {
    padding: 5vh 0 5vh 0;
  }

  .carshop1_box {
    margin-bottom: 0;
    padding: 0 0 30px 0;
  }

  .icon {
    width: 50%;
  }

  .carshop1_box {
    margin-top: 0;
  }
}