body {
  background-color: #f5f1eb;
}

.header {
  background-color: inherit;

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

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

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

.heading2::before {
  content: "";
  position: absolute;
  top: -28px;
  left: -63px;
  width: 120px;
  height: 100px;
  background-image: url(../images/local/triangle_heading2.svg);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;

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

  @media (width >= 768px) and (width <= 960px) {
    width: 88px;
    height: 60px;
    top: -16px;
    left: -0;
  }
}

.heading2.white::before {
  background-image: url(../images/local/triangle_heading2_white.svg);
}

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

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

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

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

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    overflow: visible;
    position: relative;
    top: -642px;

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

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

      /** 1440px以降 */
      width: 261px;
      height: 179px;
      top: -12px;
      left: 584px;

      @media (width < 375px) {
        width: 128px;
        height: 88px;
        top: 294px;
        left: 205px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((2600vw / 393) + (13518px / 131));
        height: calc((600vw / 131) + (9278px / 131));
        top: calc((5800vw / 393) + (31264px / 131));
        left: calc((7900vw / 131) + (-2770px / 131));
      }

      @media (width = 768px) {
        width: 154px;
        height: 106px;
        top: 352px;
        left: 442px;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((2675vw / 168) + (222px / 7));
        height: calc((1825vw / 168) + (158px / 7));
        top: calc((325vw / -6) + (768px / 1));
        left: calc((1775vw / 84) + (1958px / 7));
      }
    }
  }
}

