body {
  background-color: #fbf4f4;
}

.header {
  background-color: inherit;

  @media (width <= 960px) {
    background-color: #fbf4f4;
  }
}

.container {
  background-color: white;
  position: relative;
  overflow-x: hidden;
}

.heading2::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -43px;
  width: 72px;
  height: 72px;
  background-color: #fcee97;
  border-radius: 100%;
  z-index: -1;

  @media (width < 768px) {
    width: 48px;
    height: 48px;
  }

  @media (width <= 960px) {
    left: 0;
  }
}

.heading2.white::before {
  background-color: white;
}

.footer {
  border-top: 1px solid #e8e8e8;

  @media (width < 768px) {
    border-top: none;
  }
}

/** キービジュアル */

.key-visual {
  background-color: #fbf4f4;
  z-index: 20;
}

.key-visual-focus {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 40px;
    background-image: url(../images/lifull_focus.svg);
    background-size: contain;
    width: 64px;
    height: 64px;

    opacity: 0;
    transform: translate(-10px, -10px);
    transition: opacity 300ms ease-in-out 500ms,
      transform 300ms ease-in-out 500ms;

    @media (width < 768px) {
      top: 14px;
      left: 16px;
      width: 38px;
      height: 38px;
    }

    @media (width >= 768px) and (width <= 960px) {
      width: 52px;
      height: 52px;
    }
  }

  &.active::before {
    opacity: 1;
    transform: translate(0);
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 40px;
    left: 40px;
    background-image: url(../images/lifull_focus.svg);
    background-size: contain;
    rotate: -90deg;
    width: 64px;
    height: 64px;

    opacity: 0;
    transform: translate(-10px, -10px);
    transition: opacity 300ms ease-in-out 500ms,
      transform 300ms ease-in-out 500ms;

    @media (width < 768px) {
      bottom: 14px;
      left: 16px;
      width: 38px;
      height: 38px;
    }

    @media (width >= 768px) and (width <= 960px) {
      width: 52px;
      height: 52px;
    }
  }

  &.active::after {
    opacity: 1;
    transform: translate(0);
  }

  .key-visual-focus-content {
    position: relative;
    height: 642px;

    @media (width < 768px) {
      height: 600px;
    }

    &::before {
      content: "";
      position: absolute;
      top: 18px;
      right: 40px;
      background-image: url(../images/lifull_focus.svg);
      background-size: contain;
      rotate: 90deg;
      width: 64px;
      height: 64px;

      opacity: 0;
      transform: translate(-10px, -10px);
      transition: opacity 300ms ease-in-out 500ms,
        transform 300ms ease-in-out 500ms;

      @media (width < 768px) {
        top: 14px;
        right: 16px;
        width: 38px;
        height: 38px;
      }

      @media (width >= 768px) and (width <= 960px) {
        width: 52px;
        height: 52px;
      }
    }

    &.active::before {
      opacity: 1;
      transform: translate(0);
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 40px;
      right: 40px;
      background-image: url(../images/lifull_focus.svg);
      background-size: contain;
      rotate: 180deg;
      width: 64px;
      height: 64px;

      opacity: 0;
      transform: translate(-10px, -10px);
      transition: opacity 300ms ease-in-out 500ms,
        transform 300ms ease-in-out 500ms;

      @media (width < 768px) {
        bottom: 14px;
        right: 16px;
        width: 38px;
        height: 38px;
      }

      @media (width >= 768px) and (width <= 960px) {
        width: 52px;
        height: 52px;
      }
    }

    &.active::after {
      opacity: 1;
      transform: translate(0);
    }
  }

  .circle-1 {
    background-color: white;
    position: absolute;
    border-radius: 9999px;
    opacity: 0;
    animation: fadeIn 1000ms ease-in-out;
    animation-delay: 1400ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 372px;
    height: 372px;
    top: 72px;
    left: 288px;

    @media (width < 375px) {
      width: 331px;
      height: 331px;
      top: 36px;
      left: -29px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((4100vw / 393) + (38236px / 131));
      height: calc((4100vw / 393) + (38236px / 131));
      top: calc((7400vw / 393) + (-4534px / 131));
      left: calc((6200vw / 131) + (27049px / -131));
    }

    @media (width = 768px) {
      width: 372px;
      height: 372px;
      top: 110px;
      left: 157px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: 372px;
      height: 372px;
      top: calc((-475vw / 84) + (1074px / 7));
      left: calc((3275vw / 168) + (51px / 7));
    }
  }

  .circle-2 {
    background-color: #fdeb80;
    position: absolute;
    border-radius: 9999px;
    opacity: 0;
    animation: fadeIn 1000ms ease-in-out;
    animation-delay: 1400ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 46px;
    height: 46px;
    top: 380px;
    left: 77px;

    @media (width < 375px) {
      width: 23px;
      height: 23px;
      top: 423px;
      left: -5px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((700vw / 393) + (2138px / 131));
      height: calc((700vw / 393) + (2138px / 131));
      top: calc((1300vw / -393) + (57038px / 131));
      left: calc((2700vw / 131) + (-10780px / 131));
    }

    @media (width = 768px) {
      width: 30px;
      height: 30px;
      top: 410px;
      left: 76px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((50vw / 21) + (82px / 7));
      height: calc((50vw / 21) + (82px / 7));
      top: calc((125vw / -28) + (3110px / 7));
      left: calc((25vw / 168) + (524px / 7));
    }
  }

  .circle-3 {
    background-color: #fdeb80;
    position: absolute;
    border-radius: 9999px;
    opacity: 0;
    animation: fadeIn 1000ms ease-in-out;
    animation-delay: 1400ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 64px;
    height: 64px;
    top: 604px;
    left: 378px;

    @media (width < 375px) {
      width: 29px;
      height: 29px;
      top: 580px;
      left: 112px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((800vw / 393) + (2799px / 131));
      height: calc((800vw / 393) + (2799px / 131));
      top: calc((3800vw / 393) + (71230px / 131));
      left: calc((4100vw / 131) + (-703px / 131));
    }

    @media (width = 768px) {
      width: 37px;
      height: 37px;
      top: 618px;
      left: 235px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((225vw / 56) + (43px / 7));
      height: calc((225vw / 56) + (43px / 7));
      top: calc((25vw / -12) + (634px / 1));
      left: calc((3575vw / 168) + (501px / 7));
    }
  }

  .circle-4 {
    background-color: #fef3b2;
    position: absolute;
    border-radius: 9999px;
    opacity: 0;
    animation: fadeIn 1000ms ease-in-out;
    animation-delay: 1400ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 114px;
    height: 114px;
    top: 473px;
    left: 864px;

    @media (width < 375px) {
      width: 53px;
      height: 53px;
      top: 465px;
      left: 182px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((1700vw / 393) + (4818px / 131));
      height: calc((1700vw / 393) + (4818px / 131));
      top: calc((6400vw / 393) + (52915px / 131));
      left: calc((6900vw / 131) + (-2033px / 131));
    }

    @media (width = 768px) {
      width: 70px;
      height: 70px;
      top: 529px;
      left: 389px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((275vw / 42) + (138px / 7));
      height: calc((275vw / 42) + (138px / 7));
      top: calc((25vw / -3) + (593px / 1));
      left: calc((11875vw / 168) + (-1077px / 7));
    }
  }

  .key-visual-1 {
    position: absolute;
    opacity: 0;
    animation: fadeInUp 1000ms ease-in-out;
    animation-delay: 700ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 531px;
    height: 506px;
    bottom: 57px;
    right: 80px;

    @media (width < 375px) {
      width: 247px;
      height: 235px;
      bottom: 100px;
      right: -40px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((14900vw / 393) + (13732px / 131));
      height: calc((14200vw / 393) + (13035px / 131));
      bottom: calc((-5200vw / 393) + (19600px / 131));
      right: calc((2200vw / 131) + (-13490px / 131));
    }

    @media (width = 768px) {
      width: 396px;
      height: 377px;
      bottom: 48px;
      right: 26px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((4500vw / 224) + (1692px / 7));
      height: calc((4300vw / 224) + (1607px / 7));
      bottom: calc((300vw / 224) + (264px / 7));
      right: calc((900vw / 112) + (-250px / 7));
    }
  }

  .key-visual-2 {
    position: absolute;
    opacity: 0;
    animation: fadeInUp 1000ms ease-in-out;
    animation-delay: 900ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 265px;
    height: 285px;
    bottom: 58px;
    left: 145px;

    @media (width < 375px) {
      width: 111px;
      height: 119px;
      bottom: 35px;
      left: 68px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((2700vw / 131) + (4416px / 131));
      height: calc((2900vw / 131) + (4714px / 131));
      bottom: calc((3100vw / 393) + (2130px / 393));
      left: calc((1500vw / 131) + (3283px / 131));
    }

    @media (width = 768px) {
      width: 192px;
      height: 206px;
      left: 113px;
      bottom: 66px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((7300vw / 672) + (760px / 7));
      height: calc((7900vw / 672) + (810px / 7));
      bottom: calc((-100vw / 84) + (526px / 7));
      left: calc((100vw / 21) + (535px / 7));
    }
  }

  .key-visual-3 {
    position: absolute;
    opacity: 0;
    animation: fadeInUp 1000ms ease-in-out;
    animation-delay: 1100ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 156px;
    height: 180px;
    top: -4px;
    left: 343px;

    @media (width < 375px) {
      width: 84px;
      height: 97px;
      top: 318px;
      left: 23px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((800vw / 131) + (8004px / 131));
      height: calc((2800vw / 393) + (27621px / 393));
      top: calc((-26800vw / 393) + (225474px / 393));
      left: calc((17500vw / 131) + (-62612px / 131));
    }

    @media (width = 768px) {
      width: 108px;
      height: 125px;
      top: 50px;
      left: 548px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((50vw / 7) + (372px / 7));
      height: calc((5500vw / 672) + (435px / 7));
      top: calc((-900vw / 112) + (782px / 7));
      left: calc((-20500vw / 672) + (5476px / 7));
    }
  }

  .key-visual-title {
    position: absolute;
    /* opacity: 0;
    animation: fadeInUp 500ms ease-in-out;
    animation-delay: 300ms;
    animation-fill-mode: forwards; */
    color: #ed6103;
    font-size: 44px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.1em;

    /** 1440px以降 */
    width: 340px;
    height: 134px;
    top: 183px;
    left: 474px;

    @media (width < 375px) {
      font-size: 32px;
      width: 254px;
      height: 94px;
      top: 52px;
      left: 61px;
    }

    @media (width >= 375px) and (width < 768px) {
      font-size: calc(32px + (100vw - 375px) * 4 / 131);
      width: calc((8600vw / 393) + (22524px / 131));
      height: calc((4000vw / 393) + (7314px / 131));
      top: calc((2500vw / 393) + (3687px / 131));
      left: calc((3800vw / 393) + (3241px / 131));
    }

    @media (width = 768px) {
      width: 340px;
      height: 134px;
      top: 77px;
      left: 99px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: 340px;
      height: 134px;
      top: calc((1325vw / 84) + (309px / -7));
      left: calc((3125vw / 56) + (2307px / -7));
    }

    .image {
      vertical-align: bottom;
      width: 188px;
      height: 65px;

      @media (width < 375px) {
        width: 130px;
        height: 45px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((5800vw / 393) + (9780px / 131));
        height: calc((2000vw / 393) + (3395px / 131));
      }

      @media (width = 768px) {
        width: 188px;
        height: 65px;
      }

      @media (width > 768px) and (width < 1440px) {
        width: 188px;
        height: 65px;
      }
    }
  }

  .key-visual-description {
    color: #ed6103;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.15em;
    position: absolute;
    /* opacity: 0;
    animation: fadeInUp 500ms ease-in-out;
    animation-delay: 600ms;
    animation-fill-mode: forwards; */

    /** 1440px以降 */
    top: 335px;
    left: 474px;

    @media (width < 375px) {
      top: 162px;
      left: 61px;
    }

    @media (width >= 375px) and (width < 768px) {
      top: calc((6700vw / 393) + (12847px / 131));
      left: calc((1200vw / 131) + (3491px / 131));
    }

    @media (width = 768px) {
      top: 229px;
      left: 97px;
    }

    @media (width > 768px) and (width < 1440px) {
      top: calc((1325vw / 84) + (755px / 7));
      left: calc((9425vw / 168) + (-2337px / 7));
    }

    @media (width < 768px) {
      font-size: 14px;
      line-height: 1.8;
      letter-spacing: 0.05em;
    }

    @media (width >= 768px) and (width <= 960px) {
      font-size: 14px;
      line-height: 1.8;
      letter-spacing: 0.05em;
    }
  }
}

