@charset "utf-8";



.loading {

  background-color: transparent;

}



.loading::after {

  display: none;

}



.work_img {

  transition: 0.2s;

}



.work_img:hover {

  transform: scale(1.05);

  transition: 0.2s;

}





.noise {

  z-index: 0;

}



.maintitle {

  will-change: opacity, transform;

  width: 19.125rem;

  padding-top: 6.1625rem;

  margin-left: 1.1875rem;

  position: relative;

  z-index: 100;

}



.maintitle img {

  z-index: 100;

}



.filter {

  display: flex;

  gap: 0.4375rem;

  margin: 1.36rem 1.066666666666rem 0.6875rem;

  z-index: 100;

}



.js-sort {

  letter-spacing: 0.759px;

}



.category {

  width: 92.888%;

  display: flex;

  flex-direction: column;

  gap: 1.21875rem;

  margin: 0 auto;

  padding-bottom: 5.563125rem;

  position: relative;

  z-index: 100;

}



.product-list-item {

  border-radius: 1.183125rem;

  border: solid 0.355rem;

  overflow: hidden;

  z-index: 100;

}



.filter li {

  cursor: pointer;

  font-family: "Effra";

  font-size: 0.6776875rem;

  display: flex;

  font-weight: 700;

  width: 4.4375rem;

  height: 2.125rem;

  background-color: var(--primary_truewhite);

  border: solid 0.15625rem;

  border-radius: 1.635875rem;

  align-items: center;

  justify-content: center;

  letter-spacing: 0.759px;

  z-index: 100;

}



.filter li:hover {

  background-color: black;

  border: solid 0.15625rem var(--primary_black);

  color: white;

  transition: 0.3s;

}



.filter li.is-active {

  background-color: black;

  color: white;

  pointer-events: none;

}







.category li {

  display: none;

}



.category li.is-show {

  display: block;

}



.checker1 img {

  position: absolute;

  width: 68.7%;

  height: auto;

  top: 8.5625rem;

  right: auto;

  left: 0;

  z-index: 0;

  filter: blur(0.45px);

}



.checker_pc {

  display: none;

}



.category_checker::after {

  position: absolute;

  content: '';

  display: inline-block;

  width: 78.7%;

  height: 5.8125rem;

  background-image: url(../images/checker_2.png);

  background-size: contain;

  background-position: center;

  background-repeat: no-repeat;

  bottom: 1.4rem;

  right: 0;

  z-index: 2;

  filter: blur(0.45px);

}



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



  .maintitle {

    width: 43.9375rem;

    padding-top: 11.1625rem;

    margin-left: 9.3%;

  }



  .category {

    width: 72.6375rem;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: flex-start;

    padding-bottom: 6.563125rem;

    gap: 2rem 3.2rem;

  }



  .category img {

    flex-grow: 1;

    object-fit: cover;

    width: 21rem;

    height: 24.6rem;

  }



  .product-list-item {

    width: auto;

    border-radius: 1.183125rem;

    border: solid 0.55rem;

  }



  .filter {

    gap: 0.6375rem;

    margin: 2.56rem 1.066666666666rem 1.36rem 9.3%;

  }



  .filter li {

    width: 7.6875rem;

    height: 3.6875rem;

    font-size: 1.3125rem;

    border-radius: 2.635875rem;

    border: solid 0.28125rem;

  }



  .category-list-item {

    margin-top: 0.2rem;

  }



  .checker_sp {

    display: none;

  }



  .checker_pc {

    display: block;

  }



  .checker1 img {

    width: 74.7%;

    top: 8.5625rem;

    right: auto;

  }



  .category_checker {

    will-change: opacity, transform;

  }



  .category_checker::after {

    width: 76.7%;

    height: 16.8125rem;

    background-image: url(../images/checker_pc_2.webp);

    bottom: 2.4rem;

  }



}



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

  .maintitle {

    width: 43.9375rem;

    padding-top: 11.1625rem;

    margin-left: 9.6458333335%;

  }



  .category {

    width: 80.888%;

    display: flex;

    flex-direction: column;

    gap: 2.21875rem;

    margin: 0 auto;

    padding-bottom: 5.563125rem;

    position: relative;

    z-index: 100;

  }



  .category img {

    flex-grow: 1;

    object-fit: cover;

    height: auto;

  }



  .product-list-item {

    width: auto;

    border-radius: 4.183125rem;

    border: solid 0.9rem;

    overflow: hidden;

  }



  .filter {

    display: flex;

    gap: 0.6375rem;

    margin: 2.56rem 1.066666666666rem 1.36rem 9.6458333335%;

    z-index: 100;

  }



  .filter li {

    width: 7.6875rem;

    height: 3.6875rem;

    font-size: 1.3125rem;

    border-radius: 2.635875rem;

    border: solid 0.28125rem;

  }



  .checker_sp {

    display: none;

  }



  .checker_pc {

    display: block;

  }



  .checker1 img {

    position: absolute;

    width: 74.7%;

    height: auto;

    top: 8.5625rem;

    right: auto;

    left: 0;

    z-index: 0;



  }



  .main-works::after {

    width: 76.7%;

    height: 16.8125rem;

    background-image: url(../images/checker_pc_2.webp);

    bottom: 2.4rem;

    right: 0;

    z-index: 2;

  }



}





