@charset "UTF-8";
/* =========================================================
   ACA - あいちクリエーターズアソシエーション
   Design tokens are derived from the Figma file "ACA".
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* color */
  --red: #c30d23;
  --black: #000000;
  --white: #ffffff;
  --gray-bg: #eeeeee;
  --gray-line: #d9d9d9;
  --gray-placeholder: #a3a3a3;
  --gray-date: #7f7f7f;
  --yellow: #fff200;

  /* type */
  --font-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-gothic: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Yu Gothic",
    "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-antique: "Zen Kaku Gothic Antique", var(--font-gothic);
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-label: "Cormorant Garamond", "Times New Roman", serif;
  --font-num: "Chonburi", var(--font-display);

  /* layout */
  --container: 1140px;
  --header-w: 1200px;
  --gutter: 24px;
  --section-pad: 120px;
  --radius-pill: 50px;
  --radius-card: 10px;
  --shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 767px) {
  :root {
    /* Comp: 320px content column on a 400px artboard = 40px side margins. */
    --gutter: 40px;
    --section-pad: 80px;
  }
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-gothic);
  font-weight: 500;
  color: var(--black);
  background: var(--white);
  line-height: 1.67;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
input, textarea, select { font: inherit; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Screen-reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Shared layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); position: relative; }
.section--gray { background: var(--gray-bg); }

/* Grain overlay reproducing the NOISE effect used across the Figma file */
.section--gray::before,
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.section--gray > *,
.grain > * { position: relative; z-index: 1; }

/* Section heading: small Japanese label above a large serif English title */
.section-head { text-align: center; }
.section-head .ja {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0.08em;
}
.section-head .en {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 100px;
  line-height: 1;
  color: var(--red);
}
.section-head--light .ja,
.section-head--light .en { color: var(--white); }

.section-body { margin-top: 40px; }

.lead {
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}

@media (max-width: 767px) {
  .section-head .ja { font-size: 15px; line-height: 1; }
  .section-head .en { font-size: 50px; line-height: 0.8; margin-top: 16px; }
  .section-body { margin-top: 32px; }
  .lead { font-size: 14px; line-height: 25px; }
}

/* ---------- 4. Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 280px;
  min-height: 58px;
  padding: 16px 40px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn svg { flex: none; transition: transform 0.3s var(--ease); }

.btn--solid { background: var(--red); color: var(--white); }
.btn--solid:hover { background: #a30a1d; }

.btn--outline { border: 1px solid var(--white); color: var(--white); }
.btn--outline:hover { background: var(--white); color: var(--red); }
.btn--outline:hover svg { stroke: var(--red); }

.btn--white { background: var(--white); color: var(--red); }
.btn--white:hover { background: rgba(255, 255, 255, 0.85); }

.btn:hover svg { transform: translateX(4px); }

.btn-center { display: flex; justify-content: center; }

@media (max-width: 767px) {
  .btn { width: 272px; font-size: 18px; padding: 16px 32px; }
}

/* ---------- 5. Header ---------- */
.header {
  position: fixed;
  z-index: 100;
  top: 20px;
  left: 50%;
  width: min(var(--header-w), calc(100% - 40px));
  transform: translate(-50%, calc(-100% - 40px));
  display: flex;
  align-items: center;
  height: 80px;
  padding-inline: 46px;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
  opacity: 0;
}
.header.is-visible { transform: translate(-50%, 0); opacity: 1; }

.header__logo { width: 101px; flex: none; }
.header__logo img { width: 100%; }

.header__nav { margin-left: auto; }
.header__nav ul { display: flex; align-items: center; gap: 30px; }
.header__nav a {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  transition: color 0.25s var(--ease);
}
.header__nav a:hover { color: var(--red); }

