@charset "utf-8";
/* CSS Document */
.img-frame {
   position: relative;
   width: 100%;
   height: 330px;
   overflow: visible;
   margin: 0 auto;
}
.img-01, .img-02, .img-03 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01 {
   background-image: url('../images/MainImg-01.png');
   animation: slide-animation-01 24s infinite;
}
.img-02 {
   background-image: url('../images/MainImg-02.png');
   animation: slide-animation-02 24s infinite;
}
.img-03 {
   background-image: url('../images/MainImg-03.png');
   animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
   0% {
      opacity: 1;
      transform: scale(1.0);
   }
   30% {
      opacity: 1;
   }
   40% {
      opacity: 0;
      transform: scale(1.0);
   }
   90% {
      opacity: 0;
   }
   100% {
      opacity: 1;
      transform: scale(1.0);
   }
}
@keyframes slide-animation-02 {
   0% {
      opacity: 0;
   }
   30% {
      opacity: 0;
      transform: scale(1.0)
   }
   40% {
      opacity: 1;
   }
   60% {
      opacity: 1;
   }
   70% {
      opacity: 0;
      transform: scale(1.0)
   }
   100% {
      opacity: 0;
   }
}
@keyframes slide-animation-03 {
   0% {
      opacity: 0;
   }
   60% {
      opacity: 0;
      transform: scale(1.0);
   }
   70% {
      opacity: 1;
   }
   90% {
      opacity: 1;
   }
   100% {
      opacity: 0;
      transform: scale(1.0);
   }
}
.TopImgText {
   background-color: #e2d6a1;
   padding: 0.8rem 0rem 0.8rem 0rem;
}
.L1, .L2 {
   text-align: center !important;
   text-indent: 0rem !important;
   font-weight: bold;
}
.L1 {
   font-size: 1.2rem !important;
}
.L2 {
   font-size: 1.8rem !important;
}