@charset "UTF-8";
:root {
  --font-display: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --z-header: 100;
  --z-modal: 1000;
  --u: min(1px, calc(100vw / 1536));
  --ink: #231815;
  --yellow: #ebc948;
  --red: #dd5037;
  --white: #fff;
  --body-ink: #333;
  --line: rgba(35, 24, 21, 0.25);
  --gap: calc(24 * var(--u));
  --round: calc(16 * var(--u));
  --font-base: calc(21 * var(--u));
  --font-small: calc(16 * var(--u));
  --font-title: calc(64 * var(--u));
  --focus: 3px;
  --tap: 44px;
  --header-height: calc(88 * var(--u));
  --header-radius: calc(84 * var(--u));
  --z-campus: 10;
  --popover-inset: 8px;
  --popover-radius: 16px;
  --popover-gap: 24px;
  --popover-max-width: 340px;
  --sky: #85d1f0;
  --z-popover: 120;
}

@media (max-width: 767px) {
  :root {
    --u: 1px;
    --font-title: 28px;
    --gap: 20px;
    --round: 12px;
    --header-height: 78px;
    --header-radius: 28px;
    --font-base: 16px;
    --font-small: 14px;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--gap));
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
  color: var(--ink);
  background: var(--yellow);
  font-size: var(--font-base);
  line-height: 1.5;
  letter-spacing: 0;
}

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

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

