@charset "UTF-8";
/* ---------------------------------------------------
  TOP
  --------------------------------------------------- */
/* MV -------------------------------------------------------------- */
.mainvisual {
  background: url(../../top/img/bg_mainimg_left.png) left top no-repeat, url(../../top/img/bg_mainimg_right.png) right top no-repeat;
}
@media screen and (max-width: 767px) {
  .mainvisual {
    background: url(../../top/img/bg_mainimg_left.png) left top no-repeat;
  }
}

.mainvisual__inner {
  position: relative;
  width: 87.2%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 0;
}
.mainvisual__inner::before {
  position: absolute;
  top: 0;
  right: -8.33%;
  width: 100%;
  height: 100%;
  background: url(../../top/img/img_mainimg.png) right center no-repeat;
  background-size: contain;
  content: "";
}
@media screen and (max-width: 1160px) {
  .mainvisual__inner {
    padding: 40px 0;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual__inner {
    padding: 40px 0 300px;
  }
  .mainvisual__inner::before {
    top: initial;
    right: initial;
    bottom: 0;
    width: 100vw;
    margin: 0 0 0 -6.4%;
    background-position: center bottom;
    background-size: 534px auto;
  }
}

.mainvisual__content {
  position: relative;
  width: 48.88%;
  padding: 40px;
  background: #FFFFFF;
  border-radius: 16px;
  -webkit-box-shadow: 0px 12px 26px rgba(0, 17, 51, 0.16);
          box-shadow: 0px 12px 26px rgba(0, 17, 51, 0.16);
}
@media screen and (max-width: 1160px) {
  .mainvisual__content {
    padding: 3.75%;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual__content {
    width: 100%;
    padding: 32px 4.2vw;
  }
}

.mainvisual__ttl {
  font-size: 44px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
@media screen and (max-width: 1160px) {
  .mainvisual__ttl {
    font-size: 3.7vw;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual__ttl {
    font-size: 8.53vw;
  }
}

.mainvisual__txt {
  font-size: 20px;
  margin: 24px 0 0;
}
@media screen and (max-width: 1160px) {
  .mainvisual__txt {
    font-size: 1.725vw;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual__txt {
    font-size: initial;
  }
}

.mainvisual__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 64px;
  margin: 24px 0 0;
  padding: 4px 16px;
  border-radius: 40px;
  background: #001133;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.mainvisual__btn:hover {
  background: #122B6E;
}
@media screen and (max-width: 767px) {
  .mainvisual__btn {
    font-size: 18px;
  }
}

/* intro -------------------------------------------------------------- */
.intro {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  width: 95.73%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px;
  background: #F2F4F7;
  border-radius: 16px;
}
@media screen and (max-width: 767px) {
  .intro {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 91.46%;
    padding: 24px 4.26%;
  }
}

.intro__record {
  width: 262px;
}
@media screen and (max-width: 1160px) {
  .intro__record {
    width: 23.25%;
  }
}
@media screen and (max-width: 767px) {
  .intro__record {
    width: 100%;
  }
}

.intro__record__period {
  position: absolute;
  left: -12px;
}
@media screen and (max-width: 1160px) {
  .intro__record__period {
    left: -1.1%;
    width: 25.5%;
  }
}
@media screen and (max-width: 767px) {
  .intro__record__period {
    width: 100%;
  }
}

.intro__record__track {
  padding: 80px 0 0;
}
@media screen and (max-width: 767px) {
  .intro__record__track img {
    margin: 0 auto;
  }
}

.intro__content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}
.intro__content .section__ttl {
  margin: 0 0 24px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .intro__content .section__ttl {
    font-size: 1.5rem;
  }
}

.intro__content__btn {
  width: 240px;
  margin: 24px auto 0;
}

/* feature -------------------------------------------------------------- */
.feature .section__ttl {
  color: #333640;
}
.feature .section__ttl .subcopy {
  display: inline-block;
  position: relative;
  padding: 0 1em;
  color: #646C76;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}
.feature .section__ttl .subcopy::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  content: "＼";
}
.feature .section__ttl .subcopy::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  content: "／";
}
@media screen and (max-width: 767px) {
  .feature .section__ttl .subcopy {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 440px) {
  .feature .section__ttl .subcopy {
    padding: 0 36px;
  }
  .feature .section__ttl .subcopy::before {
    width: 30px;
    height: 50px;
    background: url(../../top/img/img_feature_ttl_line.svg) left center no-repeat;
    background-size: contain;
    content: "";
  }
  .feature .section__ttl .subcopy::after {
    width: 30px;
    height: 50px;
    background: url(../../top/img/img_feature_ttl_line.svg) left center no-repeat;
    background-size: contain;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
    content: "";
  }
}

.feature__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  position: relative;
  padding: 40px 24px 0;
  border-top: 1px solid #BEC2C8;
}
.feature__item:not(:first-child) {
  margin: 64px 0 0;
}
.feature__item .balloon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: -20px;
  left: 48px;
  height: 40px;
  padding: 4px 16px;
  background: #1E3A8E;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
}
.feature__item .balloon::after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 12px;
  height: 8px;
  background: #1E3A8E;
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  content: "";
}
@media screen and (max-width: 767px) {
  .feature__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 40px 0 0;
  }
  .feature__item .balloon {
    left: 16px;
  }
}

