/* ================================
  共通：見出し中央寄せ
================================ */

/* PCでも中央寄せ */
#top-commit .top-commit__head {
  text-align: center;
}

/* スマホ時：top-commit / top-message 見出し中央寄せ */
@media (max-width: 768px) {
  #top-commit .tw\:\*\:leading-normal.tw\:mb-\[60px\],
  #top-message .tw\:\*\:leading-normal.tw\:mb-\[60px\] {
    text-align: center !important;
  }

  #top-commit .tw\:\*\:leading-normal.tw\:mb-\[60px\] > div,
  #top-commit .tw\:\*\:leading-normal.tw\:mb-\[60px\] > h2,
  #top-message .tw\:\*\:leading-normal.tw\:mb-\[60px\] > div,
  #top-message .tw\:\*\:leading-normal.tw\:mb-\[60px\] > h2 {
    text-align: center !important;
  }
}


/* ================================
  commit画像トリミング
================================ */

.commit-crop {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.commit-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top; /* 下をトリミング */
}

/* PC時は少し小さく */
@media (min-width: 769px) {
  #top-commit .commit-crop {
    max-width: 460px;
  }
}


/* ================================
  top-commit 並び制御
================================ */

/* PC：横並び（画像｜文章） */
@media (min-width: 769px) {
  #top-commit .top-commit__row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 60px;
  }

  /* PCでは文章の上余白をリセット */
  #top-commit .top-commit__text {
    padding-top: 0 !important;
  }
}

/* スマホ：縦並び（画像 → 文章） */
@media (max-width: 768px) {
  #top-commit .top-commit__row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px;
  }

  #top-commit .top-commit__image {
    order: 1 !important;
  }

  #top-commit .top-commit__text {
    order: 2 !important;
  }
}


@media (max-width: 768px) {
  /* top-message を縦積みにして order を効かせる */
  #top-message .top-message__row {
    display: flex !important;
    flex-direction: column !important;
  }

  /* タイトルは row の外なのでそのまま先頭（=変更不要） */

  /* 2番目：画像＋氏名＋経歴 */
  #top-message .top-message__profile {
    order: 1 !important;
  }

  /* 3番目：文章 */
  #top-message .top-message__text {
    order: 2 !important;
  }
}


/* 経歴ブロックのカード化 */
#top-message .top-message__career > div {
  background: #e5e7eb;       /* 濃いめのグレー（調整可） */
  border-radius: 16px;
  padding: 18px;
  margin-top: 20px;
  margin-bottom: 30px;
}


.circle-crop {
  aspect-ratio: 1 / 1;      /* 正方形にする */
  border-radius: 50%;       /* 円形 */
  overflow: hidden;         /* はみ出た部分を切る */
}

.circle-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 枠いっぱいに */
  object-position: center; /* 中央基準でトリミング */
}