@charset "UTF-8";

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

Top CSS

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

上記はここに記述する

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


/* キービジュアル
============================================================================= */
.top-kv {
  display:flex;
  justify-content: center;
  align-items: center;
  padding-top:var(--header-height);
  height:100svh;
  position:relative;

  .kv-title {
    position:relative;
    filter:drop-shadow(0 0 .7rem rgba(0,0,0,.3));

    > svg {
      width:100%;
      height:auto;
      aspect-ratio: 487 / 436;
      position:absolute;
      top:0;
      left:0;

      > path {
        &.st {
          stroke:#fff;
          stroke-width:5;
          fill:none;
        }
        &.fill {
          fill:#fff;
        }
      }
    }
  }

  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .bg {
    position:absolute;
    inset:0;
    z-index: -1;
  }
}


/* 序盤
============================================================================= */
.top-intro {
  padding-block:12.0rem 17.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:8.5rem 9.0rem;
    padding-inline:1.2rem;
  }

  .intro-heading {
    display:grid;
    gap:2.0rem;
    margin-bottom:3.2rem;
    @media (width <= 640px) {
      gap:.6rem;
    }

    > span {
      display:block;
    }
  }
  .intro-img {
    @media (width > 640px) {
      margin-left:auto;
      padding-right:2.8rem;
      width:calc(50% + 22.0rem);
      height:93.6rem;
    }
    @media (width <= 640px) {
    }
  }

  .bottom {
    margin-top:10.0rem;
    @media (width > 640px) {
      display:grid;
      align-items: flex-start;
      grid-template-columns: auto 1fr;
      column-gap:14.0rem;
      grid-auto-flow: column;
    }
    @media (width <= 640px) {
      margin-top:4.0rem;
    }

    .text {
    }
    .text-heading {
      margin-bottom:5.2rem;
      font-size:4.7rem;
      line-height:calc(73/47);
      letter-spacing: .38em;
      font-weight:600;
      .is-ftest & {
        font-weight:700;
      }
      @media (width <= 640px) {
        margin-bottom:2.4rem;
        font-size:2.7rem;
        line-height:calc(83/54);
      }
    }
    .text-desc {
      font-size:1.7rem;
      line-height:calc(53/17);
      letter-spacing: .20em;
      @media (width > 640px) {
        font-weight:600;
        .is-ftest & {
          font-weight:700;
        }
      }
      @media (width <= 640px) {
        font-size:1.5rem;
        line-height:calc(82/30);
        letter-spacing: .16em;
      }
    }
    .text-links {
      display:grid;
      margin-top:7.2rem;
      @media (width > 640px) {
        grid-template-columns: repeat(2,1fr);
        gap:2.0rem 2.4rem;
        width:43.2rem;
      }
      @media (width <= 640px) {
        gap:.8rem;
        margin-top:4.4rem;
        width:20.0rem;
      }
    }
    .imgs {
      display:grid;
      justify-items: flex-end;
      gap:6.0rem;
      @media (width > 640px) {
        grid-column:1/2;
      }
      @media (width <= 640px) {
        margin-top:6.8rem;
        gap:2.5rem;
      }
    }
  }
}


/* ニュース
============================================================================= */
.top-news {
  padding-block:13.0rem;
  position:relative;
  @media (width <= 640px) {
    padding-block:7.5rem 13.5rem;
  }
  
  .news_title {
    .link {
      @media (width <= 640px) {
        position:absolute;
        top:calc(100% + 3.6rem);
        right:3.7rem;
      }
    }
  }
}

/* 共通セクションヘッダー
============================================================================= */
.top-section_header {
  margin-bottom:5.6rem;
  @media (width <= 640px) {
    margin-bottom:3.2rem;
  }

  .header-heading {
    margin-bottom:1.2rem;
    display:grid;
    gap:8.0rem;
    @media (width <= 640px) {
      gap:2.4rem;
    }
    .l-tag_text-A {
    }
  }
  .header-desc {
    font-size:1.5rem;
    letter-spacing: .2em;
    line-height:calc(52/28);
    @media (width <= 640px) {
      font-size:1.4rem;
    }
  }
}


/* 事業内容
============================================================================= */
.top-business {
  padding-block:24.0rem 18.0rem;
  position:relative;
  @media (width <= 640px) {
    padding-block:7.5rem 5.6rem;
    padding-inline:1.2rem;
  }

  .business_list {
    display:grid;
    @media (width > 640px) {
      grid-template-columns: repeat(3,1fr);
      gap:8.8rem 2.0rem;
    }
    @media (width <= 640px) {
      gap:4.4rem;
    }
  }
  .business_list-item {
    a {
      display:grid;
      grid-template-columns: 1fr;
      gap:2.4rem;
      font-weight:700;
      font-size:1.7rem;
      line-height:1.5;
      letter-spacing: .24em;
      @media (width > 640px) {
        justify-content:center;
        text-align: center;
      }
      @media (width <= 640px) {
        gap:1.4rem;
        font-size:1.5rem;
      }
    }
  }
}


