#hero-slider {
  height: 200svh;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  @media (width >= 961px) {
    height: calc(100svh - 100px);
  }

  .swiper {
    height: 100%;
  
    .swiper-slide {
      position: relative;
    
      img {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }
  }

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

  .character {
    bottom: 0;
    height: 20rem;
    left: -.5rem;
    position: absolute;
    width: 26.7rem;
    z-index: 10;
    @media (width >= 961px) {
      bottom: 3.8rem;
      height: 21rem;
      left: 4rem;
      width: 82.5rem;
    }
  }

  h1 {
    font-size: 2.4rem;
    letter-spacing: .12em;
    line-height: 3.1rem;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 2rem;
    top: 11.9rem;
    writing-mode: vertical-rl;
    z-index: 10;
    @media (width >= 961px) {
      font-size: 3.2rem;
      line-height: 4.1rem;
      right: 17rem;
      top: 9.9rem;
    }

    span {
      background: #fff;
      display: inline-block;
      padding: .3rem 0;
      &:nth-of-type(2) {
        margin: 0 1.3rem 0 0;
        @media (width >= 961px) {
          margin: 0 1.8rem 0 0;
        }
      }
    }
  }
}

body > div { 
  > div {
    overflow: hidden;
    > section {
      margin: 0 auto;
      padding: 8rem 2rem 0;
      @media (width >= 961px) {
        padding: 15rem 2rem;
      }

      > h2 {
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 3.2rem;
        padding: 0;
        @media (width >= 961px) {
          font-size: 4rem;
        }
      }
    }
  }
}

#first, #second, #third {
  @media (width >= 961px) {
    display: block;
    margin-bottom: -100vh;
    position: relative;
    z-index: 10;

    &::before {
      content: "";
      display: block;
      height: 100vh;
    }
  }

  > div {
    background:url(../img/bg-w.png) center center / 10rem 10rem;
    @media (width >= 961px) {
      bottom: 0;
      display: block;
      min-height: 100vh;
      position: sticky;
    }
  }
}
#last {
  @media (width >= 961px) {
    display: block;
    position: relative;
    z-index: 10;
  }

  > div {
    background:url(../img/bg-w.png) center center / 10rem 10rem;
    @media (width >= 961px) {
      display: block;
      min-height: 100vh;
    }
  }
}

.blur {
  @media (width >= 961px) {
	position: relative;
    &::after {
	  content: "";
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      background-color: rgba(255, 255, 255, 0.6);
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
  }
}

#news {
  @media (width >= 961px) {
    padding: 10.4rem 2rem 0;
    position: relative;
    width: 96rem;

    h2 {
      margin: 0 0 6.4rem;
    }
  }
  > div {
    @media (width >= 961px) {
      position: absolute;
      right: 2rem;
      top: 10.4rem;
      width: 61.7rem;
    }
    article {
      border-bottom: .1rem solid #ddd;
      margin: 0 0 2.4rem;
      padding: 0 0 2.2rem;
      @media (width >= 961px) {
        margin: 0 0 3.2rem;
        padding: 0 0 3.2rem;
      }
      a {
        display: block;
        text-decoration: none;
        @media (width >= 961px) {
          align-items: center;
          display: flex;
        }
        time {
          color: #777;
          font-size: 1.6rem;
          letter-spacing: .04em;
          line-height: 1.4;
          margin: 0 0 .8rem;
          padding: 0;
          @media (width >= 961px) {
            margin: 0;
            width: 13.8rem;
          }
        }
        p {
          color: #333;
          margin: 0;
          padding: 0 3rem 0 0;
          position: relative;
          @media (width >= 961px) {
            width: calc(100% - 13.8rem);
          }

          &::after {
            background: url("../img/ku-g.png") center center / cover no-repeat;
            content: "";
            display: block;
            height: .9rem;
            position: absolute;
            right: 0;
            top: 50%;
            transition: .5s;
            transform: translateY(-50%);
            width: .5rem;
          }
        }

        &:hover {
          p {
            &::after {
              transform: translateY(-50%) scale(2);
            }
          }
        }
      }

      &:last-of-type {
        margin: 0 0 4.2rem;
        @media (width >= 961px) {
          margin: 0;
        }
      }
    }
  }
}

