@charset "UTF-8";


/* =============================================================================

Top CSS

・トップページ用CSS「.top-×××」

上記はここに記述する

============================================================================= */

/* KV リング回転：キーフレームで --anim-rotate-y を補間 */
@property --anim-rotate-y {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes anim-kv-rotate-y {
  from {
    --anim-rotate-y:0deg;
  }
  to {
    --anim-rotate-y:360deg;
  }
}
/* KV 待機・トランジション中は見た目がずれないよう固定（逆再生時は is-started と併用） */
body.is-start,
body.is-kv-animating {
  width: 100%;
  height: 100svh;
  position: fixed;
  left: 0;
  right: 0;
  overflow: clip;
  touch-action: none;
}

body.is-kv-animating {
  pointer-events: none;
}


/* キービジュアル
----------------------------------------------------------------------------- */
.top_js-kv {
  body.is-started & {
    --e1:100svh;
    --e2:100svh;
    --e3:100svh;
    --e4:100svh;
    --e5:100svh;
    --e6:100svh;
  }
  @media (width <= 767px) {
  }

  > .inner {
    display:flex;
    flex-direction: column;
    width:100%;
    height:100svh;
    overflow:clip;
    z-index: 100;
    position:relative;
  }

  .kv {
    --kv-panel-w:27.0rem;
    --kv-radius:45.0rem;
    --kv-panel-length:7;
    position:absolute;
    inset:0;
    z-index: -1;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:var(--kv-perspective, 100.0rem);
    perspective-origin:50% 50%;
    pointer-events:none;

    @media (width <= 767px) {
      padding-bottom:25svh;
      --kv-panel-w:12.0rem;
      --kv-radius:18.0rem;
      --kv-perspective:52.0rem;
    }

    &::before {
      content:"";
      margin:auto;
      width:38.0rem;
      background-color:#f8f8f8;
      position:absolute;
      inset:-10% 0 0;

      @media (width <= 767px) {
        width:30.0rem;
      }
    }
  }

  .kv_r {
    --anim-rotate-y:0deg;
    position:relative;
    width:0;
    height:0;
    transform-style:preserve-3d;
    /* 扇の全体傾きはここへ rotateZ（例: roateZ(-6deg)）。パネル単位では付けない */
    transform:rotateZ(-7deg) rotateX(10deg) rotateY(var(--anim-rotate-y));
    animation:anim-kv-rotate-y 50s linear infinite;
    @media (width <= 767px) {
      transform:rotateZ(-3.5deg) rotateX(5deg) rotateY(var(--anim-rotate-y));
    }
  }

  .kv_r_img {
    position:absolute;
    left:50%;
    top:50%;
    width:var(--kv-panel-w);
    margin-left:calc(var(--kv-panel-w) / -2);
    margin-top:calc(var(--kv-panel-w) / -2);
    aspect-ratio:1;
    transform-style:preserve-3d;
    transform-origin:center center;

    /* 裏面：背景幅 = N×パネル幅の1本を画面で均等スライス → position は i/(N-1)×100%（100%*i だと端だけ表示になる） */
    &:nth-child(1) {
      transform:rotateY(0deg) translateZ(var(--kv-radius));
      .r::before {
        background-position:calc(100% * 0 / (var(--kv-panel-length) - 1)) center;
      }
    }
    &:nth-child(2) {
      transform:rotateY(calc(360deg / var(--kv-panel-length) * 1)) translateZ(var(--kv-radius));
      .r::before {
        background-position:calc(100% * 1 / (var(--kv-panel-length) - 1)) center;
      }
    }
    &:nth-child(3) {
      transform:rotateY(calc(360deg / var(--kv-panel-length) * 2)) translateZ(var(--kv-radius));
      .r::before {
        background-position:calc(100% * 2 / (var(--kv-panel-length) - 1)) center;
      }
    }
    &:nth-child(4) {
      transform:rotateY(calc(360deg / var(--kv-panel-length) * 3)) translateZ(var(--kv-radius));
      .r::before {
        background-position:calc(100% * 3 / (var(--kv-panel-length) - 1)) center;
      }
    }
    &:nth-child(5) {
      transform:rotateY(calc(360deg / var(--kv-panel-length) * 4)) translateZ(var(--kv-radius));
      .r::before {
        background-position:calc(100% * 4 / (var(--kv-panel-length) - 1)) center;
      }
    }
    &:nth-child(6) {
      transform:rotateY(calc(360deg / var(--kv-panel-length) * 5)) translateZ(var(--kv-radius));
      .r::before {
        background-position:calc(100% * 5 / (var(--kv-panel-length) - 1)) center;
      }
    }
    &:nth-child(7) {
      transform:rotateY(calc(360deg / var(--kv-panel-length) * 6)) translateZ(var(--kv-radius));
      .r::before {
        background-position:calc(100% * 6 / (var(--kv-panel-length) - 1)) center;
      }
    }

    picture {
      display:block;
      position:absolute;
      inset:0;
      margin:0;
      transform-style:preserve-3d;
      backface-visibility:hidden;

      &.r {
        transform:scaleX(-1) rotateY(180deg);

        &::before {
          content:"";
          display:block;
          transition-duration:var(--duration-hover-A);
          background-image:linear-gradient(to right,var(--cc-blue-A) 0%,var(--cc-green-D) 50%,var(--cc-blue-A) 100%);
          background-size:calc(100% * var(--kv-panel-length)) 100%;
          position:absolute;
          inset:0;
          z-index: 10;
          border-radius:var(--radius-B);
          opacity:.8;
        }
      }
    }

    img {
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      border-radius:var(--radius-B);
    }
  }
  .loop {
    --loop-duration:50s;
    margin-top:auto;
    padding-bottom:8.4rem;
    @media (width <= 767px) {
      padding-bottom:6.0rem;
    }
    .item {
      padding-right:5.6rem;
      @media (width <= 767px) {
        padding-right:4.4rem;
      }
    }
  }
}


/* 導入
----------------------------------------------------------------------------- */
.top-intro {
  margin-top:-100svh;
  .top_js-kv-margin {
    height:100svh;
  }
  body.is-start & {
    .top_js-kv-margin {
      height:100svh;
    }
  }
  body.is-started & .top_js-kv-margin {
    height: 1px;
  }
  padding-bottom:10.0rem;
  @media (width > 767px) {
    padding-top:var(--header-height);
  }
  .t {
    margin-bottom:4.0rem;
    position:sticky;
    z-index:100;
    @media (width > 767px) {
      bottom:24.5rem;
    }
    @media (width <= 767px) {
      margin-block:6.0rem 2.4rem;
      bottom:17.0rem;
      transition-property:bottom;
      transition-duration:1s;
      body.is-start.is-kv-animating &,
      body.is-started:not(.is-kv-animating) & {
        bottom:7.0rem;
      }
    }
  }
  .t_title {
    --r_gap:1.8rem;
    display:flex;
    flex-direction: column;
    gap:var(--r_gap);
    font-size:4.2rem;
    line-height:1;
    letter-spacing: .05em;

    @media (width > 767px) {
    }
    @media (width <= 767px) {
      --r_gap:.8rem;
      font-size:2.4rem;
    }
    > span {
      display:flex;
      justify-content: baseline;
      padding-block:1.2rem;
      padding-inline:2.0rem calc(2.0rem - 1em);
      width:fit-content;
      color:var(--base-color);
      position:relative;
      transition-property:color;
      transition-duration:var(--duration-hover-A);
      @media (width <= 767px) {
        padding-block:.6rem;
        padding-inline:1.5rem 0;
        white-space: nowrap;
      }
      &::before,
      &::after {
        content:'';
        position:absolute;
        inset:0;
        transition-property:opacity;
        transition-duration:var(--duration-hover-A);
        z-index: -1;
        border-radius:var(--radius-B);
      }
      &::before {
        background-color:#fff;
      }
      &::after {
        background-image:linear-gradient(to right,var(--cc-green-D) 0%,var(--cc-blue-A) 54.0rem);
        opacity:0;
      }
      body.is-start.is-kv-animating &,
      body.is-started:not(.is-kv-animating) & {
        color:#fff;
        &::before {
          opacity:0;
        }
        &::after {
          opacity:1;
        }
      }
    }
  }
  .t_copy {
    margin-top:3.2rem;
    font-size:1.7rem;
    line-height:1;
    letter-spacing: .05em;
    color:var(--base-color);
    transition-property:color;
    transition-duration:var(--duration-hover-A);
    body.is-started & {
      color:var(--cc-blue-A);
    }
    @media (width <= 767px) {
      margin-top:1.6rem;
      font-size:1.4rem;
      line-height:1.8;
      letter-spacing: .05em;
    }
  }
  .m {
    overflow:clip;
  }
  .m_inner {
    position:relative;
    @media (width > 767px) {
      margin-bottom:-63.5rem;
      min-height:76.8rem;
    }
    @media (width <= 767px) {
      padding-top:var(--header-height);
    }
    img {
      max-width:unset;
      @media (width > 767px) {
        position:absolute;
        right:-51.8rem;
      }
      @media (width <= 767px) {
        margin-left:-6.0rem;
      }
    }
  }
  .e_t_desc {
    @media (width <= 767px) {
      font-size:1.4rem;
      line-height:2.4;
      text-align: justify;
    }
  }
  .e .l-button-A {
    margin-top:6.4rem;
    @media (width <= 767px) {
      margin-top:4.0rem;
    }
  }
  .e_imgs {
    --loop-duration:80s;
    margin-top:15.2rem;
    @media (width <= 767px) {
      margin-top:8.0rem;
    }

    .item {
      align-items: flex-start;
      --gap:3.2rem;
      gap:var(--gap);
      padding-right:var(--gap);

      @media (width <= 767px) {
        --gap:1.8rem;
      }

      img {
        &:nth-child(even) {
          margin-top:3.2rem;
          @media (width <= 767px) {
            margin-top:1.8rem;
          }
        }
      }
    }
  }
}


/* 会社概要
----------------------------------------------------------------------------- */
.top-service {
  --s1:10.0rem;
  --s2:0rem;
  --s3:10.0rem;
  --s4:20.0rem;
  --s5:30.0rem;
  --s6:20.0rem;
  --e1:20.0rem;
  --e2:30.0rem;
  --e3:20.0rem;
  --e4:10.0rem;
  --e5:0.0rem;
  --e6:10.0rem;
  padding-block:30.0rem 50.0rem;
  @media (width <= 767px) {
    --s1:2.0rem;
    --s2:0.0rem;
    --s3:2.0rem;
    --s4:4.0rem;
    --e1:2.0rem;
    --e2:4.0rem;
    --e3:2.0rem;
    --e4:0.0rem;
    padding-block:12.0rem 14.0rem;
  }
  @media (width > 767px) {
  }

  .l-heading-A {
    @media (width > 767px) {
      margin-bottom:8.0rem;
    }
  }
  .g-works_link {
    margin-top:10.0rem;
    @media (width <= 767px) {
      margin-top:6.0rem;
      margin-inline:3.0rem;
    }
  }

  .m-bg {
    background-color:var(--cc-white-C);
  }
}


/* 会社概要
----------------------------------------------------------------------------- */
.top-company {
  padding-bottom:22.0rem;
  @media (width <= 767px) {
    padding-block:8.0rem 10.0rem;
  }

  .l-heading-A {
    @media (width > 767px) {
      margin-bottom:10.0rem;
    }
  }

  .l {
    display:grid;
    @media (width > 767px) {
      grid-template-columns:1fr 1fr;
      gap:14.0rem;
    }
    @media (width <= 767px) {
      gap:6.4rem;
    }
  }
  .l_i_l {
    display:block;
  }

  .l_i_l_heading {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-block:2.4rem 1.6rem;
    font-size:2.2rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height:1.6;
    @media (width <= 767px) {
      font-size:2.0rem;
    }
  }

  .l_i_l_desc {
    @media (width > 767px) {
      font-size:1.6rem;
      line-height:2.2;
      letter-spacing: .025em;
    }
  }
}

/* 採用情報 お知らせ
----------------------------------------------------------------------------- */
.top-news_recruit {
  padding-block:18.0rem 16.0rem;
  @media (width <= 767px) {
    padding-block:10.0rem;
  }
}

/* お知らせ
----------------------------------------------------------------------------- */
.top-news {
  @media (width > 767px) {
    padding-bottom:25.0rem;
  }
  @media (width <= 767px) {
    padding-bottom:10.0rem;
  }

  .i {
    @media (width > 767px) {
      display:grid;
      grid-template-columns:1fr 88.0rem;
      grid-template-areas:
        "heading list"
        "link list"
      ;
      align-items: start;
    }
    @media (width <= 767px) {
    }
  }
  .i .l-heading-A {
    @media (width > 767px) {
      grid-area:heading;
    }
    @media (width <= 767px) {
      margin-bottom:3.6rem;
    }
  }
  .i .l-news_list {
    @media (width > 767px) {
      grid-area:list;
    }
    @media (width <= 767px) {
    }
  }
  .i .l-button-A {
    @media (width > 767px) {
      grid-area:link;
      margin-top:auto;
    }
    @media (width <= 767px) {
      margin-top:6.0rem;
    }
  }
}


/* 採用情報
----------------------------------------------------------------------------- */
.top-recruit {
  --s1:0rem;
  --s2:0rem;
  --s3:4.0rem;
  --s4:0rem;
  --s5:4.0rem;
  --s6:0rem;
  --e1:4.0rem;
  --e2:4.0rem;
  --e3:0.0rem;
  --e4:4.0rem;
  --e5:0.0rem;
  --e6:0.0rem;
  position:relative;
  @media (width <= 767px) {
    --s1:0rem;
    --s2:2.0rem;
    --s3:0.0rem;
    --s4:2.0rem;
    --e1:2.0rem;
    --e2:0.0rem;
    --e3:2.0rem;
    --e4:0.0rem;
  }
  > .m-bg {
    background-color:#fff;
    z-index: -1;

    > canvas {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      filter: blur(20px);
    }
  }
  > .img {
    position:absolute;
    inset-inline:0;
    pointer-events: none;
    @media (width > 767px) {
      display:flex;
      justify-content:flex-end;
      top:-6.0rem;
    }
    @media (width <= 767px) {
      top:31.2rem;
    }
    img {
      mask-image:url(/assets/img/top/recruit-img-mask.svg);
      mask-size:cover;
      mask-position:center;
      mask-repeat:no-repeat;
      -webkit-mask-image:url(/assets/img/top/recruit-img-mask.svg);
      -webkit-mask-size:cover;
      -webkit-mask-position:center;
      -webkit-mask-repeat:no-repeat;
    }
  }
  > .i {
    padding-block:10.0rem 12.0rem;
    position:relative;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      padding-block:10.0rem;
    }
  }
  > .i .l-heading-A {
    margin-bottom:4.0rem;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      margin-bottom:2.4rem;
    }
  }
  .i_desc {
    line-height:2.2;
    @media (width > 767px) {
      font-size:1.6rem;
    }
    @media (width <= 767px) {
      line-height:2;
    }
  }
  > .i .l-button-A {
    margin-top:4.0rem;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      margin-top:29.2rem;
    }
  }
  .i_copy1 {
    margin-top:6.8rem;
    font-size:1.5rem;
    letter-spacing: .1em;
    line-height:1;
    color:#ABABAB;

    @media (width <= 767px) {
      margin-inline:-3.0rem;
      margin-top:4.0rem;
      font-size:1.4rem;
      letter-spacing: .05em;
      text-align: center;
    }
  }
  .i_copy2 {
    font-size:6.0rem;
    letter-spacing: .05em;
    line-height:1;
    color:#ABABAB;
    @media (width > 767px) {
      position:absolute;
      right:10.0rem;
      bottom:11.2rem;
    }
    @media (width <= 767px) {
      margin-inline:-3.0rem;
      margin-top:1.6rem;
      font-size:2.5rem;
      text-align: center;
    }
  }
}


/* SelectorName
----------------------------------------------------------------------------- */
.top-SelectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}