a:hover {
  opacity: 1;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:hover {
  filter: none;
}

h2 {
  font-size: var(--font-title);
  line-height: 1.3;
}

h3 {
  font-size: calc(34 * var(--u));
}

p {
  font-weight: 500;
}

.page {
  max-width: 1536px;
  margin: auto;
  overflow: visible;
  padding-top: var(--header-height);
  padding-bottom: 0;
}

section {
  position: relative;
}

section[id],
article[id] {
  scroll-margin-top: var(--gap);
}

.placed {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  object-fit: contain;
}

.art {
  pointer-events: none;
}

.skip-link {
  position: fixed;
  left: var(--gap);
  top: var(--gap);
  z-index: var(--z-modal);
  padding: var(--gap);
  background: var(--white);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: var(--focus) solid var(--ink);
  outline-offset: var(--focus);
}

.pill {
  display: inline-block;
  padding: calc(10 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--ink);
  color: var(--yellow);
  font-size: calc(26 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.section-heading {
  text-align: center;
}

.section-logo {
  display: inline-block;
  width: calc(357 * var(--u));
  height: auto;
  vertical-align: baseline;
}

.heading-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(48 * var(--u));
}

.heading-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.1;
}

.heading-bottom em {
  font-size: calc(100 * var(--u));
  font-style: normal;
  color: var(--white);
  text-shadow: none;
}

.section-heading p {
  margin-top: calc(35 * var(--u));
  font-size: var(--font-base);
  font-weight: 700;
  line-height: 1.5;
}

.brand-mark {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 872/123;
}

.brand-mark > img {
  position: absolute;
  inset: 0 0 auto auto;
  width: 99%;
  height: 96%;
  object-fit: contain;
}

.brand-mark.section-logo {
  display: inline-block;
  width: calc(357 * var(--u));
  flex-shrink: 0;
}

.heading-bottom em img {
  display: block;
  height: 1em;
  width: auto;
  max-width: none;
}

.sp-only {
  display: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 767px) {
  .pill {
    font-size: 17px;
    padding: 8px 15px;
  }
  .section-logo {
    width: 180px;
  }
  .heading-line {
    gap: 5px;
    flex-wrap: wrap;
    font-size: 22px;
    line-height: 1.6;
  }
  .heading-bottom em {
    font-size: 58px;
  }
  .section-heading p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.85;
  }
  .brand-mark.section-logo {
    width: 180px;
  }
  .sp-only {
    display: initial !important;
  }
  .heading-bottom {
    font-size: 30px;
    gap: 4px;
    margin-top: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
.art--hero {
  --x: 57;
  --y: 62.37;
  --w: 1393.68;
  --h: 894.85;
}

.art--balloon {
  --x: 1200;
  --y: 133.525;
  --w: 226;
  --h: 388;
  z-index: calc(var(--z-campus) + 1);
}

.art--plane {
  --x: 1336;
  --y: 471.525;
  --w: 146;
  --h: 173;
}

.art--clouds-plane {
  --x: 86;
  --y: 302.525;
  --w: 153;
  --h: 100;
}

.art--clouds {
  --x: 98;
  --y: 832.525;
  --w: 81;
  --h: 40;
}

.art--reading {
  --x: 1262;
  --y: 861.736;
  --w: 130;
  --h: 335;
}

.art--racket {
  --x: 103;
  --y: 861.736;
  --w: 235;
  --h: 355;
}

.campus__room--0 {
  --left: 15.82%;
  --top: 14%;
  --width: 13.84%;
}

.campus__room--1 {
  --left: 32.97%;
  --top: 27.35%;
  --width: 16.84%;
}

.campus__room--2 {
  --left: 57.9%;
  --top: 17.4%;
  --width: 16.84%;
}

.campus__room--3 {
  --left: 67.41%;
  --top: 42.74%;
  --width: 18.34%;
}

.campus__room--4 {
  --left: 39.86%;
  --top: 54.73%;
  --width: 15.34%;
}

.campus__room--5 {
  --left: 38.66%;
  --top: 75.7%;
  --width: 18.34%;
}

.campus__room--6 {
  --left: 63.36%;
  --top: 73.35%;
  --width: 18.34%;
}

.campus__room--7 {
  --left: 15.82%;
  --top: 52.05%;
  --width: 13.84%;
}

.art--greeting-left {
  --x: 120;
  --y: -30;
  --w: 232;
  --h: 206;
}

.art--greeting-right {
  --x: 1210;
  --y: -30;
  --w: 256;
  --h: 183;
}

.art--reading,
.art--racket {
  z-index: calc(var(--z-campus) + 1);
}

.about__racket {
  position: absolute;
  left: 34.5%;
  top: 45.1%;
  width: 65.2%;
  height: 36.9%;
}

.about__girl {
  position: absolute;
  left: 0;
  top: 0;
  width: 72.5%;
  height: 100%;
}

.vector-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.vector-pair > img {
  width: 50%;
  height: 100%;
  object-fit: contain;
}

.about__cloud {
  position: absolute;
  left: 21.58%;
  top: 0.01%;
  width: 54.79%;
  height: 21.42%;
}

.about__plane {
  position: absolute;
  left: 10.4%;
  top: 30.33%;
  width: 89.6%;
  height: 55.34%;
}

.art--greeting-left.vector-pair,
.art--greeting-right.vector-pair {
  transform: none;
}

.pop-person {
  position: relative;
  display: block;
  width: 50%;
  height: 100%;
}

.pop-person__window {
  position: absolute;
  inset: -8% -8% 0;
  overflow: hidden;
  clip-path: inset(0 0 18%);
}

.pop-person__window img {
  position: absolute;
  left: 6.9%;
  bottom: 0;
  width: 86.2%;
  height: 92.6%;
  object-fit: contain;
  transform: rotate(180deg);
  transform-origin: center;
}

.pop-person__base {
  position: absolute;
  inset: -8% -8% 0;
  clip-path: inset(82% 0 0);
  pointer-events: none;
}

.pop-person__base img {
  position: absolute;
  left: 6.9%;
  bottom: 0;
  width: 86.2%;
  height: 92.6%;
  object-fit: contain;
  transform: rotate(180deg);
}

.day-bubble__piece--study-01 {
  position: absolute;
  left: 0%;
  top: 11.9639%;
  width: 83.4137%;
  height: 74.5301%;
}

.day-bubble__piece--study-02 {
  position: absolute;
  left: 43.422%;
  top: 45.7229%;
  width: 8.7361%;
  height: 10.1289%;
}

.day-bubble__piece--study-03 {
  position: absolute;
  left: 31.2731%;
  top: 44.8072%;
  width: 12.1212%;
  height: 19.8614%;
}

.day-bubble__piece--study-04 {
  position: absolute;
  left: 74.3441%;
  top: 0%;
  width: 25.655%;
  height: 63.106%;
}

.day-bubble__piece--study-05 {
  position: absolute;
  left: 39.4586%;
  top: 58.012%;
  width: 26.9688%;
  height: 41.988%;
}

.day-bubble__piece--study-06 {
  position: absolute;
  left: 72.6811%;
  top: 55.4819%;
  width: 27.0011%;
  height: 38.1964%;
}

.day-bubble__piece--study-07 {
  position: absolute;
  left: 46.6648%;
  top: 13.3735%;
  width: 16.0948%;
  height: 25.953%;
}

.day-bubble__piece--study-08 {
  position: absolute;
  left: 15.0776%;
  top: 5.5422%;
  width: 17.2635%;
  height: 44.194%;
}

.day-bubble__piece--class-01 {
  position: absolute;
  left: 0%;
  top: 3.662%;
  width: 52.9808%;
  height: 82.8761%;
}

.day-bubble__piece--class-02 {
  position: absolute;
  left: 20.5833%;
  top: 43.2676%;
  width: 58.3517%;
  height: 51.5549%;
}

.day-bubble__piece--class-03 {
  position: absolute;
  left: 36.375%;
  top: 34.169%;
  width: 11.9175%;
  height: 24.0831%;
}

.day-bubble__piece--class-04 {
  position: absolute;
  left: 25.55%;
  top: 43.0563%;
  width: 11.0283%;
  height: 23.2451%;
}

.day-bubble__piece--class-05 {
  position: absolute;
  left: 48.4417%;
  top: 32.4225%;
  width: 9.355%;
  height: 22.1746%;
}

.day-bubble__piece--class-06 {
  position: absolute;
  left: 59.7833%;
  top: 50%;
  width: 8.455%;
  height: 35.9254%;
}

.day-bubble__piece--class-07 {
  position: absolute;
  left: 43.7%;
  top: 60.4507%;
  width: 10.9158%;
  height: 38.1704%;
}

.day-bubble__piece--class-08 {
  position: absolute;
  left: 58.4583%;
  top: 0%;
  width: 29.385%;
  height: 61.2662%;
}

.day-bubble__piece--class-09 {
  position: absolute;
  left: 61.2167%;
  top: 11.6761%;
  width: 22.415%;
  height: 40.0873%;
}

.day-bubble__piece--class-10 {
  position: absolute;
  left: 84.2583%;
  top: 37.1127%;
  width: 15.0767%;
  height: 45.293%;
}

.header {
  padding: 0 calc(104 * var(--u));
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--white);
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-header);
  width: calc(1408 * var(--u));
  height: var(--header-height);
  margin: 0;
  border-width: 0 2px 2px;
  border-radius: 0 0 var(--header-radius) var(--header-radius);
  transition: transform 0.3s ease;
}

