/* Original artwork files are unchanged. All banners display at 200 x 40px. */
.support-banners {
  padding-block: clamp(56px, 7vw, 96px);
  background: #fff;
  scroll-margin-top: 24px;
}
.support-banners > .wrap { max-width: 1040px; }
.support-heading {
  position: relative;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.support-heading::after {
  content: "";
  position: absolute;
  inset: auto auto -1px 0;
  width: 144px;
  height: 3px;
  background: var(--season-spectrum);
}
.support-heading h2 {
  font: 500 clamp(25px, 3vw, 36px)/1.6 var(--mincho);
  letter-spacing: .035em;
}
.support-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 40px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.support-banner-grid > li { min-width: 0; }
.support-banner {
  display: block;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
}
.support-banner-image {
  display: block;
  width: 202px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  background: #fafbfc;
  transition: border-color .65s ease, background-color .65s ease;
}
.support-banner-image img {
  display: block;
  width: 200px;
  height: 40px;
  object-fit: fill;
}
.support-banner-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.support-banner-name {
  min-width: 0;
  font: 700 18px/1.7 var(--gothic);
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.support-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font: 500 14px/1.7 var(--gothic);
  color: #505d6c;
  white-space: nowrap;
}
.support-banner-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #aeb6bf;
  border-radius: 50%;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  transition: transform .65s ease;
}
.support-banner:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
}
.support-banner:focus-visible .support-banner-image {
  border-color: var(--focus);
}
.support-banner:focus-visible .support-banner-name { text-decoration-line: underline; }
@media (hover: hover) {
  .support-banner:hover .support-banner-image { border-color: #7f8b9c; background: #f1f5f8; }
  .support-banner:hover .support-banner-name { text-decoration-line: underline; }
  .support-banner:hover .support-banner-arrow { transform: translate(2px, -2px); }
}
@media (max-width: 700px) {
  .support-banner-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .support-banners > .wrap { max-width: 488px; }
  .support-heading { padding-bottom: 18px; margin-bottom: 28px; }
  .support-heading h2 { font-size: clamp(24px, 5.5vw, 30px); }
  .support-banner-caption { gap: 8px 12px; padding-block: 14px; }
  .support-banner-name { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .support-banner-image, .support-banner-arrow { transition: none; }
  .support-banner:hover .support-banner-arrow { transform: none; }
}
@media print {
  .support-banners { padding-block: 28px; }
  .support-banner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-banner-grid > li { break-inside: avoid; }
}