@charset "UTF-8";

/*===========================================
メディアクエリ
===========================================*/
/* ブレイクポイントを指定 */
/*===========================================
共通
===========================================*/
.inner {
  max-width: 1300px;
  margin: 0 auto;
}

.f_pink {
  color: #FF6B6B;
  display: inline;
}

.f_red {
  color: #FF3B3B;
}

.f_purple {
  color: #5D50BD;
}

.serif {
  font-family: "Noto Serif JP", serif;
}

.sp_only {
  display: none;
}

@media screen and (max-width: 530px) {
  .sp_only {
    display: block;
  }
}

/*===========================================
header
===========================================*/
header {
  background-image: url(../images/head-obi.webp);
  background-repeat: repeat;
  background-size: cover;
  background-color: #8C73B5;
  height: 46px;
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 530px) {
  header {
    height: 30px;
  }
}

/*===========================================
FV
===========================================*/
.fv {
  background-color: #8C73B5;
}

@media screen and (max-width: 530px) {
  .fv {
    padding-top: 20px;
    position: relative;
    top: -1px;
  }
}

.fv .inner {
  max-width: 1500px;
}

/*===========================================
リード
===========================================*/
.lead {
  background: linear-gradient(to right, #FFEDFF, #FFD5FB);
  padding: 60px 0 50px;
}

@media screen and (max-width: 530px) {
  .lead {
    padding: 10px 0 40px;
    position: relative;
    top: -1px;
  }
}

.lead .inner {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 530px) {
  .lead .inner {
    flex-wrap: wrap;
  }
}

.lead img {
  width: 44%;
  height: 24%;
}

@media screen and (max-width: 530px) {
  .lead img {
    width: 92%;
    margin: 0 auto;
    order: 2;
    -o-object-fit: cover;
    height: 150px;
  }
}

.lead .txt_wrap {
  width: 54%;
}

@media screen and (max-width: 530px) {
  .lead .txt_wrap {
    width: 92%;
    margin: 0 auto;
    order: 1;
  }
}

.lead .txt_wrap h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.2777777778;
  margin-bottom: 30px;
}

@media screen and (max-width: 530px) {
  .lead .txt_wrap h2 {
    font-size: 18px;
    line-height: 1.6666666667;
    text-align: center;
    margin: 15px 0 10px;
  }
}

.lead .txt_wrap h2 img {
  width: 93px;
  display: block;
}

.lead .txt_wrap .txt {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 2.2916666667;
}

@media screen and (max-width: 530px) {
  .lead .txt_wrap .txt {
    font-size: 16px;
    line-height: 1.875;
  }
}

.lead span {
  color: #FF6B6B;
  display: inline;
}

@media screen and (min-width: 481px) and (max-width: 1230px) {
  .lead br {
    display: none;
  }
}

/*===========================================
占いハートフルとは？(about)
===========================================*/
.about {
  padding: 40px 0 50px;
}

@media screen and (max-width: 530px) {
  .about {
    padding: 15px 0 15px;
  }
}