.header.is-hidden {
  transform: translateX(-50%) translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .header {
    transition: none;
  }
}

.header__brand {
  width: calc(298 * var(--u));
  flex-shrink: 0;
}

.header__schools {
  margin-left: auto;
  display: flex;
  gap: calc(32 * var(--u));
  align-items: center;
}

.header__schools img {
  width: calc(169 * var(--u));
  height: calc(32 * var(--u));
  object-fit: contain;
}

.header__schools > a {
  display: block;
  flex-shrink: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .header__schools img {
    width: clamp(104px, 13.5vw, 138px);
    height: auto;
  }
}
@media (max-width: 767px) {
  .header {
    width: calc(100% - 24px);
    padding: 12px 16px;
    flex-wrap: nowrap;
    padding-inline: 12px;
    gap: 4px;
  }
  .header__schools {
    margin-left: auto;
    gap: 6px;
  }
  .header__brand {
    flex-shrink: 0;
    width: clamp(138px, 38vw, 160px);
  }
  .header__schools img {
    width: clamp(64px, 20vw, 96px);
    height: auto;
  }
}
.hero {
  height: calc(1033 * var(--u));
}

.hero__copy {
  position: absolute;
  left: calc(312 * var(--u));
  top: calc(348 * var(--u));
  width: calc(894 * var(--u));
  text-align: center;
}

.hero__copy h1 {
  margin: calc(23 * var(--u)) calc(18 * var(--u)) calc(45 * var(--u));
}

.hero__copy p {
  font-size: calc(32 * var(--u));
  line-height: 1.4;
  font-weight: 700;
}

.hero__tagline {
  width: 100%;
  height: auto;
  font-size: calc(35 * var(--u));
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--sky);
  -webkit-text-stroke: calc(1 * var(--u)) var(--ink);
  paint-order: stroke fill;
}

.hero__copy h1 .brand-mark {
  width: 100%;
}

