/* =================================
sakigake
================================= */
.font-roboto {
  font-family: "Roboto Condensed", sans-serif;
}

.wrapper {
  padding: 85.3px 0 0;
}
@media only screen and (max-width: 768px) {
  .wrapper {
    padding-top: 60px;
  }
}

/* header */
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 15px 28px;
  background: #fff;
}
@media only screen and (max-width: 768px) {
  .header {
    padding: 10px 15px 14px;
  }
}
.header .logo .read {
  display: block;
  margin-bottom: 5px;
  font-size: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .header .logo .read {
    font-size: 1rem;
  }
}
.header .logo .logo {
  max-width: 285.5px;
}
@media only screen and (max-width: 768px) {
  .header .logo .logo {
    max-width: 175px;
  }
}
.header .logo .logo-sub {
  position: relative;
  bottom: -4px;
  max-width: 100%;
  margin-left: 20px;
}
@media only screen and (max-width: 768px) {
  .header .logo .logo-sub {
    max-width: 58px;
    margin-left: 11px;
  }
}
.header .header-btn {
  width: 100%;
  max-width: 203px;
}
@media only screen and (max-width: 768px) {
  .header .header-btn {
    width: 50%;
    max-width: none;
  }
}
@media only screen and (max-width: 768px) {
  .header .header-btn + .header-btn {
    border-left: 1px solid #fff;
  }
}
.header .header-btn > a {
  display: block;
  padding: 9px;
  background: #5670f8;
  border-radius: 6px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 768px) {
  .header .header-btn > a {
    padding: 9.5px 6px;
    border-radius: 0;
    font-size: 1.4rem;
  }
}
.header .header-btn > a:hover {
  background: #1f2fab;
  text-decoration: none;
}
.header .btn-forrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  max-width: 426px;
  margin-left: auto;
}
@media only screen and (max-width: 768px) {
  .header .btn-forrow {
    position: fixed;
    bottom: 0;
    left: 0;
    max-width: none;
    margin-left: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}
@media only screen and (max-width: 768px) {
  .header .btn-forrow.hide {
    bottom: -100px;
  }
}

/* footer */
.footer {
  padding: 20px 15px;
}
.footer .copy {
  font-size: 1.4rem;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .footer .copy {
    font-size: 1rem;
  }
}

/* common */
.modal-active {
  overflow-y: hidden;
}

.sec-default {
  padding: 100px 0;
}
@media only screen and (max-width: 768px) {
  .sec-default {
    padding: 40px 0;
  }
}
.sec-default.has-bg {
  background: #f6f7f7;
}
.sec-default h2 {
  font-size: 3.4rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .sec-default h2 {
    font-size: 2rem;
    line-height: 1.41;
  }
}
.sec-default h2 span {
  display: block;
  font-size: 2.4rem;
  font-weight: 400;
}
@media only screen and (max-width: 768px) {
  .sec-default h2 span {
    margin-bottom: 5px;
    font-size: 1.4rem;
  }
}
.sec-default h2 small {
  display: block;
  margin-bottom: 5px;
  font-size: 2.2rem;
  color: #636363;
}
@media only screen and (max-width: 768px) {
  .sec-default h2 small {
    margin-bottom: 10px;
    font-size: 1.4rem;
  }
}
.sec-default h2 strong {
  color: #1f2fab;
}

.sec-inner {
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 15px;
}

.mod-consul {
  max-width: 1160px;
  margin: 62px auto 53px;
}
@media only screen and (max-width: 768px) {
  .mod-consul {
    margin: 47px -15px -40px;
  }
}
.mod-consul > a {
  display: block;
  position: relative;
  padding: 38.5px 66px 38.5px 323px;
  background: #5670f8;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 30px 0 rgba(86, 112, 248, 0.3);
          box-shadow: 0 0 30px 0 rgba(86, 112, 248, 0.3);
  color: #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 768px) {
  .mod-consul > a {
    padding: 93px 15px 20px;
    border-radius: 0;
  }
}
.mod-consul > a:hover {
  background: #1f2fab;
  text-decoration: none;
}
.mod-consul > a:hover .mod-consul-image img {
  opacity: 0;
}
.mod-consul-image {
  position: absolute;
  top: 50%;
  left: 31px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 263px;
  background: url(../images/img_consult_hover.png) no-repeat 0 0;
  background-size: contain;
}
@media only screen and (max-width: 768px) {
  .mod-consul-image {
    top: -32px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 103px;
  }
}
.mod-consul-image img {
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.mod-consul-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 768px) {
  .mod-consul-wrap {
    display: block;
  }
}
.mod-consul-wrap .read {
  width: 100%;
  max-width: 511px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.76;
}
@media only screen and (max-width: 768px) {
  .mod-consul-wrap .read {
    max-width: none;
    font-size: 1.4rem;
    line-height: 1.47;
  }
}
.mod-consul-wrap .btn {
  width: 100%;
  max-width: 203px;
  margin-left: auto;
}
@media only screen and (max-width: 768px) {
  .mod-consul-wrap .btn {
    margin: 15px auto 0;
  }
}
.mod-consul-wrap .btn > span {
  display: block;
  padding: 9px;
  background: #fff;
  border-radius: 6px;
  color: #1f2fab;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .mod-consul-wrap .btn > span {
    padding: 9.5px;
    font-size: 1.4rem;
  }
}

