@charset "utf-8";
#techTop {
  background-color: #F1F1F1;
}
#techTop .mv {
    position: relative;
    padding: 180px 0 100px;
}
#techTop .mv figure {
    position: absolute;
    z-index: 0;
}
#techTop .mv figure.mv_fig01 {
    width: 35%;
    right: 0;
    top: 5%;
}
#techTop .mv figure.mv_fig02 {
    width: 30%;
    left: 0;
    top: 40%;
}
#techTop .mv_top {
    margin: 0 auto 150px;
}
#techTop .mv_top h2 {
    font-size: 74px;
}
#techTop .mv_top span {
    display: block;
    font-size: 21px;
}
.colorChange {
    -webkit-animation-name:colorChangeAnime;
            animation-name:colorChangeAnime;
            -webkit-animation-duration:1s;
                    animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
            color: rgba(203, 203, 203, 0.5);
            text-shadow: 5px 2px 8px #fff, 0 0 0 #aaaaaa;
}
.colorChange.start {
    -webkit-animation-delay: .5s;
            animation-delay: .5s;
}
@-webkit-keyframes colorChangeAnime{
    from {
        color: rgba(203, 203, 203, 0.5);
        text-shadow: 5px 2px 8px #fff, 0 0 0 #aaaaaa;
    }
    to {
        color: #343434;
        text-shadow: unset;
    }
  }
@keyframes colorChangeAnime{
    from {
        color: rgba(203, 203, 203, 0.5);
        text-shadow: 5px 2px 8px #fff, 0 0 0 #aaaaaa;
    }
    to {
        color: #343434;
        text-shadow: unset;
    }
  }
/*==================================================
ふわっ
===================================*/
.fadeIn {
    -webkit-animation-name:fadeInAnime;
            animation-name:fadeInAnime;
    -webkit-animation-duration:1s;
            animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
    opacity: 0;
    }
    @-webkit-keyframes fadeInAnime{
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    /* アニメーションスタートの遅延時間を決めるCSS*/
    .delay-time02{
            -webkit-animation-delay: 1.6s;
                    animation-delay: 1.6s;
    }
    .delay-time03{
                -webkit-animation-delay: 2.2s;
                        animation-delay: 2.2s;
        }
#techTop .mv .mv_scroll {
    position: relative;
    display: block;
    text-align: center;
    color: #707070;
}
/* 矢印のアニメーション部分 */
#techTop .mv .mv_scroll::before {
    -webkit-animation: scroll 2s infinite;
            animation: scroll 2s infinite;
    border-bottom: 2px solid #707070;
    border-left: 2px solid #707070;
    content: "";
    height: 15px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 20px;
    width: 15px;
  }
  /* 矢印のアニメーション */
  @-webkit-keyframes scroll {
    0% {
      opacity: 0;
      -webkit-transform: rotate(-45deg) translate(0, 0);
              transform: rotate(-45deg) translate(0, 0);
    }
    40% {
      opacity: 1;
    }
    80% {
      opacity: 0;
      -webkit-transform: rotate(-45deg) translate(-20px, 20px);
              transform: rotate(-45deg) translate(-20px, 20px);
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes scroll {
    0% {
      opacity: 0;
      -webkit-transform: rotate(-45deg) translate(0, 0);
              transform: rotate(-45deg) translate(0, 0);
    }
    40% {
      opacity: 1;
    }
    80% {
      opacity: 0;
      -webkit-transform: rotate(-45deg) translate(-20px, 20px);
              transform: rotate(-45deg) translate(-20px, 20px);
    }
    100% {
      opacity: 0;
    }
  }
#techTop .mv_sub {
    width: 55%;
    margin: 100px 0 0 auto;
}
#techTop .mv_sub h3 {
    font-size: 26px;
    margin-bottom: 30px;
}
/* btnarea */
#techTop .btnarea {
  padding-bottom: 80px;
}
#techTop .btnarea ul li {
  position: relative;
overflow: hidden;
max-width: 350px;
width: 32%;
height: 450px;
border-radius: 25px;
-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
#techTop .btnarea ul li::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  }
  #techTop .btnarea ul li:first-child::after {
    background: url(../images/top_btn01.jpg) no-repeat center bottom / cover;
  }
  #techTop .btnarea ul li:nth-child(2)::after {
    background: url(../images/top_btn02.jpg) no-repeat center bottom / cover;
  }
  #techTop .btnarea ul li:last-child::after {
    background: url(../images/top_btn03.jpg) no-repeat center bottom / cover;
  }
  #techTop .btnarea ul li:hover::after {
  opacity: .8;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  }
  #techTop .btnarea ul li a {
  position: relative;
  z-index: 1;
  display: block;
  padding-top: 30px;
  padding-left: 20px;
  height: 450px;
  }
  #techTop .btnarea ul li a h2 {
    font-size: 26px;
    margin-bottom: 10px;
  }
  #techTop .btnarea ul li a p {
    font-size: 16px;
  }
  #techTop .btnarea ul li a span {
    display: inline-block;
    font-size: 14px;
    color: #11438A;
    margin-top: 15px;
    position: relative;
    margin-left: 22px;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
  }
  #techTop .btnarea ul li a span::before {
    content: '';
position: absolute;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
left: 50%;
top: 50%;
display: inline-block;
width: 138px;
height: 33px;
border: 2px solid #11438A;
border-radius: 20px;
-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index: -1;
  }
  #techTop .btnarea ul li:hover a span {
    color: #fff;
  }
  #techTop .btnarea ul li:hover a span::before {
    background-color: #11438A;
    
  }
@media only screen and (max-width: 768px) {
  #techTop .mv {
    position: relative;
    padding: 175px 0 70px;
}
#techTop .mv figure.mv_fig01 {
    width: 60%;
    top: 3%;
}
#techTop .mv figure.mv_fig02 {
    width: 50%;
    top: 26%;
}
#techTop .mv_top {
    margin: 0 auto 110px;
}
#techTop .mv_top h2 {
    font-size: 46px;
    line-height: 1.5;
}
#techTop .mv_top span {
    font-size: 14px;
}
#techTop .mv_sub {
  width: 100%;
  margin: 100px auto 0;
  z-index: 1;
  position: relative;
}
#techTop .mv_sub p {
  font-size: 16px;
}
/* btnarea */
#techTop .btnarea ul li {
max-width: 350px;
width: 100%;
margin: 0 auto 20px;
}
#techTop .btnarea ul li:last-child {
  margin-bottom: 0;
}
}