@media (max-width: 767px) {
  /* イラストを画面幅より広げ、左右をはみ出させる */
  .hero {
    --hero-art-w: 118vw;
    --hero-art-x: calc((100vw - var(--hero-art-w)) / 2);
    height: auto;
    min-height: 0;
    padding: 0 20px 32px;
    overflow-x: clip;
  }
  .hero > .art {
    position: relative;
    left: auto;
    top: auto;
    width: var(--hero-art-w);
    max-width: none;
    height: auto;
    margin-top: 24px;
    margin-left: calc(var(--hero-art-x) - 20px);
  }
  .hero__copy {
    top: 100px;
    left: 12%;
    position: static;
    width: auto;
  }
  .hero__tagline {
    position: absolute;
    height: auto;
    left: calc(var(--hero-art-x) + var(--hero-art-w) * 0.134);
    width: calc(var(--hero-art-w) * 0.73);
    font-size: clamp(9px, 3.07vw, 22px);
    -webkit-text-stroke: 0.35px var(--ink);
    top: calc(24px + var(--hero-art-w) * 0.1608);
  }
  .hero__copy h1 {
    position: absolute;
    margin: 0;
    left: calc(var(--hero-art-x) + var(--hero-art-w) * 0.168);
    width: calc(var(--hero-art-w) * 0.664);
    top: calc(24px + var(--hero-art-w) * 0.2568);
    transform: translateY(-50%);
  }
  .hero__copy p {
    position: static;
    font-size: 16px;
    line-height: 1.85;
    margin: 24px 0 0;
  }
}
.about {
  height: calc(1389 * var(--u));
}

.about__intro {
  text-align: center;
}

.about__intro h2 {
  margin-top: calc(26 * var(--u));
  font-feature-settings: "palt" 1;
}

.about__intro p {
  margin-top: calc(32 * var(--u));
  color: var(--body-ink);
  font-size: var(--font-base);
}

.about__caption {
  position: absolute;
  top: calc(1142 * var(--u));
  width: 100%;
  text-align: center;
  font-size: calc(14 * var(--u));
}

.about > .art {
  z-index: calc(var(--z-campus) + 1);
}

@media (max-width: 767px) {
  .about {
    height: auto;
    padding: 36px 20px 60px;
  }
  .about__intro h2 {
    margin-top: 22px;
    font-size: 24px;
    line-height: 1.6;
  }
  .about__intro h2 br {
    display: none;
  }
  .about__intro p {
    margin-top: 25px;
    font-size: 16px;
    line-height: 1.9;
    text-align: left;
  }
  .about__intro p br {
    display: none;
  }
  .about > .art {
    display: none;
  }
  .about__caption {
    position: static;
    margin-top: 12px;
    font-size: 12px;
  }
  .about__intro h2 > br:not(.sp-only) {
    display: initial;
  }
}
.campus {
  position: absolute;
  left: calc(168 * var(--u));
  top: calc(408 * var(--u));
  width: calc(1200 * var(--u));
  height: calc(718 * var(--u));
  z-index: var(--z-campus);
}

.campus__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.campus__room {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--width);
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--ink);
  border-radius: var(--round);
  box-shadow: 0 calc(4 * var(--u)) var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  background: var(--red);
  color: var(--white);
  font-size: calc(18 * var(--u));
  font-weight: 900;
  text-align: center;
  line-height: 1.3;
  font-family: var(--font-body);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.campus__room span {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  font-size: calc(14 * var(--u));
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* ＋アイコンの波紋。開いている間は×に回転 */
.campus__room span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: campus-room-ping 2s ease-out infinite;
}

.campus__room[aria-expanded="true"] span {
  transform: rotate(45deg);
}

.campus__room[aria-expanded="true"] span::after {
  animation: none;
}

@media (any-hover: hover) {
  .campus__room:hover {
    transform: translateY(calc(-2 * var(--u)));
    box-shadow: 0 calc(6 * var(--u)) var(--ink);
  }
}

.campus__room:active {
  transform: translateY(calc(2 * var(--u)));
  box-shadow: 0 calc(2 * var(--u)) var(--ink);
}

@keyframes campus-room-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
  }
  70% {
    box-shadow: 0 0 0 calc(8 * var(--u)) rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .campus__room,
  .campus__room span {
    transition: none;
  }
  .campus__room span::after {
    animation: none;
  }
}

