@charset "UTF-8";

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

社員紹介一覧 CSS

・社員紹介一覧用CSS「.ma-×××」

上記はここに記述する

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

/* フィルター
----------------------------------------------------------------------------- */
.ma-filter {
  display:flex;
  justify-content: center;
  line-height:1.4;
  font-weight: 700;
  text-align: center;
  position:sticky;
  top:calc(var(--header-height) + 2.0rem);
  z-index: 100;
  @media (width > 767px) {
    gap:2.5rem;
  }
  @media (width <= 767px) {
    display:grid;
    grid-template-columns: 1fr 1.25fr 1fr 1fr 1fr;
    gap:.4rem;
    font-size:1.1rem;
    line-height:1.2;
    letter-spacing: 0;
    top:calc(var(--header-height) - 1px);
    z-index: 1000;
  }

  .i_label {
    display:flex;
    flex-direction: column;
    justify-content: center;
    row-gap:.8rem;
    align-items: center;
    cursor: pointer;
    background-color:#fff;
    position:relative;
    z-index: 1;
    overflow:hidden;
    transition-property: color;
    transition-duration: var(--duration-hover-A);
    &:has(input[type="radio"]:checked) {
      color:var(--cc-white-A);
      &::before {
        opacity:1;
      }
    }
    @media (hover:hover) {
      &:hover {
        color:var(--cc-white-A);
        &::before {
          opacity:1;
        }
      }
    }
    @media (width > 767px) {
      width:20.0rem;
      height:8.0rem;
    }
    @media (width <= 767px) {
      height:7.2rem;
    }



    &::before {
      content:"";
      border-radius:var(--radius-B);
      background-image:linear-gradient(
        to right,
        #6892EE 40%,
        #2FD38F 120%
      );
      position:absolute;
      inset:0;
      z-index: -1;
      opacity:0;
      pointer-events: none;
      transition-property: opacity;
      transition-duration: var(--duration-hover-A);
    }
    > span {
      display:grid;
      align-items: center;
      min-height:2lh;
      padding-top:.8rem;
      @media (width <= 767px) {
        min-height:3lh;
        padding-top:.4rem;
      }
    }

    > input[type="radio"] {
      position:absolute;
      width:0;
      height:0;
      overflow:hidden;
      clip:path("M0,0 h0 v0 h0 Z");
    }
  }
}


/* 一覧
----------------------------------------------------------------------------- */
.ma-archive {
  display:grid;
  margin-top:14.0rem;
  @media (width > 767px) {
    grid-template-columns:1fr 1fr;
    align-items: start;
    gap:4.8rem 12.0rem;
  }
  @media (width <= 767px) {
    margin-top:6.0rem;
    gap:4.0rem;
  }

  .a {
    opacity: 1;
    transform: translateY(0); /* 位置を元に戻す */
    transition-property:opacity ,transform, display;
    transition-duration:var(--duration-hover-A);
    @starting-style {
      opacity: 0;
      transform: translateY(3.0rem);
    }

    &.is-hidden {
      display: none;
      opacity: 0;
      transform: translateY(3.0rem);
    }
    @media (width > 767px) {
      &:nth-child(even of :not(.is-hidden)) {
        margin-top: 10.0rem;
      }
    }
    @media (width <= 767px) {
    }

    .l-heading-C {
      margin-left:2.0rem;
      @media (width > 767px) {
        margin-bottom:2.4rem;
        font-size:1.8rem;
      }
      @media (width <= 767px) {
        margin-bottom:1.6rem;
      }
    }

    > a {
      display:block;
      position:relative;
    }
    .a_img {
      margin-left:2.0rem;
      position:relative;
      z-index: 1;
      img {
      }
    }
    .a_img_t {
      display:flex;
      gap:.8rem;
      position:absolute;
      top:2.0rem;
      right:2.0rem;
      @media (width <= 767px) {
        gap:.4rem;
        right:1.0rem;
        top:1.0rem;
      }
    }
    .a_img_t_tag {
      color:#fff;
      padding:.3rem 2.0rem .4rem;
      position:relative;
      @media (width <= 767px) {
        padding-inline:1.2rem;
      }
      &::after {
        content:"";
        border-radius: 100px;
        background-color:var(--cc-blue-A);
        position:absolute;
        inset:0;
        mix-blend-mode: multiply;
      }
      > span {
        font-size:1.4rem;
        position:relative;
        z-index: 1;
        @media (width <= 767px) {
          font-size:1.2rem;
        }
      }
    }
    .a_initial {
      writing-mode: vertical-rl;
      font-size:6.0rem;
      line-height:.8;
      letter-spacing: .1em;
      z-index: 1;
      position:absolute;
      inset-inline-start: 4.0rem;
      z-index: 2;
      @media (width <= 767px) {
        font-size:3.6rem;
        inset-inline-start: 2.0rem;
      }
    }
    .a_t {
      margin-right:2.0rem;
      margin-top:-28.8rem;
      padding-top:31.4rem;
      background-color:#fff;
      height:46.0rem;
      padding-inline:4.0rem;
      line-height:2;
      position:relative;
      @media (width <= 767px) {
        margin-top:-17.2rem;
        padding-top:19.2rem;
        padding-inline:2.5rem;
        height:32.0rem;
      }
      .m-arrow-A {
        border:1px solid var(--cc-black-A);
        position:absolute;
        bottom:2.0rem;
        right:2.0rem;
        @media (width <= 767px) {
          bottom:1.0rem;
          right:1.0rem;
        }
      }
    }
    .a_t_title {
      min-height:3lh;
      font-size:2.0rem;
      letter-spacing: .05em;
      line-height:1.5;
      font-weight:700;
      @media (width <= 767px) {
        font-size:1.6rem;
      }
    }
    .a_t_join {
      font-size:1.5rem;
      @media (width <= 767px) {
        margin-top:2.0rem;
        font-size:1.2rem;
      }
    }
  }
}



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