/* 体験レッスン：角の丸い大きな赤い面。左右に写真を散らし、中央に見出しとボタン */
.contact { padding: calc(var(--u) * 160) calc(var(--u) * 29) 0; }
.contact__box {
  position: relative;
  max-width: 1382px;
  height: calc(var(--u) * 719);
  margin: 0 auto;
  border-radius: calc(var(--u) * 60);
  background: var(--red);
  color: var(--on-red);
}
.contact__body {
  position: absolute;
  top: calc(var(--u) * 176);
  left: 50%;
  translate: -50% 0;
  width: calc(var(--u) * 640);
  text-align: center;
}
.contact .ttl__en { font-size: calc(var(--u) * 58); line-height: 1; }
.contact__txt {
  margin-top: calc(var(--u) * 26);
  font-size: calc(var(--u) * 24);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 14);
  width: calc(var(--u) * 418);
  height: calc(var(--u) * 95);
  margin-top: calc(var(--u) * 36);
  border-radius: 999px;
  background: var(--on-red);
  color: var(--red);
  font-size: calc(var(--u) * 26);
  letter-spacing: 0.04em;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-line svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.btn-line:hover { background: #fff; }
.contact__tel {
  margin-top: calc(var(--u) * 18);
  font-size: max(12px, calc(var(--u) * 13));
  line-height: 1.6;
}
.contact__tel a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.contact__ph {
  position: absolute;
  object-fit: cover;
  border-radius: calc(var(--u) * 18);
}
.contact__ph--1 { top: calc(var(--u) * 272); left: calc(var(--u) * 104); width: calc(var(--u) * 208); height: calc(var(--u) * 130); }
.contact__ph--2 { top: calc(var(--u) * 432); left: calc(var(--u) * 27); width: calc(var(--u) * 215); height: calc(var(--u) * 227); object-position: 40% 50%; }
.contact__ph--3 { top: calc(var(--u) * 149); right: calc(var(--u) * 28); width: calc(var(--u) * 239); height: calc(var(--u) * 255); object-position: 55% 50%; }
.contact__ph--4 { top: calc(var(--u) * 442); right: calc(var(--u) * 105); width: calc(var(--u) * 214); height: calc(var(--u) * 134); }

.footer { position: relative; }
.footer__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 14);
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
}

@media (max-width: 1023px) {
  .contact { padding: 80px 12px 0; }
  .contact__box { max-width: 600px; height: auto; padding: 50px 20px 50px; border-radius: 28px; }
  .contact__side { display: none; }
  .contact__body { position: static; translate: none; width: auto; }
  .contact .ttl__en { font-size: 34px; }
  .contact__txt { margin-top: 18px; font-size: 17px; line-height: 1.5; }
  .btn-line { width: 100%; max-width: 289px; height: 50px; gap: 8px; margin-top: 30px; font-size: 16px; }
  .btn-line svg { width: 11px; height: 11px; }
  .contact__tel { margin-top: 16px; font-size: 12px; }
  .footer__copy { bottom: 6px; font-size: 11px; }
}