/*----------------------
共通
-----------------------*/
html {
  scroll-behavior: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-size: 16px;
  color: #333;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  overflow-x: hidden;
  letter-spacing: 0.08em;
  line-height: 1.5;
  font-family:
    -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  margin: 0;
}

.lp-robot {
  img,
  svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  li {
    list-style: none;
  }

  a {
    color: #3e3e3e;
    cursor: pointer;
  }

  p {
    font-size: 1rem;
    line-height: 1.4;

    @media screen and (max-width: 768px) {
      font-size: 0.875rem;
    }
  }

  .white {
    color: #fff !important;
  }

  .black {
    color: #333 !important;
  }

  .blue {
    color: #0040ae !important;
  }
  .yellow {
    color: #f2ca04 !important;
  }

  .green {
    color: #007e7e !important;
  }

  .green-b {
    background: linear-gradient(135deg, #007e7e, #015151) !important;
  }

  .flex {
    display: flex;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }

  .t-left {
    text-align: left;
  }

  .t-center {
    text-align: center;
  }

  .t-right {
    text-align: right;
  }

  .sp {
    display: none;

    @media screen and (max-width: 768px) {
      display: block;
    }
  }

  .common-txt {
    text-align: center;
    margin-bottom: 24px;
  }

  .common-main-ttl {
    font-size: clamp(2.5rem, 1.5rem + 2.0833vw, 4rem);
    font-weight: 600;
    line-height: 1.2;
  }

  .common-sub-ttl {
    font-size: clamp(1rem, 0.125rem + 1.5625vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
  }

  @media screen and (max-width: 768px) {
    .sp {
      display: block;
    }

    .pc {
      display: none;
    }
  }

  h1 {
    line-height: unset;
    margin-bottom: unset;
  }

  h2 {
    line-height: unset;
    margin-bottom: unset;
  }

  h3 {
    line-height: unset;
    margin-bottom: unset;
  }

  h4 {
    line-height: unset;
    margin-bottom: unset;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.c-btns {
  display: flex;
  justify-content: center;
  margin-top: 24px;

  .c-btn {
    display: flex;
    gap: 8px;
    background: #fff;
    border-radius: 5px;
    padding: 8px 24px;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      color 0.3s ease,
      background 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(105, 197, 189, 0.4);
      background: linear-gradient(135deg, #69c5bd, #b8d7ff);

      span {
        color: #fff;
      }

      img {
        filter: brightness(0) invert(1);
      }
    }

    img {
      width: 24px;
      margin-top: 2px;
    }

    span {
      color: #5ba1de;
      font-weight: 600;
    }
  }
}

.lp-robot {
  background-image: url("../../assets/img/lp-robot/bg.jpg") !important;
  background: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .lp-bg {
    width: 100%;
    height: 100hv;
    background-image: url("../../assets/img/lp-robot/fv.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;

    .lp-bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    .lp-fv-cont {
      position: relative;
      z-index: 2;

      .fv-marquee {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
        top: -48px;
        z-index: 0;

        @media (max-width: 991px) {
          top: -18px;
        }

        .fv-marquee-inner {
          display: inline-flex;
          animation: marquee 120s linear infinite;

          span {
            padding: 0 1em;
            font-size: clamp(5rem, 0rem + 10.4167vw, 12.5rem);
            font-weight: bold;
            letter-spacing: 0.1em;
            color: #ffffff65;
            font-weight: 900;
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1;

            @media (max-width: 991px) {
              padding: 0 1rem;
            }
          }
        }
      }
      .cont {
        padding: 80px 32px;

        @media (max-width: 991px) {
          padding: 80px 16px 40px;
        }

        .box {
          max-width: 1280px;
          margin: 0 auto;

          .fv-ttl-cont {
            display: flex;
            justify-content: center;

            .fv-ttl {
              max-width: 80%;

              @media (max-width: 991px) {
                max-width: 100%;
              }
            }
          }

          .item-cont {
            margin-top: 16px;
            display: flex;
            gap: 24px;

            @media (max-width: 991px) {
              flex-direction: column;
              gap: 16px;
            }

            .item {
              width: 30%;
              border-radius: 15px;
              background: rgba(255, 255, 255, 0.1);
              backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px);
              border: 1px solid rgba(255, 255, 255, 0.4);

              @media (max-width: 991px) {
                width: 100%;
              }

              .over-cont {
                padding: 10px;
                border-radius: 15px;
                background: rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.4);

                .over-box {
                  position: relative;

                  .img {
                    width: 100%;
                    height: 160px;
                    overflow: hidden;
                    border-radius: 10px;

                    img {
                      width: 100%;
                      max-width: 100%;
                      height: auto;
                      display: block;
                      object-fit: cover;
                    }
                  }

                  .category-ttl-cont {
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: #1212a1;
                    padding: 4px 20px;
                    border-radius: 10px 0 10px 0;

                    .category-ttl {
                      font-size: 1rem;
                      font-weight: 600;
                    }
                  }
                }
              }

              .list-cont {
                padding: 10px;
                display: flex;
                justify-content: center;
                gap: 8px;

                .list {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: center;

                  .list-ttl {
                    font-size: 1rem;
                    color: #1212a1;
                    font-weight: 600;
                  }

                  ul {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    width: 100%;

                    li {
                      background-color: #fff;
                      border-radius: 5px;
                      padding: 4px 8px;
                      font-weight: 600;
                      text-align: center;
                      width: 100%;
                      font-size: 0.9rem;
                      white-space: nowrap;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .about {
    background-image: url("../../assets/img/lp-robot/about-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;

    .cont {
      padding: 180px 32px 80px;

      @media (max-width: 991px) {
        padding: 80px 16px 40px;
      }

      .box {
        max-width: 1320px;
        margin: 0 auto;
        position: relative;
        z-index: 1;

        .item-cont {
          padding: 10px;
          border-radius: 25px;
          background: rgba(65, 65, 65, 0.3);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(112, 112, 112, 0.4);
          position: relative;
          z-index: 1;

          @media (max-width: 991px) {
            padding: 4px;
          }

          .item {
            display: flex;
            gap: 40px;
            padding: 32px;
            border: 1px solid #ffffff75;
            border-radius: 20px;

            @media (max-width: 991px) {
              flex-direction: column-reverse;
              gap: 16px;
              padding: 8px;
            }

            .left {
              flex: 1;
              display: flex;
              align-items: center;

              .txt {
                display: flex;
                flex-direction: column;
                gap: 24px;

                @media (max-width: 991px) {
                  gap: 8px;
                }

                h4 {
                  font-size: clamp(1.25rem, 0.75rem + 1.0417vw, 2rem);
                  font-weight: 600;
                  color: #83b8fc;
                  line-height: 1.4;
                }

                .des {
                  line-height: 1.8;
                }
              }
            }

            .right {
              flex: 1.3;

              img {
                border-radius: 10px;
              }
            }
          }
        }

        .bg-txt-cont {
          position: absolute;
          top: -120px;
          left: 50%;
          transform: translateX(-50%);
          z-index: -1;
          line-height: 1;

          @media (max-width: 991px) {
            top: -50px;
          }

          .bg-txt {
            font-size: clamp(4rem, -0.8333rem + 10.0694vw, 11.25rem);
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.5);
            mix-blend-mode: overlay;
            line-height: 1;
          }
        }
      }
    }
  }

  .product {
    position: relative;

    .cont {
      padding: 80px 32px;

      @media (max-width: 991px) {
        padding: 40px 16px;
      }

      &.ttl-cont {
        padding: 80px 32px 0;

        @media (max-width: 991px) {
          padding: 40px 16px 0;
        }
      }

      &.content {
        padding: 0 32px 80px;

        @media (max-width: 991px) {
          padding: 0 16px 40px;
        }
      }

      .box {
        max-width: 1320px;
        margin: 0 auto;
        position: relative;
        z-index: 1;

        .ttl {
          display: flex;
          justify-content: center;
          position: relative;
          margin-bottom: 40px;

          .ttl-en {
            font-size: clamp(2.5rem, 0rem + 5.2083vw, 6.25rem);
            font-weight: 900;
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1;
            color: #b8d7ff4f;
          }

          .ttl-jp {
            position: absolute;
            top: 48px;
            font-size: clamp(1.25rem, 0.9167rem + 0.6944vw, 1.75rem);
            font-weight: 600;

            @media (max-width: 991px) {
              top: 20px;
            }
          }
        }

        .item-cont {
          .product-item-cont {
            background-color: #5ba1de;
            padding: 0 10px;
            border-radius: 10px;

            .product-item {
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              border-radius: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              overflow: hidden;
              height: 180px;

              @media (max-width: 991px) {
                height: 100px;
              }

              &::before {
                content: "";
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.35); /* 濃さはここで調整 */
                z-index: 0;
              }

              .product-ttl {
                font-weight: 600;
                font-size: clamp(1.5rem, 0.8333rem + 1.3889vw, 2.5rem);
              }
            }
          }

          .item {
            .item-box {
              display: flex;
              flex-direction: column;
              gap: 16px;
              margin-top: 24px;

              .item-category-ttl {
                background-color: #5ba1de;
                border-radius: 10px;
                text-align: center;
                padding: 4px 8px;
                margin-bottom: 4px;

                .item-category-name {
                  font-size: clamp(1.125rem, 0.875rem + 0.5208vw, 1.5rem);
                  font-weight: 600;
                }
              }

              .item-item {
                display: flex;
                gap: 20px;
                align-items: center;
                padding: 10px;
                border-radius: 10px;
                background: rgba(65, 65, 65, 0.3);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(112, 112, 112, 0.4);
                transition: border-color 0.3s;
                opacity: 1;

                &:hover {
                  border-color: rgba(105, 197, 189, 0.6); /* お好みで */
                }

                @media (max-width: 991px) {
                  flex-direction: column;
                  gap: 16px;
                }

                .img {
                  flex: 1;
                  overflow: hidden;
                  border-radius: 10px;

                  img {
                    border-radius: 10px;
                    transition: transform 0.4s ease;
                  }
                }

                &:hover .img img {
                  transform: scale(1.1);
                }

                .txt {
                  flex: 3;
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                  line-height: 1;

                  .ttl {
                    padding-bottom: 10px;
                    border-bottom: 1px solid #fff;
                    margin: 0;
                    display: unset;
                    justify-content: unset;

                    .product-name {
                      margin: 0;
                      display: flex;
                      align-items: flex-end;
                      gap: 8px;
                      line-height: 1;

                      span {
                        content: "";
                        width: 20px;
                        height: 20px;
                        background: linear-gradient(135deg, #69c5bd, #b8d7ff);
                        border-radius: 50%;
                        display: block;
                      }
                    }
                  }

                  .des {
                    line-height: 1.4;
                    margin: 0;
                  }
                }

                .btn-img {
                  flex: 0.5;

                  &.sp {
                    width: 100%;
                    text-align: center;

                    .detail {
                      background-color: #fff;
                      padding: 16px 24px;
                      font-weight: 600;
                      border-radius: 10px;
                    }
                  }

                  .img {
                    padding: 10px;
                    background: #ffffff79;
                    border-radius: 50%;
                  }
                }

                .btn-img.pc .img {
                  transition: transform 0.3s ease;
                }

                &:hover .btn-img.pc .img {
                  transform: translateX(6px);
                }
              }
            }
          }
        }
      }
    }
    .product-detail {
      background-color: #3a4354;
      border-radius: 10px;

      .cont {
        .box {
          .item-cont {
            .item {
              display: flex;
              flex-direction: column;
              gap: 16px;

              .item-category-ttl {
                background-color: #5ba1de;
                border-radius: 10px;
                text-align: center;
                padding: 0px 8px;
                margin-bottom: 4px;

                .item-category-name {
                  background-color: #ffffff;
                  padding: 4px 8px;
                  border-radius: 10px;
                  font-size: clamp(1.125rem, 0.875rem + 0.5208vw, 1.5rem);
                  font-weight: 600;
                  color: #5ba1de;
                }
              }

              .item-item {
                background: #ffffff2d;
                border-radius: 10px;

                .ttl-cont {
                  display: flex;
                  flex-direction: column;
                  gap: 4px;
                  padding-bottom: 16px;
                  border-bottom: 1px solid #fff;

                  .ttl-en {
                    font-size: clamp(1.5rem, 1.1667rem + 0.6944vw, 2rem);
                    font-weight: 900;
                    font-family: Arial, Helvetica, sans-serif;
                    color: #ffffff79;
                    line-height: 1;
                  }

                  .ttl-jp {
                    font-size: 1rem;
                    font-weight: 600;
                    line-height: 1;
                  }
                }

                .over {
                  padding: 32px;
                  max-width: 1120px;
                  margin: 0 auto;

                  @media (max-width: 991px) {
                    padding: 16px;
                  }

                  .content {
                    display: flex;
                    gap: 40px;
                    margin-top: 24px;

                    @media (max-width: 991px) {
                      flex-direction: column-reverse;
                      gap: 16px;
                      margin-top: 16px;
                    }

                    .left {
                      flex: 1;

                      .product-name-cont {
                        .product-name {
                          display: flex;
                          align-items: center;

                          gap: 8px;
                          font-size: clamp(1.5rem, 1.1667rem + 0.6944vw, 2rem);
                          font-weight: 900;
                          font-family: Arial, Helvetica, sans-serif;

                          span {
                            content: "";
                            width: 24px;
                            height: 24px;
                            background: #69c5bd;
                            border-radius: 50%;
                            display: block;
                            position: relative;
                            padding: 4px;

                            &::before {
                              position: absolute;
                              content: "";
                              top: 50%;
                              left: 50%;
                              transform: translate(-50%, -50%);
                              width: 30px;
                              height: 30px;
                              background: #69c5bd75;
                              border-radius: 50%;
                            }
                          }
                        }
                      }
                    }

                    .right {
                      flex: 0.8;
                      min-width: 0;
                      overflow: hidden;

                      .product-swiper {
                        width: 100%;
                        border-radius: 10px;
                        overflow: hidden;

                        .img {
                          width: 100%;
                          height: 300px;
                          overflow: hidden;

                          @media (max-width: 991px) {
                            height: 200px;
                          }

                          img {
                            width: 100% !important;
                            height: 100% !important;
                            object-fit: cover !important;
                          }
                        }

                        .swiper-pagination-bullet-active {
                          background: var(--swiper-pagination-color, #69c5bd);
                        }
                      }

                      /* デフォルト矢印を消す */
                      .swiper-button-prev::after,
                      .swiper-button-next::after {
                        content: "";
                      }

                      /* ボタン本体 */
                      .swiper-button-prev,
                      .swiper-button-next {
                        width: 48px;
                        height: 48px;
                        background: rgba(0, 0, 0, 0.6);
                        border-radius: 50%;
                        position: absolute;

                        @media (max-width: 991px) {
                          display: none;
                        }
                      }

                      /* 左矢印 */
                      .swiper-button-prev {
                        left: 10px;
                      }
                      .swiper-button-prev::before {
                        content: "";
                        display: block;
                        width: 12px;
                        height: 12px;
                        border-left: 3px solid #fff;
                        border-bottom: 3px solid #fff;
                        transform: rotate(45deg);
                        margin: 18px auto;
                      }

                      /* 右矢印 */
                      .swiper-button-next {
                        right: 10px;
                      }
                      .swiper-button-next::before {
                        content: "";
                        display: block;
                        width: 12px;
                        height: 12px;
                        border-right: 3px solid #fff;
                        border-top: 3px solid #fff;
                        transform: rotate(45deg);
                        margin: 18px auto;
                      }
                    }
                  }
                }

                .under-cont {
                  background: #333333;
                  border-radius: 10px;

                  .under {
                    max-width: 1120px;
                    margin: 0 auto;
                    padding: 32px;

                    @media (max-width: 991px) {
                      padding: 16px;
                    }

                    .content {
                      .c-btn {
                        background: unset;
                        border: 1px solid #fff;
                        isolation: isolate;
                        opacity: 1;

                        span {
                          color: #ffffff;
                        }

                        &:hover {
                          transform: translateY(-2px);
                          box-shadow: 0 8px 24px rgba(105, 197, 189, 0.4);
                          background: #0b97c2;

                          span {
                            color: #ffffff;
                          }

                          img {
                            filter: brightness(0) invert(1);
                          }
                        }
                      }

                      .pd-tabs {
                        display: flex;
                        border-bottom: 1px solid #333;
                        margin: 16px 0;
                        justify-content: center;
                        gap: 8px;

                        @media (max-width: 991px) {
                          justify-content: flex-start;
                          overflow-x: auto;
                          flex-wrap: nowrap;
                          -webkit-overflow-scrolling: touch;
                          scrollbar-width: none; /* Firefox */
                          padding-bottom: 4px;

                          &::-webkit-scrollbar {
                            display: none; /* Chrome/Safari */
                          }
                        }

                        .pd-tab-btn {
                          background: none;
                          border: none;
                          padding: 8px 16px;
                          font-size: 14px;
                          letter-spacing: 0.08em;
                          color: #ffffff;
                          cursor: pointer;
                          position: relative;
                          transition: color 0.2s;
                          white-space: nowrap;
                          background: #898989;
                          border-radius: 50px;
                          width: 100%;
                          max-width: 120px;
                          font-weight: 600;

                          @media (max-width: 991px) {
                            flex-shrink: 0;
                          }

                          &::after {
                            content: "";
                            position: absolute;
                            bottom: -1px;
                            left: 0;
                            right: 0;
                            height: 2px;
                            background: transparent;
                            transition: background 0.2s;
                          }

                          &.active {
                            color: #69c5bd;
                            background: #fff;
                          }

                          &:hover:not(.active) {
                            color: #aaa;
                          }
                        }
                      }

                      .pd-tab-panel {
                        display: none;
                        padding: 2rem;
                        background: #535353;
                        border-radius: 10px;
                        opacity: 0;
                        transform: translateY(10px);
                        transition:
                          opacity 0.3s ease,
                          transform 0.3s ease;
                        min-height: 360px;

                        @media (max-width: 1024px) {
                          padding: 1em;
                        }

                        &.active {
                          display: block;
                          animation: tabFadeIn 0.3s ease forwards;
                        }

                        .feature-cont {
                          display: flex;
                          flex-direction: column;
                          gap: 16px;

                          .feature-box {
                            display: flex;
                            gap: 24px;

                            @media (max-width: 991px) {
                              flex-direction: column-reverse;
                              gap: 8px;
                            }

                            .left {
                              flex: 1.8;

                              .des {
                                line-height: 1.6;
                              }
                            }
                            .right {
                              flex: 1;

                              img {
                                border-radius: 10px;
                              }
                            }
                          }
                        }

                        .cases-cont {
                          display: flex;
                          flex-wrap: wrap;
                          gap: 24px;

                          .movie-cont {
                            display: flex;
                            flex-direction: column;
                            gap: 4px;
                            flex: 1 1 calc(33.333% - 16px); /* ← ここを変更 */
                            max-width: calc(33.333% - 16px); /* ← これも追加 */
                            height: auto;

                            @media (max-width: 1024px) {
                              flex: 1 1 calc(50% - 12px);
                              max-width: calc(50% - 12px);
                            }

                            @media (max-width: 600px) {
                              flex: 1 1 100%;
                              max-width: 100%;
                            }

                            .movie {
                              border-radius: 10px;
                              overflow: hidden;
                              height: 200px;

                              @media (max-width: 1024px) {
                                height: 180px;
                              }

                              @media (max-width: 600px) {
                                height: 160px;
                              }

                              iframe {
                                width: 100%;
                                height: 100%;
                              }
                            }

                            .movie-ttl {
                              display: flex;
                              align-items: flex-start;
                              gap: 8px;

                              span {
                                content: "";
                                display: block;
                                width: 16px;
                                height: 16px;
                                min-width: 16px;
                                background: #69c5bd;
                                margin-top: 4px;
                              }
                            }
                          }
                        }

                        .specs-cont {
                          .img {
                            width: 100%;
                            max-width: 1000px; /* 横固定 */
                            height: 400px;
                            margin: 0 auto 0 0;
                            background: #ffffff73;
                            border-radius: 10px;

                            @media (max-width: 991px) {
                              overflow-x: auto;
                              -webkit-overflow-scrolling: touch;
                              scrollbar-width: none;
                              height: auto;
                            }

                            &::-webkit-scrollbar {
                              @media (max-width: 991px) {
                                display: none;
                              }
                            }

                            img {
                              width: 100%;
                              height: 100%;
                              object-fit: contain; /* 比率保ったまま枠内に収める */
                              display: block;
                              border-radius: 10px;

                              @media (max-width: 991px) {
                                height: 70vh;
                                width: auto;
                                max-width: none; /* 横に広がれるように */
                                display: block;
                              }
                            }
                          }
                        }

                        .catalog-cont {
                          display: flex;
                          flex-wrap: wrap;
                          gap: 24px;

                          .pdf-cont {
                            display: flex;
                            flex-direction: column;
                            gap: 4px;
                            flex: 1 1 calc(33.333% - 16px); /* ← ここを変更 */
                            max-width: calc(33.333% - 16px); /* ← これも追加 */
                            height: auto;

                            @media (max-width: 1024px) {
                              flex: 1 1 calc(50% - 12px);
                              max-width: calc(50% - 12px);
                            }

                            @media (max-width: 600px) {
                              flex: 1 1 100%;
                              max-width: 100%;
                            }

                            .img {
                              border-radius: 10px;
                              overflow: hidden;
                            }

                            .pdf-ttl {
                              display: flex;
                              align-items: flex-start;
                              gap: 8px;

                              span {
                                content: "";
                                display: block;
                                width: 16px;
                                height: 16px;
                                min-width: 16px;
                                background: #69c5bd;
                                margin-top: 4px;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.list ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-modal {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  &.active {
    opacity: 1;
    pointer-events: auto;
  }

  .feature-modal-img {
    max-width: 60vw;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 10px;
    transform: scale(0.85);
    transition: transform 0.3s ease;

    @media (max-width: 991px) {
      max-width: 95vw;
      max-height: 95vh;
    }
  }

  &.active .feature-modal-img {
    transform: scale(1);
  }

  .feature-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
  }
}

/*----------------------
  　フェードイン
  -----------------------*/

.animate {
  opacity: 0;
  transition: all 0.6s ease var(--fade-delay, 0s);
}

/* フェードイン */
.fade-in.is-visible {
  opacity: 1;
}

/* 左右スライド */
.slide-in-left {
  transform: translateX(-30px);

  @media (max-width: 768px) {
    transform: translateY(-10px);
  }
}

.slide-in-left.is-visible {
  transform: translateX(0);
  opacity: 1;

  @media (max-width: 768px) {
    transform: translateY(0px);
  }
}

.slide-in-right {
  transform: translateX(30px);

  @media (max-width: 768px) {
    transform: translateY(10px);
  }
}
.slide-in-right.is-visible {
  transform: translateX(0);
  opacity: 1;

  @media (max-width: 768px) {
    transform: translateY(0px);
  }
}

/* 拡大縮小 */
.zoom-in {
  transform: scale(0.8);
}
.zoom-in.is-visible {
  transform: scale(1);
  opacity: 1;
}

.slide-in-up {
  transform: translateY(30px);
}

.slide-in-up.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.slide-in-down {
  transform: translateY(-30px);
}
.slide-in-down.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.track-record-item-img.sp-img {
  @media (max-width: 768px) {
    width: 60%;
    margin: 0 auto;
  }
}

.blur-in.is-visible {
  filter: blur(0);
  opacity: 1;
}

.blur-in {
  filter: blur(10px);
}