/*==============================================================
HOME
==============================================================*/
.btns {
  display: flex;
  justify-content: center;
  margin: 0 auto;

  .btn {
    color: #fff;
    font-weight: 600;
    transition: 0.3s;
    background-color: #ff9100;
    padding: 2px;
    border-radius: 50px;

    .btn-txt {
      border: 1px solid #ffff;
      padding: 10px 32px;
      border-radius: 50px;
    }
  }

  .btn:hover {
    background: #fff;
    color: #333;
  }
}

.common-ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  .ttl-cont {
    display: flex;
    flex-direction: column;
    align-items: center;

    .ttl-en {
      font-size: clamp(1.5rem, 0.6667rem + 1.7361vw, 2.75rem);
      font-weight: 900;
      font-family: Arial, Helvetica, sans-serif;
      color: #ff6600;
      line-height: 1;
    }

    .ttl-ap-txt {
      font-size: clamp(1.5rem, 0.5rem + 2.0833vw, 3rem);
      font-weight: 600;
      color: #333;
      line-height: 1.4;
    }
  }

  .ttl-jp {
    font-size: clamp(0.875rem, 0.7917rem + 0.1736vw, 1rem);
    font-weight: 600;
    color: #333;
  }
}

/*-------------fv-------------*/
body {
  overflow-x: hidden;
}

