:root {
  --lp-bg-blue: #eff6ff;
  --accent-color: #1f5cfa;
  --base-color: #0f30df;
  --lp-shadow: 0px 4px 32px 0px rgb(0 0 0 / 4%);

  /* campaign */
  --blue500: #0071FF;
  --red500: #F95271;
}

html {
  scroll-behavior: smooth;
}

main {
  font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'メイリオ', Meiryo, Verdana, Helvetica, 'ＭＳ Ｐゴシック', sans-serif;
  font-size: 1rem;
  line-height: 2;
}

@media (width <= 767px) {
  main {
    font-size: 0.9375rem;
    line-height: 1.8;
  }
}


/* レイアウト */
.inner {
  max-width: 1200px;
  margin: 0 auto;
}

.inner--l2 {
  max-width: 1100px;
}

.section-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  text-align: center;
}

.header,
.s-footer-rs {
  background: #fff;
}

@media (width <= 767px) {
  .inner {
    margin: 0 16px;
  }

  .section-head {
    gap: 16px;
    text-align: left;
  }

  .s-footer-rs {
    padding-top: 0;
  }

  .s-footer-rs__head {
    display: none;
  }
}

/* 見出し */
.headline {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.headline span {
  color: #f95271;
}

@media (width <= 767px) {
  .headline {
    font-size: 1.375rem;
  }
}


/* ボタン */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--base-color);
  border-radius: 5px;
  color: #fff;
  font-weight: 700;
  transition: opacity 0.3s;
}

.button--secondary {
  background: #fff;
  border: solid 1px var(--base-color);
  color: var(--base-color);
  transition: background 0.3s;
}

.button--cta {
  width: 480px;
  height: 80px;
  font-size: 1.5rem;
  margin: 0 auto;
}

@media (width >= 768px) {
  .button:hover {
    opacity: .7;
    text-decoration: none;
  }

  .button--secondary:hover {
    opacity: 1;
    background: #f1f4fc;
  }
}

@media (width <= 767px) {
  .button--cta {
    width: 100%;
    height: 60px;
    font-size: 1.125rem;
  }
}

/* 箱 */
.attention-box {
  padding: 20px 40px;
  background: #fef0f3;
  color: #333;
}

.attention-box p + p {
  margin-top: 10px;
}

@media (width <= 767px) {
  .attention-box {
    padding: 20px 16px;
  }
}

/* コメリスト */
.c-note-list {
  list-style-type: none;
}

.c-note-list li {
  display: flex;
  gap: 4px;
}

.c-note-list li::before {
  content: "※";
}

@media (width <= 767px) {
  .c-note-list li {
    font-size: 0.8125rem;
  }
}

/* ヘッダー */
.header {
  padding: 22px 0;
  height: auto;
  position: relative;
  box-shadow: none;
}

.header__inner {
  display: flex;
  justify-content: space-between;
}

.header__logo {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.header__logo a {
  line-height: 0;
}

.header__logo img {
  width: 270px;
}

.header__logo span {
  font-size: 1rem;
  line-height: 1.2;
  color: #8B8B8B;
  padding: 0 0 4px;
}

.header__btns {
  display: flex;
  gap: 10px;
  list-style-type: none;
}

.header__btns a {
  font-size: 1.125rem;
  line-height: 1.8;
  padding: 6px 20px;
}

@media (width <= 960px) {
  /* ヘッダー */
  .header {
    padding: 7px 16px 11px;
  }

  .header__inner {
    align-items: center;
  }

  .header__logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .header__logo a {
    line-height: 0;
  }

  .header__logo img {
    width: 173px;
  }

  .header__logo span {
    font-size: .75rem;
    line-height: 1;
    padding: 0;
  }

  .header__btns {
    flex-shrink: 0;
  }

  .header__btns a {
    font-size: 0.8125rem;
    line-height: 1;
    padding: 8.5px 10px;
  }
}

@media (width <= 767px) {
    .header {
      padding: 7px 0 11px;
    }
}

/* ヒーロー */
.hero {
  background: url("../images/bg_hero_pc.png") no-repeat center center;
  background-size: cover;
  padding: 0 min(5.8823%, 80px);
}

.hero__column {
  display: flex;
  justify-content: space-between;
  gap: 0 20px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px 0 0;
}

.hero__headline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: #0071FF;
}

.hero__headline span {
  background: #fff;
  padding: 0 10px;
  width: fit-content;
}

.hero__lead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 2;
  color: #fff;
}

.hero__note {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.5;
}

.hero__list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  list-style-type: none;
}

.hero__list li {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  width: auto;
  background: #F95271;
  color: #fff;
  text-align: center;
  padding: 4px 20px;
  margin-top: 40px;
}

.hero__illust {
  width: 524px;
  padding: 120px 0 0;
  margin: 0 0 -59px;
}

.hero__balloon {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 4.3478%;
  padding: 16px 5.7252% 28px;
  background: #0071FF;
  border: solid 2px #fff;
  border-radius: 12px;
  margin: 0 0 20.5px;
  position: relative;
}

.hero__balloon::after {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  background: #0071FF;
  border-bottom: solid 2px #fff;
  border-left: solid 2px #fff;
  position: absolute;
  bottom: -13px;
  left: 166px;
  transform: rotate(-45deg)
}

.hero__balloon-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  width: 100%;
}

.hero__balloon-title span {
  background: #F95271;
  padding: 4px 8px;
  margin: 0 8px;
}

.hero__balloon dl {
  flex: 1;
  padding: 9px 0;
  background: #fff;
  text-align: center;
}

.hero__balloon dl dt {
  font-size: 1rem;
  line-height: 1.6;
  color: #0071FF;
}

.hero__balloon dl dd {
  font-size: 1.25rem;
  color: #0071FF;
}

.hero__balloon dl dd span {
  font-family: Futura, "Century Gothic", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 8px 0 0;
}