.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) {
      left: 40px;
      width: 52px;
      height: 52px;
    }
  }

  &.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) {
      left: 40px;
      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: 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) {
        top: 14px;
        right: 16px;
        width: 38px;
        height: 38px;
      }

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

    &.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) {
        right: 40px;
        width: 52px;
        height: 52px;
      }
    }

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

  .triangle-1 {
    object-fit: contain;
    position: absolute;
    opacity: 0;
    animation: fadeIn 1000ms ease-in-out;
    animation-delay: 1400ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 579px;
    height: 393px;
    top: 114px;
    right: -106px;

    @media (width < 375px) {
      width: 289px;
      height: 197px;
      top: 33px;
      right: -25px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((14300vw / 393) + (19984px / 131));
      height: calc((9700vw / 393) + (13682px / 131));
      top: calc((5600vw / 393) + (2677px / -131));
      right: calc((-5200vw / 393) + (3225px / 131));
    }

    @media (width = 768px) {
      width: 432px;
      height: 294px;
      top: 89px;
      right: -77px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((175vw / 8) + (264px / 1));
      height: calc((825vw / 56) + (1266px / 7));
      top: calc((625vw / 168) + (423px / 7));
      right: calc((-725vw / 168) + (-307px / 7));
    }
  }

  .triangle-2 {
    object-fit: contain;
    position: absolute;
    opacity: 0;
    animation: fadeIn 1000ms ease-in-out;
    animation-delay: 1400ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 112px;
    height: 87px;
    top: 348px;
    left: 581px;

    @media (width < 375px) {
      width: 50px;
      height: 39px;
      top: 423px;
      left: 210px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((400vw / 131) + (5050px / 131));
      height: calc((1000vw / 393) + (3859px / 131));
      top: calc((-21100vw / 393) + (81788px / 131));
      left: calc((500vw / 393) + (26885px / 131));
    }

    @media (width = 768px) {
      width: 62px;
      height: 49px;
      top: 212px;
      left: 215px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((625vw / 84) + (34px / 7));
      height: calc((475vw / 84) + (39px / 7));
      top: calc((425vw / 21) + (396px / 7));
      left: calc((1525vw / 28) + (-1423px / 7));
    }
  }

  .triangle-3 {
    object-fit: contain;
    position: absolute;
    opacity: 0;
    animation: fadeIn 1000ms ease-in-out;
    animation-delay: 1400ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 68px;
    height: 53px;
    top: 19px;
    right: 532px;

    @media (width < 375px) {
      width: 33px;
      height: 26px;
      top: 311px;
      right: 12px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((200vw / 131) + (3573px / 131));
      height: calc((200vw / 131) + (2656px / 131));
      top: calc((5900vw / 393) + (33366px / 131));
      right: calc((4500vw / 131) + (15303px / -131));
    }

    @media (width = 768px) {
      width: 39px;
      height: 32px;
      top: 370px;
      right: 147px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((725vw / 168) + (41px / 7));
      height: calc((25vw / 8) + (8px / 1));
      top: calc((2925vw / -56) + (5398px / 7));
      right: calc((1375vw / 24) + (-293px / 1));
    }
  }

  .triangle-4 {
    object-fit: contain;
    position: absolute;
    opacity: 0;
    animation: fadeIn 1000ms ease-in-out;
    animation-delay: 1400ms;
    animation-fill-mode: forwards;

    /** 1440px以降 */
    width: 53px;
    height: 41px;
    top: 134px;
    right: 198px;

    @media (width < 375px) {
      width: 26px;
      height: 20px;
      top: 112px;
      right: 32px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((200vw / 131) + (2656px / 131));
      height: calc((500vw / 393) + (1995px / 131));
      top: calc((6800vw / 393) + (6172px / 131));
      right: calc((800vw / 393) + (3192px / 131));
    }

    @media (width = 768px) {
      width: 32px;
      height: 25px;
      top: 180px;
      right: 40px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((25vw / 8) + (8px / 1));
      height: calc((50vw / 21) + (47px / 7));
      top: calc((-575vw / 84) + (1628px / 7));
      right: calc((1975vw / 84) + (984px / -7));
    }
  }

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

    /** 1440px以降 */
    width: 753px;
    height: 512px;
    top: 57px;
    left: -36px;

    @media (width < 375px) {
      width: 336px;
      height: 227px;
      top: 329px;
      left: -54px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((5400vw / 131) + (23766px / 131));
      height: calc((3700vw / 131) + (15862px / 131));
      top: calc((15200vw / -393) + (62099px / 131));
      left: calc((-1600vw / 393) + (-5074px / 131));
    }

    @media (width = 768px) {
      width: 498px;
      height: 338px;
      top: 177px;
      left: -70px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((2125vw / 56) + (1446px / 7));
      height: calc((725vw / 28) + (974px / 7));
      top: calc((-125vw / 7) + (2199px / 7));
      left: calc((425vw / 84) + (-762px / 7));
    }
  }

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

    /** 1440px以降 */
    width: 199px;
    height: 137px;
    top: 425px;
    right: 124px;

    @media (width < 375px) {
      width: 95px;
      height: 66px;
      top: 420px;
      right: -11px;
    }

    @media (width >= 375px) and (width < 768px) {
      width: calc((1700vw / 393) + (10320px / 131));
      height: calc((400vw / 131) + (7146px / 131));
      top: calc((2600vw / 131) + (45270px / 131));
      right: calc((9800vw / 393) + (-13691px / 131));
    }

    @media (width = 768px) {
      width: 112px;
      height: 78px;
      top: 498px;
      right: 87px;
    }

    @media (width > 768px) and (width < 1440px) {
      width: calc((725vw / 56) + (88px / 7));
      height: calc((1475vw / 168) + (74px / 7));
      top: calc((1825vw / -168) + (4070px / 7));
      right: calc((925vw / 168) + (313px / 7));
    }
  }

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

    /** 1440px以降 */
    top: 206px;
    left: 766px;

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

    @media (width >= 375px) and (width < 768px) {
      top: calc((500vw / -393) + (7699px / 131));
      left: calc((11800vw / 131) + (36259px / -131));
    }

    @media (width = 768px) {
      top: 49px;
      left: 415px;
    }

    @media (width > 768px) and (width < 1440px) {
      top: calc((3925vw / 168) + (-913px / 7));
      left: calc((2925vw / 56) + (97px / 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 {
    z-index: 3;
    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: 336px;
    left: 766px;

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

    @media (width >= 375px) and (width < 768px) {
      top: calc((3400vw / 393) + (19723px / 131));
      left: calc((11800vw / 131) + (36259px / -131));
    }

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

    @media (width = 768px) {
      top: 217px;
      left: 415px;
    }

    @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((425vw / 24) + (81px / 1));
      left: calc((2925vw / 56) + (97px / 7));
    }
  }
}

/** // キービジュアル */
/** 自治体一覧 */

.local-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: #187f50;
    }
  }

  .gallery {
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    padding: 15px 0 27px 0;

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

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

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

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

      .card {
        text-align: center;

        .image {
          width: 140px;
          height: 96px;

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

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

        .name {
          font-size: 12px;
          font-weight: bold;
          line-height: 1.2;
          letter-spacing: 0.1em;

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

/** //企業一覧 */
/** approach */

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

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

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

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

    .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;
      }
    }

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

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

  .body {
    .image {
      width: 100%;
      height: auto;

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

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

/** // approach */
/** business */

.business {
  background-color: #f5f1eb;
  width: 100%;
  padding-top: 158px;
  padding-bottom: 144px;
  border-radius: 0 0 60px 60px;

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

  > .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 {
      text-align: left;
      margin-bottom: 54px;

      @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 {
    @media (width < 768px) {
      padding-left: 16px;
      padding-right: 16px;
      padding-bottom: 32px;
    }

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

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

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

      .card {
        margin-top: 40px;
        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: #187f50;
            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;

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

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

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

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

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

/** //business */
/** case study */

.case-study {
  max-width: 100%;
  margin: 120px 0 130px 0;

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

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

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

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

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

    .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;
      }
    }
  }

  .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%;
        max-width: 1060px;
        height: auto;
        border: 2px solid #f3eee8;
        border-radius: 12px;
        display: flex;

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

        .description {
          background-color: #f3eee8;
          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 #187f50;
            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;
            }

            .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: 12px;
            }

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

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

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

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

            .image {
              width: 72px;
              height: 72px;
            }

            .text {
              color: #187f50;

              .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;
          text-align: center;
          line-height: 0;

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

          @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: flex;
          }

          & picture {
            width: 100%;
          }

          .image {
            width: 255px;
            height: 50%;
            object-fit: cover;

            &.upper {
              border-radius: 0 10px 0 0;

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

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

            &.lower {
              border-radius: 0 0 10px 0;

              @media (width < 768px) {
                border-radius: 0 0 10px 10px;
              }
            }

            @media (width < 768px) {
              width: 100%;
              height: 152px;
              object-fit: cover;
            }

            @media (width >= 768px) and (width <= 960px) {
              width: 100%;
              height: 304px;
              object-fit: cover;
            }
          }
        }
      }

      .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);
          }

          .local-voice {
            margin-top: 36px;
            height: auto;
            opacity: 1;

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

        .result {
          height: inherit;
          opacity: 1;
        }
      }
    }
  }

  .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);
      }
    }
  }
}