/* kv */
.kv {
  position: relative;
  padding: 7px 3.2638888889vw 100px 0;
}
@media only screen and (max-width: 768px) {
  .kv {
    padding: 20px 15px;
  }
}
.kv-text {
  position: absolute;
  top: 7.1527777778vw;
  left: 9.9305555556vw;
}
@media only screen and (max-width: 768px) {
  .kv-text {
    position: static;
  }
}
.kv-text h1 {
  margin: 15px 0 30px;
  color: #636363;
  font-size: 2.9166666667vw;
  font-weight: 700;
  line-height: 1.63;
}
@media only screen and (max-width: 768px) {
  .kv-text h1 {
    margin: 10px 0 20px;
    font-size: 6.25vw;
  }
}
.kv-text h1 > span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), color-stop(80%, #ffe0ea));
  background: linear-gradient(transparent 80%, #ffe0ea 80%);
}
.kv-text .text-1 {
  color: #636363;
  font-size: 1.3194444444vw;
}
@media only screen and (max-width: 768px) {
  .kv-text .text-1 {
    font-size: 3.75vw;
  }
}
.kv-text .text-2 {
  color: #1f2fab;
  font-size: 1.7361111111vw;
}
@media only screen and (max-width: 768px) {
  .kv-text .text-2 {
    font-size: 4.375vw;
  }
}
.kv-text .btn-contact {
  width: 25vw;
  margin-top: 20px;
}
@media only screen and (max-width: 768px) {
  .kv-text .btn-contact {
    width: 68.75vw;
    margin: 12px auto 0;
  }
}
.kv-text .btn-contact > a {
  display: block;
  padding: 13px;
  background: #5670f8;
  border-radius: 6px;
  color: #fff;
  font-size: 1.1111111111vw;
  font-weight: 700;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 768px) {
  .kv-text .btn-contact > a {
    padding: 8px;
    font-size: 4.375vw;
  }
}
.kv-text .btn-contact > a:hover {
  background: #1f2fab;
  text-decoration: none;
}
.kv-image {
  position: relative;
  max-width: 45.2777777778vw;
  min-height: 40.5555555556vw;
  margin-left: auto;
}
@media only screen and (max-width: 768px) {
  .kv-image {
    max-width: none;
    min-height: 81.25vw;
    margin: 20px 0 0;
  }
}
.kv-image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.kv-image img + img {
  display: none;
}

.merit-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 5px;
}
@media only screen and (max-width: 768px) {
  .merit-list {
    display: block;
    margin-top: 20px;
  }
}
.merit-list > li {
  width: 27.5%;
  margin-top: 40px;
}
@media only screen and (max-width: 768px) {
  .merit-list > li {
    width: 100%;
    margin-top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .merit-list > li + li {
    margin-top: 25px;
  }
}
@media only screen and (max-width: 768px) {
  .merit-list > li .image {
    padding: 0 30px;
  }
}
.merit-list > li .image img {
  width: 100%;
}
.merit-list > li .image + p {
  margin-top: 15px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .merit-list > li .image + p {
    margin-top: 5px;
    line-height: 1.76;
  }
}

.merit-catch {
  margin-top: 45px;
  color: #1f2fab;
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .merit-catch {
    margin-top: 40px;
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 768px) {
  .merit-catch > br {
    display: none;
  }
}

.flow-area {
  margin-top: 45px;
}
@media only screen and (max-width: 768px) {
  .flow-area {
    margin-top: 20px;
  }
}
.flow-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  max-width: 1025px;
  margin: 0 auto;
  background: #fff;
  -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}
.flow-box + .flow-box {
  margin-top: 41px;
}
@media only screen and (max-width: 768px) {
  .flow-box + .flow-box {
    margin-top: 30px;
  }
}
.flow-box + .flow-box:before {
  display: block;
  content: "";
  position: absolute;
  top: -31px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 22.5px 0 22.5px;
  border-color: #404b9d transparent transparent transparent;
}
@media only screen and (max-width: 768px) {
  .flow-box + .flow-box:before {
    top: -21px;
    border-width: 14px 14.5px 0 14.5px;
  }
}
.flow-wrap {
  position: relative;
  width: 880px;
}
@media only screen and (max-width: 768px) {
  .flow-wrap {
    width: 74.1379310345%;
  }
}
.flow-wrap .image {
  position: absolute;
  left: 11px;
}
@media only screen and (max-width: 768px) {
  .flow-wrap .image {
    display: none;
  }
}
.flow-wrap .image.flow-1 {
  top: 8px;
  width: 220px;
}
.flow-wrap .image.flow-2 {
  top: 19px;
  width: 209px;
}
.flow-wrap .image img {
  width: 100%;
}
.flow-text {
  padding: 20px 0 20px 275px;
}
@media only screen and (max-width: 768px) {
  .flow-text {
    padding: 10px;
  }
}
.flow-text.has-bg {
  background: #404b9d;
}
.flow-text.has-bg h3 {
  color: #fff;
}
.flow-text.flow-last {
  padding-left: 0;
}
@media only screen and (max-width: 768px) {
  .flow-text.flow-last {
    padding-left: 10px;
  }
}
.flow-text.flow-last h3 {
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.29;
}
@media only screen and (max-width: 768px) {
  .flow-text.flow-last h3 {
    font-size: 1.4rem;
  }
}
.flow-text h3 {
  font-size: 2rem;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .flow-text h3 {
    font-size: 1.4rem;
  }
}
.flow-text h3.has-circle:before {
  display: inline-block;
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 15px;
  background: #f52a6d;
  border-radius: 50%;
}
@media only screen and (max-width: 768px) {
  .flow-text h3.has-circle:before {
    width: 9px;
    height: 9px;
    margin-right: 8px;
  }
}
.flow-text .visualize {
  margin-top: 10px;
  padding: 0 60px 0 55px;
}
@media only screen and (max-width: 768px) {
  .flow-text .visualize {
    margin-top: 5px;
    padding: 0 0 0 37px;
  }
}
.flow-text .visualize + h3 {
  margin-top: 20px;
  padding: 20px 0 8px;
  border-top: 1px solid #d4d4d4;
}
@media only screen and (max-width: 768px) {
  .flow-text .visualize + h3 {
    margin-top: 15px;
    padding-top: 15px;
  }
}
.flow-text .visualize > li {
  list-style-type: disc;
  font-size: 1.4rem;
  line-height: 1.69;
}
@media only screen and (max-width: 768px) {
  .flow-text .visualize > li {
    font-size: 1.2rem;
    line-height: 1.22;
  }
}
.flow-text .visualize > li + li {
  margin-top: 6px;
}
.flow-text .flow-read {
  padding: 0 60px 0 30px;
  font-size: 1.4rem;
}
@media only screen and (max-width: 768px) {
  .flow-text .flow-read {
    padding: 0 0 0 17px;
    font-size: 1.2rem;
  }
}
.flow-text .text-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5px;
  padding: 0 15px 0 30px;
}
@media only screen and (max-width: 768px) {
  .flow-text .text-wrap {
    display: block;
    padding: 0 0 0 17px;
  }
}
.flow-text .text-wrap p {
  width: 330px;
  font-size: 1.4rem;
}
@media only screen and (max-width: 768px) {
  .flow-text .text-wrap p {
    width: 100%;
    font-size: 1.2rem;
  }
}
.flow-text .text-wrap p small {
  font-size: 1.2rem;
  line-height: 1.22;
}
.flow-text .text-wrap .enclosure {
  width: 208px;
  margin-left: 20px;
  padding: 7px;
  border: 3px solid #e0e0e0;
}
@media only screen and (max-width: 768px) {
  .flow-text .text-wrap .enclosure {
    width: 100%;
    margin: 5px 0 0;
    padding: 5px;
  }
}
.flow-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 145px;
}
@media only screen and (max-width: 768px) {
  .flow-status {
    width: 25.8620689655%;
  }
}
.flow-status.free {
  background: -webkit-gradient(linear, left top, right top, from(#898989), color-stop(11%, #9c9c9c), to(#9c9c9c));
  background: linear-gradient(to right, #898989 0%, #9c9c9c 11%, #9c9c9c 100%);
}
.flow-status.cost {
  background: -webkit-gradient(linear, left top, right top, from(#e10d53), color-stop(12%, #f52a6d), to(#f52a6d));
  background: linear-gradient(to right, #e10d53 0%, #f52a6d 12%, #f52a6d 100%);
}
.flow-status > span {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.39;
}
@media only screen and (max-width: 768px) {
  .flow-status > span {
    font-size: 1.6rem;
  }
}
.flow-arrow-box {
  position: relative;
  max-width: 1025px;
  min-height: 247px;
  margin: 0 auto;
  padding: 28px 0 71px;
}
@media only screen and (max-width: 768px) {
  .flow-arrow-box {
    min-height: 325px;
    padding: 20px 0 50px;
  }
}
.flow-arrow-box:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
  width: 100%;
  max-width: 665px;
  height: 100%;
  background: -webkit-gradient(linear, left bottom, left top, from(#889de7), to(rgba(201, 214, 238, 0)));
  background: linear-gradient(to top, #889de7, rgba(201, 214, 238, 0));
  clip-path: polygon(50% 100%, 100% 39%, 100% 0, 0 0, 0 39%);
  opacity: 0.46;
}
@media only screen and (max-width: 768px) {
  .flow-arrow-box:after {
    width: 73.125vw;
    max-width: none;
    clip-path: polygon(50% 100%, 100% 83.7%, 100% 0, 0 0, 0 83.7%);
  }
}
.flow-arrow-box .more-text {
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .flow-arrow-box .more-text {
    font-size: 2rem;
  }
}
.flow-arrow-box .more-text strong {
  color: #1f2fab;
}
.flow-arrow-box .more-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 33px;
}
@media only screen and (max-width: 768px) {
  .flow-arrow-box .more-list {
    display: block;
    margin-top: 16px;
  }
}
.flow-arrow-box .more-list > li {
  width: calc(33.3333333333% - 20px);
  padding: 14.5px;
  background: #404b9d;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.47;
}
@media only screen and (max-width: 768px) {
  .flow-arrow-box .more-list > li {
    width: 100%;
    padding: 10px;
    font-size: 1.4rem;
    line-height: 1.3;
  }
}
.flow-arrow-box .more-list > li + li {
  margin-left: auto;
}
@media only screen and (max-width: 768px) {
  .flow-arrow-box .more-list > li + li {
    margin: 5px 0 0;
  }
}
.flow-catch {
  color: #1f2fab;
  font-size: 3.4rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .flow-catch {
    margin-top: -1.5em;
    font-size: 2rem;
    line-height: 1.41;
  }
}

.result-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-top: 40px;
}
@media only screen and (max-width: 768px) {
  .result-list {
    display: block;
    margin-top: 20px;
  }
}
.result-list > li {
  width: 31.4166666667%;
  background: #fff;
  -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 768px) {
  .result-list > li {
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .result-list > li + li {
    margin-top: 15px;
  }
}
.result-list > li h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 94px;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.54;
}
@media only screen and (max-width: 768px) {
  .result-list > li h3 {
    display: block;
    min-height: auto;
    padding: 15px 10px;
    font-size: 1.4rem;
  }
}
.result-list > li .image {
  padding: 0 22px 28px;
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .result-list > li .image {
    padding: 0 15px 10px;
  }
}
.result-list > li .image .modal-text {
  display: block;
  margin-bottom: 5px;
  color: #2e45f2;
  font-size: 1.2rem;
  text-align: right;
  text-decoration: underline;
}
@media only screen and (max-width: 768px) {
  .result-list > li .image .modal-text {
    display: none;
  }
}
.result-list > li .image .modal-text:before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 9px;
  background: url(../images/icon_modal.png) no-repeat 0 0;
  vertical-align: middle;
}
.result-list > li .image img {
  width: 100%;
}
.result-list > li p {
  padding: 13.5px;
  background: #404b9d;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .result-list > li p {
    padding: 10px;
    font-size: 1.4rem;
  }
}
.result-list > li p strong {
  font-size: 2.2rem;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .result-list > li p strong {
    font-size: 1.6rem;
  }
}

.modal-content {
  display: none;
  position: fixed;
  top: 85.3px;
  left: 0;
  width: 100%;
  height: calc(100vh - 85.3px);
  background: rgba(0, 0, 0, 0.7);
}
.modal-content .modal-image {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 100%;
  margin: auto;
}
.modal-content .modal-image img {
  width: 100%;
}

.cost-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  max-width: 880px;
  margin: 22px auto 0;
  padding: 40px 35px 50px;
  background: #fff;
  -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 768px) {
  .cost-box {
    display: block;
    padding: 20px 15px;
  }
}
.cost-box .discription {
  font-size: 2rem;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .cost-box .discription {
    font-size: 1.6rem;
  }
}
.cost-box .discription strong {
  font-size: 2.6rem;
}
@media only screen and (max-width: 768px) {
  .cost-box .discription strong {
    font-size: 2rem;
  }
}
.cost-box .discription small {
  display: block;
  font-size: 1.6rem;
}
@media only screen and (max-width: 768px) {
  .cost-box .discription small {
    font-size: 1.2rem;
  }
}
.cost-box .definition {
  margin-left: auto;
  color: #f52a6d;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .cost-box .definition {
    margin: 10px 0;
    font-size: 2.3rem;
    text-align: center;
  }
}
.cost-box .definition strong {
  font-size: 7.4rem;
}
@media only screen and (max-width: 768px) {
  .cost-box .definition strong {
    font-size: 5.6rem;
  }
}
.cost-box .notes {
  width: 160px;
  margin-left: 11px;
  color: #f52a6d;
  font-size: 1.4rem;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .cost-box .notes {
    width: 100%;
    margin: 0;
    font-size: 1.2rem;
  }
}

.cost-arrow-box {
  position: relative;
  max-width: 880px;
  min-height: 331px;
  margin: 0 auto 11px;
  padding: 8px 0 0;
}
@media only screen and (max-width: 768px) {
  .cost-arrow-box {
    min-height: 262px;
  }
}
.cost-arrow-box:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
  width: 100%;
  max-width: 523px;
  height: 100%;
  background: -webkit-gradient(linear, left bottom, left top, from(#889de7), to(rgba(201, 214, 238, 0)));
  background: linear-gradient(to top, #889de7, rgba(201, 214, 238, 0));
  clip-path: polygon(50% 100%, 100% 54%, 100% 0, 0 0, 0 54%);
  opacity: 0.46;
}
@media only screen and (max-width: 768px) {
  .cost-arrow-box:after {
    width: 81.5625vw;
    max-width: none;
    clip-path: polygon(50% 100%, 100% 71%, 100% 0, 0 0, 0 71%);
  }
}
.cost-arrow-box img {
  display: block;
  width: 100%;
  max-width: 359px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .cost-arrow-box img {
    max-width: 240px;
  }
}

.cost-catch {
  color: #1f2fab;
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .cost-catch {
    font-size: 2rem;
    line-height: 1.41;
  }
}

.point-list {
  max-width: 900px;
  margin: 45px auto 0;
}
@media only screen and (max-width: 768px) {
  .point-list {
    margin: 15px 0 0;
  }
}
.point-list > li {
  position: relative;
}
.point-list > li + li {
  margin-top: 50px;
}
@media only screen and (max-width: 768px) {
  .point-list > li + li {
    margin-top: 25px;
  }
}
.point-list > li:nth-child(1) .image {
  padding-top: 40px;
}
@media only screen and (max-width: 768px) {
  .point-list > li:nth-child(1) .image {
    padding: 0;
  }
}
.point-list > li:nth-child(1) .image img {
  max-width: 150px;
}
@media only screen and (max-width: 768px) {
  .point-list > li:nth-child(1) .image img {
    max-width: 100px;
  }
}
.point-list > li:nth-child(2) .image {
  padding-top: 60px;
}
@media only screen and (max-width: 768px) {
  .point-list > li:nth-child(2) .image {
    padding: 0;
  }
}
.point-list > li:nth-child(2) .image img {
  max-width: 157px;
}
@media only screen and (max-width: 768px) {
  .point-list > li:nth-child(2) .image img {
    max-width: 105px;
  }
}
.point-list > li:nth-child(3) .image {
  padding-top: 50px;
}
@media only screen and (max-width: 768px) {
  .point-list > li:nth-child(3) .image {
    padding: 0;
  }
}
.point-list > li:nth-child(3) .image img {
  max-width: 132px;
}
@media only screen and (max-width: 768px) {
  .point-list > li:nth-child(3) .image img {
    max-width: 86px;
  }
}
.point-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  padding: 6px 0 0;
  background: #404b9d;
  color: #fff;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .point-num {
    left: 9.0625vw;
    width: 42px;
    height: 42px;
    padding-top: 4px;
  }
}
.point-num span {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .point-num span {
    font-size: 1rem;
  }
}
.point-num .num {
  font-size: 3.2rem;
}
@media only screen and (max-width: 768px) {
  .point-num .num {
    font-size: 2.4rem;
  }
}
.point-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 768px) {
  .point-wrap {
    display: block;
  }
}
.point-wrap .image {
  width: 207px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .point-wrap .image {
    width: 100%;
  }
}
.point-wrap .text {
  width: 693px;
}
@media only screen and (max-width: 768px) {
  .point-wrap .text {
    width: 100%;
  }
}
.point-wrap h3 {
  padding: 10px 0 20px;
  color: #1f2fab;
  font-size: 2rem;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .point-wrap h3 {
    padding: 5px 0;
    font-size: 1.4rem;
    line-height: 1.54;
  }
}
.point-wrap .read {
  line-height: 1.54;
}
@media only screen and (max-width: 768px) {
  .point-wrap .read {
    font-size: 1.2rem;
    line-height: 1.4;
  }
}
.point-wrap .read strong {
  font-weight: 700;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), color-stop(80%, #ffe0ea));
  background: linear-gradient(transparent 80%, #ffe0ea 80%);
}
@media only screen and (max-width: 768px) {
  .point-wrap .read strong {
    font-size: 1.2rem;
  }
}
.point-wrap .read sub {
  font-size: 1rem;
}
.point-wrap .notes {
  margin-top: 10px;
  font-size: 0.9rem;
}
.point-wrap .optimal-list {
  margin-top: 10px;
}
@media only screen and (max-width: 768px) {
  .point-wrap .optimal-list li {
    position: relative;
    padding-left: 21px;
    font-size: 1.4rem;
  }
}
.point-wrap .optimal-list li + li {
  margin-top: 5px;
}
@media only screen and (max-width: 768px) {
  .point-wrap .optimal-list li + li {
    margin-top: 10px;
  }
}
.point-wrap .optimal-list li:before {
  display: inline-block;
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 8px;
  background: #f52a6d;
  border-radius: 50%;
}
@media only screen and (max-width: 768px) {
  .point-wrap .optimal-list li:before {
    position: absolute;
    top: 3px;
    left: 0;
    width: 12px;
    height: 12px;
    margin-right: 0;
  }
}
.point-wrap .optimal-list li span {
  font-weight: 700;
}
.point-wrap .icon-x {
  margin-bottom: 10px;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .point-wrap .icon-x {
    position: relative;
    padding-left: 21px;
    font-size: 1.4rem;
  }
}
.point-wrap .icon-x:before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 7px;
  background: url(../images/icon_x.png) no-repeat 0 0;
  background-size: contain;
  vertical-align: baseline;
}
@media only screen and (max-width: 768px) {
  .point-wrap .icon-x:before {
    position: absolute;
    top: 3px;
    left: 0;
    width: 14px;
    height: 14px;
    margin: 0;
  }
}
.point-wrap .icon-check {
  margin-bottom: 10px;
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .point-wrap .icon-check {
    position: relative;
    padding-left: 21px;
    font-size: 1.4rem;
  }
}
.point-wrap .icon-check:before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 7px;
  background: url(../images/icon_check.png) no-repeat 0 0;
  background-size: contain;
  vertical-align: baseline;
}
@media only screen and (max-width: 768px) {
  .point-wrap .icon-check:before {
    position: absolute;
    top: 3px;
    left: 0;
    width: 14px;
    height: 14px;
    margin: 0;
  }
}

