body {
  background-color: #edeff3;
}

.header {
  background-color: inherit;

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

  .nav {
    .primary-button {
      @media (width < 768px) {
        width: 132px;
        font-size: 14px;
        letter-spacing: 0;
      }
    }
  }
}

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

.heading2::before {
  content: "";
  position: absolute;
  top: -22px;
  left: -43px;
  width: 69px;
  height: 81px;
  background-color: #eaedfc;
  border-radius: 4px;
  z-index: -1;

  @media (width < 768px) {
    width: 41px;
    height: 48px;
    top: -14px;
  }

  @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: #edeff3;
  z-index: 20;
}

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

  &::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 81px;
    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;
      left: 40px;
    }
  }

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

  &::after {
    content: "";
    position: absolute;
    bottom: 40px;
    left: 81px;
    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;
      left: 40px;
    }
  }

  &.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: 81px;
      background-image: url(../images/lifull_focus.svg);
      background-size: contain;
      rotate: 90deg;
      width: 64px;
      height: 64px;
      z-index: 2;

      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;
        right: 40px;
      }
    }

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

    &::after {
      content: "";
      position: absolute;
      bottom: 40px;
      right: 81px;
      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;
        right: 40px;
      }
    }

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

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

    /** 1440px以降 */
    width: 334px;
    height: 439px;
    top: 61px;
    right: 325px;

    @media (width < 375px) {
      width: 266px;
      height: 265px;
      top: 36px;
      right: -4px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((1400vw / 393) + (33096px / 131));
      height: calc((5600vw / 131) + (13715px / 131));
      top: calc((700vw / 131) + (2091px / 131));
      right: calc((7900vw / 393) + (-10399px / 131));
    }

    @media (width = 768px) {
      width: 280px;
      height: 433px;
      top: 57px;
      right: 75px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((225vw / 28) + (1528px / 7));
      height: calc((25vw / 28) + (2983px / 7));
      top: calc((25vw / 42) + (367px / 7));
      right: calc((3125vw / 84) + (1475px / -7));
    }
  }

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

    /** 1440px以降 */
    width: 48px;
    height: 47px;
    top: 532px;
    right: 612px;

    @media (width < 375px) {
      width: 20px;
      height: 20px;
      top: 555px;
      right: 153px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((400vw / 131) + (1120px / 131));
      height: calc((400vw / 131) + (1120px / 131));
      top: calc((2900vw / -393) + (76330px / 131));
      right: calc((34900vw / 393) + (-23582px / 131));
    }

    @media (width = 768px) {
      width: 32px;
      height: 32px;
      top: 526px;
      right: 502px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((50vw / 21) + (96px / 7));
      height: calc((125vw / 56) + (104px / 7));
      top: calc((25vw / 28) + (3634px / 7));
      right: calc((1375vw / 84) + (2634px / 7));
    }
  }

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

    /** 1440px以降 */
    width: 32px;
    height: 31px;
    top: 344px;
    right: 200px;

    @media (width < 375px) {
      width: 10px;
      height: 10px;
      top: 311px;
      right: 77px;
      border-radius: 1px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((1100vw / 393) + (-65px / 131));
      height: calc((1100vw / 393) + (-65px / 131));
      top: calc((7000vw / 131) + (14491px / 131));
      right: calc((2200vw / 131) + (1837px / 131));
      border-radius: 1px;
    }

    @media (width = 768px) {
      width: 21px;
      height: 21px;
      top: 521px;
      right: 143px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((275vw / 168) + (59px / 7));
      height: calc((125vw / 84) + (67px / 7));
      top: calc((1475vw / -56) + (5063px / 7));
      right: calc((475vw / 56) + (545px / 7));
    }
  }

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

    /** 1440px以降 */
    width: 78px;
    height: 77px;
    top: 124px;
    left: 566px;

    @media (width < 375px) {
      width: 36px;
      height: 36px;
      top: 340px;
      left: 205px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((1400vw / 393) + (2966px / 131));
      height: calc((1400vw / 393) + (2966px / 131));
      top: calc((-23500vw / 393) + (73915px / 131));
      left: calc((10900vw / 393) + (13230px / 131));
    }

    @media (width = 768px) {
      width: 50px;
      height: 50px;
      top: 105px;
      left: 314px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((25vw / 6) + (18px / 1));
      height: calc((225vw / 56) + (134px / 7));
      top: calc((475vw / 168) + (583px / 7));
      left: calc((75vw / 2) + (26px / 1));
    }
  }

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

    /** 1440px以降 */
    width: 545px;
    height: 528px;
    top: 30px;
    left: 40px;

    @media (width < 375px) {
      width: 280px;
      height: 245px;
      top: 295px;
      left: -55px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((2800vw / 131) + (26180px / 131));
      height: calc((2800vw / 131) + (21595px / 131));
      top: calc((7700vw / -131) + (67520px / 131));
      left: calc((1400vw / 131) + (-12455px / 131));
    }

    @media (width = 768px) {
      width: 364px;
      height: 329px;
      top: 64px;
      left: -13px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((4525vw / 168) + (1100px / 7));
      height: calc((4975vw / 168) + (711px / 7));
      top: calc((425vw / -84) + (720px / 7));
      left: calc((1325vw / 168) + (515px / -7));
    }
  }

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

    /** 1440px以降 */
    width: 214px;
    height: 205px;
    bottom: -17px;
    right: 229px;

    @media (width < 375px) {
      width: 98px;
      height: 94px;
      bottom: 45px;
      right: 30px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((4000vw / 393) + (7838px / 131));
      height: calc((3800vw / 393) + (7564px / 131));
      bottom: calc((700vw / 131) + (3270px / 131));
      right: calc((29900vw / 393) + (-33445px / 131));
    }

    @media (width = 768px) {
      width: 138px;
      height: 132px;
      bottom: 66px;
      right: 329px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((475vw / 42) + (358px / 7));
      height: calc((1825vw / 168) + (340px / 7));
      bottom: calc((-2075vw / 168) + (1126px / 7));
      right: calc((-625vw / 42) + (3103px / 7));
    }
  }

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

    /** 1440px以降 */
    width: 169px;
    height: 122px;
    top: 212px;
    right: 31px;

    @media (width < 375px) {
      width: 90px;
      height: 65px;
      top: 319px;
      right: -12px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((700vw / 393) + (10915px / 131));
      height: calc((500vw / 393) + (7890px / 131));
      top: calc((11900vw / 393) + (26914px / 131));
      right: calc((1700vw / 131) + (-7947px / 131));
    }

    @media (width = 768px) {
      width: 97px;
      height: 70px;
      top: 438px;
      right: 39px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((75vw / 7) + (103px / 7));
      height: calc((325vw / 42) + (74px / 7));
      top: calc((-2825vw / 84) + (4874px / 7));
      right: calc((-25vw / 21) + (337px / 7));
    }
  }

  .key-visual-title {
    position: absolute;
    /* opacity: 0;
    animation: fadeInUp 500ms ease-in-out;
    animation-delay: 300ms;
    animation-fill-mode: forwards; */
    color: #ed6103;

    /** 1440px以降 */
    top: 112px;
    left: 699px;

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

    @media (width >= 375px) and (width < 768px) {
      top: calc((4700vw / 393) + (1199px / 131));
      left: calc((32500vw / 393) + (32634px / -131));
    }

    @media (width = 768px) {
      top: 101px;
      left: 386px;
    }

    @media (width > 768px) and (width < 1440px) {
      top: calc((275vw / 168) + (619px / 7));
      left: calc((7825vw / 168) + (198px / 7));
    }

    .sub-text {
      font-size: 32px;
      line-height: 1.5;
      letter-spacing: 0.05em;

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

    .main-text {
      font-size: 44px;
      line-height: 1.5;
      letter-spacing: 0.05em;

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

      @media (width <= 960px) {
        line-height: 1.35;
      }
    }
  }

  .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: 239px;
    left: 699px;

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

    @media (width >= 375px) and (width < 768px) {
      top: calc((8600vw / 393) + (13223px / 131));
      left: calc((32500vw / 393) + (32634px / -131));
    }

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

    @media (width = 768px) {
      top: 269px;
      left: 386px;
    }

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

    @media (width > 768px) and (width < 1440px) {
      top: calc((125vw / -28) + (2123px / 7));
      left: calc((7825vw / 168) + (198px / 7));
    }
  }
}