@media (width >= 961px) {
  .hero__headline {
    font-size: min(2.9412vw,2.5rem);
  }

  .hero__balloon dl dd span {
    font-size: min(2.9412vw,2.5rem);
  }
}

@media (width <= 960px) {
  .hero__column {
    flex-direction: column;
    gap: 40px;
  }

  .hero__text {
    padding: 60px 0 0;
  }

  .hero__illust {
    padding: 0;
    margin: 0 auto -48.8px;
  }
}

@media (width <= 767px) {
  .hero {
    background-image: url("../images/bg_hero_sp.png");
    padding: 0;
  }

  .hero__text {
    gap: 16px;
    padding: 24px 0 0;
  }

  .hero__headline {
    gap: 9px;
    font-size: min(5.6410vw,1.375rem);
  }

  .hero__headline span {
    background: #fff;
    padding: 0 6px;
  }

  .hero__lead {
    gap: 6px;
    font-size: 0.9375rem;
  }

  .hero__note {
    font-size: 0.8125rem;
  }

  .hero__list {
    gap: 4px;
  }

  .hero__list li {
    font-size: 11px;
    line-height: 100%;
    width: auto;
    padding: 4px 8px;
  }

  .hero__illust {
    width: 100%;
    padding: 0;
    margin: 0 0 -40px;
  }

  .hero__balloon {
    gap: 8px 14px;
    padding: 11px 21px 19px;
    border-radius: 8px;
    margin: 0 0 12px;
  }

  .hero__balloon::after {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: #0071FF;
    border-bottom: solid 2px #fff;
    border-left: solid 2px #fff;
    position: absolute;
    bottom: -13px;
    left: 166px;
    transform: rotate(-45deg)
  }

  .hero__balloon-title {
    font-size: var(--font-size-xs);
  }

  .hero__balloon-title span {
    background: #F95271;
    padding: 4px 5px;
    margin: 0 5px;
  }


  .hero__balloon dl {
    padding: 5px 0;
  }

  .hero__balloon dl dt {
    font-size: 0.75rem;
  }

  .hero__balloon dl dd {
    font-size: 0.75rem;
  }

  .hero__balloon dl dd span {
    font-size: 1.75rem;
    margin: 0 5px 0 0;
  }
}

/* banner */
.banner {
  width: 100%;

  &.-md {
    margin-top: 80px;
    padding: 0 min(5.8823%, 80px);

    .banner_wrap {
      max-width: 1100px;

      .link {
        aspect-ratio: 1100.00/130.75;
      }
    }
  }

  &.-sm {
    margin-top: -20px;
    padding: 0 0.81rem;

    .banner_wrap {
      max-width: 706px;

      .link {
        aspect-ratio: 706.67/84.00;
      }
    }
  }

  .banner_wrap {
    margin: 0 auto;
    width: 100%;

    .link {
      display: block;
      transition: opacity .3s ease;

      &:hover {
        opacity: .6;
      }

      picture {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  @media screen and (width <= 767px) {
    &.-md {
      margin-top: 40px;

      .banner_wrap .link {
        aspect-ratio: 358/95;
      }
    }

    &.-sm {
      .banner_wrap .link {
        aspect-ratio: 317.14/84.00;
      }
    }
  }
}

/* about */
.about {
  padding: 100px min(5.8823%, 80px) 120px;
}

.about__head {
  margin: 0 0 60px;
}

.about figure {
  line-height: 0;
}

.example {
  padding: 120px 0 0;
}

.example__headline {
  margin: 0 0 60px;
}

.example__list {
  display: flex;
  list-style-type: none;
  gap: 25px;
  margin: 0 0 80px;
}

.example__list li {
  width: 350px;
}

.example__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 12px;
}

.example__image {
  line-height: 0;
  margin: 0 0 28px;
}

.example__copy {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #0071ff;
}

@media (width <= 767px) {
  .about {
    padding: 40px 0;
  }

  .about__head {
    margin: 0 0 28px;
  }

  .example {
    padding: 40px 0 0;
  }

  .example__headline {
    font-size: 1.25rem;
  }

  .example__list {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
    margin: 0 0 32px;
  }

  .example__list li {
    width: 47.4860%;
  }

  .example__title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 4px;
  }

  .example__image {
    margin: 0 0 8px;
  }

  .example__copy {
    font-size: 1.25rem;
  }
}

.register-step {
  background: var(--lp-bg-blue);
  padding: 120px min(5.8823%, 80px);
  position: relative;
}

.register-step::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-top: 80px solid var(--lp-bg-blue);
  border-bottom: 0;
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.register-step__head {
  margin: 0 0 80px;
}

.register-step__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0 0 40px;
}

.register-step__list li {
  display: flex;
  gap: 40px 3.6364%;
}

.register-step__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  font-family: Futura, "Century Gothic", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.66;
  text-align: center;
  color: #0071ff;
}

.register-step__icon::after {
  content: "";
  display: block;
  width: 4px;
  flex: 1;
  background: #0071ff;
  margin: 8px 0 12px;
}

.register-step__list li:last-child .register-step__icon::after {
  display: none;
}

.register-step__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #0071ff;
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
}

.register-step__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 524px;
  padding: 40px 0 0;
}

.register-step__title {
  font-size: 1.75rem;
  line-height: 1.7;
}

.register-step__image {
  width: 400px;
  align-self: center;
  margin: 0 0 0 auto;
}

.register-step__button {
  width: 320px;
  height: 52px;
}

.register-step__note-list {
  list-style-type: none;
  margin: 0 0 80px;
}

.register-step__note-list li {
  display: flex;
  gap: 10px;
  counter-increment: number;
}

.register-step__note-list li::before {
  content: "※"counter(number)".";
  flex-shrink: 0;
  margin: 0 0 0 -20.5px;
}

