:root {
  --orange: #fe8a00;
  --vivid-orange: #ff5d00;
  --yellow: #ffd16b;
  --deep-yellow: #ffc23b;
  --cream: #fff9d5;
  --peach: #ffd9c3;
  --black: #222;
  --text: #191c1d;
  --white: #fff;
  --cta-yellow: #fbe11d;
  --shadow-red: #b7102a;
  --font-base: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Dela Gothic One", "Noto Sans JP", sans-serif;
}

/* Rebuilt voices section */
.voices-old {
  display: none !important;
}

.voices-rebuild.section-cream {
  position: relative;
  overflow: hidden;
  padding: 86px 0 92px;
  background: #fff;
}

.voices-rebuild::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff9d5;
  clip-path: polygon(0 332px, 100% 659px, 100% calc(62% + 327px), 0 62%);
  z-index: 0;
}

.voices-inner {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}

.voice-block {
  position: relative;
  display: grid;
  justify-items: center;
}

.voice-block + .voice-block {
  margin-top: 88px;
}

.voice-section-title,
.voice-growth-title {
  text-align: center;
}

.voice-section-title span,
.voice-growth-title span,
.voice-growth-title strong {
  display: inline-block;
  padding: 8px 18px;
  background: #ff5d00;
  color: #fff;
  font-family: "Dela Gothic One", "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.18;
}

.voice-section-title p {
  margin: 10px 0 0;
  color: #191c1d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.voice-graduate-visual {
  margin: 28px 0 22px;
}

.voice-graduate-visual img {
  display: block;
  width: min(440px, 100%);
  height: auto;
}

.voice-block--graduate .voice-section-title span {
  padding: 10px 20px;
  font-family: "Dela Gothic One", "Noto Sans JP", sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
}

.voice-block--graduate .voice-section-title p {
  margin-top: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.voice-block--graduate .voice-graduate-visual {
  margin-top: 77px;
  margin-bottom: 71px;
  width: min(768px, 100%);
}

.voice-block--graduate .voice-graduate-visual img {
  width: min(768px, 100%);
  margin: 0 auto;
}

.voice-block--graduate .voice-qa h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
}

.voice-block--graduate .voice-qa-list {
  width: min(945px, 100%);
}

.voice-block--graduate .voice-qa {
  box-sizing: border-box;
  padding: 31px 46px 43px 44px;
  width: min(945px, 100%);
}

.voice-block--graduate .voice-qa h3 {
  margin-bottom: 15px;
}

.voice-block--graduate .voice-qa p {
  width: min(853px, 100%);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}

.voice-qa-list {
  display: grid;
  gap: 20px;
  width: min(760px, 100%);
}

.voice-qa {
  background: #fff;
  border: 2px solid #191c1d;
  padding: 18px 24px 20px;
  text-align: left;
}

.voice-qa h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #ff5d00;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.voice-qa h3 span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #ff8a00;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.voice-qa p {
  margin: 0;
  color: #191c1d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.voice-student-visual {
  position: relative;
  width: min(760px, 100%);
  margin: 30px 0 24px;
}

.voice-student-photo {
  display: block;
  width: min(640px, 100%);
  height: auto;
  margin: 0 auto;
}

.voice-student-page {
  position: absolute;
  right: 30px;
  bottom: -12px;
  width: 148px;
  height: auto;
}

.voice-student-illustration {
  position: absolute;
  left: -50px;
  bottom: -164px;
  width: 148px;
  height: auto;
}

.voice-student-composite {
  display: none;
}

.voice-block--student .voice-section-title span {
  padding: 10px 20px;
  font-family: "Dela Gothic One", "Noto Sans JP", sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
}