.header__cta {
  margin-left: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 16px 40px;
  background: var(--red);
  color: var(--white);
  border-radius: 5px;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  transition: background-color 0.25s var(--ease);
}
.header__cta:hover { background: #a30a1d; }

.header__burger { display: none; }

@media (max-width: 767px) {
  .header {
    top: 10px;
    width: calc(100% - 40px);
    height: 50px;
    padding-inline: 20px;
    border-radius: 5px;
  }
  .header__logo { width: 57px; }
  .header__nav, .header__cta { display: none; }
  .header__burger {
    display: block;
    margin-left: auto;
    width: 40px;
    height: 12px;
    position: relative;
  }
  .header__burger span {
    position: absolute;
    left: 0;
    width: 40px;
    height: 1px;
    background: var(--red);
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  }
  .header__burger span:nth-child(1) { top: 0; }
  .header__burger span:nth-child(2) { top: 6px; }
  .header__burger span:nth-child(3) { top: 12px; }
  .header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 80px var(--gutter) 40px;
  background: var(--red);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer ul { display: grid; gap: 24px; text-align: center; }
.drawer a {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 20px;
}
.drawer__actions { display: grid; gap: 16px; justify-items: center; }
@media (min-width: 768px) { .drawer { display: none; } }

/* ---------- 6. First view ---------- */
.fv { position: relative; width: 100%; aspect-ratio: 1440 / 810; overflow: hidden; }
.fv__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv__layer--object { animation: fv-object 1.6s var(--ease) both; }
.fv__layer--text { animation: fv-text 1.4s 0.5s var(--ease) both; }

.fv__logo {
  position: absolute;
  top: 2.6%;
  left: 5.2%;
  width: 10.4%;
  z-index: 2;
}

@keyframes fv-object {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fv-text {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  .fv { aspect-ratio: 400 / 670; }
  .fv__logo { top: 4.5%; left: 10%; width: 22.5%; }
}

/* ---------- 7. NEWS ---------- */
.news__banner {
  display: block;
  width: min(1000px, 100%);
  margin-inline: auto;
  border-radius: 2px;
  overflow: hidden;
  transition: opacity 0.3s var(--ease);
}
.news__banner:hover { opacity: 0.88; }
.news__banner img { width: 100%; }
.news__foot { margin-top: 64px; }

@media (max-width: 767px) {
  .news__foot { margin-top: 40px; }
}

/* ---------- 8. ARCHIVE ---------- */
.archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.archive__item {
  aspect-ratio: 370 / 246;
  overflow: hidden;
  background: var(--gray-line);
}
.archive__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.archive__item:hover img { transform: scale(1.05); }
.archive__foot { margin-top: 64px; }

@media (max-width: 767px) {
  .archive__grid { grid-template-columns: 1fr; gap: 12px; }
  .archive__foot { margin-top: 40px; }
}

/* ---------- 9. WHAT'S ACA (concept) ---------- */
.concept {
  position: relative;
  color: var(--white);
  background: var(--red) url("../images/concept-bg.webp") center / cover no-repeat;
  text-align: center;
}
.concept__text {
  margin-top: 64px;
  font-size: 18px;
  line-height: 30px;
}
.concept__logo {
  width: min(400px, 70%);
  margin: 64px auto 0;
}
.concept__foot { margin-top: 64px; }

@media (max-width: 767px) {
  .concept { background-image: url("../images/concept-bg-sp.webp"); }
  .concept__text { margin-top: 40px; font-size: 14px; line-height: 25px; }
  .concept__logo { width: min(250px, 62%); margin-top: 40px; }
  .concept__foot { margin-top: 40px; }
}

/* ---------- 10. MEMBER ---------- */
.member__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 35px;
}
.member__card { text-align: center; }
.member__photo {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--gray-line);
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.member__card:hover .member__photo img { transform: scale(1.06); }
.member__role {
  margin-top: 16px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--red);
}
/* The PC comp shows five members with the role only; names appear on SP. */
.member__name { display: none; }
.member__item--sp-only { display: none; }
.member__foot { margin-top: 64px; }

@media (max-width: 767px) {
  .member__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .member__card { text-align: left; }
  .member__role {
    margin-top: 8px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
  }
  .member__name {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mincho);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
  }
  .member__item--sp-only { display: block; }
  .member__foot { margin-top: 40px; display: flex; justify-content: center; }
}

/* ---------- 11. WHAT WE DO ---------- */
.whatwedo { position: relative; overflow: hidden; }
.whatwedo__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 431px;
  max-width: 30%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  z-index: 0;
}
.whatwedo .container { position: relative; z-index: 1; }

.whatwedo__cols {
  display: grid;
  grid-template-columns: 668fr 385fr;
  gap: 87px;
  align-items: start;
  margin-top: 40px;
}
.whatwedo__figure { position: relative; }
.whatwedo__figure img { width: 100%; aspect-ratio: 668 / 335; object-fit: cover; }
.whatwedo__text { font-size: 18px; line-height: 30px; }
.whatwedo__foot { margin-top: 40px; }

@media (max-width: 767px) {
  /* On SP the red panel is anchored to the photo (comp: 76px above it, 36px below),
     so it never runs behind the heading or the body copy. */
  .whatwedo__panel { display: none; }
  /* Comp offsets: heading -> 40 -> panel top -> 76 -> photo top, panel ends 36 below the photo. */
  .whatwedo__cols { grid-template-columns: 1fr; gap: 40px; margin-top: 116px; }
  .whatwedo__figure {
    margin-left: 34px;
    margin-right: calc(var(--gutter) * -1);
    isolation: isolate;
  }
  .whatwedo__figure::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(-34px - var(--gutter));
    top: -76px;
    width: 200px;
    height: calc(100% + 112px);
    background: url("../images/whatwedo-panel.webp") left top / cover no-repeat;
  }
  .whatwedo__figure img { aspect-ratio: 358 / 238; }
  .whatwedo__text { font-size: 14px; line-height: 25px; }
  .whatwedo__foot { display: flex; justify-content: center; }
}

/* ---------- 12. Entry cards ---------- */
.cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
}
.cards__item {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  color: var(--white);
}
.cards__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.cards__item:hover img { transform: scale(1.06); }
.cards__item span {
  position: relative;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 32px;
  line-height: 46px;
}