#service {
  background: url("../img/front-page/fuji-sp.png") 0 49.2rem / 100% auto no-repeat;
  @media (width >= 961px) {
    background: url("../img/front-page/fuji-pc.png") 0 25.1rem / 100% auto no-repeat;
    padding: 11.9rem 2rem 15rem;
    position: relative;
  }
  .disc {
    margin: 0 0 1.6rem;
    @media (width >= 961px) {
      font-size: 2rem;
      letter-spacing: .2em;
      margin: 1.2rem 0 0;
      padding: 2.2rem 0 0;
      position: absolute;
      right: calc(50% - 41.2rem);
      top: 11.9rem;
      writing-mode: vertical-rl;
      &::before {
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
      }
    }
  }
  > h2 {
    font-size: 2.6rem;
    margin: 0 0 3.6rem;
    span {
      display: inline-block;
      line-height: 1.2;
      margin: 0 0 1.9rem;
      padding: 0;
      &:last-of-type {
        margin: 0;
      }
    }
    @media (width >= 961px) {
      font-size: 3.6rem;
      letter-spacing: .1em;
      margin: 0;
      position: absolute;
      right: calc(50% - 34.6rem);
      writing-mode: vertical-rl;
      span {
        line-height: 1.1;
        margin: 0 0 0 4rem;
      }
    }
  }

  > p {
    margin: 0 0 4.2rem;
    @media (width >= 961px) {
      font-size: 1.8rem;
      line-height: 1.8;
      margin: 1.2rem 0 6.3rem;
      margin-left: calc(50% - 41.2rem);
    }
  }

  .more-bt {
    margin: 0 0 4.2rem;
    @media (width >= 961px) {
      margin: 0 0 13.9rem;
      margin-left: calc(50% - 41.2rem);
    }
  }

  .business {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    margin: 0 0 5.3rem;
    padding: 0;
    @media (width >= 961px) {
      flex-direction: row;
      gap: 5rem;
      margin: 0 auto 12rem;
      padding: 0 2rem;
      width: 96rem;
    }

    a {
      display: inline-block;
      height: auto;
      margin: 0;
      padding: 0;
      width: 100%;
      @media (width >= 961px) {
        width: calc(100% / 2 - 2.5rem);
      }

      img {
        width: 100%;
      }
    }
  }
  .scroll-infinity {
    display: flex;
    gap: 2rem;
    margin: 0 -2rem;
    overflow: hidden;
    width: 96rem;
    @media (width >= 961px) {
      gap: 4.1rem;
      width: calc(100% + 4rem);
    }

    > ul {
      animation: infinity-scroll-left 80s infinite linear 0.5s both;
      display: flex;
      gap: 2rem;
      list-style: none;
      margin: 0;
      padding: 0;
      @media (width >= 961px) {
        gap: 4.1rem;
      }

      li {
        aspect-ratio: 203 / 135;
        border-radius: 1.6rem;
        height: auto;
        object-fit: cover;
        overflow: hidden;
        width: 20.3rem;
        @media (width >= 961px) {
          height: 27rem;
          width: 40.5rem;
        }

        > img {
          width: 100%;
        }
      }
    }
  }
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

