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

 products

--------------------------------------------------------*/
.products {
  margin-top: var(--40px);
}
.products-item {
  display: flex;
  margin-bottom: 1.875rem;
}
.products-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--10px);
  text-align: center;
}
.products-detail dt {
  font-size: var(--20px);
  font-weight: 600;
}
.products-img-wrap {
  display: flex;
  gap: 1px; 
}
.products-img {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .products-item,
  .products-detail {
    flex-wrap: wrap;
  }
  .products-detail,
  .products-detail dt {
    width: 100%;
  }
  .products-detail dt br {
    display: none;
  }
  .products-detail {
    padding: 1.5rem 1rem;
  }
  .products-detail dd {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 768px) {
  .products-detail { 
    flex: 0 0 26.7%;
    max-width: 365px;  
  }
  .products-img-wrap {
    flex: 0 0 73.3%;
  }
}
@media screen and (max-width: 559px) {
   .products-img-wrap {
    flex-direction: column;
   }
}



/* New
--------------------------------------------------------*/
#new.section {
  padding-top: var(--60px);
  background: var(--main-10);
  position: relative;
}
#new.section > .inner {
  position: relative;
  z-index: 1;
}
#new.section::after {
  content: "";
  position: absolute;
  bottom: -5rem;
  left: 0;
  width: 100%;
  height: 5rem;
  background: var(--main-10);
  z-index: 0;
  transform: skewY(3deg);
  transform-origin: top right;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}
.section-heading .section-title {
  line-height: 1.5;
  margin-bottom: 0;
}
#new .products-detail {
  background: var(--main);
}
#new .products-detail dt {
  color: var(--yellow);
}
#new .products-detail dt::before {
  display: block;
  content: "NEW!";
  width: 5rem;
  color: red;
  font-size: 1rem;
  background: var(--yellow);
}
#new .products-detail dd {
  color: var(--white);
}
#new .products-img-wrap {
  padding: 5px;
  background: var(--main);
}
@media screen and (min-width: 768px) {
  #new .products-detail dt::before {
    margin: 0 auto 1rem;
  }
  #new.section {
    padding-bottom: var(--20px);
  }
}
@media screen and (max-width: 767px) {
  #new .products-detail dt::before {
    display: inline-block;
    width: 4rem;
    margin-right: 1rem;
  }
  #new .products-img-wrap {
    padding: 0 3px 3px;
  }
}


/* Kaisan
--------------------------------------------------------*/
#kaisan .section-title,
#kaisan .products-detail dt {
  color: var(--blue);
}
#kaisan .products-detail {
  background: var(--blue-10);
}


/* Nousan
--------------------------------------------------------*/
#nousan .section-title,
#nousan .products-detail dt {
  color: var(--green);
}
#nousan .products-detail {
  background: var(--green-10);
}


/* Kakou
--------------------------------------------------------*/
#kakou .section-title,
#kakou .products-detail dt {
  color: var(--orange);
}
#kakou .products-detail {
  background: var(--orange-10);
}