@media (max-width: 767px) {
  .cards__grid { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .cards__item { width: 200px; }
  .cards__item span { font-size: 22px; line-height: 33px; }
}

/* ---------- 13. Footer ----------
   Comp (1440x450): left column at x=120, right column 320px wide ending at x=1280,
   so the inner box is 120px in from the left and 160px from the right. */
.footer {
  position: relative;
  color: var(--white);
  background: var(--red) url("../images/footer-bg.webp") center / cover no-repeat;
  padding-block: 56px 31px;
}
.footer__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 120px 160px;
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas:
    "brand right"
    "info  right";
  align-content: start;
}

.footer__brand { grid-area: brand; }
.footer__logo { width: 200px; }

.footer__info { grid-area: info; }
.footer__address {
  margin-top: 32px;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 15px;
  line-height: 30px;
}
.footer__address a:hover { text-decoration: underline; }

.footer__sns { display: flex; gap: 24px; margin-top: 32px; }
.footer__sns a { display: block; transition: opacity 0.25s var(--ease); }
.footer__sns a:hover { opacity: 0.7; }
.footer__sns svg { width: 30px; height: 30px; fill: var(--white); }

.footer__copy { margin-top: 32px; font-size: 12px; line-height: 1; }

/* Right column sits 37px below the top of the logo in the comp (y=93 vs y=56). */
.footer__right { grid-area: right; margin-top: 37px; }
/* The comp sets the small privacy link on the same baseline as the 18px link
   beside it (y=196.7 in both), so align the rows by baseline rather than by box. */
.footer__nav {
  display: grid;
  grid-template-columns: 200px 120px;
  row-gap: 16px;
  align-content: start;
  align-items: baseline;
}
.footer__nav a {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  transition: opacity 0.25s var(--ease);
}
.footer__nav a:hover { opacity: 0.75; }
.footer__nav a.is-small {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
}
.footer__actions { display: grid; gap: 16px; margin-top: 40px; }
.footer__actions .btn { font-size: 18px; }

/* Between the comp width and the SP breakpoint the comp's 120/160 gutters are too
   wide for the fixed 320px right column. */
@media (max-width: 1200px) {
  .footer__inner { padding-inline: 40px; }
}

@media (max-width: 767px) {
  /* Comp (400x734): logo 40, nav 151, buttons 283, address 471, SNS 615, copyright 703. */
  .footer {
    background-image: url("../images/footer-bg-sp.webp");
    padding-block: 40px 16px;
  }
  .footer__inner {
    grid-template-columns: 272px;
    grid-template-areas:
      "brand"
      "right"
      "info";
    justify-content: center;
    padding-inline: 0;
  }
  .footer__brand { justify-self: center; }
  .footer__logo { width: 141px; }

  .footer__right { margin-top: 37px; }
  .footer__nav { grid-template-columns: 172px 100px; }
  .footer__nav a { font-size: 14px; line-height: 20px; }
  .footer__nav a.is-small { font-family: var(--font-antique); font-size: 10px; line-height: 15px; }
  .footer__actions { margin-top: 40px; }

  .footer__info { margin-top: 56px; }
  .footer__address { margin-top: 0; font-size: 14px; line-height: 30px; }
  .footer__sns { margin-top: 24px; gap: 24px; }
  .footer__sns svg { width: 40px; height: 40px; }
  .footer__copy {
    margin-top: 48px;
    font-family: var(--font-antique);
    font-size: 10px;
    line-height: 15px;
  }
}

/* ---------- 14. Scroll reveal ----------
   Scoped to .js so the content stays visible when JavaScript is unavailable. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   Lower pages
   ========================================================= */

/* ---------- 15. Page title ---------- */
.pagetitle {
  display: grid;
  align-content: start;
  justify-items: center;
  height: 400px;
  padding-top: 200px;
  background: var(--red) url("../images/pagetitle.webp") center / cover no-repeat;
  color: var(--white);
  text-align: center;
}
.pagetitle .ja {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0.08em;
}
.pagetitle .en {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
}

@media (max-width: 767px) {
  .pagetitle {
    height: 230px;
    padding-top: 99px;
    background-image: url("../images/pagetitle-sp.webp");
  }
  .pagetitle .ja { font-size: 16px; line-height: 23px; }
  .pagetitle .en { margin-top: 4px; font-size: 35px; line-height: 1.14; }
}

/* Lower pages show the header immediately, so keep the content clear of it. */
.page main { padding-top: 0; }

/* ---------- 16. News list ---------- */
.newslist { position: relative; padding-block: 120px 0; }
/* Grey panel bleeding to the viewport's left edge, ending 350px into the container. */
.newslist::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(100% - 350px);
  top: 0;
  bottom: 0;
  background: var(--gray-bg);
}
.newslist .container { position: relative; }

.newslist__cols {
  display: grid;
  grid-template-columns: 430px 710px;
  align-items: start;
}

