#user .mainvisual {
  height: 220px;
  margin-top: 100px;
  background: url(../img/mainvisual.jpg) no-repeat center/cover;
}

@media screen and (max-width: 1199px) {
  #user .mainvisual {
    margin-top: 60px;
  }
}

@media screen and (max-width: 767px) {
  #user .mainvisual {
    height: 180px;
    margin-top: 60px;
  }
}

#user .mainvisual .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#user .mainvisual .inner__box__ttl {
  color: #fff;
  letter-spacing: 0.04rem;
  font-weight: 500;
  font-size: 3.6rem;
  font-family: industry, sans-serif;
  margin-top: calc(80px - (((3.6rem * 1.6) - 3.6rem) / 2));
  text-align: center;
}

@media screen and (max-width: 767px) {
  #user .mainvisual .inner__box__ttl {
    font-size: 2.6rem;
    margin-top: 60px;
  }
}

#user .mainvisual .inner__box__sub {
  font-size: 1.8rem;
  color: #fff;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #user .mainvisual .inner__box__sub {
    font-size: 1.3rem;
  }
}

#user .breadcrumb {
  background: #f2f2f2;
  padding: 15px 0;
}

#user .breadcrumb__txt__link {
  color: #333;
  text-decoration: none;
}

#user .user {
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  #user .user {
    margin-top: 60px;
  }
}

#user .user__flow__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 50px 40px;
}

@media screen and (max-width: 767px) {
  #user .user__flow__list {
    padding: 30px 20px;
  }
}

#user .user__flow__list__num__txt {
  letter-spacing: 0.04rem;
  font-weight: 500;
  font-size: 3.2rem;
  font-family: industry, sans-serif;
  line-height: 1;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list__num__txt {
    font-size: 2.6rem;
  }
}

@media screen and (max-width: 767px) {
  #user .user__flow__list__num__txt {
    font-size: 2.2rem;
  }
}

#user .user__flow__list__info {
  width: 94.643%;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list__info {
    width: 90%;
  }
}

@media screen and (max-width: 767px) {
  #user .user__flow__list__info {
    width: 85%;
  }
}

#user .user__flow__list__info__head {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list__info__head {
    font-size: 2rem;
  }
}

@media screen and (max-width: 767px) {
  #user .user__flow__list__info__head {
    font-size: 1.8rem;
  }
}

#user .user__flow__list__info__txt {
  margin-top: 24px;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list__info__txt {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 767px) {
  #user .user__flow__list__info__txt {
    font-size: 1.2rem;
  }
}

#user .user__flow__list__info__link {
  color: #fff;
  max-width: 320px;
  display: block;
  margin-top: 30px;
  padding: 16.5px 0;
  text-align: center;
  text-decoration: none;
  background: url(../../common/img/ico_mail01@2x.png) no-repeat left 20px center/34px, url(../../common/img/ico_vec01@2x.png) no-repeat right 20px center/6px, #333;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list__info__link {
    margin: 20px 0 0;
    padding: 15px 0;
    background: url(../../common/img/ico_mail01@2x.png) no-repeat left 20px center/24px, url(../../common/img/ico_vec01@2x.png) no-repeat right 20px center/6px, #333;
  }
}

#user .user__flow__list__info__link:hover {
  opacity: 0.8;
}

#user .user__flow__list:first-child {
  background: url(../../common/img/bg_gray.gif) no-repeat bottom left 55px/1px 160px, #f2f2f2;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list:first-child {
    background: url(../../common/img/bg_gray.gif) no-repeat bottom left 55px/1px 150px, #f2f2f2;
  }
}

@media screen and (max-width: 767px) {
  #user .user__flow__list:first-child {
    background: url(../../common/img/bg_gray.gif) no-repeat bottom left 30px/1px 150px, #f2f2f2;
  }
}

#user .user__flow__list:nth-child(2) {
  background: url(../../common/img/bg_gray.gif) no-repeat top left 55px/1px 29px, url(../../common/img/bg_gray.gif) no-repeat bottom left 55px/1px 70px;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list:nth-child(2) {
    background: url(../../common/img/bg_gray.gif) no-repeat top left 55px/1px 30px, url(../../common/img/bg_gray.gif) no-repeat bottom left 55px/1px 95px;
  }
}

@media screen and (max-width: 767px) {
  #user .user__flow__list:nth-child(2) {
    background: url(../../common/img/bg_gray.gif) no-repeat top left 30px/1px 20px, url(../../common/img/bg_gray.gif) no-repeat bottom left 30px/1px 100px;
  }
}

#user .user__flow__list:nth-child(3) {
  background: url(../../common/img/bg_gray.gif) no-repeat top left 55px/1px 30px, url(../../common/img/bg_gray.gif) no-repeat bottom left 55px/1px 70px, #f2f2f2;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list:nth-child(3) {
    background: url(../../common/img/bg_gray.gif) no-repeat top left 55px/1px 30px, url(../../common/img/bg_gray.gif) no-repeat bottom left 55px/1px 75px;
  }
}

@media screen and (max-width: 767px) {
  #user .user__flow__list:nth-child(3) {
    background: url(../../common/img/bg_gray.gif) no-repeat top left 30px/1px 20px, url(../../common/img/bg_gray.gif) no-repeat bottom left 30px/1px 80px, #f2f2f2;
  }
}

#user .user__flow__list:nth-child(4) {
  background: url(../../common/img/bg_gray.gif) no-repeat top left 55px/1px 30px, url(../../common/img/bg_gray.gif) no-repeat bottom left 55px/1px 70px;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list:nth-child(4) {
    background: url(../../common/img/bg_gray.gif) no-repeat top left 55px/1px 30px, url(../../common/img/bg_gray.gif) no-repeat bottom left 55px/1px 100px;
  }
}

@media screen and (max-width: 767px) {
  #user .user__flow__list:nth-child(4) {
    background: url(../../common/img/bg_gray.gif) no-repeat top left 30px/1px 20px, url(../../common/img/bg_gray.gif) no-repeat bottom left 30px/1px 100px;
  }
}

#user .user__flow__list:nth-child(5) {
  background: url(../../common/img/bg_gray.gif) no-repeat top left 55px/1px 30px, url(../../common/img/bg_gray.gif) no-repeat bottom left 55px/1px 100px, #f2f2f2;
}

@media screen and (max-width: 767px) {
  #user .user__flow__list:nth-child(5) {
    background: url(../../common/img/bg_gray.gif) no-repeat top left 30px/1px 20px, url(../../common/img/bg_gray.gif) no-repeat bottom left 30px/1px 115px, #f2f2f2;
  }
}

#user .user__flow__list:last-child {
  background: url(../../common/img/bg_gray.gif) no-repeat top left 55px/1px 30px;
}

@media screen and (max-width: 1199px) {
  #user .user__flow__list:last-child {
    background: url(../../common/img/bg_gray.gif) no-repeat top left 55px/1px 35px;
  }
}

@media screen and (max-width: 767px) {
  #user .user__flow__list:last-child {
    background: url(../../common/img/bg_gray.gif) no-repeat top left 30px/1px 20px;
  }
}

#user .contact {
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  #user .contact {
    margin-top: 60px;
  }
}
/*# sourceMappingURL=style.css.map */