.img-01, .img-02, .img-03, .img-04 {
   position: absolute;
   width: 105%;
   height: 107%;
   background-position: center;
   background-size: cover;
}

.img-21, .img-22, .img-23, .img-24 {
   position: absolute;
   width: 112%;
   height: 108%;
   background-position: center;
   background-size: cover;
}



/* -----------------------  pc  -------------------------------------- */
.img-01{
   background-image: url('film/top4.jpg');
   animation: slide-animation-01 32s infinite linear;
}
.img-02{
   background-image: url('film/top1.jpg');
   animation: slide-animation-02 32s infinite linear;
}
.img-03{
   background-image: url('film/top10.jpg');
   animation: slide-animation-03 32s infinite linear;
}
.img-04{
   background-image: url('film/top30.jpg');
   animation: slide-animation-04 32s infinite linear;
}

@keyframes slide-animation-01 {
   0% {opacity: 1; transform: translateY(-0.4%);}
  18% {opacity: 1;}
  25% {opacity: 0; transform: translateY(-4%);}
  93% {opacity: 0; transform: translateY(0%);}
 100% {opacity: 1; transform: translateY(-0.4%);}
}
@keyframes slide-animation-02 {
   0% {opacity: 0;}
  18% {opacity: 0; transform: translateX(-4%);}
  25% {opacity: 1;}
  43% {opacity: 1;}
  50% {opacity: 0; transform: translateX(0%);}
 100% {opacity: 0;}
} 
@keyframes slide-animation-03 {
   0% {opacity: 0;}
  43% {opacity: 0;  transform: translateY(-4%);}
  50% {opacity: 1;}
  68% {opacity: 1;}
  75% {opacity: 0; transform: translateY(0%);}
 100% {opacity: 0;}
}
@keyframes slide-animation-04 {
   0% {opacity: 0;}
  68% {opacity: 0; transform: translateX(0%);}
  75% {opacity: 1;}
  93% {opacity: 1;}
 100% {opacity: 0; transform: translateX(-4%);}
}



/* -----------------------  mb  -------------------------------------- */
.img-21{
   background-image: url('film/top4.jpg');
   animation: slide-animation-21 32s infinite linear;
}
.img-22{
   background-image: url('film/top1.jpg');
   animation: slide-animation-22 32s infinite linear;
}
.img-23{
   background-image: url('film/top10.jpg');
   animation: slide-animation-23 32s infinite linear;
}
.img-24{
   background-image: url('film/top30.jpg');
   animation: slide-animation-24 32s infinite linear;
}

@keyframes slide-animation-21 {
   0% {opacity: 1; transform: translateY(-0.8%);}
  18% {opacity: 1;}
  25% {opacity: 0; transform: translateY(-8%);}
  93% {opacity: 0; transform: translateY(0%);}
 100% {opacity: 1; transform: translateY(-0.8%);}
}
@keyframes slide-animation-22 {
   0% {opacity: 0;}
  18% {opacity: 0; transform: translateX(-12%);}
  25% {opacity: 1;}
  43% {opacity: 1;}
  50% {opacity: 0; transform: translateX(0%);}
 100% {opacity: 0;}
} 
@keyframes slide-animation-23 {
   0% {opacity: 0;}
  43% {opacity: 0;  transform: translateY(-8%);}
  50% {opacity: 1;}
  68% {opacity: 1;}
  75% {opacity: 0; transform: translateY(0%);}
 100% {opacity: 0;}
}
@keyframes slide-animation-24 {
   0% {opacity: 0;}
  68% {opacity: 0; transform: translateX(0%);}
  75% {opacity: 1;}
  93% {opacity: 1;}
 100% {opacity: 0; transform: translateX(-12%);}
}



#top-photo {
  position: relative;
  margin:0 auto;
  overflow: hidden;
  background-color:#e5e3dc;
}

#top_menu_pc {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:80px;
  z-index:21;
}

@media (max-width:1000px) {
  #top-photo {
    max-width:150%;
    max-height:60%;
    min-height:400px;
  }
}
@media (min-width:1000px) {
  #top-photo {
    max-width:2000px;
    max-height:1000px;
//    min-height:770px;
  }
}

.sec {
  max-width:1450px;
  min-width:300px;
  width:80%;
  margin-left:auto;
  margin-right:auto;
  opacity:0;
  margin-top:30px;
  overflow-wrap:break-word;
}

.sec2 {
  opacity:0;
  margin-top:30px;
  overflow-wrap:break-word;
}

.migi {
  position:fixed;
  right:0;
  top:50%;
  margin-top:-200px;
  z-index:99;
}

.yoyaku, .toiawase {
  cursor:pointer;
  color:white;
  background-color:#306090;
  font-weight:bold;
  text-align:center;
  padding:15px 10px;
  text-orientation: upright;
  border-radius:10px 0 0 10px;
  font-size:11pt;
}

.yoyaku:hover, .toiawase:hover {
  opacity:0.5;
}

.arrow {
  animation: slide-arrow 2.5s infinite;
}
@keyframes slide-arrow {
  0% {opacity:0; transform: translateY(-10px);}
  20% {opacity:1;}
  80% {opacity:1;}
  100% {opacity:0; transform: translateY(32px);}
}


/*
.loopslide {
  display: flex;
  width: 100vm;
  min-height:140px;
  overflow: hidden;
  
  ul {
    padding: 0;
    width: 120vw;
    display: flex;
    flex-shrink: 0;
    
    &:first-child {
      animation: slide1 40s -20s linear infinite;
    }
    &:last-child {
      animation: slide2 40s linear infinite;
    }
    
    li {
      display: inline-block;
      width: 120%;
      min-width: 100px;
      margin-right: 10px;
      list-style: none;
      text-align: center;
      top: 0;
      bottom: 0;
      margin: auto;
      padding:10px;
      
      img {
        display: block;
        width: 100%;
        height: auto;
      }
      &:hover {
        opacity:0.5;
      }
    }
  }
  
  &:hover {
    ul {
      animation-play-state: paused;
      cursor:pointer;
    }
  }
}
*/

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

#mb_menu_select .pointer:hover {
  background-color:rgba(255,255,255,0.1);
}