@charset "utf-8";

#top {
   position: relative;
   height: 170vw;
   width: 100%;
   overflow: hidden;
}
.toplogo {
   position: relative;
   text-align: center;
   width: 100%;
   height: 180vw;
   z-index: 19;
  transition-duration: .5s;
}
.toplogo img {
   width: 39%;
   max-width: 360px;
   height: auto;
   margin-top: 51vw;
   display: inline-block;
   animation: action1 .5s;
}
.topcatch {
   position: absolute;
   text-align: center;
   width: 100%;
   height: auto;
   z-index: 20;
  transition-duration: .5s;
}
.topcatch img {
   width: 23vw;
   height: auto;
   margin-top: 26vw;
   display: inline-block;
   animation: action1 .5s;
}
.topbg {
  animation: action1 .8s;
}
.c-btn {
   position: absolute;
   bottom: 0;
   left:   -5px;
   width: 60px;
   height: auto;
   z-index: 50;
   background: #fff;
   color: #69534B;
   writing-mode: vertical-rl;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
   border: 5px solid #E5817D;
}
.c-btn p {
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 600;
   font-size: 1.4rem;
   margin: 1rem 0;
}
a:hover .c-btn {
   transform: translateY(-10px);

}
.bg_base {
   position: absolute;
   width: 100%;
   height: 170vw;
   top:0;
   background:transparent url(../img/bg_sp2026.png) no-repeat right top;
   background-size:  cover;
   image-rendering: -webkit-optimize-contrast;
   z-index: 2;
}
.bg_a1 {
   position: absolute;
   top: 11vw;
   left: 32vw;
   width: 11vw;
   z-index: 3;
}
.bg_a2 {
   position: absolute;
   top: 11vw;
   right: 30vw;
   width: 12vw;
   z-index: 4;
}
.bg_a3 {
   position: absolute;
   top: 20vw;
   left: 12vw;
   width: 17vw;
   z-index: 5;
}
.bg_a4 {
   position: absolute;
   top: 121vw;
   right: 5vw;
   width: 16.5vw;
   z-index: 6;
}
.bg_a5 {
   position: absolute;
   top: 123vw;
   left: 25vw;
   width: 15vw;
   z-index: 7;
}
.bg_a6 {
   position: absolute;
   top: 120vw;
   right: 21vw;
   width: 19vw;
   z-index: 8;
   animation: floatStep 2s steps(4) infinite;
}
.bg_a1 img, .bg_a2 img, .bg_a3 img, .bg_a4 img, .bg_a5 img, .bg_a6 img {
   width: 100%;
   height: auto;
}
.btn_gallery {
   position: absolute;
   top: 150vw;
   width: 32vw;
   height: auto;
   right: 0;
   bottom: 0;
   z-index: 21;
  animation: action2 .5s;
}
.btn_gallery img {
   width: 100%;
}
a:hover .btn_gallery {
   transform: translateY(-10px);
}

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

  #top {
     height: 100vw;
     width: 100vw;
     max-height: 100vw;
     overflow: hidden;
  }
  .Topimg {
     height: 90%;
  }
  .toplogo img {
     max-width: 280px;
  }
  .topcatch img {
     width: 19vw;
     margin-top: 13.5vw;
  }
  .topbg {
     position: absolute;
     width: 100%;
     height: auto;
     top: 0;
     height:   100vw;
     overflow:   hidden;
  }
  .toplogo {
     height:100vw;
  }
  .toplogo img {
     width: 50%;
     max-width: 31vw;
     height: auto;
     margin-top: 31vw;
     animation: action1 .5s;
  }
  .bg_base {
     position: absolute;
     width: 100%;
     height:100vw;
     top:0;
     background:transparent url(../img/bg_tab2026.png) no-repeat center top;
     background-size:   100% auto;
     image-rendering: -webkit-optimize-contrast;
     z-index: 2;
  }
  .bg_a1 {
     top: 4vw;
     left: 33vw;
     width: 9vw;
  }
  .bg_a2 {
     position: absolute;
     right: 31vw;
     top: 3vw;
     width: 10vw;
     z-index: 4;
  }
  .bg_a3 {
     top: 14vw;
     left: 10vw;
     width: 13vw;
     z-index: 5;
  }
  .bg_a4 {
     position: absolute;
     top: 71vw;
     right: 19vw;
     width: 13.5vw;
     z-index: 5;
  }
   .bg_a5 {
     position: absolute;
     top: 83vw;
     left: 27vw;
     width: 12.5vw;
     z-index: 5;
  }
   .bg_a6 {
     position: absolute;
     top: 80vw;
     right: 26vw;
     width: 17vw;
     z-index: 5;
  }
  .btn_gallery {
     top: 84vw;
     width: 25vw;
     right: 2vw;
  }
}
@media screen and (min-width: 960px) {
  
  #top {
     overflow: hidden;
     max-height: 39vw;
     width: 100%;
  }
  .Topimg {
     height: 90%;
     transition-duration: .5s;
  }
  .topbg {
     height: 39vw
  }
  .toplogo {
     position: relative;
     text-align: center;
     width: 100%;
     height: 39vw;
     z-index: 20;
     transition-duration: .5s;
  }
  .toplogo img {
     width: 14.5vw;
     margin-top: 10.5vw;
  }
  .topcatch img {
     width: 8vw;
     margin-top: 3vw;
  }
  .bg_base {
     position: absolute;
     width: 100%;
     top:0;
     background:transparent url(../img/bg_pc2026.png) no-repeat center top;
     background-size:  100% auto;
  }
  .bg_a1 {
     top: 2vw;
     left: 40.4vw;
     width: 4vw;
  }
  .bg_a2 {
     top: 1vw;
     right: 40vw;
     width: 5vw;
  }
  .bg_a3 {
     top: 6vw;
     left: 12vw;
     width: 6.5vw;
     height: auto;
  }
  .bg_a4 {
     top: 19.5vw;
     right: 3vw;
     width: 8vw;
     z-index: 5;
  }
  .bg_a5 {
     top: 29.5vw;
     left: 35vw;
     width: 7vw;
     z-index: 5;
  }
  .bg_a6 {
     top: 27.5vw;
     right: 32.5vw;
     width: 10vw;
     z-index: 5;
  }
  .btn_gallery {
     top: 30vw;
     width: 14vw;
  }
  .c-btn p {
   font-size: 1.8rem;
}
}
@keyframes action1 {
  0% {
     opacity:  0;
  }
  100% {
     opacity:    1;
  }
}
@keyframes action2 {
  0% {
     transform: scale(1, 1);
  }
  80% {
     transform: scale(1.1, 1.1);
  }
  100% {
     transform: scale(1, 1);
  }
}
/*anim*/
.bg_a2 img,.bg_a4 img{
    position: absolute;
    will-change: opacity;
 }
