@charset "UTF-8";
/* =====================
  MV
===================== */
/* ==== 背景スライダー ==== */
.mv-content .mv-slider {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: inherit;
  min-height: calc((100 / 750) * 1160 * 1vw);
  .mv-swiper-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    min-height: calc((100 / 750) * 1160 * 1vw);
    .swiper-slide {
      background-repeat: no-repeat;
      background-position: center;
      object-fit: cover;
      width: 100%;
      min-height: calc((100 / 750) * 1160 * 1vw);
      background-size: cover;
      position: relative;
    }
  }
}
.mv-content .mv-slider .zoom img {
  animation-name: zoom;
  animation-duration: 15s;
  animation-delay: 0ms;
  animation-timing-function: linear; /* ease/ease-in/ease-out/ease-in-out/linear/cubic-bezier()/steps(1, jump-end) */
  animation-iteration-count: 1; /* {num}/infinite */
  animation-direction: normal; /* normal/reverse/alternate/alternate-reverse */
  animation-fill-mode: both; /* none/backwards(0%)/forwards(100%)/both(0%->100%) */
  animation-play-state: running; /* running/paused */
}
@keyframes zoom {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.15;
  }
}
.mv {
  position: relative;
  margin-top: var(--header-height);
  .content {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: calc((100 / 750) * 1160 * 1vw);
    margin-inline: auto;
    padding-inline: calc((100 / 750) * 40 * 1vw);
    padding-top: calc((100 / 750) * 224 * 1vw);
    .ja-catch {
      position: relative;
      span {
        width: fit-content;
        display: block;
        font-size: calc((100 / 750) * 36 * 1vw);
        font-weight: 500;
        line-height: 1.8;
        letter-spacing: calc((100 / 750) * 1.5 * 1vw);
        color: #fff;
        padding-inline: calc((100 / 750) * 40 * 1vw);
        padding-block: calc((100 / 750) * 7 * 1vw);
        background-image: var(--gradient);
        &[data-id='2'] {
          margin-top: calc((100 / 750) * 40 * 1vw);
          margin-left: calc((100 / 750) * 80 * 1vw);
          padding-inline: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 14 * 1vw);
        }
      }
    }
    .en-catch {
      position: relative;
      margin-top: calc((100 / 750) * 422 * 1vw);

      span {
        display: block;
        width: fit-content;
        &[data-id='1'] {
          transform: rotate(-7deg);
          font-family: var(--catch);
          font-size: calc((100 / 750) * 59 * 1vw);
          line-height: 1;
          letter-spacing: calc((100 / 750) * 0.59 * 1vw);
          color: #00699f;
          position: absolute;
          top: calc((100 / 750) * -44 * 1vw);
          left: calc((100 / 750) * 26 * 1vw);
          z-index: 5;
        }
        &[data-id='2'] {
          position: relative;
          margin-inline: auto 0;
          font-family: var(--title);
          font-size: calc((100 / 750) * 52 * 1vw);
          line-height: 1;
          letter-spacing: calc((100 / 750) * 4.16 * 1vw);
          color: #fff;
          z-index: 6;
          &::after {
            content: 'ESSENTIAL SPACES.';
            display: block;
            opacity: 0.16;
            color: #242424;
            transform: scaleY(-1);
            position: absolute;
            left: 0;
            bottom: calc((100 / 750) * -44 * 1vw);
          }
        }
      }
    }
  }
}
/* ==== NEWS ==== */
.mv .news {
  width: calc((100 / 750) * 710 * 1vw);
  background-color: #efefef;
  margin-inline: auto;
  position: absolute;
  bottom: calc((100 / 750) * -97 * 1vw);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  .news_wrap {
    position: relative;
    a {
      display: block;
      width: 100%;
      height: 100%;
      padding-inline: calc((100 / 750) * 40 * 1vw);
      padding-block: calc((100 / 750) * 32 * 1vw) calc((100 / 750) * 26 * 1vw);
      .news-h2 {
        position: relative;
        font-family: var(--title);
        font-size: calc((100 / 750) * 33 * 1vw);
        font-weight: 600;
        line-height: 1;
        color: #0a2b6f;
        flex-shrink: 0;
      }
      .news-unit {
        position: relative;
        width: 100%;
        padding-right: calc((100 / 750) * 80 * 1vw);
        margin-top: calc((100 / 750) * 8 * 1vw);
        time {
          position: relative;
          font-family: var(--title);
          font-size: calc((100 / 750) * 26 * 1vw);
          font-weight: 500;
          line-height: 1;
          color: #00699f;
        }
        > p {
          font-size: calc((100 / 750) * 24 * 1vw);
        }
        &::before {
          content: '';
          display: block;
          width: calc((100 / 750) * 31 * 1vw);
          aspect-ratio: 1/1;
          mask-repeat: no-repeat;
          mask-size: contain;
          mask-position: center;
          mask-image: var(--arrow);
          background-color: #12447a;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
        &::after {
          content: '';
          display: block;
          width: 1px;
          height: calc((100 / 750) * 60 * 1vw);
          position: absolute;
          top: 50%;
          right: calc((100 / 750) * 56 * 1vw);
          transform: translateY(-50%);
          background-color: #cacaca;
        }
      }
    }
  }
}

/* =====================
  scroll
===================== */
.mv .scroll {
  display: none;
}

/* =====================
  会社案内
===================== */
.article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 501 * 1vw);
  padding-bottom: calc((100 / 750) * 337 * 1vw);
  overflow: hidden;
  &::after {
    content: '';
    display: block;
    background-repeat: repeat-x;
    background-size: cover;
    background-position: center;
    background-image: url('../../img/top/text_deco_2x.png');
    width: calc((100 / 750) * 1636 * 1vw);
    height: calc((100 / 750) * 78 * 1vw);
    position: absolute;
    bottom: calc((100 / 750) * 157 * 1vw);
    left: 0;
    pointer-events: none;
    animation: scroll-anim 50s linear infinite;
    z-index: 2;
  }
  .inner {
    position: relative;
    &::before {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../../img/top/company_01_2x.png');
      width: calc((100 / 750) * 337 * 1vw);
      height: calc((100 / 750) * 207 * 1vw);
      position: absolute;
      top: calc((100 / 750) * -300 * 1vw);
      left: 0;
      pointer-events: none;
    }
    .company_wrap {
      position: relative;
      z-index: 3;
      &::before {
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../../img/top/company_03_2x.png');
        width: calc((100 / 750) * 265 * 1vw);
        height: calc((100 / 750) * 242 * 1vw);
        position: absolute;
        bottom: calc((100 / 750) * -216 * 1vw);
        right: calc((100 / 750) * -20 * 1vw);
        pointer-events: none;
      }
      &::after {
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url('../../img/top/company_02_2x.png');
        width: calc((100 / 750) * 293 * 1vw);
        height: calc((100 / 750) * 325 * 1vw);
        position: absolute;
        top: calc((100 / 750) * -236 * 1vw);
        right: calc((100 / 750) * -20 * 1vw);
        pointer-events: none;
      }
      .company_unit {
        margin-top: calc((100 / 750) * 65 * 1vw);
        h3 {
          font-size: calc((100 / 750) * 35 * 1vw);
          font-weight: 600;
          line-height: 1.9;
        }
        > p {
          margin-top: calc((100 / 750) * 34 * 1vw);
          line-height: 2;
        }
        .link-btn {
          margin-top: calc((100 / 750) * 62 * 1vw);
        }
      }
    }
  }
}
@keyframes scroll-anim {
  0% {
    background-position: calc((100 / 750) * 1636 * 1vw) 0;
  }
  100% {
    background-position: 0 0;
  }
}
/* =====================
  事業内容
===================== */
.article[data-id='2'] {
  position: relative;
  padding-top: calc((100 / 750) * 93 * 1vw);
  padding-bottom: calc((100 / 750) * 121 * 1vw);
  counter-reset: number 0;
  .inner {
    &::after {
      content: attr(data-text);
      display: block;
      font-family: var(--catch);
      opacity: 0.5;
      font-size: calc((100 / 750) * 52 * 1vw);
      letter-spacing: calc((100 / 750) * 1.04 * 1vw);
      color: #00699f;
      position: absolute;
      top: calc((100 / 750) * 429 * 1vw);
      right: calc((100 / 750) * 40 * 1vw);
      pointer-events: none;
    }
    .business-about {
      display: flex;
      flex-direction: column;
      gap: calc((100 / 750) * 68 * 1vw);
      align-items: flex-start;
      > p {
        line-height: 2;
      }
    }
    ol {
      margin-top: calc((100 / 750) * 148 * 1vw);
      display: flex;
      flex-direction: column;
      gap: calc((100 / 750) * 48 * 1vw);
      li {
        position: relative;
        display: grid;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: calc((100 / 750) * 670 * 1vw);
        height: calc((100 / 750) * 416 * 1vw);
        align-items: end;
        padding-block: calc((100 / 750) * 33 * 1vw);
        padding-inline: calc((100 / 750) * 40 * 1vw);
        &[data-id='1'] {
          background-image: url('../../img/top/business_01_2x.png');
        }
        &[data-id='2'] {
          background-image: url('../../img/top/business_02_2x.png');
        }
        &[data-id='3'] {
          background-image: url('../../img/top/business_03_2x.png');
        }
        h4 {
          position: relative;
          font-size: calc((100 / 750) * 29 * 1vw);
          color: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          &::after {
            display: inline-block;
            counter-increment: number 1;
            content: '0' counter(number);
            font-size: calc((100 / 750) * 31 * 1vw);
          }
        }
      }
    }
    .link-btn {
      background-color: #fff;
      border: none;
      margin-top: calc((100 / 750) * 77 * 1vw);
      margin-inline: auto;
    }
  }
}