@media (width <= 767px) {
  .register-step {
    padding: 40px 0;
  }

  .register-step::after {
    border-right-width: 53px;
    border-left-width: 53px;
    border-top-width: 42px;
    bottom: -42px;
  }

  .register-step__head {
    margin: 0 0 32px;
    text-align: center;
  }

  .register-step__list {
    gap: 28px;
  }

  .register-step__list li {
    gap: 12px;
    position: relative;
  }

  .register-step__icon {
    gap: 4px;
    width: 32px;
  }

  .register-step__icon::after {
    margin: 8px 0 0;
  }


  .register-step__icon span {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .register-step__text {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 0;
    flex: 1;
  }

  .register-step__title {
    font-size: 1rem;
    line-height: 1.5;
    padding: 28px 153px 0 0;
    margin: 0 0 4px;
    min-height: 87px;
  }

  .register-step__image {
    width: 145px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .register-step__button {
    width: 100%;
    margin: 20px auto 0;
    font-size: 1rem;
  }

  .register-step__note-list {
    margin: 0 0 32px;
  }

  .register-step__note-list li {
    gap: 4px;
    counter-increment: number;
    font-size: 0.8125rem;
  }

  .register-step__note-list li::before {
    margin: 0;
  }
}

.service {
  padding: 180px min(5.8823%, 80px) 0;
}

.service__head {
  align-items: center;
  gap: 60px;
  margin: 0 0 80px;
}

.service__head img {
  width: 465px;
}

.service__item {
  padding: 60px 3.6364%;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--lp-shadow);
}

.service__item + .service__item {
  margin-top: 60px;
}

.service__title {
  font-size: 2rem;
  text-align: center;
  margin: 0 0 40px;
}

.service__check-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 0 40px;
}

.service__check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.service__check-list li::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;charset=utf-8,<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5606 0.93916C21.1465 1.52503 21.1465 2.47649 20.5606 3.06236L8.56193 15.061C7.97606 15.6469 7.02461 15.6469 6.43873 15.061L0.439404 9.06169C-0.146468 8.47582 -0.146468 7.52436 0.439404 6.93849C1.02528 6.35262 1.97673 6.35262 2.5626 6.93849L7.50268 11.8739L18.4421 0.93916C19.028 0.353288 19.9794 0.353288 20.5653 0.93916H20.5606Z" fill="%23f95271"/></svg>') no-repeat center center;
  background-size: 21px 16px;
  flex-shrink: 0;
}

.service__plans {
  display: flex;
  gap: 20px 1.9608%;
}

.service__plans._row2 dl {
  padding: 24px 1.9608%;
}

.service__plans dl {
  flex: 1;
  padding: 24px 3.1373% 32px;
  background: var(--lp-bg-blue);
  border-radius: 8px;
}

.service__plans dl dt {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 20px;
}

.service__button-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style-type: none;
}

.service__button-list li {
  flex: 1;
  min-width: 140px;
}

.service__plan-button {
  display: flex;
  align-items: center;
  height: 66px;
  padding: 20px 36px 20px 20px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  background: #fff url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C11.4469 2 11 2.44687 11 3C11 3.55313 11.4469 4 12 4H14.5844L8.29375 10.2937C7.90312 10.6844 7.90312 11.3188 8.29375 11.7094C8.68437 12.1 9.31875 12.1 9.70937 11.7094L16 5.41563V8C16 8.55312 16.4469 9 17 9C17.5531 9 18 8.55312 18 8V3C18 2.44687 17.5531 2 17 2H12ZM4.5 3C3.11875 3 2 4.11875 2 5.5V15.5C2 16.8813 3.11875 18 4.5 18H14.5C15.8813 18 17 16.8813 17 15.5V12C17 11.4469 16.5531 11 16 11C15.4469 11 15 11.4469 15 12V15.5C15 15.775 14.775 16 14.5 16H4.5C4.225 16 4 15.775 4 15.5V5.5C4 5.225 4.225 5 4.5 5H8C8.55312 5 9 4.55312 9 4C9 3.44687 8.55312 3 8 3H4.5Z" fill="%230f30df"/></svg>') no-repeat right 16px center;
  border: solid 1px #0f30df;
  border-radius: 4px;
  color: #0f30df;
  transition: background-color .3s;
}

.service__attention {
  margin: 80px 0 0;
}

@media (width >= 768px) {
  .service__plan-button:hover {
    background-color: #f1f4fc;
  }
}

@media (width <= 767px) {
  .service {
    padding: 82px 0 0;
  }

  .service__head {
    gap: 24px;
    margin: 0 0 60px;
  }

  .service__head img {
    width: 100%;
  }

  .service__item {
    padding: 32px 16px;
  }

  .service__item + .service__item {
    margin-top: 20px;
  }

  .service__title {
    font-size: 1.125rem;
    margin: 0 0 24px;
  }

  .service__check-list {
    flex-direction: column;
    gap: 12px;
    margin: 0 0 40px;
  }

  .service__check-list li {
    gap: 8px;
  }

  .service__check-list li::before {
    background-size: 16px 12px;
  }

  .service__plans {
    flex-direction: column;
  }

  .service__plans._row2 dl {
    padding: 24px 16px;
  }

  .service__plans dl {
    padding: 24px 16px;
    border-radius: 8px;
  }

  .service__plans dl dt {
    font-size: 1rem;
    margin: 0 0 12px;
  }

  .service__button-list {
    flex-direction: column;
  }

  .service__plan-button {
    height: 52px;
    padding: 12px 36px 12px 16px;
    font-size: 1rem;
  }

  .service__attention {
    margin: 32px 0 0;
  }
}

.fee-pluns {
  padding: 120px min(5.8823%, 80px);
  position: relative;
}

