/*==============================================================
HOME
==============================================================*/
.section-ttl {
  .en {
    font-size: clamp(2.5rem, 1.4706rem + 2.9412vw, 5rem);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    line-height: 1;
  }

  .jp {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;

    .jp-dec {
      content: "";
      display: block;
      width: 4px;
      height: 16px;
      background-color: #0011ff;
    }
  }
}

.btns {
  display: flex;

  .btn {
    display: flex;
    background: #000;
    align-items: center;
    padding: 10px 16px;
    border-radius: 3px;
    gap: 16px;
    transition: background 0.3s ease;

    .btn-txt {
      color: #fff;
      flex: 1;
    }

    .img {
      width: 100%;
      max-width: 16px;
      transition: transform 0.3s ease;

      & img {
        object-fit: contain;
      }
    }

    &:hover {
      .img {
        transform: translateX(4px);
      }
    }
  }
}

/*-------------fv-------------*/
.fv {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100%;

  @media screen and (max-width: 991px) {
    height: 40vh;
  }

  @media screen and (max-width: 560px) {
    margin-top: 70px;
  }

  .fv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .fv-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
  }

  .fv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 0);
    background-size: 4px 4px;
    pointer-events: none;
    z-index: 1;
  }

  .movie-border {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 10px;
    background: linear-gradient(135deg, #004cff, #0135af);
  }

  .movie-cont {
    position: relative;
    z-index: 2;
    padding: 10px;
    height: 99%;

    @media screen and (max-width: 991px) {
      height: 98%;
    }

    .movie-box {
      height: 100%;
      border: 0.5px solid #ffffff57;
      position: relative;

      .txt-cont {
        position: absolute;
        top: 50%;
        left: 2%;
        transform: translateY(-50%);

        .en {
          color: #ffffff48;
          font-size: clamp(1.75rem, -2.3676rem + 11.7647vw, 11.75rem);
          font-family: Arial, Helvetica, sans-serif;
          font-weight: bold;
          line-height: 1;
        }
        .jp {
          font-size: clamp(1rem, -0.0294rem + 2.9412vw, 3.5rem);
          font-weight: bold;
          line-height: 1.4;
        }

        .txt-box {
          display: flex;
          align-items: center;
          gap: 16px;
        }
      }
    }
  }

  .scroll {
    position: absolute;
    z-index: 2;
    bottom: 10%;
    left: 3%;
    writing-mode: vertical-rl;

    span {
      color: #fff;
      font-size: 12px;
    }

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

  .scroll::before {
    animation: scroll 2s infinite;
    background-color: #ffffff;
    top: 0;
    content: "";
    height: 140px;
    left: 0;
    margin: auto;
    position: absolute;
    width: 1px;
    z-index: 2;
  }

  .scroll::after {
    background-color: #0011ff;
    top: 0;
    content: "";
    height: 140px;
    left: 0;
    margin: auto;
    position: absolute;
    width: 1px;
  }
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.company {
  background-color: #ebebeb;

  .cont {
    padding: 0 40px 80px;

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

    .box {
      max-width: 1280px;

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

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

        @media screen and (max-width: 560px) {
          gap: 40px;
        }

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

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

          @media screen and (max-width: 560px) {
            padding: 0 16px;
          }

          .ttl-cont {
            .ttl {
              display: flex;
              flex-direction: column;
              margin-left: -2rem;

              @media screen and (max-width: 560px) {
                margin-left: -1rem;
              }

              & span {
                font-size: clamp(2rem, 1.3824rem + 1.7647vw, 3.5rem);
                font-family: "Noto Serif JP";
                font-weight: 600;

                & span {
                  color: #0011ff;

                  &:nth-child(2) {
                    padding-left: 0rem;
                  }
                }

                &:nth-child(2) {
                  padding-left: 4rem;
                }
              }
            }
          }
        }
        .right {
          flex: 1;
          position: relative;

          @media screen and (max-width: 991px) {
            width: 100%;
            padding-left: 10%;
          }

          .img {
            position: relative;
            z-index: 1;

            @media screen and (max-width: 991px) {
              height: 350px;
            }

            @media screen and (max-width: 560px) {
              height: 220px;
            }

            &::before {
              position: absolute;
              content: "";
              top: 0;
              left: 0;
              width: 100%;
              height: 103%;
              background: #0011ff;
              border-radius: 0 0 0 60px;
              z-index: -1;
            }

            & img {
              border-radius: 0 0 0 60px;
            }
          }

          .section-ttl {
            position: absolute;
            z-index: 1;
            top: 2%;
            right: 3%;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            @media screen and (max-width: 991px) {
              top: 10%;
            }

            .en {
              color: #0135af;

              @media screen and (max-width: 991px) {
                color: #fff;
              }
            }

            .jp {
              @media screen and (max-width: 991px) {
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}

.business {
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/home/fv.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(8px);
    transform: scale(1.15);
    z-index: 0;
  }

  .cont {
    position: relative;
    z-index: 1;

    .box {
      max-width: 1280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;

      .section-cont {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 80px;

        @media screen and (max-width: 560px) {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }

        .des {
          width: 100%;
          max-width: 50%;
          color: #fff;

          @media screen and (max-width: 560px) {
            max-width: 100%;
          }
        }
      }

      .item {
        display: flex;
        gap: 16px;

        @media screen and (max-width: 560px) {
          flex-direction: column;
          gap: 8px;
        }

        & img {
          border-radius: 10px;
          border-bottom: 6px solid #0011ff;
          object-fit: cover;
        }

        .left {
          flex: 1;
          display: flex;

          .img {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          flex: 1;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
          gap: 16px;

          @media screen and (max-width: 560px) {
            gap: 8px;
          }
        }
      }
    }
  }
}

.auto {
  .cont {
    @media screen and (max-width: 991px) {
      padding: 40px;
    }

    @media screen and (max-width: 560px) {
      padding: 40px 16px;
    }

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

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

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

        .left {
          display: flex;
          gap: 24px;
          flex: 1.2;

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

          .img {
            @media screen and (max-width: 991px) {
              height: 280px;
              width: 100%;
            }

            & img {
              border-radius: 10px;
              border-bottom: 6px solid #000;
            }
          }

          .swiper-wrapper {
            display: flex;
          }

          @media screen and (max-width: 560px) {
            &.swiper {
              overflow: hidden;
              width: 100%;

              .swiper-wrapper {
                display: flex;
              }

              .swiper-slide {
                flex-shrink: 0;
                width: 100%;
              }
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          gap: 32px;
          flex: 1;

          .section-cont {
            display: flex;
            flex-direction: column;
            gap: 32px;
          }
        }
      }
    }
  }
}

.works {
}

.reason {
  background-image: url(../assets/img/home/reason-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .cont {
    padding: 120px 40px;

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

    @media screen and (max-width: 560px) {
      padding: 40px 16px;
    }

    .box {
      max-width: 1280px;

      .item {
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 100%;
        max-width: 30%;

        @media screen and (max-width: 991px) {
          max-width: 60%;
        }

        @media screen and (max-width: 560px) {
          max-width: 100%;
        }

        .section-cont {
          display: flex;
          flex-direction: column;
          gap: 32px;
        }

        .btn {
          background: #0135af;
        }
      }
    }
  }
}

.eq {
  background-color: #000;

  .cont {
    padding: 24px 40px;

    @media screen and (max-width: 560px) {
      padding: 40px 16px;
    }

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

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

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

        .left {
          display: flex;
          flex: 1.6;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
          gap: 16px;

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

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

        .right {
          display: flex;
          flex-direction: column;
          gap: 32px;
          flex: 1;

          .section-cont {
            display: flex;
            flex-direction: column;
            gap: 32px;
          }

          .btn {
            background: #0135af;
          }
        }
      }
    }
  }
}

.insta {
  .cont {
    .box {
      max-width: 1280px;
      display: flex;
      flex-direction: column;
      gap: 32px;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;

        .main {
          display: block;
          width: 100%;
        }

        .btns {
          width: 100%;
          display: flex;
          justify-content: center;

          & a.btn {
            display: inline-flex !important;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            width: auto !important;
            max-width: 220px;
            flex: none !important;
            padding: 12px 20px;
            border-radius: 5px;
            background: linear-gradient(135deg, #621df5, #ea34a4, #ea3575, #ee813c, #f7d447);

            .insta-icon {
              display: flex;
              align-items: center;
              gap: 8px;
              white-space: nowrap;

              & img {
                height: 16px;
                width: auto;
                object-fit: contain;
              }
            }

            .img {
              display: flex;
              align-items: center;
              flex: none;

              & img {
                height: 16px;
                width: auto;
              }
            }
          }
        }
      }
    }
  }
}

.works {
  background-color: #6b6b6b;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;

  .btns {
    justify-content: center;
  }

  .cont {
    overflow: hidden;
    padding: 80px 0;

    @media screen and (max-width: 560px) {
      padding: 40px 0;
    }
  }

  .section-ttl {
    padding: 32px 40px;
    background-color: #000;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .works-slider {
    padding: 0 0 40px;

    .slick-slide {
      transition:
        transform 0.3s ease,
        opacity 0.3s ease;
      opacity: 0.5;
      transform: scale(0.85);
      padding: 0 12px;
    }

    .slick-center {
      opacity: 1;
      transform: scale(1);
    }

    .slick-list {
      overflow: visible;
    }
  }

  .p-works-archive__link {
    display: block;
  }

  .p-works-archive__item {
    border-radius: 5px;
    overflow: hidden;
  }

  .p-works-archive__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 3;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 5px;
    }
  }

  .p-works-archive__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    border-radius: 5px;
  }

  .p-works-archive__thumb:hover .p-works-archive__overlay {
    transform: translateY(0);
  }

  .p-works-archive__title {
    margin: 0;
    font-size: clamp(1rem, 0.8971rem + 0.2941vw, 1.25rem);
    font-weight: 600;
  }

  .p-works-archive__category {
    font-size: clamp(1rem, 0.8971rem + 0.2941vw, 1.25rem);
    font-weight: 600;
    opacity: 0.9;
    border-left: 1px solid #fff;
    padding-left: 8px;
  }
}

#sb_instagram .sbi_type_carousel .fa-clone {
  display: flex !important;
  align-items: flex-start;
  width: 100%;
  max-width: 50px;
}

#sb_instagram .sbi_type_carousel .sbi_playbtn,
#sb_instagram .sbi_type_video .sbi_playbtn {
  font-size: 48px;
  left: 50%;
  margin-left: -19px;
  margin-top: -24px;
  padding: 0;
  top: 50%;
  z-index: 2;
  transform: translateX(-43%);
}