@charset "UTF-8";

h2.h2top{ font-size: 2.5em; margin: 0 .7em 10px 0}
h2.h2tops{ font-size: 2.3em; margin: 0 0 .5em}
main article:first-of-type{ margin-top: 60px}
.topttl{ align-items: center; margin-bottom: 30px}
.topproducts{ flex-wrap: wrap; gap: 0 10px}
.topproducts li{ width: calc((100% - 30px) / 4)}
.topproducts li img{ width: 100%; object-fit: cover; height: 180px; padding-bottom: 5px}

@media screen and (max-width: 767px){
  .topttl{ flex-direction: column; align-items: flex-start}
  /*.topttl div{ margin: 2px 0 0}*/
  .topproducts li{ width: calc((100% - 10px) / 2)/*width: 49.5%*/}
}

@media screen and (max-width: 600px) {
  h2.h2top, h2.h2tops{ font-size: 2em}
}


/* -----

SWIPER

------------------------------------*/
.swiper-container{ width: 100%; margin: 0 auto; text-align: center}
.swiper-container img{ width: 100%}
.swiper-slide, .swiper-slide-thumb-active, .swiper-container a:hover{ opacity: 1}
.swiper-pagination-bullet{ margin: 0 5px; background: #000}
.swiper-pagination{ position: static!important}
.switchsp{ display: none}
.swiper-button-next, .swiper-button-prev{ color: #000}
.swiper-pagination-bullet-active { background: #1667ac!important}
.swiper1{ margin-bottom: 60px}
@media screen and (min-width: 2001px) { .swiper1 img{ width: 2000px}}
@media screen and (max-width: 600px) {
  .swiper1 img{ width: 100%}
  .swiper-slide-thumb-active{ opacity: 1}
  .switchpc{ display: none}
  .switchsp{ display: block}
}

/* slide-salonsupport */
.slide2{ position: relative}
.slide2 li{ box-shadow: 0 5px 15px 0 rgba(230, 230, 230, 0.8)}
.slide2 li img{ width: 100%}
.slide2 li span{ display: block; margin: 20px}

.product-container{width: 95%; margin: 10px auto; padding: 10px;}