#intro {
  padding: 3.2rem 0 0;
  position: relative;
  @media (width >= 961px) {
    padding: 3.4rem 0 0;
  }
  >div {
    >h2 {
      background: #fff;
      border-radius: 50%;
      font-size: 3.8rem;
      display: block;
      height: 23.4rem;
      letter-spacing: .1em;
      line-height: 1.6;
      margin: 0 auto;
      padding: 2.5rem 2.5rem;
      text-align: center;
      width: 23.4rem;
      writing-mode: vertical-rl;
      @media (width >= 961px) {
        font-size: 4.8rem;
        height: 29.9rem;
        padding: 3.1rem 3.1rem;
        width: 29.9rem;
      }
      >span {
        color: #02754B;
      }
    }
    >p {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 2.4rem auto 0;
      padding: 0 2rem;
      text-align: center;
      @media (width >= 961px) {
        font-size: 1.8rem;
        margin: 2.8rem auto 0;
      }
    }
    .marquee {
      animation: marquee 60s linear infinite;
      display: inline-flex;
      margin: 12.3rem 0 0;
      white-space: nowrap;
      @media (width >= 961px) {
        margin: .8rem 0 0;
      }
      span {
        color: #fff;
        font-family: "Poppins", sans-serif;
        font-size: 10rem;
        font-weight: 600;
        line-height: 1.6;
        @media (width >= 961px) {
          font-size: 13rem;
        }
      }
    }
  }
  >figure {
    box-shadow: .8rem .8rem 1rem 0 rgba(0, 0, 0, .2);
    margin: 0;
    overflow: hidden;
    position: absolute;
    &.fuji {
      border-radius: 0 .8rem .8rem 0;
      bottom: 8.9rem;
      height: 13.5rem;
      left: 0;
      width: 20.3rem;
      @media (width >= 961px) {
        border-radius: 1.6rem;
        bottom: auto;
        height: 18.8rem;
        left: calc(50% - 54.7rem);
        top: 8.4rem;
        width: 28.2rem;
      }
      @media (width >= 1096px) {
        left: 0;
      }
      @media (width >= 1252px) {
        left: calc(50% - 62.6rem);
      }
    }
    &.kakunin {
      border: .8rem 0 0 .8rem;
      bottom: 11.1rem;
      height: 9rem;
      right: 0;
      width: 13.6rem;
      @media (width >= 961px) {
        border-radius: 1.6rem;
        bottom: auto;
        height: 14.7rem;
        right: calc(50% - 52.7rem);
        top: 8.3rem;
        width: 22.1rem;
      }
      @media (width >= 1096px) {
        right: 2.1rem;
      }
      @media (width >= 1252px) {
        right: calc(50% - 60.5rem);
      }
    }
    &.sokuryou {
      display: none;
      @media (width >= 961px) {
        border-radius: 1.6rem;
        bottom: 23.9rem;
        display: block;
        height: 13.2rem;
        left: 3.6rem;
        width: 13.2rem;
      }
      @media (width >= 1118px) {
        left: calc(50% - 52.3rem);
      }
    }
    &.shovel {
      display: none;
      @media (width >= 961px) {
        border-radius: 1.6rem;
        bottom: 23.8rem;
        display: block;
        height: 18.8rem;
        right: calc(50% - 54.7rem);
        width: 28.2rem;
      }
      @media (width >= 1096px) {
        right: 0;
      }
      @media (width >= 1252px) {
        right: calc(50% - 62.6rem);
      }
    }
    >img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.philosophy {
  border-bottom: .1rem solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  margin: 6.4rem auto 0;
  padding: 0 0 6.4rem;
  width: 32rem;
  @media (width >= 961px) {
    flex-direction: row;
    gap: 0;
    margin: 10rem auto 0;
    padding: 0 0 8rem;
    width: 92rem;
  }
  &.first {
    margin-top: 2rem;
    @media (width >= 961px) {
      margin-top: 10rem;
    }
  }
  &.last {
    border: 0;
    padding: 0 0 7.2rem;
    @media (width >= 961px) {
      padding: 0 0 13.9rem;
    }
  }
  .heading {
    @media (width >= 961px) {
      width: 34rem;
    }
  }
  .content {
    @media (width >= 961px) {
      width: calc(100% - 34rem);
    }
    .head {
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.8;
      margin: 0;
    }
    .text {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 1rem 0 0;
      @media (width >= 961px) {
        font-size: 1.8rem;
      }
    }
    >ul {
      counter-reset: number 0; 
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        display: flex;
        gap: 1.4rem;
        margin: 0;
        &::before {
          color: #02754B;
          counter-increment: number 1;
          content: "(" counter(number) ")";
          display: inline-block;
          font-size: 1.5rem;
          line-height: 3.5rem;
          margin: 0;
          width: auto;
        }
        &:nth-of-type(n+2) {
          margin: 2.8rem 0 0;
          @media (width >= 961px) {
            margin: 3.4rem 0 0;
          }
        }
      }
    }
    >img {
      height: auto;
      margin: 0;
      width: 100%;
      @media (width >= 961px) {
        width: 57rem;
      }
    }
  }
}
.bg-white {
  background: #fff;
  border-radius: 2.8rem;
  padding: 6.4rem 2rem 7.2rem;
  @media (width >= 961px) {
    border-radius: 6.4rem;
    padding: 13rem 2rem 14rem;
  }
}
#value {
  margin: 0 auto;
  width: 32rem;
  @media (width >= 961px) {
    width: 92rem;
  }
  .heading {
    text-align: center;
    >p {
      justify-content: center;
    }
  }
  >p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 2.8rem 0 ;
    text-align: center;
    @media (width >= 961px) {
      margin: 3.2rem 0 0;
    }
  }
  .flex-box {
    counter-reset: number 0;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    margin: 3.2rem 0 0;
    @media (width >= 961px) {
      flex-direction: row;
      flex-wrap: wrap;
      row-gap: 3rem;
      column-gap: 2.8rem;
      justify-content: center;
      margin: 7.2rem 0 0;
    }
    >div {
      background: #3D7460;
      border-radius: 1.6rem;
      padding: 2.4rem;
      position: relative;
      text-align: center;
      @media (width >= 961px) {
        padding: 2.1rem;
        width: calc(100% / 3 - 5.6rem / 3);
      }
      &::before {
        color: #fff;
        counter-increment: number 1;
        content: counter(number, decimal-leading-zero);
        display: inline-block;
        font-family: "Poppins", sans-serif;
        font-size: 2.8rem;
        font-weight: 700;
        left: 1.5rem;
        line-height: 1;
        margin: 0;
        position: absolute;
        top: 1.7rem;
        width: auto;
        @media (width >= 961px) {
          font-size: 2.4rem;
          left: 1.3rem;
          top: 1.5rem;
        }
      }
      >img {
        height: 15.4rem;
        margin: 0 auto;
        width: 15.4rem;
        @media (width >= 961px) {
          height: 13.4rem;
          width: 13.4rem;
        }
      }
      >h3 {
        color: #fff;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.8;
        margin: .8rem 0 0;
        @media (width >= 961px) {
          margin: .7rem 0 0;
        }
      }
      >p {
        color: #fff;
        font-size: 1.6rem;
        line-height: 1.8;
        margin: .7rem 0 0;
        text-align: left;
        @media (width >= 961px) {
          margin: .6rem 0 0;
        }
      }
    }
  }
}
#history {
  margin: 0 auto;
  padding: 6.4rem 2rem 7.2rem;
  width: 36rem;
  @media (width >= 961px) {
    padding: 13rem 2rem 14rem;
    width: 96rem;
  }
  .heading {
    text-align: center;
    >p {
      justify-content: center;
    }
  }
  >p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 2.8rem 0 ;
    text-align: center;
    @media (width >= 961px) {
      margin: 3.2rem 0 0;
    }
  }
  >ul {
    background: #fff;
    border-radius: 1.6rem;
    list-style: none;
    margin: 3.2rem 0 0;
    padding: 3.2rem 2rem;
    @media (width >= 961px) {
      border-radius: 3.2rem;
      margin: 6.4rem 0 0;
      padding: 8rem;
    }
    >li {
      align-items: center;
      border-bottom: .1rem solid #ddd;
      display: flex;
      margin: 0;
      padding: 0 0 2.4rem;
      &:nth-of-type(n+2) {
        margin: 2.9rem 0 0;
      }
      &:last-of-type {
        border: 0;
        padding: 0;
      }
      time {
        color: #02754B;
        font-family: "Poppins", sans-serif;
        font-size: 2.4rem;
        line-height: 1;
        width: 10.2rem;
        &::after {
          color: #333;
          content: "年";
          font-family: "Zen Kaku Gothic New", sans-serif;
          font-size: 1.6rem;
          margin: 0 0 0 .5rem;
        }
      }
      p {
        border-left: .1rem solid #ddd;
        font-size: 1.6rem;
        line-height: 1.8;
        margin: 0;
        padding: 0 0 0 2.2rem;
        width: calc(100% - 10.2rem);
        @media (width >= 961px) {
          font-size: 1.8rem;
        }
      }
    }
  }
}
#message {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  margin: 0 auto;
  width: 32rem;
  @media (width >= 961px) {
    flex-direction: row;
    gap: 0;
    width: 92rem;
  }
  .head {
    @media (width >= 961px) {
      position: relative;;
      width: 42rem;
    }
    .heading {
      text-align: center;
      @media (width >= 961px) {
        text-align: left;
      }
      >p {
        justify-content: center;
        @media (width >= 961px) {
          justify-content: flex-start;
        }
      }
    }
    >img {
      border-radius: 1.7rem;
      height: auto;
      margin: 2.8rem 0 0;
      width: 100%;
      @media (width >= 961px) {
        border-radius: 1.6rem;
        bottom: 0;
        left: 0;
        margin: 19.8rem 0 0;
        position: absolute;
        width: 30.2rem;
      }
    }
  }
  .text {
    @media (width >= 961px) {
      width: calc(100% - 42rem);
    }
    >p {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 0 0 1.8em;
      &:first-of-type {
        font-size: 2.8rem;
        font-weight: 700;
        letter-spacing: -.05em;
        line-height: 1;
        margin: 0 0 2.4rem;
        white-space: nowrap;
        @media (width >= 961px) {
          letter-spacing: 0;
          margin: 0 0 2.8rem;
        }
      }
      &:last-of-type {
        font-size: 1.8rem;
        line-height: 1;
        margin: 0;
        padding: 2.4rem 0 0;
        @media (width >= 961px) {
          padding: 2.8rem 0 0;
          >span {
            font-size: 2.4rem;
          }
        }
      }
    }
  }
}
#company {
  margin: 0 auto;
  padding: 6.4rem 2rem 8rem;
  width: 36rem;
  @media (width >= 961px) {
    padding: 13rem 2rem 14rem;
    width: 96rem;
  }
  >ul {
    border-top: .1rem solid #ddd;
    list-style: none;
    margin: 2.8rem 0 0;
    padding: 0;
    position: relative;
    @media (width >= 961px) {
      margin: 6.4rem 0 0;
    }
    &::before {
      background: #02754B;
      content: "";
      display: block;
      height: .1rem;
      left: 0;
      position: absolute;
      top: 0;
      width: 10rem;
    }
    li {
      border-bottom: .1rem solid #ddd;
      display: flex;
      flex-direction: column;
      gap: .8rem;
      padding: 3.2rem 0;
      position: relative;
      @media (width >= 961px) {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
      }
      &::before {
        background: #02754B;
        bottom: 0;
        content: "";
        display: block;
        height: .1rem;
        left: 0;
        position: absolute;
        width: 10rem;
      }
      >p {
        font-size: 1.6rem;
        line-height: 1.8;
        margin: 0;
        @media (width >= 961px) {
          width: calc(100% - 13.2rem);
        }
        &:first-of-type {
          font-weight: 700;
          @media (width >= 961px) {
            width: 13.2rem;
          }
        }
      }
      >div {
        height: 22rem;
        margin: 1rem 0 0;
        position: relative;
        @media (width >= 961px) {
          height: 41.4rem;
          width: 100%;
        }
        >iframe {
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%) scale(2);
          @media (width >= 961px) {
            height: 41.4rem;
            margin: 0 0 0 13.2rem;
            position: static;
            transform: translate(0, 0) scale(1);
            width: calc(100% - 13.2rem);
          }
        }
      }
    }
  }
}
#recruit {
  overflow: hidden;
  >img {
    height: auto;
    margin: 0;
    position: relative;
    width: 100%;
    z-index: 10;
  }
  .inner {
    margin: 0 auto;
    padding: 6.4rem 2rem 0;
    position: relative;
    width: 36rem;
    @media (width >= 961px) {
      padding: 13rem 2rem 0;
      width: 96rem;
    }
    &::before {
      background: #fff;
      content: "";
      display: block;
      height: 18.5rem;
      left: 50%;
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      width: 100%;
      @media (width >= 961px) {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        bottom: calc(100% - 30.5vw);
        height: auto;
        top: auto;
        width: calc(100vw + 18rem);
      }
    }
    >img {
      height: auto;
      margin: 0;
      position: relative;
      width: 100%;
      z-index: 10;
    }
    >h2 {
      font-size: 2rem;
      font-weight: 500;
      line-height: 1.8;
      margin: .8rem 0 0;
      @media (width >= 961px) {
        font-size: 2.2rem;
        right: 1.9rem;
        position: absolute;
        top: 17.5rem;
      }
    }
    >p {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 2.2rem 0 0;
      @media (width >= 961px) {
        margin: 7.2rem 0 0;
        position: relative;
        z-index: 10;
      }
    }
    .more-bt {
      margin: 3.2rem 0 0;
      @media (width >= 961px) {
        left: 73.2rem;
        margin: 0;
        position: absolute;
        top: 42.7rem;
      }
    }
  }
  .works {
    margin: 5.6rem 0 0 auto;
    margin-left: calc(50% - 16rem);
    overflow: scroll;
    padding: 0 0 3.2rem;
    width: calc(50% + 17rem);
    -webkit-overflow-scrolling: touch;
    @media (width >= 961px) {
      margin: 21rem auto 0;
      overflow: auto;
      padding: 0 2rem;
      width: 96rem;
    }
    &::-webkit-scrollbar {
      height: .4rem;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: .2rem;
      background:#40B7B7;
    }
    >div {
      display: flex;
      gap: 1.4rem;
      padding: 0 2rem 0 0;
      width: 91.8rem;
      @media (width >= 961px) {
        gap: 1.6rem;
        width: 100%;
      }
      >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;
              }
            }
          }
        }
      }
    }
  }
}
#cta {
  padding-top: 8rem;
  @media (width >= 961px) {
    padding-top: 13rem;
  }
}