@charset "UTF-8";
/*----------------------------------------------------
  変数セット
----------------------------------------------------*/
.page-title-wrap {
  background-image: url(../images/products/bg_page_title.jpg);
}
.page-title-wrap .container p {
  color: #222;
  -webkit-filter: drop-shadow(3px 3px 3px rgb(255, 255, 255));
          filter: drop-shadow(3px 3px 3px rgb(255, 255, 255));
}

/*----------------------------------------------------
  一覧
----------------------------------------------------*/
ul.products-cat-list {
  list-style: none;
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
ul.products-cat-list li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  padding: 0 1vw;
  margin-bottom: 3vw;
}
@media screen and (max-width: 767.98px) {
  ul.products-cat-list li {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    margin-bottom: 6vw;
  }
}
ul.products-cat-list li a {
  display: block;
  color: #222;
  text-decoration: none;
  text-align: center;
}
ul.products-cat-list li a:hover {
  opacity: 0.7;
}
ul.products-cat-list li a img {
  width: 100%;
  height: auto;
}
ul.products-cat-list li a p {
  display: inline-block;
  margin-top: 1em;
  font-weight: 500;
  padding-right: 1.5em;
  position: relative;
  font-size: 2rem;
}
@media screen and (max-width: 767.98px) {
  ul.products-cat-list li a p {
    margin-top: 0.7em;
    padding-right: 1.4em;
    font-size: 1.6rem;
  }
}
ul.products-cat-list li a p::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-top: 2px solid #222;
  border-right: 2px solid #222;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  right: 0.2em;
  top: 50%;
  margin-top: -0.35em;
}
@media screen and (max-width: 767.98px) {
  ul.products-cat-list li a p::after {
    width: 0.6em;
    height: 0.6em;
    margin-top: -0.28em;
  }
}

/*----------------------------------------------------
  詳細
----------------------------------------------------*/
ul.products-list {
  list-style: none;
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 767.98px) {
  ul.products-list {
    margin: 0 -1rem;
  }
}
ul.products-list li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.3333%;
          flex: 0 0 33.3333%;
  padding: 0 1.5rem;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767.98px) {
  ul.products-list li {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    padding: 0 1rem;
    margin-bottom: 2rem;
  }
}
ul.products-list li .thumbnail {
  aspect-ratio: 3/2;
  border: 1px solid #ececec;
  cursor: pointer;
}
ul.products-list li .thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
ul.products-list li .thumbnail:hover {
  opacity: 0.75;
}

/*モーダル*/
.modal-block {
  display: none;
  position: fixed;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-block:hover {
  cursor: pointer;
}
.modal-block .img-section {
  position: relative;
  margin: 0 auto;
  /*閉じる*/
}
.modal-block .img-section:hover {
  cursor: default;
}
.modal-block .img-section span.close {
  position: absolute;
  top: -40px;
  right: -40px;
}
@media screen and (max-width: 575.98px) {
  .modal-block .img-section span.close {
    top: -45px;
    right: -5px;
  }
}
.modal-block .img-section span.close span {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
}
.modal-block .img-section span.close span::before, .modal-block .img-section span.close span::after {
  content: "";
  width: 40px;
  height: 3px;
  display: inline-block;
  background-color: #fff;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 50%;
}
.modal-block .img-section span.close span::before {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.modal-block .img-section span.close span::after {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.modal-block .img-section img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 60vw;
  max-height: 70vh;
  drop-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 991.98px) {
  .modal-block .img-section img {
    max-width: 60vw;
  }
}
@media screen and (max-width: 575.98px) {
  .modal-block .img-section img {
    max-width: 90vw;
  }
}