@charset "UTF-8";

/* ベース */
@media all {
  :root {
    --color-main: #514A9D;
    --color-accent: #4a5afe;
    --color-text: #414141;
    --color-white: #ffffff;
    --grad-dark-lr: linear-gradient(90deg, #514A9D 0%, #123880 54%, #528DD2 100%);
    --grad-dark-rl: linear-gradient(270deg, #514A9D 0%, #123880 54%, #528DD2 100%);
    --grad-light: linear-gradient(135deg, #CFCEFF 0%, #67A1DC 100%);
    --font-default: 'Noto Sans JP', sans-serif;
    --font-en: 'Jost', sans-serif;
    --shadow-main: drop-shadow(0 0 10px rgba(81, 74, 157, 0.25));
    --shadow-main-hard: drop-shadow(0 0 10px rgba(81, 74, 157, 1));
    --glow-white: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #fff);
  }
}

/* レイアウト */
@media all {
  html {
    /* 100vw はスクロールバー分だけ幅が膨らみはみ出すことがある */
    font-size: calc(100svw / 7.5);
    font-size: calc(100vw / 7.5);
    overflow-x: clip;
  }

  @media (min-width: 750px) {
    html {
      font-size: 100px;
    }
  }

  body {
    background-color: #f0f2f5;
    color: var(--color-text);
    font-family: var(--font-default);
    line-height: 1.8;
    font-size: 0.27rem;
    overflow-x: clip;
  }

  #wrapper {
    position: relative;
    width: 100%;
    max-width: 7.5rem;
    margin-inline: auto;
    background-color: #fff;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
  }
}

/* パーツ */
@media all {
  img {
    display: block;
    width: 100%;
    height: auto;
  }

  .font-en {
    font-family: var(--font-en);
  }

  /* ダークグラデ: .grad-dark-lr | .grad-dark-rl + .grad-text | .grad-box */
  .grad-dark-lr {
    --grad-dark-current: var(--grad-dark-lr);
  }

  .grad-dark-rl {
    --grad-dark-current: var(--grad-dark-rl);
  }

  .grad-text,
  .grad-light-text {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .grad-text {
    background-image: var(--grad-dark-current, var(--grad-dark-lr));
  }

  .grad-box,
  .grad-light-box {
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .grad-box {
    background-image: var(--grad-dark-current, var(--grad-dark-lr));
  }

  .grad-light-text {
    background-image: var(--grad-light);
  }

  .grad-light-box {
    background-image: var(--grad-light);
  }

  /* ライトグラデ背景（改行ごとに行単位で表示） */
  .grad-light-mark {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-image: var(--grad-light);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--color-white);
    -webkit-text-fill-color: currentColor;
    padding: 0.04rem 0.1rem;
  }

  /* 単色背景（改行ごとに行単位で表示） */
  .mark-dark {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-color: var(--color-text);
    color: var(--color-white);
    -webkit-text-fill-color: currentColor;
    padding: 0.04rem 0.1rem;
  }

  .shadow-main {
    filter: var(--shadow-main);
  }

  .shadow-main-hard {
    filter: var(--shadow-main-hard);
  }

  .shadow-glow-white {
    filter: var(--glow-white);
  }

  .shadow-main-glow-white {
    filter: var(--shadow-main) var(--glow-white);
  }
}

/* ヘッダー・フッター */
@media all {
  header h1 {
    position: absolute;
    top: 0.28rem;
    left: 0.44rem;
    width: 1rem;
    z-index: 1000;
  }

}

/* メイン */
@media all {
  main {
    width: 100%;
  }

  .hero {
    background-image: url(../img/bg_hero.png);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }

  .hero01,
  .hero05 {
    width: 100%;
  }

  .hero02 {
    width: 2.26rem;
    margin-left: 0.5rem;
  }

  .hero03 {
    width: 5.87rem;
  }

  .hero04 {
    width: 6.9rem;
    margin-inline: auto;
    margin-bottom: 0.32rem;
  }

  .realistic {
    background-image: url(../img/bg_realistic.png);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: .48rem;
    padding-bottom: 1rem;
  }

  .realistic01 {
    width: 6.4rem;
    margin-inline: auto;
  }

  .realistic02 {
    width: 100%;
  }

  .realistic03 {
    width: 5rem;
    margin-inline: auto;
    margin-top: -0.36rem;
  }

  .realistic04 {
    width: 100%;
    margin-top: -0.36rem;
    margin-bottom: 0.16rem;
  }

  .realistic05 {
    width: 100%;
    padding-inline: .56rem;
    font-weight: 500;
    color: #fff;
  }

  .realistic05 span {
    font-size: .3rem;
  }

  .reason {
    position: relative;
    background-image:
      url(../img/bg_reason01.png),
      url(../img/bg_reason01.png),
      url(../img/bg_reason01.png),
      url(../img/bg_reason01.png),
      url(../img/bg_reason01.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position:
      center 0.88rem,
      center 13.93rem,
      center 19.38rem,
      center 32.43rem,
      center 47.31rem;
    margin-top: -0.9rem;
    padding-bottom: 1.36rem;
  }

  .reason::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.56rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .reason01 {
    width: 6rem;
    margin-inline: auto;
  }

  .reason02 {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-size: .32rem;
    font-weight: 500;
  }

  .reason02 span:last-child {
    font-size: .48rem;
  }

  .reason_sec_wrap {
    margin-top: -0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.48rem;
  }

  .reason_sec_title {
    z-index: 10;
    position: relative;
  }

  .reason_sec_content {
    width: 6.8rem;
    padding-block: .76rem .36rem;
    background-color: #fff;
    margin-top: -0.8rem;
  }

  .reason_sec_right .reason_sec_content {
    border-radius: .56rem 0 0 0;
    margin-left: .7rem;
    padding-left: .54rem;
  }

  .reason_sec_right .reason_sec_text {
    padding-right: .36rem;
  }

  .reason_sec_left .reason_sec_content {
    border-radius: 0 .56rem 0 0;
    margin-right: .7rem;
    padding-right: .54rem;
  }

  .reason_sec_left .reason_sec_text {
    padding-left: .36rem;
  }

  .reason_sec_text {
    font-weight: 500;
  }

  .reason_sec_text span {
    font-size: .3rem;
  }

  .reason_sec_img {
    margin-bottom: .32rem;
  }

  .reason_sec2 .reason_sec_content,
  .reason_sec3 .reason_sec_content,
  .reason_sec6 .reason_sec_content {
    padding-block: 1.6rem .36rem;
    margin-top: -1.15rem;
  }

  .reason_sec4 .reason_sec_content {
    margin-top: -0.55rem;
  }

  .reason_sec5 .reason_sec_content {
    margin-top: -0.6rem;
  }

  .step {
    margin-top: -0.56rem;
    z-index: 10;
    position: relative;
  }

  .step01 {
    margin-bottom: .38rem;
  }

  .step_sec_wrap {
    position: relative;
    padding-block: .25rem 1.1rem;
    padding-inline: .32rem;
    display: flex;
    flex-direction: column;
    gap: .32rem;
  }

  .step_sec_wrap>* {
    z-index: 1;
    position: relative;
  }
  .step_sec_wrap::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 3.54rem;
    height: 100%;
    background-image: var(--grad-light);
    pointer-events: none;
    z-index: 0;
  }
  .step_sec_number {
    color: #fff;
    font-size: .56rem;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: .08rem;
  }
  .step_sec_number span {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex-shrink: 0;
    width: fit-content;
    font-stretch: normal;
    gap: .16rem;
    margin-right: .16rem;
  }

  .step_sec_number span::after {
    content: "";
    display: block;
    width: .88rem;
    height: .02rem;
    background-color: #fff;
  }
  .step_sec_content {
    position: relative;
    display: flow-root;
    background-color: #fff;
    padding-block: 0 0.4rem;
    padding-inline: 0.4rem 0.25rem;
    border-radius: 0.2rem;
    width: 5.96rem;
    margin-inline: auto;
    margin-top: -2rem;
  }

  .step_sec_title {
    transform: translateY(-0.3rem);
    margin-bottom: -0.22rem;
    width: 4.78rem;
  }
  .step_sec_text {
    font-weight: 500;
  }

  .quality {
    margin-top: -0.7rem;
    z-index: 10;
    position: relative;
  }
  .quality_sec1 {
    background-image: url(../img/bg_quality01.png);
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
  }
  .quality_sec2 {
    position: relative;
    padding: 0.44rem 0.32rem 0.72rem;
  }

  .quality_sec2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0.03rem;
    height: 0.8rem;
    transform: translateX(-50%) translateY(50%);
    background: linear-gradient(180deg, #528DD2 0%, #123880 54%, #514A9D 100%);
    pointer-events: none;
  }
  .quality03 {
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.03em;
  }
  .quality03 span {
    font-size: .3rem;
  }

    .counseling {
      padding-block: .84rem 1.42rem;
      background-image: url(../img/bg_counseling.png);
      background-size: 100% auto;
      background-position: bottom center;
      background-repeat: no-repeat;
    }
    .counseling01 {
      margin-bottom: .4rem;
    }
    .counseling02 {
      font-weight: 500;
      letter-spacing: 0.05em;
      padding-inline: .32rem;
      font-size: .32rem;
    }
    .counseling04 {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.2;
      gap: .14rem;
      font-weight: 500;
      font-size: .32rem;
      letter-spacing: .05em;
    }
    .counseling04 .grad-text {
      font-size: .4rem;
    }
    .narrowspace {
      margin-top: -0.1rem;
    }

    .promise {
      padding-block: .32rem .8rem;
      background-image: url(../img/bg_promise.png);
      background-size: 100% auto;
      background-position: bottom center;
      background-repeat: no-repeat;
      position: relative;
    }
    .promise::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 0.56rem;
      background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
      pointer-events: none;
      z-index: 1;
    }
    .promise01 {
      margin-bottom: .1rem;
    }
    .promise_sec_wrap {
      display: flex;
      flex-direction: column;
      gap: .6rem;
    }
    .promise_sec {
      width: 8.25rem;
      background-color: #fff;
      border-radius: 2.25rem;
      margin-left: -0.375rem;
      padding:0 0.375rem 0.64rem;
    }
    .promise_sec_title {
      margin-top: -0.46rem;
      margin-bottom: .16rem;
    }
    .promise_sec_text {
      padding-inline: 0.84rem;
      font-weight: 500;
      letter-spacing: .03em;
    }

    .cta {
      text-align: center;
      padding-block: 0 .64rem;
      background-image: url(../img/bg_cta.png);
      background-size: 100% auto;
      background-position: bottom center;
      background-repeat: no-repeat;
      font-size: .3rem;
      font-weight: 500;
      letter-spacing: .12em;
    }
    .cta .innerWrap>p {
      margin-bottom: .5rem;
    }

    footer {
      padding-block: .8rem;
      font-size: .16rem;
      text-align: center;
    }
    footer ul {
      display: flex;
      gap: .56rem;
      justify-content: center;
      margin-bottom: .24rem;
      font-size: .19rem;
    }
}