@charset "utf-8";

/**
import shippori mincho
**/
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');

/**
TOP PAGE
**/
html {
  &:has(#top_mv.ready) {
    overflow: hidden;
  }
}
body {
  &:has(#top_mv) {
    &::before {
      content:'';
      opacity: 0;
      pointer-events: none;
      transition: 1s;
      display: block;
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 1;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: url(/dcms_media/other/top-loading.svg) no-repeat center center/60px auto #222222;
    }
    #cta_contact {
      display: none;
    }
  }
  &:has(#top_mv.ready) {
  overflow: hidden!important;
    & > * {
      opacity: 0;
      pointer-events: none;
    }
    &::before {
      opacity: 1;
    }
  }
}

html {
  &:not(.is-editor) {
    body {
      background-color: #222222;
      * {
        font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
        box-sizing:border-box;
        font-feature-settings: "palt";
        line-height:1;
      }
      .fadeup, .fadeups > * {
        opacity: 0;
      }
    }

  }
}

html {
  &.is-editor {

    #dcms_layoutPageBlockPasteArea {
      background-color: #222222;  
      &:has(#top_mv) {
        * {
          font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
          box-sizing:border-box;
          font-feature-settings: "palt";
          line-height:1;
        }
        .fadeup, .fadeups > * {
          opacity: 0;
        }
      }
    }

  }
}

.f-button.is-close-button {
  visibility: visible!important;
}

/**
TOP HEADER
**/

.lib-header__outer {
  background: none;
}
body {
  &:has(.lib-hero__outer) {
    &::before {
      content:'';
      display:block;
      width:100%;
      height:60px;
      background-color:rgba(34,34,34,.8);
      position:fixed;
      left:0;
      top:0;
      z-index:1;
    }
  }
}
.lib-header__bar {
  background: none;
  box-shadow: none;
}
.lib-header__outer.lib-header-BS01 .lib-menu__btn {
  background: none;
  border:none;
  &::after {
    content:none;
  }
}
.lib-header__outer.lib-header-BS01 .lib-header__logo {
    width: 200px
}
.lib-header__outer.lib-header-BS01 .lib-header__logo a {
  margin:0;
  padding:0;
  background:none;
  box-shadow: none;
  height: auto;
  .thumb {
    background: none;
  }
}
.lib-header__outer.lib-header-BS01 .lib-utility__outer {
  height: auto;
  background: none;
  box-shadow: none;
  padding:0;
}
.lib-header__outer.lib-header-BS01 .lib-utility__item a {
  color:var(--WHT);
  font-size: min(1.42vw,1rem);
}
.lib-header__outer.lib-header-BS01 .lib-utility__item a > .txt::before {
  background-color: var(--WHT);
}

/**
TOP FOOTER
**/

.lib-footer__outer {
  background: url(/dcms_media/image/top-footer-bg.jpg) no-repeat center center/cover;
  position: relative;
  border: none;
  padding-top: 5em;
  &::before {
    content:'';
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 26, 26, .7);
  }
  .lib-footer__inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    max-width: calc(100% - 40px);
    margin:0 auto;
    .lib-footer__logo {
      width: 300px;
      a {
        .thumb {
          background: none;
        }
      }
    }
    .lib-footer__data {
      margin-bottom: 1.5em;
      dt {
        color:var(--WHT);
        line-height:1.8;
        font-size: 1.2rem;
        margin-bottom:.5em;
      }
      .lib-footer__phone {
        color:var(--WHT);
        font-size: 1.2rem;
        a {
          color:var(--WHT);
        }
      }
    }
    .lib-footer__guidance {
      justify-content: flex-start;
    }
    .lib-footer__gnav {
      & > ul {
        display: flex;
        flex-wrap: wrap;
        font-size: 1.1rem;
        max-width: 30em;
        gap: 2em 1.5em;
        margin-left: auto;
        margin-right: 0;
        li {
          padding: 0;
          margin: 0;
          &::before {
            content:none;
          }
        }
        & > li {
          a {
            color:var(--WHT);
            text-decoration: none;
          }
          ul {
            padding-top: 1em;
            font-size: 1rem;
            display: grid;
            grid-row-gap: 1em;
            li {
              a {
                display: grid;
                grid-template-columns: 2em 1fr;
                align-items: center;
                grid-column-gap: .5em;
                line-height:1.3;
                &::before {
                  content:'';
                  height: 1px;
                  background-color: var(--WHT);
                }
              }
            }
          }
        }
      }
    }
  }
  .lib-footer__utility {
    background: none!important;
    position: relative;
    z-index: 1;
    .wrap {
      justify-content: center!important;
      .lib-footer__copyright {
        color:var(--WHT)!important;
        background: none!important;
      }
    }
  }
}


@media (hover:hover) {

  .lib-footer__outer {
    ul {
      li {
        a {
          &:hover {
            text-decoration: none;
            opacity: .66;
            .txt {
              text-decoration: none;
            }
          }
        }
      }
    }
  }

}

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


  .lib-footer__outer {
    .lib-footer__inner {
      .lib-footer__logo {
        width: 200px;
      }
      .lib-footer__data {
        .lib-footer__phone {
          font-size: 1.1rem;
        }
      }
      .lib-footer__guidance {
        justify-content: flex-start;
        padding: 0;
        font-size: .9rem;
        li {
          &::before {
            background-color: var(--WHT);
          }
          a {
            color:var(--WHT);
          }
        }
      }
      .lib-footer__gnav {
        & > ul {
          font-size: 1.0rem;
          max-width: 26em;
        }
      }
    }
  }

}

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


  .lib-footer__outer {
    padding-top: 4em;
    .lib-footer__inner {
      position: relative;
      z-index: 1;
      .lib-footer__info {
        display: grid;
        justify-items: center;
        padding-bottom: 30px;
        .lib-footer__logo {
          padding: 0;
        }
      }
      .lib-footer__data {
        dt {
          font-size: 1.1rem;
        }
        .lib-footer__phone {
          color:var(--WHT);
          font-size: 1.1rem;
          a {
            color:var(--WHT)!important;
          }
        }
      }
      .lib-footer__guidance {
        justify-content: center;
        a {
          font-size: .9rem;
        }
      }
      .lib-footer__gnav {
        & > ul {
          display: grid;
          grid-template-columns: repeat(2,auto);
          justify-content: center;
          grid-gap: 1.5em;
          max-width: 100%;
          li {
            padding: 0;
            margin: 0;
            &::before {
              content:none;
            }
          }
          & > li {
            a {
              color:var(--WHT);
              text-decoration: none;
            }
          }
        }
      }
    }
    .lib-footer__utility {
      padding:1.5em 0;
    }
  }

}


body {
    .ttl_h2 {
      font-size: min(3.1vw,2.5rem);
      font-size:3.1vw;
      color:var(--WHT);
      display: grid;
      justify-items: center;
      grid-row-gap: .66em;
      font-weight: 400;
      .font_en {
        font-size: min(6.2vw,5.0rem);
        font-size:6.2vw;
        font-weight: 700;
        color:inherit;
      }
    }
  &:has(#top_mv),&:has(#recruit-page) {
    #wrapper {
      padding-top: 0;
    }
    #contents {
      max-width: 100%;
      padding: 0;
    }
    .wrap {
      max-width: 100%;
      margin: 0;
      padding: 0;
      .contents {
        /* max-width: 1300px; */
        margin:0 auto;
        .contents_inner {
          margin:0;
        }
        p {
          color:var(--WHT);
          line-height: 1.8;
          font-size: min(2.2vw,1.2rem);
          font-size:1.4vw;
        }
      }
      &.lattice {
        background: url(/dcms_media/image/top-bg1.png) repeat-y center center/cover;
        position: relative;
        &::before {
          content:'';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top:0;
          z-index: 0;
          background-color: transparent;
          background-image: linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
          background-position: center top;
          background-size: min(20%,260px) min(20vw,260px);
          background-size: 20% 20vw;
        }
        .contents {
          position: relative;
          z-index: 1;
        }
      }
    }
    .ttl_h2 {
      font-size: min(3.1vw,2.5rem);
      font-size:3.1vw;
      color:var(--WHT);
      display: grid;
      justify-items: center;
      grid-row-gap: .66em;
      font-weight: 400;
      .font_en {
        font-size: min(6.2vw,5.0rem);
        font-size:6.2vw;
        font-weight: 700;
        color:inherit;
      }
    }
    .btn_green_arrow {
      font-size: 1.2rem;
      font-size:1.4vw;
      width: 100%;
      max-width: 360px;
      max-width:27.7vw;
      /* height: 70px; */
      aspect-ratio:5.14;
      background-color: #00693e;
      color:var(--WHT);
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      grid-column-gap: 1.25em;
      padding:0 1.25em;
      img {
        width: 2em;
        order:2;
      }
      &::after {
        content:'';
        height: calc(100% - 1.3em);
        width: 1px;
        background-color: #FFFFFF;
      }
    }
  }
}


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

  body {
    &:has(#top_mv),&:has(#recruit-page) {
      .wrap {
        &.lattice {
          &::before {
            background-position: left top;
          }
        }
      }
    }
  }

}

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

  body {
    &:has(#top_mv),&:has(#recruit-page) {
      .wrap {
        .contents {
          p {
            font-size: min(4.2vw,1.3rem);
            font-size:4.3vw;
          }
        }
        &.lattice {
          background-size:100% auto;
          background-position:left top;
          &::before {
            background-size: min(calc(100%/3),260px) min(calc(100vw/3),260px);
          }
        }
      }
      .ttl_h2 {
        font-size: min(6.6vw,2.0rem);
        font-size:6.9vw;
        .font_en {
          font-size: min(13vw,4.0rem);
          font-size:13.8vw;
        }
      }
      .btn_green_arrow {
        font-size: 1rem;
        font-size:4.8vw;
        max-width: 320px;
        max-width:85vw;
      }
    }
  }
    
}

