/* ===== ABOUTセクション専用 上書き ===== */
section.about .about-btns{
  display: flex;
  flex-direction: column;   /* 縦積み */
  align-items: flex-end;    /* 右端を揃える */
  gap: 0;                   /* ← ここを0にして余計な間隔を消す */
}

/* 半分くらいの幅にする（PC） */
section.about .about-btns .gray-btn.gray-btn--short{
  width: 90%;
  max-width: 360px;
  min-width: 260px;
  background-color: #6a6a6a;
  border-color: #6a6a6a;
  margin-top: 20px;
}

/* ホバー時：白反転（詳細度を上げて確実に上書き） */
section.about .about-btns a.gray-btn.gray-btn--short:hover {
  background-color: #fff;
  color: #6a6a6a;
  border-color: #6a6a6a;
}

/* ① 直前の .btn と .about-btns（の文言）との間を離す */
.about-contents .btn + .about-btns {
  margin-top: 24px;     /* 好みで 20〜28px くらいに調整 */
}

/* ② 文言 ↔ 1つ目の短ボタンは詰める */
section.about .about-btns .contents-text {
  margin: 0 0 8px;      /* 文言の下だけ 8px（好みで 6〜10px） */
}

/* 文言の直後に来る“最初の”短ボタンは上マージンを相殺（=さらに詰める） */
section.about .about-btns .contents-text + .gray-btn.gray-btn--short {
  margin-top: 0;
}

/* 2つ目以降の短ボタンは、少しだけ間隔を開ける */
section.about .about-btns .gray-btn.gray-btn--short + .gray-btn.gray-btn--short {
  margin-top: 12px;     /* 好みで 10〜14px */
}

/* モバイル/タブレット（～950px） */
@media (max-width: 950px) {
  /* 通常フロー & 余計な余白を無効化 */
  section.about .about-btns{
    display: block;
    margin: 0;
    padding: 0;
  }

  /* ボタンの幅・位置はbtnと同じ／上下マージンを厳密管理 */
  section.about .about-btns .gray-btn.gray-btn--short{
    width: 80%;
    max-width: 280px;
    min-width: 0;
    margin: 19px auto 0;   /* 上20px、左右中央、下は指定しない */
    margin-bottom: 0;      /* ← 万一の下マージンを打ち消し */
  }

  .about-contents .btn + .about-btns {
    margin-top: 22px;   /* 他の3つと並べた時に馴染む値に微調整 */
  }
  section.about .about-btns .contents-text {
    margin: 0 0 10px;   /* 文字が折返る分、少しだけ広めでもOK */
  }
  section.about .about-btns .contents-text + .gray-btn.gray-btn--short {
    margin-top: 0;
  }
  section.about .about-btns .gray-btn.gray-btn--short + .gray-btn.gray-btn--short {
    margin-top: 12px;
  }
}