.form-area {
  max-width: 720px;
  margin: 20px auto 0;
}
.form-area iframe {
  width: 100%;
}
.form-area [id*=embbed] {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

/* download */
.download header {
  padding: 27.5px 15px;
  background: linear-gradient(135deg, #0e3c88 0%, #017aad 48%, #00a8bc 100%);
}
@media only screen and (max-width: 768px) {
  .download header {
    padding: 20.5px 15px;
  }
}
.download header h1 {
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .download header h1 {
    font-size: 1.5rem;
  }
}
.download section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 15px;
}
@media only screen and (max-width: 768px) {
  .download section {
    padding: 36px 15px;
  }
}
.download section h2 {
  margin-bottom: 50px;
  color: #0e3c88;
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .download section h2 {
    margin-bottom: 28px;
    font-size: 1.8rem;
  }
}
.download section .column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .download section .column {
    display: block;
  }
}
.download section .book-dsc {
  width: calc(100% - 720px);
  max-width: 450px;
}
@media only screen and (max-width: 768px) {
  .download section .book-dsc {
    display: none;
  }
}
.download section .book-dsc .img {
  text-align: center;
}
.download section .book-dsc .img img {
  width: 100%;
  max-width: 220px;
  -webkit-box-shadow: 0.4em 0.4em 0.4em 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0.4em 0.4em 0.4em 0 rgba(0, 0, 0, 0.25);
}
.download section .form {
  position: relative;
  width: calc(100% - 515px);
  padding: 36px;
  background: #fff;
  -webkit-box-shadow: 0 0.5em 3em 0 rgba(47, 94, 201, 0.13);
          box-shadow: 0 0.5em 3em 0 rgba(47, 94, 201, 0.13);
}
@media only screen and (max-width: 768px) {
  .download section .form {
    width: 100%;
    padding: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
.download section .form-notes {
  position: absolute;
  top: -30px;
  left: 0;
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .download section .form-notes {
    top: -20px;
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
  }
}
.download section .form iframe {
  width: 100%;
}
.download section .form [id*=embbed] {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}