/** //case study */
/** client municipalities */

.client-municipalities {
  width: 100%;
  background-color: #f5f1eb;
  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;
  }

  .content {
    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) {
      margin-left: 40px;
      margin-right: 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 {
      /* 下5行にするため逆順に表示するように対応 */
      width: 100%;
      background-color: #fff;
      border-radius: 12px;
      padding: 50px clamp(20px, calc(20px + 15 * ((100vw - 961px) / 179)), 35px);
      text-align: center;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap-reverse;
      justify-content: center;
      align-items: center;
      gap: 32px;

      @media (width < 768px) {
        column-gap: 16px;
        row-gap: 24px;
        padding: 30px
          clamp(5px, calc(5px + 184 * ((100vw - 375px) / 393)), 200px);
      }

      @media (width >= 768px) and (width <= 960px) {
        gap: 20px;
        padding: 30px
          clamp(30px, calc(30px + 45 * ((100vw - 768px) / 192)), 75px);
      }

      .card {
        text-align: center;

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

        .image {
          width: 140px;
          height: 96px;

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

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

        .name {
          font-size: 12px;
          font-weight: bold;
          line-height: 1.2;
          letter-spacing: 0.1em;
        }
      }
    }
  }
}

/** //client municipalities */
/** abount partner */

.abount-partner {
  max-width: 1060px;
  margin: 0 max(calc(50% - 530px), 40px) 0 max(calc(50% - 530px), 40px);
  padding-top: 130px;
  position: relative;
  z-index: 1;

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

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

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

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

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

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

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

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

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

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

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

      .item {
        width: 100%;
        max-width: 350px;
        height: 378px;
        border: 2px solid #187f50;
        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%;
          max-width: none;
          height: auto;
        }

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

          &.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;
          text-align: center;
          height: 3em;

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

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

        .body {
          &.full {
            width: 100%;
          }

          .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;
            margin: 0 6px;

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

        .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 */
/** partner voice */

.partner-voice {
  width: 100%;
  margin-bottom: 144px;
  padding-top: 130px;
  position: relative;
  z-index: 1;

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

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

  > .head {
    max-width: 1060px;
    margin: 0 max(calc(50% - 530px), 40px) 65px max(calc(50% - 530px), 40px);

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

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

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

  > .content {
    .voices {
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 23px;

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

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

      @media (width <= 960px) {
        justify-content: normal;
        gap: 0;
      }

      .voice {
        width: 518px !important;
        height: 541px;
        border-radius: 12px;
        background-color: #f5f1eb;
        padding: 31px 0 56px 50px;

        @media (width < 768px) {
          padding: 24px 0 24px 24px;
          width: 323px !important;
          height: auto;
        }

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

        @media (width >= 961px) and (width <= 1140px) {
          width: calc((100vw - 104px) / 2) !important;
        }

        .head {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          padding-bottom: 36px;
          border-bottom: 1px solid #187f50;

          @media (width < 768px) {
            position: relative;
            padding-bottom: 27px;
          }

          @media (width <= 960px) {
            border-bottom: 2px solid #187f50;
          }

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

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

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

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

          .image {
            width: 202px;
            height: 140px;
            object-fit: contain;
            object-position: left;
            margin-right: 15px;

            @media (width < 768px) {
              width: 112px;
              position: absolute;
              bottom: 14px;
              right: 15px;
              margin-right: 0;
            }

            @media (width >= 768px) and (width <= 960px) {
              width: 139px;
              margin-right: 43px;
            }
          }
        }

        .body {
          font-size: 16px;
          line-height: 2;
          letter-spacing: 0.1em;
          padding-top: 24px;
          padding-right: 50px;

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

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

  .partner-navigation {
    max-width: 100%;
    margin: 32px 40px 0 40px;
    display: flex;
    align-items: center;
    gap: 16px;

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

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

    .partner-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);
      }
    }

    .partner-pagination {
      width: auto;

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

        .splide__pagination__page {
          opacity: 1;

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

    .partner-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 */
/** recruit area */

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

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

/** // recruit area */
/** partner faq */

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

  .content {
    max-width: 1100px;
    margin: 0 max(calc(50% - 530px), 40px) 0 max(calc(50% - 530px), 40px);

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

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

    .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: 112px;

    margin-bottom: 0;
    padding-bottom: 96px;

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

    .head {
      width: 180px;

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

    .body {
      margin-top: 124px;

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

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

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