@layer custom {

  /* ===================================
    スタッフ紹介(一覧) Staff Archive
  =================================== */

  /* 記事リスト全体 */
  .staff-article-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0;
    line-height: 1.5;
  }

  /* 各スタッフカード */
  .staff-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid #E6E6E6;
  }

  .staff-card-first {
    border-top: none;
  }

  /* 部署タイトル */
  .staff-department-title {
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 15px;
    font-weight: 700;
    color: #000;
    border-bottom: 2px solid var(--main-color, #DB2626);
    margin-bottom: 15px;
  }

  @media (min-width: 768px) {
    .staff-department-title {
      font-size: 20px;
      padding-top: 35px;
      padding-bottom: 15px;
      margin-bottom: 35px;
    }
  }

  /* カード内部レイアウト */
  .staff-card-inner {
    color: #333;
    display: flex;
    text-decoration: none;
    margin-block: var(--p-lg);
    background: #FFF;
    flex-direction: column-reverse;
    gap: var(--p-lg);
  }
  @media (min-width: 768px) {
    .staff-card-inner {
      flex-direction: row;
      gap: 0; 
    }
  }

  .staff-card-with-dept {
    margin-top: 0;
  }

  @media (min-width: 768px) {
    .staff-card-inner {
      margin-top: 35px;
    }

    .staff-card-with-dept {
      margin-top: 0;
    }
  }

  /* スタッフ情報エリア */
  .staff-info {
    flex: 1;
    margin: 0 15px 0 0;
  }

  @media (min-width: 768px) {
    .staff-info {
      margin: 0 45px 0 15px;
    }
  }

  /* 役職 */
  .staff-position {
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: normal;
  }

  @media (min-width: 768px) {
    .staff-position {
      margin-bottom: 15px;
    }
  }

  /* スタッフ名 */
  .staff-name {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
  }

  @media (min-width: 768px) {
    .staff-name {
      flex-direction: row;
      align-items: center;
      font-size: 26px;
      flex-wrap: wrap;
      gap: 0 var(--p-lg);
    }
  }

  /* ふりがな（ローマ字） */
  .staff-name-spell {
    font-size: 12px;
    margin-top: 5px;
    color: var(--main-color, #DB2626);
    font-weight: normal;
  }

  @media (min-width: 768px) {
    .staff-name-spell {
      margin-top: 0;
    }
  }

  /* スタッフ紹介文 */
  .staff-content {
    margin-bottom: 15px;
    word-break: break-all;
  }

  .staff-introduction p,
  .staff-introduction h1,
  .staff-introduction h2,
  .staff-introduction h3,
  .staff-introduction h4,
  .staff-introduction h5,
  .staff-introduction h6,
  .staff-introduction span {
    font-weight: normal;
  }

  /* SP: 本文のフォントサイズ調整 */
  .only-sp .staff-introduction p,
  .only-sp .staff-introduction h1,
  .only-sp .staff-introduction h2,
  .only-sp .staff-introduction h3,
  .only-sp .staff-introduction h4,
  .only-sp .staff-introduction h5,
  .only-sp .staff-introduction h6,
  .only-sp .staff-introduction span {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* PC: 本文のフォントサイズ調整 */
  .only-pc .staff-introduction p,
  .only-pc .staff-introduction h1,
  .only-pc .staff-introduction h2,
  .only-pc .staff-introduction h3,
  .only-pc .staff-introduction h4,
  .only-pc .staff-introduction h5,
  .only-pc .staff-introduction h6,
  .only-pc .staff-introduction span {
    font-size: 15px !important;
    line-height: 2 !important;
  }

  /* スタッフ写真 */
  .staff-image-wrap {
    flex-shrink: 0;
  }

  .staff-image {
    max-width: 100%;
    height: auto;
    object-fit: unset;
    margin: 0 auto;
  }

  @media (min-width: 768px) {
    .staff-image {
      width: 300px;
      height: 300px;
      object-fit: contain;
    }
  }

  /* 自由項目 */
  .staff-free-items-display {
    margin-top: var(--p-lg);
    gap: 0;
    display: grid;
    font-size: var(--text-sm);
  }

  @media (min-width: 768px) {
    .staff-free-items-display {
      gap: var(--p-sm) var(--p-lg);
      margin-top: 25px;
      grid-template-columns: auto 1fr;
    }
  }

  .staff-table-title {
    display: block;
    flex-shrink: 0;
    font-weight: 700;
  }
  @media (min-width: 768px) {
    .staff-table-title {
      max-width: 200px;
    }
  }

  .staff-table-text {
    width: 100%;
    display: block;
    padding-bottom: var(--p-sm);
  }
  .staff-table-text:last-child {
    padding-bottom: 0;
  }
  @media (min-width: 768px) {
    .staff-table-text {
      padding-bottom: 0;
    }
  }


  /* 相談リンク */
  .staff-form-link {
    color: #31739A;
    display: inline-block;
    font-size: 15px;
    margin-top: 20px;
    text-decoration: underline;
  }

  .staff-form-link:hover {
    text-decoration: none;
  }

  .only-sp .staff-form-link {
    padding-bottom: 20px;
  }

  /* PC/SP表示切替 */
  .page-staff .only-pc {
    display: none;
  }

  .page-staff .only-sp {
    display: block;
  }

  @media (min-width: 768px) {
    .page-staff .only-pc {
      display: block;
    }

    .page-staff .only-sp {
      display: none;
    }
  }

  /* 記事がない場合 */
  .page-staff .post-nothing {
    padding: 40px 0;
    font-size: 16px;
    text-align: center;
    line-height: 1.8;
  }

  @media (min-width: 768px) {
    .page-staff .post-nothing {
      padding: 113px 0;
      font-size: 20px;
    }
  }
}