.bg_a2 .static {
  animation: toggleStatic 4s infinite steps(1);
}
.bg_a2 .anim {
  animation: toggleAnim 4s infinite steps(1);
}
.bg_a4 .static {
  animation: toggleStatic 5s infinite steps(1);
}
.bg_a4 .anim {
  animation: toggleAnim 5s infinite steps(1);
}

@keyframes toggleStatic {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes toggleAnim {
  0%, 49%   { opacity: 0; }
  50%, 100% { opacity: 1; }
}


.animation-item {
   display: none;
}

.illu-wrap {
 display: flex;
  justify-content: space-between;
  width:100%;
  margin: 0 auto; 
  height: 20vw; 
  max-height: 200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);  
  animation: subani .5s ease-out 0s 1 normal;
}

.illu-wrap img {
  height:  auto;
  display: block;
}

.illu-wrap img.flip {
  transform: scaleX(-1);
  left: -20px;
}
#i_sub1, #i_sub2, #i_sub3, #i_sub4, #i_sub5 {
   position: absolute;
   right: 0;
   width: 100%; 
   height: auto;
   overflow: hidden;
 
}
#i_sub1 img,#i_sub2 img, #i_sub3 img, #i_sub4 img, #i_sub5 img {
   width: auto;
   height: 90%;
   position: absolute;
   right: -20px;
}
#i_sub2 img, #i_sub3 img, #i_sub4 img, #i_sub5 img {
  /* margin-top: 10vw;*/
}
#i_sub1 {
   top: 5vw;
}
#i_sub2 {
  top: calc((20vw*7) + 80vw);
}
#i_sub3 {
  top: calc((20vw*16) + 80vw);
  }
 #i_sub4 {
 top: calc((20vw*25) + 80vw);
}
@media screen and (min-width: 520px) {
#i_sub1 {
   top: 5vw;
}
#i_sub2 {
  top: calc((20vw*5) + 60vw);
}
#i_sub3 {
  top: calc((20vw*10) + 60vw);
  }
 #i_sub4 {
 top: calc((20vw*15) + 60vw);
}
#i_sub1 img,#i_sub2 img, #i_sub3 img, #i_sub4 img, #i_sub5 img {
   height: 80%;
}
}
@media screen and (min-width: 960px) {
#i_sub1 {
   top:0
}
#i_sub2 {
  top: calc((5.5vw*5) + 15vw);
}
#i_sub3 {
  top: calc((5.5vw*10) + 15vw);
  }
 #i_sub4 {
 top: calc((5.5vw*15) + 15vw);
}
#i_sub1 img,#i_sub2 img, #i_sub3 img, #i_sub4 img, #i_sub5 img {
   right: 0;
}
.illu-wrap img.flip {
  left: 0;
}
}
 @keyframes subani {
 0% {
 width:120%;
  margin-top: 50px;
}
 100% {
 width:100%;
 margin-top: 0;
}
}