/** // キービジュアル */
/** 企業一覧 */

.client-list {
  margin-top: 90px;

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

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

  .head {
    max-width: 1280px;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

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

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

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

    .title {
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 0.1em;
      line-height: 1.2;
      color: #003fa3;
    }
  }

  .gallary {
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    padding: 25px 0;

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

    .slider {
      display: flex;
      align-items: center;
      gap: 80px;

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

    .image {
      height: 60px;

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

      &.tall {
        height: 100px;

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

      &.short {
        height: 40px;

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

/** //企業一覧 */
/** fam point */

.fam-point {
  background-color: white;
  padding-top: 144px;
  max-width: 1060px;
  margin: 0 auto 145px auto;

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

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

  > .head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .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) {
        letter-spacing: 0.1em;
        width: 100%;
      }
    }

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

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

  .cards {
    margin-top: 80px;
    display: flex;
    gap: 18px;

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

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

    .card {
      @media (width > 960px) and (width <= 1140px) {
        width: 100%;
      }
      .image {
        width: 337px;
        height: 190px;

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

        @media (width > 960px) and (width <= 1140px) {
          width: 100%;
          height: auto;
          object-fit: contain;
        }
      }

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

        @media (width <= 960px) {
          letter-spacing: 0.05em;
          margin-top: 10px;
          margin-bottom: 4px;
        }
      }

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

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

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

/** // fam point */
/** client service */

.client-service {
  background-color: #edeff3;
  width: 100%;
  padding-top: 145px;

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

  > .content {
    max-width: 1060px;
    margin: 0 auto;
    padding-bottom: 144px;
    border-radius: 60px;

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

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

    .head {
      text-align: center;
      margin-bottom: 80px;

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

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

      .heading {
        margin-bottom: 54px;
        text-align: left;

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

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

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

    .body {
      border: 2px solid #2c3096;
      border-radius: 20px;
      background-color: #ffffff;

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

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

      .row {
        padding: 64px 60px 50px 60px;

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

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

        .col {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;

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

          .title {
            font-size: 24px;
            font-weight: bold;
            line-height: 1.5;
            letter-spacing: 0.15em;
            color: #003fa3;

            @media (width < 768px) {
              margin-left: 12px;
            }

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

          .items {
            .item {
              display: flex;
              align-items: center;
              gap: 18px;

              @media (width < 768px) {
                align-items: flex-start;
              }

              .image {
                width: 160px;
                height: auto;

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

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

              .text {
                .subject {
                  color: #ed6103;
                  font-size: 18px;
                  font-weight: bold;
                  line-height: 1.5;
                  letter-spacing: 0.1em;
                  margin-bottom: 12px;

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

                .content {
                  font-size: 14px;
                  line-height: 2;
                  letter-spacing: 0.1em;
                  width: 400px;

                  @media (width < 768px) {
                    line-height: 1.8;
                    width: 100%;
                  }

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

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

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

/** //client service */
/** client case */

.client-case {
  margin-top: 130px;
  margin-bottom: 130px;
  max-width: 100%;

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

  @media (width < 768px) {
    margin-top: 64px;
    padding: 0 16px;
  }

  .head {
    margin: 0 max(calc(50% - 530px), 40px) 0 max(calc(50% - 530px), 40px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

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

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

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

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

  .cards {
    margin-top: 64px;

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

    .card-row {
      display: flex;
      align-items: stretch;

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

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

      .card {
        width: 100%;
        height: 536px;
        max-width: 1060px;
        border: 2px solid #edeff3;
        border-radius: 12px;
        display: flex;

        @media (width <= 960px) {
          flex-direction: column;
          cursor: pointer;
          transition: all 0.3s ease;
          height: auto;
        }

        > .description {
          background-color: #edeff3;
          border-radius: 9px 0 0 9px;
          padding: 56px 60px 36px 64px;

          @media (width < 768px) {
            border-radius: 9px 9px 0 0;
            padding: 24px 16px;
          }

          @media (width >= 768px) and (width <= 960px) {
            border-radius: 9px 9px 0 0;
            padding: 30px;
          }

          .title {
            @media (width <= 960px) {
              display: flex;
              justify-content: space-between;
            }

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

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

            .toggle {
              @media (width <= 960px) {
                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;
              }
            }
          }

          .sub-title {
            margin-top: 8px;
            font-size: 14px;
            font-weight: bold;
            line-height: 2;
            letter-spacing: 0.1em;
          }

          .solution {
            border: 2px solid #003fa3;
            border-radius: 8px;
            padding: 24px 30px;
            margin-top: 22px;

            @media (width <= 960px) {
              height: 0;
              margin-top: 0;
              padding: 0;
              overflow: hidden;
              opacity: 0;
              transition: height 0.4s ease, opacity 0.3s ease,
                margin-top 0.4s ease, padding-top 0.4s ease;
            }

            .problem-title {
              display: inline-block;
              font-size: 14px;
              font-weight: bold;
              line-height: 1;
              letter-spacing: 0.1em;
              padding: 4px 12px;
              background-color: #fff;
              border-radius: 4px;
              margin-bottom: 8px;

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

            .problem-text {
              font-size: 14px;
              font-weight: bold;
              line-height: 1.8;
              letter-spacing: 0.1em;
              margin-bottom: 17px;

              @media (width <= 960px) {
                margin-bottom: 16px;
                letter-spacing: 0.05em;
              }
            }

            .proposal-title {
              display: inline-block;
              color: #ed6103;
              font-size: 14px;
              font-weight: bold;
              line-height: 1;
              letter-spacing: 0.1em;
              padding: 4px 12px;
              background-color: #fff;
              border-radius: 4px;
              margin-bottom: 8px;

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

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

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

          .client-voice {
            display: flex;
            align-items: flex-start;
            gap: 24px;
            margin-top: 20px;

            @media (width < 768px) {
              gap: 14px;
              margin-top: 0;
            }

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

            @media (width <= 960px) {
              height: 0;
              overflow: hidden;
              opacity: 0;
              transition: height 0.4s ease, opacity 0.3s ease;
            }

            .image {
              width: 80px;
              height: 78px;

              @media (width < 768px) {
                width: 40px;
                height: 39px;
                margin-top: 6px;
              }

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

            .text {
              color: #2c3096;

              .voice-title {
                font-size: 14px;
                font-weight: bold;
                line-height: 2.2;
                letter-spacing: 0.1em;
              }

              .voice-text {
                font-size: 14px;
                line-height: 1.8;
                letter-spacing: 0.1em;
              }
            }
          }
        }

        &:not(.active) .description {
          @media (width <= 960px) {
            border-radius: 9px;
          }
        }

        .result {
          width: 312px;
          padding: 50px 26px 28px 26px;
          text-align: center;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;

          @media (width <= 960px) {
            padding: 0;
            width: 100%;
            text-align: left;
            height: 0;
            overflow: hidden;
            opacity: 0;
            transition: height 0.3s ease, opacity 0.3s ease,
              padding-top 0.3s ease;
            display: block;
          }

          > .text {
            width: 100%;

            .title {
              display: inline-block;
              color: #ed6103;
              font-size: 20px;
              font-weight: bold;
              line-height: 1;
              letter-spacing: 0.1em;
              background-color: #fef3eb;
              padding: 4px 24px;
              border-radius: 4px;
              margin-bottom: 17px;

              @media (width <= 960px) {
                padding: 4px 23px;
              }
            }

            .description {
              color: #ed6103;
              font-size: 14px;
              font-weight: bold;
              line-height: 1.8;
              letter-spacing: 0.1em;
              text-align: left;

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

              &.center-only-pc {
                text-align: center;

                @media (width <= 960px) {
                  text-align: left;
                }
              }
            }
          }

          .image {
            width: 255px;
            height: auto;

            @media (width < 768px) {
              width: 100%;
              padding: 0 15px;
              object-fit: contain;
            }

            @media (width >= 768px) and (width <= 960px) {
              width: 100%;
              padding: 0 90px;
              object-fit: contain;
            }
          }
        }
      }

      .card.active {
        .description {
          .solution {
            margin-top: 22px;
            padding: 24px 30px;
            height: auto;
            opacity: 1;
          }

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

          .client-voice {
            height: auto;
            opacity: 1;
            margin-top: 20px;

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

        .result {
          height: auto;
          opacity: 1;

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

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

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

    @media (width <= 960px) {
      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);
      }
    }
  }
}

/** //client case */
/** client companies */

.client-companies {
  width: 100%;
  background-color: #edeff3;
  padding-top: 98px;
  padding-bottom: 120px;

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

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

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

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

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

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

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

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

    .body {
      width: 100%;
      background-color: #fff;
      border-radius: 12px;
      padding: 48px 120px;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      row-gap: 40px;
      column-gap: 80px;

      @media (width < 768px) {
        padding: 36px;
        row-gap: 30px;
        column-gap: 48px;
      }

      @media (width >= 768px) and (width <= 960px) {
        padding: 40px 70px;
        row-gap: 30px;
        column-gap: 40px;
      }

      .image {
        height: 40px;

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

        &.tall {
          height: 75px;

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

        &.short {
          height: 28px;

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

/** //client companies */
/** abount partner */

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

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

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

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

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

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

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

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

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

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

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

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

    .data {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 25px;

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

      .item {
        width: 337px;
        height: 378px;
        border: 2px solid #003fa3;
        border-radius: 12px;
        padding: 24px 0 16px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        @media (width <= 960px) {
          gap: 20px;
          width: 100%;
          height: auto;
        }

        @media (width < 768px) {
          gap: 0;
          padding-top: 20px;

          &.text {
            gap: 20px;
          }
        }

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

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

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

        .body {
          .image {
            width: 100%;
          }

          .small {
            color: #ed6103;
            font-size: 24px;
            font-weight: bold;
            line-height: 1;
            letter-spacing: 0;
          }

          .strong {
            color: #ed6103;
            font-size: 100px;
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: -0.02em;

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

            @media (width >= 961px) and (width <= 990px) {
              font-size: 95px;
            }
          }
        }

        .notice {
          font-size: 10px;
          line-height: 1;
          letter-spacing: 0;
          width: 100%;
          padding-right: 16px;
          text-align: right;

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

        .dummy {
          height: 10px;
        }
      }
    }
  }
}

/** //abount partner */
/** recruit area */

.recruit-area .recruit .recruit-body .white-button {
  width: 312px;
}

/** // recruit area */

.recruit-area {
  background: linear-gradient(white 50%, transparent 50%),
    linear-gradient(transparent 50%, #edeff3 50%);
}

/** client faq */

.client-faq {
  background-color: #edeff3;
  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;
        }
      }
    }
  }
}

/** //client 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";
    }

    .body {
      margin-top: 124px;

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

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

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