.newslist__cattitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--red);
}
.newslist__cats { display: grid; gap: 16px; margin-top: 32px; }
.newslist__cats a {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  transition: color 0.25s var(--ease);
}
.newslist__cats a::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  transition: width 0.25s var(--ease);
}
.newslist__cats a:hover { color: var(--red); }
.newslist__cats a:hover::before { width: 42px; }
.newslist__cats [aria-current="page"] { color: var(--red); }

.newslist__items { display: grid; }
.newslist__item {
  position: relative;
  display: grid;
  grid-template-columns: 280px 398px;
  gap: 32px;
  align-items: start;
  padding-block: 24px;
}
.newslist__item:first-child { padding-top: 0; }
/* The rule sits on the 24/24 boundary without taking part in the layout,
   so the 208px stride between articles stays exact. */
.newslist__item + .newslist__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--gray-placeholder);
}

.newslist__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 280 / 160;
  overflow: hidden;
  background: var(--gray-line);
}
.newslist__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.newslist__item:hover .newslist__thumb img { transform: scale(1.05); }
/* Placeholder card used when an article has no image of its own. */
.newslist__thumb--fallback { background: url("../images/pagetitle-sp.webp") center / cover no-repeat; }
.newslist__thumb--fallback img { width: 160px; height: auto; object-fit: contain; }

.newslist__empty { font-size: 18px; line-height: 30px; color: var(--gray-date); }
.newslist__meta { display: flex; align-items: center; gap: 16px; }
.newslist__date {
  font-size: 18px;
  line-height: 30px;
  color: var(--gray-date);
}
.newslist__tag {
  padding: 4px 32px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  line-height: 1;
}
.newslist__title {
  margin-top: 16px;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  color: var(--red);
}

.pager {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  padding-block: 80px 120px;
}
.pager a, .pager span {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  transition: color 0.25s var(--ease);
}
.pager a:hover { color: var(--red); }
.pager [aria-current="page"] { color: var(--red); }

@media (max-width: 767px) {
  .newslist { padding-top: 0; }
  .newslist::before { right: 0; bottom: auto; height: 257px; }
  .newslist__cols { grid-template-columns: 1fr; }
  .newslist__side { padding-block: 40px; }
  .newslist__cattitle { font-size: 40px; line-height: 1.5; }
  .newslist__cats { margin-top: 16px; }
  .newslist__cats a { font-size: 16px; line-height: 23px; }
  .newslist__cats a::before { width: 20px; }
  .newslist__cats a:hover::before { width: 30px; }
  .newslist__items { margin-top: 45px; }
  .newslist__item { grid-template-columns: 1fr; gap: 8px; }
  .newslist__thumb { aspect-ratio: 320 / 160; }
  .newslist__meta { gap: 16px; }
  .newslist__date { font-size: 14px; line-height: 25px; }
  .newslist__title { margin-top: 8px; font-size: 16px; line-height: 23px; }
  .pager { justify-content: center; padding-block: 48px 80px; }
}

/* ---------- 17. Narrow column (article / prose / form) ---------- */
.container--narrow {
  max-width: calc(800px + var(--gutter) * 2);
}

/* ---------- 18. News detail ---------- */
.article { padding-block: 120px; }
.article__date {
  font-size: 18px;
  line-height: 30px;
  color: var(--gray-date);
}
.article__title {
  margin-top: 8px;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 35px;
  line-height: 51px;
}
.article__figure { margin-top: 64px; }
.article__figure img {
  width: 100%;
  aspect-ratio: 800 / 290;
  object-fit: cover;
  background: var(--gray-line);
}
.article__body {
  margin-top: 64px;
  font-size: 18px;
  line-height: 30px;
}
.article__body > * + * { margin-top: 30px; }
.article__foot { margin-top: 80px; display: flex; justify-content: center; }

.btn--outline-red { border: 1px solid var(--red); color: var(--red); font-size: 18px; }
.btn--outline-red:hover { background: var(--red); color: var(--white); }

@media (max-width: 767px) {
  .article { padding-block: 80px; }
  .article__date { font-size: 14px; line-height: 25px; }
  .article__title { font-size: 20px; line-height: 1.4; }
  .article__figure { margin-top: 40px; }
  .article__body { margin-top: 40px; font-size: 14px; line-height: 25px; }
  .article__foot { margin-top: 56px; }
}

/* ---------- 19. Prose (privacy policy etc.) ---------- */
.prose { padding-block: 120px; }
.prose__lead { display: grid; gap: 32px; }
.prose__lead h1 {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.36;
  text-align: center;
}
.prose__lead p { font-size: 18px; line-height: 30px; }

.prose__sections { display: grid; gap: 80px; margin-top: 120px; }
.prose__sections section { display: block; }
.prose__sections h2 {
  margin-bottom: 24px;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
}
.prose__sections p, .prose__sections li { font-size: 18px; line-height: 30px; }
.prose__sections a { color: var(--red); text-decoration: underline; }

