@charset "UTF-8";
/* ILLUST-スライダー */
.illust_slider {
  width: 100%;
  height: 48.698vw;
}
@media screen and (max-width: 767px) {
  .illust_slider {
    height: 165.421vw;
    overflow: hidden;
  }
}
.illust_slider .illust_slider_li {
  position: relative;
  z-index: 0;
}
.illust_slider .illust_slider_li.active::before, .illust_slider .illust_slider_li.active::after {
  clip-path: inset(0);
  transition-delay: 0.5s;
}
.illust_slider .illust_slider_li::before, .illust_slider .illust_slider_li::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}
.illust_slider .illust_slider_li::before {
  width: 59.271vw;
  height: 18.281vw;
  background-image: url(./images/slider-line-left-01.webp);
  top: 26.615vw;
  left: 0;
  clip-path: inset(0 100% 0 0);
  transition: all 0.4s;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li::before {
    width: 82.243vw;
    height: 63.785vw;
    background-image: url(./images/slider-line-left-01-sp.webp);
    top: 69.626vw;
  }
}
.illust_slider .illust_slider_li::after {
  width: 62.604vw;
  height: 31.719vw;
  background-image: url(./images/slider-line-right-01.webp);
  top: 9.792vw;
  right: 0;
  clip-path: inset(0 0 0 100%);
  transition: all 0.4s;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li::after {
    width: 102.804vw;
    height: 141.355vw;
    background-image: url(./images/slider-line-right-01-sp.webp);
    top: 7.009vw;
  }
}
.illust_slider .illust_slider_li .img {
  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: translateY(-10px);
  transition: all ease-in-out 0.6s;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li .img::after {
    display: none;
  }
}
.illust_slider .illust_slider_li .bg {
  width: 57.188vw;
  position: absolute;
  top: 0;
  left: 15vw;
  z-index: -1;
  opacity: 0;
  transition: all ease-in-out 0.6s;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li .bg {
    width: 100%;
    top: 1vw;
    left: 0;
  }
}
.illust_slider .illust_slider_li .illust-01,
.illust_slider .illust_slider_li .illust-02 {
  pointer-events: none;
}
.illust_slider .illust_slider_li .illust-01.active,
.illust_slider .illust_slider_li .illust-02.active {
  pointer-events: all;
}
.illust_slider .illust_slider_li .illust-01.active .img,
.illust_slider .illust_slider_li .illust-02.active .img {
  opacity: 1;
  transform: translateY(0px);
}
.illust_slider .illust_slider_li .illust-01.active .img::after,
.illust_slider .illust_slider_li .illust-02.active .img::after {
  opacity: 1;
  transform: translate(0%, 0%);
}
.illust_slider .illust_slider_li .illust-01.active .bg,
.illust_slider .illust_slider_li .illust-02.active .bg {
  opacity: 1;
}
.illust_slider .illust_slider_li .illust-01 .img {
  width: 22.76vw;
  top: 10.5vw;
  right: 25.5vw;
}
.illust_slider .illust_slider_li .illust-01 .img::after {
  content: "";
  width: 25.677vw;
  height: 43.177vw;
  background-image: url(./images/slider-img-bg-01-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -5vw;
  left: 6vw;
  z-index: -1;
  opacity: 0;
  transform: translate(-10%, 2%);
  transition: all ease-in-out 0.6s;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li .illust-01 .img {
    width: 74.766vw;
    top: 36vw;
    right: 1vw;
  }
}
.illust_slider .illust_slider_li .illust-02 .img {
  width: 30.469vw;
  top: 4vw;
  right: 17vw;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li .illust-02 .img {
    width: 80.841vw;
    top: 34vw;
    right: 5vw;
  }
}
.illust_slider .illust_slider_li-02::before {
  background-image: url(./images/slider-line-left-02.webp);
}
.illust_slider .illust_slider_li-02::after {
  background-image: url(./images/slider-line-right-02.webp);
}
.illust_slider .illust_slider_li-02 .illust-01 .img {
  width: 17.76vw;
  top: 9.5vw;
  right: 27.5vw;
}
.illust_slider .illust_slider_li-02 .illust-01 .img::after {
  width: 20.052vw;
  height: 45.99vw;
  background-image: url(./images/slider-img-bg-02-01.webp);
  top: -6.5vw;
  left: 5vw;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li-02::before {
    background-image: url(./images/slider-line-left-02-sp.webp);
  }
  .illust_slider .illust_slider_li-02::after {
    background-image: url(./images/slider-line-right-02-sp.webp);
  }
  .illust_slider .illust_slider_li-02 .illust-01 .img {
    width: 65.654vw;
    top: 14vw;
    right: 2vw;
  }
}
.illust_slider .illust_slider_li-03::before {
  background-image: url(./images/slider-line-left-03.webp);
}
.illust_slider .illust_slider_li-03::after {
  background-image: url(./images/slider-line-right-03.webp);
}
.illust_slider .illust_slider_li-03 .illust-01 .img {
  width: 30.417vw;
  top: 13.5vw;
  right: 22vw;
}
.illust_slider .illust_slider_li-03 .illust-01 .img::after {
  width: 36.51vw;
  height: 39.01vw;
  background-image: url(./images/slider-img-bg-03-01.webp);
  top: -6.5vw;
  left: 0vw;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li-03::before {
    background-image: url(./images/slider-line-left-03-sp.webp);
  }
  .illust_slider .illust_slider_li-03::after {
    background-image: url(./images/slider-line-right-03-sp.webp);
  }
  .illust_slider .illust_slider_li-03 .illust-01 .img {
    width: 99.766vw;
    top: 42.5vw;
    right: -18vw;
  }
}
.illust_slider .illust_slider_li-04::before {
  background-image: url(./images/slider-line-left-04.webp);
}
.illust_slider .illust_slider_li-04::after {
  background-image: url(./images/slider-line-right-04.webp);
}
.illust_slider .illust_slider_li-04 .illust-01 .img {
  width: 23.646vw;
  top: 11vw;
  right: 25vw;
}
.illust_slider .illust_slider_li-04 .illust-01 .img::after {
  width: 28.385vw;
  height: 45.208vw;
  background-image: url(./images/slider-img-bg-04-01.webp);
  top: -7.5vw;
  left: 0vw;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li-04::before {
    background-image: url(./images/slider-line-left-04-sp.webp);
  }
  .illust_slider .illust_slider_li-04::after {
    background-image: url(./images/slider-line-right-04-sp.webp);
  }
  .illust_slider .illust_slider_li-04 .illust-01 .img {
    width: 77.804vw;
    top: 29.5vw;
    right: -6vw;
  }
}
.illust_slider .illust_slider_li-05::before {
  background-image: url(./images/slider-line-left-05.webp);
}
.illust_slider .illust_slider_li-05::after {
  background-image: url(./images/slider-line-right-05.webp);
}
.illust_slider .illust_slider_li-05 .illust-01 .img {
  width: 22.708vw;
  top: 10.5vw;
  right: 25.5vw;
}
.illust_slider .illust_slider_li-05 .illust-01 .img::after {
  width: 27.24vw;
  height: 45.938vw;
  background-image: url(./images/slider-img-bg-05-01.webp);
  top: -7.5vw;
  left: 0vw;
}
@media screen and (max-width: 767px) {
  .illust_slider .illust_slider_li-05::before {
    background-image: url(./images/slider-line-left-05-sp.webp);
  }
  .illust_slider .illust_slider_li-05::after {
    background-image: url(./images/slider-line-right-05-sp.webp);
  }
  .illust_slider .illust_slider_li-05 .illust-01 .img {
    width: 82.477vw;
    top: 20.5vw;
    right: -15vw;
  }
}

.name_slider {
  width: 31.979vw;
  height: 10.313vw;
  background: url(./images/name-bg.webp) no-repeat center center/contain;
  position: absolute;
  top: 23.5vw;
  left: 19vw;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .name_slider {
    width: 75.234vw;
    height: 25.701vw;
    background: url(./images/name-bg-sp.webp) no-repeat center center/contain;
    top: 104vw;
    left: 4vw;
  }
}
.name_slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.name_slider li p {
  color: #ffffff;
  text-align: center;
  transition: transform ease-in-out 0.4s, opacity 0.4s;
}
.name_slider li p:first-of-type {
  font-family: "the-seasons", "Shippori Mincho", serif;
  font-size: 4vw;
  width: 88%;
  padding: 1vw 0 0 1vw;
  opacity: 0;
  transform: translateX(-10%);
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .name_slider li p:first-of-type {
    font-size: 10vw;
    width: 94%;
    padding: 3vw 0 0 2vw;
  }
}
.name_slider li p:last-of-type {
  font-size: 2.24vw;
  letter-spacing: -0.075em;
  width: 58%;
  margin-left: auto;
  padding: 0.7vw 0 0;
  opacity: 0;
  pointer-events: none;
  transition: transform ease-in-out 0s, opacity 0s;
}
@media screen and (max-width: 767px) {
  .name_slider li p:last-of-type {
    font-size: 5.607vw;
    width: 62%;
    padding: 1vw 0 0;
  }
}
.name_slider li.name_slider_li-02 p:first-of-type small {
  font-size: 84%;
}
.name_slider li.active p:first-of-type {
  opacity: 1;
  transform: translateX(0%);
  pointer-events: all;
  transition-delay: 0.3s, 0.3s;
}
.name_slider li.active p:last-of-type {
  transform: translateX(0%);
  opacity: 1;
  pointer-events: all;
}

.thmb_slider {
  width: 27.344vw;
  height: 4.635vw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: absolute;
  top: 42vw;
  left: 22vw;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .thmb_slider {
    width: 83.178vw;
    height: 14.486vw;
    top: auto;
    bottom: 2vw;
    left: 6vw;
  }
}
.thmb_slider li {
  margin-right: -1vw;
  cursor: pointer;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .thmb_slider li {
    margin-right: -3vw;
  }
}
.thmb_slider li::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(./images/thumb-img-black.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 1;
  opacity: 0.6;
  transition: all 0.4s;
}
.thmb_slider li::after {
  content: "";
  width: 6.198vw;
  height: 5.729vw;
  background-image: url(./images/thumb-bg-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(6deg);
  opacity: 0;
  z-index: -1;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  .thmb_slider li::after {
    width: 19.159vw;
    height: 17.991vw;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
@media screen and (min-width: 767px) {
  .thmb_slider li:hover::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
}
.thmb_slider li.active::before {
  opacity: 0;
}
.thmb_slider li.active::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
}
.thmb_slider li.thmb_slider_li-02::after {
  background-image: url(./images/thumb-bg-02.webp);
}
.thmb_slider li.thmb_slider_li-03::after {
  background-image: url(./images/thumb-bg-03.webp);
}
.thmb_slider li.thmb_slider_li-04::after {
  background-image: url(./images/thumb-bg-04.webp);
}
.thmb_slider li.thmb_slider_li-05::after {
  background-image: url(./images/thumb-bg-05.webp);
}

button {
  font-family: "the-seasons", sans-serif;
  font-size: 1.875vw;
  color: #ffffff;
  text-align: center;
  width: 17.344vw;
  height: 4.01vw;
  filter: drop-shadow(10px 10px 0 #000000);
  position: absolute;
  top: 35vw;
  left: 28vw;
  z-index: 0;
  backface-visibility: hidden;
  transform: translateZ(0);
}
button::before {
  content: "";
  width: inherit;
  height: inherit;
  background-image: url(./images/btn-visualchange-bg.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}
button.flicker-active span {
  animation: Titika-Moveka 0.6s 1;
}
@media screen and (min-width: 767px) {
  button:hover {
    color: #e30211;
  }
  button:hover::before {
    filter: brightness(0) invert(1);
    animation: active-impact-btn 0.2s forwards;
  }
  button:hover span {
    animation: none !important;
    opacity: 1 !important;
  }
}
@media screen and (max-width: 767px) {
  button {
    font-size: 4.673vw;
    width: 44.393vw;
    height: 10.981vw;
    top: auto;
    bottom: 24vw;
    left: 6vw;
    padding-bottom: 0.4vw;
    padding-left: 1.5vw;
    filter: drop-shadow(5px 5px 0 #000000);
  }
}

/* ILLUST-スライダー *//*# sourceMappingURL=slider.css.map */