@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;600;900&display=swap"); /* ==========================================================
!import
========================================================== */
/* ==========================================================
!mediaQuery
========================================================== */
/*
 * trialpage.css
 * Last modify 2025/07/16 11:05
 */
/* -----------------------------------------------------
Base Style
----------------------------------------------------- */
body {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 100vh;
  background: url("../img/img_slider01_sp.jpg") no-repeat center center;
  background-size: cover;
}
@media screen and (min-width: 751px) {
  body {
    background: url("../img/img_slider01.jpg") no-repeat center center;
    background-size: cover;
  }
}

body.webp {
  background: url("../img/img_slider01_sp.webp") no-repeat center center;
  background-size: cover;
}
@media screen and (min-width: 751px) {
  body.webp {
    background: url("../img/img_slider01.webp") no-repeat center center;
    background-size: cover;
  }
}

/* ==========================================================
!Header
========================================================== */
/* !content
---------------------------------------------------------- */
/* !commentArea
---------------------------------------------------------- */
/* !trialArea
---------------------------------------------------------- */
#trialArea {
  position: relative;
  width: 94.68vw;
  max-height: 90vh;
  margin: 0 auto;
  padding: 13.33vw 10.33vw;
  background: #fff;
}
@media screen and (min-width: 751px) {
  #trialArea {
    display: flex;
    align-items: center;
    padding: 7.03vw 7.03vw;
  }
}
@media screen and (min-width: 1281px) {
  #trialArea {
    padding: 90px 90px;
  }
}
@media screen and (max-width: 750px) {
  #trialArea #gallery_pc {
    display: none;
  }
}
@media screen and (min-width: 751px) {
  #trialArea #gallery_sp {
    display: none;
  }
}
#trialArea nav img {
  width: 100%;
  transition: all 0.5s;
}
#trialArea nav img:hover {
  cursor: pointer;
  opacity: 0.6;
}
#trialArea nav .close {
  position: absolute;
  display: block;
  content: "";
  width: 13.6vw;
  height: 13.6vw;
  top: 0;
  right: 0;
  z-index: 10;
}
#trialArea nav .slide-arrow {
  position: absolute;
  width: 3.2vw;
  height: 8.8vw;
  top: 50%;
  transition: all 0.5s;
}
#trialArea nav .slide-arrow:hover {
  cursor: pointer;
  opacity: 0.6;
}
#trialArea nav .slide-arrow.disabled {
  display: none !important;
}
#trialArea nav .next-arrow {
  left: 2.78vw;
}
#trialArea nav .prev-arrow {
  right: 2.78vw;
}
@media screen and (min-width: 751px) {
  #trialArea nav .close {
    width: 6.56vw;
    height: 6.56vw;
  }
  #trialArea nav .slide-arrow {
    width: 1.87vw;
    height: 5vw;
  }
  #trialArea nav .next-arrow {
    left: 1.56vw;
  }
  #trialArea nav .prev-arrow {
    right: 1.56vw;
  }
}
@media screen and (min-width: 1281px) {
  #trialArea nav .close {
    width: 84px;
    height: 84px;
  }
  #trialArea nav .slide-arrow {
    width: 24px;
    height: 64px;
  }
  #trialArea nav .next-arrow {
    left: 20px;
  }
  #trialArea nav .prev-arrow {
    right: 20px;
  }
}
#trialArea .innerWrap {
  height: 106.13vw;
  max-height: 60vh;
  border: 1px solid #999;
  overflow: scroll;
}
@media screen and (min-width: 751px) {
  #trialArea .innerWrap {
    width: 80.62vw;
    height: 70vh;
    max-height: 70vh;
    margin: 0 auto;
  }
}
#trialArea .innerWrap ul {
  position: relative;
}
#trialArea .innerWrap ul li {
  position: absolute;
  opacity: 0;
  text-align: center;
  transition: all 0.5s;
}
#trialArea .innerWrap ul li:first-child {
  opacity: 1;
}
#trialArea .innerWrap ul li img {
  transition: all 0.5s;
}
/*# sourceMappingURL=trialpage.css.map */