@media screen and (max-width: 530px) {
  .about .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.about h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.15;
  color: #BA9100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

@media screen and (max-width: 530px) {
  .about h2 {
    font-size: 24px;
    line-height: 0.5217391304;
    gap: 10px;
    margin-bottom: 10px;
  }
}

.about h2 img {
  width: 93px;
}

@media screen and (max-width: 530px) {
  .about h2 img {
    width: 45px;
  }
}

.about .img_wrap {
  display: flex;
  justify-content: center;
  width: 83%;
  margin: 0 auto;
}

@media screen and (max-width: 530px) {
  .about .img_wrap {
    flex-direction: column;
    width: 82%;
    order: 2;
  }
}

.about .img_wrap img {
  width: 51%;
}

@media screen and (max-width: 530px) {
  .about .img_wrap img {
    width: 100%;
  }
}

.about .txt {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1.4375;
  text-align: center;
  margin-top: 30px;
}

@media screen and (max-width: 530px) {
  .about .txt {
    margin-top: 0px;
    font-size: 16px;
    line-height: 1.875;
    order: 1;
  }
}

.about .txt .f_pink {
  font-weight: 700;
}

.about .big_txt {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.375;
  text-align: center;
  margin-top: 30px;
  color: #5326D2;
}

@media screen and (max-width: 530px) {
  .about .big_txt {
    font-size: 26px;
    line-height: 1.4333333333;
    text-align: left;
    width: 93%;
    margin: 15px auto 10px;
    order: 3;
  }
}

.about .big_txt .f_red {
  font-size: 64px;
}

@media screen and (max-width: 530px) {
  .about .big_txt .f_red {
    font-size: 36px;
    line-height: 1.15;
  }
}

.about .big_txt .f_red:first-of-type {
  margin-bottom: 10px;
}

.about .wrap {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 60px;
}

@media screen and (max-width: 530px) {
  .about .wrap {
    flex-direction: column-reverse;
    margin-top: 10px;
    gap: 10px;
    order: 4;
  }
}

.about .wrap .txt {
  text-align: left;
  margin-top: 0;
  font-size: 28px;
  font-weight: 46px;
  letter-spacing: 0em;
  line-height: 1.6428571429;
}

@media screen and (max-width: 530px) {
  .about .wrap .txt {
    font-size: 18px;
    line-height: 1.6666666667;
    text-align: center;
  }
}

@media screen and (max-width: 530px) {
  .about .wrap .txt span:nth-of-type(2) {
    text-align: left;
    width: 93%;
    font-size: 16px;
    line-height: 1.875;
    margin-top: 10px;
  }
}

.about .wrap img {
  width: 56%;
}

@media screen and (max-width: 530px) {
  .about .wrap img {
    width: 100%;
  }
}

/*===========================================
お悩み解決(solution)
===========================================*/
.solution {
  background: url(../images/bt-outline.webp);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

@media screen and (min-width: 531px) and (max-width: 1280px) {
  .solution {
    padding: 0 1.5rem;
  }
}

@media screen and (max-width: 530px) {
  .solution {
    background: url(../images/bt-outline_sp.webp);
    background-size: cover;
  }
}

.solution .inner {
  padding: 50px 0 90px;
  position: relative;
}

@media screen and (max-width: 530px) {
  .solution .inner {
    padding: 25px 0 20px;
  }
}

.solution .txt1 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1.96875;
  display: block;
  padding: 30px 45px;
  background-color: rgba(13, 0, 64, 0.46);
  border-radius: 25px;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 530px) {
  .solution .txt1 {
    font-size: 16px;
    line-height: 1.875;
    font-weight: 400;
    padding: 22px 1rem 18px;
    text-align: left;
    width: 92%;
    margin: 0 auto;
    border-radius: 15px;
  }
}

.solution .txt2 {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.0952380952;
  text-align: center;
  margin-top: 60px;
  color: #F9189F;
  text-shadow: 0px 0px 4.6px #fff, 0px 0px 5.1px #fff, 0px 0px 5.5px #fff;
}

@media screen and (max-width: 530px) {
  .solution .txt2 {
    font-size: 20px;
    line-height: 1.5;
    width: 90%;
    margin: 20px auto 0;
  }
}

.solution .uranai_img {
  display: block;
  width: 494px;
  position: absolute;
  top: 0;
  right: -14px;
}

@media screen and (min-width: 531px) and (max-width: 1280px) {
  .solution .uranai_img {
    width: auto;
    height: 100%;
  }
}

@media screen and (max-width: 530px) {
  .solution .uranai_img {
    width: 348px;
    position: absolute;
    right: -50px;
  }
}

/*===========================================
種類と特徴(kinds)
===========================================*/
.kinds {
  padding: 40px 0 170px;
  background-image: url(../images/bg-outline2.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 530px) {
  .kinds {
    padding: 40px 0 60px;
  }
}

.kinds .kinds_treat {
  width: 50%;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 530px) {
  .kinds .kinds_treat {
    width: 81%;
  }
}

.kinds h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.15;
  color: #366CAB;
}

@media screen and (max-width: 530px) {
  .kinds h2 {
    font-size: 24px;
    line-height: 1.9166666667;
  }
}

.kinds .step_ttl {
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.4375;
  margin-top: 30px;
  text-align: center;
}

@media screen and (max-width: 530px) {
  .kinds .step_ttl {
    font-size: 16px;
    line-height: 2.875;
    margin-top: 0;
  }
}

.kinds .step_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 35px;
}

