@charset "UTF-8";
/* p-hero
-----------------------------------------*/
.p-hero {
  width: 100%;
  margin-top: 10px;
  padding-bottom: 140px;
  background-image: url(../img/top/bg-hero.png);
  background-repeat: repeat-x;
  background-position: bottom center;
}
@media (max-width: 766px) {
  .p-hero {
    margin-top: 0;
    padding-bottom: calc(140 / 900 * 100vw);
    background-size: 300%;
  }
}
.p-hero .js-swiper-hero {
  position: relative;
  overflow: hidden;
}
.p-hero__slider {
  width: 1080px;
}
.p-hero__slider .item {
  max-width: 1080px;
  width: 100%;
  line-height: 0;
}
@media (max-width: 766px) {
  .p-hero__slider .item img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
.p-hero__slider .item .link--disabled {
  pointer-events: none;
}
.p-hero__pagination {
  position: absolute;
  z-index: 5;
  bottom: 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  gap: 0 10px;
}
@media (max-width: 766px) {
  .p-hero__pagination {
    margin-top: calc(40 / 900 * 100vw);
    gap: 0 calc(50 / 900 * 100vw);
  }
}
.p-hero__pagination .item {
  cursor: pointer;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #00608f;
}
@media (max-width: 766px) {
  .p-hero__pagination .item {
    width: calc(25 / 900 * 100vw);
    height: calc(25 / 900 * 100vw);
    border-radius: calc(25 / 900 * 100vw);
  }
}
.p-hero__pagination .item.is-active {
  background-color: #0097b2;
}

/* p-intro
-----------------------------------------*/
.p-intro {
  overflow: hidden;
  padding-top: 75px;
  background-color: #004880;
}
@media (max-width: 766px) {
  .p-intro {
    padding-top: calc(75 / 900 * 100vw);
  }
}
.p-intro .u-inner {
  position: relative;
}
.p-intro__desc {
  padding-top: 60px;
  padding-bottom: 170px;
  background-image: url(../img/top/bg-intro.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media (max-width: 766px) {
  .p-intro__desc {
    padding: calc(60 / 900 * 100vw) calc(60 / 900 * 100vw) calc(170 / 900 * 100vw) calc(60 / 900 * 100vw);
    background-image: url(../img/top/sp-bg-intro.png);
  }
}
.p-intro__desc .catch {
  color: #005480;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 766px) {
  .p-intro__desc .catch {
    margin-bottom: calc(20 / 900 * 100vw);
    font-size: calc(38 / 900 * 100vw);
  }
}
.p-intro__desc .catch span {
  color: #ec914e;
}
.p-intro__desc .tit {
  margin-bottom: 10px;
  color: #005480;
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 766px) {
  .p-intro__desc .tit {
    margin-bottom: calc(30 / 900 * 100vw);
    font-size: calc(62 / 900 * 100vw);
    line-height: 1.4;
  }
}
.p-intro__desc .tit span {
  background-image: url(../img/top/bg-line.png);
  background-repeat: no-repeat;
  background-position: bottom center;
}
.p-intro__desc .lead {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 2;
  text-align: center;
}
@media (max-width: 766px) {
  .p-intro__desc .lead {
    padding-right: calc(110 / 900 * 100vw);
    font-size: calc(32 / 900 * 100vw);
    text-align: justify;
    line-height: 1.6;
  }
}
.p-intro__img {
  position: absolute;
  bottom: -10px;
  right: -50px;
}
@media (max-width: 766px) {
  .p-intro__img {
    bottom: calc(-10 / 900 * 100vw);
    right: calc(-50 / 900 * 100vw);
    width: calc(200 / 900 * 100vw);
  }
}

/* p-merit
-----------------------------------------*/
.p-merit {
  padding-top: 70px;
  padding-bottom: 120px;
  background-image: url(../img/top/bg_merit.png);
  background-size: cover;
}
@media (max-width: 766px) {
  .p-merit {
    padding-top: calc(70 / 900 * 100vw);
    padding-bottom: calc(120 / 900 * 100vw);
  }
}
.p-merit__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 0;
  margin-bottom: 80px;
}
@media (max-width: 766px) {
  .p-merit__list {
    margin-bottom: calc(120 / 900 * 100vw);
  }
}
.p-merit__list .item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 40px;
  width: 900px;
  padding: 40px 50px;
  background-color: #fff;
  border-radius: 20px;
  counter-increment: number 1;
  border-radius: calc(30 / 900 * 100vw);
}
.p-merit__list .item--reverse {
  flex-direction: row-reverse;
}
@media (max-width: 766px) {
  .p-merit__list .item {
    align-items: center;
    flex-direction: column;
    gap: calc(50 / 900 * 100vw);
    padding: calc(50 / 900 * 100vw);
  }
}
.p-merit__list .img {
  width: 200px;
}
.p-merit__list .desc {
  flex-grow: 1;
  text-align: left;
}
.p-merit__list .desc .tit {
  display: flex;
  flex-direction: column;
  gap: 5px 0;
  margin-bottom: 10px;
  color: #005480;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.8;
}
@media (max-width: 766px) {
  .p-merit__list .desc .tit {
    align-items: center;
    font-size: calc(50 / 900 * 100vw);
  }
}
.p-merit__list .desc .tit:before {
  content: "メリット 0" counter(number);
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 20px;
  background-color: #0097b2;
  border-radius: 17px;
  color: #FFF;
  font-size: 0.9375rem;
  font-weight: 700;
}
@media (max-width: 766px) {
  .p-merit__list .desc .tit:before {
    font-size: calc(32 / 900 * 100vw);
  }
}
.p-merit__list .desc .text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625;
  text-align: left;
}
@media (max-width: 766px) {
  .p-merit__list .desc .text {
    font-size: calc(32 / 900 * 100vw);
    text-align: justify;
  }
}

