/* ============================================
   トップページスタイル
   ============================================ */
.front-page {
  scroll-padding-top: var(--size-header-height);
  /* ヒーローセクション */
  .hero {
    padding: var(--size-padding);
    background-color: var(--color-base);
    margin-top: calc(-1 * var(--size-header-height));
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    --section-inner-size: unset;
    background-image: linear-gradient(
      to bottom,
      var(--color-bg-primary) 50%,
      #ffecd8
    );
  }
  @media screen and (max-width: 1040px) {
    .hero__inner {
      padding-bottom: calc(330 * var(--px));
    }
  }

  .hero__content {
    width: 100%;
    max-width: var(--size-container);
    margin-inline: auto;
    padding-inline: var(--size-padding);
    position: relative;
  }
  @media screen and (max-width: 1040px) {
    .hero__content {
      padding-inline: 0;
    }
  }

  .hero__textarea {
    width: calc(680 * var(--px));
    margin-inline: 0 auto;
    padding-block: calc(170 * var(--px)) calc(230 * var(--px));
    position: relative;
    z-index: 1;

    &::before {
      content: "";
      background-image: url(../images/hero__textarea-before.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: calc(243 * var(--px));
      height: calc(393 * var(--px));
      position: absolute;
      bottom: 0;
      left: -130px;
    }
    &::after {
      content: "";
      background-image: url(../images/hero__textarea-after.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: calc(297 * var(--px));
      height: calc(400 * var(--px));
      position: absolute;
      bottom: 0;
      right: -182px;
    }
  }
  @media screen and (max-width: 1040px) {
    .hero__textarea {
      padding-block: calc(150 * var(--px)) calc(70 * var(--px));
      &::before {
        left: calc(-50 * var(--px));
      }
      &::after {
        right: calc(-90 * var(--px));
      }
      &::before,
      &::after {
        bottom: calc(-360 * var(--px));
      }
    }
  }

  .hero__title {
    background-image: url(../images/hero__title.svg);
    width: calc((618 * var(--px)));
    aspect-ratio: 618 / 95;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    color: transparent;
    margin-inline: auto;
    margin-bottom: calc(20 * var(--px));
  }

  .hero__subtitle {
    font-size: calc(42 * var(--px));
    line-height: 1.4;
    text-align: center;
    font-weight: 900;
    margin-bottom: calc(30 * var(--px));
    .sub1 {
      font-size: 1.2em;
      line-height: 1.4;
      strong {
        color: var(--color-secondary);
        font-size: 1.2em;
      }
    }
  }

  .hero__cta {
    display: block;
    width: 536px;
    margin-inline: auto;
    background-color: var(--color-base);
    border: calc(3 * var(--px)) solid var(--color-primary);
    box-shadow: calc(6 * var(--px)) calc(6 * var(--px)) 0 var(--color-primary);
    padding: 0.5em 0.6em;
    font-size: calc(34 * var(--px));
    font-weight: 700;
    color: var(--color-secondary);
    transition: translate 0.3s ease, box-shadow 0.3s ease;

    .sub1 {
      font-size: 0.55em;
      color: var(--color-primary);
      font-weight: 700;
      display: inline-block;
      vertical-align: 0.3em;
    }
    .sub2 {
      letter-spacing: -0.2em;
    }
    .sub3 {
      letter-spacing: -0.1em;
    }

    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: calc(20 * var(--px));
      transform: translateY(-50%);
      width: calc(20 * var(--px));
      height: calc(20 * var(--px));
      background-image: url(../images/icon-arrow-primary.svg);
      background-repeat: no-repeat;
      background-size: contain;
    }

    &:hover {
      translate: calc(6 * var(--px)) calc(6 * var(--px));
      box-shadow: none;
    }
  }
  @media screen and (max-width: 1040px) {
    .hero__cta {
      width: calc(580 * var(--px));

      .sub1 {
        font-size: 0.65em;
        vertical-align: 0.2em;
      }
    }
  }

  .hero__images {
    position: absolute;
    top: -20px;
    right: -100px;
    overflow: hidden;
    height: calc(100% + 180 * var(--px));
    /* max-height: calc(800 * var(--px)); */

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 101%;
      height: 101%;
      background-image: linear-gradient(
        to bottom,
        transparent 85%,
        var(--color-base) 92%
      );
      z-index: 1;
      pointer-events: none;
    }
  }
  @media screen and (max-width: 1040px) {
    .hero__images {
      position: relative;
      height: auto;
      max-height: none;
      overflow: hidden;
      width: calc(800 * var(--px));
      right: calc(60 * var(--px));
      &::after {
        display: none;
      }
    }
  }

  .hero__images-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  @media screen and (max-width: 1040px) {
    .hero__images-wrapper {
      overflow: hidden;
      width: 100%;
    }
  }

  .hero__images-inner {
    display: flex;
    flex-direction: column;
    /* 4枚分の高さ（画像高さ + マージン）をCSS変数で定義 */
    --image-height: calc(250 * var(--px));
    --image-margin: calc(20 * var(--px));
    --four-images-height: calc((var(--image-height) + var(--image-margin)) * 4);
    animation: heroImagesScrollVertical 40s linear infinite;
    will-change: transform;
  }

  @media screen and (max-width: 1040px) {
    .hero__images-inner {
      flex-direction: row;
      /* 4枚分の幅（画像幅 + マージン）をCSS変数で定義 */
      --image-width: calc(350 * var(--px));
      --image-margin: calc(20 * var(--px));
      --four-images-width: calc((var(--image-width) + var(--image-margin)) * 4);
      animation: heroImagesScrollHorizontal 30s linear infinite;
      will-change: transform;
    }
  }

  .hero__image {
    display: block;
    width: calc(375 * var(--px));
    aspect-ratio: 375 / 250;
    height: calc(250 * var(--px)); /* aspect-ratioに基づく固定高さ */
    margin-bottom: calc(20 * var(--px));
    flex-shrink: 0;
    object-fit: cover;
  }
  
  /* すべての画像のマージンを維持（translateY(-50%)で正確に4枚分移動するため） */
  
  @media screen and (max-width: 1040px) {
    .hero__image {
      width: calc(350 * var(--px));
      aspect-ratio: 375 / 250;
      height: calc(350 * var(--px) * 250 / 375); /* aspect-ratioに基づく固定高さ */
      margin-bottom: 0;
      margin-right: calc(20 * var(--px));
    }
    
    /* すべての画像のマージンを維持（translateX(-50%)で正確に4枚分移動するため、PC版と同じ方法） */
  }

  .hero__features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(25 * var(--px));
    position: relative;
    z-index: 2;
    margin-top: -80px;
    padding-bottom: calc(100 * var(--px));
  }
  @media screen and (max-width: 1040px) {
    .hero__features {
      gap: calc(35 * var(--px)) 0;
      justify-content: space-between;
      max-width: var(--size-container);
      margin-inline: auto;
      margin-top: calc(-310 * var(--px));
      /* padding-bottom: 0; */
    }
  }

  .hero__feature-item {
    width: calc(315 * var(--px));
    aspect-ratio: 1 / 1;
    background-color: var(--color-base);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: calc(10 * var(--px));
    border: 5px solid var(--color-primary);

    &:nth-child(1) {
      --icon-width: calc(140 * var(--px));
    }
    &:nth-child(2) {
      --icon-width: calc(177 * var(--px));
    }
    &:nth-child(3) {
      --icon-width: calc(288 * var(--px));
    }
    &:nth-child(4) {
      --icon-width: calc(94 * var(--px));
    }
    &:nth-child(5) {
      --icon-width: calc(195 * var(--px));
    }
  }
  @media screen and (max-width: 1040px) {
    .hero__feature-item {
      width: calc(50% - 35 * var(--px) / 2);
      &:nth-child(1) {
        --icon-width: calc(150 * var(--px));
        aspect-ratio: 670 / 226;
        width: 100%;
        flex-direction: row;
        gap: 2em;
      }
      &:nth-child(2) {
        --icon-width: calc(200 * var(--px));
      }
      &:nth-child(3) {
        --icon-width: calc(300 * var(--px));
      }
      &:nth-child(4) {
      }
      &:nth-child(5) {
      }
    }
  }

  .hero__feature-text {
    font-size: calc(26 * var(--px));
    line-height: 1.3;
    font-weight: 700;
    text-align: center;

    strong {
      font-size: 1.2em;
      line-height: 1.2;
      color: var(--color-secondary);
    }
  }
  @media screen and (max-width: 1040px) {
    .hero__feature-text {
      font-size: calc(28 * var(--px));
    }
  }

  .hero__feature-icon {
    width: var(--icon-width);
    height: auto;
  }

  /* キャンセル回収くんとは */
  .about {
    background-image: linear-gradient(
      to bottom,
      var(--color-base),
      var(--color-bg-secondary) 30%
    );
    padding-bottom: calc(50 * var(--px));

    .title__sub {
      text-align: left;
    }

    .title__main {
      text-align: left;
    }
  }

  .about__inner {
    --section-inner-size: var(--size-container);
  }
  @media screen and (max-width: 1040px) {
    .about__inner {
      --section-inner-size: var(--size-container-narrow);
    }
  }

  .about__title {
    margin-bottom: calc(40 * var(--px));
  }

  .about__content {
    position: relative;
  }

  .about__textarea {
    position: relative;
    z-index: 1;

    &::after {
      content: "";
      position: absolute;
      bottom: -100px;
      right: 110px;
      width: 308px;
      height: 614px;
      background-image: url(../images/about__textarea-after.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
  @media screen and (max-width: 1040px) {
    .about__textarea {
      &::after {
        display: none;
      }
    }
  }

  .about__text1 {
    font-size: calc(26 * var(--px));
    line-height: 1.6;
    margin-bottom: calc(90 * var(--px));
  }
  @media screen and (max-width: 1040px) {
    .about__text1 {
      font-size: calc(28 * var(--px));
      margin-bottom: calc(40 * var(--px));
    }
  }

  .about__text2 {
    font-size: calc(24 * var(--px));
    line-height: 1.7;
    margin-bottom: calc(40 * var(--px));

    .sub1 {
      font-size: calc(34 * var(--px));
      line-height: 1.4;

      strong {
        font-size: 1.25em;
        color: var(--color-secondary);
      }
    }
  }
  @media screen and (max-width: 1040px) {
    .about__text2 {
      font-size: calc(28 * var(--px));
    }
  }

  .about__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
  @media screen and (max-width: 1040px) {
    .about__image {
      display: none;
    }
  }

  .about__image1 {
    width: 263px;
    aspect-ratio: 3 / 4;
    position: absolute;
    top: -280px;
    right: calc(50% - 720px);
    object-fit: cover;
    object-position: 70%;
  }

  .about__image2 {
    width: 338px;
    aspect-ratio: 1000 / 667;
    position: absolute;
    top: -115px;
    right: calc(50% - 400px);
  }

  .about__image3 {
    width: 337px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 170px;
    right: calc(50% - 675px);
    object-fit: cover;
  }

  /* そのドタキャン、あきらめていませんか？ */
  .problem {
    background-color: var(--color-bg-secondary);
  }

  .problem__inner {
    --section-inner-size: unset;
    padding-inline: 0;
  }

  .problem__title {
    max-width: var(--size-container);
    margin-inline: auto;
    font-size: calc(93 * var(--px));
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: calc(60 * var(--px));

    .overdot {
      --color-overdot: var(--color-primary);
      &::before {
        width: 0.15em;
        height: 0.15em;
        top: 0.1em;
      }
    }
    .sub1 {
      font-size: 0.77em;
    }
  }
  @media screen and (max-width: 1040px) {
    .problem__title {
      line-height: 1;
      text-align: center;
      margin-bottom: calc(20 * var(--px));
      .overdot {
        &::before {
          top: -0.1em;
        }
      }
      .sub2 {
        font-size: 0.65em;
      }
    }
  }

  .problem__content {
    background-color: var(--color-primary);
    position: relative;
    padding-block: calc(115 * var(--px)) calc(55 * var(--px));

    &::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: calc(220 * var(--px));
      background-color: var(--color-bg-secondary);
      clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100 * var(--px)),
        50% 100%,
        0 calc(100 * var(--px))
      );
    }
    &::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: calc(160 * var(--px));
      background-color: var(--color-base);
      clip-path: polygon(
        0 0,
        50% calc(100 * var(--px)),
        100% 0,
        100% 100%,
        0 100%
      );
    }
  }

  .problem__speech-bubbles {
    width: 100%;
    height: 890px;
    max-width: 1220px;

    margin-inline: auto;
    padding-inline: calc(40 * var(--px));
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  @media screen and (max-width: 1040px) {
    .problem__speech-bubbles {
      height: auto;
      position: relative;
      transform: unset;
      padding-inline: 0;
      top: calc(-100 * var(--px));
      left: 0;
    }
  }

  .problem__bubble {
    display: grid;
    place-items: center;
    font-size: calc(25 * var(--px));
    line-height: 1.5;
    letter-spacing: -0.05em;
    font-weight: 700;
    text-align: center;
    height: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;

    &:nth-child(1) {
      width: calc(500 * var(--px));
      aspect-ratio: 500 / 445;
      background-image: url(../images/problem__bubble-bg1.svg);
      top: 60px;
      left: 80px;
    }
    &:nth-child(2) {
      width: calc(520 * var(--px));
      aspect-ratio: 520 / 476;
      background-image: url(../images/problem__bubble-bg2.svg);
      top: -10px;
      right: 60px;
    }
    &:nth-child(3) {
      width: calc(445 * var(--px));
      aspect-ratio: 445 / 392;
      background-image: url(../images/problem__bubble-bg3.svg);
      padding-right: 2%;
      bottom: 0;
      left: 0;
    }
    &:nth-child(4) {
      width: calc(562 * var(--px));
      aspect-ratio: 464 / 460;
      background-image: url(../images/problem__bubble-bg4.svg);
      padding-left: 4%;
      bottom: -30px;
      right: -80px;
    }

    .accent {
      color: var(--color-secondary);
    }
    strong {
      font-size: 1.4em;
    }
  }
  @media screen and (max-width: 1200px) {
    .problem__bubble {
      font-size: calc(20 * var(--px));
      &:nth-child(1) {
        width: calc(410 * var(--px));
      }
      &:nth-child(2) {
        width: calc(430 * var(--px));
      }
      &:nth-child(3) {
        width: calc(365 * var(--px));
        bottom: 140px;
      }
      &:nth-child(4) {
        width: calc(462 * var(--px));
        padding-left: 4%;
        bottom: 90px;
        right: -30px;
      }
    }
  }
  @media screen and (max-width: 1040px) {
    .problem__bubble {
      position: relative;
      font-size: calc(28 * var(--px));
      &:nth-child(1) {
        width: calc(535 * var(--px));
        top: 0;
        left: calc(15 * var(--px));
      }
      &:nth-child(2) {
        width: calc(557 * var(--px));
        top: 0;
        margin-top: calc(-30 * var(--px));
        right: calc(-210 * var(--px));
      }
      &:nth-child(3) {
        width: calc(505 * var(--px));
        aspect-ratio: 445 / 392;
        background-image: url(../images/problem__bubble-bg1.svg);
        padding-right: 0%;
        bottom: 0;
        left: calc(-50 * var(--px));
        margin-top: calc(-60 * var(--px));
      }
      &:nth-child(4) {
        width: calc(520 * var(--px));
        aspect-ratio: 464 / 460;
        padding-left: 0%;
        bottom: 0;
        right: calc(-290 * var(--px));
        background-image: url(../images/problem__bubble-bg2.svg);
        margin-top: calc(-120 * var(--px));
      }
      strong {
        font-size: 1.3em;
      }
    }
  }

  .problem__image {
    width: 1440px;
    height: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  @media screen and (max-width: 1200px) {
    .problem__image {
      width: 1200px;
    }
  }
  @media screen and (max-width: 1040px) {
    .problem__image {
      width: calc(470 * var(--px));
      height: calc(700 * var(--px));
      left: 0;
      bottom: calc(-40 * var(--px));
      margin-top: calc(-600 * var(--px));
      transform: unset;
      overflow: hidden;
      position: relative;
      img {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(1440 * var(--px));
        height: auto;
      }
    }
  }

  .problem__solution-area {
    background-color: var(--color-base);
    padding-bottom: calc(160 * var(--px));
  }
  @media screen and (max-width: 1040px) {
    .problem__solution-area {
      padding-bottom: calc(130 * var(--px));
    }
  }
  .problem__description {
    font-size: calc(39 * var(--px));
    font-weight: 500;
    line-height: 1.8;
    text-align: center;
    margin-bottom: calc(40 * var(--px));

    .sub1 {
      font-weight: 700;
      display: inline;
      padding-inline: 0.8em;
      background-color: var(--color-primary);
      color: var(--color-base);
      margin-right: 0.3em;
    }
  }
  @media screen and (max-width: 1040px) {
    .problem__description {
      line-height: 1.5;
    }
  }

  .problem__solution {
    font-size: calc(53 * var(--px));
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    rotate: -3deg;
    width: fit-content;
    margin-inline: auto;
    strong {
      color: var(--color-secondary);
      font-size: 1.4em;
    }
    position: relative;
    &::before {
      content: "";
      position: absolute;
      bottom: -40px;
      left: 0;
      width: calc(874 * var(--px));
      height: calc(87 * var(--px));
      background-image: url(../images/problem__solution.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      rotate: 4deg;
      z-index: -1;
    }
  }
  @media screen and (max-width: 1040px) {
    .problem__solution {
      strong {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          bottom: calc(-40 * var(--px));
          left: 0;
          width: 105%;
          height: calc(87 * var(--px));
          background-image: url(../images/problem__solution.svg);
          background-repeat: no-repeat;
          background-size: calc(874 * var(--px));
          background-position: center;
          rotate: 4deg;
          z-index: -1;
        }
      }
      &::before {
        content: none;
      }
    }
  }

  /* 対応可能な業種・特徴 */
  .features {
    padding-block: calc(90 * var(--px));
    background-color: var(--color-secondary);
  }

  .features__inner {
    --section-inner-size: var(--size-container-wide);
  }
  @media screen and (max-width: 1040px) {
    .features__inner {
      --section-inner-size: var(--size-container);
    }
  }

  .features__title {
    color: var(--color-base);
    margin-bottom: calc(60 * var(--px));
  }

  .features__industries {
    background-color: var(--color-base);
    width: min(80%, 637px);
    margin-bottom: calc(95 * var(--px));
    box-shadow: calc(20 * var(--px)) calc(20 * var(--px)) 0 var(--color-primary);
    padding-top: calc(30 * var(--px));
    padding-bottom: calc(40 * var(--px));
    padding-left: calc(82 * var(--px));
    padding-right: calc(32 * var(--px));
    position: relative;
    left: calc(50% - 156px);
  }
  @media screen and (max-width: 1040px) {
    .features__industries {
      width: 100%;
      margin-bottom: calc(90 * var(--px));
      box-shadow: calc(10 * var(--px)) calc(20 * var(--px)) 0
        var(--color-primary);
      padding-top: calc(80 * var(--px));
      padding-bottom: calc(100 * var(--px));
      padding-left: calc(110 * var(--px));
      padding-right: calc(60 * var(--px));
      left: 0;
    }
  }

  .features__industry-list {
    li {
      padding-block: calc(10 * var(--px));
      padding-left: calc(60 * var(--px));
      padding-right: calc(55 * var(--px));
      &:not(:last-child) {
        border-bottom: calc(2 * var(--px)) dashed
          color-mix(in srgb, var(--color-primary) 36%, transparent);
      }
      position: relative;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: calc(30 * var(--px));
        transform: translateY(-50%);
        width: calc(45 * var(--px));
        height: calc(45 * var(--px));
        background-color: var(--color-primary);
        border-radius: 50%;
      }
      &::after {
        content: "";
        position: absolute;
        left: calc(26 * var(--px));
        top: calc(32 * var(--px));
        transform: translateY(-50%);
        width: calc(20 * var(--px));
        height: calc(10 * var(--px));
        border-left: calc(4 * var(--px)) solid var(--color-base);
        border-bottom: calc(4 * var(--px)) solid var(--color-base);
        rotate: -45deg;
        translate: -50% -50%;
      }
    }
  }

  .features__industry-title {
    font-size: calc(32 * var(--px));
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    margin-bottom: 0.3em;
  }

  .features__industry-text {
    font-size: calc(24 * var(--px));
  }
  @media screen and (max-width: 1040px) {
    .features__industry-text {
      font-size: calc(28 * var(--px));
    }
  }

  .features__main {
    background-color: var(--color-base);
    border-radius: calc(20 * var(--px)) calc(20 * var(--px)) 0 0;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      bottom: 100%;
      left: calc(50% - 600 * var(--px));
      width: calc(555 * var(--px));
      height: calc(638 * var(--px));
      background-image: url(../images/features__main-before.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
  @media screen and (max-width: 1040px) {
    .features__main {
      z-index: 1;
      &::before {
        content: "";
        position: absolute;
        bottom: calc(100% - 140 * var(--px));
        left: calc(50% - 430 * var(--px));
        width: calc(405 * var(--px));
        height: calc(468 * var(--px));
        background-image: url(../images/features__main-before.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        z-index: -2;
      }
      &::after {
        content: "";
        width: calc(405 * var(--px));
        height: calc(80 * var(--px));
        background-image: linear-gradient(
          to bottom,
          transparent,
          var(--color-secondary)
        );
        position: absolute;
        bottom: calc(100% - 140 * var(--px));
        left: calc(50% - 430 * var(--px));

        z-index: -1;
      }
    }
  }
  .features__subtitlearea {
    background-color: var(--color-primary);
    border-radius: calc(20 * var(--px)) calc(20 * var(--px)) 0 0;
    padding-block: calc(40 * var(--px));
  }
  .features__subtitle {
    color: var(--color-base);
    margin-bottom: 0;
  }

  .features__grid {
    max-width: var(--size-container);
    margin-inline: auto;
    padding-top: calc(120 * var(--px));
    padding-bottom: calc(112 * var(--px));
    padding-inline: var(--size-padding);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(40 * var(--px));

    counter-reset: features-item;
  }
  @media screen and (max-width: 1040px) {
    .features__grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: calc(48 * var(--px));
      padding-top: calc(95 * var(--px));
      padding-bottom: calc(50 * var(--px));
    }
  }

  .features__item {
    background-color: var(--color-bg-secondary);

    position: relative;
    counter-increment: features-item;
    &::after {
      content: "";
      position: absolute;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      z-index: 1;
    }
    &:nth-child(1) {
      &::after {
        top: calc(-50 * var(--px));
        right: calc(-10 * var(--px));
        width: calc(279 * var(--px));
        height: calc(296 * var(--px));
        background-image: url(../images/features__industry-list1.svg);
      }
    }
    &:nth-child(2) {
      &::after {
        top: calc(-40 * var(--px));
        right: calc(-10 * var(--px));
        width: calc(279 * var(--px));
        height: calc(276 * var(--px));
        background-image: url(../images/features__industry-list2.svg);
      }
    }
    &:nth-child(3) {
      &::after {
        top: calc(-30 * var(--px));
        right: calc(0 * var(--px));
        width: calc(305 * var(--px));
        height: calc(230 * var(--px));
        background-image: url(../images/features__industry-list3.svg);
      }
    }
    &:nth-child(4) {
      &::after {
        top: calc(-20 * var(--px));
        right: calc(30 * var(--px));
        width: calc(190 * var(--px));
        height: calc(220 * var(--px));
        background-image: url(../images/features__industry-list4.svg);
      }
    }
  }
  @media screen and (max-width: 1040px) {
    .features__item {
      background-color: var(--color-bg-secondary);

      position: relative;
      counter-increment: features-item;
      &::after {
        content: "";
        position: absolute;
        background-repeat: no-repeat;
        z-index: 1;
      }
      &:nth-child(1) {
        &::after {
          top: calc(-70 * var(--px));
          right: calc(-10 * var(--px));
          width: calc(329 * var(--px));
          height: calc(346 * var(--px));
        }
      }
      &:nth-child(2) {
        &::after {
          top: calc(-40 * var(--px));
          right: calc(0 * var(--px));
          width: calc(339 * var(--px));
          height: calc(316 * var(--px));
        }
      }
      &:nth-child(3) {
        &::after {
          top: calc(-30 * var(--px));
          right: calc(10 * var(--px));
          width: calc(405 * var(--px));
          height: calc(300 * var(--px));
        }
      }
      &:nth-child(4) {
        &::after {
          top: calc(-20 * var(--px));
          right: calc(10 * var(--px));
          width: calc(270 * var(--px));
          height: calc(290 * var(--px));
        }
      }
    }
  }

  .features__item-title {
    background-color: var(--color-primary);
    color: var(--color-base);
    font-size: calc(32 * var(--px));
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    padding-left: 0.8em;
    padding-block: 0.6em;
    position: relative;
  }

  .features__item-text {
    font-size: calc(24 * var(--px));
    line-height: 1.3;
    font-weight: 500;
    text-align: left;
    padding-inline: 1.6em;
    padding-block: 6em 1.2em;
    position: relative;
    z-index: 1;
    strong {
      color: var(--color-secondary);
    }
    &::before {
      content: "0" counter(features-item);
      font-size: calc(200 * var(--px));
      font-weight: 700;
      line-height: 1;
      color: var(--color-base);
      position: absolute;
      top: calc(-42 * var(--px));
      left: calc(-7 * var(--px));
    }
  }
  @media screen and (max-width: 1040px) {
    .features__item-text {
      font-size: calc(28 * var(--px));
      padding-block: 8em 2em;
      &::after {
        content: none;
      }
    }
  }

  /* ご利用の流れ */
  .flow {
    padding-block: 140px 165px;
    background-color: var(--color-bg-primary);
  }
  @media screen and (max-width: 1040px) {
    .flow {
      padding-block: calc(110 * var(--px)) calc(125 * var(--px));
    }
  }

  .flow__inner {
    --section-inner-size: var(--size-container);
  }

  .flow__content {
    position: relative;

    &::after {
      content: "";
      background-image: url(../images/flow__content-after.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: calc(222 * var(--px));
      aspect-ratio: 222 / 810;
      position: absolute;
      bottom: calc(-65 * var(--px));
      left: calc(50% + 331px);
    }
  }
  @media screen and (max-width: 1040px) {
    .flow__content {
      &::after {
        width: calc(190 * var(--px));
        left: calc(50% + 160 * var(--px));
      }
    }
  }
  .flow__step {
    display: grid;
    grid-template-columns: calc(168 * var(--px)) minmax(0, 1fr);
    align-items: center;
    background-color: var(--color-base);

    &:not(:last-child) {
      margin-bottom: calc(50 * var(--px));

      .flow__step-number::before {
        content: "";
      }
    }
  }

  .flow__step-number {
    --bg-color: var(--color-primary);
    background-color: var(--bg-color);
    color: var(--color-base);
    font-size: calc(28 * var(--px));
    font-weight: 700;
    line-height: 1;
    text-align: center;
    padding-block: 1.2em;
    position: relative;
    &::before {
      background-color: var(--bg-color);
      width: calc(75 / 168 * 100%);
      height: calc(25 * var(--px));
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
    &.--lawyer {
      --bg-color: var(--color-secondary);
    }

    .sub1 {
      font-size: 2.5em;
      display: block;
    }
  }
  @media screen and (max-width: 1040px) {
    .flow__step-number {
      padding-block: 1em;
    }
  }

  .flow__step-title {
    font-size: calc(32 * var(--px));
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-align: left;
    padding-left: calc(50 * var(--px));

    strong {
      color: var(--color-secondary);
    }
    .sub1 {
      font-size: 0.7em;
    }
    .overdot {
      --color-overdot: var(--color-secondary);
    }
  }
  @media screen and (max-width: 1040px) {
    .flow__step-title {
      line-height: 1.4;
      padding-left: calc(30 * var(--px));
      padding-right: calc(150 * var(--px));

      .overdot {
        &::before {
          top: 0.1em;
        }
      }
    }
  }

  /* 料金プラン */
  .pricing {
    background-image: linear-gradient(
        to bottom,
        var(--color-bg-primary) 330px,
        transparent 330px
      ),
      url(../images/pricing-bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top, center bottom;
    padding-bottom: min(700px, 55%);
    margin-bottom: min(-360px, -27.5%);
  }
  @media screen and (max-width: 1040px) {
    .pricing {
      padding-bottom: calc(570 * var(--px));
      margin-bottom: calc(-420 * var(--px));
      background-image: linear-gradient(
          to bottom,
          var(--color-bg-primary) 330px,
          transparent 330px
        ),
        url(../images/pricing-bg-sp.webp);
    }
  }

  .pricing__inner {
    --section-inner-size: auto;
  }

  .pricing__content {
    width: max(100%, 2017px);
    height: 661px;
    clip-path: ellipse(50% 50% at 50% 50%);
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    background-image: linear-gradient(to bottom, #f86625, #f0912c);
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    display: grid;
    place-content: center;
  }
  @media screen and (max-width: 1040px) {
    .pricing__content {
      width: calc(1800 * var(--px));
      height: calc(875 * var(--px));
    }
  }

  .pricing__title {
    color: var(--color-base);
    margin-bottom: 0;
  }
  @media screen and (max-width: 1040px) {
    .pricing__title {
      margin-bottom: calc(40 * var(--px));
    }
  }

  .pricing__main {
    max-width: var(--size-container);
    margin-inline: auto;
  }
  @media screen and (max-width: 1040px) {
    .pricing__main {
      max-width: var(--size-container-wide);
    }
  }

  .pricing__label {
    font-size: calc(69 * var(--px));
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-base);
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: calc(30 * var(--px));
  }
  @media screen and (max-width: 1040px) {
    .pricing__label {
      font-size: calc(50 * var(--px));
      margin-bottom: calc(20 * var(--px));
    }
  }

  .zero-yen {
    display: inline-block;
    color: transparent;
    background-image: url(../images/pricing-zero-yen.png);
    background-repeat: no-repeat;
    background-size: calc(100 * var(--px));
    background-position: center;
    width: calc(100 * var(--px));
    height: calc(160 * var(--px));
    vertical-align: text-bottom;
  }
  @media screen and (max-width: 1040px) {
    .zero-yen {
      background-size: calc(150 * var(--px));
      width: calc(140 * var(--px));
      height: calc(240 * var(--px));
    }
  }

  .pricing__note {
    font-size: calc(32 * var(--px));
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-base);
    text-align: center;
    .sub1 {
      color: var(--color-secondary);
      display: inline-block;
      padding-inline: 1.8em;
      padding-block: 0.4em;
      background-color: var(--color-base);
      margin-right: 0.5em;
    }

    .sub2 {
      font-size: 0.875em;
    }
  }

  /* 弁護士紹介 */
  .lawyer {
    padding-bottom: calc(120 * var(--px));
  }
  @media screen and (max-width: 1040px) {
    .lawyer {
      padding-bottom: calc(85 * var(--px));
    }
  }

  .lawyer__inner {
    --section-inner-size: var(--size-container-wide);
  }
  @media screen and (max-width: 1040px) {
    .lawyer__inner {
      --section-inner-size: var(--size-container);
      margin-inline: auto;
    }
  }

  .lawyer__content {
    background-color: var(--color-base);
    padding-block: calc(110 * var(--px)) calc(66 * var(--px));

    position: relative;
    &::after {
      content: "";
      background-image: url(../images/lawyer__content-before.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: calc(300 * var(--px));
      height: calc(855 * var(--px));
      position: absolute;
      bottom: 0;
      right: max(0px, calc(50% - 550px));
    }
  }
  @media screen and (max-width: 1040px) {
    .lawyer__content {
      &::after {
        width: calc(220 * var(--px));
        height: calc(580 * var(--px));
      }
    }
  }

  .lawyer__content-inner {
    max-width: var(--size-container);
    margin-inline: auto;
    padding-inline: var(--size-padding);
  }
  @media screen and (max-width: 1040px) {
    .lawyer__content-inner {
      max-width: var(--size-container-narrow);
      padding-inline: calc(var(--size-padding) * 2);
    }
  }

  .lawyer__title {
  }

  .lawyer__intro {
    font-size: calc(28 * var(--px));
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: calc(40 * var(--px));
  }

  .lawyer__main {
    font-size: calc(20 * var(--px));
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: calc(80 * var(--px));

    > * {
      &:not(:last-child) {
        margin-bottom: calc(30 * var(--px));
      }
    }
  }
  @media screen and (max-width: 1040px) {
    .lawyer__main {
      font-size: calc(28 * var(--px));
      line-height: 1.9;
    }
  }

  .lawyer__list {
    font-size: calc(22 * var(--px));
    font-weight: 700;
    line-height: 2;
    color: var(--color-secondary);
  }
  @media screen and (max-width: 1040px) {
    .lawyer__list {
      font-size: calc(28 * var(--px));
      margin-block: 0.2em;
    }
  }

  .lawyer__item {
    &::before {
      content: "";
      display: inline-block;
      width: 0.9em;
      height: 0.5em;
      border-left: 0.2em solid var(--color-secondary);
      border-bottom: 0.2em solid var(--color-secondary);
      rotate: -45deg;
      translate: 0 -0.2em;
    }
  }

  .lowyer__outro {
    font-size: calc(24 * var(--px));
    line-height: 2;
    margin-bottom: calc(110 * var(--px));

    p {
      line-height: 1.7;
    }
    strong {
      font-size: 1.15em;
    }
  }
  @media screen and (max-width: 1040px) {
    .lowyer__outro {
      font-size: calc(28 * var(--px));
      margin-bottom: calc(90 * var(--px));
    }
  }

  .lawyer__image {
    width: 89%;
    margin-inline: auto;
  }
  @media screen and (max-width: 1040px) {
    .lawyer__image {
      width: 100%;
    }
  }

  /* よくある質問 */
  .faq {
    padding-block: 0 calc(150 * var(--px));
  }

  .faq__inner {
    --section-inner-size: var(--size-container);
  }

  .faq__contents {
    border: calc(6 * var(--px)) solid var(--color-primary);
    padding-inline: calc(72 * var(--px));
    padding-block: calc(70 * var(--px)) calc(80 * var(--px));
  }
  @media screen and (max-width: 1040px) {
    .faq__contents {
      padding-inline: calc(40 * var(--px));
    }
  }
  .faq__title {
  }

  .faq__list {
    counter-reset: faq-item;
  }

  .faq__item {
    counter-increment: faq-item;
    border-bottom: calc(2 * var(--px)) dashed
      color-mix(in srgb, var(--color-primary) 36%, transparent);
    padding-block: calc(32 * var(--px));
  }

  .faq__question {
    font-size: calc(20 * var(--px));
    line-height: 1.6;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(30 * var(--px));
    padding-block: 0.5em;
    &::before {
      content: "Q" counter(faq-item);
      font-size: calc(28 * var(--px));
      font-weight: 700;
      color: var(--color-base);
      width: calc(56 * var(--px));
      height: calc(56 * var(--px));
      line-height: 1;
      padding-bottom: 0.15em;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color-secondary);
      border-radius: 50%;
    }
  }
  @media screen and (max-width: 1040px) {
    .faq__question {
      font-size: calc(28 * var(--px));
    }
  }

  .faq__q-text {
    flex: 1;
  }

  .faq__icon {
    position: relative;
    width: calc(24 * var(--px));
    height: calc(24 * var(--px));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    background-color: var(--color-primary);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* 横棒（常に表示） */
  .faq__icon::before {
    width: calc(24 * var(--px));
    height: calc(2 * var(--px));
    transform: translateX(0);
  }

  /* 縦棒（+の状態） */
  .faq__icon::after {
    width: calc(2 * var(--px));
    height: calc(24 * var(--px));
    transform: rotate(0deg);
    opacity: 1;
  }

  /* active状態（-の状態：縦棒を90度回転させて非表示） */
  .faq__item.active .faq__icon::after {
    transform: rotate(-90deg);
    opacity: 0;
  }

  .faq__answer {
    font-size: calc(20 * var(--px));
    line-height: 1.6;
    font-weight: 500;
    text-align: justify;
    overflow: hidden;
    max-height: 0;
    padding-inline: 3.5em;
    transition: max-height 0.3s ease, padding 0.3s ease;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: calc(20 * var(--px));
    position: relative;

    &::before {
      content: "A" counter(faq-item) ".";
      font-size: calc(30 * var(--px));
      font-weight: 700;
      line-height: 1;
      color: var(--color-secondary);
    }
  }
  @media screen and (max-width: 1040px) {
    .faq__answer {
      font-size: calc(28 * var(--px));
      padding-inline: 3em;
    }
  }

  .faq__item.active .faq__answer {
    max-height: 500px;
  }
}