@media (hover:hover) {

  body {
    &:has(#top_mv),&:has(#recruit-page) {
      .btn_green_arrow {
        &:hover {
          filter: brightness(1.2);
          opacity: 1;
          img {
            transform: translateX(.33em);
          }
        }
        img {
          transition: .3s;
        }
      }
    }
  }

}

/**
TOP MV
**/
body {
  &:has(#top_mv) {
    #top_mv {
      .wrap {
        height: 100vh;
        position: relative;
        &.lattice {
          background-position: center top;
          &::before {
            background-position: bottom center;
          }
        }
        .video {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top:0;
          z-index: 0;
          transform-origin: center center;
          #mvvideo {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .play {
            display: block;
            width: 100px;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 2;
            opacity: 0;
            pointer-events: none;
          }
          &::before {
            content:'';
            display: block;
            position: absolute;
            z-index: 1;
            left: 0;
            top:0;
            width: 100%;
            height: 100%;
            background-color: rgba(26, 26, 26, .45);
          }
        }
        .scroll {
          position: absolute;
          right: 100px;
          right:8%;
          bottom:0;
          z-index: 2;
          color:var(--WHT);
          display: grid;
          justify-items: center;
          grid-row-gap: .5em;
          font-size:1.4vw;
          span {
            writing-mode: vertical-rl;
          }
          &::after {
            content:'';
            width: 1px;
            height: 10em;
            background-color: var(--WHT);

            animation-name: scrollanim;
            animation-delay: 0s;
            animation-duration:  1.5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in;
            will-change: transform;
            transform-origin: top center;
          }
        }
        .contents {
          display: grid;
          height: 100%;
          width: calc(100% - 60px);
          width:85%;
          /* max-width: 1100px; */
          position: relative;
          z-index: 2;
          height: 100%;
          display: grid;
          align-content: end;
          padding-bottom: 15vh;
          pointer-events: none;
          h1 {
            color:#FFFFFF;
            font-size: min(5.3vw,4.2rem);
            font-size:5vw;
            line-height: 1.8;
            font-weight: 500;
            span {
              font-size: 1.3em;
            }
            /**hidden txt**/
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
          }
        }
      }
    }
  }
}


@keyframes scrollanim {
    0% {
    transform:scaleY(0);
    }
    60% {
    transform:scaleY(1);
    }
    75% {
    transform:scaleY(1);
    }
    100% {
    transform:scaleY(1);
    }
}

@media screen and (max-width:1300px) {
  
  body {
    &:has(#top_mv) {
      #top_mv {
        .wrap {
          &.lattice {
            &::before {
              background-position: left bottom;
            }
          }
        }
      }
    }
  }

}

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

  body {
    &:has(#top_mv) {
      #top_mv {
        .wrap {
          &.lattice {
        background-image:url(/dcms_media/image/top-bg2-sp.png);
        background-position:left bottom;
      }
          .scroll {
            right: 20px;
            right:5%;
            font-size: .8rem;
            font-size:3.0vw;
            &::after {
              height: 8em;
            }
          }
          .contents {
            padding-bottom: 10vh;
            pointer-events: none;
            width:90%;
            h1 {
              font-size: min(10vw,4rem);
              font-size:10.7vw;
            }
          }
        }
      }
    }
  }
    
}

/**
TOP COMPANY
**/

body {
  &:has(#top_mv) {
    #top_company {
      .wrap {
        background-position: center -100vh;
        .contents {
          .ttl_h2 {
            height: min(20vw,260px);
            height:20vw;
            align-content: center;
          }
          .contents_inner {
            display: grid;
            align-items: center;
            grid-column-gap: 2%;
            .img {
              img {
                aspect-ratio: 1;
                object-fit: cover;
                width: 100%;
              }
            }
            &.company1 {
              grid-template-columns: 20% 1fr;
              height: min(20vw,260px);
              height:20vw;
            }
            &.company2 {
              grid-template-columns: 1fr 40%;
              height: min(40vw,520px);
              height:40vw;
              .img {
                order:1;
              }
              .detail {
                padding-left: 1.5em;
                justify-self:end;
              }
            }
            &.company3 {
              grid-template-columns: 40% 1fr;
              height: min(20vw,260px);
              height:20vw;
              .img {
                img {
                  aspect-ratio: 2;
                }
              }
            }
          }
          .btn_box {
            height: min(20vw,260px);
            height:20vw;
            max-width: 360px;
            max-width:27.7vw;
            margin:0 auto;
            display: grid;
            align-items: center;
            grid-template-columns: 1fr;
            justify-content: center;
          }
        }
      }
    }
  }
}

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

  body {
    &:has(#top_mv) {
      #top_company {
        .wrap {
          background-image:url(/dcms_media/image/top-bg1-sp.png);
          background-position:left top;
          .contents {
            .ttl_h2 {
              height: calc(100vw/1.5);
            }
            .contents_inner {
              .detail {
                padding:0 1.5em;
              }
              &.company1 {
                grid-template-columns: 1fr;
                height: calc(100vw/1.5);
                grid-template-rows: repeat(2,1fr);
                .img {
                  width: calc(100%/3);
                }
              }
              &.company2 {
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr;
                height: 100vw;
                .detail {
                  padding:0 2em;
                }
                .img {
                  order:unset;
                  width: calc(100%/1.5);
                  justify-self: end;
                }
              }
              &.company3 {
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr;
                height: 100vw;
                .img {
                  width: calc(100%/1.5);
                }
              }
            }
            .btn_box {
              height: calc(100vw/3);
              max-width: 320px;
              max-width:85vw;
            }
          }
        }
      }
    }
  }
    
}

/**
TOP STRENGTHS
**/
body {
  &:has(#top_mv) {
    #top_strengths {
      position: relative;
      z-index: 1;
      .wrap {
        height: 100vh;
        display: grid;
        align-items: center;
        position: relative;
        overflow: hidden;
        .contents {
          /* max-width: 1100px; */
          width: calc(100% - 40px);
          width:85%;
          position: relative;
          z-index: 2;
          .contents_inner {
            display: grid;
            grid-template-columns: 41% 1fr;
            align-items: start;
            grid-column-gap: 6%;
            .imgbox {
              position: relative;
              aspect-ratio: 1;
              overflow: hidden;
              .imgbox_inner {
                display: grid;
              }
              .img {
                aspect-ratio: 1;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 120%;
                  object-fit: cover;
                  will-change: transform;
                }
              }
            }
            .detail_box {
              .ttl_h2 {
                justify-items: start;
                font-size: 1.5rem;
                font-size:1.85vw;
                grid-row-gap: 1.2em;
                margin-bottom: 1.5em;
              }
              position: relative;
              .detail {
                opacity: 0;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                p {
                  font-size: 1rem;
                  font-size:1.4vw;
                }
                .btn_green_arrow {
                  margin-top: 3em;
                }
                &:first-child {
                  opacity: 1;
                  position: relative;
                  top: auto;
                  transform: none;
                }
              }
            }
          }
        }        
        .bg_box {
          position: absolute;
          top:0;
          left: 0;
          width: 100%;
          height: 100vh;
          z-index: 0;
          overflow: hidden;
          .bg_inner {
            display: grid;
          }
          .img {
            overflow: hidden;
            width: 100%;
            height: 100vh;
            img {
              width: 100%;
              height: 125%;
              object-fit: cover;
            }
          }
        }
        &::before {
          content:'';
          display: block;
          position: absolute;
          z-index: 1;
          left: 0;
          top:0;
          width: 100%;
          height: 100%;
          background-color: rgba(26, 26, 26, .7);
        }
      }
    }
  }
}

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

  body {
    &:has(#top_mv) {
      #top_strengths {
        .wrap {
          height: 100vh;
          /* height: 100dvh; */
          .contents {
            width:92%;
            .contents_inner {
              grid-template-columns: 1fr;
              grid-row-gap: 5vw;
              padding-bottom: 60px;
              padding-bottom:16vw;
              justify-items:center;
              .imgbox {
                order:1;
                aspect-ratio: 2;
                max-width:85vw;
                .img {
                  aspect-ratio: 2;
                }
              }
              .detail_box {
                .ttl_h2 {
                  justify-items: center;
                  font-size: min(6.6vw,2.0rem);
                  font-size:6.6vw;
                  grid-row-gap: .66em;
                  margin-bottom: 1em;
                }
                .detail {
                  p {
                    font-size: min(3.6vw,1rem);
                    font-size:4.0vw;
                  }
                  .btn_green_arrow {
                    margin: 2em auto 0;
                    position: absolute;
                    bottom:-75vw;
                    left: 50%;
                    transform: translateX(-50%);
                  }
                }
              }
            }
          } 
        }
      }
    }
  }
    
}

