@charset "UTF-8";

.page-header--service.page-header {
  padding-bottom: 130px;
}
.page-header__bottom {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-inline: auto;
  margin-top: 60px;
  max-width: 1240px;
  padding-inline: 20px;
  position: relative;
  z-index: 3;
}

.page-header-tab {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-header-tab__item {
  align-items: center;
  background-color: #fff;
  border: solid 1px #e5e9f2;
  border-radius: 5px;
  color: #151515;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 10px;
  letter-spacing: 0.03em;
  line-height: calc(21 / 15);
  padding: 15px 10px;
}
.page-header-tab__item:hover {
  opacity: 1;
}
.page-header-tab__item:hover::after {
  transform: rotate(90deg) translateX(3px);
}
.page-header-tab__item::after {
  background: url(../images/arrow_cycle_blue.svg) no-repeat center center/contain;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: 22px;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
  width: 22px;
}

.page-header-desc {
  color: #0c2c81;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.03em;
  line-height: calc(33 / 15);
  width: 100%;
}
.page-header-desc.adjust-sp {
  letter-spacing: 0.1em;
}

.p-service {
  margin-top: -60px;
}

.p-service-intro {
  position: relative;
  z-index: 5;
}

.p-service-main {
  position: relative;
  z-index: 6;
}

.p-service-other {
  position: relative;
  z-index: 7;
}

.p-service-intro {
  background-image: linear-gradient(to bottom, #f5faff, #eceff7);
  border-radius: 40px 40px 0 0;
  padding-bottom: 200px;
  padding-inline: 20px;
  padding-top: 95px;
}

.p-service__inner {
  margin-inline: auto;
  max-width: 1200px;
}

.p-service__title {
  border-bottom: solid 1px #0c2c81;
  color: #0c2c81;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 5px;
  width: -moz-fit-content;
  width: fit-content;
}
.p-service__title h2,
.p-service__title h3,
.p-service__title h4 {
  font-family: "Belleza", sans-serif;
  font-size: 42px;
  line-height: calc(48 / 42);
}
.p-service__title p {
  font-size: 16px;
  font-weight: 600;
  line-height: calc(24 / 16);
}

.p-service-intro__contents {
  align-items: center;
  border-top: solid 1px rgba(12, 44, 129, 0.1);
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
  margin-inline: auto;
  margin-top: 20px;
  max-width: 650px;
  padding-top: 40px;
}

.p-service-intro__img {
  aspect-ratio: 538/450;
  border-radius: 10px;
  height: 300px;
  overflow: hidden;
  width: 100%;
}

.p-service-intro__texts {
  color: #0c2c81;
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
}

.p-service-intro__label {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: calc(48 / 28);
}

.p-service-intro__desc {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: normal;
  gap: 20px;
  letter-spacing: 0.03em;
  line-height: calc(33 / 15);
}

.p-service-main {
  background-color: #fff;
  border-radius: 40px 40px 0 0;
  margin-top: -100px;
  padding-block: 100px;
  padding-inline: 20px;
}

.p-service-recomend__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-inline: auto;
  margin-top: 40px;
  max-width: 1000px;
  width: 100%;
}

.p-service-recomend__item {
  align-items: center;
  background-color: #f3f7fd;
  border: solid 1px #e5e9f2;
  border-radius: 5px;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  gap: 10px;
  letter-spacing: 0.03em;
  line-height: calc(24 / 16);
  padding: 10px;
  width: 100%;
}
.p-service-recomend__item::before {
  background: url(../images/check_blue.svg) no-repeat center center/contain;
  content: "";
  flex-shrink: 0;
  height: 25px;
  width: 25px;
}

.p-service-reason {
  margin-top: 77px;
}

.p-service-reason__contents {
  border-top: solid 1px rgba(12, 44, 129, 0.1);
  margin-inline: auto;
  margin-top: 40px;
  max-width: 1000px;
}

.p-service-reason__block {
  align-items: flex-start;
  border-bottom: solid 1px rgba(12, 44, 129, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 40px;
  padding-top: 40px;
}

.p-service-reason__label {
  color: #0c2c81;
  flex-shrink: 0;
  font-family: "Belleza", sans-serif;
  font-size: 17px;
  font-weight: normal;
  line-height: 1;
}

.p-service-reason__title {
  color: #0c2c81;
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  margin-right: auto;
  max-width: 235px;
  width: 100%;
}
.p-service-reason__title br {
  display: none;
}

.p-service-reason__desc {
  color: #151515;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.03em;
  line-height: calc(33 / 15);
  width: 100%;
}

.p-service-plan {
  margin-top: 102px;
}

.p-service__desc {
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.03em;
  line-height: calc(21 / 15);
  margin-top: 20px;
}

.p-service-plan__contents {
  margin-inline: auto;
  margin-top: 40px;
  max-width: 1000px;
  overflow-x: scroll;
  width: 100%;
}

.p-service-plan__table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  width: 800px;
}

.p-service-plan__list h1,
.p-service-plan__list h2,
.p-service-plan__list h3,
.p-service-plan__list p {
  border-bottom: solid 1px rgba(12, 44, 129, 0.1);
  padding-block: 19px;
}
.p-service-plan__list h1,
.p-service-plan__list h2,
.p-service-plan__list h3 {
  color: #0c2c81;
  font-size: 16px;
  font-weight: 600;
  line-height: calc(24 / 16);
}
.p-service-plan__list p {
  font-size: 15px;
  font-weight: normal;
  line-height: calc(33 / 15);
}

.p-service-plan__note {
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.03em;
  line-height: calc(23 / 12);
  margin-inline: auto;
  margin-top: 25px;
  max-width: 1000px;
}

.p-service-faq {
  margin-top: 120px;
}

.p-service-faq__contents {
  display: flex;
  flex-direction: column;
  gap: 19px;
  margin-inline: auto;
  margin-top: 40px;
  max-width: 1000px;
  width: 100%;
}

.p-service-faq__item {
  background-color: #f3f7fd;
  border-radius: 10px;
  padding: 30px 20px;
}

.p-service-faq__question {
  align-items: baseline;
  border-bottom: 1px solid #d4d4d4;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 14px;
  letter-spacing: 0.04em;
  line-height: 2;
  padding-bottom: 10px;
}
.p-service-faq__question.adjust-sp {
  letter-spacing: 0.1em;
}
.p-service-faq__question::before {
  color: #1849a5;
  content: "Q.";
  font-family: "Belleza", sans-serif;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0.05em;
}

.p-service-faq__answer {
  align-items: baseline;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 14px;
  letter-spacing: 0.04em;
  line-height: calc(30 / 14);
  padding-top: 10px;
}
.p-service-faq__answer.adjust-sp {
  letter-spacing: 0.1em;
}
.p-service-faq__answer::before {
  color: #1849a5;
  content: "A.";
  font-family: "Belleza", sans-serif;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0.05em;
}

.p-service-other {
  background-image: linear-gradient(to bottom, #f5faff, #eceff7);
  border-radius: 40px 40px 0 0;
  padding-bottom: 100px;
  padding-inline: 20px;
  padding-top: 120px;
}

.p-service-other__contents {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-inline: auto;
  margin-top: 40px;
  max-width: 1000px;
}

.p-service-other__block {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-service-other__img {
  aspect-ratio: 320/270;
  border-radius: 5px;
  height: 200px;
  overflow: hidden;
  width: 100%;
}

.p-service-other__texts {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.p-service-other__head {
  border-bottom: solid 1px rgba(12, 44, 129, 0.1);
  color: rgba(12, 44, 129, 0.4);
  font-family: "Belleza", sans-serif;
  font-size: 12px;
  line-height: calc(14 / 12);
  padding-bottom: 5px;
  width: 100%;
}

.p-service-other__label {
  align-items: baseline;
  color: #0c2c81;
  display: flex;
  font-family: "Belleza", sans-serif;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  letter-spacing: 0.01em;
  line-height: calc(14 / 12);
  padding-top: 24px;
}
.p-service-other__label::before {
  background-color: currentColor;
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}

.p-service-other__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: calc(32 / 22);
  margin-top: 6px;
}

.p-service-other__desc {
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.03em;
  line-height: calc(33 / 15);
  margin-top: 25px;
}
.p-service-other__desc.adjust-sp {
  letter-spacing: 0.1em;
}
@media (min-width: 414px) {
  .page-header-desc.adjust-sp {
    letter-spacing: 0.03em;
  }
  .page-header-desc.adjust-spwide {
    letter-spacing: 0.1em;
  }
  .p-service-faq__question.adjust-sp {
    letter-spacing: 0.04em;
  }
  .p-service-faq__question.adjust-spwide {
    letter-spacing: 0.1em;
  }
  .p-service-faq__answer.adjust-sp {
    letter-spacing: 0.04em;
  }
  .p-service-faq__answer.adjust-spwide {
    letter-spacing: 0.1em;
  }
  .p-service-other__desc.adjust-sp {
    letter-spacing: 0.04em;
  }
  .p-service-other__desc.adjust-spwide {
    letter-spacing: 0.1em;
  }
}
@media (min-width: 768px) {
  .page-header-desc.adjust-spwide {
    letter-spacing: 0.03em;
  }
  .page-header-desc.adjust-tb {
    letter-spacing: 0.1em;
  }
  .p-service__title {
    align-items: baseline;
    flex-direction: row;
    gap: 16px;
  }
  .p-service-reason__block {
    flex-direction: row;
    padding-bottom: 90px;
  }
  .p-service-reason__label {
    writing-mode: vertical-lr;
  }
  .p-service-reason__title br {
    display: block;
  }
  .p-service-reason__desc {
    max-width: 560px;
  }
  .p-service-plan__table {
    width: 100%;
  }
  .p-service-faq__question.adjust-spwide {
    letter-spacing: 0.04em;
  }
  .p-service-faq__question.adjust-tb {
    letter-spacing: 0.1em;
  }
  .p-service-faq__answer.adjust-spwide {
    letter-spacing: 0.04em;
  }
  .p-service-faq__answer.adjust-tb {
    letter-spacing: 0.1em;
  }
  .p-service-other__block {
    flex-direction: row;
    justify-content: space-between;
  }
  .p-service-other__img {
    height: auto;
    max-width: 200px;
  }
  .p-service-other__desc.adjust-spwide {
    letter-spacing: 0.04em;
  }
  .p-service-other__desc.adjust-tb {
    letter-spacing: 0.1em;
  }
}
@media (min-width: 1024px) {
  .page-header__bottom {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }
  .page-header-tab {
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 15px;
  }
  .page-header-tab__item {
    font-size: 15px;
    padding: 16px 26px;
  }
  .page-header-desc {
    max-width: 400px;
  }
  .page-header-desc.adjust-tb {
    letter-spacing: 0.03em;
  }
  .p-service-intro {
    padding-bottom: 230px;
  }
  .p-service-intro__contents {
    flex-direction: row;
    max-width: 1060px;
    padding-top: 80px;
  }
  .p-service-intro__img {
    height: auto;
    max-width: 538px;
  }
  .p-service-intro__texts {
    gap: 35px;
    max-width: 422px;
  }
  .p-service-main {
    padding-bottom: 120px;
    padding-top: 103px;
  }
  .p-service-recomend__list {
    gap: 10px;
    margin-top: 66px;
  }
  .p-service-recomend__item {
    gap: 20px;
    padding: 9px 23px;
  }
  .p-service-recomend__item::before {
    height: 53px;
    width: 53px;
  }
  .p-service-reason__contents {
    margin-top: 66px;
  }
  .p-service-reason__label {
    margin-right: 40px;
  }
  .p-service-reason__title {
    line-height: calc(48 / 22);
    margin-top: 6px;
  }
  .p-service-reason__desc {
    margin-top: 6px;
  }
  .p-service__desc {
    margin-top: 40px;
  }
  .p-service-plan__contents {
    margin-top: 85px;
    overflow: auto;
  }
  .p-service-plan__list:nth-of-type(2) h1,
  .p-service-plan__list:nth-of-type(2) h2,
  .p-service-plan__list:nth-of-type(2) h3,
  .p-service-plan__list:nth-of-type(2) p {
    position: relative;
  }
  .p-service-plan__list:nth-of-type(2) h1::before, .p-service-plan__list:nth-of-type(2) h1::after,
  .p-service-plan__list:nth-of-type(2) h2::before,
  .p-service-plan__list:nth-of-type(2) h2::after,
  .p-service-plan__list:nth-of-type(2) h3::before,
  .p-service-plan__list:nth-of-type(2) h3::after,
  .p-service-plan__list:nth-of-type(2) p::before,
  .p-service-plan__list:nth-of-type(2) p::after {
    background-color: #0c2c81;
    content: "";
    height: calc(100% - 24px);
    opacity: 0.1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
  }
  .p-service-plan__list:nth-of-type(2) h1::before,
  .p-service-plan__list:nth-of-type(2) h2::before,
  .p-service-plan__list:nth-of-type(2) h3::before,
  .p-service-plan__list:nth-of-type(2) p::before {
    left: 0;
  }
  .p-service-plan__list:nth-of-type(2) h1::after,
  .p-service-plan__list:nth-of-type(2) h2::after,
  .p-service-plan__list:nth-of-type(2) h3::after,
  .p-service-plan__list:nth-of-type(2) p::after {
    right: 0;
  }
  .p-service-faq__contents {
    margin-top: 66px;
  }
  .p-service-faq__item {
    padding: 20px 50px 30px 30px;
  }
  .p-service-faq__question.adjust-tb {
    letter-spacing: 0.04em;
  }
  .p-service-faq__answer.adjust-tb {
    letter-spacing: 0.04em;
  }
  .p-service-other__contents {
    margin-top: 94px;
  }
  .p-service-other__block {
    align-items: flex-start;
  }
  .p-service-other__img {
    max-width: 320px;
  }
  .p-service-other__texts {
    margin-top: 43px;
    max-width: 625px;
  }
  .p-service-other__desc.adjust-tb {
    letter-spacing: 0.04em;
  }
}
@media (min-width: 1366px) {
  .page-header-desc.adjust-pc {
    letter-spacing: 0.03em;
  }
  .page-header-desc.adjust-lg {
    letter-spacing: 0.1em;
  }
  .p-service-faq__question.adjust-pc {
    letter-spacing: 0.04em;
  }
  .p-service-faq__question.adjust-lg {
    letter-spacing: 0.1em;
  }
  .p-service-faq__answer.adjust-pc {
    letter-spacing: 0.04em;
  }
  .p-service-faq__answer.adjust-lg {
    letter-spacing: 0.1em;
  }
  .p-service-other__desc.adjust-pc {
    letter-spacing: 0.04em;
  }
  .p-service-other__desc.adjust-lg {
    letter-spacing: 0.1em;
  }
}