@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese");
/****
* mixin
****/
#main .lead {
  padding: 13px 0 62px;
}
@media screen and (max-width: 1024px) {
  #main .lead {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767px) {
  #main .lead {
    padding: 5px 0 31px;
  }
}
#main .lead h2,
#main .lead h3 {
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  line-height: 1.5;
}
#main .lead h2 {
  font-size: 30px;
}
@media screen and (max-width: 767px) {
  #main .lead h2 {
    font-size: 22px;
    line-height: 1.45455;
  }
}
#main .lead h3 {
  margin-top: 17px;
  font-size: 22px;
}
@media screen and (max-width: 767px) {
  #main .lead h3 {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.44444;
  }
}
@media screen and (max-width: 767px) {
  #main .lead h3 span.sp-br {
    display: block;
  }
}
#main .lead p {
  margin-top: 8px;
  font-size: 15px;
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  line-height: 1.73333;
}
@media screen and (max-width: 767px) {
  #main .lead p {
    margin-top: 15px;
  }
}
#main .lead p span.pc-br {
  display: block;
}
@media screen and (max-width: 767px) {
  #main .lead p span.pc-br {
    display: inline;
  }
}
#main .before_after {
  background-color: #f8f8f8;
  padding: 75px 0 95px;
}
@media screen and (max-width: 767px) {
  #main .before_after {
    padding: 20px 0 55px;
  }
}
#main .before_after .inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
@media screen and (max-width: 767px) {
  #main .before_after .inner {
    display: block;
  }
}
#main .before_after .before,
#main .before_after .after {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
  border-radius: 10px;
  padding: 45px 0 61px;
}
#main .before_after .before h3,
#main .before_after .after h3 {
  width: 300px;
  max-width: 100%;
  margin: 0 auto 49px;
  border: 1px solid #000;
  padding: 13px 0 12px;
  background-color: #fff;
  text-align: center;
  font-size: 18px;
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #main .before_after .before h3,
  #main .before_after .after h3 {
    width: 260px;
    padding: 10px 0 9px;
    font-size: 15px;
    margin-bottom: 30px;
  }
}
#main .before_after .before {
  flex: 0 1 760px;
}
@media screen and (max-width: 767px) {
  #main .before_after .before {
    padding: 29px 12.5px 15px;
  }
}
#main .before_after .before img {
  max-width: 100%;
  margin: 0 auto;
}
#main .before_after .before img.pc {
  display: block;
  width: 645px;
}
@media screen and (max-width: 767px) {
  #main .before_after .before img.pc {
    display: none;
  }
}
#main .before_after .before img.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  #main .before_after .before img.sp {
    display: block;
    width: 100%;
  }
}
#main .before_after .before .notice {
  display: none;
}
@media screen and (max-width: 767px) {
  #main .before_after .before .notice {
    display: block;
    margin: 10px 0 0;
    color: #5d5d5d;
    font-size: 13px;
    line-height: 1.53846;
  }
}
#main .before_after .after {
  margin-left: 30px;
  flex: 0 1 410px;
  padding-left: 10px;
  position: relative;
}
@media screen and (max-width: 767px) {
  #main .before_after .after {
    margin-left: 0;
    margin-top: 15px;
    padding: 23px 0 28px;
  }
}
@media screen and (max-width: 767px) {
  #main .before_after .after h3 {
    margin-bottom: 36px;
  }
}
#main .before_after .after .main.pc {
  display: block;
  width: 346px;
  max-width: 100%;
  margin: 0 auto 0 8px;
}
@media screen and (max-width: 767px) {
  #main .before_after .after .main.pc {
    display: none;
  }
}
#main .before_after .after .main.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  #main .before_after .after .main.sp {
    display: block;
    margin-left: 11px;
    width: calc(100% - 53px);
  }
}
#main .before_after .after .notice {
  margin: 9px 46px 0 79px;
  color: #5d5d5d;
  font-size: 13px;
  line-height: 1.53846;
}
@media screen and (max-width: 767px) {
  #main .before_after .after .notice {
    margin: 51px 8px 0 13px;
  }
}
#main .before_after .after .notice span.pc-br {
  display: block;
}
@media screen and (max-width: 767px) {
  #main .before_after .after .notice span.pc-br {
    display: inline;
  }
}
#main .before_after .after .accent1 {
  position: absolute;
  width: 140px;
  bottom: 273px;
  left: -23px;
}
@media screen and (max-width: 767px) {
  #main .before_after .after .accent1 {
    width: 125px;
    bottom: 228px;
    left: 32px;
  }
}
#main .before_after .after .accent2 {
  position: absolute;
  width: 145px;
  bottom: 35px;
  left: calc(50% - 65px);
}
@media screen and (max-width: 767px) {
  #main .before_after .after .accent2 {
    position: static;
    display: block;
    margin: 9px auto 0;
    width: 129px;
  }
}
#main .table {
  padding: 65px 0 81px;
}
@media screen and (max-width: 767px) {
  #main .table {
    padding: 21px 0 30px;
  }
}
#main .table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
@media screen and (max-width: 767px) {
  #main .table table,
  #main .table table tbody,
  #main .table table tr,
  #main .table table th,
  #main .table table td {
    display: block;
  }
  #main .table table tr {
    margin-top: 10px;
  }
}
#main .table table th,
#main .table table td {
  background-color: #f2f7fd;
}
#main .table table th {
  padding: 7px 13px 0 37px;
  color: #004098;
  font-size: 18px;
  width: 1px;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  #main .table table th {
    padding: 24px 20px 12px;
    text-align: center;
    width: auto;
    font-size: 16px;
  }
}
#main .table table td {
  padding: 22.5px 13px;
  font-size: 16px;
  line-height: 1.375;
}
@media screen and (max-width: 767px) {
  #main .table table td {
    padding: 0 20px 20px;
    font-size: 15px;
    line-height: 1.46667;
  }
}
#main .table table td span.pc-br {
  display: block;
}
@media screen and (max-width: 767px) {
  #main .table table td span.pc-br {
    display: inline;
  }
}

/*# sourceMappingURL=2022-step.css.map */