@media screen and (max-width: 530px) {
  .kinds .step_wrap {
    flex-direction: column;
    gap: 10px;
  }
}

.kinds .step_wrap .step_item {
  background-image: url(../images/step-bg.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: 30%;
  padding: 60px 0 50px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.5333333333;
}

.kinds .step_wrap .step_item span {
  padding: 0.5rem;
  font-size: 80%;
  color: #FFE76B;
}

@media screen and (max-width: 530px) {
  .kinds .step_wrap .step_item {
    width: 81%;
    padding: 45px 0 40px;
    font-size: 23px;
  }
}

.kinds .step_wrap img {
  width: 45px;
  position: relative;
  top: 15px;
}

@media screen and (max-width: 530px) {
  .kinds .step_wrap img {
    transform: rotate(90deg);
    position: static;
    top: 15px;
    width: 25px;
  }
}

@media screen and (min-width: 931px) and (max-width: 1150px) {
  .kinds .step_wrap .step_item {
    font-size: 22px;
  }

  .kinds .step_wrap img {
    width: 38px;
  }
}

@media screen and (min-width: 530px) and (max-width: 930px) {
  .kinds .step_wrap .br-none {
    display: none;
  }

  .kinds .step_wrap .step_item {
    font-size: 20px;
  }

  .kinds .step_wrap img {
    width: 25px;
  }
}

.kinds .goriyou {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.4375;
  color: #000000;
  margin-top: 50px;
  text-align: center;
}

@media screen and (max-width: 530px) {
  .kinds .goriyou {
    font-size: 18px;
    margin-top: 40px;
  }
}

.kinds .content {
  max-width: 1250px;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 85px;
}

@media screen and (max-width: 530px) {
  .kinds .content {
    margin-top: 20px;
    gap: 25px;
  }
}

.kinds .content .kinds_item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 90px;
}

@media screen and (max-width: 530px) {
  .kinds .content .kinds_item {
    flex-direction: column;
    gap: 10px;
  }
}

@media screen and (max-width: 1000px) {
  .kinds .content .kinds_item {
    flex-direction: column;
    gap: 10px;
  }
}

.kinds .content .kinds_img {
  width: 29%;
  height: -moz-fit-content;
  height: fit-content;
}

@media screen and (max-width: 530px) {
  .kinds .content .kinds_img {
    width: 75%;
  }
}

@media screen and (min-width: 531px) and (max-width: 1000px) {
  .kinds .content .kinds_img {
    width: 60%;
  }
}

@media screen and (max-width: 670px) {
  .kinds .content .kinds_img {
    width: 75%;
  }
}

.kinds .content .txt_wrap {
  width: 64%;
}

.kinds .content .txt_wrap .ttl_wrap {
  display: flex;
  align-items: center;
  gap: 30px;
}

@media screen and (max-width: 530px) {
  .kinds .content .txt_wrap .ttl_wrap {
    gap: 7px;
    justify-content: center;
  }
}

.kinds .content .txt_wrap .ttl_wrap .kinds_icon {
  width: 80px;
}

@media screen and (max-width: 530px) {
  .kinds .content .txt_wrap .ttl_wrap .kinds_icon {
    width: 28px;
  }
}