/* p-movie
-----------------------------------------*/
.p-movie {
  padding-top: 100px;
  padding-bottom: 120px;
  background-color: #FFF;
  background-image: url(../img/top/bg-movie.png);
  background-position: center top;
}
@media (max-width: 766px) {
  .p-movie {
    padding-top: calc(100 / 900 * 100vw);
    padding-bottom: calc(120 / 900 * 100vw);
  }
}
.p-movie__area {
  position: relative;
  width: 100%;
  padding-bottom: 50px;
  background-color: #FFF;
  border: 8px solid #0097b2;
  border-radius: 15px 15px 30px 30px;
}
@media (max-width: 766px) {
  .p-movie__area {
    padding-bottom: calc(50 / 900 * 100vw);
    border: 4px solid #0097b2;
    border-radius: calc(30 / 900 * 100vw);
  }
}
.p-movie__area .img {
  position: absolute;
  right: 20px;
  top: -150px;
}
@media (max-width: 766px) {
  .p-movie__area .img {
    right: calc(20 / 900 * 100vw);
    top: calc(-150 / 900 * 100vw);
    width: calc(120 / 900 * 100vw);
  }
}
.p-movie__area .head {
  display: flex;
  justify-content: flex-start;
  gap: 0 5px;
  width: 100%;
  height: 36px;
  padding: 6px 0 0 10px;
  background-color: #0097b2;
}
@media (max-width: 766px) {
  .p-movie__area .head {
    height: calc(60 / 900 * 100vw);
    padding-top: calc(10 / 900 * 100vw);
  }
}
.p-movie__area .head li {
  width: 15px;
  height: 15px;
  border-radius: 15px;
}
@media (max-width: 766px) {
  .p-movie__area .head li {
    width: calc(30 / 900 * 100vw);
    height: calc(30 / 900 * 100vw);
  }
}
.p-movie__area .head li:nth-child(1) {
  background-color: #e6a389;
}
.p-movie__area .head li:nth-child(2) {
  background-color: #dee689;
}
.p-movie__area .head li:nth-child(3) {
  background-color: #89e692;
}
.p-movie__area .mov {
  padding: 30px 30px 20px 30px;
}
@media (max-width: 766px) {
  .p-movie__area .mov {
    padding: calc(30 / 900 * 100vw);
  }
}
.p-movie__area .mov iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
.p-movie__area .text {
  color: #004880;
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 766px) {
  .p-movie__area .text {
    padding: 0 calc(30 / 900 * 100vw);
    font-size: calc(36 / 900 * 100vw);
  }
}