/* グループ企業
============================================================================= */
.top-group {
  padding-block:20.0rem 13.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:6.5rem 8.5rem;
  }
  .top-section_header {
    @media (width <= 640px) {
      padding-inline:1.2rem;
    }
  }

  .group_list {
    display:grid;
    @media (width > 640px) {
      grid-template-columns:repeat(6,1fr);
      gap:1.6rem;
    }
    @media (width <= 640px) {
      grid-template-columns:repeat(2,1fr);
      gap:1.0rem;
      padding-inline:1.2rem;
    }
  }
  .group_list-item {
    > a {
      background-color:#fff;
      display:block;
      padding-block:2.0rem;
      height:100%;
      @media (width <= 640px) {
        padding-block:.8rem;
      }
    }
    .img {
      display:flex;
      justify-content: center;
      align-items: center;
      height:22.0rem;
      width:100%;
      @media (width <= 640px) {
        height:12.4rem;
      }
    }
    .name {
      display:flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height:2lh;
      font-size:1.3rem;
      letter-spacing: .06em;
      line-height:calc(21/13);
      @media (width <= 640px) {
        font-size:1.2rem;
      }
    }
  }
}


/* ブランド
============================================================================= */
.top-brand {
  padding-block:22.0rem;
  @media (width <= 640px) {
    padding-block:7.0rem 5.5rem;
    padding-inline:1.2rem;
  }
  .brand-kv {
    @media (width > 640px) {
      padding-inline:2.4rem;
    }
    @media (width <= 640px) {
      margin-bottom:3.0rem;
    }
    .img01 {
      @media (width > 640px) {
        width:calc(50% + 38.0rem);
        height:73.2rem;
      }
    }
    .img02 {
      margin-left:auto;
      @media (width > 640px) {
        margin-top:-11.0rem;
        width:calc(50% - 17.2rem);
        height:35.0rem;
      }
      @media (width <= 640px) {
        margin-top:-1.0rem;
        width:19.0rem;
        margin-right:1.4rem;
      }
    }
  }
  .brand_list {
    display:grid;
    @media (width > 640px) {
      grid-template-columns: repeat(3,1fr);
      gap:8.8rem 2.0rem;
    }
    @media (width <= 640px) {
      gap:4.4rem;
    }
  }
  .brand_list-item {
    a {
      display:grid;
      grid-template-columns: 1fr;
      gap:2.4rem;
      font-weight:700;
      font-size:1.7rem;
      line-height:1.5;
      letter-spacing: .24em;
      @media (width > 640px) {
        justify-content:center;
        text-align: center;
      }
      @media (width <= 640px) {
        gap:1.4rem;
        font-size:1.5rem;
      }
    }
  }
}


/* リクルート
============================================================================= */
.top-recruit {
  padding-block:15.0rem;
  @media (width <= 640px) {
    padding-block:7.5rem 5.4rem;
  }

  > .inner {
    position:relative;
  }
  .inner2 {
    overflow:hidden;
  }
  .header-heading {
    margin:auto;
    width:fit-content;
    height:fit-content;
    position:absolute;
    inset:0;
    z-index: 10;
    filter:drop-shadow(0 0 .7rem rgba(0,0,0,.3));
    pointer-events: none;
  }
  .js-infiniteloop {
    position:relative;
  }
  .js-infiniteloop-item {
    img {
      width:auto;
      height:55.0rem;
      @media (width <= 640px) {
        height:20.6rem;
      }
    }
  }
  .desc {
    text-align: center;
    font-size:1.5rem;
    line-height:calc(33/15);
    letter-spacing: .2em;
    @media (width > 640px) {
      display:flex;
      justify-content: center;
      align-items: center;
      margin-inline:auto;
      border-radius:50%;
      font-weight:500;
      width:28.4rem;
      height:28.4rem;
      background-color:var(--cc-black-A);
      color:var(--cc-green-A);
      position:absolute;
      inset-inline:0 -107.0rem;
      bottom:-6.8rem;
      z-index: 10;
    }
    @media (width <= 640px) {
      margin-top:3.0rem;
      font-weight:700;
    }
  }
  .link {
    @media (width > 640px) {
      position:absolute;
      inset:0;
      transition-property: background-color;
      transition-duration: var(--duration-hover-A);

      @media (hover:hover) {
        &:hover {
          background-color: rgba(255, 255, 255, 0.2);
        }
      }
    }
    @media (width <= 640px) {
      display:flex;
      justify-content: center;
      align-items: center;
      margin-inline:auto;
      margin-top:2.0rem;
      background-color:var(--cc-black-A);
      color:var(--cc-green-A);
      width:calc(100% - 7.2rem);
      height:3.4rem;
      font-size:1.2rem;
      letter-spacing: .2em;
    }

    > span {
      @media (width > 640px) {
        display:none;
      }
    }

  }
  .illust {
    position:absolute;
    &._01 {
      @media (width > 640px) {
        left:2.8rem;
        bottom:-8.6rem;
      }
      @media (width <= 640px) {
        left:1.4rem;
        top:-9.8rem;
      }
    }
    &._02 {
      right:0;
      @media (width > 640px) {
        top:-20.6rem;
      }
      @media (width <= 640px) {
        top:15.6rem;
      }
    }
  }
}


/* アクセス
============================================================================= */
.top-access {
  padding-block:18.0rem 16.4rem;
  @media (width <= 640px) {
    padding-block:9.0rem;
    padding-inline:3.6rem;
  }

  .access-heading {
    margin-bottom:10.0rem;
    @media (width <= 640px) {
      margin-bottom:6.4rem;
    }
  }
}



/* Sample
============================================================================= */
.top-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}