.voice-block--student .voice-section-title p {
  margin-top: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.voice-block--student .voice-student-visual {
  width: min(1100px, 100%);
}

.voice-block--student .voice-student-photo {
  width: min(1100px, 100%);
}

.voice-block--student .voice-student-page {
  right: -60px;
  bottom: -72px;
  width: 247px;
}

.voice-block--student .voice-student-illustration {
  left: -86px;
  bottom: -720px;
  width: 244px;
}

@media (max-width: 1279px), (max-height: 799px) {
  .voice-block--student .voice-student-visual {
    width: min(100%, 760px);
    margin: 30px auto 24px;
  }

  .voice-block--student .voice-student-photo,
  .voice-block--student .voice-student-page,
  .voice-block--student .voice-student-illustration {
    display: none;
  }

  .voice-block--student .voice-student-composite {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

.voice-qa-list--student {
  margin-top: 10px;
  width: min(945px, 100%);
}

.voice-block--student .voice-qa {
  box-sizing: border-box;
  padding: 31px 46px 44px 44px;
  width: min(945px, 100%);
}

.voice-block--student .voice-qa h3 {
  margin-bottom: 15px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
}

.voice-block--student .voice-qa p {
  width: min(853px, 100%);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}

.voice-block.voice-block--growth {
  display: block;
  width: 100%;
  margin-top: 240px;
}

.voice-growth-title {
  display: grid;
  justify-items: center;
  justify-self: center;
  gap: 25px;
  width: fit-content;
  margin: 0 auto 100px;
  text-align: center;
}

.voice-growth-title span,
.voice-growth-title strong {
  font-size: 24px;
}

.voice-block--growth .voice-growth-title span,
.voice-block--growth .voice-growth-title strong {
  padding: 10px 20px;
  font-family: "Dela Gothic One", "Noto Sans JP", sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
}

.voice-before-after {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 61px;
  width: fit-content;
  margin: 0 auto 135px;
}

.voice-before-after figure {
  margin: 0;
  text-align: center;
}

.voice-before-after img {
  display: block;
  width: 245px;
  height: auto;
  object-fit: cover;
  border: 2px solid #191c1d;
  background: #fff;
}

.voice-before-after figcaption {
  margin-top: 8px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.voice-before-after figure:nth-of-type(2) figcaption {
  color: #ff5d00;
}

.voice-before-after-arrow {
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #ff5d00;
}

.voice-manga-row {
  display: flex;
  gap: 40px;
  justify-content: flex-start;
  width: 1955px;
  max-width: none;
  margin: 0;
}

.voice-manga-row img {
  display: block;
  width: 245px;
  height: auto;
  object-fit: cover;
  border: 2px solid #191c1d;
  background: #fff;
}

.voice-manga-row-track {
  display: contents;
}

.voice-manga-row img[aria-hidden="true"] {
  display: none;
}

.feature-comic-strip-track {
  display: contents;
}

.feature-comic-strip img[aria-hidden="true"] {
  display: none;
}

@media (max-width: 900px) {
  .voices-rebuild.section-cream {
    padding: 64px 0 72px;
  }

  .voices-rebuild::before {
    inset: 92px 0 240px;
    clip-path: polygon(0 0, 100% 4%, 100% 88%, 0 84%);
  }

  .voices-inner {
    width: min(100% - 32px, 760px);
  }

  .voice-section-title span,
  .voice-growth-title span,
  .voice-growth-title strong {
    font-size: 20px;
  }

  .voice-student-page {
    right: 8px;
    width: 118px;
  }

  .voice-student-illustration {
    left: 0;
    bottom: -138px;
    width: 118px;
  }

  .voice-block--growth {
    margin-top: 96px;
  }

  .voice-manga-row {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    gap: 14px;
  }

  .voice-manga-row img {
    width: 116px;
    height: 181px;
  }
}

@media (max-width: 600px) {
  .voices-rebuild.section-cream {
    padding: 52px 0 60px;
  }

  .voices-inner {
    width: min(100% - 24px, 430px);
  }

  .voice-block + .voice-block {
    margin-top: 70px;
  }

  .voice-section-title span,
  .voice-growth-title span,
  .voice-growth-title strong {
    padding: 7px 14px;
    font-size: 18px;
  }

  .voice-qa {
    padding: 16px 16px 18px;
  }

  .voice-qa h3 {
    font-size: 16px;
  }

  .voice-qa p {
    font-size: 14px;
  }

  .voice-student-page,
  .voice-student-illustration {
    position: static;
    display: block;
    margin: 14px auto 0;
    transform: none;
  }

  .voice-student-page {
    width: 112px;
  }

  .voice-student-illustration {
    width: 120px;
  }

  .voice-before-after {
    gap: 16px;
  }

  .voice-before-after img {
    width: 118px;
    height: 184px;
  }

  .voice-manga-row img {
    width: 92px;
    height: 144px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: var(--font-base);
  font-weight: 500;
  letter-spacing: 0;
  overflow-x: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

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

p,
h1,
h2,
h3,
figure {
  margin: 0;
}

.sp-only {
  display: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  padding: 0 clamp(24px, 19.3vw, 370px);
  background: var(--white);
  box-shadow: 0 1px 0 rgba(34, 34, 34, 0.08);
}

main {
  padding-top: 100px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  width: 360px;
}

.site-logo img {
  width: 100%;
  height: auto;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 164.5px;
  height: 47px;
  padding: 0;
  background: url("../images/header-request-button.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
}

.section-orange {
  background: var(--orange);
}

.section-yellow {
  background: var(--yellow);
}

.section-cream {
  background: var(--cream);
}

.section-orange-light {
  background: #ffd16b;
}

.section-peach {
  background: var(--peach);
}

.narrow,
.content-block {
  width: min(100% - 48px, 1000px);
  margin-inline: auto;
}

.hero {
  position: relative;
  min-height: 980px;
  padding: 0;
  overflow: hidden;
}

.hero-bg-noise,
.texture-light::before,
.feature-background {
  position: absolute;
  inset: 0;
  background-image: url("../images/bg-noise.png");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.hero-bg-noise {
  opacity: 0.1;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 620px 1fr;
  align-items: start;
  gap: 10px;
  width: min(100% - 80px, 1240px);
  min-height: 980px;
  margin-inline: auto;
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding: 70px 0 60px;
}

.hero-student-bubble {
  width: 360px;
  margin-left: -4px;
}

.hero-copy-image {
  width: 708px;
  max-width: none;
  margin-top: 6px;
  margin-left: -10px;
}

.hero-mobile-copy-image {
  display: none;
}

.hero-request-link {
  display: block;
  width: 552px;
  margin-top: 18px;
  transition: transform 160ms ease;
}

.hero-request-link:hover {
  transform: translateY(-2px);
}

.hero-request-link img {
  width: 100%;
}

.primary-button {
  position: relative;
  display: inline-grid;
  grid-template-columns: 60px 1fr 20px;
  align-items: center;
  justify-items: center;
  gap: 18px;
  min-width: 542px;
  min-height: 107px;
  margin-top: 34px;
  padding: 18px 42px 18px 28px;
  border: 3.4px solid var(--black);
  border-radius: 999px;
  background: var(--cta-yellow);
  box-shadow: 5.6px 5.6px 0 var(--black);
  color: var(--black);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
}

.primary-button > img:first-child {
  width: 60px;
}

.primary-button .button-arrow {
  width: 20px;
}

.hero-visual {
  position: relative;
  z-index: 2;
  height: 980px;
}

.hero-main-composite {
  position: absolute;
  right: -360px;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
}

.hero-pattern {
  position: absolute;
  pointer-events: none;
}

.hero-pattern-a {
  width: 171px;
  top: 46px;
  left: calc(50% - 140px);
  opacity: 0.75;
}

.hero-pattern-b {
  width: 286px;
  left: -60px;
  bottom: -63px;
  opacity: 0.7;
}

.conditions {
  padding: 0;
  overflow: hidden;
  background: var(--cream);
}

.conditions-intro {
  width: min(100% - 80px, 930px);
  margin-inline: auto;
  padding: 120px 0 149px;
}

.condition-speech {
  width: min(100%, 826px);
  margin: 0 auto 34px;
}

.condition-lead,
.condition-body {
  width: min(100%, 857px);
  margin-inline: auto;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.72;
  text-align: left;
}

.condition-lead {
  width: min(100%, 826px);
  margin-bottom: 44px;
}

.condition-intro-circles {
  display: grid;
  grid-template-columns: repeat(3, 266px);
  justify-content: center;
  gap: 45px;
  margin-bottom: 55px;
}

.condition-intro-circles img {
  width: 266px;
}

.condition-body > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.condition-body strong {
  font-weight: 800;
}

.condition-checks {
  display: grid;
  grid-template-columns: repeat(3, 290px);
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.condition-checks img {
  width: 290px;
}

.condition-close {
  margin-top: 34px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.66;
  text-align: center;
}

.conditions > .narrow {
  position: relative;
  padding: 120px 0 120px;
  background: var(--yellow);
  box-shadow: 0 0 0 100vmax var(--yellow);
  clip-path: inset(0 -100vmax);
}

.points-heading-img {
  width: 708px;
  margin: 0 auto 43px;
}

.points-preface {
  margin: 0 auto 50px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.43;
  text-align: center;
}

.points-list {
  display: grid;
  justify-items: center;
  gap: 25px;
}

.points-list .points-row-default:nth-child(1) {
  width: 544px;
}

.points-list .points-row-default:nth-child(2) {
  width: 718px;
}

.points-list .points-row-default:nth-child(3) {
  width: 515px;
}

.points-row-mobile {
  display: none;
}

.section-label-img {
  width: 708px;
  margin: 0 auto 78px;
}

.condition-bubbles {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 54px;
}

.condition-bubbles div {
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vivid-orange);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
}

.condition-list {
  display: grid;
  gap: 24px;
  justify-items: center;
}

.condition-list article {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 97px;
  padding: 18px 47px;
  border: 3px solid var(--black);
  background: var(--white);
}

.condition-list article:nth-child(1) {
  width: 544px;
}

.condition-list article:nth-child(2) {
  width: 718px;
}

.condition-list article:nth-child(3) {
  width: 515px;
}

.condition-list span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--vivid-orange);
  color: var(--white);
  font-size: 29px;
  font-weight: 900;
}

.condition-list p {
  font-size: 29px;
  font-weight: 900;
  line-height: 1.35;
}

.problem {
  padding: 120px 0 128px;
}

.conditions .problem {
  position: relative;
  padding: 60px 0 0;
  background: transparent;
}

.conditions .condition-problem--01::before {
  content: "";
  position: absolute;
  left: -344px;
  bottom: 0;
  width: 286px;
  height: 286px;
  background: url("../images/hero-dot-pattern.png") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.conditions .condition-problem--02 {
  margin-top: 120px;
  padding: 120px 0;
  background: var(--deep-yellow);
  box-shadow: 0 0 0 100vmax var(--deep-yellow);
  clip-path: inset(0 -100vmax);
}

.conditions .condition-problem--03 {
  padding: 120px 0;
  background: var(--yellow);
  box-shadow: 0 0 0 100vmax var(--yellow);
  clip-path: inset(0 -100vmax);
}

.conditions .condition-problem--03::after {
  content: "";
  position: absolute;
  right: -350px;
  bottom: 70px;
  width: 286px;
  height: 286px;
  background: url("../images/hero-dot-pattern.png") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.point-card-visual {
  position: relative;
  z-index: 1;
  width: 1000px;
  max-width: 100%;
  height: 379px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--white);
}

.point-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.conditions .point-card-visual img {
  box-sizing: border-box;
  border: 5px solid #000000;
}

.point-card-visual--03 {
  width: 1000px;
  height: 400px;
}

.point-detail-card {
  position: relative;
  z-index: 2;
  width: 900px;
  max-width: calc(100% - 80px);
  min-height: 494px;
  margin: -80px auto 0;
  padding: 50px;
  border: 0;
  outline: 5px solid var(--black);
  background: var(--white);
}

.point-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 101px;
  min-height: 32px;
  margin-bottom: 26px;
  padding: 4px 16px;
  background: var(--vivid-orange);
  color: var(--white);
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.point-detail-card h2 {
  margin-bottom: 22px;
  color: var(--vivid-orange);
  font-family: "DelaSuko Gothic One", "Dela Gothic One", var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.65;
}

.point-detail-card p:not(.point-label) {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}

.point-detail-card p + p {
  margin-top: 28px;
}

.point-detail-card strong {
  font-weight: 800;
}

.point-detail-card--large {
  min-height: 1047px;
}

.point-detail-card--short {
  min-height: 411px;
}

.point-profile {
  display: grid;
  grid-template-columns: 279px minmax(0, 1fr);
  gap: 47px;
  align-items: start;
  margin-top: 76px;
}

.point-profile-cover {
  width: 279px;
  height: 408px;
  object-fit: cover;
}

.point-profile-logo {
  width: 424px;
  height: 46px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 12px;
}

.point-profile h3 {
  margin: 0 0 4px;
  color: #231815;
  font-family: "DelaSuko Gothic One", "Dela Gothic One", var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.67;
}

.point-detail-card .point-profile-work {
  margin: 0 0 18px;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}

.point-detail-card .point-profile-message {
  margin: 0;
  font-size: 20px;
  line-height: 1.75;
}

.stacked-title {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin-bottom: 76px;
  font-family: var(--font-display);
  text-align: center;
}

.stacked-title span,
.stacked-title strong,
.label-pair span,
.label-pair strong,
.section-heading span,
.section-heading strong {
  display: inline-block;
  padding: 10px 20px 12px;
  color: var(--white);
  line-height: 1.15;
}

.stacked-title span,
.section-heading span,
.label-pair span {
  background: var(--black);
}

.stacked-title span:nth-child(2),
.label-pair strong,
.section-heading strong {
  background: var(--vivid-orange);
}

.stacked-title strong {
  background: var(--vivid-orange);
  font-size: 52px;
}

.stacked-title span {
  font-size: 38px;
}

.framed-image {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--black);
  background: var(--white);
  box-shadow: 6px 6px 0 var(--shadow-red);
}

.framed-image img {
  width: 100%;
  height: 402px;
  object-fit: cover;
  object-position: center 45%;
}

.school-intro {
  position: relative;
  padding: 120px 0 0;
  overflow: hidden;
  background-color: var(--cream);
  background-image: url("../images/school-speedline-bg.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.texture-light::before {
  opacity: 0.1;
  transform: scaleY(-1);
}

.school-intro > .content-block {
  display: none;
}

.school-intro-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1300px);
  margin-inline: auto;
  text-align: center;
}

.school-intro-heading {
  display: grid;
  justify-items: center;
  gap: 25px;
  margin: 0 0 45px;
  font-family: "Dela Gothic One", "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: var(--white);
  line-height: 1;
}

.school-intro-label {
  display: inline-grid;
  place-items: center;
  padding: 10px 20px;
  width: fit-content;
  max-width: 100%;
  color: var(--white);
  font-weight: 400;
  line-height: 1.14;
}

.school-intro-label--black {
  background: var(--black);
  font-size: 40px;
}

.school-intro-label--orange {
  background: var(--vivid-orange);
}

.school-intro-label--small {
  font-size: 40px;
}

.school-intro-label--large {
  font-size: 52px;
}

.school-main-photo {
  width: 1000px;
  max-width: 100%;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

.school-main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.school-intro-copy {
  margin: 45px auto 0;
  color: var(--text);
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.75;
}

.school-intro-copy strong {
  font-weight: 800;
}

.school-book-row {
  display: grid;
  grid-template-columns: repeat(7, 185px);
  justify-content: center;
  gap: 7px;
  margin-top: 60px;
}

.school-book-row img {
  width: 185px;
  height: 264px;
  object-fit: cover;
  object-position: center;
}

.school-book-row-track {
  display: contents;
}

.school-book-row img[aria-hidden="true"] {
  display: none;
}

.school-intro-bottom {
  margin-top: 60px;
  color: var(--text);
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.65625;
}

.school-intro-bottom strong {
  color: var(--vivid-orange);
  font-weight: 800;
}

.content-block {
  position: relative;
  z-index: 1;
  text-align: center;
}

.label-pair {
  display: grid;
  gap: 18px;
  justify-items: center;
  margin-bottom: 70px;
  font-family: var(--font-display);
  font-size: 48px;
}

.content-block p {
  font-size: 22px;
  line-height: 1.8;
}

.content-block p + p {
  margin-top: 46px;
}

.before-after {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 500px;
  margin-top: 92px;
  object-fit: cover;
  object-position: center;
}

.features {
  position: relative;
  padding: 120px 0 164px;
  overflow: hidden;
  background: #ffe55e;
}

.feature-background {
  background-image: url("../images/feature-section.png");
  background-size: cover;
  background-position: center -230px;
  background-repeat: no-repeat;
  opacity: 1;
}

.section-heading {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-bottom: 86px;
  font-family: var(--font-display);
  font-size: 52px;
  text-align: center;
}

.feature-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 116px;
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.feature-card {
  padding: 48px 54px 58px;
  border: 3px solid var(--black);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 8px 8px 0 var(--black);
}

.feature-number {
  width: max-content;
  margin: 0 auto 26px;
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
}

.feature-card h3 {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin-bottom: 38px;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.2;
  text-align: center;
}

.feature-card h3 span {
  display: inline-block;
  padding: 8px 16px;
  background: var(--black);
  color: var(--white);
  font-size: 40px;
}

.feature-body {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 42px;
  align-items: center;
}

.feature-body.reverse {
  grid-template-columns: 0.85fr 1fr;
}

.feature-body.reverse figure {
  order: 2;
}

.feature-body figure {
  overflow: hidden;
  border: 2px solid var(--black);
  background: var(--white);
}

.feature-body img {
  width: 100%;
  height: 290px;
  object-fit: cover;
}

.feature-body p {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.75;
}

.graduates {
  position: relative;
  padding: 120px 0 130px;
}

.section-transition-arrow {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 300px;
  height: 91px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.graduates .section-heading span,
.graduates .section-heading strong {
  padding: 10px 20px;
  background: var(--vivid-orange);
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
}

.graduate-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  width: min(100% - 48px, 1400px);
  margin-inline: auto;
}

.graduate-grid article {
  justify-self: center;
  width: 320px;
  max-width: 100%;
  text-align: left;
}

.graduate-grid img {
  width: 320px;
  height: 468px;
  max-width: 100%;
  object-fit: cover;
  object-position: center top;
}

.graduate-grid h3 {
  margin-top: 24px;
  font-family: "Noto Sans", var(--font-base);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.graduate-grid p {
  margin-top: 16px;
  font-family: "Noto Sans", var(--font-base);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
}

.many-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 96px auto 34px;
  color: var(--text);
  font-family: "Noto Sans", var(--font-base);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.many-more img {
  width: auto;
  height: 28px;
}

.book-row {
  display: grid;
  grid-template-columns: repeat(6, 215px);
  gap: 20px;
  width: min(100% - 40px, 1390px);
  margin-inline: auto;
  justify-content: center;
}

.book-row figure {
  margin: 0;
}

.book-row img {
  width: 215px;
  height: 314px;
  max-width: 100%;
  justify-self: center;
  object-fit: cover;
  object-position: center top;
}

.book-row figcaption {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  color: var(--text);
  font-family: "Noto Sans", var(--font-base);
  text-align: left;
}

.book-row figcaption strong {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.book-row figcaption span {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.concerns {
  position: relative;
  padding: 102px 0 126px;
  background: #ffd16b;
}

.concerns-inner {
  display: grid;
  gap: 94px;
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.concern-panel {
  display: grid;
  justify-items: center;
  text-align: center;
}

.concern-question {
  width: min(100%, 858px);
}

.concern-question--compact {
  width: min(100%, 720px);
}

.concern-answer {
  width: min(100%, 858px);
  margin-top: 26px;
}

.concern-panel--basic .concern-answer {
  width: min(100%, 720px);
}

.concern-copy {
  width: min(100%, 858px);
  margin-top: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.8;
}

.concern-panel--basic .concern-copy {
  width: min(100%, 760px);
}

.concern-copy p + p {
  margin-top: 8px;
}

.concern-copy strong {
  font-weight: 700;
}

.concern-underline {
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--text);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.concern-lessons {
  display: grid;
  grid-template-columns: repeat(3, 290px);
  gap: 40px;
  justify-content: center;
  width: min(100%, 950px);
  margin-top: 34px;
}

.concern-lessons article {
  text-align: left;
}

.concern-lessons img {
  width: 100%;
}

.concern-lessons h3 {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.concern-lessons p {
  margin-top: 7px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
}

.concern-wide-photo,
.concern-degree {
  width: min(100%, 1100px);
  margin: 34px 0 0;
}

.concern-wide-photo img,
.concern-degree img {
  width: 100%;
}

.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 600px) 430px;
  justify-content: center;
  align-items: center;
  gap: 105px;
  min-height: 732px;
  padding: 86px 40px 74px;
  overflow: hidden;
  background: var(--vivid-orange);
  background-image: radial-gradient(circle, rgba(34, 34, 34, 0.12) 0 7px, transparent 8px);
  background-position: center;
  background-size: 30px 30px;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 93, 0, 0.94) 0%, rgba(255, 93, 0, 0.75) 48%, rgba(255, 93, 0, 0.55) 100%);
}

.cta-band-copy,
.request-pamphlet-card {
  position: relative;
  z-index: 1;
}

.cta-band-copy {
  justify-self: end;
  width: min(100%, 600px);
  color: var(--white);
  text-align: left;
}

.cta-band-copy h2 {
  margin: 0 0 46px;
  font-family: var(--font-sans);
  font-size: 54px;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: 0;
  text-shadow: 4px 4px 0 rgba(34, 34, 34, 0.86);
}

.cta-band-copy p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: 0;
}

.cta-band-copy p + p {
  margin-top: 30px;
}

.request-pamphlet-card {
  justify-self: start;
  width: 430px;
  max-width: 100%;
}

.cta-over {
  display: block;
  width: 542px;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin-top: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cta-over > img:first-child {
  display: block;
  width: 100%;
  height: auto;
}

.voices {
  padding: 120px 0 140px;
}

.voice-portrait {
  display: grid;
  justify-items: center;
  gap: 22px;
  margin-bottom: 72px;
}

.voice-portrait img {
  width: 299px;
  max-height: 452px;
  object-fit: cover;
  object-position: center top;
}

.voice-portrait.student img {
  width: 469px;
  max-height: 351px;
}

.voice-portrait figcaption {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

.qa-list {
  display: grid;
  gap: 32px;
  width: min(100% - 48px, 945px);
  margin-inline: auto;
}

.qa-list article {
  border: 3px solid var(--black);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

.qa-list h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 18px 44px;
  color: #e36f00;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.35;
}

.qa-list h3 span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fc9325;
  color: var(--white);
  font-size: 20px;
}

.qa-list p {
  padding: 0 44px 38px 90px;
  font-size: 21px;
  line-height: 1.75;
}

.student-heading {
  margin-top: 116px;
}

.final-cta {
  position: relative;
  padding: 120px 0 140px;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/bg-noise.png");
  background-size: cover;
  opacity: 0.06;
}

.final-image,
.final-copy,
.ticket-card,
.final-cta .primary-button {
  position: relative;
  z-index: 1;
}

.final-image {
  display: block;
  width: min(100% - 48px, 919px);
  margin: 0 auto 60px;
}

.final-copy {
  width: min(100% - 48px, 900px);
  margin-inline: auto;
}

.final-copy p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.65;
}

.final-copy-emphasis {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.final-copy p + p {
  margin-top: 28px;
}

.ticket-card {
  display: grid;
  grid-template-columns: 299px 1fr;
  gap: 24px;
  align-items: center;
  box-sizing: border-box;
  width: min(100% - 48px, 900px);
  margin: 50px auto 100px;
  padding: 15px 24px;
  border: 3px solid var(--vivid-orange);
  border-radius: 8px;
  background: rgba(255, 93, 0, 0.6);
  color: var(--white);
}

.ticket-card img {
  width: 299px;
}

.ticket-card p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.65;
}

.final-cta .primary-button {
  left: 50%;
  display: block;
  min-width: 0;
  min-height: 0;
  width: min(100% - 48px, 542px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
}

.final-cta .primary-button img {
  display: block;
  width: 100%;
}

.site-footer {
  display: grid;
  place-items: center;
  min-height: 93px;
  background: var(--black);
  color: var(--white);
  text-align: center;
}

.site-footer p {
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 1400px) {
  .site-header {
    padding-inline: 48px;
  }

  .hero-inner {
    width: min(100% - 72px, 1180px);
    grid-template-columns: 560px 1fr;
  }

  .hero-student-bubble {
    width: 330px;
  }

  .hero-copy-image {
    width: 640px;
  }

  .hero-request-link {
    width: 500px;
  }

  .hero-main-composite {
    right: -300px;
    height: 100%;
    width: auto;
  }
}

@media (max-width: 1200px) {
  .hero {
    min-height: 860px;
  }

  .hero-inner {
    min-height: 860px;
    grid-template-columns: 500px 1fr;
  }

  .hero-copy {
    padding-top: 58px;
  }

  .hero-student-bubble {
    width: 290px;
  }

  .hero-copy-image {
    width: 560px;
  }

  .hero-request-link {
    width: 440px;
  }

  .hero-main-composite {
    right: -250px;
    top: 0;
    height: 100%;
    width: auto;
  }

  .graduate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 840px;
  }
}

@media (max-width: 900px) {
  .site-header {
    height: 76px;
    padding-inline: 20px;
  }

  main {
    padding-top: 76px;
  }

  .site-logo {
    width: clamp(210px, 47vw, 300px);
  }

  .header-cta {
    width: 132px;
    height: 38px;
  }

  .hero {
    min-height: auto;
  }

  .hero-inner {
    display: flex;
    flex-direction: column;
    width: min(100% - 32px, 680px);
    min-height: 0;
    padding: 44px 0 70px;
  }

  .hero-copy {
    padding: 0;
  }

  .hero-visual {
    width: 100%;
    height: 660px;
    margin-top: 28px;
  }

  .hero-student-bubble {
    width: min(100%, 360px);
  }

  .hero-copy-image {
    width: min(100%, 620px);
    margin-left: 0;
  }

  .hero-request-link {
    width: min(100%, 480px);
  }

  .hero-main-composite {
    left: 50%;
    right: auto;
    top: 0;
    width: min(150vw, 700px);
    transform: translateX(-50%);
  }

  .primary-button {
    grid-template-columns: 46px 1fr 16px;
    gap: 12px;
    width: min(100%, 420px);
    min-width: 0;
    min-height: 82px;
    padding: 14px 24px;
    font-size: 22px;
  }

  .primary-button > img:first-child {
    width: 46px;
  }

  .conditions,
  .problem,
  .school-intro,
  .graduates,
  .concerns,
  .voices,
  .final-cta {
    padding-block: 72px;
  }

  .conditions {
    padding: 0;
  }

  .conditions-intro {
    width: min(100% - 40px, 720px);
    padding: 72px 0 84px;
  }

  .condition-lead,
  .condition-body {
    font-size: 18px;
    line-height: 1.8;
  }

  .condition-intro-circles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 42px;
  }

  .condition-intro-circles img {
    width: 100%;
  }

  .condition-checks {
    grid-template-columns: 1fr;
    width: min(100%, 420px);
    gap: 18px;
    margin-inline: auto;
  }

  .condition-checks img {
    width: 100%;
  }

  .condition-close {
    font-size: 21px;
  }

  .conditions > .narrow {
    padding: 72px 0;
  }

  .points-heading-img {
    width: min(100%, 520px);
    margin-bottom: 44px;
  }

  .points-preface {
    width: min(100%, 620px);
    font-size: 21px;
    line-height: 1.65;
  }

  .points-list {
    gap: 18px;
  }

  .points-list img:nth-child(1),
  .points-list img:nth-child(2),
  .points-list img:nth-child(3) {
    width: min(100%, 620px);
  }

  .conditions .problem {
    padding-top: 48px;
  }

  .conditions .condition-problem--01::before,
  .conditions .condition-problem--03::after {
    display: none;
  }

  .conditions .condition-problem--02 {
    margin-top: 72px;
  }

  .conditions .condition-problem--02,
  .conditions .condition-problem--03 {
    padding: 72px 0;
  }

  .point-card-visual {
    height: 300px;
  }

  .point-card-visual--03 {
    height: 300px;
  }

  .point-detail-card {
    max-width: calc(100% - 32px);
    min-height: 0;
    margin-top: -56px;
    padding: 38px 34px 42px;
  }

  .point-detail-card--large,
  .point-detail-card--short {
    margin-top: -56px;
  }

  .point-detail-card h2 {
    font-size: 29px;
  }

  .point-detail-card p:not(.point-label) {
    font-size: 18px;
  }

  .point-profile {
    grid-template-columns: 220px 1fr;
    gap: 28px;
    margin-top: 46px;
  }

  .point-profile-cover {
    width: 220px;
    height: 322px;
  }

  .point-profile-logo {
    width: min(100%, 360px);
  }

  .point-profile h3 {
    font-size: 29px;
  }

  .section-label-img {
    width: min(100%, 520px);
    margin-bottom: 44px;
  }

  .condition-bubbles {
    gap: 12px;
  }

  .condition-bubbles div {
    width: 110px;
    font-size: 14px;
  }

  .condition-list article,
  .condition-list article:nth-child(1),
  .condition-list article:nth-child(2),
  .condition-list article:nth-child(3) {
    width: 100%;
    padding: 16px 20px;
  }

  .condition-list p {
    font-size: 21px;
  }

  .stacked-title span,
  .stacked-title strong {
    font-size: 28px;
  }

  .framed-image img {
    height: 300px;
  }

  .label-pair,
  .section-heading {
    font-size: 34px;
  }

  .content-block p,
  .feature-body p,
  .concern-block > p,
  .final-copy p {
    font-size: 18px;
  }

  .features {
    padding-block: 72px 90px;
  }

  .feature-list {
    gap: 60px;
  }

  .feature-card {
    padding: 36px 24px 42px;
  }

  .feature-number {
    font-size: 34px;
  }

  .feature-card h3,
  .feature-card h3 span {
    font-size: 28px;
  }

  .feature-body,
  .feature-body.reverse {
    grid-template-columns: 1fr;
  }

  .feature-body.reverse figure {
    order: initial;
  }

  .feature-body img {
    height: 250px;
  }

  .book-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .speech {
    min-height: 160px;
    padding: 34px 34px 38px;
  }

  .speech p {
    font-size: 27px;
  }

  .concern-block h3 {
    font-size: 31px;
  }

  .cta-over {
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(84%, 360px);
  }

  .qa-list h3 {
    align-items: flex-start;
    padding: 20px;
    font-size: 21px;
  }

  .qa-list p {
    padding: 0 20px 28px 66px;
    font-size: 17px;
  }

  .ticket-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .sp-only {
    display: inline;
  }

  .graduates .section-transition-arrow {
    width: 150px;
    height: auto;
  }

  .site-header {
    padding-inline: 14px;
  }

  .site-logo {
    width: 205px;
  }

  .header-cta {
    width: 118px;
    height: 34px;
  }

  .narrow,
  .content-block,
  .feature-list,
  .concern-block,
  .qualification,
  .qa-list,
  .final-copy,
  .ticket-card {
    width: min(100% - 28px, 480px);
  }

  .hero-inner {
    width: 100%;
    max-width: none;
    padding-top: 32px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-visual {
    display: none;
    height: 0;
    margin: 0;
  }

  .hero-student-bubble,
  .hero-copy-image {
    display: none;
  }

  .hero-mobile-copy-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin-left: 0;
  }

  .hero-main-composite {
    display: none;
  }

  .hero-copy-image {
    margin-top: 2px;
  }

  .hero-request-link {
    width: min(100% - 28px, 480px);
    margin-inline: auto;
    margin-top: 10px;
  }

  .hero-main-composite {
    width: min(172vw, 610px);
  }

  .hero-pattern-a {
    display: none;
  }

  .primary-button {
    min-height: 72px;
    font-size: 18px;
  }

  .condition-bubbles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .conditions-intro {
    width: min(100% - 32px, 390px);
    padding: 56px 0 64px;
  }

  .condition-speech {
    width: 100%;
    margin-bottom: 28px;
  }

  .condition-lead,
  .condition-body {
    font-size: 16px;
    line-height: 1.75;
  }

  .condition-intro-circles {
    grid-template-columns: 220px;
    gap: 18px;
  }

  .condition-intro-circles img {
    width: 220px;
    margin-inline: auto;
  }

  .condition-close {
    font-size: 18px;
  }

  .points-heading-img {
    width: 100%;
  }

  .points-preface {
    margin-bottom: 28px;
    font-size: 17px;
    text-align: left;
  }

  .points-list img:nth-child(1),
  .points-list img:nth-child(2),
  .points-list img:nth-child(3) {
    width: 100%;
  }

  .conditions .problem {
    padding-top: 36px;
  }

  .conditions .condition-problem--02 {
    margin-top: 56px;
  }

  .conditions .condition-problem--02,
  .conditions .condition-problem--03 {
    padding: 56px 0;
  }

  .point-card-visual {
    height: 220px;
  }

  .point-card-visual--03 {
    height: 220px;
  }

  .point-detail-card {
    max-width: 100%;
    margin-top: -36px;
    padding: 28px 20px 32px;
    outline-width: 3px;
  }

  .point-label {
    min-width: 86px;
    min-height: 28px;
    margin-bottom: 18px;
    font-size: 13px;
  }

  .point-detail-card h2 {
    font-size: 23px;
    line-height: 1.45;
  }

  .point-detail-card p:not(.point-label) {
    font-size: 16px;
    line-height: 1.7;
  }

  .point-profile {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 34px;
  }

  .point-profile-cover {
    width: min(100%, 220px);
    height: auto;
    margin-inline: auto;
  }

  .point-profile-logo {
    width: 100%;
    height: auto;
  }

  .point-profile h3 {
    font-size: 24px;
    line-height: 1.5;
  }

  .condition-bubbles div {
    width: 100%;
    font-size: 12px;
  }

  .condition-list article {
    gap: 14px;
  }

  .condition-list span {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  .condition-list p {
    font-size: 17px;
  }

  .stacked-title span,
  .stacked-title strong,
  .label-pair,
  .section-heading {
    font-size: 24px;
  }

  .framed-image img {
    height: 230px;
  }

  .content-block p {
    font-size: 16px;
  }

  .feature-card {
    box-shadow: 5px 5px 0 var(--black);
  }

  .feature-body img {
    height: 210px;
  }

  .graduate-grid {
    grid-template-columns: 1fr;
    width: min(100% - 40px, 340px);
  }

  .book-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .speech {
    border-radius: 36px;
  }

  .speech p {
    font-size: 22px;
  }

  .concern-block h3 {
    font-size: 26px;
  }

  .cta-band {
    padding: 42px 0 126px;
  }

  .cta-band > img {
    width: 960px;
    max-width: none;
    transform: translateX(-33%);
  }

  .cta-over {
    bottom: 28px;
  }

  .voice-portrait.student img {
    width: 100%;
  }

  .qa-list p {
    padding-left: 20px;
  }

  .ticket-card p {
    font-size: 17px;
  }

  .site-footer {
    padding: 24px 16px;
  }
}

@media (max-width: 900px) {
  .school-intro {
    padding-top: 72px;
    padding-bottom: 0;
  }

  .school-intro-inner {
    width: min(100% - 40px, 720px);
  }

  .school-intro-heading {
    gap: 16px;
  }

  .school-intro-label {
    padding: 10px 20px;
  }

  .school-intro-label--black,
  .school-intro-label--small {
    font-size: 28px;
  }

  .school-intro-label--large {
    font-size: 34px;
  }

  .school-main-photo {
    height: 300px;
  }

  .school-intro-copy {
    margin-top: 42px;
    font-size: 18px;
    line-height: 1.8;
  }

  .school-book-row {
    grid-template-columns: repeat(auto-fit, minmax(132px, 185px));
    gap: 10px;
    margin-top: 42px;
  }

  .school-book-row img {
    width: 100%;
    height: auto;
    aspect-ratio: 185 / 264;
  }

  .school-intro-bottom {
    margin-top: 42px;
    font-size: 24px;
  }

  .before-after {
    margin-top: 64px;
  }
}

@media (max-width: 600px) {
  .school-intro {
    padding-top: 56px;
  }

  .school-intro-inner {
    width: min(100% - 28px, 480px);
  }

  .school-intro-label {
    padding: 10px 20px;
  }

  .school-intro-label--black,
  .school-intro-label--small {
    font-size: 18px;
  }

  .school-intro-label--large {
    font-size: 22px;
  }

  .school-main-photo {
    height: 220px;
  }

  .school-intro-copy {
    font-size: 15px;
    line-height: 1.75;
  }

  .school-book-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .school-intro-bottom {
    font-size: 19px;
    line-height: 1.65;
  }
}

.features {
  padding: 108px 0 132px;
  background: #ffe55e url("../images/features-bg.png") center top / cover no-repeat;
}

.features > :not(.features-rebuild) {
  display: none;
}

.features-rebuild {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
  text-align: center;
}

.features-rebuild-heading {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin: 0 0 76px;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  color: var(--white);
}

.features-rebuild-label {
  display: inline-block;
  padding: 10px 20px;
  font-size: 52px;
  font-weight: 400;
  letter-spacing: 0;
}

.features-rebuild-label--black {
  background: var(--black);
}

.features-rebuild-label--orange {
  background: var(--vivid-orange);
}

.feature-unit {
  display: grid;
  justify-items: center;
}

.feature-unit + .feature-unit {
  margin-top: 98px;
}

.feature-unit-heading {
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-bottom: 36px;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}

.feature-index {
  margin: 0;
  color: var(--black);
  font-family: "DelaSuko Gothic One", var(--font-display);
  font-size: 48px;
  font-weight: 400;
}

.feature-badge {
  margin: 0;
  padding: 8px 16px;
  background: var(--vivid-orange);
  color: var(--white);
  font-size: 40px;
  font-weight: 400;
}

.feature-unit-heading h3 {
  margin: 0;
  padding: 8px 16px;
  background: var(--vivid-orange);
  color: var(--white);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
}

.feature-copy {
  width: min(100%, 1100px);
  margin: 0 auto 38px;
  text-align: left;
}

.feature-copy p {
  margin: 0;
  font-family: var(--font-base);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.9;
}

.feature-copy strong {
  font-weight: 800;
}

.feature-underline {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.feature-copy p + p {
  margin-top: 18px;
}

.feature-wide-visual {
  width: 1100px;
  max-width: 100%;
  margin: 0;
}

.feature-wide-visual img {
  display: block;
  width: 100%;
  height: 417px;
  object-fit: cover;
}

.feature-unit--comics .feature-wide-visual {
  position: relative;
  z-index: 1;
}

.feature-comic-strip {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 40px;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  margin: 48px calc(50% - 50vw) 0;
  overflow: hidden;
}

.feature-unit--comics .feature-comic-strip {
  margin-top: -80px;
}

.feature-comic-strip img {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 245px;
  height: 384px;
  object-fit: cover;
  border: 2px solid #000000;
}

.feature-results-frame {
  display: grid;
  place-items: center;
  width: 1100px;
  max-width: 100%;
  min-height: 531px;
  margin: 42px 0 0;
  padding: 50px;
  background: var(--cream);
}

.feature-results-card {
  display: grid;
  justify-items: center;
  align-content: center;
  width: 1000px;
  max-width: 100%;
  min-height: 431px;
  padding: 42px 75px;
  background: var(--white);
}

.feature-results-title {
  margin: 0 0 34px;
  padding: 8px 16px;
  background: var(--vivid-orange);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.feature-results-card img {
  display: block;
  width: 850px;
  height: 257px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .features {
    padding: 72px 0 90px;
  }

  .features-rebuild {
    width: min(100% - 32px, 640px);
  }

  .features-rebuild-heading {
    margin-bottom: 52px;
  }

  .features-rebuild-label {
    font-size: 22px;
  }

  .feature-unit + .feature-unit {
    margin-top: 76px;
  }

  .feature-index {
    font-size: 30px;
  }

  .feature-badge {
    font-size: 20px;
  }

  .feature-unit-heading h3 {
    font-size: 26px;
  }

  .feature-copy p {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .feature-wide-visual img {
    height: auto;
    aspect-ratio: 1100 / 417;
  }

  .feature-unit--01 .feature-wide-visual img {
    aspect-ratio: auto;
    object-fit: contain;
  }

  .feature-comic-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    margin: 36px 0 0;
    overflow: visible;
  }

  .feature-unit--comics .feature-comic-strip {
    margin: 36px 0 0;
  }

  .feature-comic-strip img {
    width: 100%;
    height: auto;
    aspect-ratio: 245 / 384;
  }

  .feature-results-frame {
    min-height: auto;
    padding: 28px;
  }

  .feature-results-card {
    min-height: auto;
    padding: 28px;
  }

  .feature-results-title {
    font-size: 24px;
  }

  .feature-results-card img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 600px) {
  .features-rebuild {
    width: min(100% - 24px, 390px);
  }

  .features-rebuild-label {
    max-width: 100%;
    font-size: 22px;
  }

  .feature-unit-heading {
    gap: 10px;
    margin-bottom: 24px;
  }

  .feature-index {
    font-size: 25px;
  }

  .feature-badge,
  .feature-unit-heading h3 {
    font-size: 22px;
  }

  .feature-comic-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .feature-unit--comics .feature-comic-strip {
    margin-top: 28px;
  }

  .feature-results-frame {
    padding: 18px;
  }

  .feature-results-card {
    padding: 20px 14px;
  }

  .feature-results-title {
    font-size: 22px;
    margin-bottom: 18px;
  }
}

@media (max-width: 900px) {
  .graduates .section-heading span,
  .graduates .section-heading strong {
    font-size: 34px;
  }

  .book-row {
    grid-template-columns: repeat(3, minmax(0, 215px));
  }

  .book-row img {
    width: 100%;
    height: auto;
    aspect-ratio: 215 / 314;
  }
}

@media (max-width: 1375px) {
  .graduate-grid {
    grid-template-columns: repeat(2, 320px);
    justify-content: center;
    width: min(100% - 48px, 680px);
  }
}

@media (max-width: 600px) {
  .graduates .section-heading span,
  .graduates .section-heading strong {
    font-size: 24px;
  }

  .graduate-grid {
    grid-template-columns: 1fr;
    width: min(100% - 40px, 340px);
  }

  .graduate-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 468;
  }

  .book-row {
    grid-template-columns: repeat(2, minmax(0, 215px));
  }
}

@media (max-width: 900px) {
  .concerns-inner {
    width: min(100% - 40px, 640px);
    gap: 76px;
  }

  .concern-question {
    width: min(100%, 520px);
  }

  .concern-question--compact {
    width: min(100%, 410px);
  }

  .concern-copy {
    font-size: 18px;
  }

  .concern-lessons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
  }

  .concern-lessons h3 {
    font-size: 20px;
  }

  .concern-lessons p {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .concerns {
    padding: 62px 0 78px;
  }

  .concerns-inner {
    width: min(100% - 24px, 390px);
    gap: 60px;
  }

  .concern-answer {
    width: min(100%, 330px);
    margin-top: 18px;
  }

  .concern-copy {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.75;
  }

  .concern-lessons {
    grid-template-columns: 1fr;
    width: min(100%, 260px);
    margin-top: 24px;
  }

  .concern-lessons h3 {
    font-size: 18px;
  }

  .concern-lessons p {
    font-size: 14px;
  }

  .concern-wide-photo,
  .concern-degree {
    margin-top: 24px;
  }
}

@media (max-width: 1200px) {
  .cta-band {
    grid-template-columns: minmax(0, 560px) 360px;
    gap: 56px;
    min-height: auto;
    padding: 72px 32px 68px;
  }

  .cta-band-copy h2 {
    font-size: 46px;
  }

  .request-pamphlet-card {
    width: 360px;
  }
}

@media (max-width: 900px) {
  .cta-band {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 64px 24px 66px;
  }

  .cta-band-copy {
    justify-self: center;
    width: min(100%, 600px);
  }

  .cta-band-copy h2 {
    margin-bottom: 30px;
    font-size: 38px;
  }

  .cta-band-copy p {
    font-size: 18px;
  }

  .request-pamphlet-card {
    justify-self: center;
    width: min(100%, 430px);
  }

  .cta-over {
    left: auto;
    bottom: auto;
    width: min(100%, 542px);
    transform: none;
  }
}

@media (max-width: 600px) {
  .cta-band {
    padding: 54px 18px 58px;
  }

  .cta-band-copy h2 {
    font-size: 31px;
    line-height: 1.38;
    text-shadow: 3px 3px 0 rgba(34, 34, 34, 0.82);
  }

  .cta-band-copy p {
    font-size: 16px;
    line-height: 1.58;
  }

  .cta-band-copy p br {
    display: none;
  }

  .cta-over {
    bottom: auto;
  }

  .cta-band > img.request-pamphlet-card {
    width: min(100%, 430px);
    max-width: 100%;
    transform: none;
  }
}

@media (max-width: 1400px) and (max-height: 820px) {
  .hero,
  .hero-inner {
    min-height: calc(100vh - 100px);
  }

  .hero-copy {
    padding-top: clamp(34px, 5vh, 58px);
    padding-bottom: 36px;
  }

  .hero-student-bubble {
    width: 280px;
  }

  .hero-copy-image {
    width: 540px;
  }

  .hero-request-link {
    width: 420px;
    margin-top: 12px;
  }

  .hero-visual {
    height: calc(100vh - 100px);
    min-height: 620px;
  }

  .hero-main-composite {
    right: -220px;
  }
}

@media (max-width: 1280px) {
  .hero-inner {
    width: min(100% - 56px, 1120px);
    grid-template-columns: minmax(440px, 500px) minmax(0, 1fr);
  }

  .hero-copy-image {
    max-width: calc(100vw - 80px);
  }

  .hero-request-link {
    max-width: calc(100vw - 96px);
  }

  .condition-intro-circles,
  .condition-checks,
  .concern-lessons {
    width: 100%;
  }

  .feature-list,
  .graduate-grid {
    max-width: calc(100vw - 48px);
  }
}

@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: minmax(390px, 460px) minmax(0, 1fr);
  }

  .hero-copy-image {
    width: 500px;
  }

  .hero-request-link {
    width: 400px;
  }

  .hero-main-composite {
    right: -220px;
  }

  .feature-wide-visual,
  .feature-results-frame {
    width: 100%;
  }

  .feature-results-card {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .hero,
  .hero-inner {
    min-height: 0;
  }

  .hero-inner {
    display: flex;
    flex-direction: column;
    width: min(100% - 40px, 760px);
    padding: 52px 0 76px;
  }

  .hero-copy {
    padding: 0;
  }

  .hero-student-bubble {
    width: min(100%, 260px);
  }

  .hero-copy-image {
    width: min(100%, 540px);
    max-width: 100%;
    margin-left: 0;
  }

  .hero-request-link {
    width: min(100%, 420px);
    max-width: 100%;
    margin-top: 12px;
  }

  .hero-visual {
    width: 100%;
    height: clamp(560px, 72vw, 700px);
    margin-top: 30px;
  }

  .hero-main-composite {
    left: 50%;
    right: auto;
    width: min(132vw, 760px);
    height: auto;
    transform: translateX(-50%);
  }

  .point-profile,
  .feature-body,
  .feature-body.reverse,
  .ticket-card {
    grid-template-columns: 1fr;
  }

  .feature-body.reverse > figure,
  .feature-body.reverse > div {
    order: initial;
  }

  .point-profile-cover {
    justify-self: center;
  }

  .school-book-row {
    grid-template-columns: repeat(auto-fit, minmax(132px, 185px));
    justify-content: center;
  }

  .book-row {
    justify-content: center;
  }
}

@media (max-width: 834px) {
  .voices-rebuild::before {
    inset: 72px 0 190px;
  }

  .voice-block--graduate .voice-section-title span,
  .voice-block--student .voice-section-title span,
  .voice-block--growth .voice-growth-title span,
  .voice-block--growth .voice-growth-title strong {
    font-size: clamp(28px, 6vw, 42px);
  }

  .voice-block--graduate .voice-section-title p,
  .voice-block--student .voice-section-title p {
    font-size: 20px;
  }

  .voice-block--student .voice-student-page {
    right: 4px;
    bottom: -44px;
    width: 160px;
  }

  .voice-block--student .voice-student-illustration {
    left: 0;
    bottom: -500px;
    width: 180px;
  }

  .voice-block.voice-block--growth {
    margin-top: 180px;
  }

  .voice-before-after {
    max-width: 100%;
    gap: 28px;
  }

  .voice-before-after img {
    width: clamp(150px, 28vw, 210px);
  }
}

@media (max-width: 700px) {
  .site-header {
    height: 68px;
    padding-inline: 14px;
  }

  main {
    padding-top: 68px;
  }

  .site-logo {
    width: clamp(170px, 48vw, 235px);
  }

  .header-cta {
    width: clamp(96px, 28vw, 126px);
    height: clamp(28px, 8vw, 36px);
  }

  .hero-inner {
    padding: 34px 0 60px;
  }

  .hero-visual {
    height: clamp(380px, 112vw, 560px);
  }

  .hero-main-composite {
    width: min(160vw, 640px);
  }

  .primary-button {
    width: min(100%, 420px);
    min-height: 64px;
    padding: 12px 20px;
    font-size: clamp(16px, 4.8vw, 20px);
  }

  .voice-block--student .voice-student-page,
  .voice-block--student .voice-student-illustration {
    display: none;
  }

  .voice-block.voice-block--growth {
    margin-top: 76px;
  }

  .voice-growth-title {
    max-width: 100%;
    margin-bottom: 56px;
  }
}

@media (max-width: 430px) {
  .site-header {
    height: 62px;
    padding-inline: 10px;
  }

  main {
    padding-top: 62px;
  }

  .site-logo {
    width: clamp(148px, 48vw, 188px);
  }

  .header-cta {
    width: clamp(92px, 30vw, 112px);
    height: 32px;
  }

  .hero-inner,
  .narrow,
  .content-block,
  .features-rebuild,
  .concerns-inner,
  .voices-inner,
  .final-copy,
  .ticket-card {
    width: min(100% - 20px, 390px);
  }

  .hero-inner {
    width: 100%;
    max-width: none;
  }

  .hero-student-bubble {
    width: min(100%, 320px);
  }

  .hero-request-link {
    width: min(100% - 28px, 480px);
  }

  .hero-visual {
    height: clamp(340px, 108vw, 480px);
    margin-top: 18px;
  }

  .hero-main-composite {
    width: min(172vw, 560px);
  }

  .condition-intro-circles {
    grid-template-columns: minmax(0, 220px);
    justify-content: center;
  }

  .condition-bubbles {
    grid-template-columns: 1fr;
  }

  .feature-badge,
  .feature-unit-heading h3,
  .features-rebuild-label,
  .voice-section-title span,
  .voice-growth-title span,
  .voice-growth-title strong {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .feature-results-frame {
    padding: 14px;
  }

  .feature-results-card {
    padding: 18px 10px;
  }

  .voice-before-after {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    margin-bottom: 72px;
  }

  .voice-before-after-arrow {
    transform: rotate(90deg);
  }

  .voice-manga-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice-manga-row img {
    width: 100%;
    height: auto;
    aspect-ratio: 92 / 144;
  }

  .final-copy-emphasis {
    text-underline-offset: 3px;
  }
}

@media (max-width: 600px) {
  .condition-lead br,
  .school-intro-bottom br {
    display: none;
  }

  .concern-panel:nth-of-type(3) .concern-copy p br:first-of-type,
  .concern-panel:nth-of-type(3) .concern-copy p br:nth-of-type(3) {
    display: none;
  }

  .condition-intro-circles {
    grid-template-columns: repeat(2, minmax(0, clamp(132px, 41vw, 200px)));
    justify-content: center;
    gap: 18px 14px;
  }

  .condition-intro-circles img {
    width: 100%;
  }

  .condition-intro-circles img:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: clamp(132px, 41vw, 200px);
  }
}

@media (max-width: 360px) {
  .site-logo {
    width: 148px;
  }

  .header-cta {
    width: 92px;
    height: 28px;
  }

  .primary-button {
    grid-template-columns: 34px 1fr 12px;
    gap: 8px;
    padding-inline: 14px;
    font-size: 15px;
  }

  .primary-button > img:first-child {
    width: 34px;
  }

  .feature-comic-strip,
  .book-row,
  .school-book-row {
    grid-template-columns: 1fr;
    width: min(100%, 220px);
    margin-inline: auto;
  }

  .concern-answer {
    width: 100%;
  }

  .cta-band {
    padding-inline: 10px;
  }
}

@media (max-width: 900px) {
  .school-intro > .before-after {
    display: block;
    height: auto;
    object-fit: contain;
  }

  .cta-band .cta-over,
  .final-cta .primary-button {
    display: block;
    width: min(100%, 542px);
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .cta-band .cta-over > img:first-child,
  .final-cta .primary-button > img:first-child,
  .final-cta .primary-button img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 899px) {
  .points-list .points-row-default {
    display: none;
  }

  .points-list .points-row-mobile {
    display: block;
    width: min(100%, 720px);
    height: auto;
  }
}

@media (max-width: 430px) {
  .points-list .points-row-mobile {
    width: 100%;
  }
}

@media (max-width: 820px) {
  #request {
    justify-items: center;
  }

  #request .cta-band-copy {
    justify-self: center;
    text-align: center;
  }

  #request .cta-over,
  #request .request-pamphlet-card {
    justify-self: center;
  }
}

@keyframes school-book-slide-left {
  to {
    transform: translateX(calc(var(--school-book-slide-distance, 1350px) * -1));
  }
}

@keyframes feature-comic-slide-left {
  to {
    transform: translateX(calc(var(--feature-comic-slide-distance, 1800px) * -1));
  }
}

@keyframes voice-manga-slide-left {
  to {
    transform: translateX(calc(var(--voice-manga-slide-distance, 1800px) * -1));
  }
}

@media (max-width: 1024px) {
  .school-book-row {
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin: 42px 0 0 50%;
    overflow: hidden;
    transform: translateX(-50%);
  }

  .school-book-row-track {
    display: flex;
    width: max-content;
    gap: 8px;
    animation: school-book-slide-left 28s linear infinite;
    will-change: transform;
  }

  .school-book-row img {
    display: block;
    flex: 0 0 auto;
    width: clamp(132px, 25vw, 185px);
    height: auto;
    aspect-ratio: 185 / 264;
    object-fit: cover;
  }

  .school-book-row img[aria-hidden="true"] {
    display: block;
  }

  .feature-comic-strip {
    display: block;
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
    transform: none;
  }

  .feature-unit--comics .feature-comic-strip {
    margin: 0 calc(50% - 50vw);
  }

  .feature-comic-strip-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: feature-comic-slide-left 32s linear infinite;
    will-change: transform;
  }

  .feature-comic-strip img {
    display: block;
    flex: 0 0 auto;
    width: clamp(160px, 31vw, 245px);
    height: auto;
    aspect-ratio: auto;
  }

  .feature-comic-strip img[aria-hidden="true"] {
    display: block;
  }

}

@media (max-width: 1366px) {
  .book-row {
    grid-template-columns: repeat(3, minmax(0, 215px));
    width: min(100% - 80px, 685px);
    justify-content: center;
  }

  .book-row img {
    width: 100%;
    height: auto;
    aspect-ratio: 215 / 314;
  }
}

@media (max-width: 1536px) {
  .feature-comic-strip {
    display: block;
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
    transform: none;
  }

  .feature-unit--comics .feature-comic-strip {
    margin: 0 calc(50% - 50vw);
  }

  .feature-comic-strip-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: feature-comic-slide-left 32s linear infinite;
    will-change: transform;
  }

  .feature-comic-strip img {
    display: block;
    flex: 0 0 auto;
    width: clamp(160px, 16vw, 245px);
    height: auto;
    aspect-ratio: auto;
  }

  .feature-comic-strip img[aria-hidden="true"] {
    display: block;
  }

  .voice-manga-row {
    display: block;
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
  }

  .voice-manga-row-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: voice-manga-slide-left 32s linear infinite;
    will-change: transform;
  }

  .voice-manga-row img {
    display: block;
    flex: 0 0 auto;
    width: clamp(132px, 16vw, 245px);
    height: auto;
    aspect-ratio: auto;
  }

  .voice-manga-row img[aria-hidden="true"] {
    display: block;
  }
}

@media (max-width: 1280px) {
  .school-book-row {
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin: 42px 0 0 50%;
    overflow: hidden;
    transform: translateX(-50%);
  }

  .school-book-row-track {
    display: flex;
    width: max-content;
    gap: 8px;
    animation: school-book-slide-left 28s linear infinite;
    will-change: transform;
  }

  .school-book-row img {
    display: block;
    flex: 0 0 auto;
    width: clamp(132px, 25vw, 185px);
    height: auto;
    aspect-ratio: 185 / 264;
    object-fit: cover;
  }

  .school-book-row img[aria-hidden="true"] {
    display: block;
  }

  .feature-comic-strip {
    display: block;
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
    transform: none;
  }

  .feature-unit--comics .feature-comic-strip {
    margin: 0 calc(50% - 50vw);
  }

  .feature-comic-strip-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: feature-comic-slide-left 32s linear infinite;
    will-change: transform;
  }

  .feature-comic-strip img {
    display: block;
    flex: 0 0 auto;
    width: clamp(160px, 31vw, 245px);
    height: auto;
    aspect-ratio: auto;
  }

  .feature-comic-strip img[aria-hidden="true"] {
    display: block;
  }

  .voice-manga-row {
    display: block;
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
  }

  .voice-manga-row-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: voice-manga-slide-left 32s linear infinite;
    will-change: transform;
  }

  .voice-manga-row img {
    display: block;
    flex: 0 0 auto;
    width: clamp(132px, 31vw, 245px);
    height: auto;
    aspect-ratio: auto;
  }

  .voice-manga-row img[aria-hidden="true"] {
    display: block;
  }
}

@media (max-width: 1100px) {
  .final-cta .ticket-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .final-cta .ticket-card img {
    justify-self: center;
  }
}