@charset "UTF-8";
/* ============================================================
   assets/css/expert.css … 担当する専門家のプロフィール（全ページ共通のデザイン）
   ・表示の型は template-parts/people-introduction.php、人の情報は inc/people-info.php の al_people()
   ・使うページ：ご支援事例の個別ページ（works-case.php）・社労士事務所altruloop の下層ページ（al_expert()）
   ・functions.php で、使うページのときに「ページの CSS のあと」に読み込む（ページ側の p・a などの指定に負けないように）
   ・デザインを変えるときは、このファイルだけを直す
   ・2026年10月：ご支援事例の「担当専門家」のデザインに統一
   ============================================================ */

.exp{
  --exp-blue:#003885; --exp-ink:#0f1b2d; --exp-sub:#465264; --exp-line:#dbe2ea; --exp-ph:#e9ecf0;
  display:grid; grid-template-columns:240px minmax(0,1fr); gap:40px; align-items:start;
  margin:8px 0 32px; padding-top:28px; border-top:3px solid var(--exp-blue);
  color:var(--exp-ink); line-height:1.95; letter-spacing:.03em;
}
.exp + .exp{ margin-top:40px; }

/* 写真（ないときは淡い枠に「写真」） */
.exp .exp-ph{ position:relative; width:240px; aspect-ratio:397/534; background:var(--exp-ph); overflow:hidden; }
.exp .exp-ph img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.exp .exp-ph span{ position:absolute; left:14px; top:12px; font-size:12px; color:#8a93a1; line-height:1.5; }

/* 右側：肩書 → 名前 → 表 → メッセージ → リンク の順に縦に並べる */
.exp .exp-body{ display:flex; flex-direction:column; min-width:0; }
.exp p.exp-role{ margin:0; font-size:13px; font-weight:700; line-height:1.95; color:var(--exp-blue); }
.exp p.exp-nm{ margin:4px 0 18px; font-size:28px; font-weight:700; line-height:1.3; color:var(--exp-ink); }
.exp p.exp-nm span{ display:inline-block; margin-left:14px; font-size:13px; font-weight:500; color:var(--exp-sub); letter-spacing:.06em; white-space:nowrap; }
.exp .exp-ib{ display:inline-block; }

/* 資格・専門領域・支援業界などの表 */
.exp dl.exp-dl{ margin:0; border-top:1px solid var(--exp-ink); }
.exp dl.exp-dl > div{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; padding:11px 0; border-bottom:1px solid var(--exp-line); }
.exp dl.exp-dl dt{ font-size:13px; font-weight:700; line-height:1.95; color:var(--exp-blue); }
.exp dl.exp-dl dd{ margin:0; font-size:14.5px; line-height:1.7; color:var(--exp-ink); }
.exp ul.exp-ul{ list-style:none; margin:0; padding:0; }
.exp ul.exp-ul li{ position:relative; margin:0; padding:0 0 0 1em; line-height:1.85; }
.exp ul.exp-ul li::before{ content:"・"; position:absolute; left:0; top:0; width:auto; height:auto; background:none; }

/* ページごとのメッセージ（社労士事務所altruloop の下層ページ） */
.exp p.exp-say{ margin:18px 0 0; font-size:14.5px; line-height:1.9; color:var(--exp-ink); }

/* 「代表紹介を見る」などのリンク（右下。下線の右端に三角） */
.exp a.exp-link{
  align-self:flex-end; position:relative; display:inline-block; margin-top:18px; padding:0 30px 8px 2px;
  font-size:.95rem; font-weight:700; line-height:1.95; color:var(--exp-ink); text-decoration:none; background:none; transition:color .2s;
}
.exp a.exp-link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--exp-blue); }
.exp a.exp-link::before{ content:""; position:absolute; right:-1px; bottom:0; border-left:12px solid var(--exp-blue); border-top:8px solid transparent; }
.exp a.exp-link:hover{ color:var(--exp-blue); }

@media (max-width:760px){
  .exp dl.exp-dl > div{ grid-template-columns:76px minmax(0,1fr); gap:12px; }
  .exp p.exp-nm{ font-size:24px; }
  .exp p.exp-role{ font-size:12px; line-height:1.6; }
}
@media (max-width:700px){
  .exp{ grid-template-columns:1fr; gap:20px; }
  .exp .exp-ph{ width:160px; }
}