@charset "UTF-8";

/* ==== root ========================== */
:root {
  --color-black: #323232;
  --color-white: #ffffff;
  --color-primary: #2ECC71;
  --color-bg-green: #F1F7F4;
  --color-line-gy: #ECECEC;

  --noto-sans: "Noto Sans JP", sans-serif;
  --raleway: "Raleway", sans-serif;

}


/*================================================
 * interview
 ================================================*/
#interview {
  padding-top: 5.4rem;
  padding-bottom: 7.4rem;
  min-height: 41.7rem;
  z-index: 1;
}

#interview::before {
  position: absolute;
  content: "";
  background: var(--color-white);
  top: 0;
  bottom: 0;
  left: 0;
  right: 11rem;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 23.4rem) 100%, 0% 100%);
}

#interview .narrow {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 11rem;
}

#interview h2.sp {
  display: none;
}

.interview_img {
  width: 42rem;
}

.interview_txt {
  padding-right: 7rem;
}

.interview_txt p {
  margin: 4rem 0;
}

@media screen and (max-width:1024px) {
  #interview {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  #interview::before {
    background: var(--color-white);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    clip-path: unset;
    opacity: 0.8;
  }

  #interview .narrow {
    display: block;
  }

  #interview h2.pc {
    display: none;
  }

  #interview h2.sp {
    display: block;
    max-width: 40rem;
    margin: 0 auto;
  }

  .interview_img {
    width: 100%;
    max-width: 40rem;
    margin: 4.5rem auto 3rem;
  }

  .interview_txt {
    padding: 0;
    max-width: 40rem;
    margin: 0 auto;
  }

  .interview_txt p {
    margin: 3rem 0;
  }
}


/* rowlist */

.rowlist {
    display:flex;
    flex-wrap:wrap;
    gap:3rem 10px;
}

.row_card {
   flex: 0 0 calc((100% - 20px) / 3); /* 横幅を3分割 - gap考慮 */
  box-sizing: border-box;
  margin-bottom:3rem;
}

.row_card img {
  padding:1rem;
  background-color:#fff;
}

.row_card h4 {
  font-size: 1.8rem;
  padding-top:0.9rem;
  font-weight:500;
  border-bottom:1px solid #9dc1ac;
}



@media screen and (max-width:1024px) {

.row_card {
   flex: 0 0 calc((100% - 20px) / 2); /* 横幅を2分割 - gap考慮 */
}

.row_card h4 {
    font-size: 1.6rem;
  }

}

@media screen and (max-width:576px) {
  .row_card {
   flex: 0 0 calc((100% - 20px) / 1); /* 横幅を2分割 - gap考慮 */
}
  .row_card p {
    font-size: 1.4rem;
  }

}