/* 
company.phpの役職と名前を横並びにする
*/
div.company section.info .list_wrap dd .director {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 4em;
  row-gap: 0.4em;
}
div.company section.info .list_wrap dd .director .role,
div.company section.info .list_wrap dd .director .name {
  margin: 0;
}

/* スマホは縦積み。役職↔名前は詰めて、グループ間を空けて強弱をつける */
@media (max-width: 768px) {
  div.company section.info .list_wrap dd .director {
    grid-template-columns: 1fr;
    row-gap: 0; /* 役職↔名前の間隔（詰める） */
  }
  /* 名前の下に余白を足してグループ同士を離す（最後は不要） */
  div.company section.info .list_wrap dd .director .name {
    margin-bottom: 1em;
  }
  div.company section.info .list_wrap dd .director .name:last-child {
    margin-bottom: 0;
  }
}