#custom-mainimage {
  --sec-01-stand: .5s;
  --sec-01-takes: 1s;
  --sec-02-stand: 0.5s;
  --sec-02-takes: 0.8s;
  --sec-03-stand: 0.3s;
  --sec-03-takes: 1s;
  --sec-slick: 5s;
  --sec-02-total: calc(var(--sec-01-stand) + var(--sec-01-takes) + var(--sec-02-stand));
  --sec-03-total: calc(var(--sec-01-stand) + var(--sec-01-takes) + var(--sec-02-stand) + var(--sec-02-takes) + var(--sec-03-stand));
  position: relative;
  background: url(../img/mainimage-custom/main-pc-bg-001.jpg) right top no-repeat;
  background-size: min(1600px, 83.3%) 100%;
  aspect-ratio: 12/5;
  overflow: hidden;
}
#custom-mainimage img {
  width: 100%;
}
#custom-mainimage .mainimg-opening {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FAFFEB;
  animation: opening-01 var(--sec-03-takes) var(--sec-03-total) 1 both;
}
#custom-mainimage .mainimg-opening::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 138px;
  aspect-ratio: 1;
  background: url(../img/mainimage-custom/loading-logo.svg) center/contain no-repeat;
  animation: opening-logo01 var(--sec-01-takes) ease-in var(--sec-01-stand) 1 both, opening-logo02 var(--sec-02-takes) var(--sec-02-total) 1 forwards;
}
#custom-mainimage .mainimg-item {
  position: absolute;
  bottom: 100%;
  left: min(60px, 3.1%);
  width: min(1020px, 53.1%);
  aspect-ratio: 17/11;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  animation: item-01 var(--sec-03-takes) var(--sec-03-total) 1 both cubic-bezier(0.075, 0.82, 0.165, 1);
}
#custom-mainimage .mainimg-item .slick-active {
  animation: item-02 var(--sec-slick) 1 both;
}
#custom-mainimage .mainimg-item .slick-active.slick-start {
  animation: item-02 var(--sec-slick) 1.5s 1 both;
}
#custom-mainimage .mainimg-item.slick-slider .slick-track {
  overflow: hidden;
}
#custom-mainimage .mainimg-copy {
  position: absolute;
  top: 150%;
  right: min(130px, 6.8%);
  transform: translateY(-50%);
  width: min(576px, 30%);
  aspect-ratio: 576/149;
  animation: copy-01 var(--sec-03-takes) var(--sec-03-total) 1 both cubic-bezier(0.165, 0.84, 0.44, 1);
}
#custom-mainimage .mainimg-btn {
  position: absolute;
  bottom: 100%;
  right: min(40px, 2.1%);
  width: min(182px, 9.5%);
  aspect-ratio: 1;
  animation: btn-01 var(--sec-03-takes) var(--sec-03-total) 1 both cubic-bezier(0.19, 1, 0.22, 1);
}
#custom-mainimage .mainimg-btn a {
  display: block;
  transition: background-image 0.3s;
  width: 100%;
  aspect-ratio: 1;
  background: url(../img/mainimage-custom/search-btn-001.png) center/contain no-repeat;
}
@media (any-hover: hover) {
  #custom-mainimage .mainimg-btn a:hover {
    background-image: url(../img/mainimage-custom/search-btn-002.png);
  }
}
@keyframes opening-logo01 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opening-logo02 {
  0% {
    opacity: 1;
    width: 138px;
  }
  100% {
    opacity: 0;
    width: 0;
  }
}
@keyframes opening-01 {
  0% {
    top: 0;
  }
  100% {
    top: -100%;
  }
}
@keyframes item-01 {
  0% {
    bottom: 100%;
  }
  100% {
    bottom: 0;
  }
}
@keyframes item-02 {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes copy-01 {
  0% {
    top: 150%;
  }
  100% {
    top: 50%;
  }
}
@keyframes btn-01 {
  0% {
    bottom: 100%;
  }
  100% {
    bottom: min(30px, 3.8%);
  }
}

#top-nav {
  margin-top: -120px;
  padding-top: 120px;
}

#announce {
  position: relative;
  z-index: 2;
}/*# sourceMappingURL=mainimage-custom.css.map */