.kinds .content .txt_wrap h3 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 46px;
}

@media screen and (max-width: 530px) {
  .kinds .content .txt_wrap h3 {
    font-size: 18px;
    line-height: 1.6666666667;
  }
}

.kinds .content .txt_wrap .txt {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1.9583333333;
  margin-top: 10px;
}

@media screen and (max-width: 530px) {
  .kinds .content .txt_wrap .txt {
    font-size: 16px;
    line-height: 1.875;
    width: 94%;
    margin: 10px auto;
  }
}

.kinds .content .txt_wrap .btn {
  display: block;
  width: 220px;
  background-color: #5D50BD;
  padding: 17px 17px;
  position: relative;
  margin-top: 15px;
}

@media screen and (max-width: 530px) {
  .kinds .content .txt_wrap .btn {
    width: 180px;
    padding: 15px 17px 15px 25px;
    margin: 0 auto;
  }
}

.kinds .content .txt_wrap .btn .btn_txt {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media screen and (max-width: 530px) {
  .kinds .content .txt_wrap .btn .btn_txt {
    font-size: 16px;
    font-weight: 400;
  }
}

.kinds .content .txt_wrap .btn .btn_txt::before {
  content: "";
  display: block;
  background-image: url(../images/arrow2.svg);
  background-repeat: no-repeat;
  background-size: 11px 11px;
  width: 11px;
  height: 11px;
}

@media screen and (max-width: 1000px) {
  .kinds .content .txt_wrap .btn {
    margin: 15px auto;
  }
}

@media screen and (max-width: 1000px) {
  .kinds .content .txt_wrap {
    width: 90%;
  }
}

.btn-flow {
  display: flex;
  width: 460px;
  justify-content: space-between;
}

@media screen and (max-width: 530px) {
  .btn-flow {
    width: 100%;
  }
}

.sp-small {
  font-size: 30px;
  color: #000000;
  display: block;
  margin-bottom: 15px;
}

@media screen and (max-width: 530px) {
  .sp-small {
    font-size: 16px;
  }
}

/*===========================================
占い師のご紹介(member)
===========================================*/
.member {
  padding: 80px 0 60px;
  background-image: url(../images/member_bg.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

@media screen and (max-width: 530px) {
  .member {
    padding: 40px 0 50px;
  }
}

.member h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.15;
  color: #F4BF00;
}

@media screen and (max-width: 530px) {
  .member h2 {
    font-size: 24px;
    line-height: 1.9166666667;
  }
}

.member .txt {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.4375;
  color: #fff;
  margin-top: 15px;
}

@media screen and (max-width: 530px) {
  .member .txt {
    font-size: 18px;
    line-height: 1.6666666667;
    margin-top: 0;
  }
}

.member .content {
  margin-bottom: 35px;
}

.member .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (min-width: 531px) and (max-width: 1280px) {
  .member .inner {
    flex-direction: column;
    margin-top: 40px;
    gap: 55px;
  }
}

@media screen and (max-width: 530px) {
  .member .inner {
    flex-direction: column;
    margin-top: 40px;
    gap: 55px;
  }
}

@media screen and (max-width: 1280px) {
  .member .inner .inner {
    flex-direction: column;
    margin-top: 40px;
    gap: 55px;
  }
}

.member .inner .member_wrap {
  width: 48%;
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

@media screen and (min-width: 531px) and (max-width: 1280px) {
  .member .inner .member_wrap {
    width: 92%;
    margin: 0 auto;
    justify-content: center;
    gap: 15px;
  }
}

@media screen and (max-width: 530px) {
  .member .inner .member_wrap {
    flex-direction: column;
    width: 92%;
    margin: 0 auto;
  }
}

.member .inner .member_wrap img {
  width: 34%;
}

@media screen and (min-width: 531px) and (max-width: 1280px) {
  .member .inner .member_wrap img {
    width: 235px;
  }
}

@media screen and (max-width: 530px) {
  .member .inner .member_wrap img {
    width: 50%;
    display: block;
    margin: 0 auto;
  }
}

.member .inner .member_wrap h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.6428571429;
  color: #F4BF00;
  margin-bottom: 5px;
}

@media screen and (max-width: 530px) {
  .member .inner .member_wrap h3 {
    text-align: center;
    font-size: 23px;
    line-height: 2;
  }
}

.member .inner .member_wrap .txt_wrap {
  width: 62%;
}

@media screen and (max-width: 530px) {
  .member .inner .member_wrap .txt_wrap {
    width: 100%;
  }
}

.member .inner .member_wrap .profile {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1.6666666667;
  margin-bottom: 10px;
  color: #fff;
}

@media screen and (max-width: 530px) {
  .member .inner .member_wrap .profile {
    font-size: 16px;
    line-height: 1.875;
  }
}

.member .inner .member_wrap .profile span {
  color: #FFC8C8;
}

.member .inner .member_wrap .txt {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1.6666666667;
  text-align: left;
  color: #fff;
}

@media screen and (max-width: 530px) {
  .member .inner .member_wrap .txt {
    font-size: 16px;
    line-height: 1.875;
  }
}

.member .inner .member_wrap .btn {
  display: block;
  margin-top: 10px;
  padding: 10px 13px;
  background-color: #C18B00;
  width: 257px;
}

@media screen and (max-width: 530px) {
  .member .inner .member_wrap .btn {
    margin: 20px auto;
  }
}

.member .inner .member_wrap .btn .btn_txt {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1;
}

.member .inner .member_wrap .btn .btn_txt::before {
  content: "";
  display: inline-block;
  background-image: url(../images/arrow2.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 11px;
  height: 13px;
  position: relative;
  top: -1px;
  margin-right: 7px;
}

.member .cta .txt {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.4375;
  color: #FFE76B;
  margin-top: 0;
}

@media screen and (max-width: 530px) {
  .member .cta .txt {
    font-size: 20px;
    line-height: 1.5;
  }
}

.member .cta .wrap {
  display: flex;
  gap: 55px;
  justify-content: center;
  margin-top: 45px;
}

@media screen and (max-width: 530px) {
  .member .cta .wrap {
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
  }
}

@media screen and (min-width: 531px) and (max-width: 810px) {
  .member .cta .wrap {
    flex-direction: column;
    gap: 15px;
  }
}

.member .cta .btn img {
  display: block;
  width: 368px;
}

@media screen and (max-width: 530px) {
  .member .cta .btn img {
    width: 80%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 531px) and (max-width: 810px) {
  .member .cta .btn img {
    width: 60%;
    margin: 0 auto;
  }
}

.member .cta::before {
  content: "";
  display: block;
  background-image: url(../images/line-ctn.webp);
  background-repeat: repeat;
  background-position: center top;
  background-size: 2136px 12px;
  width: 100%;
  height: 12px;
  margin-bottom: 30px;
}

.member::before {
  content: "";
  display: block;
  background-image: url(../images/line-head.webp);
  background-repeat: repeat;
  background-position: center top;
  background-size: 1600px 20px;
  width: 100%;
  height: 20px;
  position: absolute;
  top: 0;
}

.member::after {
  content: "";
  display: block;
  background-image: url(../images/line-ctn.webp);
  background-repeat: repeat;
  background-position: center top;
  background-size: 2136px 12px;
  width: 100%;
  height: 12px;
  position: absolute;
  bottom: 10px;
}

/*===========================================
お客様の声(voice)
===========================================*/
.voice {
  padding: 70px 0;
  background-color: #EDE8FF;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 530px) {
  .voice {
    padding: 40px 0 20px;
  }
}

.voice .wrap {
  max-width: 1300px;
  background-color: #fff;
  border-radius: 20px;
  margin: 55px auto;
  padding: 45px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

@media screen and (min-width: 531px) and (max-width: 1280px) {
  .voice .wrap {
    width: 92%;
    padding: 20px 1rem 40px;
  }
}

@media screen and (max-width: 530px) {
  .voice .wrap {
    width: 92%;
    margin: 10px auto;
    padding: 20px 1rem 40px;
    gap: 40px;
  }
}

.voice h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.15;
  color: #725FBD;
}

@media screen and (max-width: 530px) {
  .voice h2 {
    font-size: 24px;
    line-height: 1.9166666667;
  }
}

.voice .voice_item {
  max-width: 1250px;
  margin: 0 auto;
}

.voice .voice_item h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.9166666667;
  margin-bottom: 15px;
}

@media screen and (max-width: 530px) {
  .voice .voice_item h3 {
    font-size: 18px;
    line-height: 2.5555555556;
    margin-bottom: 0;
  }
}

.voice .voice_item hr {
  margin-bottom: 20px;
  color: #D8C7FD;
}

@media screen and (max-width: 530px) {
  .voice .voice_item hr {
    margin-bottom: 10px;
  }
}

.voice .voice_item .txt {
  font-size: 20px;
  font-weight: 500;
  line-height: 2;
}

@media screen and (max-width: 530px) {
  .voice .voice_item .txt {
    font-size: 16px;
    line-height: 1.875;
  }
}

.voice::before,
.voice::after {
  content: "";
  display: block;
  background-image: url(../images/voice_header.webp);
  background-repeat: repeat;
  background-position: center top;
  background-size: 2006px 12px;
  width: 100%;
  height: 12px;
  position: absolute;
}

.voice::before {
  top: 0;
}

.voice::after {
  bottom: 0;
}

/*===========================================
フッター CTA
===========================================*/
footer {
  background-image: url(../images/bt-outline.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 50px 0 0;
}

@media screen and (max-width: 530px) {
  footer {
    padding: 30px 0 0;
  }
}

footer .cta {
  text-align: center;
  margin-bottom: 55px;
}

@media screen and (max-width: 530px) {
  footer .cta {
    margin-bottom: 40px;
  }
}

footer .cta .txt {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.4375;
  color: #430085;
  margin-top: 0;
}

@media screen and (max-width: 530px) {
  footer .cta .txt {
    font-size: 20px;
    line-height: 1.5;
  }
}

footer .cta .wrap {
  display: flex;
  gap: 55px;
  justify-content: center;
  margin-top: 45px;
}

@media screen and (max-width: 530px) {
  footer .cta .wrap {
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
  }
}

@media screen and (min-width: 531px) and (max-width: 810px) {
  footer .cta .wrap {
    flex-direction: column;
    gap: 15px;
  }
}

footer .cta .btn img {
  display: block;
  width: 368px;
}

@media screen and (max-width: 530px) {
  footer .cta .btn img {
    width: 80%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 531px) and (max-width: 810px) {
  footer .cta .btn img {
    width: 60%;
    margin: 0 auto;
  }
}

footer .copy-right {
  padding: 15px 0 10px;
  background-color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 2.875;
  text-align: center;
  color: #430085;
}

@media screen and (max-width: 530px) {
  footer .copy-right {
    font-size: 12px;
  }
}

footer .copy-right span {
  text-decoration: underline;
}

.smunder_yoyaku {
  display: none;
}

@media screen and (max-width: 530px) {
  .smunder_yoyaku {
    display: inherit;
    padding-top: 0px;
    font-size: 14px;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    text-align: center;
    background-color: #f0edde;
    z-index: 100;
    color: #000000;
  }
}

.smunder_btn {
  font-size: 16px;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  text-align: center;
  background-color: rgb(255, 152, 67);
}

.smunder_btn a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 7px 3.53% 7px 3.53%;
  background-image: url(images/mail-icon.svg);
  background-position: 10% center;
  background-size: 26px auto;
  background-repeat: no-repeat;
}

/*# sourceMappingURL=front.css.map */