body {
  font-family: "Noto Sans JP", sans-serif;
}

main,
footer {
  width: 100%;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}

.font-oswald {
  font-family: "Oswald", "Noto Sans JP", sans-serif;
}

.font-roboto {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
}

.yellow-marker {
  background: linear-gradient(
    transparent 58%,
    rgba(255, 240, 1, 1) 58%,
    rgba(255, 240, 1, 1) 95%,
    transparent 95%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.bg-deepBlue {
  background-color: rgba(15, 47, 85, 1);
}

/* ---------------------------------------
  common-headings
------------------------------------------ */
.common-headings {
  width: 100%;

  padding-top: min(calc(30 / 750 * 100vw), 30px);
  padding-bottom: min(calc(40 / 750 * 100vw), 40px);

  .title-en {
    font-family: "Oswald", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: min(calc(40 / 750 * 100vw), 40px);
    line-height: 1.49;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .title-jp {
    font-weight: 700;
    font-size: min(calc(66 / 750 * 100vw), 66px);
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
  }
}

/* ---------------------------------------
  CTA
------------------------------------------ */
.cta-link {
  display: block;
  width: min(calc(726 / 750 * 100vw), 726px);
  height: auto;
  margin-inline: auto;
}

/* ---------------------------------------
  FV
------------------------------------------ */
.fv {
  position: relative;
  padding-bottom: min(calc(23 / 750 * 100vw), 23px);
}

.fv .cta-link {
  position: absolute;
  bottom: min(calc(66 / 750 * 100vw), 66px);
  left: 50%;
  transform: translateX(-50%);
}

/* ---------------------------------------
  pill
------------------------------------------ */
.pill {
  .cta-link {
    margin-top: min(calc(60 / 750 * 100vw), 60px);
    margin-bottom: min(calc(30 / 750 * 100vw), 30px);
  }
}

/* ---------------------------------------
  How to use
------------------------------------------ */
.how-to-use {
  padding-top: min(calc(50 / 750 * 100vw), 50px);
  padding-bottom: min(calc(60 / 750 * 100vw), 60px);
  background-color: rgba(215, 227, 240, 1);
  background-image: url("../images/how-to-use-bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  background-blend-mode: multiply;

  .common-headings {
    .title-en {
      color: white;
    }

    .title-jp {
      color: rgba(15, 47, 85, 1);
    }
  }

  .how-to-use-list {
    margin-top: min(calc(7 / 750 * 100vw), 7px);
    padding-inline: min(calc(30 / 750 * 100vw), 30px);
    padding-bottom: min(calc(24 / 750 * 100vw), 24px);
    display: flex;
    flex-direction: column;
    gap: min(calc(16 / 750 * 100vw), 16px);
  }

  .how-to-use-item {
    /* 各ステップ（li） */
    position: relative;
    border-radius: min(calc(20 / 750 * 100vw), 20px);
    overflow: visible;
    background-color: white;
    border: 3px solid rgba(0, 106, 185, 1);
  }

  /* カード外（ボーダー下）に矢印。次カードと干渉しないよう下に余白を多めに */
  .how-to-use-item:not(:last-child) {
    margin-bottom: min(calc(37 / 750 * 100vw), 37px);
  }

  .how-to-use-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    /* 100% = パディング下。+3px で border 外側、+vw でカードとの隙間 */
    top: calc(100% + 3px + min(calc(10 / 750 * 100vw), 10px));
    width: min(calc(56 / 750 * 100vw), 56px);
    height: min(calc(28 / 750 * 100vw), 28px);
    transform: translateX(-50%);
    background: rgba(0, 106, 185, 1);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none;
  }

  .how-to-use-title {
    background: rgba(0, 106, 185, 1);
    color: white;
    padding: min(calc(8 / 750 * 100vw), 8px) min(calc(35 / 750 * 100vw), 35px);
    display: flex;
    align-items: center;
    gap: min(calc(24 / 750 * 100vw), 24px);
    border-radius: min(calc(10 / 750 * 100vw), 10px)
      min(calc(10 / 750 * 100vw), 10px) 0 0;
  }

  .how-to-use-title-number {
    width: min(calc(145 / 750 * 100vw), 145px);
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: min(calc(50 / 750 * 100vw), 50px);
    line-height: 1.6;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: min(calc(13 / 750 * 100vw), 13px);
  }

  .how-to-use-title-number-step {
    font-size: min(calc(21 / 750 * 100vw), 21px);
    letter-spacing: 0.01em;
  }

  .how-to-use-title-text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: min(calc(46 / 750 * 100vw), 46px);
    line-height: 2.14;
    letter-spacing: 0.05em;
    padding-left: min(calc(50 / 750 * 100vw), 50px);
    border-left: 1px solid white;
  }

  .how-to-use-image {
    margin-inline: auto;
  }

  .how-to-use-item:nth-child(1) .how-to-use-image {
    width: min(calc(181 / 750 * 100vw), 181px);
    margin-top: min(calc(48 / 750 * 100vw), 48px);
    margin-left: min(calc(280 / 750 * 100vw), 280px);
  }

  .how-to-use-item:nth-child(2) .how-to-use-image {
    width: min(calc(250 / 750 * 100vw), 250px);
    margin-top: min(calc(30 / 750 * 100vw), 30px);
    margin-bottom: min(calc(46 / 750 * 100vw), 46px);
  }

  .how-to-use-item:nth-child(3) .how-to-use-image {
    width: min(calc(243 / 750 * 100vw), 243px);
    margin-top: min(calc(54 / 750 * 100vw), 54px);
  }

  .how-to-use-item:nth-child(4) .how-to-use-image {
    width: min(calc(355 / 750 * 100vw), 355px);
    margin-top: min(calc(44 / 750 * 100vw), 44px);
    margin-bottom: max(calc(-14 / 750 * 100vw), -14px);
  }

  .how-to-use-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .how-to-use-description {
    font-weight: 700;
    font-size: min(calc(26 / 750 * 100vw), 26px);
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: min(calc(30 / 750 * 100vw), 30px);
    margin-bottom: min(calc(51 / 750 * 100vw), 51px);
  }

  .cta-link {
    margin-top: min(calc(22 / 750 * 100vw), 22px);
  }
}

/* ---------------------------------------
  Voice
------------------------------------------ */
.voice {
  background-image: url("../images/voice-bg.png");
  /* 幅を要素に合わせ、高さは画像の縦横比どおり。縦方向にタイル */
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top center;
  padding-top: min(calc(46 / 750 * 100vw), 46px);
  padding-bottom: min(calc(83 / 750 * 100vw), 83px);

  .common-headings {
    .title-en {
      color: rgba(174, 198, 224, 1);
    }

    .title-jp {
      color: rgba(15, 47, 85, 1);
    }
  }

  .voice-list {
    /* お客様の声リスト（ul） */
    padding-inline: min(calc(30 / 750 * 100vw), 30px);
    padding-top: min(calc(74 / 750 * 100vw), 74px);
    display: flex;
    flex-direction: column;
    gap: min(calc(101 / 750 * 100vw), 101px);
  }

  .voice-item {
    /* 各カード（li） */
    background-color: white;
    box-shadow: min(calc(12 / 750 * 100vw), 12px)
      min(calc(12 / 750 * 100vw), 12px) min(calc(10 / 750 * 100vw), 10px) 0
      rgba(0, 0, 0, 0.07);
    position: relative;
  }

  .voice-number {
    -webkit-text-stroke: 1px rgba(136, 136, 136, 1);
    color: transparent;
    font-family: "Oswald", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: min(calc(80 / 750 * 100vw), 80px);
    line-height: 1;
    letter-spacing: 0.06em;
    position: absolute;
    top: max(calc(-51 / 750 * 100vw), -51px);
    right: min(calc(36 / 750 * 100vw), 36px);
  }

  .voice-item:nth-child(even) .voice-number {
    right: auto;
    left: min(calc(28 / 750 * 100vw), 28px);
  }

  .voice-image {
    /* 写真ラッパー（figure） */
    width: auto;
    height: min(calc(250 / 750 * 100vw), 250px);
    margin-top: max(calc(-20 / 750 * 100vw), -20px);
    margin-left: min(calc(26 / 750 * 100vw), 26px);
    margin-bottom: min(calc(24 / 750 * 100vw), 24px);
  }

  .voice-image img {
    height: 100%;
  }

  /* 偶数番目のimageはml-0 */
  .voice-item:nth-child(even) .voice-image {
    margin-left: 0;
  }

  .voice-description {
    font-size: min(calc(24 / 750 * 100vw), 24px);
    line-height: 1.8;
    letter-spacing: 0.05em;
    padding-inline: min(calc(86 / 750 * 100vw), 86px);
    margin-top: min(calc(62 / 750 * 100vw), 62px);
  }

  .voice-info {
    color: rgba(51, 51, 51, 1);
    margin-top: min(calc(51 / 750 * 100vw), 51px);
    margin-bottom: min(calc(56 / 750 * 100vw), 56px);
    margin-right: min(calc(103 / 750 * 100vw), 103px);

    font-weight: 500;
    font-size: min(calc(24 / 750 * 100vw), 24px);
    line-height: 1.5;
    letter-spacing: 0;
    text-align: right;
  }

  .voice-pill {
    line-height: 1;
    border: 1px solid rgba(51, 51, 51, 1);
    padding-inline: min(calc(11 / 750 * 100vw), 11px);
    margin-left: min(calc(25 / 750 * 100vw), 25px);
  }

  .cta-link {
    margin: min(calc(61 / 750 * 100vw), 61px) auto 0;
  }
}

/* ---------------------------------------
  FAQ
------------------------------------------ */
.faq {
  background-color: rgba(213, 225, 238, 1);
  padding-bottom: min(calc(140 / 750 * 100vw), 140px);

  .common-headings {
    .title-en {
      color: rgba(174, 198, 224, 1);
    }

    .title-jp {
      color: white;
    }
  }

  .faq-list {
    margin-top: min(calc(56 / 750 * 100vw), 56px);
    padding-inline: min(calc(30 / 750 * 100vw), 30px);
    display: flex;
    flex-direction: column;
    gap: min(calc(24 / 750 * 100vw), 24px);
  }

  .faq-item {
    width: 100%;
  }

  .faq-question {
    color: rgba(0, 106, 185, 1);
    background-color: white;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: min(calc(32 / 750 * 100vw), 32px) min(calc(48 / 750 * 100vw), 48px)
      min(calc(32 / 750 * 100vw), 32px) min(calc(24 / 750 * 100vw), 24px);
    border-radius: min(calc(20 / 750 * 100vw), 20px);
    font-weight: 700;
    font-size: min(calc(30 / 750 * 100vw), 30px);
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .faq-question::after {
    content: "";
    flex-shrink: 0;
    align-self: center;
    position: absolute;
    width: min(calc(26 / 750 * 100vw), 26px);
    height: min(calc(15 / 750 * 100vw), 15px);
    top: 50%;
    right: min(calc(24 / 750 * 100vw), 24px);
    transform: translateY(-50%) scaleY(-1);
    background-image: url("../images/faq-arrow.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transform-origin: 50% 50%;
    transition: transform 0.35s ease;
  }

  .faq-question[aria-expanded="true"]::after {
    transform: translateY(-50%);
  }

  .faq-q-char {
    color: rgba(1, 135, 198, 1);
    font-family: "Oswald", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: min(calc(46 / 750 * 100vw), 46px);
    line-height: 1.5;
    letter-spacing: 0;
    margin-right: min(calc(24 / 750 * 100vw), 24px);
  }

  .faq-answer {
    box-sizing: border-box;
    overflow: hidden;
    margin: 0;
    font-weight: 500;
    font-size: min(calc(26 / 750 * 100vw), 26px);
    line-height: 1.5;
    letter-spacing: 0;
    padding: min(calc(24 / 750 * 100vw), 24px);
  }
}

/* ---------------------------------------
  footer
------------------------------------------ */
.footer {
  background-color: rgba(15, 47, 85, 1);
  padding-top: min(calc(40 / 750 * 100vw), 40px);
  padding-bottom: min(calc(40 / 750 * 100vw), 40px);
}

.footer-list {
  display: flex;
  justify-content: center;
}

.footer-list-item {
  color: white;
  font-size: min(calc(16 / 750 * 100vw), 16px);
  line-height: 1.5;
}

.footer-list-item-separator {
  color: white;
  font-size: min(calc(16 / 750 * 100vw), 16px);
}