/* Intro sections follow the generated reference and the Academy brand. */
.ac-concerns,
.ac-benefits {
  color: #24334b;
}

.ac-concerns {
  padding: 96px 0;
  background: #fcfcfa;
}

.ac-concerns-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}

.ac-intro-heading h2 {
  margin: 0 0 24px;
  font-family: var(--studio-display, "Noto Serif JP", "Yu Mincho", serif);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -.035em;
}

.ac-intro-heading h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 24px;
  background: #78638f;
}

.ac-intro-heading > p {
  margin: 0;
  color: #526078;
  font-size: 14px;
  line-height: 2;
}

.ac-concern-list {
  margin: 0;
  padding: 0 0 0 32px;
  list-style: none;
  border-left: 1px solid #d8d2df;
}

.ac-concern-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid #d8d2df;
}

.ac-concern-list li:first-child {
  padding-top: 0;
}

.ac-concern-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ac-concern-number,
.ac-benefit-title > span {
  color: #78638f;
  font-family: var(--studio-display, "Noto Serif JP", serif);
  font-size: 32px;
  line-height: 1.3;
  font-variant-numeric: lining-nums;
}

.ac-concern-list h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;
}

.ac-concern-list p {
  margin: 0;
  color: #526078;
  font-size: 13px;
  line-height: 1.95;
}

.ac-intro-art {
  display: block;
  flex: none;
  background-image: url("/assets/academy-intro-reference.png");
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* Only the illustration regions of the reference are displayed. */
.ac-intro-art--conversation {
  max-width: 370px;
  aspect-ratio: 416 / 244;
  margin-top: 30px;
  background-size: 246.154% 629.508%;
  background-position: 4.77% 33.824%;
}

.ac-benefits {
  padding: 78px 0 80px;
  background: #f0ecf5;
}

.ac-benefit-heading {
  max-width: 780px;
  margin-bottom: 40px;
}

.ac-benefit-heading h2 br {
  display: none;
}

.ac-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-benefit {
  padding: 28px;
  background: #fff;
}

.ac-benefit-title {
  display: flex;
  gap: 18px;
  align-items: start;
  margin-bottom: 24px;
}

.ac-benefit-title h3 {
  margin: 0;
  font-family: var(--studio-display, "Noto Serif JP", "Yu Mincho", serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: -.025em;
}

.ac-benefit-body {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.ac-benefit-body > p {
  margin: 0;
  padding-left: 22px;
  border-left: 1px solid #ded7e6;
  color: #526078;
  font-size: 13px;
  line-height: 1.95;
}

.ac-intro-art--work {
  aspect-ratio: 211 / 148;
  background-size: 485.308% 1037.838%;
  background-position: 5.535% 77.089%;
}

.ac-intro-art--team {
  aspect-ratio: 248 / 188;
  background-size: 412.903% 817.021%;
  background-position: 69.072% 77.596%;
}

.ac-intro-art--review {
  aspect-ratio: 222 / 164;
  background-size: 461.261% 936.585%;
  background-position: 5.486% 96.939%;
}

.ac-intro-art--practice {
  aspect-ratio: 238 / 154;
  background-size: 430.252% 997.403%;
  background-position: 68.957% 96.961%;
}

.ac-benefit-link {
  margin-top: 28px;
  min-height: 44px;
  align-items: center;
  font-size: 13px;
}

@media (max-width: 1000px) {
  .ac-concern-list {
    padding-left: 22px;
  }

  .ac-concern-list li {
    gap: 14px;
  }

  .ac-benefit {
    padding: 22px;
  }

  .ac-benefit-body {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
    gap: 16px;
  }

  .ac-benefit-body > p {
    padding-left: 16px;
  }
}

@media (max-width: 760px) {
  .ac-concerns,
  .ac-benefits {
    padding: 56px 0;
  }

  .ac-concerns-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ac-intro-heading h2 {
    font-size: 30px;
  }

  .ac-concerns .ac-intro-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 0 16px;
  }

  .ac-concerns h2 {
    grid-column: 1;
    margin-bottom: 16px;
    font-size: 28px;
  }

  .ac-intro-heading > p {
    grid-column: 1 / -1;
    font-size: 13px;
  }

  .ac-intro-art--conversation {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: 100%;
    margin: 0 0 16px;
  }

  .ac-concern-list {
    padding-left: 0;
    border-left: 0;
  }

  .ac-concern-list li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
  }

  .ac-concern-list h3 {
    font-size: 16px;
  }

  .ac-concern-number {
    font-size: 28px;
  }

  .ac-benefit-heading {
    margin-bottom: 26px;
  }

  .ac-benefit-heading h2 {
    font-size: 28px;
  }

  .ac-benefit-heading h2 br {
    display: initial;
  }

  .ac-benefit-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ac-benefit-title {
    gap: 14px;
    margin-bottom: 18px;
  }

  .ac-benefit-title h3 {
    font-size: 19px;
  }

  .ac-benefit-title > span {
    font-size: 29px;
  }

  .ac-benefit-body {
    grid-template-columns: minmax(0, .65fr) minmax(0, 1fr);
  }

  .ac-benefit-link {
    margin-top: 24px;
  }
}