/* p-oblige
-----------------------------------------*/
.p-oblige {
  padding-top: 70px;
  padding-bottom: 80px;
  background-color: #FFF;
  background-image: url(../img/top/bg-oblige.png);
  background-size: cover;
}
@media (max-width: 766px) {
  .p-oblige {
    padding-top: calc(70 / 900 * 100vw);
    padding-bottom: calc(80 / 900 * 100vw);
  }
}
.p-oblige .desc {
  color: #FFF;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.625;
  text-align: center;
}
@media (max-width: 766px) {
  .p-oblige .desc {
    font-size: calc(32 / 900 * 100vw);
    text-align: justify;
  }
}
.p-oblige .link-list {
  display: flex;
  justify-content: center;
  gap: 0 20px;
  margin-top: 45px;
}
@media (max-width: 766px) {
  .p-oblige .link-list {
    flex-direction: column;
    gap: calc(40 / 900 * 100vw) 0;
    margin-top: calc(45 / 900 * 100vw);
  }
}
.p-oblige .link-list li {
  max-width: 500px;
  width: 50%;
}
@media (max-width: 766px) {
  .p-oblige .link-list li {
    width: 100%;
  }
}
.p-oblige .link-list .link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 84px;
  background-color: #FFF;
  border: 2px solid #005480;
  border-radius: 20px;
  color: #005480;
  font-size: 1.125rem;
  font-weight: 700;
}
@media (max-width: 766px) {
  .p-oblige .link-list .link {
    justify-content: flex-start;
    height: auto;
    padding: calc(30 / 900 * 100vw) calc(45 / 900 * 100vw);
    border-radius: calc(30 / 900 * 100vw);
    font-size: calc(36 / 900 * 100vw);
  }
}
.p-oblige .link-list .link .icn {
  position: absolute;
  width: 15px;
  right: 30px;
}
@media (max-width: 766px) {
  .p-oblige .link-list .link .icn {
    width: calc(30 / 900 * 100vw);
    right: calc(30 / 900 * 100vw);
  }
}
.p-oblige .link-list .link:hover {
  opacity: 0.6;
}