@media (max-width: 767px) {
  .prose { padding-block: 80px; }
  .prose__lead { gap: 24px; }
  .prose__lead h1 { font-size: 18px; }
  .prose__lead p,
  .prose__sections p,
  .prose__sections li { font-size: 14px; line-height: 25px; }
  .prose__sections { gap: 56px; margin-top: 80px; }
  .prose__sections h2 { margin-bottom: 16px; }
  .prose__sections h2 { font-size: 16px; line-height: 23px; }
}

/* ---------- 20. Forms ---------- */
.formpage { background: var(--gray-bg); padding-block: 120px; }

.blockhead { text-align: center; }
.blockhead h1,
.blockhead h2 {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 35px;
  line-height: 51px;
}
.blockhead::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  margin: 16px auto -1px;
  background: var(--rule, var(--red));
}
.blockhead--dark { --rule: var(--black); }
.blockhead--light { --rule: var(--white); }
.formlead {
  margin-top: 56px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}

.form { display: grid; gap: 40px; margin-top: 56px; }
.field { display: grid; gap: 8px; }
.field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  line-height: 30px;
}
.field__req { font-size: 12px; line-height: 1; color: var(--black); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--gray-line);
  border-radius: 4px;
  background: var(--white);
  font-family: inherit;
  font-size: 18px;
  line-height: 30px;
  color: var(--black);
  transition: border-color 0.25s var(--ease);
}
.field input { height: 50px; }
.field textarea { height: 200px; resize: vertical; }
.field ::placeholder { color: var(--gray-placeholder); opacity: 1; }
.field :focus { border-color: var(--red); outline: none; }

.field__options { display: flex; flex-wrap: wrap; gap: 56px; }
.field__options label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  line-height: 30px;
  cursor: pointer;
}
.field__options input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1px solid var(--black);
  border-radius: 50%;
  transition: border-color 0.2s var(--ease);
}
.field__options input:checked {
  border-color: var(--red);
  border-width: 6px;
}

.form__foot { margin-top: 16px; display: grid; gap: 32px; justify-items: center; }
.form__note { font-size: 18px; line-height: 30px; text-align: center; }
.form__note a { color: var(--red); text-decoration: underline; }
.form__submit {
  width: 280px;
  min-height: 58px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  transition: background-color 0.3s var(--ease);
}
.form__submit:hover { background: #a30a1d; }

@media (max-width: 767px) {
  .formpage { padding-block: 80px; }
  .blockhead h1,
  .blockhead h2 { font-weight: 500; font-size: 22px; line-height: 33px; }
  .blockhead::after { width: 20px; }
  .blockhead--form h1,
  .blockhead--form h2 { font-weight: 700; font-size: 20px; line-height: 28px; }
  .formlead { margin-top: 40px; font-size: 14px; line-height: 25px; }
  .form { margin-top: 40px; }
  .field__label { font-size: 14px; line-height: 25px; }
  .field__req { font-size: 10px; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field textarea { font-size: 14px; line-height: 25px; }
  .field input { height: 40px; padding-block: 6px; }
  .field__options { flex-direction: column; gap: 8px; }
  .field__options label { font-size: 14px; line-height: 25px; }
  .form__foot { margin-top: 16px; gap: 16px; }
  .form__note { font-size: 14px; line-height: 25px; }
}

/* ---------- 21. Definition list (membership info) ---------- */
/* The comp leaves 40px under the definition list before the form block. */
.infoblock { padding-block: 120px 40px; }
.formblock { padding-block: 120px; }
.formpage--join { padding-block: 0; }
.container--980 { max-width: calc(980px + var(--gutter) * 2); }
.container--700 { max-width: calc(700px + var(--gutter) * 2); }

.deflist {
  display: grid;
  grid-template-columns: 200px 780px;
  row-gap: 80px;
  margin-top: 56px;
}
.deflist dt {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
}
.deflist dd {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
}

@media (max-width: 767px) {
  .infoblock { padding-block: 80px 32px; }
  .formblock { padding-block: 80px; }
  .deflist {
    grid-template-columns: 1fr;
    row-gap: 8px;
    margin-top: 40px;
  }
  .deflist dt { font-size: 16px; line-height: 23px; }
  .deflist dt + dd { margin-bottom: 32px; }
  .deflist dd { font-size: 14px; line-height: 25px; }
  .deflist dd:last-child { margin-bottom: 0; }
}

/* ---------- 22. Concept page ---------- */
.slogan { padding-block: 120px; text-align: center; }
.slogan__copy {
  margin-top: 56px;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 50px;
  line-height: 72px;
}
.slogan__body {
  margin-top: 40px;
  font-weight: 700;
  font-size: 18px;
  line-height: 40px;
}

.about {
  padding-block: 80px;
  color: var(--white);
  background: var(--red) url("../images/deco-arc.webp") center / cover no-repeat;
}
.about__cols {
  display: grid;
  grid-template-columns: 510px 300px;
  gap: 96px;
  align-items: center;
  /* The comp's text box is 334px tall (hand-sized in Figma); the browser lays the
     same 8 lines out in 320px, so pin the block to keep the page rhythm identical. */
  min-height: 334px;
  margin-top: 56px;
}
.about__cols p { font-weight: 700; font-size: 18px; line-height: 40px; }

.videoblock { padding-block: 120px 240px; }
.video {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 56px;
  aspect-ratio: 2 / 1;
  background: var(--gray-line);
}
.video svg { width: 50px; height: 50px; fill: var(--red); }

@media (max-width: 767px) {
  .slogan { padding-block: 80px; }
  .slogan__copy { margin-top: 40px; font-size: 28px; line-height: 42px; }
  .slogan__body { margin-top: 32px; font-size: 14px; line-height: 28px; }
  .about { padding-block: 56px; }
  .about__cols { grid-template-columns: 1fr; gap: 32px; justify-items: center; min-height: 0; margin-top: 40px; }
  .about__cols p { font-size: 14px; line-height: 28px; }
  .about__cols img { width: 200px; }
  .videoblock { padding-block: 80px 120px; }
  .video { margin-top: 40px; }
  .video svg { width: 40px; height: 40px; }
}

/* The comp spaces the entry-card band differently on each page, so each gets
   its own measured values rather than one shared rule. */
.section--tail { padding-top: 0; }              /* concept: preceding block owns the 240px */
.section--cards-member { padding-block: 240px 160px; }
@media (max-width: 767px) {
  .section--cards-member { padding-block: 80px 120px; }
}

/* ---------- 23. Member list ---------- */
.blockhead--red { color: var(--red); }

.memberlist { padding-block: 80px 120px; }
.memberlist--first { padding-top: 120px; }
.memberlist--gray { background: var(--gray-bg); }

.membergrid {
  display: grid;
  grid-template-columns: repeat(5, 200px);
  column-gap: 35px;
  row-gap: 80px;
  justify-content: space-between;
  margin-top: 80px;
}
.membergrid__photo {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--gray-line);
}
.membergrid__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.membergrid a:hover .membergrid__photo img { transform: scale(1.06); }
.membergrid__role {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--red);
}
.membergrid__name {
  margin-top: 4px;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
}