#works {
  position: relative;
  @media (width >= 961px) {
    padding: 22.6rem 0 15rem;
  }
  &::before {
    background: #fff;;
    border-radius: 0 2.8rem 2.8rem 0;
    content: "";
    display: block;
    height: 68.1rem;
    left: 0;
    top: 13.8rem;
    position: absolute;
    width: calc(100% - 2rem);
    @media (width >= 961px) {
      border-radius: 6.4rem 0 0 6.4rem;
      height: 48.5rem;
      left: auto;
      right: 0;
      top: 32.9rem;
      width: calc(50% + 53.9rem);
    }
  }

  .direct {
    background: url("../img/front-page/works-ill.png") right 2rem bottom 3.8rem / 10.7rem 6.6rem no-repeat;
    margin: 0;
    padding: 0 0 6.9rem;
    position: relative;
    z-index: 10;
    @media (width >= 961px) {
      background: url("../img/front-page/works-ill.png") right bottom / 15rem 9.3rem no-repeat;
      margin: 0 auto;
      margin-left: calc(50% + 9.1rem);
      padding: 0 4.7rem 0 0;
      width: 41.6rem;
    }

    .lead {
      font-size: 1.5rem;
      letter-spacing: -.02em;
      margin: 0 2rem 4.2rem 0;
      @media (width >= 961px) {
        font-size: 1.7rem;
        letter-spacing: 0;
        line-height: 1.8;
        margin: 0 0 5.2rem;
      }
    }
  }

  .list {
    @media (width >= 961px) {
      margin: 8.3rem auto 0;
      padding: 0 2rem;
      position: relative;
      width: 96rem;
    }

    > article {
      height: 23.7rem;
      margin: 0 -2rem 3.2rem 0;
      position: relative;
      width: calc(100% + 2rem);
      @media (width >= 961px) {
        height: 35.9rem;
        left: 2rem;
        margin: 0;
        position: absolute;
        top: -45.6rem;
        width: 50.2rem;
      }

      > img {
        animation: rotate-animation 20s infinite linear;
        height: 8rem;
        left: -4rem;
        position: absolute;
        top: -4rem;
        width: 8rem;
        z-index: 10;
        @media (width >= 961px) {
          left: -5.1rem;
          height: 10.2rem;
          top: -5.1rem;
          width: 10.2rem;
        }
      }

      a {
        border-radius: 1.6rem 0 0 1.6rem;
        color: #fff;
        display: block;
        height: 100%;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        width: 100%;
        @media (width >= 961px) {
          border-radius: 3.2rem;
        }
        &::before {
          background: url(../img/casestudy-cover.png) center center / cover no-repeat;
          content: "";
          display: block;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          transition: .5s;
          width: 100%;
        }
        &:hover {
          opacity: 1;
          &::before {
            background-image: url(../img/casestudy-hover.png);
          }
        }

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

        div {
          bottom: 2rem;
          left: 2rem;
          position: absolute;
          width: calc(100% - 4rem);
          @media (width >= 961px) {
            bottom: 2.4rem;
            left: 2.4rem;
            width: calc(100% - 4.8rem);
          }

          p {
            font-size: 1.4rem;
            font-weight: 500;
            line-height: 1.2;
            margin: 0 0 .8rem;
            padding: 0 0 0 1.7rem;
            position: relative;
            @media (width >= 961px) {
              font-size: 1.8rem;
              margin: 0 0 1.4rem;
            }

            &::before {
              border-radius: 50%;
              content: "";
              display: block;
              height: .8rem;
              left: 0;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              width: .8rem;
            }
            &.education {
              &::before {
                background: #cf7250;
              }
            }
            &.public {
              &::before {
                background: #7251cf;
              }
            }
            &.water_treatment {
              &::before {
                background: #51adcf;
              }
            }
            &.way {
              &::before {
                background: #02754B;
              }
            }
            &.lifeline {
              &::before {
                background: #b2b285;
              }
            }
            &.factory {
              &::before {
                background: #cfb151;
              }
            }
          }

          h3 {
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1.2;
            margin: 0;
            padding: 0;
            @media (width >= 961px) {
              font-size: 2.4rem;
            }
          }
        }
      }
    }

    > div {
      margin: 0 -2rem;
      padding: 0 0 0 2rem;
      overflow: auto;
      scrollbar-width: none;
      scroll-behavior: smooth;
      user-select: none;
      width: calc(100% + 4rem);
      -ms-overflow-style: none;
      -webkit-user-drag: none;
      &::-webkit-scrollbar {
        display: none;
      }
      @media (width >= 961px) {
        margin: 0;
        width: 92rem;
      }

      > div {
        display: flex;
        flex-direction: row;
        gap: 1.4rem;
        width: 89.8rem;
        @media (width >= 961px) {
          gap: 1.6rem;
          width: 92rem;
        }

        > article {
          height: 19.4rem;
          margin: 0;
          width: 29rem;
          @media (width >= 961px) {
            height: 20.7rem;
            width: calc(100% / 3 - 3.2rem / 3);
          }
      
          a {
            border-radius: 1.6rem;
            color: #fff;
            display: block;
            height: 100%;
            overflow: hidden;
            position: relative;
            text-decoration: none;
            width: 100%;
            &::before {
              background: url(../img/casestudy-cover.png) center center / cover no-repeat;
              content: "";
              display: block;
              height: 100%;
              left: 0;
              position: absolute;
              top: 0;
              transition: .5s;
              width: 100%;
            }
            &:hover {
              opacity: 1;
              &::before {
                background-image: url(../img/casestudy-hover.png);
              }
            }

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

            div {
              bottom: 1.3rem;
              left: 1.3rem;
              position: absolute;
              width: calc(100% - 2.6rem);
              @media (width >= 961px) {
                bottom: 1.6rem;
                left: 1.6rem;
                width: calc(100% - 3.2rem);
              }

              p {
                font-size: 1.2rem;
                font-weight: 500;
                line-height: 1.2;
                margin: 0 0 .8rem;
                padding: 0 0 0 1.2rem;
                position: relative;
                @media (width >= 961px) {
                  font-size: 1.4rem;
                  margin: 0 0 1rem;
                  padding: 0 0 0 1.6rem;
                }

                &::before {
                  border-radius: 50%;
                  content: "";
                  display: block;
                  height: .6rem;
                  left: 0;
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  width: .6rem;
                  @media (width >= 961px) {
                    height: .8rem;
                    width: .8rem;
                  }
                }
                &.education {
                  &::before {
                    background: #cf7250;
                  }
                }
                &.public {
                  &::before {
                    background: #7251cf;
                  }
                }
                &.water_treatment {
                  &::before {
                    background: #51adcf;
                  }
                }
                &.way {
                  &::before {
                    background: #02754B;
                  }
                }
                &.lifeline {
                  &::before {
                    background: #b2b285;
                  }
                }
                &.factory {
                  &::before {
                    background: #cfb151;
                  }
                }
              }
          
              h3 {
                font-size: 1.6rem;
                font-weight: 700;
                line-height: 1.2;
                margin: 0;
                padding: 0;
                @media (width >= 961px) {
                  font-size: 1.8rem;
                }
              }
            }
          }
        }
      }
    }
  }
}
@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#interview {
  padding: 8rem 2rem 6.4rem;
  @media (width >= 961px) {
    padding: 16.9rem 2rem 12rem;
    position: relative;
    width: 96rem;
  }
  .lead {
    font-size: 1.5rem;
    letter-spacing: -.06em;
    margin: 0 0 3.2rem;
    @media (width >= 961px) {
      font-size: 1.7rem;
      margin: 0;
      position: absolute;
      right: 2rem;
      top: 16rem;
    }
  }

  > div {
    column-gap: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.8rem;
    @media (width >= 961px) {
      column-gap: 1.4rem;
      row-gap: 1.5rem;
    }

    a {
      aspect-ratio: 1 / 1;
      border-radius: 1.6rem;
      color: #fff;
      display: block;
      overflow: hidden;
      position: relative;
      text-decoration: none;
      width: calc(100% / 2 - .9rem);
      @media (width >= 961px) {
        height: 17.8rem;
        width: calc(100% / 3 - 1rem);
      }
      &::before {
        background: url(../img/front-page/interview-cover-sp.png) center center / cover no-repeat;
        content: "";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: .5s;
        width: 100%;
        @media (width >= 961px) {
          background-image: url(../img/front-page/interview-cover-pc.png);
        }
      }

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

      p {
        bottom: 1.6rem;
        display: inline-block;
        font-size: 1.6rem;
        font-weight: 500;
        left: 1.6rem;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        position: absolute;
        width: auto;
      }

      &:hover {
        opacity: 1;
        &::before {
          background-image: url(../img/front-page/interview-hover-sp.png);
          @media (width >= 961px) {
            background-image: url(../img/front-page/interview-hover-pc.png);
          }
        }
      }
    }
  }
}

