@charset "UTF-8";

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

社員紹介詳細 CSS

・社員紹介詳細用CSS「.ms-×××」

上記はここに記述する

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

/* ヘッダー
----------------------------------------------------------------------------- */
.ms-header {
  position:relative;
  z-index: 1;
  @media (width > 767px) {
    display:grid;
    grid-template-columns:1fr 65.0rem;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:
      "number img"
      "title img"
      "join_name img"
    ;
    align-items: start;
    column-gap:10.0rem;
    padding-left:10.0rem;
    margin-bottom:-4.0rem;
  }
  @media (width <= 767px) {
    padding-left:4.5rem;
  }

  .l-heading-C {
    @media (width > 767px) {
      grid-area:number;
      font-size:1.8rem;
      margin-bottom:3.6rem;
    }
    @media (width <= 767px) {
      margin-bottom:1.6rem;
    }
  }
  .title {
    font-size:3.6rem;
    font-weight:700;
    line-height:2;
    letter-spacing: 0;
    @media (width > 767px) {
      grid-area:title;
    }
    @media (width <= 767px) {
      padding-right:4.5rem;
      font-size:2.0rem;
      line-height:1.8;
    }
  }
  .jn {
    display:flex;
    align-items: baseline;
    gap:2.8rem;
    line-height:1;
    @media (width > 767px) {
      grid-area:join_name;
      margin-top:auto;
      padding-bottom:10.0rem;
    }
    @media (width <= 767px) {
      margin-top:1.2rem;
      gap:1.2rem;
    }
  }
  .jn_join {
  }
  .jn_name {
    font-size:6.0rem;
    letter-spacing: .1em;
    @media (width <= 767px) {
      font-size:3.2rem;
    }
  }
  .img {
    @media (width > 767px) {
      grid-area:img;
    }
    @media (width <= 767px) {
      margin-top:2.8rem;
      margin-left:-4.5rem;
    }

    img {
      @media (width > 767px) {
        border-top-left-radius:var(--radius-A);
        border-bottom-left-radius:var(--radius-A);
      }
    }
  }
}


/* セクション
----------------------------------------------------------------------------- */
.ms-sections {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }


  .s {
    & + .s {
      margin-top:10.0rem;
      @media (width <= 767px) {
        margin-top:4.8rem;
      }
    }

    @media (width > 767px) {
      &:nth-child(2),
      &:nth-child(4) {
        display:grid;
        align-content: start;
        column-gap:8.0rem;
      }
      .img {
        grid-area:img;
      }
      .l-heading-C {
        grid-area:heading;
      }
      .s_desc {
        grid-area:desc;
      }
      &:nth-child(2) {
        grid-template-rows:auto 1fr;
        grid-template-columns:35.0rem 1fr;
        grid-template-areas:
          "img heading"
          "img desc"
        ;
      }
      &:nth-child(4) {
        grid-template-columns:1fr 35.0rem;
        grid-template-areas:
          "heading img"
          "desc img"
        ;
      }
    }
  }

  .s img {
    @media (width <= 767px) {
      margin-bottom:2.8rem;
    }
  }
  .s > .l-heading-C {
    @media (width <= 767px) {
      margin-bottom:1.6rem;
    }
  }
  &:has(.m) {
    padding-bottom:0;
  }
  .m {
    margin-top:12.0rem;
    background-color:rgb(from #26375B r g b / .8);
    padding-block:8.0rem;
    border-bottom-left-radius:var(--radius-A);
    border-bottom-right-radius:var(--radius-A);
    @media (width > 767px) {
      display:grid;
      align-items: center;
      grid-template-columns: 34.0rem 1fr;
      grid-template-areas:
        "en heading"
        "en desc"
      ;
      margin-inline:-10.0rem;
      padding-right:10.0rem;
    }
    @media (width <= 767px) {
      margin-top:6.0rem;
      padding-block:4.0rem;
    }
  }
  .m_en_heading {
    display:flex;
    justify-content: center;
    align-items: center;
    gap:1.4rem;
    font-size:3.4rem;
    letter-spacing: .05em;
    @media (width > 767px) {
      grid-area:en;
    }
    @media (width <= 767px) {
      margin-bottom:.8rem;
      font-size:3.2rem;
    }
  }
  .m .l-heading-C {
    margin-bottom:2.4rem;
    @media (width > 767px) {
      grid-area:heading;
    }
    @media (width <= 767px) {
      margin-bottom:2.0rem;
      text-align: center;
    }
  }
  .m_desc {
    letter-spacing: 0;
    line-height:2;;
    @media (width > 767px) {
      grid-area:desc;
    }
  }
}