@media (max-width: 767px) {
  .memberlist { padding-block: 80px; }
  .membergrid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    row-gap: 40px;
    margin-top: 40px;
  }
  .membergrid__role { margin-top: 8px; font-size: 14px; }
  .membergrid__name { margin-top: 4px; font-size: 16px; line-height: 16px; }
}

/* ---------- 24. Business / collaboration page ---------- */
.collab { position: relative; overflow: hidden; }
.collab .container { position: relative; z-index: 1; }

/* The comp's mask (Rectangle 69) is not a rectangle but a parallelogram:
   M388.3 0 L1156.4 0 L768.1 1389 L0 1389 Z — a band that leans left as it descends,
   which is what keeps the red away from the heading at the top. Both edges share the
   same slope, so the band also leaves a white wedge at the bottom right. The box starts
   at the artboard's x=480 (container left + 330); at comp width the top-right corner
   falls outside the viewport, so the band bleeds off the right exactly as in the comp.
   The background offset places the same slice of the source art inside it. */
.collab__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 240px);
  right: calc(50% - 50vw);
  clip-path: polygon(388.3px 0, 1156.4px 0, 768.1px 100%, 0 100%);
  background: var(--red) url("../images/deco-arc.webp") -2026px -3px / 3348px 1395px no-repeat;
}

.collab__text { max-width: 570px; }
.collab__lead {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 35px;
  line-height: 60px;
  color: var(--red);
}
.collab__body {
  max-width: 390px;
  margin-top: 40px;
  font-size: 18px;
  line-height: 30px;
  text-align: justify;
}
.collab__foot { margin-top: 40px; }
.collab__foot .btn { font-size: 18px; }

.collab__card figure { margin: 0; }
.collab__card img,
.collab__card .ph {
  display: block;
  width: 100%;
  aspect-ratio: 500 / 301;
  object-fit: cover;
  background: var(--gray-line);
}
.collab__card figcaption {
  margin-top: 24px;
  color: var(--white);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
}

/* Desktop: the three cards step to the left exactly as the comp lays them out. */
@media (min-width: 1200px) {
  .collab { min-height: 1389px; }
  .collab .container { min-height: 1389px; }
  .collab__text { position: absolute; top: 120px; left: var(--gutter); }
  .collab__cards { position: absolute; inset: 0; }
  .collab__card { position: absolute; width: 500px; }
  .collab__card:nth-child(1) { top: 110px; left: calc(var(--gutter) + 640px); }
  .collab__card:nth-child(2) { top: 531px; left: calc(var(--gutter) + 440px); }
  .collab__card:nth-child(3) { top: 952px; left: calc(var(--gutter) + 340px); }
}