.fee-pluns::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-top: 80px solid #fff;
  border-bottom: 0;
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.fee-pluns__column {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.fee-pluns__wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.fee-pluns__item {
  padding: 40px 5.4545% 60px;
  box-shadow: var(--lp-shadow);
  border-radius: 20px;
}

.fee-pluns__item-head {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 32px;
}

.fee-pluns__item-head span {
  display: inline-block;
  padding: 3px 11px;
  border: solid 1px;
  border-radius: 4px;
}

.fee-pluns__item-head span._new {
  color: #f95271;
  border-color: #f95271;
  margin-right: 10px;
}

.fee-pluns__item-head span._plan {
  color: #f99704;
  border-color: #f99704;
  margin-left: 10px;
  margin-right: 10px;
}

.fee-pluns__item-body {
  display: flex;
}

.fee-pluns__item-body dl:not(._amount) {
  width: 25.5102%;
  color: #fff;
  padding: 20px 2.0408%;
  border-radius: 8px;
}

.fee-pluns__item-body dl._new {
  background: #f95271;
}

.fee-pluns__item-body dl._plan {
  background: #f99704;
  margin: 0 0 0 4.8980%;
  position: relative;
}

.fee-pluns__item-body dl._plan::before {
  content: "+";
  font-size: min(2.5vw,2.125rem);
  line-height: 1.5;
  color: #333;
  position: absolute;
  left: -13.6%;
  top: 50%;
  transform: translateY(-50%);
}

.fee-pluns__item-body dl dt {
  font-size: min(1.3235vw,1.125rem);
  line-height: 1.4;
  text-align: center;
}

.fee-pluns__item-body dl dd {
  font-size: min(2.0588vw, 1.75rem);
  text-align: center;
}

.fee-pluns__item-body dl dd span {
  font-family: Futura, "Century Gothic", sans-serif;
  font-size: min(4.1176vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 4px 0 0;
}

.fee-pluns__item-body dl._amount {
  margin: 0 0 0 auto;
  width: 40.2041%;
}

.fee-pluns__item-body dl._amount dt {
  padding: 4px;
  background: #0071ff;
  border-radius: 4px;
  color: #fff;
}

.fee-pluns__item-body dl._amount dd {
  color: #0071ff;
  font-size: min(3.0882vw,2.625rem);
  font-weight: 700;
  line-height: 1.2;
  position: relative;
}

.fee-pluns__item-body dl._amount dd span {
  font-size: min(5.8824vw,5rem);
  line-height: 1.2;
}

.fee-pluns__item-body dl._amount dd sup {
  font-size: min(1.4706vw,1.25rem);
  line-height: 1.2;
  font-weight: 500;
  position: absolute;
  top: 10px;
  margin: 0 0 0 -10.4061%;
}

.fee-list__headline {
  font-size: 2rem;
  margin: 0 0 40px;
}

.fee-list__table {
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 0 40px;
}

.fee-list__table th {
  line-height: 1.5;
  width: 270px;
  padding: 14px 0;
}

.fee-list__table th:first-child {
  background: #f9f9f9;
  width: 292px;
  padding-left: 16px;
}

.fee-list__table th:nth-child(2) {
  background: #f95271;
  color: #fff;
  text-align: center;
}

.fee-list__table th:nth-child(3) {
  background: #f99704;
  color: #fff;
  text-align: center;
}

.fee-list__table th:nth-child(4) {
  background: #0071ff;
  color: #fff;
  text-align: center;
}

.fee-list__table th,
.fee-list__table td {
  border: solid 1px #f0f0f0;
}

.fee-list__table td {
  padding: 16px 20px;
}

.fee-list__table td:not(:first-child) {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.fee-list__table td:not(:first-child) span {
  font-size: 1.125rem;
  margin: 0 4px 0 0;
}

.fee-list__table td:nth-child(2) {
  background: #fff4f6;
}

.fee-list__table td:nth-child(3) {
  background: #FFF8ED;
}

.fee-list__table td:nth-child(4) {
  background: #F8FBFF;
}

.fee-list__note {
  list-style-type: none;
  padding: 0;
}

.fee-list__note li {
  display: flex;
}

.fee-list__note li::before {
  content: "・";
  margin: 0 3px;
}

@media (width <= 767px) {
  .fee-pluns {
    padding: 60px 0;
  }

  .fee-pluns::after {
    border-right-width: 53px;
    border-left-width: 53px;
    border-top-width: 42px;
    bottom: -42px;
  }

  .fee-pluns__column {
    gap: 32px;
  }

  .fee-pluns__wrap {
    gap: 20px;
  }

  .fee-pluns__item {
    padding: 32px 16px;
  }

  .fee-pluns__item-head {
    font-size: var(--font-size-xs);
    margin: 0 0 20px;
  }

  .fee-pluns__item-head span {
    margin-bottom: 10px;
  }

  .fee-pluns__item-body {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 8.5890%;
  }

  .fee-pluns__item-body dl:not(._amount) {
    width: auto;
    padding: 12px 0;
    flex: 1;
  }

  .fee-pluns__item-body dl._plan {
    margin: 0;
  }

  .fee-pluns__item-body dl._plan::before {
    font-size: 1.25rem;
    left: -21px;
  }

  .fee-pluns__item-body dl dt {
    font-size: var(--font-size-xs);
  }

  .fee-pluns__item-body dl dd {
    font-size: min(5.1282vw, 1.25rem);
  }

  .fee-pluns__item-body dl dd span {
    font-size: min(8.4615vw, 2.0625rem);
  }

  .fee-pluns__item-body dl._amount {
    margin: 0;
    width: 100%;
  }

  .fee-pluns__item-body dl._amount dd {
    font-size: 2.1875rem;
  }

  .fee-pluns__item-body dl._amount dd span {
    font-size: 4.125rem;
  }

  .fee-pluns__item-body dl._amount dd sup {
    font-size: 1.0625rem;
    top: 10px;
    margin: 0 0 0 -34px;
  }

  .fee-list__headline {
    font-size: 1.375rem;
    margin: 0 0 32px;
  }

  .fee-list__wrap {
    width: 100%;
    overflow: auto;
  }

  .fee-list__table {
    width: 1000px;
    margin: 0 0 32px;
  }

  .fee-list__table th {
    width: 246px;
  }

  .fee-list__table th:first-child {
    width: 260px;
  }

  .fee-list__note li {
    font-size: 0.8125rem;
  }
}

.flow {
  background: var(--lp-bg-blue);
  padding: 180px min(5.8823%, 80px) 120px;
  position: relative;
}

.flow::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-top: 80px solid #fff;
  border-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.flow::after {
  border: 1px solid red;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-top: 80px solid var(--lp-bg-blue);
  border-bottom: 0;
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.flow__head {
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
}

.flow__image {
  text-align: center;
  margin: 80px 0 0;
  line-height: 0;
}

.flow__push {
  padding: 120px 0 172px;
}

.flow__push-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin: 0 0 80px;
}

.flow__push-balloon {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  padding: 8px 20px;
  background: #0071ff;
  border-radius: 4px;
  color: #fff;
  position: relative;
}

.flow__push-balloon::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 12px solid #0071ff;
  border-bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  margin: 0 auto;
}

.flow__push-copy {
  font-size: 2.5rem;
  line-height: 1.5;
  display: flex;
  gap: 32px;
  align-items: center;
}

.flow__push-copy::before,
.flow__push-copy::after {
  content: "";
  display: block;
  width: 63px;
  height: 114px;
  background: url('data:image/svg+xml;charset=utf-8,<svg width="63" height="114" viewBox="0 0 63 114" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 55L40.5 112.5" stroke="%230071FF" stroke-width="4"/><path d="M28.5 1.5L61 112.5" stroke="%230071FF" stroke-width="4"/></svg>') no-repeat center center;
  background-size: 100% 100%;
}

.flow__push-copy::after {
  transform: scale(-1, 1);
}

.flow__push-copy em {
  display: inline-block;
  background: #F95271;
  color: #fff;
  font-style: normal;
  padding: 0 12px;
  margin: 0 8px;
}

.flow__push-lead {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 20px;
}

.flow__push-attention {
  margin: 0 0 20px;
}


.case {
  padding: 100px min(6.25%, 80px);
}

.case + .case {
  margin-top: 60px;
}

.case--01 {
  background: #dfedff;
}

.case--02 {
  background: #fef0f3;
}

.case__column {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.case__headline {
  font-size: 2.25rem;
}

.case__headline .label {
  display: inline-block;
  padding: 3px 17px;
  border: solid 1px #F95271;
  border-right: solid 6px #F95271;
  background: #fff;
  margin: 0 10px 0 0;
}

.case__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.case__item {
  counter-increment: case_number;
}

.case__item > dt {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px 16px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 32px;
}

.case__item > dt span {
  width: 100%;
}

.case__item > dt small {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
}

.case__item > dt::before {
  content: "CASE " counter(case_number, decimal-leading-zero);
  font-family: Futura, "Century Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  padding: 8px 12px;
  background: #0071ff;
  color: #fff;
}

.case__schedule {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 32px;
}

.case__schedule-list {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.case__schedule-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.5;
  font-weight: 700;
}

.case__schedule-list li::before {
  content: "";
  display: block;
  width: 51px;
  height: 16px;
}

.case__schedule-list li._results {
  color: #f95271;
}

.case__schedule-list li._results::before {
  background: #f95271;
}

.case__schedule-list li._fee {
  color: #f99704;
}

.case__schedule-list li._fee::before {
  background: #f99704;
}

.case__schedule-list li._new {
  color: #00c75c;
}

.case__schedule-list li._new::before {
  background: #00c75c;
}

.case__fee {
  background: #fff;
  padding: 28px 3.6364%;
}

.case__fee > dt {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.6;
  padding: 0 0 12px;
  border-bottom: solid 1px #f0f0f0;
  margin: 0 0 10px;
}

.case__fee > dd {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.case__update {
  width: 480px;
}

.case__update > dt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 10px;
}

.case__update > dt .label {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  border: solid 1px #f95271;
  border-right-width: 4px;
  color: #f95271;
  padding: 4px 14px 4px 12px;
}

.case__update > dt .label._new {
  border-right-width: 1px;
  border-left-width: 4px;
}

.case__update > dt .fee {
  font-family: Futura, "Century Gothic", sans-serif;
  font-size: 1.5rem;
  color: #0071ff;
  font-weight: 700;
  line-height: 1.2;
}

.case__update > dt .fee span {
  font-size: 3rem;
  margin: 0 8px 0 0;
}

.case__update-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case__update-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.case__update-list li > *:not(.number) {
  background: #f9f9f9;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}

.case__update-list li .plan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 164px;
}

.case__update-list li dl {
  display: flex;
  justify-content: space-between;
  width: 248px;
}

.case__update-list li dl dd {
  font-size: 0.8125rem;
  line-height: 1.2;
}

.case__update-list li dl dd span {
  font-family: Futura, "Century Gothic", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 4px 0 0;
}

.case__update-list li .number {
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 700;
  white-space: nowrap;
}

.case__update-list li .number span {
  font-family: Futura, "Century Gothic", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 4px 0 0;
}

.flow__button {
  margin-top: 80px;
}

@media (width <= 767px) {
  .flow {
    padding: 82px 0;
  }

  .flow::before {
    border-right-width: 53px;
    border-left-width: 53px;
    border-top-width: 42px;
  }

  .flow::after {
    border-right-width: 53px;
    border-left-width: 53px;
    border-top-width: 42px;
    bottom: -42px;
  }

  .flow__image {
    margin: 32px 0 0;
  }

  .flow__push {
    padding: 40px 0;
  }

  .flow__push-head {
    gap: 16px;
    margin: 0 0 32px;
  }

  .flow__push-balloon {
    font-size: var(--font-size-xs);
    padding: 4px 9px;
    border-radius: 2px;
  }

  .flow__push-balloon::after {
    border-right-width: 6px;
    border-left-width: 6px;
    border-top-width: 8px;
    bottom: -8px;
  }

  .flow__push-copy {
    font-size: min(5.1282vw,1.25rem);
    gap: 5px;
  }

  .flow__push-copy::before,
  .flow__push-copy::after {
    width: 24px;
    height: 45px;
  }

  .flow__push-copy span {
    white-space: nowrap;
  }

  .flow__push-copy em {
    padding: 0 5px;
    margin: 0 4px;
  }

  .flow__push-lead {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 16px;
  }

  .flow__push-attention {
    margin: 0 0 16px;
  }

  .case {
    padding: 40px 0;
  }

  .case__column {
    gap: 32px;
  }

  .case__headline {
    font-size: 1.375rem;
  }

  .case__headline .label {
    margin: 0 8px 8px 0;
  }

  .case__list {
    gap: 32px;
  }

  .case__item > dt {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 1.25rem;
    margin: 0 0 16px;
  }

  .case__item > dt small {
    font-size: 0.8125rem;
    line-height: 1.8;
  }

  .case__item > dt::before {
    font-size: 0.75rem;
    padding: 4px 12px;
  }

  .case__schedule {
    gap: 12px;
    margin: 0 0 24px;
  }

  .case__schedule-list {
    gap: 20px;
  }

  .case__schedule-list li {
    gap: 8px;
    font-size: 0.8125rem;
  }

  .case__schedule-list li::before {
    width: 20px;
    height: 12px;
  }

  .case__fee {
    padding: 12px 16px;
  }

  .case__fee > dt {
    font-size: 1rem;
  }

  .case__update {
    width: 100%;
  }

  .case__update > dt {
    margin: 0 0 8px;
  }

  .case__update > dt .label {
    font-size: 1rem;
    padding: 2px 10px 2px 11px;
  }

  .case__update > dt .fee {
    font-size: var(--font-size-xs);
  }

  .case__update > dt .fee span {
    font-size: 1.75rem;
  }

  .case__fee > dd {
    flex-direction: column;
    gap: 20px;
  }

  .case__update-list {
    gap: 4px;
  }

  .case__update-list li {
    gap: 4px;
  }

  .case__update-list li > *:not(.number) {
    font-size: min(2.8205vw,.6875rem);
    padding: 4px 6px;
  }

  .case__update-list li .plan {
    width: 110px;
    padding: 4px 5px;
  }

  .case__update-list li dl {
    width: 170px;
  }

  .case__update-list li dl dd {
    font-size: min(2.8205vw,.6875rem);
  }

  .case__update-list li dl dd span {
    font-size: min(4.1026vw,1rem);
    margin: 0 2px 0 0;
  }

  .case__update-list li .number {
    font-size: min(2.8205vw,.6875rem);
    flex-shrink: 0;
  }

  .case__update-list li .number span {
    font-size: min(4.1026vw,1rem);
  }

  .flow__button {
    width: auto;
    margin: 40px 16px 0;
  }
}

.agency-step {
  padding: 180px min(5.8823%, 80px) 120px;
}

.agency-step__head {
  margin: 0 0 100px;
}

.agency-step__head .headline span {
  font-size: 3.25rem;
}

.agency-step__column {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.agency-step__list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style-type: none;
  gap: 80px 0;
}

.agency-step__list li {
  width: 30.9091%;
  min-width: 320px;
  counter-increment: step_number;
}

.agency-step__image {
  box-shadow: var(--lp-shadow);
  line-height: 0;
  margin: 0 0 32px;
  position: relative;
}

.agency-step__image span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  font-family: Futura, "Century Gothic", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.66;
  text-align: center;
  color: #0071ff;
  position: absolute;
  top: -58px;
  left: -22px;
}

.agency-step__image span::after {
  content: counter(step_number);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #0071ff;
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
}

.agency-step__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agency-step__text p + p {
  margin: 8px 0 0;
}

.agency-step__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.agency-step__button {
  width: 320px;
  height: 52px;
  margin: 0 auto;
}

@media (width <= 767px) {
  .agency-step {
    padding: 82px 0 60px;
  }

  .agency-step__head {
    margin: 0 0 24px;
  }

  .agency-step__head .headline span {
    font-size: 1.75rem;
  }

  .agency-step__column {
    gap: 32px;
  }

  .agency-step__list {
    flex-direction: column;
    gap: 68px;
    margin: 0 20px;
  }

  .agency-step__list li {
    width: 100%;
    min-width: inherit;
    position: relative;
  }

  .agency-step__list li + li::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-top: 20px solid #0071ff;
    border-bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: -44px;
    margin: 0 auto;
  }

  .agency-step__image {
    margin: 0 0 12px;
  }

  .agency-step__image span {
    gap: 2px;
    width: 32px;
    top: -38px;
    left: -16px;
  }

  .agency-step__image span::after {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .agency-step__text {
    gap: 8px;
  }

  .agency-step__title {
    font-size: 1.375rem;
  }

  .agency-step__button {
    width: 100%;
    margin: 4px auto 0;
    font-size: 1rem;
  }

}

.faq {
  background: var(--lp-bg-blue);
  padding: 100px min(5.8823%, 80px) 120px;
}

.faq__headline {
  margin: 0 0 80px;
}

.faq__list {
  padding: 40px;
  background: #fff;
}

.faq__list dl + dl {
  border-top: solid 1px #f0f0f0;
}

.faq__list dl dd {
  display: none;
}

.faq__button {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  padding: 20px 64px 20px 20px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

.faq__button[aria-expanded="true"] .faq__button-icon::before {
  transform: rotate(180deg);
}

.faq__button[aria-expanded="true"] .faq__button-icon::after {
  opacity: 0;
}

.faq__button::before {
  content: "Q";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  width: 40px;
  height: 40px;
  background: #f95271;
  border-radius: 50%;
  color: #fff;
}

.faq__button-icon {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.faq__button-icon::before,
.faq__button-icon::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
  position: absolute;
  inset: 0;
  margin: auto;
  transition: 0.3s;
}

.faq__button-icon::after {
  transform: rotate(90deg);
}

.faq__text {
  display: flex;
  gap: 20px;
  padding: 24px 20px 20px;
  background: #fff4f6;
}

.faq__text .link {
  text-decoration: underline;
  transition: opacity 300ms ease;
}

.faq__text .link:hover {
  opacity: 0.7;
}

.faq__text::before {
  content: "A";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  width: 40px;
  height: 40px;
  background: #fff;
  border: solid 1px #f95271;
  border-radius: 50%;
  color: #f95271;
  margin-top: -4px;
}

@media (width <= 767px) {
  .faq {
    padding: 40px 0;
  }

  .faq__headline {
    margin: 0 0 32px;
  }

  .faq__list {
    padding: 0 16px;
  }

  .faq__button {
    gap: 16px;
    padding: 20px 48px 20px 16px;
  }

  .faq__button::before {
    width: 32px;
    height: 32px;
    line-height: 2;
  }

  .faq__button-icon {
    width: 16px;
    height: 16px;
    right: 12px;
  }

  .faq__button-icon::before,
  .faq__button-icon::after {
    height: 1px;
  }

  .faq__button-icon::after {
    transform: rotate(90deg);
  }

  .faq__text {
    padding: 18px 16px 16px;
  }

  .faq__text::before {
    width: 32px;
    height: 32px;
    margin-top: -2px;
    font-size: var(--font-size-xs);
  }
}

/* agency btn-cta */
.btn-cta {
  color: #0071FF;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
}

.cta-top {
  display: flex;
  width: 400px;
  height: 68px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: #ECFF12;
  margin-top: 20px;
  flex-shrink: 0;
}

@media (width >= 768px) {
  .cta-top {
    position: relative;

    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      transition: .3s;
    }

    &:hover {
      text-decoration: none;

      &::before {
        opacity: .3;
      }
    }
  }
}

/* mv-cta */
.mv-cta {
  margin-top: 64px;
  padding: 0 min(5.8823%, 80px);
}

.btn-cta_pc {
  display: none;
}

@media (width <= 767px) {
  .cta-top {
    width: 358px;
    height: 64px;
    font-size: 18px;
  }

  .btn-cta_sp {
    display: none;
  }

  .btn-cta_pc {
    margin: 0 auto;
    display: flex;
    width: 100%;
  }
}

.cta-footer {
  padding: 80px 0;
  background: var(--blue500, #0071FF);
  background-size: cover;
  font-weight: 700;
  text-align: center;

  .cta-footer_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;

    h2{
      color: #fff;
      text-align: center;
      font-family: "Hiragino Kaku Gothic ProN", sans-serif;
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: 150%; /* 54px */
    }

    img {
      border-radius: 6.4px;
      border: 0.889px solid #fff;
      background: #fff;
    }

    a {
      width: 440px;
      height: 80px;
      padding: 10px 108px 12px;
      margin-top: 0;
    }
  }
}

@media (width <= 767px) {
  .cta-footer {
    padding: 50px 40px;

    .cta-footer_inner {
      gap: 32px;

      h2 {
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 150%; /* 36px */
      }

      img {
        width: 280px;
        border-radius: 5.6px;
        border: 0.778px solid #fff;
        background: #fff;
      }

      a {
        width: 310px;
        height: 68px;
        padding: 0;
        font-size: 14px;
      }
    }
  }
}


/*
* campaign
*/

.campaign {
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/lp/bg-main.png") 0% 0% / 100% auto repeat;
    opacity: .04;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  & main {
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* 共通 */
.cp-inner {
  max-width: 67rem;
  margin: 0 auto;
}

.cp-section {
  padding: 4rem;
}

.cp-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3rem;

  & > * {
    width: 100%;
  }
}

.cp-column--narrow {
  gap: 1.5rem;
}

/* headline */
.cp-headline {
  font-size: 2rem;
  font-weight: 700;
}

.cp-headline--secondary {
  font-size: 1.5rem;
}

.cp-headline--border {
  padding: 0 0 0 1.5rem;
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 1rem;
    height: 100%;
    border-radius: 1rem;
    background: var(--blue500);
    position: absolute;
    top: 0;
    left: 0;
  }
}

.cp-headline--bg {
  padding: 0.375rem 1.5rem;
  border-radius: 3rem;
  background: var(--blue500);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

/* text */
.cp-note {
  font-size: 0.875rem;
  line-height: 1.43;
  margin-top: .5rem;
}


/* button */
.cp-primary-button {
  font-size: 1.5rem;
  padding: 0.75rem 1.5rem;
}

/* box */
.cp-box {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-radius: .5rem;
  background: #fff;
  border: solid 1px #D9D9D9;
  padding: 1.5rem;
  max-width: 43rem;
  margin: 0 auto;

  & dt {
    font-weight: 700;
  }

  & dd {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }

  & a {
    color: var(--base-color);
    text-decoration: underline;
  }
}

/* list */
.cp-dot-list {
  list-style-type: none;

  & li {
    display: flex;

    &::before {
      content: "・";
    }
  }
}

/* contents */
.cp-text {
  max-width: 40rem;
  margin: 0 auto;
}

.cp-contents-head {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  line-height: 1.5;
}

/* hero */
.cp-hero {
  padding: 5rem 4rem;
  border-top: solid 1px #F0F0F0;
}

.cp-hero__column {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}

.cp-hero__headline {
  font-size: 3rem;
  font-weight: 700;
  padding: 0 1.5rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;

  & span {
    font-family: Futura, "Century Gothic", sans-serif;
    font-size: 4rem;
    line-height: 1.2;
  }
}

.cp-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.cp-hero__term {
  font-weight: 700;
  color: #fff;
  padding: 0.75rem 1.5rem;
  background: var(--red500);
  margin: 0 0 3rem;

  & dl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    & dd {
      display: flex;
      align-items: center;
      gap: .25rem;
      font-weight: 700;
    }
  }
}

.cp-hero__illust {
  line-height: 0;
  margin-bottom: -1.02rem;
  width: 44.7761%;
  position: relative;

  & img {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 320px;
    width: 100%;
    max-block-size: none;
  }
}

.cp-hero__balloon {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .62rem 1.25rem;
  background: var(--blue500);
  border-radius: 0.5rem;
  max-width: 490px;
  position: absolute;
  right: 0;
  bottom: -8.31rem;

  &::before {
    content: "";
    display: block;
    width: 8.75rem;
    height: 1.25rem;
    background: var(--blue500);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    top: -0.75rem;
    right: .38rem;
  }
}

.cp-hero__balloon-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.43;
  color: #fff;

  & span {
    padding: .25rem;
    background: var(--red500);
    line-height: 1;
  }
}

.cp-hero__balloon-item {
  flex: 1;
  background: #fff;
  padding: .125rem .5rem .5rem;
  color: var(--blue500);

  & dt {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.33;
    text-align: center;
  }

  & dd {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .25rem;
    padding: .375rem 0 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.43;

    & span {
      display: flex;
      align-items: center;
      gap: .25rem;
      font-family: Futura, "Century Gothic", sans-serif;

      &::after {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        background: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8.90918C16 13.3467 12.4062 16.9092 8 16.9092C3.5625 16.9092 0 13.3467 0 8.90918C0 4.50293 3.5625 0.90918 8 0.90918C12.4062 0.90918 16 4.50293 16 8.90918ZM8.28125 12.8779C8.46875 12.9717 8.6875 12.9092 8.84375 12.7842L12.3438 9.28418C12.5312 9.09668 12.5312 8.75293 12.3438 8.56543L8.84375 5.06543C8.6875 4.94043 8.46875 4.87793 8.28125 4.97168C8.09375 5.03418 8 5.22168 8 5.40918V7.40918H5C4.4375 7.40918 4 7.87793 4 8.40918V9.40918C4 9.97168 4.4375 10.4092 5 10.4092H8V12.4092C8 12.6279 8.09375 12.8154 8.28125 12.8779Z" fill="%230071FF"/></svg>') no-repeat center center;
        background-size: 100% 100%;
      }
    }

    & strong {
      font-family: Futura, "Century Gothic", sans-serif;
      font-size: 1.75rem;
      line-height: 1;
    }
  }
}

/* CTA */
.cp-cta-aria {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  background: #0071FF;
  color: #fff;
  padding: 4rem;
  position: relative;
  overflow: hidden;

  > * {
    position: relative;
    z-index: 1;
  }

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/lp/bg-main.png") 0% 0% / 100% auto repeat;
    opacity: .24;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: color-dodge;
  }
}

