@charset "utf-8";

/* =========================================================
   コラム一覧（先輩たちにインタビュー）
   ========================================================= */

/* ---------- 白カード ---------- */
.l-card {
  width: 100%;
  max-width: var(--w-content);
  margin: 2.3125rem auto 0;
  background: #fff;
  border-radius: 1.25rem;
}
.l-card__inner { padding-inline: 4.375rem; }   /* 70px：カード幅820pxに合わせる */
.l-card--main { overflow: hidden; }

.p-town { margin-top: 5.75rem; }
.p-town img { display: block; width: 100%; }
.p-column-page .p-cta-split { margin-top: 3.75rem; }

/* ---------- ヒーロー（デザイン: img-01 x=177 / deco x=646 / img-02 x=790） ---------- */
.p-hero-lower--column { padding: 7.3125em 0 calc(1.5em + var(--wave-h)); }
/* em = 1200px デザインの実寸（タブレット幅では画面幅に比例して縮む） */
.p-hero-lower--column .p-hero-lower__img {
  top: -4.75em;      /* デザイン y=131 */
  left: 50%;
  width: 15.875em;   /* 254px */
  z-index: 1;
}
.p-hero-lower--column .p-hero-lower__img--l { transform: translateX(-26.4375em); }  /* x=177 */
.p-hero-lower--column .p-hero-lower__img--r { transform: translateX(11.875em); }    /* x=790 */
.p-hero-lower--column .p-hero-lower__deco {
  top: -5em;         /* デザイン y=127 */
  left: 50%;
  transform: translateX(2.875em);   /* x=646 */
  width: 7.625em;    /* 122px */
  z-index: 0;
}

/* =========================================================
   インタビューカード一覧
   ========================================================= */
.p-columns { padding: 3.625rem 0 0; }

.p-interview__list {
  --bs-gutter-x: 1.3125rem;   /* カード間 21px（デザイン実測） */
  --bs-gutter-y: 1.3125rem;
}

.p-interview__card {
  height: 100%;
  padding: 2.1875rem 1.375rem 2.5rem;
  border: .125rem solid var(--c-text);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: .25rem .3125rem 0 var(--c-text);
}
.p-interview__card:hover { opacity: 1; box-shadow: .25rem .3125rem 0 var(--c-text), 0 .375rem .75rem rgba(0, 0, 0, .08); }

.p-interview__avatar {
  place-content: center;
  width: 9.375rem;
  height: 9.375rem;
  border-radius: 50%;
  background: #ededed;
  overflow: hidden;
}
.p-interview__avatar img { width: 100%; }

.p-interview__tag {
  display: block;
  margin-top: 1.5rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #000;
}
.p-interview__title {
  display: block;
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
}
.p-interview__body {
  display: block;
  margin-top: 1.125rem;
  font-size: .875rem;
  line-height: 1.85;
}
.p-interview__card .c-btn { margin-top: auto; }
.p-interview__card .c-btn.c-btn--sm { margin-top: 1.75rem; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media screen and (max-width: 1199px) {
  .l-card { max-width: min(var(--w-content), calc(100% - 2.5rem)); }   /* 左右 20px を空けたまま中央寄せ */
  .l-card__inner { padding-inline: 2.5rem; }
}

@media screen and (max-width: 991px) {
  .p-columns { padding-top: 2.75rem; }

}

@media screen and (max-width: 767px) {
  .l-card { max-width: calc(100% - 1.875rem); border-radius: .875rem; }
  .l-card__inner { padding-inline: 1.25rem; }

  /* ヒーロー（PC と同じ img 左右 2 点 + deco 中央やや右）。高さは learn ページと共通 */
  .p-hero-lower--column { padding: 2rem 0 calc(1.5rem + var(--wave-h)); }
  .p-hero-lower--column .p-hero-lower__inner { padding-inline: 6rem; }
  .p-hero-lower--column .p-hero-lower__img {
    top: -1.5rem;
    bottom: auto;
    transform: none;
    width: 5rem;
  }
  .p-hero-lower--column .p-hero-lower__img--l { left: .9375rem; right: auto; }
  .p-hero-lower--column .p-hero-lower__img--r { left: auto; right: .9375rem; }
  .p-hero-lower__title {
    line-height: 1.3;
  }
}