#grayDisplay {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  max-width: 100% !important;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  z-index: 100;

}



/* 改造版 */



#grayDisplay div {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  margin: 7rem auto;

  padding: 1.5rem;

  max-width: 93%;

  max-height: 100%;

  height: auto;

  object-fit: contain;

  width: 93%;

  text-align: center;

  border-radius: 0;

  display: flex;

  flex-direction: column;

  justify-content: start;

  background-color: var(--primary_truewhite);

  border-radius: 2rem;

  border: solid 0.45rem;

}



#grayDisplay img {

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  max-height: 100%;

  height: auto;

  object-fit: contain;

  pointer-events: none;

}



#grayDisplay p {

  margin-top: 5.8%;

  position: static;

  display: block;

  color: var(--primary_black);

  font-family: "Zen Maru Gothic", sans-serif;

  font-size: 1rem;

  object-fit: contain;

  letter-spacing: 0.08rem;

    font-weight: 700;

}



.worksname_visible {

  display: block;

}



.product-list-item p {

  display: none;

}



/* tablet */

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

  #grayDisplay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    max-width: 100% !important;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    z-index: 100;

  }



  /* 改造版 */



  #grayDisplay div {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    margin: 11rem auto;

    padding: 4.5rem;

    max-width: 90%;

    max-height: 100%;

    height: auto;

    object-fit: contain;

    width: 89%;

    text-align: center;

    border-radius: 0;

    display: flex;

    flex-direction: column;

    justify-content: start;

    background-color: var(--primary_truewhite);

    border-radius: 3rem;

    border: solid 0.55rem;

  }



  #grayDisplay img {

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    max-height: 100%;

    height: auto;

    object-fit: contain;

  }



  #grayDisplay p {

    margin-top: 3.8%;

    position: static;

    display: block;

    color: var(--primary_black);

    font-family: "Zen Maru Gothic", sans-serif;


    font-size: 1.5rem;

    object-fit: contain;

    letter-spacing: 0.08rem;

  }



  .worksname_visible {

    display: block;

  }

}





/* pc */

@media screen and (min-width:1025px) {

  #grayDisplay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    max-width: 100% !important;

    height: 100%;

    z-index: 100;

  }



  /* 改造版 */



  #grayDisplay div {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    margin: 7rem auto;

    padding: 5rem;

    max-width: 90%;

    max-height: 100%;

    height: 81%;

    object-fit: contain;

    width: 88%;

    text-align: center;

    border-radius: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background-color: var(--primary_truewhite);

    border-radius: 3rem;

    border: solid 0.55rem;

  }



  #grayDisplay img {

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    max-height: 100%;

    height: auto;

    object-fit: contain;



  }



  #grayDisplay p {

    margin-top: 2.5%;

    position: static;

    display: block;

    color: var(--primary_black);

    font-family: "Zen Maru Gothic", sans-serif;


    font-size: 1.8rem;

    object-fit: contain;

    letter-spacing: 0.08rem;

  }



  .worksname_visible {

    display: block;

  }



}