@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: 50%;
   max-width: 360px;
   height: auto;
   margin-top: 48vw;
   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: 43vw;
   height: auto;
   margin-top: 31vw;
   display: inline-block;
   animation: action1 .5s;
}
.topbg {
  animation: action1 .8s;
}
.c-btn {
   position: absolute;
   bottom: 50px;
   left:   -5px;
   width: 60px;
   height: auto;
   z-index: 50;
   background: #fff;
   writing-mode: vertical-rl;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
}
.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_sp.png) no-repeat right top;
   background-size:  cover;
   image-rendering: -webkit-optimize-contrast;
   z-index: 2;
}
.bg_a1 {
   position: absolute;
   top: 33vw;
   left: 4vw;
   width: 27vw;
   z-index: 3;
}
.bg_a2 {
   position: absolute;
   bottom: 10vw;
   left: 17vw;
   width: 29vw;
   z-index: 4;
}
.bg_a3 {
   position: absolute;
   top: 101vw;
   right: 7vw;
   width: 22vw;
   z-index: 5;
}
.bg_a4 {
   position: absolute;
   top: 9vw;
   right: 28vw;
   width: 15vw;
   z-index: 5;
}
.bg_a1 img, .bg_a2 img, .bg_a3 img, .bg_a4 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);
}
.animation-item {
   display: none;
}
#i_sub1, #i_sub2, #i_sub3, #i_sub4, #i_sub5 {
   position: absolute;
   height: auto;
   overflow: hidden;
}
#i_sub1 img{
   width: 19vw;
   height: auto;
}
#i_sub2 img,#i_sub3 img, #i_sub4 img, #i_sub5 img {
   width: 15vw;
   height: auto;
 }
#i_sub2 img, #i_sub3 img, #i_sub4 img, #i_sub5 img {
   margin-top: 10vw;
}
#i_sub1 {
   top: 5vw;
   right: -3vw;
   text-align: right;
   animation: subRani .5s ease-out 0s 1 normal;
}
#i_sub2 {
  top: calc(20vw*12);
  left: -3vw;
  height: 30vw;
 
  animation: subLani .5s ease-out 0s 1 normal;
}
#i_sub3 {
 top: calc(20vw*30);
   right: -3vw;
  
   text-align: right;
   animation: subRani .5s ease-out 0s 1 normal;
}
#i_sub4 {
 top: calc(20vw*40);
 left: -3vw;

 animation: subLani .5s ease-out 0s 1 normal;
}
#i_sub5 {
 top: calc(20vw*47);
  right: -3vw;

 animation: subRani .5s ease-out 0s 1 normal;
}

@media screen and (min-width:520px) {
   
 #i_sub1, #i_sub2, #i_sub3, #i_sub4 {
 width: 10vw;
 height: auto;
}
 #i_sub1 {
 top: 10.1vw;
}
 #i_sub2 {
 top: calc(10.1vw*6);
}
 #i_sub3 {
 top: calc(10.1vw*12);
}
 #i_sub4 {
 top: calc(10.1vw*17);
}
}
@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: 31vw;
     margin-top: 16vw;
  }
  .topbg {
     position: absolute;
     width: 100%;
     height: auto;
     top: 0;
     height:   100vw;
     overflow:   hidden;
  }
  .toplogo {
     height:100vw;
  }
  .toplogo img {
     width: 50%;
     max-width: 34vw;
     height: auto;
     margin-top: 28vw;
     animation: action1 .5s;
  }
  .bg_base {
     position: absolute;
     width: 100%;
     height:100vw;
     top:0;
     background:transparent url(../img/bg_tab.png) no-repeat center top;
     background-size:   100% auto;
     image-rendering: -webkit-optimize-contrast;
     z-index: 2;
  }
  .bg_a1 {
     top: 35vw;
     left: 13vw;
     width: 20vw;
  }
  .bg_a2 {
     position: absolute;
     left: 17vw;
     bottom: 2vw;
     width: 20vw;
     z-index: 4;
  }
  .bg_a3 {
     top: 46vw;
     right: 20vw;
     width: 16vw;
     z-index: 5;
  }
  .bg_a4 {
     position: absolute;
     top: 12vw;
     right: 0vw;
     width: 10vw;
     z-index: 5;
  }
  .btn_gallery {
     top: 90vw;
     width: 25vw;
  }
}
@media screen and (min-width: 960px) {
  
  #top {
     overflow: hidden;
     max-height: 39vw;
  }
  .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: 18vw;
     margin-top: 7.5vw;
  }
  .topcatch img {
     width: 17vw;
     margin-top: 1vw;
  }
  .bg_base {
     position: absolute;
     width: 100%;
     top:0;
     background:transparent url(../img/bg_pc.png) no-repeat center top;
     background-size:  100% auto;
  }
  .bg_a1 {
     top: 14vw;
     left: 19.4vw;
     width: 10vw;
  }
  .bg_a2 {
     top: 28vw;
     left: 26vw;
     width: 10vw;
  }
  .bg_a3 {
     top: 7vw;
     right: 6vw;
     width: 8vw;
     height: auto;
  }
  .bg_a4 {
     top: 26.5vw;
     right: 33vw;
     width: 5vw;
     z-index: 5;
  }
  .btn_gallery {
     top: 32vw;
     width: 13vw;
  }
}

 @media screen and (min-width:1200px) {
 #i_sub1, #i_sub2, #i_sub3, #i_sub4 {
 width: 10vw;
 height: auto;
}
 #i_sub1 img, #i_sub2 img, #i_sub3 img, #i_sub4 img {
 margin-top: 20px;
}
 #i_sub1 {
 top: 9.6vw;
}
 #i_sub2 {
 top: calc(9.6vw*4);
}
 #i_sub3 {
 top: calc(9.6vw*8);
}
 #i_sub4 {
 top: calc(9.6vw*12);
}
}
@media screen and (min-width:1600px) {
 #i_sub1, #i_sub2, #i_sub3, #i_sub4 {
 width: 8vw;
 height: auto;
}
 #i_sub1 img, #i_sub2 img, #i_sub3 img, #i_sub4 img {
 margin-top: 20px;
}
 #i_sub1 {
 top: 6.1vw;
}
 #i_sub2 {
 top: calc(6.1vw*4);
}
 #i_sub3 {
 top: calc(6.1vw*8);
}
 #i_sub4 {
 top: calc(6.1vw*10);
}
}
@keyframes action1 {
  0% {
     opacity:  0;
  }
  100% {
     opacity:    100;
  }
}
@keyframes action2 {
  0% {
     transform: scale(1, 1);
  }
  80% {
     transform: scale(1.1, 1.1);
  }
  100% {
     transform: scale(1, 1);
  }
}
 @keyframes subRani {
 0% {
right:-6vw;
}
 100% {
right: -3vw;
}
}
 @keyframes subLani {
 0% {
left: -6vw;
}
 100% {
left: -3vw;
}
}