/* =====================
  施工実績
===================== */
.article[data-id='3'] {
  position: relative;
  padding-top: calc((100 / 750) * 240 * 1vw);
  padding-bottom: calc((100 / 750) * 171 * 1vw);
  &::before {
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../../img/top/works_bg_2x.png');
    width: 100%;
    min-height: calc((100 / 750) * 681 * 1vw);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  .inner {
    &::after {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../img/top/works_deco_2x.png');
      width: calc((100 / 750) * 434 * 1vw);
      height: calc((100 / 750) * 395 * 1vw);
      position: absolute;
      bottom: calc((100 / 750) * -100 * 1vw);
      right: 0;
      pointer-events: none;
    }
    .work_wrap {
      position: relative;
      width: calc((100 / 750) * 670 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
      padding-block: calc((100 / 750) * 70 * 1vw) calc((100 / 750) * 80 * 1vw);

      &::before {
        content: '';
        display: block;
        width: calc((100 / 750) * 670 * 1vw);
        height: calc((100 / 750) * 1038 * 1vw);
        opacity: 0.7;
        border-radius: calc((100 / 750) * 15 * 1vw);
        -webkit-backdrop-filter: blur(calc((100 / 750) * 80 * 1vw));
        backdrop-filter: blur(calc((100 / 750) * 80 * 1vw));
        box-shadow: 0 0 calc((100 / 750) * 20 * 1vw) 0 rgba(0, 0, 0, 0.08);
        background-image: linear-gradient(147deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
      }
      h3 {
        position: relative;
        font-size: calc((100 / 750) * 35 * 1vw);
        font-weight: 600;
        margin-top: calc((100 / 750) * 42 * 1vw);
      }
      > p {
        position: relative;
        line-height: 2;
        margin-top: calc((100 / 750) * 21 * 1vw);
      }
      .link-btn {
        margin-top: calc((100 / 750) * 54 * 1vw);
      }
    }
  }
}

/* =====================
  採用情報
===================== */
.article[data-id='4'] {
  position: relative;
  padding-top: calc((100 / 750) * 371 * 1vw);
  padding-bottom: calc((100 / 750) * 136 * 1vw);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('../../img/top/recruit_bg_2x.png');
  .inner {
    &::before {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../img/top/recruit_01_2x.png');
      width: calc((100 / 750) * 288 * 1vw);
      height: calc((100 / 750) * 323 * 1vw);
      position: absolute;
      top: calc((100 / 750) * -370 * 1vw);
      left: 0;
      pointer-events: none;
      z-index: 5;
    }
    &::after {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../img/top/recruit_02_2x.png');
      width: calc((100 / 750) * 306 * 1vw);
      height: calc((100 / 750) * 257 * 1vw);
      position: absolute;
      top: calc((100 / 750) * -152 * 1vw);
      right: calc((100 / 750) * 40 * 1vw);
      pointer-events: none;
    }
    .recruit_wrap {
      position: relative;
      width: calc((100 / 750) * 670 * 1vw);
      padding-block: calc((100 / 750) * 71 * 1vw) calc((100 / 750) * 64 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);

      &::before {
        content: '';
        display: block;
        opacity: 0.14;
        border-radius: calc((100 / 750) * 15 * 1vw);
        background-color: #cacaca;
        width: 100%;
        height: calc((100 / 750) * 1031 * 1vw);
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
      }
      &::after {
        content: attr(data-text);
        display: block;
        font-family: var(--catch);
        opacity: 0.5;
        font-size: calc((100 / 750) * 52 * 1vw);
        letter-spacing: calc((100 / 750) * 1.04 * 1vw);
        color: #00699f;
        position: absolute;
        transform: rotate(-7deg);
        top: calc((100 / 750) * -264 * 1vw);
        right: calc((100 / 750) * 8 * 1vw);
        pointer-events: none;
      }
      h3 {
        font-size: calc((100 / 750) * 35 * 1vw);
        font-weight: 600;
        margin-top: calc((100 / 750) * 42 * 1vw);
      }
      > p {
        line-height: 2;
        margin-top: calc((100 / 750) * 21 * 1vw);
      }
      .link-btn {
        margin-top: calc((100 / 750) * 54 * 1vw);
        background-color: #fff;
        border: none;
      }
    }
  }
}
/* =====================
  animations
===================== */
.js-parallax {
  opacity: 0;
}
/* ==== MV ==== */
.mv .content {
  .ja-catch {
    span[data-id='1'] {
      clip-path: inset(0 100% 0 0);
      transition: all 600ms var(--easeOutExpo) 0s;
    }
    span[data-id='2'] {
      clip-path: inset(0 100% 0 0);
      transition: all 600ms var(--easeOutExpo) 0.4s;
    }
  }
  .en-catch {
    span[data-id='1'] {
      opacity: 0;
      transition: all 0.8s ease-in-out 0.4s;
    }
    span[data-id='2'] {
      opacity: 0;
      transition: all 0.8s ease-in-out 0s;
    }
  }
}
.mv.on .ja-catch span[data-id='1'],
.mv.on .ja-catch span[data-id='2'] {
  clip-path: inset(0 0 0 0);
}
.mv.on .en-catch span[data-id='1'],
.mv.on .en-catch span[data-id='2'] {
  opacity: 1;
}
/* ==== 会社案内 ==== */
.article[data-id='1'].js-on .inner::before {
  opacity: 0;
  transition: all 0.8s ease-in-out 0s;
  transform: translateY(0.5em);
}
.article[data-id='1'].js-on .company_wrap::before {
  opacity: 0;
  transition: all 0.8s ease-in-out 0.4s;
  transform: translateY(0.5em);
}
.article[data-id='1'].js-on .company_wrap::after {
  opacity: 0;
  transition: all 0.8s ease-in-out 0.8s;
  transform: translateY(0.5em);
}
.article[data-id='1'].js-on.on .inner::before,
.article[data-id='1'].js-on.on .company_wrap::before,
.article[data-id='1'].js-on.on .company_wrap::after {
  opacity: 1;
  transform: translateY(0);
}
/* ==== 事業内容 ==== */
.article[data-id='2'] .js-parallax[data-id='1'] {
  transition: all 0.8s ease-in-out 0s;
  transform: translateY(0.5em);
}
.article[data-id='2'] .js-parallax[data-id='2'] {
  transition: all 0.8s ease-in-out 0.2s;
  transform: translateY(0.5em);
}
.article[data-id='2'] .js-parallax[data-id='3'] {
  transition: all 0.8s ease-in-out 0.4s;
  transform: translateY(0.5em);
}
.article[data-id='2'] .js-parallax.on {
  opacity: 1;
  transform: translateY(0);
}
/* ==== 施工実績 ==== */
.article[data-id='3'] .js-parallax {
  transition: all 0.8s ease-in-out 0s;
  transform: translateY(0.5em);
}
.article[data-id='3'].js-on .inner::after {
  opacity: 0;
  transition: all 0.8s ease-in-out 0.6s;
  transform: translateY(0.5em);
}
.article[data-id='3'].js-on.on .inner::after,
.article[data-id='3'] .js-parallax.on {
  opacity: 1;
  transform: translateY(0);
}
/* ==== 採用情報 ==== */
.article[data-id='4'].js-on .inner::before {
  opacity: 0;
  transition: all 0.8s ease-in-out 0s;
  transform: translateY(0.5em);
}
.article[data-id='4'].js-on .inner::after {
  opacity: 0;
  transition: all 0.8s ease-in-out 0.2s;
  transform: translateY(0.5em);
}
.article[data-id='4'].js-on .recruit_wrap::after {
  opacity: 0;
  transition: all 0.8s ease-in-out 0.6s;
}
.article[data-id='4'].js-on.on .inner::before,
.article[data-id='4'].js-on.on .inner::after {
  opacity: 1;
  transform: translateY(0);
}
.article[data-id='4'].js-on.on .recruit_wrap::after {
  opacity: 0.5;
}