/** // キービジュアル */
/** work style */

.work-style {
  background-color: white;
  padding-top: 144px;
  max-width: 1060px;
  margin: 0 auto;

  @media (width <= 960px) {
    padding-top: 64px;
  }

  @media (width > 960px) and (width <= 1220px) {
    margin: 0 80px;
  }

  .work-style-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;

    @media (width <= 960px) {
      flex-direction: column;
      gap: 33px;
      padding: 0 40px;
    }

    @media (width < 768px) {
      padding: 0 16px;
    }

    .header-text {
      width: 425px;
      margin: 0;
      padding: 0;
      color: #ed6103;
      font-weight: bold;
      font-size: 16px;
      letter-spacing: 0.15em;
      line-height: 2;

      @media (width <= 960px) {
        width: 100%;
      }

      @media (width < 768px) {
        letter-spacing: 0.1em;
      }
    }
  }

  .work-style-cards {
    margin-top: 80px;
    display: flex;
    gap: 24px;

    @media (width <= 960px) {
      margin-top: 40px;
      flex-direction: column;
      gap: 32px;
      padding: 0 40px;
    }

    @media (width < 768px) {
      padding: 0 16px;
    }

    .card {
      z-index: 2;

      .image {
        width: 337px;
        height: 190px;
        border-radius: 12px;

        @media (width < 1220px) {
          width: 100%;
          height: auto;
        }
      }

      .title {
        color: #ed6103;
        font-size: 24px;
        font-weight: bold;
        line-height: 1.6;
        letter-spacing: 0.15em;
        margin: 24px 0 14px 0;

        @media (width < 768px) {
          margin: 8px 0 4px 0;
        }

        @media (width <= 960px) {
          margin-top: 10px;
        }
      }

      .description {
        width: 320px;
        font-size: 14px;
        line-height: 2;
        letter-spacing: 0.15em;

        @media (width <= 1220px) {
          width: 100%;
        }

        @media (width < 768px) {
          letter-spacing: 0.1em;
        }
      }
    }
  }
}

