#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-sp-bg-001.jpg) center/cover no-repeat;
  aspect-ratio: 25/34;
  overflow: hidden;
}
@media (min-width: 768px) {
  #custom-mainimage {
    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;
  }
}
#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: min(69px, 18.4%);
  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;
}
@media (min-width: 768px) {
  #custom-mainimage .mainimg-opening::after {
    width: 138px;
    animation: opening-logo01 var(--sec-01-takes) ease-in var(--sec-01-stand) 1 both, opening-logo02_md var(--sec-02-takes) var(--sec-02-total) 1 forwards;
  }
}
#custom-mainimage .mainimg-item {
  position: absolute;
  top: -100%;
  left: 0;
  width: max(336px, 89.6%);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0 20px 20px 0;
  animation: item-01 var(--sec-03-takes) var(--sec-03-total) 1 both cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media (min-width: 768px) {
  #custom-mainimage .mainimg-item {
    top: auto;
    bottom: 100%;
    left: min(60px, 3.1%);
    width: min(1020px, 53.1%);
    aspect-ratio: 17/11;
    border-radius: 20px 20px 0 0;
    animation: item-01_md 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: 20px;
  width: max(280px, 74.7%);
  aspect-ratio: 7/2;
  animation: copy-01 var(--sec-03-takes) var(--sec-03-total) 1 both cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 768px) {
  #custom-mainimage .mainimg-copy {
    right: min(130px, 6.8%);
    transform: translateY(-50%);
    width: min(576px, 30%);
    aspect-ratio: 576/149;
    animation: copy-01_md 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%;
  left: 50%;
  transform: translateX(-50%);
  width: max(89px, 23.7%);
  aspect-ratio: 1;
  animation: btn-01 var(--sec-03-takes) var(--sec-03-total) 1 both cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 768px) {
  #custom-mainimage .mainimg-btn {
    bottom: 100%;
    right: min(40px, 2.1%);
    left: auto;
    transform: translateX(0);
    width: min(182px, 9.5%);
    animation: btn-01_md 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;
  width: 100%;
  aspect-ratio: 1;
  background: url(../img/mainimage-custom/search-btn-001.png) center/contain no-repeat;
}
@keyframes opening-logo01 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opening-logo02 {
  0% {
    opacity: 1;
    width: min(69px, 18.4%);
  }
  100% {
    opacity: 0;
    width: 0;
  }
}
@keyframes opening-logo02_md {
  0% {
    opacity: 1;
    width: 138px;
  }
  100% {
    opacity: 0;
    width: 0;
  }
}
@keyframes opening-01 {
  0% {
    top: 0;
  }
  100% {
    top: -100%;
  }
}
@keyframes item-01 {
  0% {
    top: -100%;
  }
  100% {
    top: 0;
  }
}
@keyframes item-01_md {
  0% {
    top: auto;
    bottom: 100%;
  }
  100% {
    top: auto;
    bottom: 0;
  }
}
@keyframes item-02 {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes copy-01 {
  0% {
    top: 150%;
  }
  100% {
    top: 60.8%;
  }
}
@keyframes copy-01_md {
  0% {
    top: 150%;
  }
  100% {
    top: 50%;
  }
}
@keyframes btn-01 {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: min(11px, 2.2%);
  }
}
@keyframes btn-01_md {
  0% {
    bottom: 100%;
  }
  100% {
    bottom: min(30px, 3.8%);
  }
}

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

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