/* about-renewal-min.css の後に読み込む。長さ調整は main の修飾クラス内のみ。 */
.about-page-menu { padding: 24px 0; background: #fff; border-bottom: 1px solid #dbe5de; }
.about-page-menu__label { margin: 0 0 12px; color: #53655d; font-size: 14px; }
.about-page-menu ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.about-page-menu li { min-width: 0; }
.about-page-menu a {display: flex;align-items: center;justify-content: space-between;gap: 8px;height: 100%;min-height: 48px;padding: 12px;box-sizing: border-box;border: 1px solid #dbe5de;border-radius: 8px;color: #163b2c;/* background: #f5f7f4; */font-size: 14px;font-weight: 700;line-height: 1.5;text-decoration: none;}
.about-page-menu a:hover { background: #eaf1ec; }
.about-page-menu a:focus-visible { outline: 3px solid #b38c35; outline-offset: 3px; }

.about-membership-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.about-membership-benefit { min-width: 0; padding: 26px; border: 1px solid #dbe5de; border-radius: 16px; background: #fff; }
.about-membership-benefit .about-membership-benefit__label { margin: 0 0 12px; color: #53655d; font-size: 14px; font-weight: 700; }
.about-membership-benefit h3 { margin: 0; color: #163b2c; font-size: 21px; line-height: 1.6; }
.about-membership-benefit__amount { display: block; margin: 6px 0; color: #8a394b; font-size: clamp(32px, 3vw, 42px); font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.about-membership-benefit__amount > span { margin-left: 4px; font-size: 18px; }
.about-membership-benefit > p:last-child { margin: 14px 0 0; color: #53655d; font-size: 16px; line-height: 1.8; }
.about-membership-benefits__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }
.about-membership-benefits__footer > div { flex: 1 1 480px; min-width: 0; }
.about-membership-benefits__fee { margin: 0; color: #163b2c; font-weight: 700; font-size: 16px; line-height: 1.7; }
.about-membership-benefits__note { margin: 10px 0 0; color: #53655d; font-size: 14px; line-height: 1.75; }
.about-membership-benefits__footer .about-button { white-space: normal; text-align: center; }

@media screen and (max-width: 900px) {
  .about-page-menu ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-membership-benefits__grid { gap: 12px; }
  .about-membership-benefit { padding: 20px 16px; }
  .about-membership-benefit h3 { font-size: 18px; }
}

@media screen and (max-width: 600px) {
  .about-page-menu { padding: 20px 0; }
  .about-page-menu ul {grid-template-columns: 1fr;}
  .about-page-menu li:last-child { grid-column: 1 / -1; }
  .about-page--brushup .about-section { padding-block: 44px; }
  .about-page--brushup .about-section__heading { margin-bottom: 24px; }
  .about-membership-benefits__grid { grid-template-columns: minmax(0, 1fr); }
  .about-membership-benefit { padding: 20px; }
  .about-membership-benefit h3 { font-size: 20px; }
  .about-membership-benefit__amount { font-size: 36px; }
  .about-membership-benefits__footer { gap: 18px; margin-top: 20px; }
  .about-membership-benefits__footer .about-button { width: 100%; }

  /* 6つの理由：画像は残し、横型へ。文字を小さくして詰めない。 */
  .about-page--brushup .about-reason { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px 14px; padding: 18px; }
  .about-page--brushup .about-reason__num { grid-column: 1; grid-row: 1; margin: 0; font-size: 24px; }
  .about-page--brushup .about-reason__media { grid-column: 1; grid-row: 2 / span 2; margin: 0; align-self: start; }
  .about-page--brushup .about-reason__media img { aspect-ratio: 1; object-fit: contain; }
  .about-page--brushup .about-reason h3 { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-size: 18px; }
  .about-page--brushup .about-reason p { grid-column: 2; grid-row: 3; margin: 0; font-size: 16px; line-height: 1.75; }
  .about-page--brushup .about-reason .text-phrase { display: inline; white-space: normal; }

  /* 下部のジャンプカード：高さを画像に引っ張られない横型。 */
  .about-page--brushup .about-related-card {grid-template-columns: 1fr;align-items: start;padding: 14px;gap: 14px;}
  .about-page--brushup .about-related-card__visual {width: 100%;height: 88px;min-height: 0;aspect-ratio: 1;border-radius: 8px;}
  .about-page--brushup .about-related-card__body { padding: 0; }
  .about-page--brushup .about-related-card__title { font-size: 17px; }
  .about-page--brushup .about-related-card__text { line-height: 1.7; }
  .about-page--brushup .about-related-card__more { padding-top: 8px; }
  .about-page--brushup .about-related-card .text-phrase { display: inline; white-space: normal; }
}