:root {
  --red: #c72f22;
  --yellow: #ffd600;
  --blue: #0757a6;
  --beige: #f5f0e4;
  --gold: #9e8656;
  --gold-dark: #806a3f;
  --ink: #111;
  --white: #fff;
  --field: #efefef;
  --muted: #888;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #dce3e8 url('../images/pc-background.jpg') center top / cover no-repeat fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.is-scroll-locked { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; width: 100%; height: auto; }

.lp-shell { min-height: 100vh; }
.lp {
  width: min(100%, 416px);
  margin: 0 auto;
  background: var(--beige);
  box-shadow: 0 0 20px rgba(0,0,0,.16);
  overflow: hidden;
  position: relative;
  padding-bottom: 35px;
}
.image-block { position: relative; line-height: 0; background: var(--beige); }
.image-block img { width: 100%; }
.image-hotspot { position: absolute; display: block; z-index: 2; }
.image-hotspot:focus-visible { outline: 4px solid #1664ff; outline-offset: 2px; }
.hero-cta-hotspot { left: 5.20%; top: 19.53%; width: 89.60%; height: 1.68%; border-radius: 999px; }
.inline-form-cta-hotspot { left: 14.30%; top: 97.16%; width: 71.50%; height: 2.50%; border-radius: 999px; }
.footer-cta-hotspot { left: 0; bottom: 0; width: 100%; height: 9.5%; }

/* PAGE TOP hotspot */
.page-top-hotspot {
  right: 4.5%;
  top: 7%;
  width: 31%;
  height: 27%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.coded-section { position: relative; background: var(--beige); }
.section-inner { padding: 42px 20px; }
.section-kicker {
  margin: 0;
  text-align: center;
  color: rgba(173,149,95,.17);
  font-size: 54px;
  font-weight: 950;
  line-height: .9;
  letter-spacing: -.04em;
  transform: skew(-8deg);
}
.section-title {
  margin: -17px 0 20px;
  text-align: center;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: .02em;
}
.red-text { color: var(--red); }

/* RECORD */
.record-section {
  padding-bottom: 82px;
}
.record-inner {
  padding: 0 16px;
}
.record-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  width: 89%;
  margin: 0;
  position: relative;
  z-index: 2;
}
.record-tab {
  appearance: none;
  min-height: 60px;
  border: 2px solid var(--gold);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 10px 5px 8px;
  background: #e5dcc7;
  color: #111;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  cursor: pointer;
  position: relative;
  top: 2px;
}
.record-tab + .record-tab {
  margin-left: -2px;
}
.record-tab.is-active {
  min-height: 74px;
  padding-top: 18px;
  background: #fff;
  z-index: 2;
}
.record-panel {
  margin-top: -2px;
  border: 2px solid var(--gold);
  border-radius: 0 24px 24px 24px;
  background: #fff;
  padding: 28px 20px 22px;
  min-height: 140px;
}
.record-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.record-list li {
  position: relative;
  padding: 0 0 19px 28px;
  font-size: 14px;
  line-height: 1.55;
}
.record-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
}
.record-list li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 20px;
  bottom: -2px;
  border-left: 2px dotted #d7d7d7;
}
.record-list li:last-child::after {
  display: none;
}
.record-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 900;
}
.record-list span {
  display: block;
}
.record-more-item {
  display: none;
}
.record-panel.is-expanded .record-more-item {
  display: block;
}
.record-teaser-item {
  opacity: .18;
  padding-bottom: 2px !important;
}
.record-teaser-item span {
  display: none;
}
.record-panel.is-expanded .record-teaser-item {
  opacity: 1;
  padding-bottom: 19px !important;
}
.record-panel.is-expanded .record-teaser-item span {
  display: block;
}
.more-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82%;
  min-height: 54px;
  margin: 10px auto 0;
  padding: 8px 52px 8px 24px;
  border: 2px solid #111;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.20);
}
.more-button span {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}
.record-pending {
  padding: 14px 2px;
  text-align: center;
}


/* CHECKBACK: RECORD / SCHOOL typography */
.record-section,
.school-section {
  font-family: "Hiragino Maru Gothic ProN", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: .015em;
}