/* インタビュー動画、スケジュール
----------------------------------------------------------------------------- */
.ms-iv_ds {
  &:has(+ .ms-archive_link) {
    padding-bottom:0;
  }
  position:relative;
  @media (width > 767px) {
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    .l-heading-C {
      margin-top:calc(.5em - .5lh);
      flex-shrink: 0;
    }
  }
  @media (width <= 767px) {
  }

  .iv {
    @media (width > 767px) {
      display:flex;
      gap:3.2rem;
      padding-left:5.0rem;
    }
    @media (width <= 767px) {
      display:grid;
      grid-template-columns:10.0rem 1fr;
      gap:.8rem;
    }
  }
  .iv_video {
    aspect-ratio: 27/48;
    height:auto;
    position:relative;
    @media (width > 767px) {
      width:27.0rem;
    }
    @media (width <= 767px) {
    }
    .js-video_play-button {
      display:flex;
      justify-content: center;
      align-items: center;
      position:absolute;
      inset:0;
      z-index: 1;
      transition-property: opacity;
      transition-duration:var(--duration-hover-A);

      &.is-playing {
        opacity:0;
        pointer-events: none;
      }

      @media (hover:hover) {
        &:hover .icon {
          background-color:rgb(from #000 r g b / 1);;
        }
      }

      .icon {
        display:flex;
        justify-content: center;
        align-items: center;
        border-radius:50%;
        width:4.0rem;
        height:4.0rem;
        background-color:rgb(from #000 r g b / .8);;
        position:absolute;
        transition-property: background-color;
        transition-duration:var(--duration-hover-A);

        &::after {
          content:"";
          margin-left:.2rem;
          width:1.0rem;
          height:1.2rem;
          clip-path:polygon(0 0, 100% 50%, 0 100%);
          background-color:#fff;
          position:absolute;
        }
      }
      img {
        pointer-events: none;
      }
    }
  }
  .ds {
    @media (width > 767px) {
      display:flex;
      gap:2.4rem;
    }
    @media (width <= 767px) {
      display:grid;
      grid-template-columns:10.0rem 1fr;
      gap:.8rem;
      margin-top:5.2rem;
    }
    .l-flow-A {
      --row-gap:2.8rem;
      --dt-w:6.8rem;
      --dd-pis:2.8rem;
      --ico-w:1.7rem;
      @media (width <= 767px) {
        --row-gap:1.6rem;
        --dt-w:4.4rem;
        --dd-pis:1.6rem;
        --ico-w:1.3rem;
        line-height:1.8rem;
        font-size:1.1rem;
      }
      dt {
      }
      dd {
        letter-spacing: 0;
      }
    }
  }

  .treat {
    background-color:#fff;
    width:38.0rem;
    position:absolute;
    left:-16.4rem;
    opacity:.5;
    z-index: -1;
    @media (width > 767px) {
      top:38.0rem;
    }
    @media (width <= 767px) {
      margin-inline:auto;
      width:17.0rem;
      inset-inline:0;
      bottom:24.6rem;
    }
  }
}


/* 休日の過ごし方
----------------------------------------------------------------------------- */
.ms-dayoff {
  display:grid;
  padding-block:3.0rem;
  @media (width > 767px) {
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-columns: 1fr 28.0rem;
    grid-template-areas:
      ". img"
      "en img"
      "ja img"
      "desc img"
      ". img"
    ;
    column-gap:3.0rem;
    padding-inline:6.0rem 3.0rem;
  }
  @media (width <= 767px) {
    grid-template-rows:auto auto 1fr;
    grid-template-columns: 1fr 11.0rem;
    grid-template-areas:
      "en img"
      "ja img"
      "desc desc"
    ;
    padding-block:2.5rem;
  }

  .en {
    grid-area:en;
    margin-bottom:2.8rem;
    @media (width <= 767px) {
      margin-block:auto .8rem;
    }
  }
  .ja {
    margin-bottom:2.0rem;
    grid-area:ja;
    @media (width <= 767px) {
      margin-bottom:auto;
    }
  }
  .img {
    grid-area:img;
    @media (width <= 767px) {
    }
  }
  .desc {
    grid-area:desc;
    line-height:1.8;
    @media (width <= 767px) {
      margin-top:1.2rem;
    }
  }
}



/* 一覧ボタン
----------------------------------------------------------------------------- */
.ms-archive_link {
  display:grid;
  grid-template-columns:28.0rem 28.0rem 28.0rem;
  grid-template-areas:"prev archive next";
  justify-content: space-between;
  margin-top:10.0rem;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    margin-top:6.0rem;
    grid-template-rows:auto auto;
    grid-template-columns:1fr 1fr;
    gap:2.0rem 1.6rem;
    grid-template-areas:
      "archive archive"
      "prev next"
    ;
  }

  .l-button-A {
    width:100%;
    min-width:0;
    &:is(.-prev,.-next) {
      &:not(:hover) {
        background-color:var(--cc-blue-B);
      }
    }
    &.-prev {
      grid-area:prev;
      padding-inline:1em .5em;
      &::after {
        inset-inline:2.0rem auto;
        transform:scaleX(-1);
      }
    }
    &.-archive {
      grid-area:archive;
      padding-inline:0;
    }
    &.-next {
      grid-area:next;
    }
  }
}


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