.feature__item__detail {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}

.feature__item__ttl {
  color: #1E3A8E;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .feature__item__ttl {
    font-size: 1.375rem;
  }
}

.feature__item__desc {
  margin: 16px 0 0;
}

.feature__item__img {
  width: 33.33%;
  overflow: hidden;
}
.feature__item__img img {
  border-radius: 8px;
}
@media screen and (max-width: 767px) {
  .feature__item__img {
    width: auto;
  }
}

/* plan -------------------------------------------------------------- */
.plan__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 40px;
}
@media screen and (max-width: 767px) {
  .plan__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.plan__item {
  width: calc(50% - 20px);
  padding: 40px;
  background: #FFFFFF;
  border-radius: 16px;
  -webkit-box-shadow: 0px 3px 8px rgba(0, 17, 51, 0.1);
          box-shadow: 0px 3px 8px rgba(0, 17, 51, 0.1);
}
@media screen and (max-width: 767px) {
  .plan__item {
    width: 100%;
    padding: 6.99%;
  }
}

.plan__ttl {
  color: #1E3A8E;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .plan__ttl {
    font-size: 1.25rem;
  }
}

.plan__desc {
  margin: 24px 0 0;
}
@media screen and (max-width: 767px) {
  .plan__desc {
    margin: 16px 0 0;
  }
}

.plan__btn {
  width: 240px;
  margin: 48px auto 0;
}

/* useful -------------------------------------------------------------- */
.useful__ttl {
  margin: 0 0 32px;
  color: #1E3A8E;
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
}
.useful__ttl span {
  position: relative;
  padding: 0 64px;
}
.useful__ttl span::before, .useful__ttl span::after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 40px;
  height: 2px;
  background-color: #1E3A8E;
  content: "";
}
.useful__ttl span::before {
  left: 0;
}
.useful__ttl span::after {
  right: 0;
}

.useful__col-list,
.useful__row-list {
  margin: 32px 0 0;
}

.useful__col-item {
  border-bottom: 1px solid #BEC2C8;
}
.useful__col-item:first-child {
  border-top: 1px solid #BEC2C8;
}

.useful__col-link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  padding: 24px 72px 24px 24px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.useful__col-link::after {
  position: absolute;
  top: 50%;
  right: 24px;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  width: 24px;
  height: 24px;
  background: url(../img/icon/icon_chevron-right_bl.svg) center center no-repeat;
  background-size: contain;
  content: "";
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.useful__col-link:hover {
  background: #F5F9FF;
  -webkit-box-shadow: 0px 8px 20px rgba(0, 17, 51, 0.12);
          box-shadow: 0px 8px 20px rgba(0, 17, 51, 0.12);
}
.useful__col-link:hover::after {
  -webkit-transform: translate(8px, -50%);
          transform: translate(8px, -50%);
}
@media screen and (max-width: 767px) {
  .useful__col-link:hover::after {
    -webkit-transform: translate(4px, -50%);
            transform: translate(4px, -50%);
  }
}
.useful__col-link:hover .item__ttl {
  color: #1E3A8E;
}
.useful__col-link .item__img {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}
.useful__col-link .item__ttl {
  -webkit-box-flex: 5;
      -ms-flex: 5 1 0px;
          flex: 5 1 0;
  color: #333640;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .useful__col-link {
    gap: 16px;
    padding: 16px 40px 16px 0;
    font-size: 0.875rem;
  }
  .useful__col-link::after {
    right: 0;
  }
  .useful__col-link .item__img {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
  }
  .useful__col-link .item__ttl {
    -webkit-box-flex: 2;
        -ms-flex: 2 1 0px;
            flex: 2 1 0;
  }
}

.useful__row-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 767px) {
  .useful__row-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
  }
}

.useful__row-link {
  display: block;
  padding: 12px;
  border-radius: 16px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.useful__row-link .item__img {
  overflow: hidden;
  border-radius: 8px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.useful__row-link .item__txtarea {
  margin: 16px 0 0;
}
.useful__row-link .item__txtarea .item__cat {
  display: inline-block;
  padding: 2px 6px;
  background: #F5F9FF;
  border-left: 1px solid #96A4CC;
  color: #5A6FAD;
  font-size: 14px;
}
.useful__row-link .item__txtarea .item__ttl {
  margin: 8px 0 0;
  font-weight: 700;
}
.useful__row-link:hover {
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 8px 20px rgba(0, 17, 51, 0.12);
          box-shadow: 0px 8px 20px rgba(0, 17, 51, 0.12);
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
}
@media screen and (max-width: 767px) {
  .useful__row-link {
    padding: 0;
  }
  .useful__row-link:hover {
    -webkit-box-shadow: initial;
            box-shadow: initial;
    -webkit-transform: initial;
            transform: initial;
  }
  .useful__row-link:hover .item__img {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
  }
}

.useful__btn {
  width: 240px;
  margin: 32px auto 0;
}/*# sourceMappingURL=top.css.map */