.school-card dl {
  font-size: 12.5px;
}

.school-card dd {
  font-weight: 500;
}

.school-note {
  display: block;
  margin-top: 4px;
  color: #d52b1e;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
}

/* SCHOOL */
.school-inner { padding: 0 16px; }
.school-area-caption { margin: 0 0 9px; text-align: center; font-size: 14px; font-weight: 900; }
.school-area-banner {
  width: fit-content;
  margin: 0 0 18px -20px;
  transform: rotate(-4deg);
  font-weight: 950;
  line-height: 1.1;
}
.school-area-banner span,
.school-area-banner strong { display: block; width: fit-content; padding: 4px 9px; color: #fff; background: var(--red); }
.school-area-banner strong { color: var(--yellow); font-size: 20px; margin-top: 3px; }
.school-accordion { display: grid; gap: 12px; }
.school-area { border-radius: 20px; overflow: hidden; border: 2px solid var(--gold); background: #fff; }
.school-area:not(.is-open) { border: 0; border-radius: 999px; }
.school-area-toggle {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: var(--gold);
  color: #fff;
  padding: 8px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 950;
  cursor: pointer;
  position: relative;
}
.school-area-toggle > span:first-child {
  display: block;
  width: 100%;
  text-align: center;
}
.toggle-mark {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: #111;
  font-size: 21px;
  font-weight: 950;
  line-height: 1;
}
.school-area-panel { padding: 14px 14px 18px; background: #fff; }
.school-card { padding: 4px 2px 16px; background: #fff; }
.school-card + .school-card { margin-top: 18px; padding-top: 20px; border-top: 5px dotted #d4d4d4; }
.school-card h3 {
  margin: 0 0 13px;
  border-radius: 999px;
  background: #ece5d3;
  padding: 5px 10px;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
}
.school-card dl { margin: 0; display: grid; gap: 7px; font-size: 12px; line-height: 1.5; }
.school-card dl > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}
.school-card dt {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  font-weight: 900;
  color: #222;
}
.school-card dt::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.school-card dl > div:nth-child(1) dt::before { background-image: url('../images/school-icon-venue.svg'); }
.school-card dl > div:nth-child(2) dt::before { background-image: url('../images/school-icon-address.svg'); }
.school-card dl > div:nth-child(3) dt::before { background-image: url('../images/school-icon-calendar.svg'); }
.school-card dl > div:nth-child(4) dt::before { background-image: url('../images/school-icon-clock.svg'); }
.school-card dl > div:nth-child(5) dt::before { background-image: url('../images/school-icon-person.svg'); }
.school-card dd { margin: 0; min-width: 0; }
.yellow-cta {
  margin: 16px auto 0;
  width: 90%;
  min-height: 48px;
  padding: 6px 46px 6px 16px;
  border-radius: 999px;
  background: var(--yellow);
  border: 2px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.3;
  box-shadow: 0 5px 0 #c8c8c8;
}
.yellow-cta span {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111;
  color: #fff;
  font-size: 18px;
}
.pending-copy { margin: 0; font-size: 12px; color: #706955; line-height: 1.7; }

/* FORM */
.entry-section { background: var(--beige); padding-bottom: 10px; }
.entry-guide {
  margin: 0;
  padding: 18px 20px 26px;
  background: var(--beige);
  font-size: 14px;
  line-height: 1.9;
  font-weight: 600;
}
.entry-guide p { margin: 0; }
.entry-inner { padding: 0 16px 32px; }
.entry-form {
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 24px;
  padding: 28px 16px 22px;
  box-shadow: none;
}
.form-row { margin: 0 0 21px; padding: 0; border: 0; }
.form-row label, .form-label, .form-row legend {
  display: block;
  margin-bottom: 7px;
  font-weight: 900;
  font-size: 13px;
}
.form-row em {
  display: inline-block;
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  padding: 5px 6px;
  margin-left: 4px;
  color: #fff;
  background: var(--red);
  border-radius: 0;
  vertical-align: 2px;
}
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row input[type="date"],
.form-row select,
.form-row textarea {
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: var(--field);
  padding: 13px 12px;
  color: #222;
  outline: 1px solid transparent;
  transition: outline-color .15s, background .15s;
  min-height: 47px;
  font-size: 12px;
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: #aaa; opacity: 1; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { outline: 2px solid var(--red); background: #fff; }
.form-row textarea { resize: vertical; min-height: 178px; }
.form-row small { display: block; margin-top: 7px; font-size: 10px; color: #333; line-height: 1.7; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.address-stack { display: grid; gap: 9px; }
.inline-label { display: grid !important; grid-template-columns: 70px 1fr; gap: 7px; align-items: center; margin: 0 !important; font-weight: 500 !important; }
.inline-label > span { font-size: 11px; }
.inline-label select,
.inline-label input { min-width: 0; }
.radio-group { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.radio-group-stack { display: grid; gap: 7px; }
.radio-group label { margin: 0; font-weight: 500; font-size: 12px; }
.radio-group input { accent-color: var(--red); width: 18px; height: 18px; vertical-align: -4px; }
.form-error { min-height: 1em; margin: 5px 0 0; color: #c5211d; font-size: 10px; font-weight: 700; }
[aria-invalid="true"] { outline: 2px solid #c5211d !important; background: #fff4f3 !important; }
.privacy-copy { margin: 24px 0 16px; text-align: center; font-size: 10px; line-height: 1.8; }
.privacy-copy h3 { margin: 0 0 13px; font-size: 14px; line-height: 1.55; }
.privacy-copy p { text-align: left; margin: 7px 0; }
.privacy-copy a { color: #0757a6; text-decoration: underline; }
.privacy-row { padding-top: 4px; }
.privacy-check {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  border-radius: 7px;
  background: var(--field);
  padding: 13px 12px;
  font-weight: 500 !important;
  line-height: 1.55;
}
.privacy-check input { margin-top: 3px; transform: scale(1.08); accent-color: var(--red); flex: 0 0 auto; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-message { margin: 0 0 12px; color: #c5211d; text-align: center; font-size: 11px; font-weight: 700; }
.form-message.is-success { color: #137333; }
.submit-button {
  width: 88%;
  min-height: 54px;
  margin: 0 auto;
  border: 2px solid #111;
  border-radius: 999px;
  background: var(--yellow);
  color: #111;
  padding: 11px 51px 11px 20px;
  position: relative;
  display: block;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 4px 0 #bdbdbd;
}
.submit-button span {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111;
  color: #fff;
  font-size: 18px;
}
.submit-button:disabled { opacity: .6; cursor: wait; }
.submit-note { margin: 14px 0 0; font-size: 9px; line-height: 1.65; }



/* PRIVACY POLICY MODAL */
.privacy-modal { position: fixed; inset: 0; z-index: 10020; display: none; align-items: center; justify-content: center; padding: 18px; }
.privacy-modal.is-open { display: flex; }
.privacy-modal__bg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0,0,0,.68); cursor: pointer; }
.privacy-modal__dialog { position: relative; z-index: 1; width: min(94vw, 760px); max-height: calc(100vh - 36px); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 18px 55px rgba(0,0,0,.32); }
.privacy-modal__scroll { max-height: calc(100vh - 36px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 34px 28px 40px; }
.privacy-modal__close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #efefef; color: #222; font-size: 26px; line-height: 1; cursor: pointer; }
.privacy-modal__scroll > h2 { margin: 0 42px 28px 0; color: #11406b; font-size: 24px; line-height: 1.45; }
.privacy-policy-content { color: #222; font-size: 14px; line-height: 1.9; }
.privacy-policy-content h3 { margin: 36px 0 18px; padding: 10px 8px; border-top: 3px double #11406b; border-bottom: 3px double #11406b; color: #11406b; font-size: 21px; line-height: 1.45; text-align: center; }
.privacy-policy-content h3:first-child { margin-top: 0; }
.privacy-policy-content h4 { margin: 28px 0 8px; padding-bottom: 5px; border-bottom: 1px solid #11406b; color: #11406b; font-size: 16px; line-height: 1.55; }
.privacy-policy-content h5 { margin: 18px 0 5px; color: #222; font-size: 14px; line-height: 1.6; }
.privacy-policy-content p { margin: 0 0 14px; }
.privacy-policy-content ol { margin: 8px 0 18px; padding-left: 1.65em; }
.privacy-policy-content li { margin-bottom: 6px; }
.privacy-policy-sign { margin: 28px 0 !important; font-size: 12px; text-align: right; }
@media (max-width: 640px) {
  .privacy-modal { padding: 10px; }
  .privacy-modal__dialog, .privacy-modal__scroll { max-height: calc(100vh - 20px); }
  .privacy-modal__dialog { width: min(100%, 520px); border-radius: 14px; }
  .privacy-modal__scroll { padding: 28px 17px 32px; }
  .privacy-modal__close { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 23px; }
  .privacy-modal__scroll > h2 { margin-right: 38px; font-size: 19px; }
  .privacy-policy-content { font-size: 12px; line-height: 1.8; }
  .privacy-policy-content h3 { font-size: 17px; }
  .privacy-policy-content h4 { font-size: 14px; }
  .privacy-policy-content h5 { font-size: 12px; }
}

/* CONFIRM MODAL */
.confirm-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 18px; }
.confirm-modal.is-open { display: flex; }
.confirm-modal-bg { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0,0,0,.62); cursor: pointer; }
.confirm-dialog { width: min(100%, 520px); max-height: calc(100vh - 36px); overflow: auto; position: relative; z-index: 1; background: #fff; border-radius: 18px; padding: 24px 18px 20px; }
.confirm-dialog h2 { margin: 0 0 18px; text-align: center; font-size: 22px; }
.confirm-close { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eee; font-size: 24px; cursor: pointer; }
.confirm-list { margin: 0 0 20px; }
.confirm-list > div { padding: 10px 0; border-bottom: 1px solid #e7e7e7; }
.confirm-list dt { font-size: 11px; color: #777; font-weight: 700; }
.confirm-list dd { margin: 3px 0 0; white-space: pre-wrap; font-size: 14px; }
.confirm-actions { display: grid; gap: 10px; }
.confirm-actions .submit-button { width: 100%; }
.confirm-back { min-height: 48px; border: 1px solid #999; border-radius: 999px; background: #fff; cursor: pointer; }

@media (max-width: 640px) {
  body { background: var(--beige); }
  .lp { width: 100%; max-width: 416px; box-shadow: none; }
}

@media (min-width: 641px) {
  .lp { min-height: 100vh; }
}



/* PC FIXED CLUB LOGO
   支給されたロゴなし背景 + 透過ロゴを別レイヤーで使用。
   デザイン上の見え位置は左約50px / 上約35px。
   中央LP（416px）へ接近する幅では自動的に非表示。 */
.pc-fixed-logo {
  display: none;
}

@media (min-width: 751px) {
  .pc-fixed-logo {
    display: block;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 30;
    width: 160px;
    pointer-events: none;
    user-select: none;
  }

  .pc-fixed-logo img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* FOLLOWING TRIAL CTA
   ページ最上部では非表示。スクロール後に下からスライド表示し、
   PCでも中央のSP幅LPにだけ追尾する。 */
.floating-trial-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 900;
  width: min(100%, 416px);
  transform: translate(-50%, calc(100% + 12px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .38s cubic-bezier(.22, .72, .25, 1),
    opacity .25s ease,
    visibility 0s linear .38s;
  filter: drop-shadow(0 -2px 5px rgba(0, 0, 0, .12));
}
.floating-trial-cta.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .38s cubic-bezier(.22, .72, .25, 1),
    opacity .25s ease,
    visibility 0s;
}
.floating-trial-cta__link {
  display: block;
  width: 100%;
}
.floating-trial-cta img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .floating-trial-cta { transition: none; }
}


@media (max-width: 430px) {
  .school-card dl > div { grid-template-columns: 101px minmax(0, 1fr); gap: 5px; }
  .school-card dt { grid-template-columns: 18px minmax(0, 1fr); gap: 5px; }
  .school-card dt::before { width: 18px; height: 18px; }
}


@media (max-width: 640px) {
    .lp {
        max-width: 100%;
    }
}