body {
  &:has(#mv.toppage) {
    #header {
      position: fixed;
      .header {
        background-color: transparent;
      }
    }
    &.scroll {
      #header {
        .header {
          background-color: var(--color_beige);
        }
      }
    }
  }
}

#mv {
  .wrap {
    overflow: hidden;
    .contents {
      position: relative;
      padding:50px 0;
      .mv {
        display: grid;
        align-content: center;
        grid-template-rows: 1fr auto 1fr;
        position: relative;
        z-index: 2;
        height: calc(100vh - 100px);
        min-height: 800px;
        &::before {
          content:'';
        }
        h1 {
          font-size: calc(min(5.5vw,9.5rem) * var(--fontscale));
          line-height: 1.5;
          justify-self: center;
          position: relative;
          text-align: center;
          &::before {
            content:'';
            display: block;
            background: url(../../assets/img/top/mv_img01.jpg) no-repeat center center/cover;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
            z-index: -2;
            width: var(--x);
            aspect-ratio: 1;
            filter: brightness(var(--brightness));
            clip-path: circle(var(--x2) at center);
          }
          &::after {
            /* 水と環境の\Aオペレーションカンパニー */
            content:'水と環境のオペレーションカンパニー';
            text-align: center;
            font-size: calc(min(5.5vw,9.5rem) * var(--fontscale));
            line-height: 1.5;
            color:#FFFFFF;
            white-space: nowrap;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
            z-index: 1;
            clip-path: circle(var(--x2) at center);
          }
        }
        p {
          justify-self: end;
          line-height: 1.5;
          padding-right: 4em;
          max-width: 56%;
          padding-top: 3em;
          color:var(--chgcolor);
        }
      }
      .news {
        width: auto;
        max-width: 40%;
        border:1px solid var(--chgcolor);
        border-radius: 10px;
        position: absolute;
        z-index: 2;
        left: 0;
        bottom:50px;
        padding:40px 50px;
        h2 {
          font-size: 1.2rem;
          margin-bottom: 1em;
          color:var(--chgcolor);
        }
        ul {
          font-size: 1.5rem;
          li {
            line-height: 1.5;
            display: grid;
            grid-template-columns: 6em 1fr;
            color:var(--chgcolor);
            span {
              color:inherit;
            }
          }
        }
      }
    }
  }
}