/** // work style */
/** partner merit */

.partner-merit {
  background-color: white;
  width: 100%;
  padding-top: 112px;
  position: relative;

  @media (width <= 960px) {
    padding-top: 64px;
  }

  #bg-circle {
    background-color: #fbf4f4;
    border-radius: 9999px;
    width: calc(800px + (4200) * ((100vw - 375px) / 1065));
    height: calc(800px + (4200) * ((100vw - 375px) / 1065));
    position: absolute;
    z-index: 1;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);

    @media (width < 768px) {
      top: 40px;
    }
  }

  .body {
    background-color: #fbf4f4;
    padding-bottom: 144px;
    border-radius: 60px;

    @media (width < 768px) {
      padding-left: 16px;
      padding-right: 16px;
      padding-bottom: 64px;
      border-radius: 30px;
    }

    @media (width >= 768px) and (width <= 960px) {
      padding-left: 40px;
      padding-right: 40px;
      padding-bottom: 64px;
      border-radius: 30px;
    }

    .content {
      position: relative;
      z-index: 40;
      max-width: 958px;
      margin: 160px auto 0 auto;

      @media (width < 768px) {
        margin-top: 60px;
      }

      @media (width > 960px) and (width <= 1038px) {
        padding-left: 20px;
        padding-right: 20px;
      }

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

        @media (width < 768px) {
          gap: 32px;
        }
      }

      .heading-description {
        color: #ed6103;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 2;
        letter-spacing: 0.15em;
        margin-top: 16px;

        @media (width < 768px) {
          margin-top: 0;
          letter-spacing: 0.1em;
          text-align: left;
        }

        @media (width >= 768px) and (width <= 960px) {
          letter-spacing: 0.1em;
          text-align: left;
        }
      }

      .card {
        margin-top: 80px;
        display: flex;
        align-items: center;
        gap: 88px;

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

        .image {
          width: 400px;
          height: 400px;

          @media (width < 768px) {
            width: 343px;
            height: 343px;
          }

          @media (width >= 768px) and (width <= 960px) {
            width: 540px;
            height: 540px;
          }
        }

        .text {
          @media (width < 768px) {
            position: relative;
            top: -50px;
            margin-bottom: -50px;
          }

          @media (width >= 768px) and (width <= 960px) {
            position: relative;
            top: -70px;
            margin-bottom: -70px;
          }

          .number {
            color: #fcd700;
            font-size: 88px;
            line-height: 0.72;
            letter-spacing: 0.03em;

            @media (width < 768px) {
              font-size: 72px;
            }
          }

          .title {
            color: #ed6103;
            font-size: 24px;
            font-weight: bold;
            line-height: 1.6;
            letter-spacing: 0.1em;
            margin: 35px 0 14px 0;

            @media (width < 768px) {
              letter-spacing: 0.05em;
            }
          }

          .description {
            font-size: 14px;
            line-height: 2;
            letter-spacing: 0.1em;
          }
        }
      }

      .card:nth-child(odd) {
        flex-direction: row-reverse;

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

      .card:nth-child(n + 2) {
        margin-top: 64px;

        @media (width <= 960px) {
          margin-top: 40px;
        }
      }
    }
  }
}

