* {
  margin: 0;
  padding: 0;
  font-style: 800;
}

html {
  font-size: 10px;
  width: 100%;
}

img {
  width: 100%;
  vertical-align: bottom;
}

#mv {
  width: 100%;
  background-image: url("../img/mv_bg_pc.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 13% 0 11%;
  margin-top: 4%;
  background-color: #fef5ff;
}

.inner {
  width: 75.76vw;
  margin: 0 auto;
}

#mv .inner {
  display: flex;
  align-items: center;
}

#mv .inner .mv_ttl {
  width: 50%;
}

#mv .inner .mv_obj {
  width: 50%;
}

#utm_q,
#feature,
#difference,
#advantage,
#problem,
#plan_txt,
#plan_utm,
#flow,
#cv_area {
  padding: 8% 0;
}

#utm_q {
  background-color: #f7f5ff;
  padding-top: 0;
}

#feature {
  background-color: #e8f4ff;
}

#difference {
  background-color: #f7f5ff;
}

#advantage {
  background-color: #f7f5ff;
  padding-top: 4%;
}

#problem {
  background-color: #fff;
}

#plan_txt {
  background-color: #fff;
  padding: 7% 0% 6%;
}

#plan_txt .inner {
  width: 62.5%;
  margin: 0 auto;
}

#plan_utm {
  background-color: #fff;
  padding-top: 2%;
}

#plan_utm .plan_option_img {
  margin-top: 12%;
}

#plan_smart {
  position: relative;
  padding: 8% 0;
  background-color: #e8f4ff;
}

.plan_smart_btn {
  width: 40%;
  margin: 5% auto 0 auto;
}

#plan_option {
  padding-bottom: 8%;
}

#flow {
  background-color: #f7f5ff;
}

#cv_area .inner {
  border: 3px solid #382e6a;
  background-color: #fff;
  border-radius: 11px;
  padding: 5% 0;
  box-shadow: 5px 5px 7px rgba(24, 24, 24, 0.2);
}

#cv_area .cv_txt {
  width: 80%;
  margin: 0 auto 6%;
}

.btn_wrap {
  display: flex;
  margin: 0 auto;
  width: 85%;
  justify-content: space-between;
  align-items: flex-start;
}

.cv_mail_btn {
  width: 51%;
}

.cv_mail_btn span {
  color: #f18926;
  font-size: max(1.2vw, 15px);
  font-weight: 600;
  display: block;
  text-align: center;
  margin-top: 2%;
}

.cv_tel_btn {
  width: 46%;
}

.cv_tel_btn span {
  color: #f18926;
  font-size: max(1.2vw, 15px);
  font-weight: 600;
  display: block;
  text-align: center;
  margin-top: 2%;
}

@media screen and (max-width: 980px) {
  #utm_q,
  #feature,
  #difference,
  #advantage,
  #problem,
  #plan_txt,
  #plan_utm,
  #flow,
  #cv_area {
    padding: 15% 0;
  }

  .inner {
    width: 69.39vw;
  }

  #utm_q {
    padding: 4% 0 10%;
  }

  #plan_txt {
    padding: 7% 0% 0;
  }

  #plan_utm {
    padding: 9% 0 10%;
  }

  #mv {
    width: 100%;
    background-image: url("../img/mv_bg_sp.png");
    padding-top: 13%;
  }

  #mv .inner {
    display: block;
    margin: 0 auto;
  }

  #mv .inner .mv_ttl {
    width: 100%;
    margin: 0 auto;
  }

  #advantage .inner {
    width: 50%;
  }

  #plan_txt .inner {
    width: 70%;
  }

  .plan_smart_btn {
    width: 59.18%;
    top: 74%;
  }

  #plan_utm .plan_option_img {
    margin-top: 15%;
  }

  #plan_option {
    padding: 5% 0 15%;
  }

  #flow .inner {
    width: 40.31%;
  }

  #cv_area .inner {
    padding: 10% 0;
  }

  #cv_area p {
    margin-bottom: 6%;
    font-size: 2em;
  }

  .cv_tel_btn img {
    filter: var(--filter-drop-shadow);
  }

  .cv_tel_btn a img {
    transition: all 0.3s ease;
  }

  .cv_tel_btn a img:hover {
    transform: translate(2px, 0px);
    transition: all 0.2s ease-in;
    filter: none;
  }

  .btn_wrap {
    display: block;
    margin: 0 auto;
    width: 90%;
  }

  .cv_mail_btn,
  .cv_tel_btn {
    width: 90%;
    margin: 0 auto;
  }

  .cv_mail_btn {
    margin-bottom: 7%;
  }

  .cv_mail_btn span,
  .cv_tel_btn span {
    font-size: 16px;
  }

  #dl_area {
    margin: 20% 0 15%;
  }

  .dl_btn_area p {
    display: flex;
    justify-content: center;
  }

  .dl_btn_area p span {
    display: inline-block;
  }

  .dl_area_ttl {
    font-size: 2em;
    margin-bottom: 8%;
    padding-top: 10%;
  }

  .dl_area_ttl span {
    text-align: left;
    display: inline-block;
    line-height: 1.3em;
  }

  .disclaimer {
    padding: 8% 0;
  }

  .disclaimer .ttl {
    font-size: 2em;
    margin: 0 0 8% 0;
  }

  .dl_btn_area {
    font-size: 1.5em;
    margin: 10% 0 3%;
    text-align: left;
  }

  .dl_btn_area .dl_btn {
    width: 60%;
    margin: 7% auto 0;
  }
}

@media (max-width: 680px) {
  .inner {
    width: 70vw;
  }

  #advantage .inner,
  #plan_txt .inner,
  #flow .inner {
    width: 75%;
  }
}

@media (max-width: 480px) {
  .inner {
    width: 90vw;
  }

  #mv {
    padding-top: 24%;
  }

  #advantage .inner,
  #flow .inner {
    width: 80%;
  }

  #plan_txt .inner {
    width: 90%;
  }

  .plan_smart_btn {
    width: 78%;
    top: 75%;
  }

  .cv_mail_btn span,
  .cv_tel_btn span {
    font-size: 13px;
  }

  .cv_mail_btn,
  .cv_tel_btn {
    width: 90%;
  }

  .nav ul li a span {
    font-size: 16px;
  }

  .nav ul li a .arrow {
    width: 10px;
  }

  .nav .nav_wapper .nav_contact p {
    font-size: 16px;
  }
}