/* Below the comp width the stagger has nowhere to go, so the page stacks. */
@media (max-width: 1199px) {
  .collab { padding-block: 80px; }
  .collab__bg { left: 40%; clip-path: none; background-position: -1600px -3px; }
  .collab__cards { display: grid; gap: 56px; margin-top: 64px; }
  .collab__card { max-width: 500px; }
}

@media (max-width: 767px) {
  .collab { padding-block: 80px; }
  /* SP band: Rectangle 69 is 704x846 at x=-117 on the 400px artboard, running from
     55px below the top of the card column down to its exact bottom. Sizes are in vw
     so the geometry scales with the real device width. */
  .collab__bg { display: none; }
  .collab__cards { position: relative; isolation: isolate; }
  .collab__cards::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -29.25vw;
    width: 176vw;
    top: 55px;
    bottom: 0;
    clip-path: polygon(33.6% 0, 100% 0, 66.45% 100%, 0 100%);
    background: var(--red) url("../images/deco-wave.webp") -308.5vw -2px / 509.75vw auto no-repeat;
  }
  .collab__lead { font-size: 20px; line-height: 29px; }
  .collab__body { max-width: none; margin-top: 32px; font-size: 14px; line-height: 25px; }
  .collab__foot { margin-top: 32px; }
  .collab__cards { gap: 64px; margin-top: 54px; }
  .collab__card img,
  .collab__card .ph { aspect-ratio: 320 / 192; }
  .collab__card figcaption { margin-top: 16px; font-size: 16px; line-height: 23px; }
  .collab__card { max-width: none; }
}

/* ---------- 25. Member detail ---------- */
.profile { background: var(--gray-bg); }
.profile { padding-block: 120px 80px; }
.profile__inner {
  display: grid;
  grid-template-columns: 400px 560px;
  column-gap: 80px;
  align-items: start;
}
.profile__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--gray-line);
}
.profile__name { padding-top: 40px; }
.profile__role {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 20px;
  color: var(--red);
}
.profile__ja {
  margin-top: 16px;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 35px;
  line-height: 1;
}
.profile__en {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}

.profile__blocks { display: grid; gap: 32px; }
.profile__block h2 {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 20px;
  color: var(--red);
}
.profile__block p { font-size: 18px; line-height: 30px; }
.profile__block--contact h2 { line-height: 40px; }

.profile__links { display: grid; gap: 16px; }
.profile__links a {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  line-height: 30px;
  transition: color 0.25s var(--ease);
}
.profile__links a:hover { color: var(--red); }
.profile__links svg { width: 25px; height: 25px; flex: none; fill: var(--red); }

.portfolio { padding-block: 160px 0; }
.portfolio h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--red);
  text-align: center;
}
.portfolio__items { display: grid; gap: 80px; margin-top: 80px; }
.portfolio__items img,
.portfolio__items .ph { width: 100%; display: block; background: var(--gray-line); }
.portfolio__foot { margin-top: 120px; display: flex; justify-content: center; }

@media (max-width: 767px) {
  .profile { padding-block: 56px; }
  .profile__inner { grid-template-columns: 1fr; gap: 0; }
  .profile__name { padding-top: 24px; }
  .profile__role { font-size: 18px; line-height: 1; }
  .profile__ja { margin-top: 12px; font-size: 24px; }
  .profile__en { font-size: 16px; }
  .profile__blocks { gap: 24px; margin-top: 32px; }
  .profile__block h2 { font-size: 18px; line-height: 1; }
  .profile__block p,
  .profile__links a { font-size: 14px; line-height: 25px; }
  .portfolio { padding-block: 80px 0; }
  .portfolio h2 { font-size: 35px; }
  .portfolio__items { gap: 40px; margin-top: 40px; }
  .portfolio__foot { margin-top: 56px; }
}

/* ---------- 26. Activity page ---------- */
.activity { padding-block: 120px 0; }
.activity__head { padding-bottom: 40px; }

.activity__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 160px; }
.activity__item {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 570px 350px;
  gap: 40px;
  align-items: center;
  width: 960px;
  margin-inline: auto;
}
.activity__item--right { grid-template-columns: 350px 570px; }
/* Blocks 3 and 4 carry longer titles, so the comp widens their text column. */
.activity__item--wide { width: 995px; grid-template-columns: 570px 385px; }
.activity__item--wide.activity__item--right { grid-template-columns: 385px 570px; }
.activity__item--right .activity__figure { order: 2; }

/* Full-bleed decorative band behind every other block. Figma's Rectangle 48 is a
   tilted quad — M0 75.28 L1440 0 L1440 524.72 L0 600 — that rises to the right,
   so the edges are sloped rather than horizontal (75.28/600 = 12.547%). */
.activity__item--band::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw);
  width: 100vw;
  top: -118px;
  height: 600px;
  clip-path: polygon(0 12.547%, 100% 0, 100% 87.453%, 0 100%);
  background: var(--gray-bg) url("../images/deco-arc.webp") center / cover no-repeat;
}
.activity__items > .activity__item:first-child { padding-top: 120px; }
.activity__items > .activity__item:first-child.activity__item--band::before { top: 2px; }
.activity__items > .activity__item:last-child { padding-bottom: 160px; }

