/* 全体設定 */
.css-carousel-slider8 {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 60px;
}
.css-carousel-slider8 img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider8 .slide-wrap {
  width: 800%;
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  z-index: 0;
  animation: css-carousel-slider8 40s infinite;
  animation-delay: 2s;
}
.css-carousel-slider8 .slide-wrap-main {
  width: 100%;
  z-index: 1;
  animation: css-carousel-slider-main8 40s infinite;
  animation-delay: 2s;
}
.css-carousel-slider8 .slide {
  width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider8 {
  0% { transform: translateX(0); }

  10.5% { transform: translateX(calc(1 / 8 * -100%)); }
  12.5% { transform: translateX(calc(1 / 8 * -100%)); }

  23% { transform: translateX(calc(2 / 8 * -100%)); }
  25% { transform: translateX(calc(2 / 8 * -100%)); }

  35.5% { transform: translateX(calc(3 / 8 * -100%)); }
  37.5% { transform: translateX(calc(3 / 8 * -100%)); }

  48% { transform: translateX(calc(4 / 8 * -100%)); }
  50% { transform: translateX(calc(4 / 8 * -100%)); }

  60.5% { transform: translateX(calc(5 / 8 * -100%)); }
  62.5% { transform: translateX(calc(5 / 8 * -100%)); }

  73% { transform: translateX(calc(6 / 8 * -100%)); }
  75% { transform: translateX(calc(6 / 8 * -100%)); }

  85.5% { transform: translateX(calc(7 / 8 * -100%)); }
  87.5% { transform: translateX(calc(7 / 8 * -100%)); }

  98% { transform: translateX(calc(8 / 8 * -100%)); }
  100% { transform: translateX(calc(8 / 8 * -100%)); }
}

@keyframes css-carousel-slider-main8 {
  0% { transform: translateX(100%); }
  87.5% { transform: translateX(100%); }
  98% { transform: translateX(0%);}
}
/* タイトル設定 */

/* 大画面 */
.title{
  margin-top: 100px;
  text-align: center;
  display: block;
}
.main_title{
  display: block;
  font-weight:  bold;
  line-height: 55px;
  letter-spacing: 25px;
  font-size: 40px;
}
.main_title_sub{
  writing-mode:vertical-rl;
  text-align: justify;
  display: inline-block;
  line-height: 70px;
  margin-top: 50px;
  font-size: 30px;
}

  /* 中画面 */

@media only screen and (max-width:900px) {
.title{
  margin-top: 60px;
}
.main_title{
  letter-spacing: 20px;
  font-size: 26px;
}
.main_title_sub{
  line-height: 45px;
  font-size: 22px;
  }
}

  /* 小画面 */

@media only screen and (max-width:600px) {
  .title{
    margin-top: 40px;
  }
  .main_title{
    line-height: 50px;
    letter-spacing: 10px;
    font-size: 26px;
  }
  .main_title_sub{
    line-height: 25px;
    font-size: 16px;
  }
}

  /* アニメーション */

.title {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(0px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}
.title.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}
  
/*バナー設定  */

.banner_inner{
  margin-top: 100px;
  width: 100%;
}
.banner_inner2{
  margin-top: 15px;
  margin-bottom: 80px;
  width: 100%;
}
.banner_item{
  display: flex;
  justify-content: center;
}
.banner_item_img{
  height: auto; 
  text-align: center;
  margin:  25px;
}
.banner_img{
  width: 100%;
  transition-duration: 0.5s;
}
.banner_img:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}