@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : intro.css
Description : イントロダクション
===================================================================== */
/* =====================================================================
    intro
======================================================================*/
.intro {
  padding: 18rem 0;
}
.intro .sec_ttl {
  margin-bottom: 3.7rem;
}
@media screen and (max-width: 767px) {
  .intro .sec_ttl .typewriter {
    font-size: 230%;
  }
}
.intro .sec_ttl.appear .typewriter {
  width: 15ch;
  -webkit-animation-timing-function: steps(15, end), step-end;
          animation-timing-function: steps(15, end), step-end;
  -webkit-animation-duration: 3s, 1s;
          animation-duration: 3s, 1s;
}

.intro_wrap {
  position: relative;
  margin-left: calc(-20 / 640 * 100%);
  padding: calc(265 / 640 * 100%) 0 calc(363 / 640 * 100%);
  width: calc(691 / 640 * 100%);
  background: url(../images/intro/bg_intro-sp.png) no-repeat center/100% 100%;
}

.intro_codeApp {
  margin: 0 auto 6.0869565217%;
  width: 23.9130434783%;
}

.intro_txt {
  margin: 0 auto;
  width: 94.0579710145%;
}

@media screen and (min-width: 768px) {
  .intro {
    padding: 120px 0;
  }
  .intro .sec_ttl {
    margin-bottom: 26px;
  }
  .intro_wrap {
    margin: 0;
    padding: calc(214 / 1000 * 100%) 0 calc(280 / 1000 * 100%);
    width: 100%;
    background-image: url(../images/intro/bg_intro-pc.png);
  }
  .intro_codeApp {
    width: calc(98 / 1000 * 100%);
  }
  .intro_txt {
    width: calc(679 / 1000 * 100%);
  }
}/*# sourceMappingURL=intro.css.map */