@charset "UTF-8";
/*--スタート時のアニメーション--*/
.start-logo{
    width: 100%;
}
.start{
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	z-index: 9000;
}

.start {
    transform: translateX(0);
    animation: slideOutLeft 3.7s ease-out forwards;
}

@keyframes slideOutLeft{
    0% {
        transform: translateX(0);
    }
    85% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}
/*--------*/

/*----バナーアニメーション----*/
.bunner{
    background-attachment: fixed;
}
@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
    .bunner_wrap {
      display: flex;
      overflow: hidden;
    }
    .scroll-infinity_list {
      display: flex;
      list-style: none;
      padding: 0
    }
    .scroll-infinity_list-left {
      animation: infinity-scroll-left 100s infinite linear 1s both;
    }
    .bunner-scroll_item {
      width: calc(100vw / 0.25);
    }
    .bunner-scroll_item>img {
      width: 100%;
    }

    /*--トラック--*/
    /*.slidein-title {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-1300px);
        transition: opacity 1s,visibility 1s, transform 2.5s;
    }
    
    .scroll {
        opacity: 1;
        visibility: visible;
        transform: translateX(0px);
    }*/
        /* slideIn */
        .slidein-title{
            animation: SlideInAnime 3s;
            }
            
            @keyframes SlideInAnime{
                0% {
                    transform: translateX(-100%);
                  }
                  100% {
                    transform: translateX(0);
                  }
            }
        
/*--------*/

/*--下からフェードイン--*/
.fadein-box {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

/*--------*/

/*--横(左)からスライドイン--*/
.slidein-box {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

/*--テキスト　スライドイン--*/
.text-left {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.text-right {
    opacity: 0;
    visibility: hidden;
    transform: translateX(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}
/*--------*/

/*---マーカー風ライン---*/
.marker {
    background:linear-gradient(transparent 0%, #fcb800 0%);
    display: inline;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition:background-size 0.7s;
  }

  /* マーカーが引かれる際に付与するクラス */
  .marker.on {
    background-size: 100% 100%;
  }
/*--------------------*/

/*--画像ホバー　ズームイン--*/
.img-hover{
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
  }
  .img-hover img{
    width: 100%;
    transition-duration: 0.5s;
  }
  .img-hover:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
  }
  /*--------*/

/*--仕事の流れ--*/
.box1 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 2s,visibility 2s, transform 2s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.box2 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 1.5s,visibility 1.5s, transform 1.5s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.box3 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.box4 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 0.5s,visibility 0.5s, transform 0.5s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

/*--流れの詳細--*/
.slidein-box-b1 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.slidein-box-b2 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 1.5s,visibility 1.5s, transform 1.5s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.slidein-box-b3 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 2s,visibility 2s, transform 2s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.slidein-box-b4 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 2.5s,visibility 2.5s, transform 2.5s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}
/*--------*/