.campus__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.campus__room[aria-expanded=true] {
  z-index: 1;
}

.campus__popover {
  left: var(--popover-left, 0px);
  top: var(--popover-top, 0px);
  border-radius: var(--popover-radius);
  background: var(--white);
  color: var(--body-ink);
  filter: drop-shadow(0 4px 0 var(--ink));
  position: fixed;
  width: max-content;
  max-width: 340px;
  z-index: var(--z-popover);
  padding: 12px 20px;
  font-size: 16px;
  line-height: 1.6;
  transform-origin: var(--pointer-left) 100%;
}

.campus__popover[hidden] {
  display: none;
}

.campus__popover p {
  font-weight: 700;
}

.campus__pointer {
  position: absolute;
  top: 100%;
  left: var(--pointer-left);
  width: 8px;
  height: 6px;
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .campus {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-top: 35px;
    flex-wrap: wrap;
    gap: 8px;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 12px;
  }
  .campus__image {
    margin-bottom: 5px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
  }
  .campus__stage {
    width: max(100%, 680px);
    height: auto;
    aspect-ratio: 1200/718;
  }
  .campus__room {
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    min-height: var(--tap);
    padding: 7px 5px;
    gap: 4px;
    border-radius: var(--round);
    font-size: 11px;
    line-height: 1.3;
  }
  .campus__room br {
    display: initial;
  }
  .campus__room span {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  .campus__popover {
    width: max-content;
    font-size: 14px;
    padding: 12px 16px;
  }
}
.facts {
  position: absolute;
  top: calc(1176 * var(--u));
  left: calc(294 * var(--u));
  width: calc(949 * var(--u));
  padding: var(--gap);
  display: flex;
  gap: var(--gap);
  border: 1px dashed var(--ink);
  font-size: calc(14 * var(--u));
}

.facts > div {
  border-right: 1px solid var(--line);
  padding-right: var(--gap);
  flex: 1 1 0;
  min-width: 0;
}

.facts > div:last-child {
  border: 0;
  padding: 0;
}

.facts dt {
  font-weight: 700;
  font-size: var(--font-small);
  margin-bottom: calc(16 * var(--u));
}

.facts dt:before {
  content: "♦";
  color: var(--red);
  margin-right: calc(8 * var(--u));
}

.facts small {
  font-size: calc(12 * var(--u));
}

@media (max-width: 767px) {
  .facts {
    position: static;
    width: 100%;
    display: grid;
    padding: 16px;
    margin-top: 22px;
    font-size: 14px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .facts > div {
    border: 0;
    padding: 0;
    min-width: 0;
  }
  .facts > div:first-child {
    grid-column: 1/-1;
  }
  .facts dt {
    margin-bottom: 8px;
    font-size: 15px;
  }
  .facts small {
    font-size: 12px;
    line-height: 1.7;
  }
}
.experiences {
  height: calc(1801 * var(--u));
}

.experience-grid {
  position: absolute;
  left: calc(128 * var(--u));
  top: calc(278 * var(--u));
  width: calc(1280 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(64 * var(--u));
}

.experience-grid:before {
  content: "";
  position: absolute;
  left: 50%;
  height: 100%;
  border-left: 1px dashed var(--ink);
}

.experience {
  position: relative;
  height: calc(672 * var(--u));
  padding: calc(43 * var(--u)) calc(28 * var(--u));
  border-bottom: 1px dashed var(--ink);
}

.experience:nth-child(n+3) {
  border-bottom: 0;
  padding-top: calc(70 * var(--u));
}

.experience__text {
  position: relative;
  margin-left: calc(119 * var(--u));
}

.experience__english {
  position: absolute;
  right: calc(100% + 32 * var(--u));
  top: calc(-16 * var(--u));
  font-weight: 900;
  font-size: calc(64 * var(--u));
  line-height: 1;
  color: var(--white);
  text-shadow: none;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.experience__number {
  display: flex;
  gap: calc(12 * var(--u));
  align-items: center;
  margin-bottom: calc(40 * var(--u));
  height: calc(43 * var(--u));
}

.experience__number b {
  font-size: calc(48 * var(--u));
  line-height: 1;
  color: var(--white);
  text-shadow: none;
}

.experience h3 {
  font-weight: 700;
  line-height: 1.3;
  font-feature-settings: "palt" 1;
}

.experience p {
  font-size: var(--font-small);
  line-height: 1.68;
  font-weight: 700;
  margin-top: calc(26 * var(--u));
  white-space: nowrap;
  font-feature-settings: "palt" 1;
}

.experience__art {
  position: absolute;
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  top: calc(348 * var(--u));
  display: flex;
  gap: calc(20 * var(--u));
  align-items: flex-start;
  justify-content: space-between;
}

.experience__art img {
  width: 49%;
  height: calc(250 * var(--u));
  object-fit: contain;
}

.experience--discover .experience__art,
.experience--connect .experience__art {
  top: calc(8 * var(--u));
}

.experience--discover .experience__text {
  margin-top: calc(269 * var(--u));
}

.experience--connect .experience__text {
  margin-top: calc(260 * var(--u));
}

.experience--support .experience__art {
  top: calc(419 * var(--u));
}

.experience__number b img {
  display: block;
  height: 0.9em;
  width: auto;
  max-width: none;
}

.experience__english img {
  display: block;
  width: 0.86em;
  height: auto;
  max-width: none;
}

@media (max-width: 767px) {
  .experiences {
    height: auto;
    padding: 0 20px 75px;
  }
  .experience-grid {
    position: static;
    width: 100%;
    display: block;
    margin-top: 40px;
  }
  .experience-grid:before {
    display: none;
  }
  .experience, .experience:nth-child(n+3) {
    height: auto;
    border-bottom: 1px dashed var(--ink);
    min-height: 0;
    padding: 36px 0;
  }
  .experience:last-child {
    border-bottom: 0;
  }
  .experience__text,
  .experience--discover .experience__text,
  .experience--connect .experience__text {
    margin: 0 0 0 52px;
    margin-left: 42px;
  }
  .experience__english {
    top: 0;
    font-size: 30px;
    right: calc(100% + 12px);
  }
  .experience__number {
    height: auto;
    margin-bottom: 24px;
    gap: 12px;
  }
  .experience__number b {
    font-size: 32px;
  }
  .experience p {
    white-space: normal;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.85;
  }
  .experience p br {
    display: none;
  }
  .experience__art,
  .experience--discover .experience__art,
  .experience--support .experience__art,
  .experience--connect .experience__art {
    position: static;
    margin-top: 28px;
    gap: 12px;
  }
  .experience h3 {
    font-size: 23px;
    line-height: 1.55;
  }
  .experience__art {
    width: 100%;
  }
  .experience__art img {
    width: calc(50% - 6px);
    height: auto;
  }
}
.days {
  height: calc(1087 * var(--u));
  padding-top: calc(18 * var(--u));
  background: var(--white);
  border-radius: 0;
  isolation: isolate;
}

.days:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: calc(110 * var(--u));
  border-radius: 0;
  background: var(--yellow);
  mask: url(../img/days-curve.svg) center/100% 100% no-repeat;
}

.days .section-heading {
  position: relative;
  z-index: 1;
}

.days__grid {
  position: absolute;
  top: calc(339 * var(--u));
  left: calc(128 * var(--u));
  right: calc(128 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(40 * var(--u));
}

.day {
  position: relative;
  height: calc(644 * var(--u));
  border: calc(4 * var(--u)) solid var(--yellow);
  border-radius: calc(32 * var(--u));
  background: var(--yellow);
}

.day__art {
  position: absolute;
  left: 50%;
  top: calc(-44 * var(--u));
  transform: translateX(-50%);
  width: calc(148 * var(--u));
  height: calc(88 * var(--u));
  object-fit: contain;
}

.day__head {
  height: calc(151 * var(--u));
  padding-top: calc(48 * var(--u));
  background: var(--white);
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  text-align: center;
}

.day__head h3 {
  font-size: calc(32 * var(--u));
}

.day__head p {
  font-size: var(--font-small);
  font-weight: 700;
  margin-top: calc(10 * var(--u));
}

.day ol {
  list-style: none;
  padding: 0;
  width: calc(320 * var(--u));
  margin: calc(40 * var(--u)) auto;
}

.day li {
  position: relative;
  margin-bottom: calc(25 * var(--u));
  border-radius: calc(12 * var(--u));
  padding: calc(20 * var(--u)) calc(8 * var(--u));
  text-align: center;
  background: var(--ink);
  color: var(--yellow);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

.day li:not(:last-child):after {
  content: "";
  position: absolute;
  top: calc(100% + 8 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: calc(7 * var(--u)) solid transparent;
  border-right: calc(7 * var(--u)) solid transparent;
  border-top: calc(9 * var(--u)) solid var(--ink);
}

.day__art.vector-pair > img {
  height: 100%;
  object-fit: contain;
}

.day-bubble {
  position: absolute;
  top: calc(652 * var(--u));
  left: calc(52 * var(--u));
  width: calc(211 * var(--u));
  height: calc(170 * var(--u));
  z-index: 2;
  text-align: center;
}

.day-bubble--two {
  top: calc(524 * var(--u));
  left: calc(1276 * var(--u));
  width: calc(200 * var(--u));
  height: calc(164 * var(--u));
}

.day-bubble__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.day-bubble p {
  position: relative;
  font-size: calc(12 * var(--u));
  line-height: 1.3;
  margin: calc(36 * var(--u)) 0 calc(12 * var(--u));
}

.day-bubble__art {
  display: block;
  position: relative;
  width: calc(115 * var(--u));
  height: calc(72 * var(--u));
  object-fit: contain;
  margin: auto;
}

.days:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(0 -100vmax);
}

.day-bubble--one .day-bubble__shape {
  transform: scaleX(-1);
}

@media (max-width: 767px) {
  .days {
    height: auto;
    padding: 35px 20px 45px;
  }
  .days:before {
    display: none;
  }
  .days > .art {
    display: none;
  }
  .days__grid {
    position: static;
    display: block;
    margin-top: 65px;
  }
  .day {
    height: auto;
    margin-top: 65px;
    border-width: 3px;
    border-radius: 24px;
    padding-bottom: 20px;
  }
  .day__head {
    height: auto;
    padding: 45px 12px 24px;
    border-radius: 21px 21px 0 0;
  }
  .day__art {
    width: 125px;
    height: 80px;
    top: -40px;
  }
  .day ol {
    margin: 25px auto 0;
    width: 90%;
  }
  .day li {
    padding: 15px 6px;
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.5;
  }
  .day li:last-child {
    margin-bottom: 0;
  }
  .day-bubble {
    display: none;
  }
  .day__head h3 {
    font-size: 21px;
    line-height: 1.5;
  }
  .day__head p {
    font-size: 14px;
    line-height: 1.7;
  }
  .day li:not(:last-child):after {
    top: calc(100% + 8px);
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 8px;
  }
}
.faq {
  padding: calc(104 * var(--u)) calc(128 * var(--u)) 0;
}

.faq__heading {
  width: calc(771 * var(--u));
  height: auto;
  margin: auto;
  display: block;
  position: relative;
  min-height: calc(119 * var(--u));
}

.faq__list {
  margin-top: calc(64 * var(--u));
  font-family: "Zen Maru Gothic", var(--font-body);
}

.faq__item {
  padding: calc(20 * var(--u)) calc(40 * var(--u));
  margin-bottom: calc(12 * var(--u));
  background: var(--white);
  border-radius: var(--round);
}

.faq__question {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  font-size: var(--font-base);
  font-weight: 500;
  line-height: 1.67;
}

.faq__q {
  font-size: calc(36 * var(--u));
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}

.faq__toggle {
  margin-left: auto;
  line-height: 1;
  color: var(--red);
  font-size: calc(40 * var(--u));
  font-weight: 900;
}

.faq__question[aria-expanded=true] .faq__toggle {
  font-size: 0;
}

.faq__question[aria-expanded=true] .faq__toggle:after {
  content: "−";
  font-size: calc(40 * var(--u));
}

.faq__answer {
  display: flex;
  gap: calc(16 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: var(--gap);
  background: var(--yellow);
  border-radius: var(--round);
  font-size: calc(18 * var(--u));
  line-height: 1.67;
  overflow: hidden;
}

.faq__answer[hidden] {
  display: none;
}

.faq__a {
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  flex-shrink: 0;
}

.faq__heading-art {
  position: absolute;
  inset: 0;
  background: url(../img/faq-heading-art.svg) center/100% 100% no-repeat;
  mask: linear-gradient(to right, #000 0 13%, transparent 13% 86%, #000 86%);
  pointer-events: none;
}

.faq__heading-text {
  position: relative;
  display: block;
  text-align: center;
  padding: 0 13%;
  font-weight: 900;
  font-size: calc(48 * var(--u));
  line-height: 1.15;
}

.faq__heading-text > span {
  font-size: calc(64 * var(--u));
}

@media (max-width: 767px) {
  .faq {
    padding: 48px 20px 0;
  }
  .faq__heading {
    width: 100%;
    height: auto;
    min-height: 80px;
  }
  .faq__list {
    margin-top: 28px;
  }
  .faq__item {
    padding: 14px;
    margin-bottom: 10px;
  }
  .faq__question {
    gap: 10px;
    min-height: 44px;
    font-size: 16px;
    line-height: 1.65;
    align-items: flex-start;
  }
  .faq__q {
    font-size: 26px;
  }
  .faq__toggle,
  .faq__question[aria-expanded=true] .faq__toggle:after {
    font-size: 28px;
  }
  .faq__answer {
    gap: 10px;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.85;
    padding: 14px 10px;
  }
  .faq__a {
    width: 26px;
    height: 26px;
  }
  .faq__q,
  .faq__toggle {
    flex-shrink: 0;
  }
  .faq__answer p {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .faq__heading-text {
    padding: 0 10%;
    font-size: clamp(18px, 4.6vw, 28px);
  }
  .faq__heading-art {
    mask: linear-gradient(to right, #000 0 10%, transparent 10% 90%, #000 90%);
  }
  .faq__heading-text > span {
    font-size: clamp(25px, 6.2vw, 36px);
  }
}
.contact {
  text-align: center;
  padding-top: calc(90 * var(--u));
}

.contact h2 {
  font-size: calc(48 * var(--u));
  line-height: 1.4;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(40 * var(--u));
  width: calc(1064 * var(--u));
  margin: calc(72 * var(--u)) auto 0;
}

.contact__school h3 {
  font-size: calc(24 * var(--u));
  font-weight: 700;
  margin-bottom: calc(40 * var(--u));
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  width: 100%;
  min-height: calc(105 * var(--u));
  padding: var(--gap);
  border: 1px solid var(--ink);
  border-radius: var(--round);
  box-shadow: 0 calc(8 * var(--u)) var(--ink);
  background: var(--red);
  color: var(--white);
  font-size: calc(32 * var(--u));
  font-weight: 900;
  text-decoration: none;
}

.cta img {
  width: calc(20 * var(--u));
  height: calc(16 * var(--u));
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .contact {
    padding: 50px 20px 0;
  }
  .contact__grid {
    width: 100%;
    display: block;
    margin-top: 35px;
  }
  .contact__school {
    margin-top: 36px;
  }
  .contact__school h3 {
    margin-bottom: 20px;
    font-size: 18px;
  }
  .cta {
    min-height: 70px;
    padding: 18px;
    font-size: 21px;
  }
  .cta img {
    width: 18px;
    height: 15px;
  }
  .contact h2,
  .contact .heading-line {
    font-size: 22px;
    line-height: 1.65;
  }
}
.footer {
  text-align: center;
  font-size: calc(14 * var(--u));
  padding-top: calc(100 * var(--u));
}

.footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(32 * var(--u));
  margin-bottom: calc(40 * var(--u));
}

.footer__links a {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--font-small);
  text-decoration: none;
}

.footer__links img {
  width: calc(20 * var(--u));
  height: calc(16 * var(--u));
}

.footer__illustration {
  overflow: hidden;
  margin-top: calc(60 * var(--u));
  padding-left: calc(137 * var(--u));
  height: auto;
}

.footer__illustration img {
  width: calc(1314 * var(--u));
  height: auto;
  display: block;
}

.footer__links a:hover,
.footer__links a:focus-visible {
  text-decoration: underline;
  opacity: 1;
}

@media (max-width: 767px) {
  .footer__links {
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
  }
  .footer__links a {
    min-height: 30px;
    font-size: 13px;
  }
  .footer__links img {
    width: 16px;
    height: 13px;
  }
  .footer__illustration {
    padding: 0 15px;
    margin-top: 40px;
  }
  .footer__illustration img {
    width: 100%;
  }
  .footer {
    padding-top: 55px;
    font-size: 12px;
  }
}