/* p-outline
-----------------------------------------*/
.p-outline {
  padding-top: 90px;
  padding-bottom: 120px;
  background-color: #FFF;
  background-image: url(../img/top/bg-outline.png);
  background-size: cover;
}
@media (max-width: 766px) {
  .p-outline {
    padding-top: calc(70 / 900 * 100vw);
    padding-bottom: calc(80 / 900 * 100vw);
  }
}
.p-outline__list {
  display: flex;
  flex-direction: column;
  gap: 20px 0;
}
.p-outline .item {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 38px;
  padding: 30px 50px 50px 50px;
  background-color: #FFF;
  border: 6px solid #67c6d4;
  border-radius: 30px;
  counter-increment: number2 1;
}
@media (max-width: 766px) {
  .p-outline .item {
    align-items: center;
    flex-direction: column;
    gap: calc(50 / 900 * 100vw);
    padding: calc(50 / 900 * 100vw);
    border: 3px solid #67c6d4;
    border-radius: calc(30 / 900 * 100vw);
  }
}
.p-outline .item .title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
  width: 100%;
  color: #005480;
  font-size: 1.625rem;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 766px) {
  .p-outline .item .title {
    align-items: center;
    flex-direction: column;
    gap: calc(10 / 900 * 100vw);
    font-size: calc(48 / 900 * 100vw);
  }
}
.p-outline .item .title:before {
  content: "STEP " counter(number2);
  padding: 0 15px;
  background-color: #ec914e;
  border-radius: 15px;
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 700;
}
@media (max-width: 766px) {
  .p-outline .item .title:before {
    align-items: center;
    flex-direction: column;
    gap: calc(10 / 900 * 100vw);
    font-size: calc(38 / 900 * 100vw);
  }
}
.p-outline .item .desc {
  max-width: 480px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.625;
}
@media (max-width: 766px) {
  .p-outline .item .desc {
    width: 100%;
    font-size: calc(32 / 900 * 100vw);
    order: 3;
  }
}
.p-outline .item .img {
  max-width: 450px;
}
@media (max-width: 766px) {
  .p-outline .item .img {
    order: 2;
  }
}
.p-outline .link-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px 0;
  margin-top: 20px;
}
@media (max-width: 766px) {
  .p-outline .link-list li {
    width: 100%;
  }
}
.p-outline .link-list .link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 435px;
  height: 70px;
  background-color: #FFF;
  border: 2px solid #005480;
  border-radius: 20px;
  color: #005480;
  font-size: 1.125rem;
  font-weight: 700;
}
@media (max-width: 766px) {
  .p-outline .link-list .link {
    width: 100%;
    height: auto;
    padding: calc(30 / 900 * 100vw) calc(30 / 900 * 100vw);
    border-radius: calc(30 / 900 * 100vw);
    font-size: calc(36 / 900 * 100vw);
  }
}
.p-outline .link-list .link .icn {
  position: absolute;
  width: 15px;
  right: 30px;
}
@media (max-width: 766px) {
  .p-outline .link-list .link .icn {
    width: calc(30 / 900 * 100vw);
    right: calc(30 / 900 * 100vw);
  }
}
.p-outline .link-list .link:hover {
  opacity: 0.6;
}

/* p-adviser
-----------------------------------------*/
.p-adviser {
  padding-top: 70px;
  padding-bottom: 80px;
  background-color: #FFF;
  background-image: url(../img/top/bg-adviser.png);
  background-size: cover;
}
@media (max-width: 766px) {
  .p-adviser {
    padding-top: calc(70 / 900 * 100vw);
    padding-bottom: calc(80 / 900 * 100vw);
    background-position: center top;
    background-size: contain;
  }
}
.p-adviser .desc {
  margin-bottom: 55px;
  color: #FFF;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.625;
  text-align: center;
}
@media (max-width: 766px) {
  .p-adviser .desc {
    font-size: calc(32 / 900 * 100vw);
    text-align: justify;
    margin-bottom: calc(120 / 900 * 100vw);
  }
}
.p-adviser .desc strong {
  font-size: 1.75rem;
  font-weight: 800;
}
@media (max-width: 766px) {
  .p-adviser .desc strong {
    display: inline-block;
    width: 100%;
    font-size: calc(42 / 900 * 100vw);
    text-align: center;
  }
}
.p-adviser .link-list {
  display: flex;
  justify-content: center;
  gap: 0 20px;
  margin-top: 45px;
}
.p-adviser .link-list .link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 84px;
  background-color: #FFF;
  border: 2px solid #005480;
  border-radius: 20px;
  color: #005480;
  font-size: 1.125rem;
  font-weight: 700;
}
.p-adviser .link-list .link .icn {
  position: absolute;
  width: 15px;
  right: 30px;
}
.p-adviser .link-list .link:hover {
  opacity: 0.6;
}