#about {
  .wrap {
    padding: 240px 0;
    overflow: hidden;
    .contents {
      .ttl {
        display: grid;
        grid-template-columns: repeat(2,auto);
        align-items: center;
        justify-content: start;
        grid-column-gap: 3em;
        margin-bottom: 80px;
        .ttl_h2 {
          margin-bottom: 0;
        }
        & > .font_en {
          font-size: 2.2rem;
          display: grid;
          grid-template-columns: repeat(3,auto);
          align-items: center;
          grid-column-gap: .66em;
          span {
            font:inherit;
            position: relative;
            &.bar {
              width: 2em;
              border-bottom:1px solid var(--color_text);
            }
            &:last-child {
              color:var(--color_text2);
            }
          }
        }
      }
      .about_slider {
        width: 100vw;
        /* .slick-list {
          overflow: visible;
        } */
        .slide {
          width: 1280px;
          padding-right: 100px;
          /* transition: .3s;
          &:not(.slick-current):not(.slick-current ~ .slide) {
            opacity: 0;
          } */
          a {
            display: block;
          }
          h3 {
            font-size: 3.2rem;
            line-height: 1.5;
            display: grid;
            margin-bottom: 1em;
            .font_en {
              font-size: 1.5rem;
            }
          }
          .contents_inner {  
            display: grid;
            grid-template-columns: 66% 1fr;
            grid-column-gap: 4%;
            align-items: start;
            .detail {
              display: grid;
              height: 100%;
              align-content: space-between;
              grid-row-gap: 30px;
              p {
                font-size: 1.4rem;
              }
              .btn_more {
                justify-self: end;
              }
            }
            .img {
              border-radius: 20px;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}

#projects {
  .wrap {
    padding-bottom: 240px;
    .contents {
      ul {
        border-top:1px solid var(--color_text);
        li {
          border-bottom:1px solid var(--color_text);
          a {
            display: grid;
            grid-template-columns: 1fr 30%;
            grid-column-gap: 3%;
            padding:50px 0;
            .ttl {
              font-size: 2.2rem;
              display: grid;
              grid-template-columns: 1.5em 1fr;
              grid-column-gap: 2em;
              & > img {
                transform: translateY(-.2em);
              }
              h3 {
                display: grid;
                grid-template-columns: 2.5em 1fr;
                align-content: start;
                grid-row-gap: .33em;
                line-height: 1.5;
                .font_en {
                  font-size: 1.5rem;
                }
                .txt {
                  font-size: 1.5rem;
                  line-height: inherit;
                  grid-area: 2/2/3/3;
                }
              }
            }
            .img {
              overflow: hidden;
              border-radius: 20px;
            }
          }
        }
      }
    }
  }
}

#works {
  .wrap {
    background-color: var(--color_btn);
    padding:150px 0 100px;
    overflow: hidden;
    .contents {
      .contents_inner {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-column-gap: 5%;
        .detail {
          .ttl {
            display: grid;
            grid-template-columns: repeat(2,auto);
            align-items: end;
            justify-content: space-between;
            margin-bottom: 90px;
            h2 {
              margin-bottom: 0;
            }
          }
          & > img {
            display: block;
            border-radius: 20px;
            width: calc(110%);
            max-width: calc(110%);
            margin-left: -9.1%;
          }
        }
        .img {
          img {
            display: block;
            border-radius: 20px;
            &:first-child {
              width: 70%;
              margin-left: auto;
              margin-bottom:25%;
            }
            &:last-child {
              width: 48%;
              margin-left: 18%;
            }
          }
        }
      }
    }
  }
}

#interviews {
  .wrap {
    padding: 240px 0;
    overflow: hidden;
    .contents {
      .ttl {
        display: grid;
        grid-template-columns: repeat(2,auto);
        align-items: end;
        justify-content: space-between;
        margin-bottom: 80px;
        h2 {
          margin-bottom: 0;
        }
        .control {
          display: grid;
          grid-template-columns: repeat(2,auto);
          align-items: end;
          grid-column-gap: 80px;
          & > a {
            font-size: 2.0rem;
            display: grid;
            grid-template-columns: auto 1em;
            grid-column-gap: .66em;
            align-items: center;
            border-bottom:1px solid var(--color_text);
            padding-bottom: .66em;
          }
          ul {
            display: grid;
            grid-template-columns: repeat(2,54px);
            grid-column-gap: 20px;
            li {
              height: 54px;
              background-color: var(--color_text);
              display: grid;
              grid-template-columns: 16px;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              &.slide_prev {
                img {
                  transform: rotate(-180deg);
                }
              }
            }
          }
        }
      }
      .interviews_slider {
        width: 100vw;
        /* .slick-list {
          overflow: visible;
        } */
        .slide {
          /* transition: .3s;
          &:not(.slick-current):not(.slick-current ~ .slide) {
            opacity: 0;
          } */
          padding-right: 50px;
          a {
            display: block;
          }
          .img {
            border-radius: 20px;
            overflow: hidden;
          }
        }
        .cat {
          display: grid;
          grid-template-columns: repeat(2,auto);
          align-items: center;
          justify-content: space-between;
          margin:30px 0;
          dt {
            font-size: 1.6rem;
            color:var(--color_text2);
          }
          dd {
            font-size: 1.5rem;
            font-weight: 500;
            color:var(--color_white);
            background-color: var(--color_job);
            height: 1.8em;
            padding:0 1em;
            display: grid;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
          }
        }
        h3 {
          font-size: 2.8rem;
          margin-bottom: .5em;
        }
        p {
          line-height: 1.5;
          &.cpy {
            font-size: 1.8rem;
            margin-bottom: 1em;
          }
          &.info {
            font-size: 1.6rem;
            color:var(--color_text3);
          }
        }
      }
    }
  }
}

#benefits {
  .wrap {
    padding-bottom: 300px;
    .contents {
      max-width: 1630px;
      .ttl_h2 {
        justify-items: center;
        text-align: center;
        margin-bottom: 4em;
      }
      ul {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        align-items: center;
        grid-column-gap: 5%;
        li {
          position: relative;
          &:not(:last-child) {
            &::after {
              content:'';
              height: 100%;
              border-right: 1px solid var(--color_text2);
              position: absolute;
              top:50%;
              right: -8.33%;
              transform: translateY(-50%);
            }
          }
          a {
            font-size: 2.4rem;
            display: grid;
            grid-template-columns: 1fr .66em;
            align-items: center;
            grid-column-gap: 1em;
            h3 {
              display: grid;
              grid-template-columns: auto 1fr;
              align-items: center;
              .font_en {
                color:var(--color_blue);
                font-size: 1.5rem;
                min-width: 13em;
              }
            }
          }
        }
      }
    }
  }
}

@media ( hover:hover) {

  #about {
    .wrap {
      .contents {
        a {
          transition: .3s;
          .contents_inner {
            img {
              transition: .3s;
            }
          }
          &:hover {
            opacity: .8;
            .contents_inner {
              .img {
                img {
                  transform: scale(1.05);
                }
              }
              .detail {
                .btn_more {
                  img {
                    transform: translateX(5px);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #projects {
    .wrap {
      .contents {
        ul {
          li {
            a {
              transition: .3s;
              .ttl {
                & > img {
                  transition: .3s;
                }
              }
              .img {
                img {
                  transition: .3s;
                }
              }
              &:hover {
                opacity: .8;
                .ttl {
                  & > img {
                    transform: translateY(-.2em) translateX(5px);
                  }
                }
                .img {
                  img {
                    transform: scale(1.05);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #interviews {
    .wrap {
      .contents {
        .ttl {
          .control {
            & > a {
							img {
								transition: .3s;
							}
							&:hover {
								img {
									transform: translateX(5px);
								}
							}
            }
            ul {
              li {
                img {
                  transition: .3s;
                }
                &:hover {
                  img {
                    transform: translateX(5px);
                  }
                }
                &.slide_prev {
                  &:hover {
                    img {
                      transform: translateX(-5px) rotate(-180deg);
                    }
                  }
                }
              }
            }
          }
        }
        .interviews_slider {
          .slide {
            a {
              transition: .3s;
              .img {
                img {
                  transition: .3s;
                }
              }
              &:hover {
                opacity: .8;
                img {
                  transform: scale(1.05);
                }
              }
            }
          }
        }
      }
    }
  }

  #benefits {
    .wrap {
      .contents {
        ul {
          li {
            a {
							img {
								transition: .3s;
							}
							&:hover {
								img {
									transform: translateX(5px);
								}
							}
            }
          }
        }
      }
    }
  }

}
@media screen and (max-width: 1500px) {

  #mv {
    .wrap {
      .contents {
        position: relative;
        .mv {
          p {
            padding-right: 0em;
          }
        }
        .news {
          padding:30px 40px;
        }
      }
    }
  }

  #about {
    .wrap {
      .contents {
        .about_slider {
          .slide {
            width: 70vw;
          }
        }
      }
    }
  }

  #interviews {
    .wrap {
      .contents {
        .interviews_slider {
          .slide {
            padding-right: 30px;
          }
        }
      }
    }
  }

  #benefits {
    .wrap {
      .contents {
        ul {
          li {
            a {
              h3 {
                grid-template-columns: 1fr;
                grid-row-gap: .66em;
              }
            }
          }
        }
      }
    }
  }

}

@media screen and (max-width: 1200px) {

  #about {
    .wrap {
      .contents {
        .about_slider {
          .slide {
            padding-right: 70px;
            h3 {
              font-size: 3.0rem;
            }
          }
        }
      }
    }
  }

}

@media screen and (max-width: 1024px) {

  #mv {
    .wrap {
      .contents {
        display: grid;
        grid-template-rows: 1fr auto;
        padding:40px 0;
        grid-row-gap: 30px;
        min-height: 100vh;
        min-height: 100dvh;
        .mv {
          padding: 0;
          height: auto;
          min-height: auto;
          h1 {
            font-size: calc(min(5.4vw,9.5rem) * var(--fontscale));
            &::before {
              top:var(--x4);
            }
            &::after {
              font-size: calc(min(5.4vw,9.5rem) * var(--fontscale));
              clip-path: circle(var(--x2) at center var(--x4));
            }
          }
          p {
            justify-self: unset;
            font-size: 1.4rem;
            max-width: 100%;
          }
        }
        .news {
          position: relative;
          left: auto;
          bottom:auto;
          padding:20px 25px;
          max-width: 100%;
          align-self: start;
        }
      }
    }
  }

  #about {
    .wrap {
      padding: 200px 0;
      .contents {
        .ttl {
          margin-bottom: 50px;
        }
        .about_slider {
          .slide {
            width: 75vw;
            padding-right: 50px;
            h3 {
              font-size: 2.6rem;
            }
            .contents_inner {  
              .img {
                border-radius: 15px;
              }
            }
          }
        }
      }
    }
  }

  #projects {
    .wrap {
      padding-bottom: 200px;
      .contents {
        ul {
          li {
            a {
              .ttl {
                font-size: 1.8rem;
                h3 {
                  .font_en {
                    font-size: 1.2rem;
                  }
                }
              }
              .img {
                border-radius: 15px;
              }
            }
          }
        }
      }
    }
  }

  #works {
    .wrap {
      padding:120px 0 100px;
      .contents {
        .contents_inner {
          display: grid;
          grid-column-gap: 3%;
          .detail {
            & > img {
              border-radius: 15px;
            }
          }
          .img {
            img {
              border-radius: 15px;
            }
          }
        }
      }
    }
  }

  #interviews {
    .wrap {
      padding: 200px 0;
      .contents {
        .ttl {
          .control {
            grid-column-gap: 40px;
          }
        }
        .interviews_slider {
          .slide {
            width: 280px;
            padding-right: 25px;
            .img {
              border-radius: 15px;
            }
          }
          .cat {
            dt {
              font-size: 1.4rem;
            }
            dd {
              font-size: 1.4rem;
            }
          }
          h3 {
            font-size: 2.4rem;
          }
          p {
            &.cpy {
              font-size: 1.6rem;
            }
            &.info {
              font-size: 1.2rem;
            }
          }
        }
      }
    }
  }

  #benefits {
    .wrap {
      padding-bottom: 200px;
      .contents {
        ul {
          grid-template-columns: 33% 1fr auto;
          li {
            a {
              font-size: 2.2rem;
              h3 {
                .font_en {
                  font-size: 1.2rem;
                }
              }
            }
          }
        }
      }
    }
  }

}

@media screen and (max-width: 768px) {

  #mv {
    .wrap {
      .contents {
        grid-row-gap: 40px;
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: 100px;
        .mv {
          grid-template-rows: 100px auto 1fr;
          h1 {
            font-size: min(clamp(2.7rem,7.2vw,4rem) * var(--fontscale));
            &::before {
              content:'';
              top:var(--y2);
              transform: translate(-50%,0);
            }
            &::after {
              content:'水と環境の\Aオペレーションカンパニー';
              font-size: min(clamp(2.7rem,7.2vw,4rem) * var(--fontscale));
              white-space: pre;
              top:0;
              transform: translate(-50%,0);
              clip-path: circle(var(--x2) at center var(--y3));
            }
          }
          p {
            font-size: .95rem;
            padding-top: 0;
            align-self: end;
          }
        }
        .news {
          ul {
            font-size: 1.4rem;
            li {
              grid-template-columns: 1fr;
              position: relative;
              .date {
                position: absolute;
                right: 0;
                top:-2em;
              }
            }
          }
        }
        .btn_internship {
          font-size: 1.5rem;
          display: grid;
          width: 7em;
          grid-template-columns: 1fr .8em;
          align-items: center;
          position: absolute;
          z-index: 2;
          top:90px;
          left: 0;
        }
      }
    }
  }

  #about {
    .wrap {
      padding: 100px 0;
      .contents {
        .ttl {
          grid-template-columns: 1fr;
          margin-bottom: 40px;
        }
        .about_slider {
          width: 100%;
          display: grid;
          grid-row-gap: 50px;
          .slide {
            width: 100%;
            padding-right: 0;
            &:not(.slick-current):not(.slick-current ~ .slide) {
              opacity: 1;
            }
            h3 {
              font-size: 2.1rem;
              grid-row-gap: .25em;
              margin-bottom: .66em;
              .font_en {
                font-size: 1.2rem;
              }
            }
            .contents_inner {  
              grid-template-columns: 1fr;
              grid-row-gap: 30px;
              .detail {
                grid-row-gap: 20px;
                .btn_more {
                  justify-self: unset;
                }
              }
              .img {
                order:1;
              }
            }
          }
        }
      }
    }
  }

  #projects {
    .wrap {
      padding-bottom: 100px;
      .contents {
        ul {
          li {
            a {
              grid-template-columns: 1fr;
              grid-row-gap: 30px;
              padding:30px 0 40px;
              .ttl {
                grid-template-columns: 1.2em 1fr;
                grid-column-gap: 1em;
                & > img {
                  transform: unset;
                  align-self: center;
                }
                h3 {
                  grid-template-columns: 1fr;
                  .txt {
                    grid-area: unset;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #works {
    .wrap {
      padding:100px 0 80px;
      .contents {
        .contents_inner {
          grid-template-columns: 1fr;
          .detail {
            display: contents;
            .ttl {
              grid-template-columns: 1fr;
              grid-row-gap: 50px;
              margin-bottom: 0;
              h2 {
                margin-bottom: 0;
              }
            }
            & > img {
              width: 96%;
              margin-left: -20px;
              order:2;
              margin-bottom: 30px;
            }
          }
          .img {
            display: contents;
            img {
              &:first-child {
                margin-top: -25px;
                margin-bottom:30px;
                margin-right: -20px;
              }
              &:last-child {
                width: 50%;
                order:3;
              }
            }
          }
        }
      }
    }
  }

  #interviews {
    .wrap {
      padding: 100px 0;
      .contents {
        .ttl {
          grid-template-columns: 1fr;
          grid-row-gap: 30px;
          margin-bottom: 50px;
          .control {
            justify-content: space-between;
            grid-column-gap: unset;
            & > a {
              font-size: 1.5rem;
            }
          }
        }
        .interviews_slider {
          .slide {
            width: 280px;
            padding-right: 25px;
            .img {
              border-radius: 15px;
            }
          }
          .cat {
            dt {
              font-size: 1.4rem;
            }
            dd {
              font-size: 1.4rem;
            }
          }
          h3 {
            font-size: 2.4rem;
          }
          p {
            &.cpy {
              font-size: 1.6rem;
            }
            &.info {
              font-size: 1.2rem;
              background: url(../../assets/img/common/arrow04.svg) no-repeat right bottom/14px auto;
            }
          }
        }
      }
    }
  }

  #benefits {
    .wrap {
      padding-bottom: 120px;
      .contents {
        .ttl_h2 {
          margin-bottom: 3em;
        }
        ul {
          grid-template-columns: 1fr;
          grid-row-gap: 40px;
          li {
            &:not(:last-child) {
              &::after {
                content:none;
              }
            }
            border-bottom: 1px solid var(--color_text);
            a {
              padding-bottom: 1em;
              img {
                align-self: end;
                margin-bottom: .25em;
              }
            }
          }
        }
      }
    }
  }

}