#best {
  background: #EDEEE9;
  border-radius: 3.2rem;
  padding: 4rem 2rem 4.5rem;
  position: relative;
  @media (width >= 961px) {
    margin: 0 auto;
    padding: 4.3rem 2rem 4rem;
    width: 92rem;
  }

  h2 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 5.5rem;
    text-align: center;
    @media (width >= 961px) {
      margin: 0 0 6.9rem;
    }
  }

  > div {
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 4.4rem;
    @media (width >= 961px) {
      column-gap: 1rem;
    }

    article {
      background: #fff;
      border-radius: .9rem;
      padding: 3.8rem 2rem 2rem;
      position: relative;
      width: calc(100% / 2 - .5rem);
      @media (width >= 961px) {
        padding: 4.5rem 2rem 3.2rem;
        width: calc(100% / 5 - .8rem);
      }

      img {
        height: 5.6rem;
        left: 50%;
        margin: 0;
        padding: 0;
        position: absolute;
        top: -2.8rem;
        transform: translateX(-50%);
        width: 5.6rem;
        @media (width >= 961px) {
          height: 5rem;
          width: 5rem;
        }
      }

      h3 {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.5;
        margin: 0 0 .6rem;
        padding: 0;
        text-align: center;
        white-space: nowrap;
        @media (width >= 961px) {
          font-size: 1.5rem;
          line-height: 1.6;
          margin: 0 0 1rem;
        }
      }

      p {
        font-size: 1.4rem;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        @media (width >= 961px) {
          font-size: 1.3rem;
        }
      }
    }

    > img {
      position: absolute;
    
      &.helmet {
        bottom: 16.2rem;
        height: 6.9rem;
        right: 5.2rem;
        transform: rotate(-9.88deg);
        width: 12.1rem;
        @media (width >= 961px) {
          bottom: auto;
          left: 8.8rem;
          right: auto;
          top: -.3rem;
        }
      }

      &.gloves {
        bottom: 4.5rem;
        height: 9.4rem;
        right: 1.6rem;
        transform: rotate(16.21deg);
        width: 8.7rem;
        @media (width >= 961px) {
          bottom: auto;
          right: 10.5rem;
          top: -1.5rem;
          transform: rotate(0);
        }
      }
    }
  }
}

