@charset "UTF-8";
/* ─────────────────────────────────────────────
 * 手術実績（トップページの表示と /results/）
 *   functions/results/results.php が、トップページと
 *   テンプレート「手術実績」のページでだけ読み込む。
 *   色はテーマの変数（style.css の :root）を使う。
 * ───────────────────────────────────────────── */

/* ── トップページ（メインビジュアルの下） ── */
.index .section-results {
  background-color: var(--clBGP);
  /* テーマの section 共通の上下マージン（60〜120px）を消して、メインビジュアルの直下に付ける */
  margin-top: 0;
  margin-bottom: 0;
  padding-block: clamp(28px, 20.7272727273px + 1.9393939394vw, 44px);
}
.index .section-results .results-top {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  color: var(--clPD);
}
.index .section-results .results-top__title {
  font-size: clamp(22px, 19.2727272727px + 0.7272727273vw, 28px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin: 0;
}
.index .section-results .results-top__note {
  font-size: 12px;
  color: var(--clText);
  line-height: 1.6;
  margin: 4px 0 0;
}
.index .section-results .results-top__figure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: clamp(12px, 9.2727272727px + 0.7272727273vw, 20px);
  margin: clamp(8px, 6.1818181818px + 0.4848484848vw, 12px) 0 0;
  color: var(--clP);
  line-height: 1.2;
}
.index .section-results .results-top__period {
  font-size: clamp(22px, 19.2727272727px + 0.7272727273vw, 28px);
  font-weight: 700;
}
.index .section-results .results-top__count {
  font-size: clamp(22px, 19.2727272727px + 0.7272727273vw, 28px);
  font-weight: 700;
}
.index .section-results .results-top__num {
  font-size: clamp(56px, 48.7272727273px + 1.9393939394vw, 72px);
  font-weight: 700;
  line-height: 1;
  margin-right: 4px;
  letter-spacing: 0.02em;
}
.index .section-results .results-top__link {
  margin: clamp(12px, 9.2727272727px + 0.7272727273vw, 20px) 0 0;
}
/* 押しやすさ：高さ44px以上（WCAG 2.1 の 2.5.5 Target Size の目安）。
   テーマ共通の .btn は34pxなので、この帯のボタンだけ広げる */
.index .section-results .results-top__link .btn {
  min-height: 44px;
  padding-inline: 24px;
}
.index .section-results .results-top__link .btn:focus-visible {
  outline: 3px solid var(--clPD);
  outline-offset: 2px;
}

/* ── /results/（テンプレート「手術実績」） ── */
.entry-content .results-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-block: 24px;
}
.entry-content .results-card {
  background-color: var(--clBGP);
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
  color: var(--clPD);
}
.entry-content .results-card p {
  margin: 0;
}
.entry-content .results-card__label {
  font-weight: 700;
}
.entry-content .results-card__count {
  color: var(--clP);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  margin-top: 8px !important;
}
.entry-content .results-card__num {
  font-size: 48px;
  line-height: 1;
  margin-right: 4px;
}
.entry-content .results-card__period {
  font-size: 13px;
  margin-top: 4px !important;
}
.entry-content .results-note {
  font-size: 13px;
}

/* 月別の表：固定ページの表はスマホで縦に積まれる設定（entry-content.css）なので、
   この表だけ横並び（月｜件数）のままにする */
.entry-content.entry-content-page .wp-block-table.results-table table {
  table-layout: fixed;
}
.entry-content.entry-content-page .wp-block-table.results-table td {
  text-align: center;
}
@media screen and (max-width:639px) {
  .entry-content.entry-content-page .wp-block-table.results-table th,
  .entry-content.entry-content-page .wp-block-table.results-table td {
    display: table-cell;
    width: auto;
  }
}