/** //partner merit */
/** partner voice */

.partner-voice {
  width: 100%;
  margin: 130px auto 130px auto;

  @media (width < 768px) {
    margin: 64px auto;
  }

  @media (width >= 768px) and(width <= 960px) {
    margin: 50px auto 64px auto;
  }

  .head {
    max-width: 1060px;
    margin: 0 auto;

    @media (width < 768px) {
      padding: 0 16px;
    }

    @media (width >= 768px) and (width <= 960px) {
      padding: 0 40px;
    }

    @media (width > 960px) and (width <= 1140px) {
      max-width: 100%;
      padding: 0 40px;
    }
  }

  .cards {
    width: 100%;
    height: 408px;
    margin-top: 64px;

    @media (width < 768px) {
      height: 444px;
      margin-top: 32px;
    }

    .card {
      width: 517px;
      height: 408px;
      background-color: #fbf4f4;
      border-radius: 12px;

      @media (width < 768px) {
        height: auto;
        width: 323px;
        padding-bottom: 20px;
      }

      .head {
        padding: 48px 48px 24px 48px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        @media (width < 768px) {
          height: 192px;
          flex-direction: column;
          padding: 24px;
          position: relative;
        }

        .text {
          color: #ed6103;
          font-weight: bold;
          line-height: 1.8;
          letter-spacing: 0.1em;

          @media (width < 768px) {
            letter-spacing: 0.05em;
            line-height: 1.7;
          }

          .title {
            font-size: 20px;
            margin-bottom: 16px;
          }

          .name {
            font-size: 14px;
          }
        }

        .image {
          width: 96px;
          height: 113px;
          object-fit: cover;
          object-position: bottom;

          @media (width < 768px) {
            width: 84px;
            height: 104px;
            position: absolute;
            bottom: 20px;
            right: 18px;
          }
        }
      }

      .body {
        margin-left: 48px;
        border-top: 1px solid #f6b386;
        padding: 24px 48px 48px 0;
        font-size: 14px;
        line-height: 2;
        letter-spacing: 0.1em;

        @media (width < 768px) {
          border-top: 2px solid #f6b386;
          letter-spacing: 0.05em;
          margin-left: 16px;
          padding: 16px 16px 0 0;
        }
      }
    }
  }

  .card-navigation {
    max-width: 1060px;
    margin-top: 32px;
    margin-left: max(calc(50% - 530px), 40px);
    display: flex;
    align-items: center;
    gap: 16px;

    @media (width < 768px) {
      margin-top: 8px;
      margin-left: 16px;
    }

    @media (width >= 768px) and (width <= 960px) {
      margin-left: 40px;
    }

    @media (width >= 2140px) {
      display: none;
    }

    .prev-button {
      width: 40px;
      height: 40px;
      background-image: url(../images/icons/pagination/next_button.svg);
      transform: scaleX(-1);
      outline: none;

      &:active {
        background-image: url(../images/icons/pagination/next_button_active.svg);
      }
    }

    .pagination {
      width: auto;

      .splide__pagination {
        position: relative;
        top: 0;
        left: 0;

        .splide__pagination__page {
          opacity: 1;

          &.is-active {
            background-color: #ed6103;
            transform: none;
          }
        }
      }
    }

    .next-button {
      width: 40px;
      height: 40px;
      background-image: url(../images/icons/pagination/next_button.svg);
      outline: none;

      &:active {
        background-image: url(../images/icons/pagination/next_button_active.svg);
      }
    }
  }
}