.activity__figure {
  width: 100%;
  aspect-ratio: 570 / 343;
  background: var(--gray-line);
}
.activity__text { display: grid; gap: 20px; text-align: center; }
/* Blocks that sit on the red band carry white type throughout. */
.activity__item--band .activity__text { color: var(--white); }
.activity__item--band .activity__no { color: var(--white); }
.activity__no {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  color: var(--red);
}
.activity__name {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 35px;
  line-height: 51px;
}
.activity__desc { font-size: 18px; line-height: 30px; text-align: justify; }

/* Annual schedule */
/* The comp leaves a 2px seam between the last activity block and this band. */
.schedule-section { background: var(--gray-bg); margin-top: 2px; padding-block: 120px 80px; }
.schedule { width: 750px; margin: 80px auto 0; }
.schedule__group { display: grid; gap: 16px; }
.schedule__group + .schedule__group { position: relative; margin-top: 32px; }
.schedule__group + .schedule__group::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gray-placeholder);
}
/* Columns are the comp's content widths plus its gaps:
   month 40+32 / date 90+56 / tag 80+16 / title fills the rest. */
.schedule__row {
  display: grid;
  grid-template-columns: 72px 146px 96px 1fr;
  padding-left: 38px;
  font-size: 18px;
  line-height: 30px;
}
.schedule__month { font-weight: 700; }
.schedule__tag { justify-self: start; align-self: center; }
/* The comp's pill is a fixed 80x20 white chip with red type - not a red fill. */
.schedule__tag span {
  display: block;
  width: 80px;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--red);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.section--cards-activity { padding-block: 160px; }

@media (max-width: 767px) {
  /* SP comp (400px board): 320px content column, and every block stacks
     image-over-text - the PC zig-zag is gone. */
  .activity { padding-block: 80px 0; }
  .activity__head { padding-bottom: 80px; }
  .activity__items { gap: 120px; padding: 80px var(--gutter) 0; }
  .activity__item,
  .activity__item--right,
  .activity__item--wide,
  .activity__item--wide.activity__item--right {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    width: 100%;
  }
  .schedule-section { margin-top: 0; }
  /* Blocks 2/4/6 carry the text first in the DOM so the PC row can put the
     figure on the right. Stacking them needs the figure to jump the text -
     order:0 leaves it where the DOM put it, which flipped the SP stack. */
  .activity__item--right .activity__figure { order: -1; }
  .activity__figure { aspect-ratio: 320 / 193; }
  /* The comp insets the copy to a 249px measure inside its 320px column; keep
     that ratio so the measure tracks the column up to the 767px breakpoint
     instead of stranding a 249px paragraph under a full-width image. */
  .activity__text { width: calc(100% * 249 / 320); margin-inline: auto; }
  /* Figma scales the tilted quad up to 1673x697 and slides it to x=-524, so the
     400px board only ever shows a middle window of it and the slope reads much
     flatter than on PC: 87.5px of drop over 1673px is 20.9px across 400px,
     i.e. 3% of the 697px height. The band is centred on its block.
     The :first-child arm only exists to outrank the PC nudge on block 1. */
  .activity__items > .activity__item.activity__item--band::before,
  .activity__items > .activity__item:first-child.activity__item--band::before {
    top: calc(50% - 348px);
    height: 697px;
    clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
    background-size: 418.25vw 100%;
    background-position: -131vw center;
  }
  .activity__items > .activity__item:first-child { padding-top: 0; }
  .activity__items > .activity__item:last-child { padding-bottom: 80px; }
  .activity__no { font-size: 60px; }
  .activity__name { font-size: 22px; line-height: 33px; }
  .activity__desc { font-size: 14px; line-height: 25px; }
  .schedule-section { padding-block: 80px; }
  .schedule { width: 100%; margin-top: 44px; }
  /* The SP comp closes the list with a rule; the PC one does not. It sits in
     the flow so the 80px gap to the band edge measures from the rule. */
  .schedule::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 8px;
    background: var(--gray-placeholder);
  }
  .schedule__group { gap: 8px; }
  .schedule__group + .schedule__group { margin-top: 16px; }
  .schedule__group + .schedule__group::before { top: -8px; }
  /* SP comp puts the month on its own line, then date | (pill over title). */
  .schedule__row {
    grid-template-columns: 70px 1fr;
    gap: 4px 16px;
    padding-left: 0;
    font-size: 14px;
    line-height: 25px;
  }
  .schedule__month { grid-column: 1 / -1; }
  .schedule__month:empty { display: none; }
  /* The date's 25px line shares its row with the 20px pill; the comp tops them
     out together, so the date must not push the title down. */
  .schedule__day { margin-bottom: -5px; }
  .schedule__tag { grid-column: 2; justify-self: start; align-self: start; }
  .schedule__title { grid-column: 2; }
  .section--cards-activity { padding-block: 80px 120px; }
}