@charset "utf-8";
.intro {
  font-size: 19px;
  margin: -10px 0 46px;
}
.reasons > div {
  position: relative;
}
.reasons .box_wrapper {
  position: relative;
}
.reasons .txt_box {
  max-width: 580px;
  z-index: 20;
}
.reasons .ttl_box {
  padding: 13px 0 15px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reason01 .ttl_box {
  background:  url(../img/cheap-reason/num_01.png) no-repeat, url(../img/common/bg-lightblue_dot.png);
  background-position: bottom right, left top;
}
.reason02 .ttl_box {
  background:  url(../img/cheap-reason/num_02.png) no-repeat, url(../img/common/bg-lightblue_dot.png);
  background-position: bottom right, left top;
}
.reason03 .ttl_box {
  background:  url(../img/cheap-reason/num_03.png) no-repeat, url(../img/common/bg-lightblue_dot.png);
  background-position: bottom right, left top;
}
.reason04 .ttl_box {
  background:  url(../img/cheap-reason/num_04.png) no-repeat, url(../img/common/bg-lightblue_dot.png);
  background-position: bottom right, left top;
}
.reason05 .ttl_box {
  background:  url(../img/cheap-reason/num_05.png) no-repeat, url(../img/common/bg-lightblue_dot.png);
  background-position: bottom right, left top;
}
.reason06 .ttl_box {
  background:  url(../img/cheap-reason/num_06.png) no-repeat, url(../img/common/bg-lightblue_dot.png);
  background-position: bottom right, left top;
}
.reasons h3 { 
  font-size: 34px;
  line-height: 1.5;
  color: #fff;
}
.reasons .txt_content {
  padding: 30px 48px 44px;
}
.reasons h4 {
  font-size: 30px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.reasons .txt_content .btn {
  margin: 34px auto 12px;
}
.reasons .photo {
  max-width: 620px;
  position: relative;
  z-index: 10;
}
.reasons .photo ul {
  margin-top: 20px;
}


ul.plan_btns {
  margin: 40px 0 0;
  position: relative;
  z-index: 10;
}
ul.plan_btns li {
  margin: 0;
}
ul.plan_btns li a::after {
  transform: none;
}

.reason01 .txt_box {
  position: relative;
  top: 30px;
  margin-left: auto;
}
.reason01 .photo {
  position: absolute;
  top: 0;
}
.reason02 .txt_box {
  position: absolute;
  top: 30px;
}
.reason02 .photo {
  margin-left: auto;
}
.reason03 .txt_box {
  position: absolute;
  top: 30px;
  right: 0;
}
.reason03 .photo {
  margin-right: auto;
}
.reason04 .txt_box {
  position: relative;
  top: 30px;
  margin-right: auto;
}
.reason04 .photo {
  position: absolute;
  top: 0;
  right: 0;
}
.reason05 .txt_box {
  position: relative;
  top: 30px;
  margin-left: auto;
}
.reason05 .photo {
  position: absolute;
  top: 0;
}
.reason06 .txt_box {
  position: absolute;
  top: 30px;
}
.reason06 .photo {
  margin-left: auto;
}
.reason01, .reason04, .reason05 {
  margin-bottom: 80px;
}
.reason02 {
  margin-bottom: 50px;
}
.reason03 {
  margin-bottom: 70px;
}
.bg_circle_left::before {
  background: url(../img/common/bg_circle03.png);
  z-index: 1;
  top: -80px;
}
.bg_circle_right::before {
  background: url(../img/common/bg_circle04.png);
  z-index: 1;
  top: -80px;
}


@media only screen and (max-width: 1024px) {
  .reasons .txt_box {
    max-width: 480px;
  }
  .reasons h3 {
    font-size: 30px;
  }
  .reasons h4 {
    font-size: 26px;
  }
  .reasons .txt_content {
    padding: 23px 38px 32px;
  }
}
@media only screen and (max-width: 960px) {
  .intro {
    font-size: 15px;
  }
  .reasons .photo {
    max-width: 52%;
  }
  .reasons .photo ul li {
    width: 47.8%;
  }
  .reasons .txt_box {
    max-width: 62%;
  }
  .reasons .ttl_box {
    min-height: 70px;
    background-size: 22%, auto;
  }
  .reasons h3 {
    font-size: 26px;
  }
  .reasons h4 {
    font-size: 22px;
  }
  .reasons .txt_content {
    padding: 3vw 3.6vw 3.6vw;
  }
  .reasons .txt_content .btn {
    margin: 18px auto 12px;
  }
  ul.plan_btns {
    margin: 9.5vw 0 0;
  }
  .reason02 {
    margin-bottom: 110px;
  }
  .reason03 {
    margin-bottom: 50px;
  }
  .reason06 {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 568px) {
  .intro {
    margin: -5px 0 22px;
  }
  .reasons > div {
    margin-bottom: 40px !important;
  }
  .reasons > div:last-child {
    margin-bottom: 0 !important;
  }
  .reasons .box_wrapper {
    margin: 0 -5.3vw;
  }
  .reasons .photo {
    position: relative !important;
    margin: 0;
    max-width: 100%;
    padding: 30px 5.3vw 0;
  }
  .reasons .ttl_box {
    min-height: 55px;
    padding: 10px 0 ;
    background-size: 24%, auto;
  }
  .reasons h3 {
    font-size: 23px;
  }
  .reasons h4 {
    font-size: 21px;
    text-align: center;
    margin-bottom: 10px;
  }
  .reasons .txt_box {
    position: relative !important;
    top: 0;
    margin: 0;
    border-radius: 0;
    max-width: 100%;
  }
  .reasons .txt_content {
    padding: 14px 5.3vw 20px;
  }
  .reasons .txt_content .btn {
    margin: 18px auto 14px;
  }
  .reasons .photo ul {
    margin-top: 15px;
  }
  ul.plan_btns {
    margin: 30px 0 0;
  }
  ul.plan_btns li {
    margin: 0 auto;
  }
  .reasons .ttl_box {
    background-position: bottom 0 right 1.1vw, left top;
  }
  .reason03 .ttl_box {
    background-size: 26%, auto;
  }
  .reason04 .ttl_box {
    background-size: 26%, auto;
  }
  .reason05 .ttl_box {
    background-size: 26%, auto;
  }
  .reason04 .btn a {
    font-size: 15px;
    padding: 10px 5% 12px;
  }
  .bg_circle_left::before, .bg_circle_right::before {
    content: none;
  }
}