.profile-card {
  display: flex; /* 要素を柔軟(横列、順序、パディング)に並び替えるため */
  flex-direction: column; /* 子要素を縦に並べる */

  width: 300px;
  border: 1px solid #bbb; /* 輪郭(太さ、線の種類、色) */
  border-radius: 16px; /* cardの角に接する円の、中心から縦横の高さ*/
  overflow: hidden; /* 角丸に合わせて中身を切り取る */
  margin: 16px;
}
.profile-card__header {
  display: flex; /* この要素もFlexコンテナにする */
  justify-content: center; /* 子要素（ロゴ）を「横方向の中央」に配置 */
  align-items: center; /* 子要素（ロゴ）を「縦方向の中央」に配置 */

  padding: 16px;
  background-color: #f0f0f0;
}

.profile-card__logo {
  width: 80px; /* 例：ロゴのサイズ */
  height: auto;
  border-radius: 1em;
}
.profile-card__body {
  padding: 20px;
}

/* テキスト要素（h3, p）のマージンを調整 */
.profile-card__name {
  margin-top: 0;
  margin-bottom: 8px;
}
.profile-card__job,
.profile-card__birthplace {
  margin: 4px 0;
  font-size: 14px;
  color: #555; /*若干薄く*/
}

.profile-card__sns-list {
  display: flex;
  flex-direction: row; /* 子要素（<li>）を「横」に並べる (デフォルトだが明記) */
  justify-content: center; /* アイコン群を中央に寄せる */

  gap: 16px; /* アイコン同士の隙間を空ける */

  list-style-type: none; /* 黒点が付くので無効化 */
  padding-left: 0; /*中央に寄せる*/
  margin-top: 20px;
  /*job
    birthplace
    + margin +
    sns-list 
    */
}

.profile-card__sns-item a {
  display: block;
  width: 40px;
  height: 40px;
}