/**
TOP BUSINESS FACTORY
**/
body {
  &:has(#top_mv) {
    #top_business {
      .wrap {
        .gallery {
          /* max-width: 1300px; */
          margin:0 auto;
          display: grid;
          grid-template-columns: repeat(5,20%);
          height: min(40vw,520px);
          height:40vw;
          li {
            margin: 0;
            padding: 0;
            aspect-ratio: 0.5;
            display: grid;
            height: 100%;
            img {
              width:100%;
            }
            &:nth-child(odd) {
              img {
                align-self: end;
              }
            }
            &::before {
              content:none;
            }
          }
        }
        .contents {
          &.business {
            /* max-width: 1100px; */
            width: calc(100% - 40px);
            width:85vw;
            height: min(60vw,780px);
            height:60vw;
            padding:min(6vw,90px) 0;
            padding:6vw 0;
            .contents_inner {
              background: url(/dcms_media/image/top-business-bg.jpg) no-repeat center center/cover;
              padding:min(4vw,70px) min(4vw,90px);
              padding:4vw 6vw;
              display: grid;
              grid-template-columns: repeat(2,1fr);
              grid-column-gap: 6%;
              .detail {
                display: grid;
                align-content: space-between;
                .ttl_h2 {
                  color:#333333;
                  justify-items: start;
                  margin-bottom: .66em;
                }
                p {
                  font-size: min(1.7vw,1rem);
                  font-size:1.23vw;
                  color:#333333;
                  margin-bottom: 2em;
                }
              }
              .img {
                img {
                  display: block;
                  position: relative;
                  &:first-child {
                    width: 62%;
                    z-index: 2;
                  }
                  &:last-child {
                    width: 68%;
                    margin-left: auto;
                    margin-top: -24%;
                    z-index: 1;
                  }
                }
              }
            }
          }
          &.factory {
            .contents_inner {
              display: grid;
              grid-template-columns: 40% 1fr;
              grid-column-gap: 10%;
              .detail {
                padding-top: 1em;
                .ttl_h2 {
                  justify-items: start;
                  margin-bottom: 2em;
                }
                p {
                  font-size: 1rem;
                  font-size:1.23vw;
                  max-width: 34em;
                }
                .btn_green_arrow {
                  margin-top: 4em;
                }
              }
              .img {
                display: grid;
                img {
                  width: min(50%, 260px);
                  width:50%;
                  height: min(20vw, 260px);
                  height:20vw;
                  &:nth-child(odd) {
                    justify-self: end;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

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

  body {
    &:has(#top_mv) {
      #top_business {
        .wrap {
      background-image:url(/dcms_media/image/top-bg3-sp.png);
          .gallery {
            grid-template-columns: repeat(3,calc(100%/3));
            height: calc(100vw/1.5);
            li {
              &:first-child,&:last-child {
                display: none;
              }
            }
          }
          .contents {
            &.business {
              width: 100%;
              height: auto;
              min-height: calc(100vw/3 * 8);
              padding:15vw 0 0;
              .contents_inner {
                padding:10vw 6vw;
                grid-template-columns: 1fr;
                grid-row-gap:7vw;
                justify-items:center;
          .ttl_h2 {
            justify-self:start;
            margin-bottom:.33em;
          }
                .detail {
                  display: contents;
                  p {
                    font-size: min(3.8vw,1rem);
                    font-size:4.3vw;
                    margin-bottom: 0;
                  }
                }
                .img {
                  max-width:85vw;
                  img {
                    display: block;
                    position: relative;
                    &:first-child {
                      width: 62%;
                      z-index: 2;
                    }
                    &:last-child {
                      width: 68%;
                      margin-left: auto;
                      margin-top: -24%;
                      z-index: 1;
                    }
                  }
                }
                .btn_green_arrow {
                  grid-area: 4/1/5/2;
                  margin:0 auto;
                }
              }
            }
            &.factory {
              .contents_inner {
                grid-template-columns: 1fr;
                .detail {
                  height: calc(100vw/3 * 4);
                  padding:8vw 1.5em 1em;
                  .ttl_h2 {
                    font-size: min(6.0vw,2.0rem);
                    font-size:6vw;
                    margin-bottom: 2em;
                  }
                  p {
                    font-size: min(3.8vw,1rem);
                    font-size:4.3vw;
                    max-width: 100%;
                  }
                  .btn_green_arrow {
                    margin-top: 2.5em;
                }
                }
                .img {
                  order:1;
                  display: grid;
                  grid-template-columns: repeat(3,calc(100%/3));
                  height: calc(100vw/1.5);
                  img {
                    width: 100%;
                    height: auto;
                      &:nth-child(even) {
                        align-self: end;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
    
}

/**
TOP WORKS
**/
body {
  &:has(#top_mv) {
    #top_works {
      .wrap {
        overflow: hidden;
        background: url(/dcms_media/image/top-works-bg.jpg) repeat center center/1200px auto;
        .contents {
          /* max-width: 1100px; */
          width: calc(100% - 40px);
          width:85%;
          .ttl_box {
            padding:90px 0;
            padding:7vw 0;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            .ttl_h2 {
              color:#333333;
              justify-items: start;
            }
            .catlink {
              display: grid;
              grid-template-columns: repeat(4,1fr);
              grid-column-gap: 1em;
              li {
                margin: 0;
                padding:0;
                &::before {
                  content:none;
                }
                a {
                  text-decoration: none;
                  color:#333333;
                  border:1px solid #333333;
                  height: 2em;
                  width: 8em;
                  display: grid;
                  grid-template-columns: repeat(2,auto);
                  grid-column-gap: 1em;
                  align-items: center;
                  justify-content: center;
                  font-size: min(1.8vw,1rem);
                  font-size:1.35vw;
                  &::after {
                    content:'';
                    background-color: #333333;
                    width: .6em;
                    height: .7em;
                    clip-path: polygon(0 0,100% 50%, 0 100%);
                  }
                }
              }
            }
          }
        }
        #works_slider {
          display: flex;
          .splide__list {
            display: flex;
          }
          .splide__slide {
            margin: 0;
            padding: 0;
            height: auto;
            &::before {
              content:none;
            }
            &[aria-hidden="true"] {
              display: block;
            }
            .works_item {
              width: 540px;
              width:40vw;
              width:30vw;
              aspect-ratio: .7;
              margin: 0;
              padding: 0;
              position: relative;
              display: grid;
              align-content: end;
              & > img {
                display: block;
                position: absolute;
                z-index: 0;
                left: 0;
                top:0;
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
              dl {
                position: relative;
                z-index: 1;
                color:#FFFFFF;
                padding:5em 1em 1em;
                dt {
                  font-size: 1.1rem;
                  font-size:1.4vw;
                  font-size:1.1vw;
                  padding:.5em 0;
                }
                dd {
                  font-size: .8em;
                  font-size:1.1vw;
                  font-size:0.9vw;
                  line-height: 1.5;
                  &.cate {
                    display: inline-grid;
                    align-items: center;
                    justify-content: center;
                    font-size: .6rem;
                    font-size:.8vw;
                    line-height: 1;
                    height: 2em;
                    padding:0 1em;
                    border:1px solid #FFFFFF;
                  }
                }
                &::before {
                  content:'';
                  display: block;
                  width: 100%;
                  height: 100%;
                  background: #000000;
                  background: linear-gradient(0deg,rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
                  position: absolute;
                  left: 0;
                  top:0;
                  z-index: -1;
                }
              }
            }
            &:has(.works_item + .works_item) {
              height: 100%;
              display: grid;
              grid-template-rows: repeat(2,1fr);
              grid-row-gap: 15px;
              .works_item {
                width: 270px;
                width:20vw;
                width:15vw;
                aspect-ratio: unset;
              }
            }
          }
        }
        .btn_box {
          display: grid;
          grid-template-columns: 1fr;
          max-width: 360px;
          max-width:27.7vw;
          margin:0 auto;
          align-items: center;
          justify-content: center;
          padding:60px 0 90px;
          padding:5vw 0 7vw;
        }
      }
    }
  }
}


@media (hover:hover) {

  /**
  TOP WORKS
  **/
  body {
    &:has(#top_mv) {
      #top_works {
        .wrap {
          .contents {
            .ttl_box {
              .catlink {
                li {
                  a {
                    &::after {
                      transition: .3s;
                    }
                    &:hover {
                      opacity: 1;
                      background-color: #333333;
                      color:var(--WHT);
                      &::after {
                        background-color: var(--WHT);
                      }
                    }
                  }
                }
              }
            }
          }
  /**
          #works_slider {
            .splide__slide {
              .works_item {
                cursor: pointer;
                overflow: hidden;
                transition: .3s;
                & > img {
                  transition: .3s;
                }
                &:hover {
                  filter: brightness(1.2);
                  & > img {
                    transform:scale(1.05);
                  }
                }
              }
            }
          }
**/
        }
      }
    }
  }

}

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

  /**
  TOP WORKS
  **/
  body {
    &:has(#top_mv) {
      #top_works {
        .wrap {
          .contents {
            .ttl_box {
              padding:10vw 0;
              grid-template-columns:1fr;
              justify-items: center;
              grid-row-gap: 5vw;
              .catlink {
                grid-template-columns: repeat(2,1fr);
                grid-gap: 1em;
                li {
                  a {
                    font-size: min(3.8vw,1rem);
                    font-size:4vw;
                  }
                }
              }
            }
          }
          #works_slider {
            .splide__slide {
              .works_item {
              dl {
                  font-size:5vw;
                dt {
                  font-size:5vw;
                }
                dd {
                  font-size:4vw;
                  &.cate {
                  font-size:2.6vw;
                  }
                }
        }
                width: 270px;
                width:80vw;
                aspect-ratio: .6;
              }
              &:has(.works_item + .works_item) {
                .works_item {
                  width:80vw;
                }
              }
            }
          }
          .btn_box {
            max-width: 320px;
            max-width:85vw;
            padding:10vw 0;
          }
        }
      }
    }
  }
    
}

/**
TOP RECRUIT
**/
body {
  &:has(#top_mv) {
    #top_recruit {
      .splide__slide {
        margin: 0;
        padding: 0;
        height: auto;
        &::before {
          content:none;
        }
        &[aria-hidden="true"] {
          display: block;
        }
        img {
          display: block;
          height: min(20vw,260px);
          height:20vw;
          width: auto;;
        }
      }
      .wrap {
        .contents {
          /* max-width: 1100px; */
          width: calc(100% - 40px);
          width:85%;
          &.recruit {
            .contents_inner {
              height: min(40vw,520px);
              height:40vw;
              display: grid;
              grid-template-columns: 1fr auto;
              grid-column-gap: 6%;
              align-items: center;
              .detail {
                .ttl_h2 {
                  justify-items: start;
                  margin-bottom: 1em;
                }
                p {
                  font-size: min(1.8vw,1rem);
                  font-size:1.23vw;
                }
              }
        .btn_green_arrow {
          width:27.7vw;
        }
            }
          }
          &.contact {
            height: min(40vw,520px);
            height:40vw;
            padding:min(4vw,70px) 0;
            padding:6vw 0;
            .contents_inner {
              background: url(/dcms_media/image/top-business-bg.jpg) no-repeat center center/cover;
              padding:min(3vw,60px) min(4vw,90px);
              padding:4vw;
              display: grid;
              grid-template-columns: 1fr 40%;
              grid-column-gap: 6%;
              align-items: center;
              .detail {
                display: grid;
                align-content: space-between;
                .ttl_h2 {
                  color:#333333;
                  justify-items: start;
                  margin-bottom: .66em;
                  grid-row-gap:.33em;
                }
                p {
                  font-size: min(1.8vw,1rem);
                  font-size:1.23vw;
                  color:#333333;
                }
              }
              .btn_box {
                display: grid;
                grid-row-gap: min(3vw,50px);
                li {
                  margin: 0;
                  padding:0;
                  box-shadow: 0 6px 6px rgba(0,0,0,.2);
                  &::before {
                    content:none;
                  }
                  a {
                    display: grid;
                    align-items: center;
                    justify-content: center;
                    font-size: min(2vw,1.1rem);
                    font-size:1.23vw;
                    aspect-ratio: 4;
                    position: relative;
                    img {
                      display: block;
                      position: absolute;
                      z-index: 0!important;
                      margin: 0!important;
                      width: 100%!important;
                      height: 100%;
                      object-fit: cover;
                    }
                    .btntxt {
                      position: relative;
                      z-index: 1;
                      color:var(--WHT);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (hover:hover) {

  body {
    &:has(#top_mv) {
      #top_recruit {
        .wrap {
          .contents {
            &.contact {
              .contents_inner {
                .btn_box {
                  li {
                    margin: 0;
                    padding:0;
                    box-shadow: 0 6px 6px rgba(0,0,0,.2);
                    &::before {
                      content:none;
                    }
                    a {
                      overflow: hidden;
                      img {
                        transition: .3s;
                      }
                      &:hover {
                        opacity: 1;
                        filter: brightness(1.2);
                        img {
                          transform: scale(1.05);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

}

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

  body {
    &:has(#top_mv) {
      #top_recruit {
        .splide__slide {
          img {
            height: calc(100vw/3);
          }
        }
        .wrap {
          background-image:url(/dcms_media/image/top-bg4-sp.png);
          .contents {
            width: calc(100% - 40px);
            width:80%;
            &.recruit {
              .contents_inner {
                height: calc(100vw/3 * 4);
                grid-template-columns: 1fr;
                grid-column-gap: 6%;
                align-items: center;
                place-content: center;
                grid-row-gap: 10vw;
                .detail {
                  p {
                    font-size: min(3.8vw,1rem);
                    font-size:4.3vw;
                  }
                }
          .btn_green_arrow {
            width:100%;
            max-width:85vw;
          }
              }
            }
            &.contact {
              width:90%;
              height: auto;
              padding:15vw 0;
              .contents_inner {
                padding:10vw 6vw 15vw;
                grid-template-columns: 1fr;
                grid-row-gap: 8vw;
                .detail {
                  .ttl_h2 {
                    justify-items: center;
                    margin-bottom: 1em;
                  }
                  p {
                    font-size: min(4vw,1rem);
                    font-size:4vw;
                    color:#333333;
                  }
                }
                .btn_box {
                  grid-row-gap: min(6vw,40px);
                  grid-row-gap:5vw;
                  li {
                    a {
                      font-size: min(4vw,1.1rem);
                      font-size:4vw;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

}



body {
  &:not(:has(#top_mv)) {
    .lib-breadcrumb__inside {
      max-width:85%;
      color:var(--WHT);
      * {
        color:var(--WHT);
      }
    }
    #contents {
      max-width:100%;
      .container {
        width:85%;
        max-width:1120px;
      }
      * {
        color:#FFFFFF;
        line-height:1.8;
        font-size:min(16px,1.46vw);
      }
      .fs-40 {
        font-size:min(3.6vw,40px);
      }
      .fs-32 {
        font-size:min(2.9vw,32px);
      }
      .fs-26 {
        font-size:min(2.4vw,26px);
      }
      .fs-22 {
        font-size:min(2.0vw,22px);
      }
      .fs-18 {
        font-size:min(18px,1.64vw);
      }
      .fs-17 {
        font-size:min(17px,1.54vw);
      }
      .fs-16 {
        font-size:min(16px,1.46vw);
      }
      .fs-14 {
        font-size:min(14px,1.28vw);
      }
      h2.title {
        font-size:min(3.6vw,40px);
      }
      /**強み共通見出し **/
      .noto-sans {
        font-family: "Noto Sans JP", sans-serif;
      }
      .bg-white, .bg-light, .bg-lgry {
        * {
          color:#000000;
        }
      }
      :where(.lib-link__btn) {
        background-color:#00693e;
        border-color:#00693e;
        .txt {
          display:grid;
          grid-template-columns:1fr auto;
          align-items:center;
          grid-column-gap:0;
        }
      }
      /**見出し**/
      .lib-title__outer + .lib-card__caption {
          margin: .2em 0;
          color:#00693e;
          font-size:min(1.64vw,18px);
      }
      /**会社概要テーブル**/
      .lib-table__01.table.tbl01 {
        border-collapse: separate;
        border-spacing: 0 .75rem;
        > tbody > tr > th,
        > tbody > tr > td {
          padding: 1.6em 2.2em;
          vertical-align: top;
          border: 0;
        }
        > tbody > tr > th {
          width: 26%;
          text-align: left;
          color:#000000;
        }
        > tbody > tr{
          &:last-child {
            td {
              border-bottom: 1px solid #80807a;
            }
          }
          td {
          border-top: 1px solid #80807a;
          border-right: 1px solid #80807a;
          border-left: 1px solid #80807a;
        }
        }
      }
      /**アクセス**/
      /* .lib-map-001 {
        .lib-map-001__col .lib-title__outer h2.title {
          font-size: 24px;
        } */
      .lib-map-001__access {
        padding: 1.5rem !important;
        dt {
          font-weight: 700;
        }
      }
      /**沿革テーブル**/
      .lib-table__03.table.tbl02 {
        > tbody > tr {
          border-top: 1px solid #80807a;
          &:last-child {
            border-bottom: 1px solid #80807a;
          }
        }
        > tbody > tr > th,
        > tbody > tr > td {
          padding: 1.6em 1em;
          vertical-align: middle;
        }
        > tbody > tr > th {
          width: 20%;
          text-align: left;
          font-weight: 700;
          white-space: nowrap;
        }
      }
      /**完全ワンストップ体制フロー**/
      .lib-flow-001 {
        .lib-flow-001__row {
          align-items: flex-start !important;
        }
        .lib-flow-001__col {
          align-items: flex-start !important;
          height: auto !important;
        }
        .lib-flow-001__item {
          align-self: flex-start !important;
          align-items: flex-start !important;
          height: auto !important;
        }
        .lib-flow-001__inside {
          align-self: flex-start !important;
          height: auto !important;
        }
        .thumb {
          height: auto !important;
        }
        .thumb img {
          position: static;
          height: auto !important;
          aspect-ratio: 316 / 188;
        }
        .st_flow .lib-flow-001__col:after {
          border-top-color:#1d693c;
        }
        .lib-card__inside {
          padding: 1.25rem;
        }
        .lib-flow-001__step {
          position: static;
          width: auto;
          height: auto;
          transform: none;
          border-radius: 0;
          background: transparent !important;
          font-size: min(2.82vw,20px);
          margin-bottom: .75em;
        }
        .lib-flow-001__row {
          padding-top: 0;
          align-items: flex-start;
        }
      }
      #strength02 {
        .lib-flow-001 {
          .lib-flow-001__row {
            align-items: unset!important;
            .lib-flow-001__item {
              height:100%!important;
            }
            .lib-flow-001__inside {
              display:grid;
              height:100%!important;
              grid-template-rows:auto auto 1fr;
            }
          }
        }
      }
      /* 03 確かな実績と歴史 */
      .ratio-3x2 {
        aspect-ratio: 1 / .713;
      }
      /**こんなお悩みはありませんか？**/
      .container.concerns {
        .lib-fv__txtarea {
          h2.text-black {
            color:#1a1a1a;
          }
          ul.text-black {
            li {
              color:#1a1a1a;
            }
          }
        }
        .lib-fv__thumb {
          height: min(40vw,450px);
        }
      }
      /**空間別の対応領域**/
      .lib-horizon__row + .lib-horizon__row {
        margin-top: 4rem !important;
      }
      /**サービスの流れ**/
      .lib-flow-002 {
        .lib-flow-002__item:after {
          display: none;
        }
        .lib-flow-002__num {
          background: transparent;
          border-radius: 0;
          width: auto;
          height: auto;
          color: #00693e !important;
          font-size: min(3.6vw,40px);
          .num {
            color: inherit;
            font-size: min(4.4vw,48px);
          }
        }
      }
      /**よくある質問**/
      .lib-cnt-022 {
        /* .lib-cnt-022__title {
          border-bottom: 1px solid #80807a;
        } */
        .lib-toggle__btn[aria-expanded]:hover {
          background-color: rgba(240, 247, 253,.3);
        }
        .lib-cnt-022__btn {
          position: relative;
          padding-right: 2em;
          text-align: left;
          width: 100%;
          > .txt {
            position: relative;
            display: block;
            padding:1em 0;
            &::before,
            &::after {
              content: '';
              position: absolute;
              top: 50%;
              right: -1.75em;
              width: 1em;
              height: 2px;
              background-color: #00693e;
              transform: translateY(-50%);
            }
            &::after {
              transform: translateY(-50%) rotate(90deg);
              transition: transform .2s;
            }
          }
          &[aria-expanded="true"] > .txt::after {
            transform: translateY(-50%) rotate(0deg);
          }
        }
        .lib-toggle__outer {
              border-top: #666666 1px solid;
              border-bottom: #666666 1px solid
          }
        .lib-cnt-022__panel {
          padding-bottom:1em;
        }
      }
      /**工事履歴テーブル**/
      .lib-table__01.--even {
        thead,
        thead th {
          text-align: left;
          background-color: transparent;
          border:1px solid #666666;
        }
        tbody th,
        tbody td {
          color: #000000;
        }
        tbody tr:nth-child(odd) td {
          background-color: #ffffff;
        }
        tbody tr:nth-child(even) td {
          background-color: #f8f5ef;
        }
        th {
          border-color: #272724;
        }
        &.results-tbl {
          th {
            text-align:center;
            &:nth-child(1) {
              width:27%!important;
            }
            &:nth-child(3) {
              width:17%!important;
            }
            &:nth-child(4) {
              width: 6em!important;
            }
            &:nth-child(5) {
              width: 5em!important;
            }
          }
          td {
            font-size:.9em;
            &:nth-child(4),&:nth-child(5) {
              text-align:center;
            }
          }
        }
      }

      /**工事履歴年度リンク**/
      .lib-link__btn.btn-wht {
        background-color: #ffffff;
        color: #1d693c;
        * {
          color: #1d693c;
        }
        .txt::after {
          font-family: initial;
          content: '' !important;
          width: 1.4em;
          height: 1.4em;
          background-image: url(http://www.hirasawa-co.jp/dcms_media/other/results_pdf01.svg);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
      /**設備案内カード
      .lib-grid__col .lib-card__item.bg-white:has(.lib-card__thumb) {
        padding: 0;
        .lib-card__txtarea {
          padding: 1rem;
        }
      }**/
      /**ギャラリー**/
      .lib-sld-003__col {
        .container {
          width:100%;
          max-width:100%;
        }
      }
      .js-gallery__main {
        padding:0;
        border:none;
        img {
          display:block;
        }
      }
      .js-gallery__item {
        button {
          border:none;
          line-height:1;
          &::before {
            box-shadow:none;
          }
          img {
            display:block;
          }
        }
      }
      /**contact**/
      .lib-form__outer {
        #contact-form {
          .lib-form-flow__outer {
            display:none;
          }
          input,textarea {
            color:#000000;
          }
          ::placeholder {
            color:#cccccc;
          }
          .lib-error__area {
            background-color:unset;
            .lib-form__input {
              background-color:unset;
            }
            .lib-error__txt {
              span {
                color:#ff3333;
              }
            }
          }
          .lib-form__item {
            border:none;
          }
          .lib-form__title {
            display:grid;
            grid-template-columns:repeat(2,auto);
            align-items:center;
            justify-content:start;
            grid-column-gap:.5em;
            .is-required {
              margin:0;
              grid-area:1/1/2/2;
              font-size:.8em;
              padding:.3em .6em;
            }
            &:not(:has(.is-required)) {
              &::before {
                content:'任意';
                font-size:.8em;
                padding:.3em .6em;
                background-color:#aaaaaa;
              }
            }
          }
        }
        &.--confirm {
          #contact-form {
            .lib-form__title {
              &::before {
                content:none;
              }
            }
          } 
        }
      }
      /**media**/
      &:has(.media-post__article),&:has(.media-post__outer) {
        width:calc(100% - 60px);
        max-width:1100px;
        margin:0 auto;
        padding-left:0;
        padding-right:0;
      }
      .media-post__item {
        background-color:#FFFFFF;
        h2 {
          a {
            color:#000000;
            font-size:min(1.8vw,20px);
          }
        }
        .media-post__chip {
          margin:0;
          .lib-media__category {
            a {
              background-color:#1d693c;
              font-size:min(1.1vw,12px);
            }
          }
          .lib-media__tag {
            a {
              color:#1d693c;
              font-size:min(1.28vw,14px);
            }
          }
        }
        .lib-media__time {
          p {
            color:#000000;
            * {
              color:#000000;
            }
            &:has([itemprop="datemodified"]) {
              display:none;
            }
          }
        }
      }
      .lib-column__side {
        .media-search__box {
          .media-side__title {
            display:none!important;
          }
          form {
            input {
              background-color:var(--WHT);
              color:#000000;
            }
            .media-search__btn {
              background-color:#1d693c;
            }
          }
        }
        .media-side__title {
          border:none;
          &::before {
              background-color:#1d693c;
          }
        }
        .lib-media__category {
          a {
            background-color:#1d693c;
            border:none;
            font-size:min(1.1vw,12px);
          }
        }
        .lib-media__tag {
          a {
            font-size:min(1.1vw,12px);
          }
        }
      }
      .media-post__article {
        display:grid;
        .media-post__hero {
          grid-area:4/1/5/2;
        }
        .media-post__headline {
          font-size:min(2.9vw,32px);
        }
        .lib-media__category {
          display:none;
          a {
            background-color:#1d693c;
            border:none;
            font-size:min(1.1vw,12px);
          }
        }
        .lib-media__tag {
          display:none;
          a {
            font-size:min(1.1vw,12px);
          }
        }
        .media-post__sns {
          .fb-share-button {
            & > span {
              vertical-align:top!important;
            }
          }
          &:has( + .media-post__image) {
            display:none;
          }
        }
        .media-post__details {
          .border-main, hr {
            border-color:#1d693c;
          }
          .media_table {
            * {
              color:#000000;
            }
            ul {
              li {
                &::before {
                  background:unset;
                }
              }
            }
          }
          h2 {
            font-size:min(1.82vw,20px);
            &::before {
              content:none;
            }
          }
          h3 {
            font-size:min(1.64vw,18px);
          }
          h4 {
            font-size:min(1.46vw,16px);
            &::before {
              background-color:#1d693c;
            }
          }
          ul {
            li {
              &::before {
                background-color:#1d693c;
              }
            }
          }
          blockquote {
            * {
              color:#000000;
            }
          }
          :where(table) th,:where(table)>thead {
              background-color: #ffffff;
            color:#000000;
            border-bottom:5px solid #000000;
            width:30%;
            text-align:left;
          }
          
          :where(table)>thead th {
              border-top-color: #ffffff;
            color:#000000;
          }
          
          :where(table)>thead th:last-child {
              border-right-color: #ffffff;
            color:#000000;
          }
          
          :where(table)>thead th:first-child {
              border-left-color: #ffffff;
          }
            color:#000000;
          
          :where(table) tbody>tr>th:first-child {
              border-left-color: #ffffff;
            color:#000000;
          }
          :where(table) td {
            border: #666666 1px solid;
          }
        }
      }
      :where(.lib-pager__list) :where(.lib-pager__next) a:before,:where(.lib-pager__list) :where(.lib-pager__prev) a:before {
          border-top: solid 2px var(--WHT);
          border-right: solid 2px var(--WHT);
      }
    }

    .lib-hero__outer {
      background:none;
      min-height:auto;
      .lib-hero__txtarea {
        background: url(/dcms_media/image/top-bg1.png) repeat-y center top/cover;
        position: relative;
        aspect-ratio: 5;
        height:20vw;
        min-height:unset;
        max-width:100%;
        padding:0;
        &::before {
          content:'';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top:0;
          z-index: 0;
          background-color: transparent;
          background-image: linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
          background-position: center top;
          background-size: min(20%,260px) min(20vw,260px);
          background-size: 20% calc(20vw - 2px);
        }
        .lib-hero__inner {
          width:100%;
          max-width:85%;
          margin:0 auto;
          height:100%;
          display:grid;
          align-content:end;
          padding:5vw 0;
        }
        .lib-hero__title {
          color:#FFFFFF;
          font-size:3.7vw;
          display:grid;
          grid-row-gap:.3em;
          .font_en,&::before {
            font-size:1.1vw;
          }
        }
      }
    }
    &:has(.media-post__article),&:has(.media-post__outer) {
      .lib-hero__outer {
        .lib-hero__txtarea {
          .lib-hero__title {
            &::before {
              content:'WORKS';
            }
          }
        }
      }
    }
    &:has(#contact-form) {
      .lib-hero__outer {
        .lib-hero__txtarea {
          .lib-hero__title {
            &::before {
              content:'CONTACT';
            }
          }
        }
      }
    }
    #cta_contact {
      .wrap {
        height: min(40vw,520px);
        height:40vw;
        padding:min(4vw,70px) 0;
        padding:6vw 0;
        background: url(/dcms_media/image/top-bg1.png) repeat-y center top/cover;
        position: relative;
        aspect-ratio:5;
        min-height:unset;
        max-width:100%;
        &::before {
          content:'';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top:0;
          z-index: 0;
          background-color: transparent;
          background-image: linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
          background-position: center top;
          background-size: min(20%,260px) min(20vw,260px);
          background-size: 20% 20vw;
        }
      }
      .contents {
        width:85%;
        margin:0 auto;
        max-width:100%;
      }
      .contents_inner {
        background: url(/dcms_media/image/top-business-bg.jpg) no-repeat center center/cover;
        padding:min(3vw,60px) min(4vw,90px);
        padding:4vw;
        display: grid;
        grid-template-columns: 1fr 40%;
        grid-column-gap: 6%;
        align-items: center;
        .detail {
          display: grid;
          align-content: space-between;
          .ttl_h2 {
            color:#333333;
            justify-items: start;
            margin-bottom: .66em;
            grid-row-gap:.33em;
          }
          p {
            font-size: min(1.8vw,1rem);
            font-size:1.23vw;
            color:#333333;
            line-height: 1.8;
          }
        }
        .btn_box {
          display: grid;
          grid-row-gap: min(3vw,50px);
          li {
            margin: 0;
            padding:0;
            box-shadow: 0 6px 6px rgba(0,0,0,.2);
            &::before {
              content:none;
            }
            a {
              display: grid;
              align-items: center;
              justify-content: center;
              font-size: min(2vw,1.1rem);
              font-size:1.23vw;
              aspect-ratio: 4;
              position: relative;
              img {
                display: block;
                position: absolute;
                z-index: 0!important;
                margin: 0!important;
                width: 100%!important;
                height: 100%;
                object-fit: cover;
              }
              .btntxt {
                position: relative;
                z-index: 1;
                color:var(--WHT);
              }
            }
          }
        }
      }
    }
  }
}

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

}

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

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

  body {
    &:not(:has(#top_mv)) {
      #contents {
        padding-left:0;
        padding-right:0;
        .container {
          max-width:90%;
        }
        * {
          font-size:3.8vw;
        }
        .fs-40 {
          font-size:3vw;
          * {
            font-size:3vw;
          }
        }
        .fs-32 {
          font-size:5.6vw;
          * {
            font-size:5.6vw;
          }
        }
        .fs-26 {
          font-size:4.8vw;
          * {
            font-size:4.8vw;
          }
        }
        .fs-22 {
          font-size:4.5vw;
          * {
            font-size:4.5vw;
          }
        }
        .fs-18 {
          font-size:4.2vw;
          * {
            font-size:4.2vw;
          }
        }
        .fs-16 {
          font-size:3.8vw;
          * {
            font-size:3.8vw;
          }
        }
        .fs-14 {
          font-size:3.2vw;
          * {
            font-size:3.2vw;
          }
        }
        h2.title {
          font-size:7vw;
        }
        /**見出し**/
        .lib-title__outer + .lib-card__caption {
            margin: .3em 0 2em;
            font-size:3.8vw;
        }
        /**会社概要テーブル**/
        .lib-table__01.table.tbl01 {
          border-spacing: 0;
          > tbody > tr > th,
          > tbody > tr > td {
            padding: .75em 1em;
          }
          > tbody > tr{
            td {
            border-top: none;
          }
          }
        }
        /**アクセス**/
        /* .lib-map-001 {
          .lib-map-001__col .lib-title__outer h2.title {
            font-size: 24px;
          } */
          .lib-map-001__access {
            padding: 1.5rem !important;
            dt {
              font-weight: 700;
            }
          }
        /**沿革テーブル**/
        .lib-table__03.table.tbl02 {
          > tbody > tr {
            border-top: 1px solid #80807a;
            &:last-child {
              border-bottom: 1px solid #80807a;
            }
          }
          > tbody > tr > th,
          > tbody > tr > td {
            padding: 1em 0;
          }
          > tbody > tr > th {
            width: 20%;
            padding-right:1em;
          }
        }
  
        /**完全ワンストップ体制フロー**/
        .lib-flow-001 {
          .lib-flow-001__row {
            align-items: flex-start !important;
          }
          .lib-flow-001__col {
            align-items: flex-start !important;
            height: auto !important;
          }
          .lib-flow-001__item {
            align-self: flex-start !important;
            align-items: flex-start !important;
            height: auto !important;
          }
          .lib-flow-001__inside {
            align-self: flex-start !important;
            height: auto !important;
          }
          .thumb {
            height: auto !important;
          }
          .thumb img {
            position: static;
            height: auto !important;
            aspect-ratio: 316 / 188;
          }
          .st_flow .lib-flow-001__col:after {
            border-top-color:#1d693c;
          }
          .lib-card__inside {
            padding: 1.25rem;
          }
          .lib-flow-001__step {
            position: static;
            width: auto;
            height: auto;
            transform: none;
            border-radius: 0;
            background: transparent !important;
            font-size: 20px;
            margin-bottom: .75em;
          }
          .lib-flow-001__row {
            padding-top: 0;
            align-items: flex-start;
          }
        }
        /* 03 確かな実績と歴史 */
        .ratio-3x2 {
          aspect-ratio: 1 / .713;
        }
        /**こんなお悩みはありませんか？**/
        .container.concerns {
          .lib-fv__txtarea {
            h2.text-black {
              color:#1a1a1a;
            }
            ul.text-black {
              li {
                color:#1a1a1a;
              }
            }
          }
          .lib-fv__thumb {
            height: 80vw;
            width:120vw;
            img {
              transform:translateX(-5vw);
            }
          }
        }
        /**空間別の対応領域**/
        .lib-horizon__row + .lib-horizon__row {
          margin-top: 4rem !important;
        }
        /**サービスの流れ**/
        .lib-flow-002 {
          .lib-flow-002__item:after {
            display: none;
          }
          .lib-flow-002__num {
            background: transparent;
            border-radius: 0;
            width: auto;
            height: auto;
            color: #00693e !important;
            font-size: 40px;
            .num {
              color: inherit;
              font-size: 48px;
            }
          }
        }
        /**よくある質問**/
        .lib-cnt-022 {
          /* .lib-cnt-022__title {
            border-bottom: 1px solid #80807a;
          } */
          .lib-toggle__btn[aria-expanded]:hover {
            background-color: rgba(240, 247, 253,.3);
          }
          .lib-cnt-022__btn {
            position: relative;
            padding-right: 2em;
            text-align: left;
            width: 100%;
            > .txt {
              position: relative;
              display: block;
              &::before,
              &::after {
                content: '';
                position: absolute;
                top: 50%;
                right: -1.75em;
                width: 1em;
                height: 2px;
                background-color: #00693e;
                transform: translateY(-50%);
              }
              &::after {
                transform: translateY(-50%) rotate(90deg);
                transition: transform .2s;
              }
            }
            &[aria-expanded="true"] > .txt::after {
              transform: translateY(-50%) rotate(0deg);
            }
          }
        }
        /**工事履歴テーブル**/
        .lib-table__01.--even {
          thead,
          thead th {
            text-align: left;
            background-color: transparent;
          }
          tbody th,
          tbody td {
            color: #000000;
          }
          tbody tr:nth-child(odd) td {
            background-color: #ffffff;
          }
          th {
            border-color: #272724;
          }
        }
        /**工事履歴年度リンク**/
        .lib-link__btn.btn-wht {
          background-color: #ffffff;
          color: #1d693c;
          * {
            color: #1d693c;
          }
          .txt::after {
            font-family: initial;
            content: '' !important;
            width: 20px;
            height: 20px;
            background-image: url(http://www.hirasawa-co.jp/dcms_media/other/results_pdf01.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
        /**設備案内カード**/
        .lib-grid__col .lib-card__item.bg-white:has(.lib-card__thumb) {
          padding: 0;
          .lib-card__txtarea {
            padding: 1rem;
          }
        }
        /**工事履歴テーブル横スクロール**/
        .lib-table__01-scroll {
          overflow-x: auto;
        }
        .lib-table__01.--even {
          width: 1000px !important;
          display: table !important;
          table-layout: fixed;
          thead {
            display: table-header-group;
          }
          tbody {
            display: table-row-group;
          }
          tr {
            display: table-row !important;
          }
          th, td {
            display: table-cell !important;
            width: auto !important;
            line-height: 1.25;
          }
        }
        /**contact**/
        .lib-form__outer {
          #contact-form {
            .lib-form__title {
              background-color:unset;
            }
            .container {
              &:has(.lib-link__btn) {
                margin-top:2em;
              }
            }
          }
        }
        /**media**/
        &:has(.lib-column__side) {
          width:90%;
        }
        .media-post__item {
          h2 {
            a {
              font-size:5vw;
            }
          }
          .media-post__chip {
            .lib-media__category {
              a {
                font-size:3.2vw;
              }
            }
          }
        }
        .lib-column__side {
          width:90%;
          margin:0 auto;
          .lib-media__category {
            a {
              font-size:3.6vw;
            }
          }
          .lib-media__tag {
            a {
              font-size:3.6vw;
            }
          }
        }
        .media-post__article {
          .media-post__headline {
            font-size:5vw;
          }
          .lib-media__category {
            a {
              font-size:3.2vw;
            }
          }
          .lib-media__tag {
            a {
              font-size:3.2vw;
            }
          }
          .media-post__details {
            h2 {
              font-size:4.6vw;
            }
            h3 {
              font-size:4.4vw;
            }
            h4 {
              font-size:4.2vw;
            }
          }
        }
      }
      /* /#contents */
      .lib-hero__outer {
        background:none;
        .lib-hero__txtarea {
          background: url(/dcms_media/image/top-bg1-sp.png) repeat-y center top/cover;
          height:calc(100vw / 3);
          &::before {
            background-size: calc(100% / 3) calc(calc(100vw / 3) - 2px);
          }
          .lib-hero__inner {
            max-width:90%;
            padding-bottom:8vw;
          }
          .lib-hero__title {
            font-size:7.4vw;
            .font_en,&::before {
              font-size:2.2vw;
            }
          }
        }
      }
      #cta_contact {
        .wrap {
          height: auto;
          padding:15vw 0;
          background-image:url(/dcms_media/image/top-bg4-sp.png);
          background-size:100% auto;
          background-position: left center;
          aspect-ratio:unset;
          &::before {
            background-size: min(calc(100%/3),260px) min(calc(100vw/3),260px);
          }
          .contents {
            width:90%;
            .contents_inner {
              padding:10vw 6vw 15vw;
              grid-template-columns: 1fr;
              grid-row-gap: 8vw;
              .detail {
                .ttl_h2 {
                  justify-items: center;
                  margin-bottom: 1em;
                  font-size:6.9vw;
                  .font_en {
                    font-size:13.8vw;
                  }
                }
                p {
                  font-size: min(4vw,1rem);
                  font-size:4vw;
                  color:#333333;
                }
              }
              .btn_box {
                grid-row-gap: min(6vw,40px);
                grid-row-gap:5vw;
                li {
                  a {
                    font-size: min(4vw,1.1rem);
                    font-size:4vw;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

}


/**RECRUIT**/

body {
  &:has(#recruit-page) {
    &::before {
      content:none;
    }
    .wrap {
      .contents {
        width: 90%;
        max-width:1120px;
        h2 {
          margin:0;
          padding: 0;
          &::before {
            content:none;
          }
        }
        h3 {
          margin:0;
          padding: 0;
          border:none;
        }
        p {
          font-size: min(1.3vw, 16px);
        }
      }
    }
  }
}


/**
RECRUIT_MV
**/
body {
  &:has(#recruit-page) {
    #recruit-page {
      padding-top: 0;
      .lib-hero__txtarea {
        background:url(/dcms_media/image/recruit-bg1.png) no-repeat center top/100% auto;
          height: 80vw;
          /****/
          height:auto;
        .lib-hero__inner {
          align-content: center;
          grid-row-gap: 10vw;
          padding: 4vw 0;

          /****/
          max-width:1120px;
          width:90%;
          grid-row-gap: min(10vw, 130px);
          padding: min(14vw, 180px) 0 min(8vw, 100px); 
          height:auto;
          
          .lib-hero__title {
            font-size: 3.1vw;
            justify-items: center;
            grid-row-gap: .66em;

            /****/
            font-size:min(3.1vw,40px);
            .font_en {
              font-size: 6.2vw;

              /****/
              font-size:min(6.2vw,80px);
            }
          }
          .video {
            position: relative;
            z-index: 1;
            video {
              width: 100%;
              height: auto;
              /* aspect-ratio: 2.6; */
              object-fit: cover;
            }
          }
        }
      }
    }
    .lib-breadcrumb__outer {
      position: absolute;
      margin: 0;
      top:26vw;
      left: 7.5%;
      width: 85%;

      
      /****/
      top:min(29vw, 360px);
      width:90%;
      max-width:1120px;
      left:50%;
      transform:translateX(-50%);
      .lib-breadcrumb__inside {
        margin:0;
        .lib-breadcrumb__list {
          padding:0;

          /****/
          overflow:hidden;
        }
      }
    }
  }
}

/**
RECRUIT MESSAGE
**/
body {
  &:has(#recruit-page) {
    #recruit_message {
      .wrap {
        background: url(/dcms_media/image/top-business-bg.jpg) no-repeat center center/cover;
        padding:min(6vw,75px) 0;
        .contents {
          h3 {
            color:#333333;
            font-size: min(2.5vw,32px);
            line-height: 1.5;
            text-align: center;
            display: grid;
            grid-row-gap: .2em;
            margin-bottom: 1em;
            .font_en {
              font-size: min(1.4vw,18px);
              color:#00693e;
            }
          }
          p {
            text-align: center;
            color:#333333;
            margin:0;
            font-size: min(1.3vw,16px);
          }
        }
      }
    }
  }
}

/**
RECRUIT DIRECTOR INTERVIEW NUMBER
**/
body {
  &:has(#recruit-page) {
    #recruit_content, #recruit_inside, #recruit_recruitment {
      .wrap {
        .contents {
          h2 {
            font-size: min(3.1vw,38px);
            line-height: 1.5;
            display: grid;
            justify-items: center;
            margin-bottom: .66em;
            .font_en {
              font-size: min(1.4vw,18px);
              color:#008850;
            }
            & + p {
              font-size: min(1.3vw,16px);
              text-align: center;
              margin-bottom: 4em;
            }
          }
          h3,p {
            margin:0;
            padding:0;
          }
        }
      }
    }
  }
}

body {
  &:has(#recruit-page) {
    #recruit_content {
      .wrap {
        padding:min(10vw,125px) 0;
        /* min-height: calc(20vw * 19); */
        background:url(/dcms_media/image/recruit-bg2.png) no-repeat center top/100% auto,
                  url(/dcms_media/image/recruit-bg3.png) no-repeat center bottom/100% auto;
        .contents {
          &#recruit_director {
            .contents_inner {
              display: grid;
              grid-template-columns: 1fr 50%;
              grid-column-gap: 6%;
              align-items: center;
              .detail {
                h3 {
                  font-size: min(2.2vw,28px);
                  letter-spacing: normal;
                  margin-bottom: 1em;
                }
                p {
                  font-size: min(1.3vw,16px);
                  &:not(:last-child) {
                    margin-bottom: 1em;
                  }
                  &.sign {
                    text-align: right;
                    font-size: min(1.4vw,18px);
                  }
                }
              }
            }
          }
          &#recruit_interview {
            padding-top: min(10vw,125px);
            .contents_inner {
              background: url(/dcms_media/image/top-business-bg.jpg) no-repeat center center/cover;
              padding:min(2vw,25px);
              display: grid;
              grid-template-columns: repeat(2,1fr);
              align-items: center;
              grid-column-gap: 6%;
              .detail {
                * {
                  color:#333333;
                }
                .data {
                  font-size: min(1.1vw,14px);
                  border:1px solid #333333;
                  padding:.2em .5em;
                }
                h3 {
                  font-size: min(1.9w,24px);
                  padding:.5em 0;
                }
                p {
                  font-size: min(1.3vw,16px);
                }
              }
              &:not(:last-child) {
                margin-bottom: min(5vw,60px);
              }
            }
          }
          &#recruit_number {
            padding-top: min(10vw,125px);
            .contents_inner {
              display: grid;
              grid-template-columns: repeat(2,1fr);
              grid-gap: min(2vw,25px);
              li {
                background-color: #FBF9F4;
                height: 100%;
                margin:0;
                padding:min(4vw,50px) min(2vw,25px) min(4vw,50px) min(4vw,50px);
                aspect-ratio: 1.5;
                display: grid;
                align-content: center;
                &::before {
                  content:none;
                }
                h3 {
                  font-size: min(2.3vw,28px);
                  color:#333333;
                  line-height: 1;
                  margin-bottom: 1em;
                }
                p {
                  font-size: min(2.4vw,30px);
                  line-height: 1;
                  color:#333333;
                  span {
                    font-size: min(8vw,100px);
                    font-weight: 600;
                    line-height: inherit;
                    color:#00693e;
                    letter-spacing: .05em;
                  }
                }
                img {
                  position: absolute;
                  z-index: 1;
                }
                &:nth-child(-n+4) {
                  img {
                    width: 30%;
                    right: min(3vw,38px);
                    bottom:min(3vw,38px);
                  }
                }
                &:nth-child(5) {
                  grid-area: 3/1/4/3;
                  aspect-ratio: 3;
                  h3,p {
                    position: relative;
                    z-index: 2;
                  }
                  p {
                    &.ttl {
                      display: flex;
                      align-items: center;
                      column-gap: .66em;
                      span {
                        font-size: min(5.5vw,68px);
                        &.sub {
                          color:#333333;
                          font-size: min(2.5vw,3.1px);
                          display: grid;
                          grid-row-gap: .33em;
                          span {
                            font:inherit;
                            color:inherit;
                            padding-left: 1em;
                          }
                        }
                      }
                    }
                    &.note {
                      font-size: min(1.5vw,18px);
                      padding-top: 2em;
                    }
                  }
                  .obj1 {
                    z-index: 1;
                    right: 0;
                    bottom:auto;
                    top:50%;
                    transform: translateY(-50%);
                    width: 50%;
                  }
                  .obj2 {
                    width: 17%;
                    right: min(10vw,125px);
                    bottom:auto;
                    top:50%;
                    transform: translateY(-50%);
                    z-index: 2;
                  }
                }
                &:nth-child(n+6):nth-child(-n+9) {
                  p {
                    &.note {
                      font-size: min(1.5vw,19px);
                      line-height: 1.5;
                      padding-top: 2em;
                    }
                  }
                  img {
                    width: 30%;
                    right: min(4vw,50px);
                    top:50%;
                    transform: translateY(-50%);
                  }
                  &:nth-child(7) {
                    p {
                      &.ttl {
                        display: flex;
                        align-items: center;
                        column-gap: .33em;
                        span {
                          &.sub {
                            color:#333333;
                            font-size: min(2.5vw,31px);
                            line-height: 1.4;
                            &:last-child {
                              align-self: end;
                            }
                          }
                        }
                      }
                    }
                    img {
                      transform: unset;
                      top:min(4vw,50px);
                      right: min(3vw,38px);
                    }
                  }
                  &:nth-child(8) {
                    p {
                      font-size: min(2.8vw,35px);
                      line-height: 1.3;
                      span {
                        font-size: min(4.3vw,53px);
                        padding-left: .5em;
                      }
                      &.note {
                        font-size: min(1.5vw,19px);
                      }
                    }
                    img {
                      top:40%;
                      right: min(3vw,38px);
                    }
                  }
                  &:nth-child(9) {
                    h3 {
                      span {
                        font-size: min(1.5vw,19px);
                        color:#00693e;
                        display: block;
                        padding-left: 1em;
                      }
                    }
                    p {
                      &.ttl {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        column-gap: .33em;
                        span {
                          font-size: min(2.9vw,36px);
                          &.sub {
                            color:#333333;
                            font-size: min(1.9vw,24px);
                            line-height: 1.2;
                            &:last-child {
                              padding-top: .33em;
                              width: 100%;
                            }
                          }
                        }
                      }
                      &.note {
                        font-size: min(1.4vw,18px);
                      }
                    }
                    img {
                      right: min(1vw,12px);
                    }
                  }
                }
                &:last-child {
                  grid-area: 6/1/7/3;
                  aspect-ratio: 3;
                  h3,p {
                    position: relative;
                    z-index: 2;
                  }
                  p {
                    &.tit {
                      display: flex;
                      align-items: center;
                    }
                    span {
                      font-size: min(5.6vw,70px);
                    }
                    &.note {
                      font-size: min(1.5vw,19px);
                      padding-top: 2em;
                    }
                  }
                  .obj1 {
                    z-index: 1;
                    right: 0;
                    bottom:auto;
                    top:50%;
                    transform: translateY(-50%);
                    width: 100%;
                  }
                  .obj2 {
                    width: 17%;
                    right: min(8vw,100px);
                    bottom:auto;
                    top:50%;
                    transform: translateY(-50%);
                    z-index: 2;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/**
RECRUIT INSIDE
**/

body {
  &:has(#recruit-page) {
    #recruit_inside {
      .wrap {
        background: url(/dcms_media/image/top-business-bg.jpg) no-repeat center center/cover;
        padding:6vw 0;
        .contents {
          h2 {
            color:#000000;
            & + p {
              color:#333333;
            }
          }
          .contents_inner {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-gap: min(2vw,25px);
            li {
              margin: 0;
              padding:0;
              &::before {
                content:none;
              }
              img {
                display: block;
              }
            }
          }
        }
      }
    }
  }
}

/**
RECRUIT RECRUITMENT
**/
body {
  &:has(#recruit-page) {
    #recruit_recruitment {
      .wrap {
        background:url(/dcms_media/image/recruit-bg4.png) no-repeat center bottom/100% auto;
        &::before {
          background-position:center bottom;
        }
        .contents {
          padding:min(8vw,100px) 0 0;
          /* min-height: 80vw; */
          .tab-menu {
            max-width: 80%;
            margin:0 auto min(3vw,38px);
            display: flex;
            column-gap: 3%;
            .tab-item {
              font-size: min(1.4vw,18px);
              width: calc(94% / 3);
              margin: 0;
              padding:0;
              flex-grow: 1;
              display: grid;
              align-items: center;
              justify-content: center;
              height: 3.2em;
              background-color:#00693e;
              cursor: pointer;
              &.active {
                background-color: var(--WHT);
                color:#00693e;
                font-weight: 600;
              }
              &::before {
                content:none;
              }
            }
          }
          .tab-content {
            background: url(/dcms_media/image/top-business-bg.jpg) no-repeat center center/cover;
            .tab-panel {
              &:not(.active) {
                display: none;
              }
              padding:min(2vw,25px);
              table {
                width: 100%;
                tr {
                  &:not(:last-child) {
                    border-bottom:1px solid #aaaaaa;
                  }
                }
                th,td {
                  border:none;
                  background: none;
                  color:#333333;
                  text-align: left;
                  padding:1em;
                  font-size: min(1.4vw,18px);
                }
                th {
                  width: 25%;
                }
              }
            }
          }
        }
      }
    }
  }
}

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

  /**RECRUIT**/

  body {
    &:has(#recruit-page) {
      .wrap {
        .contents {
          width: 90%;
          p {
            font-size: 4vw;
          }
        }
      }
    }
  }


  /**
  RECRUIT_MV
  **/
  body {
    &:has(#recruit-page) {
      #recruit-page {
        .lib-hero__txtarea {
          background:url(/dcms_media/image/recruit-bg1.png) no-repeat left top/calc(100% * (5/3)) auto;
            height: 100vw;
          .lib-hero__inner {
            padding: 12vw 0 4vw;
            .lib-hero__title {
              font-size: 5vw;
              .font_en {
                font-size: 8vw;
              }
            }
          }
        }
      }
      .lib-breadcrumb__outer {
        top: 35vw;
        width: 90%;
      }
    }
  }

  /**
  RECRUIT MESSAGE
  **/
  body {
    &:has(#recruit-page) {
      #recruit_message {
        .wrap {
          padding:10vw 0;
          .contents {
            h3 {
              font-size: 6vw;
              .font_en {
                font-size: 4vw;
              }
            }
            p {
              font-size: 4vw;
            }
          }
        }
      }
    }
  }

  /**
  RECRUIT DIRECTOR INTERVIEW NUMBER
  **/
  body {
    &:has(#recruit-page) {
      #recruit_content, #recruit_inside, #recruit_recruitment {
        .wrap {
          .contents {
            h2 {
              font-size: 6.4vw;
              .font_en {
                font-size: 3.6vw;
              }
              & + p {
                font-size: 4vw;
                margin-bottom: 2em;
              }
            }
          }
        }
      }
    }
  }

  body {
    &:has(#recruit-page) {
      #recruit_content {
        .wrap {
          padding:18vw 0;
          min-height: calc((100vw / 3) * 35);
          background:url(/dcms_media/image/recruit-bg2.png) no-repeat left top/calc(100% * (5/3)) auto,
                    url(/dcms_media/image/recruit-bg3.png) no-repeat left top/calc(100% * (5/3)) auto;
          .contents {
            &#recruit_director {
              .contents_inner {
                grid-template-columns: 1fr;
                grid-row-gap: 3vw;
                .detail {
                  h3 {
                    font-size: 5vw;
                    text-align: center;
                  }
                  p {
                    font-size: 4vw;
                    &.sign {
                      font-size: 4vw;
                    }
                  }
                }
              }
            }
            &#recruit_interview {
              padding-top: 18vw;
              .contents_inner {
                padding:5vw;
                grid-template-columns: 1fr;
                justify-items: start;
                .detail {
                  display: contents;
                  .data {
                    font-size: 3.2vw;
                  }
                  h3 {
                    font-size: 5.4vw;
                    padding:.33em 0;
                  }
                  p {
                    font-size: 4vw;
                  }
                }
                .img {
                  grid-area: 3/1/4/2;
                }
                &:not(:last-child) {
                  margin-bottom: 4vw;
                }
              }
            }
            &#recruit_number {
              padding-top: 18vw;
              .contents_inner {
                display: grid;
                grid-template-columns: 1fr;
                grid-gap: 3vw;
                li {
                  padding:6vw;
                  aspect-ratio: unset;
                  h3 {
                    font-size: 6vw;
                    margin-bottom: .5em;
                  }
                  p {
                    font-size: 5.4vw;
                    span {
                      font-size: 18vw;
                    }
                  }
                  &:nth-child(5) {
                    grid-area: unset;
                    aspect-ratio: unset;
                    p {
                      &.ttl {
                        margin-top: 1em;
                        column-gap: .33em;
                        span {
                          font-size: 7vw;
                          &.sub {
                            font-size: 4.5vw;
                          }
                        }
                      }
                      &.note {
                        font-size: 4vw;
                        line-height: 1.5;
                        padding-top: 1em;
                      }
                    }
                    .obj1 {
                      width: 80%;
                    }
                    .obj2 {
                      right: 3vw;
                    }
                  }
                  &:nth-child(n+6):nth-child(-n+9) {
                    p {
                      &.note {
                        font-size: 4vw;
                        padding-top: 1em;
                      }
                    }
                    &:nth-child(6) {
                      img {
                        top:40%;
                      }
                    }
                    &:nth-child(7) {
                      p {
                        &.ttl {
                          span {
                            &.sub {
                              font-size: 5vw;
                              &:last-child {
                                transform: translateY(-.2em);
                              }
                            }
                          }
                        }
                      }
                      img {
                        top:5vw;
                      }
                    }
                    &:nth-child(8) {
                      h3 {
                        margin-bottom: 1em;
                      }
                      p {
                        font-size: 5vw;
                        span {
                          font-size: 8vw;
                        }
                        &.note {
                          font-size: 4vw;
                          line-height: 1.5;
                        }
                      }
                    }
                    &:nth-child(9) {
                      h3 {
                        span {
                          font-size: 4vw;
                        }
                      }
                      p {
                        &.ttl {
                          span {
                            font-size: 7vw;
                            &.sub {
                              font-size: 5vw;
                            }
                          }
                        }
                        &.note {
                          font-size: 4vw;
                        }
                      }
                      img {
                        right: .5vw;
                      }
                    }
                  }
                  &:last-child {
                    grid-area: unset;
                    aspect-ratio: unset;
                    h3 {
                      line-height: 1.3;
                    }
                    p {
                      &.tit {
                        line-height: 1.3;
                        font-size: 5vw;
                      }
                      span {
                        font-size: 7vw;
                      }
                      &.note {
                        font-size: 4vw;
                        line-height: 1.5;
                        padding-top: 1em;
                      }
                    }
                    .obj2 {
                      right: 4vw;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /**
  RECRUIT INSIDE
  **/

  body {
    &:has(#recruit-page) {
      #recruit_inside {
        .wrap {
          padding:12vw 0;
          .contents {
            .contents_inner {
              grid-template-columns: repeat(2,1fr);
              grid-gap: 2vw;
            }
          }
        }
      }
    }
  }

  /**
  RECRUIT RECRUITMENT
  **/
  body {
    &:has(#recruit-page) {
      #recruit_recruitment {
        .wrap {
          background:url(/dcms_media/image/recruit-bg4.png) no-repeat left top/calc(100% * (5/3)) auto;
          .contents {
            padding:12vw 0 0;
            min-height: calc((100vw / 3) * 8);
            .tab-menu {
              max-width: 100%;
              margin:0 auto 5vw;
              .tab-item {
                font-size: 3.6vw;
                height: 2.6em;
              }
            }
            .tab-content {
              .tab-panel {
                table {
                  tr {
                    &:not(:last-child) {
                      border-bottom:1px solid #aaaaaa;
                    }
                  }
                  th,td {
                    font-size: 3.6vw;
                    display: block;
                    width: 100%;
                  }
                  th {
                    width: 100%;
                    padding-bottom: 0;
                    font-size: 4vw;
                    font-weight: 600;
                  }
                  td {
                    padding-top: .5em;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

}



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

  .pcOnly {
    display: none !important;
  }

}

@media screen and (min-width:991.1px) {

  .tbOnly {
    display: none !important;
  }
  .lib-header__outer.lib-header-BS01 .lib-menu__btn.tbOnly {
    display: none !important;
  }

}

@media screen and (min-width:767.1px) {

  .spOnly {
    display: none !important;
  }

}