@charset "UTF-8";
@import "./reset.css";
html {
  overflow-x: hidden;
}

body {
  background-color: white;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

img {
  display: block;
  width: 100%;
}

@media screen and (min-width: 751px) {
  .header {
    padding: 22px 0 23px 4px;
  }
  .header h1 {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
  }
  .header h1 a {
    display: block;
    max-width: 199px;
    width: 16.58%;
  }
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
  .header {
    padding: 1.83% 0 1.91% 0.33%;
  }
}
@media screen and (max-width: 750px) {
  .header {
    padding: 2.66% 0 1.2% 2.13%;
  }
  .header h1 {
    width: 26.53%;
  }
}

.stage,
.section3 {
  position: relative;
}
.stage-wrap,
.section3-wrap {
  position: absolute;
  top: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
@media screen and (min-width: 751px) {
  .stage-wrap,
.section3-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1800px;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
@media screen and (min-width: 1201px) {
  .stage-wrap:before, .stage-wrap:after,
.section3-wrap:before,
.section3-wrap:after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 2;
    display: block;
    width: 128px;
    height: 100%;
  }
  .stage-wrap:before,
.section3-wrap:before {
    left: 0;
    background: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  }
  .stage-wrap:after,
.section3-wrap:after {
    right: 0;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgb(255, 255, 255)));
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  }
}

@media screen and (min-width: 751px) {
  #inquiry {
    margin: 0 auto 110px;
  }
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
  #inquiry {
    margin-bottom: 9.1666666667%;
  }
}
@media screen and (max-width: 750px) {
  #inquiry {
    margin: 0 auto 12.8%;
  }
}

.footer {
  color: white;
  text-align: center;
  background-color: #0094ea;
}
@media screen and (min-width: 751px) {
  .footer {
    padding: 40px 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 750px) {
  .footer {
    padding: 8.8% 0;
  }
}

.button {
  background-repeat: no-repeat;
  background-size: contain;
}
.button a {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) translateY(-2px);
          transform: translate(-50%, -50%) translateY(-2px);
  white-space: nowrap;
  text-decoration: none;
  color: white;
}
@media screen and (min-width: 751px) {
  .button {
    position: relative;
    width: 457px;
    height: 88px;
    background-image: url(/app/assets/images/pc/lp/professional/btn_pc.png);
  }
  .button a {
    font-size: clamp(0.938rem, 0.642rem + 1.48vw, 1.75rem);
  }
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
  .button {
    width: 38.0833333333%;
    height: 0;
    padding-top: 7.3333333333%;
  }
}
@media screen and (max-width: 750px) {
  .button {
    position: relative;
    width: 89.3333333333%;
    padding-top: 17.0666666667%;
    background-image: url(/app/assets/images/pc/lp/professional/btn_sp.png);
  }
  .button a {
    font-size: clamp(1rem, -0.116rem + 5.58vw, 2.5rem);
  }
}

.h3 {
  color: #002985;
  font-size: clamp(1.25rem, 0.041rem + 6.05vw, 2.875rem);
}
.h3 span:before, .h3 span:after {
  display: inline-block;
  content: "―";
}
.h3 span:before {
  margin-right: 1em;
}
.h3 span:after {
  margin-left: 1em;
}
@media screen and (min-width: 751px) {
  .h3 {
    font-size: clamp(1.875rem, -1.261rem + 6.68vw, 3.75rem);
  }
}
@media screen and (max-width: 75px) {
  .h3 {
    font-size: clamp(1.625rem, 0.416rem + 6.05vw, 3.25rem);
  }
}

