@charset "utf-8";

/* ----------------------------------------------------------------------
   目次
   1. p-talent-list  タレント一覧のセクション（1部・2部・3部の区分と見出し）
   カード（c-talent）とポップアップ（c-talent-modal）は common.css にある
   各コンポーネントの直後に、そのコンポーネントのレスポンシブ指定を置く
   ---------------------------------------------------------------------- */

/* ==========================================================================
   p-talent-list  タレント一覧のセクション
   ========================================================================== */

.p-talent-list {
  padding: 8rem 0 11rem;
  background-color: #fff;
}

/* 区分（1部・2部・3部）。区分の間はFigmaどおり40px空ける */
.p-talent-list__group + .p-talent-list__group {
  margin-top: 4rem;
}

/* 区分の見出し。オレンジの下線は中見出し（c-subhead）と似ているが、
   Figmaでは線が2px・文字が30pxで別物なのでここで独自に持つ */
.p-talent-list__heading {
  padding-bottom: 1.6rem;
  border-bottom: 2px solid #f6741b;
  font-size: 3rem;
  font-weight: 500;
  line-height: 2.8rem;
  letter-spacing: .18rem;
  color: #141414;
}

/* カードのグリッドはTOPと共通（c-talent__list）。TOPでは見出しの下に置くため
   上マージンが付いているので、一覧では見出しからの間隔（Figma 40px）に差し替える */
.p-talent-list .c-talent__list {
  margin-top: 4rem;
}

.p-talent-list__empty {
  font-size: 1.6rem;
  line-height: 2;
  text-align: center;
}

@media (min-width: 1024px) {
  /* Figmaどおり3部だけ5カラム（カード幅222.4px）。
     1023px以下は名前が収まらないため、他の区分と同じ3・2カラムに戻す */
  .p-talent-list__group--five .c-talent__list {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 767px) {
  .p-talent-list {
    padding: 5rem 0 6rem;
  }

  /* SPのデザインは無いため、既存の中見出し（c-subhead）と同じ縮め方に合わせている */
  .p-talent-list__group + .p-talent-list__group {
    margin-top: 2.4rem;
  }

  .p-talent-list__heading {
    padding-bottom: .8rem;
    font-size: 2rem;
    letter-spacing: .15rem;
  }

  .p-talent-list .c-talent__list {
    margin-top: 2.4rem;
  }

  .p-talent-list__empty {
    font-size: 1.4rem;
  }
}