body {
  background-color: #f7f7f7;
}

.header {
  background-color: #f7f7f7;
}

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

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

.key-visual {
  background-color: #f7f7f7;

  > .body {
    width: 100%;
    max-width: 1440px;
    height: 641px;
    margin: 0 auto;
    position: relative;

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

    @media (width >= 375px) and (width < 768px) {
      height: calc((3400vw / -393) + (82850px / 131));
    }

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

    @media (width > 768px) and (width < 1440px) {
      height: calc((625vw / 56) + (3362px / 7));
    }

    .heading {
      position: absolute;

      .heading-body {
        padding: 58px;

        @media (width <= 960px) {
          padding: 32px;
          display: inline-block;
        }

        @media (width < 450px) {
          width: calc(100% - 32px);
        }

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

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

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

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

        > .text {
          font-size: 16px;
          font-weight: normal;
          line-height: 2;
          letter-spacing: 0.15em;
          /* opacity: 0; */
          /* animation: fadeInUp 500ms ease-in-out;
          animation-delay: 600ms;
          animation-fill-mode: forwards; */
          margin-top: 20px;

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

      /** 1440px以降 */
      top: 106px;
      left: 156px;

      @media (width < 450px) {
        top: 14px;
        left: 16px;
      }

      @media (width >= 450px) and (width < 768px) {
        top: calc((9200vw / 393) + (9666px / -131));
        left: calc((800vw / 131) + (904px / -131));
      }

      @media (width = 768px) {
        top: 106px;
        left: 40px;
      }

      @media (width > 768px) and (width < 1440px) {
        top: 106px;
        left: calc((725vw / 42) + (648px / -7));
      }
    }

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

      /** 1440px以降 */
      width: 96px;
      height: 96px;
      top: 27px;
      right: 418px;

      @media (width < 375px) {
        width: 47px;
        height: 48px;
        top: 280px;
        right: 187px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((2200vw / 393) + (3407px / 131));
        height: calc((700vw / 131) + (3663px / 131));
        top: calc((26300vw / -393) + (69555px / 131));
        right: calc((3700vw / 393) + (19872px / 131));
      }

      @media (width = 768px) {
        width: 69px;
        height: 69px;
        top: 17px;
        right: 224px;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((225vw / 56) + (267px / 7));
        height: calc((225vw / 56) + (267px / 7));
        top: calc((125vw / 84) + (39px / 7));
        right: calc((2425vw / 84) + (16px / 7));
      }
    }

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

      /** 1440px以降 */
      width: 56px;
      height: 56px;
      top: 269px;
      right: 137px;

      @media (width < 375px) {
        width: 19px;
        height: 19px;
        top: 405px;
        right: 57px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((200vw / 131) + (1739px / 131));
        height: calc((200vw / 131) + (1739px / 131));
        top: calc((-20800vw / 393) + (79055px / 131));
        right: calc((1300vw / -131) + (12342px / 131));
      }

      @media (width = 768px) {
        width: 25px;
        height: 25px;
        top: 197px;
        right: 18px;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((775vw / 168) + (-73px / 7));
        height: calc((775vw / 168) + (-73px / 7));
        top: calc((75vw / 7) + (803px / 7));
        right: calc((425vw / 24) + (-118px / 1));
      }
    }

    .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: 97px;
      height: 97px;
      top: 132px;
      right: 654px;

      @media (width < 375px) {
        width: 48px;
        height: 48px;
        top: 366px;
        right: 293px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((4600vw / 393) + (538px / 131));
        height: calc((4600vw / 393) + (538px / 131));
        top: calc((23800vw / -393) + (77696px / 131));
        right: calc((2500vw / 393) + (35258px / 131));
      }

      @media (width = 768px) {
        width: 94px;
        height: 94px;
        top: 128px;
        right: 318px;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((25vw / 56) + (634px / 7));
        height: calc((25vw / 56) + (634px / 7));
        top: calc((25vw / 42) + (864px / 7));
        right: calc((50vw / 1) + (-66px / 1));
      }
    }

    .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: 39px;
      height: 39px;
      top: 445px;
      right: 523px;

      @media (width < 375px) {
        width: 19px;
        height: 19px;
        top: 521px;
        right: 213px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((300vw / 131) + (1364px / 131));
        height: calc((300vw / 131) + (1364px / 131));
        top: calc((-15700vw / 393) + (87876px / 131));
        right: calc((7000vw / 393) + (19153px / 131));
      }

      @media (width = 768px) {
        width: 28px;
        height: 28px;
        top: 364px;
        right: 283px;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((275vw / 168) + (108px / 7));
        height: calc((275vw / 168) + (108px / 7));
        top: calc((675vw / 56) + (1900px / 7));
        right: calc((250vw / 7) + (61px / 7));
      }
    }

    .triangle-1 {
      background: url("../images/local/triangle_1.svg") no-repeat;
      background-size: contain;
      position: absolute;
      opacity: 0;
      animation: fadeIn 1000ms ease-in-out;
      animation-delay: 1400ms;
      animation-fill-mode: forwards;

      /** 1440px以降 */
      width: 100px;
      height: 71px;
      top: 357px;
      right: 196px;

      @media (width < 375px) {
        width: 49px;
        height: 36px;
        top: 458px;
        right: 44px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((2500vw / 393) + (3294px / 131));
        height: calc((500vw / 131) + (2841px / 131));
        top: calc((-4300vw / 393) + (65373px / 131));
        right: calc((17900vw / 393) + (16611px / -131));
      }

      @media (width = 768px) {
        width: 74px;
        height: 51px;
        top: 415px;
        right: 223px;
        z-index: 1;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((325vw / 84) + (310px / 7));
        height: calc((125vw / 42) + (197px / 7));
        top: calc((-725vw / 84) + (3369px / 7));
        right: calc((225vw / -56) + (1777px / 7));
        z-index: 1;
      }
    }

    .triangle-2 {
      background: url("../images/local/triangle_2.svg") no-repeat;
      background-size: contain;
      position: absolute;
      opacity: 0;
      animation: fadeIn 1000ms ease-in-out;
      animation-delay: 1400ms;
      animation-fill-mode: forwards;

      /** 1440px以降 */
      width: 49px;
      height: 35px;
      top: 561px;
      right: 196px;
      z-index: 3;

      @media (width < 375px) {
        width: 26px;
        height: 18px;
        top: 568px;
        right: 28px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((1100vw / 393) + (2031px / 131));
        height: calc((300vw / 131) + (1233px / 131));
        top: calc((-2600vw / 131) + (84158px / 131));
        right: calc((-300vw / 131) + (4793px / 131));
      }

      @media (width = 768px) {
        width: 37px;
        height: 27px;
        top: 490px;
        right: 19px;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((25vw / 14) + (163px / 7));
        height: calc((25vw / 21) + (125px / 7));
        top: calc((1775vw / 168) + (2862px / 7));
        right: calc((1475vw / 56) + (-1283px / 7));
      }
    }

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

      /** 1440px以降 */
      width: 282px;
      height: 273px;
      top: 17px;
      right: 166px;

      @media (width < 375px) {
        width: 136px;
        height: 131px;
        top: 280px;
        right: 66px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((6800vw / 393) + (9316px / 131));
        height: calc((6600vw / 393) + (8911px / 131));
        top: calc((-26300vw / 393) + (69555px / 131));
        right: calc((-2700vw / 393) + (12021px / 131));
      }

      @media (width = 768px) {
        width: 204px;
        height: 197px;
        top: 17px;
        right: 39px;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((7800vw / 672) + (804px / 7));
        height: calc((7600vw / 672) + (771px / 7));
        top: 17px;
        right: calc((12700vw / 672) + (-743px / 7));
      }
    }

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

      /** 1440px以降 */
      width: 313px;
      height: 298px;
      top: 167px;
      right: 417px;

      @media (width < 375px) {
        width: 156px;
        height: 148px;
        top: 382px;
        right: 175px;
      }

      @media (width >= 375px) and (width < 768px) {
        width: calc((7100vw / 393) + (11561px / 131));
        height: calc((6700vw / 393) + (11013px / 131));
        top: calc((-21400vw / 393) + (76792px / 131));
        right: calc((200vw / -131) + (23675px / 131));
      }

      @media (width = 768px) {
        width: 227px;
        height: 215px;
        top: 168px;
        right: 169px;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((1075vw / 84) + (901px / 7));
        height: calc((2075vw / 168) + (841px / 7));
        top: calc((-25vw / 168) + (1184px / 7));
        right: calc((775vw / 21) + (-801px / 7));
      }
    }

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

      /** 1440px以降 */
      width: 364px;
      height: 247px;
      top: 330px;
      right: 166px;

      @media (width <= 375px) {
        width: 186px;
        height: 131px;
        top: 443px;
        right: 26px;
      }

      @media (width > 375px) and (width < 768px) {
        width: calc((7700vw / 393) + (14741px / 131));
        height: calc((4700vw / 393) + (11286px / 131));
        top: calc((-4000vw / 131) + (73033px / 131));
        right: calc((-800vw / 393) + (4406px / 131));
        z-index: 2;
      }

      @media (width = 768px) {
        width: 263px;
        height: 178px;
        top: 323px;
        right: 18px;
        z-index: 2;
      }

      @media (width > 768px) and (width < 1440px) {
        width: calc((2525vw / 168) + (1033px / 7));
        height: calc((575vw / 56) + (694px / 7));
        top: calc((25vw / 24) + (315px / 1));
        right: calc((925vw / 42) + (1058px / -7));
        z-index: 2;
      }
    }
  }
}

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

