.swiper-container {
  width: 100%;
  height: 100%
}
.swiper-slide-active .slide-img, .swiper-slide-duplicate-active .slide-img, .swiper-slide-prev .slide-img {
  -webkit-animation: zoomUp 12s linear 0s;
  animation: zoomUp 12s linear 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}
.slide-img {
  background-size: cover;
  background-position: center center;
  height: 100%
}

html {
  font-size: 16px;
  height: 100%;
  width: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

body {
  line-height: 1.8;
  word-break: break-all;
  color: #000000;
  width: 100%;
  height: 100%;
  
  overflow-x: hidden
}

#hero {
  width: 100%;
  height: 82%;
  position: relative
}

@media (max-width: 480px) {
  #hero #instabtn {
    display: none
  }
}
#hero #instabtn.d-b {
  display: block
}






@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15)
  }
}
.swiper-container {
  width: 100%;
  height: 100%
}
.swiper-slide-active .slide-img, .swiper-slide-duplicate-active .slide-img, .swiper-slide-prev .slide-img {
  -webkit-animation: zoomUp 12s linear 0s;
  animation: zoomUp 12s linear 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}
.slide-img {
  background-size: cover;
  background-position: center center;
  height: 100%
}
@keyframes borderRotate {
  0% {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(1turn)
  }
}

@keyframes bar {
  0% {
    transform: rotateZ(-180deg) rotateX(-360deg)
  }
  75%, 100% {
    transform: rotateZ(0) rotateX(0)
  }
}
@keyframes bar-reflect {
  0% {
    transform: rotateZ(180deg) rotateX(360deg)
  }
  75%, 100% {
    transform: rotateZ(0) rotateX(0)
  }
}

/*20240724 start*/
.tab-area {
  display: flex;
  justify-content: space-around;
  background-color: #2f2f2f;/* background-color: #222e3e;*/
  cursor: pointer;
  }
  @media (max-width: 500px){
  .tab-area {
  display:block;}
   .tab-ttl{
   width: 100%!important;
   margin-bottom: 5px;
   }
  }
  .tab-ttl {
    width: 300px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: white;
    border-right: 1px solid #50637b;
    border-left: 1px solid #000;/*  border-left: 1px solid #222e3e;*/
  }
  .tab-ttl.active {
    background-color: #ccc;
    color: #222e3e;
    border: none;
  }

.content-area {
  font-size: 16px;
/*  text-align: center;*/
border: 1px solid #000;
  }
  .content {
    display: none;
  }
  .content.show {
    margin: 1rem;
    display: block;
  }

.course_dd{
font-size: 2rem;
line-height: 3.5rem;
font-weight: bold;
}
/*20240724 end*/