.fv {
  position: relative;
  overflow: hidden;

  .fv-video {
    position: absolute;
    inset: 0;
    z-index: 0;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1.5px) 0 0 / 4px 4px,
        rgba(0, 0, 0, 0.35);
      pointer-events: none;
      z-index: 1;
    }

    & video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  .cont {
    padding: 200px 80px 80px;
    position: relative;
    z-index: 1;

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

    .item {
      display: flex;
      align-items: flex-end;
      height: 60vh;
      display: block;

      @media screen and (max-width: 1279px) {
        align-items: center;
        height: 80vh;
      }

      @media screen and (max-width: 991px) {
        flex-direction: column;
        align-items: unset;
        height: 60vh;
      }

      @media screen and (max-width: 560px) {
        height: auto;
        justify-content: flex-end;
      }

      .left {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;

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

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

        .top {
          .fv-ttl {
            font-size: clamp(1.75rem, 0.5833rem + 2.4306vw, 3.5rem);
            font-weight: 600;
            line-height: 1.3;

            @media screen and (max-width: 1280px) {
              text-align: center;
            }
          }

          & span {
            font-size: 80%;
          }
        }

        .bottom {
          display: flex;
          flex-direction: column;
          gap: 24px;
          width: 100%;
          max-width: 700px;
        }
      }

      .right {
        flex: 1.7;
        position: relative;

        .img {
          height: 100%;
          max-height: 780px;

          @media screen and (max-width: 1280px) {
            max-height: 620px;
          }
        }

        .video-wrap {
          position: absolute;
          top: 14%;
          left: 50%;
          transform: translateX(-50%);
          width: 89%;

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

.sp-none {
  display: none;

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

/*-------------works-------------*/
.works {
  position: relative;
  z-index: 2;
  background: #f2f4f5;
  border-radius: 30px;

  @media screen and (max-width: 991px) {
    border-radius: 30px;
  }

  .cont {
    padding: 80px 0;

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

    .box {
      max-width: 1920px;

      .common-ttl {
        @media screen and (max-width: 560px) {
          padding: 0 16px;
          text-align: center;
        }
      }

      .works-slider {
        overflow: hidden;
        padding: 32px 0;

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

      .works-slider-wrap {
        display: flex !important;
        flex-direction: column;
        gap: 32px;

        @media screen and (max-width: 991px) {
          gap: 16px;
        }
      }

      .slider-row {
        overflow: hidden;
      }

      .slider-track {
        display: flex;
        gap: 20px;
        width: max-content;
        animation: slide-left 30s linear infinite;

        @media screen and (max-width: 991px) {
          gap: 12px;
          animation-duration: 20s; /* SPは少し速く */
        }
      }

      .slider-track.reverse {
        animation: slide-right 30s linear infinite;

        @media screen and (max-width: 991px) {
          animation-duration: 20s;
        }
      }

      .slider-item {
        width: 400px;
        flex-shrink: 0;

        @media screen and (max-width: 991px) {
          width: 240px; /* SP用に小さく */
        }

        & a.block-area {
          display: flex;
          align-items: stretch;
          flex-direction: row-reverse;

          & p {
            width: 28px; /* 回転後の文字サイズに合わせた幅 */
            flex-shrink: 0;
            margin: 0;
            background: #f5f5f5;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 8px;
            overflow: hidden;

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

            & span {
              display: inline-block;
              white-space: nowrap;
              font-size: 14px;
              font-weight: 500;
              transform: rotate(-90deg);
              transform-origin: center center;
              /* 幅を明示的に指定してはみ出しを防ぐ */
              width: 0;
              color: #ff6600;
              font-weight: 600;
              position: relative;

              @media screen and (max-width: 991px) {
                font-size: 11px;
              }

              &::before {
                position: absolute;
                content: "";
                width: 14px;
                height: 14px;
                background: #ff6600;
                bottom: 3px;
                left: -18px;

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

          & figure {
            flex: 1;
            margin: 0;
            overflow: hidden;
            border-radius: 5px;
            height: auto;

            & img {
              display: block;
              width: 100%;
              height: auto;
              object-fit: cover;
              border-radius: 10px;
              transition: transform 0.4s ease;
            }
          }
        }
      }

      .slider-track:hover {
        animation-play-state: paused;
      }

      .works-slider .slick-dots {
        display: none;
      }
    }
  }
}

.slider-item a.block-area:hover figure img {
  transform: scale(1.08);
}

@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 複製分の50% */
  }
}

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

/*-------------advantage-------------*/
.advantage {
  position: relative;
  overflow: visible;
  overflow-x: clip;

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: url("../../assets/img/image/home/advantage-bg.jpg") center / cover no-repeat;
    z-index: -1;

    @media screen and (max-width: 991px) {
      background-position: 20% center;
    }

    @media screen and (max-width: 560px) {
      opacity: 0.2;
      background-position: center;
    }
  }

  .cont {
    padding: 120px 32px;

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

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

    .box {
      max-width: 1240px;

      .item {
        display: flex;
        justify-content: space-between;

        @media screen and (max-width: 991px) {
          flex-direction: column;
          gap: 24px;
          width: 100%;
          max-width: 45%;
        }

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

        .left {
          flex: 1;

          .common-ttl {
            align-items: flex-start;

            .ttl-ap-txt {
              font-size: clamp(1.5rem, 0.8333rem + 1.3889vw, 2.5rem);
              font-weight: 600;
              line-height: 1.4;
              margin-top: 24px;
            }
          }
        }

        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding-left: 35%;

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

          .btns {
            margin: 24px 0 0 auto;

            @media screen and (max-width: 991px) {
              margin: 24px auto 0;
            }
          }
        }
      }
    }
  }
}

/*-------------service-------------*/
.service {
  background: #f6f6f6;
  border-radius: 30px;

  .btns {
    margin-top: 32px;

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

  .cont {
    .box {
      max-width: 1240px;

      .common-ttl-cont {
        display: flex;
        justify-content: space-between;

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

        .common-ttl {
          flex: 1;
          align-items: flex-start;
        }
        .ttl-ap-txt {
          flex: 1.2;
        }
      }

      .service-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 24px;

        @media screen and (max-width: 560px) {
          grid-template-columns: 1fr;
        }

        .item-1,
        .item-2 {
          aspect-ratio: 16 / 9;
        }

        .item-3 {
          aspect-ratio: unset;

          @media screen and (max-width: 560px) {
            aspect-ratio: 16 / 9;
          }
        }

        .service-sub-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px;

          @media screen and (max-width: 560px) {
            grid-template-columns: 1fr;
          }

          .service-item:first-child {
            grid-column: 1 / -1;
            aspect-ratio: 1840 / 600;
            overflow: hidden;

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

            @media screen and (max-width: 560px) {
              aspect-ratio: 16 / 9;
            }
          }
        }

        .service-item {
          position: relative;
          overflow: hidden;

          @media screen and (max-width: 560px) {
            aspect-ratio: 16 / 9;
          }

          .service-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            border-radius: 5px;
            overflow: hidden;

            & img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
              filter: blur(12px);
              transform: scale(1.1);
            }
          }

          & figure {
            position: relative;
            z-index: 1;
            margin: 8px;
            height: calc(100% - 16px);
            overflow: hidden;
            border-radius: 4px;

            & img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.4s ease;
            }
          }

          & p {
            position: absolute;
            bottom: 24px;
            left: 24px;
            z-index: 2;
            margin: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            padding: 6px 12px;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.3);

            @media screen and (max-width: 991px) {
              bottom: 12px;
              left: 12px;
              font-size: 13px;
              background: rgba(0, 0, 0, 0.55);
              color: #fff;
            }
          }

          &:hover figure img {
            transform: scale(1.05);
          }
        }
      }
    }
  }
}

.about {
  .cont {
    .box {
      max-width: 1240px;
      background-image: url("../../assets/img/image/home/about-bg.jpg");
      background-size: cover;
      background-position: center center;
      border-radius: 10px;
      padding: 64px;

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

      .common-ttl-cont {
        display: flex;
        flex-direction: column;
        gap: 88px;

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

        .common-ttl {
          flex: 1;
          align-items: flex-start;
        }
        .ttl-ap-txt {
          flex: 1;
        }

        .btns {
          display: flex;
          justify-content: center;
          margin: 0 auto 0 0;

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

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

          .btn {
            background-color: unset;
            border: 1px solid #fff;

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

            .btn-txt {
              @media screen and (max-width: 991px) {
                border: 1px solid #ff9100;
              }
            }
          }
        }
      }
    }
  }
}