.about-fam {
  background-color: white;
  margin-bottom: 140px;

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

  > .header-text-area {
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 144px;

    @media (width < 768px) {
      display: flex;
      justify-content: center;
    }

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

    > .header-text {
      max-width: 1440px;
      margin: 0 auto;
      padding: 50px 0;
      word-break: keep-all;
      font-size: 20px;
      font-weight: bold;
      line-height: 2;
      letter-spacing: 0.15em;
      color: #ed6103;
      text-align: center;

      @media (width >= 768px) and (width <= 960px) {
        padding: 40px 130px;
        font-size: 16px;
        letter-spacing: 0.1em;
      }

      @media (width < 768px) {
        padding: 32px 40px;
        font-size: 14px;
        letter-spacing: 0.1em;
        text-align: left;
      }

      .line-2 {
        display: none;

        @media (width >= 768px) and (width <= 1135px) {
          display: block;
        }
      }

      .line-3 {
        display: none;

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

  > .body {
    max-width: 1060px;
    height: 661px;
    margin: 0 auto;
    position: relative;

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

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

    .heading {
      position: absolute;
      top: 0;
      left: 0;

      @media (width <= 1140px) {
        position: relative;
        width: 100%;
        margin-bottom: 32px;

        .heading-body {
          display: flex;
          justify-content: center;
          padding: 50px 0 62px 0;
        }
      }
    }

    .text {
      width: 342px;
      position: absolute;
      top: 262px;
      left: 0;
      font-size: 16px;
      font-weight: bold;
      line-height: 2;
      letter-spacing: 0.15em;
      color: #ed6103;

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

      @media (width <= 1140px) {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
      }
    }

    .secondary-button {
      position: absolute;
      width: 288px;
      top: 550px;
      left: 0;
      letter-spacing: 0.1em;

      @media (width <= 1140px) {
        position: relative;
        width: 249px;
        top: 32px;
        left: 0;
        letter-spacing: 0;
        margin: 0 auto 64px auto;
      }
    }

    .images {
      position: relative;

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

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

      .image_1 {
        position: absolute;
        width: 316px;
        height: 316px;
        top: 49px;
        left: 742px;
        border-radius: 16px;

        @media (width < 768px) {
          width: 180px;
          height: 180px;
          top: 40px;
          left: calc(50% - 9px);
        }

        @media (width >= 768px) and (width <= 1140px) {
          top: 40px;
          left: calc(50% - 16px);
        }
      }

      .image_2 {
        position: absolute;
        width: 316px;
        height: 316px;
        top: 344px;
        left: 451px;
        border-radius: 16px;

        @media (width < 768px) {
          width: 180px;
          height: 180px;
          top: 142px;
          left: calc(50% - 172px);
        }

        @media (width >= 768px) and (width <= 1140px) {
          top: 175px;
          left: calc(50% - 300px);
        }
      }
    }
  }
}

/** // abount fam */

/** service */

.service {
  background-color: white;

  > .body {
    max-width: 1058px;
    height: 882px;
    margin: 0 auto;
    position: relative;

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

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

    .heading {
      position: absolute;
      top: 0;
      left: 0;

      @media (width <= 1140px) {
        position: relative;
        width: 100%;
        margin-bottom: 32px;

        .heading-body {
          display: flex;
          justify-content: center;
          padding: 50px 0 62px 0;
        }
      }
    }

    > .text {
      width: 462px;
      position: absolute;
      top: 262px;
      left: 0;
      font-size: 16px;
      font-weight: bold;
      line-height: 2;
      letter-spacing: 0.15em;
      color: #ed6103;

      @media (width <= 1140px) {
        position: relative;
        top: 0;
      }

      @media (width < 768px) {
        width: 100%;
        margin-bottom: 40px;
      }

      @media (width >= 768px) and (width <= 1140px) {
        width: 100%;
        margin-bottom: 60px;
      }
    }

    > .fam-links {
      @media (width <= 1140px) {
        flex-direction: column;
        gap: 4px;
      }

      .link {
        position: absolute;
        width: 510px;
        height: 341px;
        border-radius: 12px;

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

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

        @media (width <= 1140px) {
          position: relative;
          width: 100%;

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

        .text-area {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: flex-start;
          gap: 8px;
          padding-bottom: 24px;

          .title {
            font-size: 24px;

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

          .text {
            display: block;
            width: 244px;
            color: #1f1f1f;
            font-size: 14px;
            font-weight: normal;
            line-height: 2;
            letter-spacing: 0.15em;
            position: absolute;

            .with-tb {
              @media (width >= 768px) and (width <= 1140px) {
                display: block;
              }
            }
          }

          @media (width <= 1140px) {
            top: 0;
            left: calc(50% - 35px);

            .sub-title,
            .title,
            .text {
              position: relative;
              top: 0;
              left: 0;
            }

            .text {
              letter-spacing: 0.1em;
              width: 192px;
            }
          }

          @media (width >= 768px) and (width <= 1140px) {
            left: calc(50% - 70px);

            .text {
              width: 100%;
            }
          }
        }

        .more {
          top: 17px;
          right: 44px;
        }
      }

      .partner-link {
        top: 160px;
        right: 0;

        @media (width <= 1140px) {
          top: 0;
        }

        &:before {
          width: 248px;
          height: 248px;
          top: 61px;
          left: 168px;

          @media (width < 768px) {
            width: 240px;
            height: 240px;
            top: 62px;
            left: calc(50% - 96px);
          }

          @media (width >= 768px) and (width <= 1140px) {
            width: 214px;
            height: 214px;
            top: 22px;
            left: calc(50% - 181px);
          }
        }

        &:after {
          width: 160px;
          height: 152px;
          top: 48px;
          left: 51px;

          @media (width < 768px) {
            width: 118px;
            height: 113px;
            top: 38px;
            left: calc(50% - 139px);
          }

          @media (width >= 768px) and (width <= 1140px) {
            width: 160px;
            height: 152px;
            top: 44px;
            left: calc(50% - 286px);
          }
        }

        .sub-title {
          top: 89px;
          left: 237px;
        }

        .title {
          top: 123px;
          left: 237px;
        }

        .more:before {
          width: 40px;
          height: 40px;
          top: -6px;
          left: -27px;
        }

        .text {
          top: 203px;
          left: 237px;
        }
      }

      .client-link {
        top: 423px;
        left: 0;

        @media (width <= 1140px) {
          top: 0;
        }

        &:before {
          width: 219px;
          height: 263px;
          top: 29px;
          left: 109px;

          @media (width < 768px) {
            width: 188px;
            height: 235px;
            top: 62px;
            left: calc(50% - 109px);
          }

          @media (width >= 768px) and (width <= 1140px) {
            width: 155px;
            height: 194px;
            top: 35px;
            left: calc(50% - 200px);
          }
        }

        &:after {
          width: 131px;
          height: 127px;
          top: 136px;
          left: 37px;

          @media (width < 768px) {
            width: 110px;
            height: 107px;
            top: 16px;
            left: calc(50% - 158px);
          }

          @media (width >= 768px) and (width <= 1140px) {
            width: 131px;
            height: 127px;
            top: 66px;
            left: calc(50% - 280px);
          }
        }

        .sub-title {
          top: 52px;
          left: 209px;
        }

        .title {
          top: 88px;
          left: 209px;
          letter-spacing: 0.1em;

          & .with-top {
            display: block;

            @media (width >= 768px) and (width <= 1140px) {
              display: none;
            }
          }
        }

        .more:before {
          width: 30px;
          height: 30px;
        }

        .text {
          top: 204px;
          left: 209px;
        }
      }

      .local-link {
        top: 541px;
        right: 0;

        @media (width <= 1140px) {
          top: 0;
        }

        &:before {
          width: 320px;
          height: 217px;
          top: 61px;
          left: 73px;

          @media (width < 768px) {
            width: 264px;
            height: 179px;
            top: 53px;
            left: calc(50% - 143px);
          }

          @media (width >= 768px) and (width <= 1140px) {
            width: 264px;
            height: 179px;
            top: 48px;
            left: calc(50% - 238px);
          }
        }

        &:after {
          width: 191px;
          height: 130px;
          top: 172px;
          left: 280px;

          @media (width < 768px) {
            width: 149px;
            height: 101px;
            top: 18px;
            left: calc(50% - 149px);
          }

          @media (width >= 768px) and (width <= 1140px) {
            width: 191px;
            height: 129px;
            top: 67px;
            left: calc(50% - 305px);
          }
        }

        .sub-title {
          top: 60px;
          left: 58px;
        }

        .title {
          top: 94px;
          left: 58px;
        }

        .more:before {
          width: 48px;
          height: 33px;
          left: -28px;
        }

        .text {
          top: 174px;
          left: 58px;
        }
      }
    }
  }
}

/** // service */
/** recently-news-list */

.recently-news-list > .content {
  flex-direction: row;

  @media (width < 768px) {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 64px;
  }

  @media (width >= 768px) and (width <= 960px) {
    flex-direction: column;
    gap: 32px;
  }

  > .head {
    .heading2 {
      padding: 0;

      .main-text {
        font-size: 36px;

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

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

    .secondary-button {
      width: 184px;

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

  > .body {
    max-width: 790px;
    margin-top: 107px;

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

/** // recently-news-list */
/** banner */

.banner {
  display: block;
  width: 875px;
  height: 200px;
  margin: 0 auto 64px auto;
  background-image: url(../images/banner/fam_banner_pc.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 16px;
  position: relative;

  @media (width < 768px) {
    width: calc(100% - 32px);
    height: 229px;
    aspect-ratio: 343 / 229;
    background-image: url(../images/banner/fam_banner_sp.jpg);
    background-size: cover;
    background-position: bottom;
  }

  @media (width >= 768px) and (width <= 960px) {
    width: 688px;
    background-image: url(../images/banner/fam_banner_tb.jpg);
  }

  > .text {
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.8;
    letter-spacing: 0.1em;
    position: absolute;
    top: 42px;
    left: 359px;

    @media (width < 768px) {
      position: relative;
      top: 23px; /* top: calc(23px + (100vw - 375px) / 2.5); */
      left: 0;
      line-height: 1.7;
      letter-spacing: 0.05em;
      text-align: center;
    }

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

  > .secondary-button {
    position: absolute;
    top: 105px;
    left: 359px;
    padding: 12px 24px;
    line-height: 1;
    height: auto;

    @media (width < 768px) {
      position: relative;
      top: 33px; /* top: calc(33px + (100vw - 375px) / 2.5); */
      left: 0;
      width: 325px;
      text-align: center;
      margin: 0 auto;
      padding: 18px 16px;
    }

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

/** // banner */