@charset "UTF-8";

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

Interview CSS

・文系×理系対談インタビュー用CSS「.interview-×××」

上記はここに記述する

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

/* 共通
----------------------------------------------------------------------------- */
.interview_l-speaker {
  border-radius:50%;
  position:relative;

  &::before {
    content:"";
    border-radius:50%;
    border-style:solid;
    border-width:.4rem;
    position:absolute;
    inset:0;
    opacity:.6;
    @media (width <= 767px) {
      border-width:.3rem;
    }
  }
  &.-bd-A {
    &::before {
      border-color:var(--cc-green-C);
    }
  }
  &.-bd-B {
    &::before {
      border-color:var(--cc-blue-A);
    }
  }

  img {
    border-radius:50%;
    pointer-events: none;
  }
}



/* セクション
----------------------------------------------------------------------------- */
.interview-sections {
  padding-block:45.0rem 12.0rem;
  @media (width > 767px) {
    margin-top:-35.0rem;
    padding-inline:10.0rem;
  }
  @media (width <= 767px) {
    padding-block:4.0rem 6.0rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .h {
    margin-bottom:10.4rem;
    @media (width <= 767px) {
      margin-bottom:6.0rem;
    }
  }
  .h > .l-heading-D {
    @media (width > 767px) {
      margin-bottom:6.0rem;
    }
  }
  .h_s {
    display:grid;
    grid-template-columns: 1fr 1fr;
    row-gap:4.0rem;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      row-gap:2.4rem;
    }
  }
  .h_s_i {
    display:grid;
    gap:1.6rem 2.0rem;
    font-size:1.4rem;
    letter-spacing: 0;
    line-height: 1;
    @media (width > 767px) {
      grid-template-rows:1fr auto auto 1fr;
      grid-template-columns:12.0rem 1fr;
      grid-template-areas:
        "img ."
        "img join"
        "img nb"
        "img ."
      ;
      align-items: center;
      align-content: center;
    }
    @media (width <= 767px) {
      grid-template-columns:1fr;
      grid-template-areas:
        "img"
        "join"
        "nb"
      ;
      row-gap:.8rem;
      font-size:1.2rem;
      text-align: center;
    }
  }
  .h_s_i .interview_l-speaker {
    grid-area:img;
    @media (width <= 767px) {
      width:7.2rem;
      margin-inline:auto;
    }
  }
  .h_s_i_join {
    grid-area:join;
    color:var(--cc-gray-D);
  }
  .h_s_i_nb {
    display:flex;
    align-items: baseline;
    gap:1.6rem;
    grid-area:nb;
    @media (width <= 767px) {
      justify-content: center;
      gap:.8rem;
    }
  }
  .h_s_i_nb_name {
    font-size:3.2rem;
    letter-spacing: 0;
    @media (width <= 767px) {
      font-size:2.0rem;
    }
  }
  .h_s_i_nb_birthplace {
    &::before {
      content:"["
    }
    &::after {
      content:"]"
    }
  }

  .s {
    & + .s {
      margin-top:10.0rem;
      @media (width <= 767px) {
        margin-top:6.0rem;
      }
    }
  }
  .s_kv {
    margin-bottom:11.2rem;
    @media (width <= 767px) {
      margin-bottom:4.0rem;
    }
  }
  .s > .l-heading-C {
    border-bottom:1px solid var(--cc-gray-A);
    padding-bottom:2.8rem;
    margin-bottom:6.0rem;
    letter-spacing: 0;
    @media (width <= 767px) {
      padding-bottom:1.6rem;
      margin-bottom:3.0rem;
      white-space: nowrap;
    }
  }
  .s_t {
    display:grid;
    grid-template-columns:9.0rem 1fr;
    align-items: start;
    column-gap:4.0rem;
    @media (width <= 767px) {
      column-gap:1.6rem;
      grid-template-columns:4.0rem 1fr;
    }
    & + .s_t {
      margin-top:6.8rem;
      @media (width <= 767px) {
        margin-top:4.0rem;
      }
    }
  }
  .s_t_s {
    display:flex;
    justify-content: center;
    position:relative;
    @media (width <= 767px) {
      margin-left:-1.0rem;
    }
  }
  .s_t_s_name {
    font-size:1.8rem;
    line-height:1;
    text-align: center;
    position:absolute;
    top:calc(100% + 1.2rem);
    @media (width <= 767px) {
      top:calc(100% + .8rem);
      font-size:1.2rem;
    }
  }
  .s_t_c {
    margin-block:auto;
  }
  .s_t_c_comment {
    margin-block:calc(.5em - .5lh);
    line-height:2;
    letter-spacing: 0;
    @media (width <= 767px) {
      line-height:1.8;
    }
  }
}




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