/* FAQ */
.cp-faq-box {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-radius: .5rem;
  background: #fff;
  border: solid 1px #D9D9D9;
  max-width: 43rem;
  margin: 0 auto;

  & dt {
    & button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: none;
      border: none;
      font-size: 1rem;
      font-weight: 700;
      padding: 1.5rem;
      width: 100%;
      text-align: left;
      cursor: pointer;

      &::after {
        content: "";
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        background: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12.5L10 7.5L5 12.5" stroke="%231E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
        background-size: 100% 100%;
        transform: rotate(180deg);
      }

      &[aria-expanded="true"] {
        padding-bottom: 0;

        &::after {
          transform: none;
        }
      }
    }
  }

  & dd {
    padding: 0 1.5rem 1.5rem;

    &[aria-hidden="true"] {
      display: none;
    }
  }
}

@media (width >= 768px) {
  .cp-hero {
    padding: 5rem 5.3333%;
  }
}

@media (width <= 767px) {
  /* 共通 */
  .cp-inner {
    margin: 0 1rem;
  }

  .cp-section {
    padding: 1rem 0;
  }

  .cp-column {
    gap: 2rem;
  }

  .cp-column--narrow {
    gap: 1.5rem;
  }

  /* contents */
  .cp-text {
    padding: 0 1.5rem;
  }

  /* hero */
  .cp-hero {
    padding: 1rem 0 1.3rem;
  }

  .cp-hero__column {
    align-items: center;
    flex-direction: column;
  }

  .cp-hero__headline {
    font-size: 2rem;
    padding: 0;
    text-align: center;

    & span {
      font-size: 3.25rem;
    }
  }

  .cp-hero__text {
    align-items: center;
    order: 1;
  }

  .cp-hero__term {
    align-self: stretch;
    padding: 0.75rem;
    margin: 0 0 2rem;
  }

  .cp-hero__illust {
    margin: .75rem 0 0;
    order: 2;
    width: 100%;
    text-align: center;

    & img {
      position: static;
      width: auto;
    }
  }

  .cp-hero__balloon {
    order: 0;
    flex-direction: column;
    align-items: center;
    padding: .62rem 1.25rem;
    max-width: 18.4375rem;
    position: relative;
    bottom: 0;
    margin: 0 auto .5rem;

    &::before {
      width: 5rem;
      height: 1.25rem;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      inset: auto 0 -0.5rem;
      margin: auto;
    }
  }

  .cp-hero__balloon-item {
    width: 100%;
    max-width: 221px;
    position: relative;
    z-index: 1;
  }

  /* CTA */
  .cp-cta-aria {
    gap: 2rem;
    padding: 1rem 2.5rem;
    position: relative;
    overflow: hidden;
  }
}