@charset "UTF-8";
/* ==========================================================
   04-clients — ロゴマーキー帯（clients--a / clients--b）
   参照: mf-sec-01 / mf-sec-04下部 / mf-sec-05上部
   ========================================================== */

.clients {
  padding: 48px 0;
}

/* 帯パネル: --bg-tint2 の角丸パネル。マーキーは左右端まで見切れる */
.clients__panel {
  background: var(--bg-tint2);
  border-radius: var(--radius);
  padding: 53px 0 40px; /* 参照実測: パネル上端→数字天地の上端=57px（mf-sec-01/04とも）。行ボックス上の余白≈4pxを差し引き53px。下はロゴ行下端→パネル下端=40px */
  overflow: hidden;
}

/* ---------- 見出し ---------- */
.clients__title {
  text-align: center;
  color: var(--asagi);
  font-size: 34px; /* 2026-09-16 FB「選ばれて〜も大きく」27→34 */
  font-weight: 700;
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: .04em;
  text-wrap: balance; /* SPで折り返す際のぶら下がり防止 */
  word-break: auto-phrase; /* 文節単位の改行（対応ブラウザのみ） */
  padding-inline: 24px;
}
.clients__num {
  font-family: var(--font-en);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0; /* 和文の字送りを欧文数字に波及させない */
  padding: 0 4px;
}
.clients__sub {
  text-align: center;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: .04em;
  text-wrap: balance;
  word-break: auto-phrase; /* 文節単位の改行（対応ブラウザのみ） */
  margin-top: 4px;
  padding-inline: 24px;
}

/* ---------- 行ラベル ＼ ◯◯ ／ ---------- */
.clients__row-label {
  text-align: center;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  margin: 16px 0; /* 参照実測: ロゴ行との間隔≈16px */
}
/* 見出し直下の1本目は参照通りタイトルに寄せる */
.clients__title + .clients__row-label,
.clients__sub + .clients__row-label {
  margin-top: 8px;
}

/* ---------- マーキー ---------- */
.clients__marquee {
  display: flex;
  overflow: hidden;
}
.clients__track {
  display: flex;
  flex: none;
  width: max-content;
  animation: clients-marquee 36s linear infinite;
  will-change: transform;
}
/* 2段目は右流れ */
.clients__marquee--rev .clients__track {
  animation-direction: reverse;
}
.clients__group {
  display: flex;
  flex: none;
  gap: 12px;
  padding-right: 12px; /* グループ継ぎ目の間隔をカード間隔と揃える */
}
.clients__logo {
  flex: 0 0 calc((100% - 4 * 20px) / 5); /* 5列（横5つは崩さない）。1440pxで約250px */
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  aspect-ratio: 752 / 320;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-sizing: border-box; /* 枠線を含めて幅計算（スマホ2列で折り返さないように） */
  overflow: hidden;
}
.clients__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0; /* ロゴ素材は752x320の白ブロック仕様（枠と同比率）なので余白なしでぴったり収める */
}

@keyframes clients-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; }
}

/* MTG決定: マーキー廃止 → 静的全載せグリッド */
.clients__static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
  padding: 0 40px;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .clients__panel { padding: 48px 0 36px; }
  .clients__title { font-size: 29px; }
  .clients__num { font-size: 50px; }
  .clients__sub { font-size: 20px; }
  .clients__logo { flex-basis: calc((100% - 2 * 16px) / 3); }
  .clients__static { gap: 16px; padding: 0 24px; }
  .clients__logo img { padding: 0; }
}

@media (max-width: 768px) {
  .clients { padding: 32px 0; }
  .clients__panel { padding: 40px 0 32px; }
  .clients__title { font-size: 23px; }
  .clients__num { font-size: 42px; }
  .clients__sub { font-size: 17px; margin-top: 6px; }
  .clients__row-label { font-size: 15px; margin: 12px 0; }
  .clients__group { gap: 10px; padding-right: 10px; }
  .clients__logo { width: 140px; height: 60px; }
  .clients__logo img { padding: 0; }
  .clients__track { animation-duration: 28s; }

  /* 静的グリッド: 2列（ロゴを大きく見せる）・初期12院のみ（.is-collapsed）。ボタンで全件 */
  .clients__static { gap: 10px; padding: 0 12px; margin-top: 20px; }
  .clients__static .clients__logo { flex: 0 0 calc((100% - 10px) / 2); width: auto; height: auto; aspect-ratio: 752 / 320; }
  .clients__static.is-collapsed .clients__logo:nth-child(n + 13) { display: none; }
  .clients__more { display: inline-flex; }
}

/* ---------- もっと見るボタン（スマホのみ表示。768px以下で inline-flex） ---------- */
.clients__more {
  display: inline-flex; /* 769px以上は下の media で非表示 */
  align-items: center;
  gap: 6px;
  margin: 16px auto 0;
  padding: 10px 18px;
  border: 2px solid var(--asagi);
  border-radius: 999px;
  background: var(--white);
  color: var(--asagi);
  font-size: 15px;
  font-weight: 700;
  font-feature-settings: "palt";
  cursor: pointer;
}
.clients__panel { text-align: center; } /* ボタンを中央に */
.clients__more-icon { transition: transform .25s; }
.clients__more[aria-expanded="true"] .clients__more-icon { transform: rotate(180deg); }
@media (min-width: 769px) {
  .clients__more { display: none; }
}

/* ---------- 注記（掲載許可をいただいた医院の一部） ---------- */
.clients__note {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray);
  font-feature-settings: "palt";
  padding-inline: 24px;
}
@media (max-width: 768px) {
  .clients__note { font-size: 12px; margin-top: 14px; }
}