@charset "UTF-8";

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

採用インタビュー CSS

・採用インタビュー用CSS「.recruit_interview-×××」
対象
/recruit/interview/01.php （/recruit/staff01/）
/recruit/interview/02.php （/recruit/staff02/）
/recruit/interview/03.php （/recruit/staff03/）
/recruit/interview/04.php （/recruit/staff04/）
/recruit/interview/05.php （/recruit/staff05/）

上記はここに記述する

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

/* ヘッダー
----------------------------------------------------------------------------- */
.recuit_interview-header {
  padding-block:10.0rem 8.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:6.4rem;
  }

  .number {
    margin-bottom:2.4rem;
    font-size:2.0rem;
    letter-spacing: .07em;
    line-height:1.15;
    @media (width <= 640px) {
      font-size:1.6rem;
    }
  }

  .title {
    margin-bottom:2.4rem;
    font-size:4.2rem;
    font-weight:600;
    line-height:1.7;
    letter-spacing: .18em;

    @media (width > 640px) {
    }
    @media (width <= 640px) {
      font-size:2.6rem;
    }
  }

  .position {
    font-size:1.4rem;
    line-height:1;
    letter-spacing: .12em;

    @media (width > 640px) {
    }
    @media (width <= 640px) {
      font-size:1.2rem;
    }
  }
}


/* キービジュアル
----------------------------------------------------------------------------- */
.recuit_interview-kv {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}


/* プロフィール
----------------------------------------------------------------------------- */
.recruit_interview-profile {
  padding-top:11.2rem;
  @media (width > 640px) {
    display:grid;
    grid-template-columns:65.0rem 1fr;
    align-items: flex-start;
  }
  @media (width <= 640px) {
    padding-top:5.6rem;
  }

  .heading {
    font-size:6.4rem;
    line-height:1;
    letter-spacing: .05em;
    @media (width <= 640px) {
      margin-bottom:2.8rem;
      font-size:4.0rem;
    }
  }

  .text {
    .tag {
      margin-bottom:2.0rem;
      width:fit-content;
      border-radius:100px;
      background-color:var(--cc-white-A);
      > span {
        display:flex;
        justify-content: center;
        align-items: center;
        height:2.2rem;
        padding-inline:1.2rem;
        font-size:1.2rem;
        letter-spacing: .18em;
        background-image:var(--grad-B);
        background-clip:text;
        color:transparent;
      }
    }
  }
  .name {
    display:flex;
    align-items: baseline;
    gap:1.6rem;
    line-height:1;
    font-size:2.4rem;
    letter-spacing: .18em;
    margin-bottom:1.2rem;
    @media (width <= 640px) {
      font-size:2.0rem;
    }

    .en {
      font-size:1.8rem;
      letter-spacing: .12em;
      @media (width <= 640px) {
        font-size:1.6rem;
      }
    }
  }
  .name_sub {
    margin-bottom:2.4rem;
  }
  .career {
    display:grid;
    gap:.8rem;
    dt {
      font-size:2.0rem;
      letter-spacing: .08em;
      line-height:1.15;
      @media (width <= 640px) {
        font-size:1.6rem;
      }
    }
    dd {
      border-bottom:1px solid;
      width:fit-content;
    }
  }
}

/* コンテンツ1
----------------------------------------------------------------------------- */
.recruit_interview-contents01 {
  padding-top:16.0rem;
  @media (width > 640px) {
    display:grid;
    grid-template-columns:calc(50% - 4.0rem) 15.6rem 52.4rem 1fr;
    align-items: center;
  }
  @media (width <= 640px) {
    padding-top:12.0rem;
  }
  .img {
    @media (width > 640px) {
      height:70.0rem;
    }
    @media (width <= 640px) {
      margin-left:calc(var(--pdi-sp-30) * -1);
    }

    img {
      border-radius:0 var(--radius-A) var(--radius-A) 0;
    }
  }
  .text {
    @media (width > 640px) {
      grid-column:3/4;
    }

    .heading {
      margin-bottom:4.8rem;
      @media (width <= 640px) {
        margin-block:5.6rem 3.2rem;
      }
    }
  }
}

/* コンテンツ2
----------------------------------------------------------------------------- */
.recruit_interview-contents02 {
  padding-top:20.0rem;
  @media (width > 640px) {
    display:flex;
    flex-direction: row-reverse;
    align-items: center;
    gap:16.0rem;
  }
  @media (width <= 640px) {
    padding-top:12.0rem;
  }

  .img {
    @media (width > 640px) {
      flex-shrink: 0;
      margin-right:-4.0rem;
    }
  }
  .text {
    @media (width > 640px) {
    }

    .heading {
      margin-bottom:4.8rem;
      @media (width <= 640px) {
        margin-block:5.6rem 3.2rem;
      }
    }
  }
}

/* メッセージ
----------------------------------------------------------------------------- */
.recruit_interview-message {
  padding-block:20.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:12.0rem 9.6rem;
  }

  .js-infiniteloop {
    font-size:16.0rem;
    line-height:1.2;
    letter-spacing: .02em;
    line-height:1;
    @media (width > 640px) {
      margin-bottom:8.0rem;
    }
    @media (width <= 640px) {
      font-size:6.4rem;
    }

    .js-infiniteloop-item {
      p {
        padding-right:6.4rem;
        @media (width > 640px) {
          padding-bottom:2.0rem;
        }
        @media (width <= 640px) {
          padding-bottom:1.0rem;
          padding-right:1.6rem;
        }
      }
    }
  }

  .text {
    @media (width > 640px) {
      display:grid;
      grid-template-columns:41.2rem 1fr;
      align-items: flex-start;
    }
    @media (width <= 640px) {
    }

    .heading {
      @media (width <= 640px) {
        margin-block:4.0rem 3.2rem;
      }
    }
  }
}

/* 社員インタビュー
----------------------------------------------------------------------------- */
.recruit_interview-others {
  padding-block:20.0rem;
  @media (width <= 640px) {
    padding-block:11.2rem;
  }
}



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