/* p-useful
-----------------------------------------*/
.p-useful {
  padding-top: 90px;
  padding-bottom: 120px;
  background-color: #b3e2ec;
  background-image: url(../img/top/bg-useful.png);
  background-repeat: repeat;
  background-position: center top;
}
@media (max-width: 766px) {
  .p-useful {
    padding-top: calc(100 / 900 * 100vw);
    padding-bottom: calc(80 / 900 * 100vw);
  }
}
.p-useful__list {
  display: flex;
  gap: 20px 40px;
}
@media (max-width: 766px) {
  .p-useful__list {
    flex-direction: column;
  }
}
.p-useful .item {
  position: relative;
  max-width: 520px;
  width: 48%;
  padding: 40px;
  background-color: #FFF;
  border: 6px solid #67c6d4;
  border-radius: 30px;
  counter-increment: number2 1;
}
@media (max-width: 766px) {
  .p-useful .item {
    width: 100%;
    padding: calc(30 / 900 * 100vw);
    border: 3px solid #67c6d4;
    border-radius: calc(30 / 900 * 100vw);
  }
}
.p-useful .item .title {
  margin-bottom: 15px;
  color: #005480;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 766px) {
  .p-useful .item .title {
    font-size: calc(48 / 900 * 100vw);
  }
}
.p-useful .item .desc {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.625;
}
@media (max-width: 766px) {
  .p-useful .item .desc {
    font-size: calc(32 / 900 * 100vw);
  }
}
.p-useful .item .img {
  max-width: 350px;
  width: 80%;
  margin: 0 auto 30px auto;
}
@media (max-width: 766px) {
  .p-useful .item .img {
    width: 70%;
  }
}
.p-useful .item .icn {
  position: absolute;
  top: -50px;
  left: -30px;
}
@media (max-width: 766px) {
  .p-useful .item .icn {
    top: calc(-80 / 900 * 100vw);
    left: calc(-40 / 900 * 100vw);
    width: calc(240 / 900 * 100vw);
  }
}

/* p-interview
-----------------------------------------*/
.p-interview {
  padding-top: 90px;
  padding-bottom: 120px;
}
@media (max-width: 766px) {
  .p-interview {
    padding-top: calc(100 / 900 * 100vw);
    padding-bottom: calc(120 / 900 * 100vw);
  }
}
.p-interview__list {
  display: flex;
  align-items: center;
  gap: 20px 40px;
}
.p-interview .item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 980px;
  margin: 0 auto;
}
@media (max-width: 766px) {
  .p-interview .item {
    flex-direction: column;
  }
}
.p-interview .item .desc {
  max-width: 640px;
  padding: 50px 40px;
  background-color: #FFF;
  border-radius: 30px;
}
@media (max-width: 766px) {
  .p-interview .item .desc {
    padding: calc(50 / 900 * 100vw) calc(50 / 900 * 100vw) calc(80 / 900 * 100vw) calc(50 / 900 * 100vw);
    border-radius: calc(30 / 900 * 100vw);
  }
}
.p-interview .item .title {
  margin-bottom: 15px;
  color: #005480;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
}
@media (max-width: 766px) {
  .p-interview .item .title {
    font-size: calc(48 / 900 * 100vw);
  }
}
.p-interview .item .text {
  margin: 0 auto;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}
@media (max-width: 766px) {
  .p-interview .item .text {
    font-size: calc(34 / 900 * 100vw);
  }
}
.p-interview .item .text sup {
  font-size: 0.625rem;
}
@media (max-width: 766px) {
  .p-interview .item .text sup {
    font-size: calc(20 / 900 * 100vw);
  }
}
.p-interview .item .text small {
  font-size: 0.875rem;
}
@media (max-width: 766px) {
  .p-interview .item .text small {
    font-size: calc(26 / 900 * 100vw);
  }
}
.p-interview .item .img {
  margin-left: -40px;
  max-width: 350px;
  height: auto;
}
@media (max-width: 766px) {
  .p-interview .item .img {
    margin-left: 0;
    margin-top: -20px;
    width: 90%;
  }
}
.p-interview .item .icn {
  position: absolute;
  top: -85px;
  left: -45px;
  z-index: -1;
}
@media (max-width: 766px) {
  .p-interview .item .icn {
    top: calc(-220 / 900 * 100vw);
    left: calc(-30 / 900 * 100vw);
    width: calc(300 / 900 * 100vw);
  }
}
/*# sourceMappingURL=top.css.map */