/** //partner voice */
/** partner schedule */

.partner-schedule {
  width: 100%;
  background-color: #fbf4f4;
  background-image: linear-gradient(90deg, #ffffff 1px, transparent 1px),
    linear-gradient(#ffffff 1px, transparent 1px);
  background-position: 10px 10px;
  background-size: 48px 48px;
  border-radius: 0px 0px 60px 60px;
  padding-top: 158px;
  padding-bottom: 130px;

  @media (width < 768px) {
    background-size: 40px 40px;
    padding-top: 64px;
    padding-bottom: 64px;
    border-radius: 0 0 30px 30px;
  }

  @media (width >= 768px) and (width <= 960px) {
    padding-top: 57px;
    padding-bottom: 64px;
    border-radius: 30px;
  }

  .content {
    max-width: 1060px;
    margin: 0 auto;

    @media (width < 768px) {
      padding: 0 16px;
    }

    @media (width >= 768px) and (width <= 960px) {
      padding: 0 40px;
    }

    @media (width >= 961px) and (width <= 1140px) {
      margin: 0 40px;
    }

    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 64px;

      @media (width <= 960px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        margin-bottom: 40px;
      }

      .description {
        width: 465px;
        color: #ed6103;
        font-size: 16px;
        font-weight: bold;
        line-height: 2;
        letter-spacing: 0.15em;

        @media (width <= 960px) {
          width: 100%;
          letter-spacing: 0.1em;
        }
      }
    }

    .schedules {
      width: 100%;
      max-width: 1060px;
      margin: 0 auto 72px auto;

      .card {
        width: 100%;
        max-width: 1060px;
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        border-radius: 20px;
        border: 2px solid;
        border-color: #fcd700;
        position: relative;
        padding: 72px 36px 72px 232px;

        @media (width <= 960px) {
          flex-direction: column;
          align-items: flex-start;
          padding: 32px;
        }

        @media (width < 768px) {
          padding: 24px;
        }

        .image {
          position: absolute;
          top: 58px;
          left: 63px;
          z-index: 1;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 73px;
            height: 73px;
            background-color: #fcd700;
            z-index: 1;
            border-radius: 100%;

            @media (width < 768px) {
              width: 67px;
              height: 67px;
              top: 70px;
              left: 11px;
            }

            @media (width >= 768px) and (width <= 960px) {
              width: 108px;
              height: 108px;
              top: 120px;
            }
          }

          @media (width < 768px) {
            top: -48px;
            left: auto;
            right: 97px;
          }

          @media (width >= 768px) and (width <= 960px) {
            top: 20px;
            left: auto;
            right: 150px;
          }

          img {
            width: 144px;
            height: 313px;
            object-fit: contain;
            position: absolute;
            top: 8px;
            left: -20px;
            z-index: 2;

            @media (width < 768px) {
              width: 77px;
              height: 148px;
              top: 17px;
              left: 6px;
            }

            @media (width >= 768px) and (width <= 960px) {
              width: 123px;
              height: 237px;
              top: 38px;
              left: -7px;
            }
          }
        }

        .description {
          width: 252px;

          @media (width <= 960px) {
            width: 100%;
          }

          .name {
            color: #ed6103;
            font-weight: bold;
            font-size: 24px;
            line-height: 1.4;
            letter-spacing: 0.15em;
            margin-bottom: 8px;

            @media (width >= 768px) and (width <= 960px) {
              letter-spacing: 0.1em;
            }
          }

          .status {
            color: #ed6103;
            font-weight: bold;
            font-size: 14px;
            line-height: 1.58;
            letter-spacing: 0.15em;
            margin-bottom: 24px;

            @media (width >= 768px) and (width <= 960px) {
              letter-spacing: 0.1em;
            }
          }

          .job {
            font-weight: bold;
            font-size: 16px;
            line-height: 1.8;
            letter-spacing: 0.1em;
            margin-bottom: 12px;

            @media (width >= 768px) and (width <= 960px) {
              width: calc(100% - 150px);
            }
          }

          .text {
            font-size: 14px;
            line-height: 2;
            letter-spacing: 0.06em;

            @media (width < 768px) {
              letter-spacing: 0.05em;
            }

            @media (width >= 768px) and (width <= 960px) {
              width: calc(100% - 150px);
              letter-spacing: 0.1em;
            }
          }
        }

        .schedule {
          width: 483px;
          position: relative;

          @media (width < 768px) {
            width: 100%;
          }

          .line {
            display: flex;
            align-items: flex-start;
            gap: 32px;
            position: relative;
            z-index: 2;

            @media (width < 768px) {
              gap: 16px;
            }

            .time {
              width: 76px;
              min-width: 76px;
              height: 25px;
              text-align: center;
              padding: 4px;
              background-color: #ffffff;
              border-radius: 42px;
              border: 2px solid #ed6103;
              color: #ed6103;
              font-size: 14px;
              font-weight: bold;
              line-height: 1;
              letter-spacing: 0.03em;
            }

            .time.primary {
              background-color: #ed6103;
              color: #ffffff;
            }

            .action {
              width: 375px;
              font-size: 14px;
              line-height: 1.8;
              letter-spacing: 0.1em;

              @media (width < 768px) {
                line-height: 1.6;
                letter-spacing: 0.05em;
              }

              .small {
                font-size: 14px;
              }
            }

            .action.primary {
              color: #ed6103;
              font-size: 18px;
              line-height: 1.4;
            }
          }

          .line:last-child .time::after {
            content: "";
            position: absolute;
            top: 25px;
            left: 36px;
            width: 4px;
            height: 20px;
            background-color: #fff;
          }

          .line:not(:last-child) {
            margin-bottom: 20px;
          }
        }

        .schedule::before {
          content: "";
          position: absolute;
          top: 0;
          left: 37px;
          width: 2px;
          height: 100%;
          background-color: #ed6103;
          z-index: 0;
        }
      }

      .card:not(:last-child) {
        margin-bottom: 32px;
      }
    }

    .graph {
      width: 100%;
      max-width: 1060px;
      margin: 0 auto;

      > .title {
        font-size: 24px;
        font-weight: bold;
        line-height: 1.6;
        letter-spacing: 0.1em;
        color: #ed6103;
        margin-bottom: 38px;

        @media (width >= 768px) and (width <= 960px) {
          margin-bottom: 24px;
        }
      }

      .cards {
        display: flex;
        gap: 23px;

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

        .card {
          background-color: white;
          border-radius: 12px;
          padding: 24px 0;
          text-align: center;

          @media (width < 768px) {
            padding-bottom: 8px;
          }

          @media (width > 960px) {
            padding-bottom: 8px;
          }

          .title {
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 0.15em;

            @media (width >= 768px) and (width <= 960px) {
              font-size: 24px;
            }

            @media (width > 960px) {
              margin-bottom: 8px;
            }
          }

          .image {
            width: 337px;

            @media (width >= 768px) and (width <= 1137px) {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

/** //partner schedule */
/** partner flow */

.partner-flow {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto 144px auto;
  padding-top: 130px;
  position: relative;
  z-index: 1;

  @media (width <= 960px) {
    padding-top: 64px;
    margin-bottom: 64px;
  }

  .head {
    margin-bottom: 65px;

    @media (width < 768px) {
      margin: 0 16px 32px 16px;
    }

    @media (width >= 768px) and (width <= 960px) {
      margin: 0 40px 40px 40px;
    }

    .main-text {
      @media (width <= 960px) {
        letter-spacing: 0.12em;
      }
    }
  }

  .content {
    padding: 0;

    @media (width < 768px) {
      padding: 0 16px;
    }

    @media (width >= 768px) and (width <= 960px) {
      padding: 0 40px;
    }

    .steps {
      border: 2px solid #fcd700;
      border-radius: 20px;
      max-width: 880px;

      .step {
        display: flex;
        align-items: flex-start;
        gap: 65px;
        padding: 32px 60px;

        @media (width < 768px) {
          padding: 24px;
          gap: 27px;
        }

        @media (width >= 768px) and (width <= 960px) {
          padding: 32px 48px;
        }

        .number {
          color: #ed6103;
          font-size: 24px;
          font-weight: bold;
          line-height: 1;
          letter-spacing: 0.1em;

          @media (width < 768px) {
            font-size: 16px;
            white-space: nowrap;
          }

          @media (width >= 768px) and (width <= 960px) {
            font-size: 20px;
            white-space: nowrap;
          }
        }

        .text {
          .title {
            color: #ed6103;
            font-size: 24px;
            font-weight: bold;
            line-height: 1;
            letter-spacing: 0.1em;

            @media (width <= 960px) {
              font-size: 20px;
            }
          }

          .description {
            max-width: 540px;
            font-size: 14px;
            line-height: 2;
            letter-spacing: 0.1em;
            margin-top: 10px;

            @media (width <= 960px) {
              line-height: 1.8;
              letter-spacing: 0.05em;
            }
          }
        }
      }

      .step:not(:last-child) {
        border-bottom: 2px solid #fcd700;
      }

      .step:last-child .text .description {
        @media (width < 768px) {
          margin-right: 50px;
        }
      }
    }

    .image {
      width: 309px;
      height: 580px;
      position: absolute;
      bottom: -52px;
      right: -16px;

      @media (width < 768px) {
        width: 80px;
        height: 150px;
        bottom: -32px;
        right: 22px;
      }

      @media (width >= 768px) and (width <= 960px) {
        width: 117px;
        height: 220px;
        bottom: -17px;
        right: 4px;
      }
    }
  }
}

/** //partner flow */
/** partner faq */

.partner-faq {
  background-color: #fbf4f4;
  padding-top: 144px;
  padding-bottom: 144px;
  border-radius: 0 0 60px 60px;

  @media (width <= 960px) {
    padding-top: 64px;
    padding-bottom: 64px;
    border-radius: 0 0 30px 30px;
  }

  @media (width > 960px) and (width <= 1180px) {
    padding-left: 40px;
    padding-right: 40px;
  }

  .content {
    max-width: 1100px;
    margin: 0 auto;

    @media (width < 768px) {
      padding: 0 16px;
    }

    @media (width >= 768px) and (width <= 960px) {
      padding: 0 40px;
    }

    .heading2 {
      margin-bottom: 100px;

      @media (width <= 960px) {
        margin-bottom: 32px;
      }
    }

    .body {
      max-width: 740px;
      margin: 0 0 0 auto;

      @media (width <= 960px) {
        max-width: none;
      }

      .card {
        background-color: white;
        border-radius: 16px;
        padding: 32px;
        display: flex;
        gap: 20px;
        justify-content: space-between;
        cursor: pointer;
        transition: all 0.3s ease;

        @media (width < 768px) {
          padding: 22px 24px;
          gap: 11px;
        }

        @media (width >= 768px) and (width <= 960px) {
          padding: 32px 24px;
        }

        .mark {
          font-size: 24px;
          font-weight: bold;
          line-height: 1.5;
          color: #ed6103;

          @media (width <= 960px) {
            font-size: 20px;
          }
        }

        .text {
          width: 560px;

          @media (width >= 768px) and (width <= 960px) {
            min-width: 540px;
            width: 100%;
          }

          .question {
            font-size: 18px;
            font-weight: bold;
            line-height: 2;
            letter-spacing: 0.1em;
            transition: color 0.3s ease;

            @media (width <= 960px) {
              font-size: 16px;
              line-height: 1.7;
              letter-spacing: 0.05em;
            }
          }

          .answer {
            margin-top: 0;
            font-size: 16px;
            line-height: 1.8;
            letter-spacing: 0.1em;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.4s ease, opacity 0.3s ease,
              margin-top 0.4s ease;

            @media (width <= 960px) {
              font-size: 14px;
              letter-spacing: 0.05em;
            }
          }
        }

        .toggle {
          width: 32px;
          height: 32px;
          background-image: url(../images/icons/toggle-plus.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          transition: transform 0.3s ease;
          cursor: pointer;

          @media (width <= 960px) {
            width: 24px;
            min-width: 24px;
            height: 24px;
          }
        }
      }

      .card.active {
        .text .question {
          color: #ed6103;
        }

        .text .answer {
          margin-top: 24px;
          max-height: 400px;
          opacity: 1;
        }

        .toggle {
          background-image: url(../images/icons/toggle-minus.svg);
          transform: rotate(180deg);
        }
      }

      .card:not(:last-child) {
        margin-bottom: 24px;

        @media (width < 768px) {
          margin-bottom: 16px;
        }
      }
    }
  }
}

/** //partner faq */

.recently-news-list {
  .content {
    grid-template-columns: 1fr 180px;
    grid-template-areas:
      "body head"
      "bottom bottom";
    column-gap: 97px;

    @media (width <= 960px) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "head"
        "body"
        "bottom";
    }

    .head {
      width: 180px;

      @media (width <= 960px) {
        width: 220px;
      }
    }

    .body {
      margin-top: 124px;

      @media (width <= 960px) {
        margin-top: 0;
      }
    }

    .bottom {
      .secondary-button {
        margin: 0 auto 0 0;

        @media (width <= 960px) {
          margin: 0 auto;
        }
      }
    }
  }
}