.stage .button {
  position: absolute;
}
.stage__lead1, .stage__lead2, .stage__lead3 {
  position: absolute;
}
@media screen and (min-width: 751px) {
  .stage {
    width: 100%;
    height: 550px;
  }
  .stage h2,
.stage .button {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .stage-wrap {
    height: 100%;
    background-image: url(/app/assets/images/pc/lp/professional/stage_bg_pc.jpg);
  }
  .stage h2 {
    top: 40px;
    width: 566px;
  }
  .stage__lead1 {
    left: 315px;
    top: 49.4545454545%;
    width: 561px;
  }
  .stage__lead2 {
    left: 926px;
    top: 54%;
    max-width: 255px;
  }
  .stage__lead3 {
    left: 1222px;
    top: 54%;
    max-width: 265px;
  }
  .stage .button {
    top: 438px;
  }
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
  .stage {
    height: 0;
    padding: 45.83% 0 0;
  }
  .stage-wrap {
    width: 100%;
  }
  .stage h2 {
    top: 7.2727272727%;
    width: 47.16%;
  }
  .stage__lead1 {
    left: 1.25%;
    width: 46.75%;
  }
  .stage__lead2 {
    left: 52.1666666667%;
    width: 21.25%;
  }
  .stage__lead3 {
    left: 76.8333333333%;
    width: 22.0833333333%;
  }
  .stage .button {
    top: 79.6363636364%;
  }
}
@media screen and (max-width: 750px) {
  .stage {
    padding: 93.33% 0 0;
  }
  .stage-wrap {
    left: 0;
    top: 0;
    width: 100%;
    max-height: 700px;
    padding: 93.33% 0 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-image: url(/app/assets/images/pc/lp/professional/stage_bg_sp.jpg);
  }
  .stage-wrap,
.stage h2,
.stage .button {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .stage h2 {
    top: 12.8571428571%;
    width: 73.2%;
  }
  .stage__lead1 {
    left: 0%;
    top: 53.1428571429%;
    width: 97.3333333333%;
  }
  .stage__lead2 {
    left: 2.6666666667%;
    top: 68.4285714286%;
    width: 46.2666666667%;
  }
  .stage__lead3 {
    left: 51.0666666667%;
    top: 68.4285714286%;
    width: 46.2666666667%;
  }
  .stage .button {
    top: 82.2857142857%;
    z-index: 2;
  }
  .stage span {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 100%;
    padding-top: 8.4%;
    background-color: white;
  }
}

.section1 .h3,
.section1 p {
  text-align: center;
}
@media screen and (min-width: 751px) {
  .section1 {
    max-width: 1200px;
    margin: 0 auto;
  }
  .section1 .h3 {
    margin: 88px 0 6px;
  }
  .section1 p {
    margin: 0 0 65px;
    font-size: clamp(1rem, 0.164rem + 1.78vw, 1.5rem);
    line-height: 2;
  }
  .section1 p span {
    display: block;
  }
  .section1 picture {
    display: block;
    margin: 0 auto 137px;
    padding: 0 20px;
  }
  .section1 picture img {
    max-width: 997px;
    width: 100%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
  .section1 .h3 {
    margin: 7.3333333333% 0 0.5%;
  }
  .section1 p {
    margin: 0 0 5.4166666667%;
  }
  .section1 img {
    width: 83.0833333333%;
    margin-bottom: 11.4166666667%;
  }
}
@media screen and (max-width: 750px) {
  .section1 .h3 {
    margin: 10.4% 0 5.7333333333%;
  }
  .section1 p {
    padding: 0 9.6% 3.4666666667%;
    font-size: clamp(0.813rem, 0.161rem + 3.26vw, 1.688rem);
  }
  .section1 img {
    width: 100%;
    margin: 0 0 10.9333333333%;
  }
}

.section2 .h3 {
  text-align: center;
  background-color: #f0f3f5;
}
.section2 h4 {
  font-weight: normal;
}
.section2 p {
  color: #0094ea;
}
@media screen and (min-width: 751px) {
  .section2 .h3 {
    margin: 0 0 56px;
    padding: 67px 0 49px;
  }
  .section2__contents {
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: 1018px;
    margin: 0 auto 131px;
  }
  .section2__contents--1, .section2__contents--2, .section2__contents--3, .section2__contents--4 {
    position: absolute;
    width: 100%;
    left: 0;
  }
  .section2__contents--1 {
    top: 4.5186640472%;
  }
  .section2__contents--2 {
    top: 32.6129666012%;
  }
  .section2__contents--3 {
    top: 60.7072691552%;
  }
  .section2__contents--4 {
    top: 82.1218074656%;
  }
  .section2__contents h4 {
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
    font-size: clamp(1.5rem, 0.246rem + 2.67vw, 2.25rem);
    font-weight: bold;
  }
  .section2__contents h4 span {
    font-size: clamp(1.25rem, 0.246rem + 2.67vw, 2rem);
    font-weight: normal;
  }
  .section2__contents p {
    width: 100%;
    text-align: center;
    font-size: clamp(0.875rem, 0.248rem + 1.34vw, 1.25rem);
  }
  .section2__contents p span {
    display: block;
  }
  .section2__picture--1, .section2__picture--2, .section2__picture--3, .section2__picture--4 {
    position: absolute;
  }
  .section2__picture--1 {
    left: 7.6666666667%;
    top: 0;
    width: 22.5833333333%;
  }
  .section2__picture--2 {
    left: 77%;
    top: 30.0589390963%;
    width: 15.1666666667%;
  }
  .section2__picture--3 {
    left: 9.5%;
    top: 57.3673870334%;
    width: 18%;
  }
  .section2__picture--4 {
    left: 72.4166666667%;
    top: 78.3889980354%;
    width: 17.8333333333%;
  }
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
  .section2 .h3 {
    margin: 0 0 4.6666666667%;
    padding: 5.5833333333% 0 4.0833333333%;
  }
  .section2 h4 {
    margin-bottom: 0.6666666667%;
  }
  .section2__contents {
    height: 0;
    margin-bottom: 10.9166666667%;
    padding-top: 84.8333333333%;
  }
}
@media screen and (max-width: 750px) {
  .section2 {
    padding-bottom: 4.6666666667%;
  }
  .section2 .h3 {
    margin: 0 0 6.2666666667%;
    padding: 5.8666666667% 0 5.6%;
  }
  .section2 img {
    max-width: 510px;
    width: 68%;
    margin: 0 auto;
  }
  .section2 h4 {
    margin: 4.6666666667% 1.0666666667% 1.6%;
    text-align: center;
    font-size: clamp(1.25rem, 0.227rem + 5.12vw, 2.625rem);
    line-height: 1.2;
    font-weight: bold;
  }
  .section2 h4 span {
    font-size: clamp(1rem, 0.227rem + 5.12vw, 2.25rem);
    font-weight: normal;
  }
  .section2 p {
    margin: 0 5.8666666667% 6.5333333333%;
    text-align: center;
    font-size: clamp(1rem, 0.488rem + 2.56vw, 1.688rem);
  }
}

.section4 .h3 {
  text-align: center;
  background-color: #f0f3f5;
}
@media screen and (min-width: 751px) {
  .section4 {
    margin-bottom: 120px;
  }
  .section4 .h3 {
    margin: 0 0 115px;
    padding: 67px 0 49px;
  }
  .section4__body {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
  }
  .section4__body--area {
    position: relative;
    width: 33.3333333333%;
  }
  .section4__contents--head {
    position: relative;
    padding-top: 25%;
  }
  .section4__contents--head h4 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: clamp(1.25rem, 0.623rem + 1.34vw, 1.625rem);
  }
  .section4__contents--picture picture {
    display: block;
    max-width: 352px;
    width: 90.9560723514%;
    margin: 0 auto;
  }
  .section4__contents--text table {
    table-layout: fixed;
    width: 88%;
    margin: 8% auto 0;
  }
  .section4__contents--text th {
    width: 40%;
    padding: 0 0 10px;
    text-align: left;
    vertical-align: top;
    color: #0093ea;
    font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
    font-weight: normal;
  }
  .section4__contents--text td {
    width: 60%;
    padding: 0 0 10px;
    text-align: left;
    vertical-align: top;
    font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
  }
  .section4__contents--text td span {
    display: block;
  }
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
  .section4 {
    margin-bottom: 10%;
  }
  .section4 .h3 {
    margin: 0 0 9.5833333333%;
    padding: 5.5833333333% 0 4.0833333333%;
  }
}
@media screen and (max-width: 750px) {
  .section4 {
    padding-bottom: 4.6666666667%;
  }
  .section4 .h3 {
    margin: 0 0 6.2666666667%;
    padding: 5.8666666667% 0 5.6%;
  }
  .section4 img {
    max-width: 510px;
    width: 68%;
    margin: 0 auto;
  }
  .section4 h4 {
    margin: 4.6666666667% 1.0666666667% 2.6666666667%;
    text-align: center;
    font-size: clamp(1.25rem, 0.227rem + 5.12vw, 2.625rem);
    font-size: clamp(1rem, -0.023rem + 5.12vw, 2.375rem);
    line-height: 1.2;
    font-weight: bold;
  }
  .section4 h4 span {
    display: block;
  }
  .section4__contents--text table {
    table-layout: fixed;
    width: 68%;
    margin: 3.2% auto 8.5333333333%;
  }
  .section4__contents--text th {
    width: 40%;
    padding: 0 0 10px;
    text-align: left;
    vertical-align: top;
    color: #0093ea;
    font-size: clamp(0.875rem, 0.317rem + 2.79vw, 1.625rem);
    font-weight: normal;
  }
  .section4__contents--text td {
    width: 60%;
    padding: 0 0 10px;
    text-align: left;
    vertical-align: top;
    font-size: clamp(0.875rem, 0.317rem + 2.79vw, 1.625rem);
  }
  .section4__contents--text td span {
    display: block;
  }
}

.section3 {
  position: relative;
}
.section3 .h3 {
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
}
.section3 .h3 span {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  text-align: center;
  color: white;
}
@media screen and (min-width: 751px) {
  .section3 {
    height: 1007px;
    margin: 0 auto 110px;
  }
  .section3-wrap {
    height: 100%;
    background-image: url(/app/assets/images/pc/lp/professional/section3_bg_pc.jpg);
  }
  .section3 .h3 {
    z-index: 1;
    height: 17.9741807349%;
    margin: 0 0 68px;
  }
  .section3__flow {
    position: absolute;
    left: 50%;
    top: 249px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 860px;
  }
  .section3__flow--1, .section3__flow--2, .section3__flow--3 {
    width: 25.8139534884%;
  }
  .section3__flow--arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 11.2790697674%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .section3__flow--next {
    width: 38.1443298969%;
    margin-left: 30.9278350515%;
  }
  .section3__flow--next img {
    width: 100%;
  }
  .section3 .button {
    position: absolute;
    left: 50%;
    top: 79.7216699801%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
  .section3 {
    height: 0;
    padding-top: 83.9166666667%;
    margin-bottom: 9.1666666667%;
  }
  .section3-wrap {
    width: 100%;
  }
  .section3 .h3 {
    margin-bottom: 5.6666666667%;
  }
  .section3__flow {
    top: 24.7269116187%;
    width: 71.6666666667%;
  }
}
@media screen and (max-width: 750px) {
  .section3 {
    margin: 0 auto 34.2666666667%;
    padding: 129.3333333333% 0 0;
  }
  .section3-wrap {
    width: 100%;
    height: 100%;
    background-image: url(/app/assets/images/pc/lp/professional/section3_bg_sp.jpg);
  }
  .section3 .h3 {
    height: 15.5670103093%;
  }
  .section3__flow {
    max-width: 669px;
    width: 89.2%;
    margin: 8% auto 0;
  }
  .section3__flow--arrow {
    max-width: 47px;
    width: 6.2666666667%;
    margin: 2.8% auto 2.4%;
  }
  .section3 .button {
    margin: 13.3333333333% auto;
  }
}

.corp__contents li {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  border-bottom: solid 1px #101010;
}
.corp__contents li p:last-child {
  text-align: left;
}
.corp__contents--1 {
  text-align: left;
  line-height: 1.8;
}
.section2.corp p {
  color: #000;
}

@media screen and (min-width: 751px) {
  .corp__contents {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px 64px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .corp__contents ul {
    display: block;
    max-width: 840px;
    width: 70%;
    margin: 0 auto;
  }
  .corp__contents li {
    padding: 2% 0;
  }
  .corp__contents li > p {
    font-size: clamp(0.813rem, 0.603rem + 0.45vw, 0.938rem);
    font-size: clamp(1rem, 0.164rem + 1.78vw, 1.5rem);
  }
  .corp__contents li > p:first-child {
    width: 23.8095238095%;
    text-indent: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}
@media screen and (max-width: 750px) {
  .corp__contents {
    padding: 16px 5.06% 48px;
  }
  .corp__contents ul {
    width: 100%;
  }
  .corp__contents li {
    padding: 2% 0;
    font-size: clamp(0.75rem, 0.378rem + 1.86vw, 1.25rem);
  }
  .corp__contents li > p:first-child {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
    text-indent: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .corp__contents li > p:last-child {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}