#recruit {
  padding: 8rem 4rem 22.5rem 2rem;
  position: relative;
  z-index: 10;
  @media (width >= 961px) {
    padding: 10.1rem 0 45rem 0;

    .disc {
      margin-left: calc(50% - 46rem);
    }

    h2 {
      position: relative;
      z-index: 10;
      margin-left: calc(50% - 46rem);
    }
  }

  &::before {
    background: #fff;
    border-radius: 0 2.8rem 2.8rem 0;
    content: "";
    display: block;
    left: 0;
    height: 44.5rem;
    position: absolute;
    top: 14.1rem;
    width: calc(100% - 2rem);
    @media (width >= 961px) {
      border-radius: 0 6.4rem 6.4rem 0;
      height: 47.8rem;
      top: 17.7rem;
      width: calc(50% + 53.8rem);
    }
  }

  .lead {
    font-size: 1.5rem;
    margin: 0 0 3.2rem;
    position: relative;
    z-index: 10;
    white-space: nowrap;
    @media (width >= 961px) {
      margin: 0 0 5.2rem;
      margin-left: calc(50% - 46rem);
    }
  }

  .more-bt {
    margin: 0 0 3.2rem;
    @media (width >= 961px) {
      margin: 0;
      margin-left: calc(50% - 46rem);
    }
  }

  > div {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 -4rem 0 0;
    position: relative;
    width: calc(100% + 4rem);
    z-index: 10;
    @media (width >= 961px) {
      margin: 0;
      position: absolute;
      right: calc(50% - 46rem);
      top: 10.1rem;
      width: 51rem;
    }

    img {
      aspect-ratio: 1 /1;
      width: calc(100% / 3  - 1rem / 3);
    }
  }

  > img {
    position: absolute;

    &.text {
      bottom: 8.7rem;
      height: 15.6rem;
      left: 0;
      position: absolute;
      width: 24.4rem;
      @media (width >= 961px) {
        bottom: 17.8rem;
        height: 20.1rem;
        left: calc(50% - 46rem);
        width: 87.5rem;
      }
    }

    &.staff {
      bottom: 8.6rem;
      height: 10.1rem;
      position: absolute;
      right: 0;
      width: 15.1rem;
      @media (width >= 961px) {
        bottom: 16rem;
        height: 14.6rem;
        left: calc(50% - 53.9rem);
        right: auto;
        width: 21.7rem;
      }
    }
  }
}

#company {
  background: #333;
  height: 55.8rem;
  padding: 8rem 2rem 0;
  position: relative;
  z-index: 10;
  @media (width >= 961px) {
    height: 87.5rem;
    padding: 23.8rem 0 0 17rem;
  }

  .disc, h2 {
    color: #fff;
    position: relative;
    z-index: 10;
  }

  .lead {
    color: #fff;
    margin: 0 0 3.2rem;
    position: relative;
    z-index: 10;
    @media (width >= 961px) {
      font-size: 1.8rem;
      margin: 0 0 5.2rem;
    }
  }

  img {
    height: 100%;
    left: 0;
    opacity: .6;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .more-bt {
    p {
      border-color: #fff;
      color: #fff;
    }
  }
}

#insta {
  overflow: hidden;
  position: relative;
  &::before {
    background-color: #fff;
    border-radius: 50%;
    bottom: 45.1rem;
    content: "";
    display: block;
    height: 150.4rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 150.4rem;
    @media (width >= 961px) {
      bottom: 21.8rem;
      height: 157.9rem;
      width: 157.9rem;
    }
  }
  .disc {
    margin: 0 auto .6rem;
    text-align: center;
    width: 9rem;
    &::before {
      margin: .2rem 0 0;
    }
  }
  
  h2 {
    position: relative;
    text-align: center;
    z-index: 10;
  }

  #sbi_images {
    margin: 0 auto;
    padding: 0;
    max-width: 92rem;
  }
}