/* =================================================================
   白樺湖スノーアカデミー — 下層ページ共通スタイル
   (loads after style.css)
   ================================================================= */

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.page-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover; }
.page-hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,44,70,0.40) 0%, rgba(20,44,70,0.55) 55%, rgba(20,44,70,0.78) 100%);
}
.page-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gutter);
  padding-bottom: clamp(44px, 6vw, 76px);
  padding-top: 140px;
}
.page-hero__en {
  font-family: var(--font-en); font-weight: 500;
  font-size: clamp(0.74rem, 1.4vw, 0.9rem); letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--ice-soft);
}
.page-hero__title {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: 0.08em; line-height: 1.4;
  margin-top: 16px; text-shadow: 0 2px 24px rgba(10,24,40,0.35);
}
.page-hero__lead { margin-top: 20px; max-width: 44em; color: rgba(255,255,255,0.9); line-height: 2; font-size: 0.98rem; }

/* ---------- Active nav (sub-pages) ---------- */
.gnav__link.is-active { color: var(--navy); }
.is-solid .gnav__link.is-active { color: var(--navy); }
.gnav__link.is-active::after { width: 100%; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { background: var(--mist); border-bottom: 1px solid var(--line); }
.breadcrumb--no-hero { margin-top: 92px; }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 16px var(--gutter);
  max-width: var(--maxw); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 0.78rem; color: var(--ink-sub); letter-spacing: 0.05em;
}
.breadcrumb a { color: var(--ink-sub); transition: color .3s var(--ease); }
.breadcrumb a:hover { color: var(--ice); }
.breadcrumb li:not(:last-child)::after { content: "／"; margin-left: 10px; color: var(--line); }
.breadcrumb li[aria-current] { color: var(--navy); }
.breadcrumb li { white-space: nowrap; }

/* ---------- Generic prose / lead ---------- */
.lead-block { max-width: 42em; }
.lead-block .eyebrow { margin-bottom: 18px; }
.prose p { margin-bottom: 1.4em; color: var(--ink); line-height: 2.05; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); letter-spacing: 0.03em; margin: 2.4em 0 0.9em; }
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.4em; padding-left: 1.3em; color: var(--ink); line-height: 2; }
.prose ul:last-child { margin-bottom: 0; }

.article-media { position: relative; aspect-ratio: 16 / 9; width: 100%; border: 1px solid var(--line); margin-bottom: 40px; }
.article-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* alternating section bg helper */
.section--mist { background: var(--mist); }
.section--tight-top { padding-top: clamp(24px, 3vw, 40px); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy .sec-title { color: #fff; }
.section--navy .eyebrow { color: var(--ice-soft); }
.section--navy .prose p, .section--navy .prose ul { color: rgba(255,255,255,0.86); }
.section--navy .prose h3 { color: #fff; }

/* ---------- Curriculum (numbered steps) ---------- */
.curriculum { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.curriculum__row {
  background: var(--white);
  display: grid; grid-template-columns: 180px 1fr; gap: clamp(16px,3vw,48px);
  padding: clamp(28px,3.5vw,48px);
  align-items: start;
}
.curriculum__no { display: flex; flex-direction: column; gap: 6px; }
.curriculum__no .en { font-family: var(--font-en); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice); }
.curriculum__no .num { font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.2rem); line-height: 1; color: var(--navy); }
.curriculum__body h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3rem; letter-spacing: 0.04em; color: var(--navy); margin-bottom: 14px; }
.curriculum__body p { color: var(--ink-sub); line-height: 2.05; font-size: 0.95rem; }

/* ---------- Lesson gallery (photo grid) ---------- */
.lesson-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.6vw,20px); }
.lesson-gallery__item {
  position: relative; aspect-ratio: 3 / 2; border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(27,58,92,0.25);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.lesson-gallery__item:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -14px rgba(27,58,92,0.35); }
.lesson-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.lesson-gallery__item:hover img { transform: scale(1.04); }

/* ---------- Class levels (4 cards) ---------- */
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,1.6vw,22px); }
.level-card {
  background: var(--white); border: 1px solid var(--line);
  padding: clamp(24px,2.4vw,34px); display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
.level-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--ice); opacity: 0.85; }
.level-card__no { font-family: var(--font-en); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice); }
.level-card__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.2rem; color: var(--navy); letter-spacing: 0.04em; }
.level-card__text { color: var(--ink-sub); font-size: 0.88rem; line-height: 1.95; }

/* ---------- Schedule (day timeline) ---------- */
.schedule { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2vw,28px); }
.day-card { background: var(--white); border: 1px solid var(--line); padding: clamp(26px,3vw,40px); }
.day-card__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: nowrap; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.day-card__day { font-family: var(--font-en); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice); white-space: nowrap; }
.day-card__no { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy); white-space: nowrap; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.timeline li { display: grid; grid-template-columns: 60px 1fr; gap: 16px; }
.timeline .t { font-family: var(--font-en); font-size: 0.82rem; color: var(--ice); padding-top: 2px; letter-spacing: 0.04em; }
.timeline .d { color: var(--ink-sub); font-size: 0.9rem; line-height: 1.8; }

/* ---------- Callout (bi-ski / universal) ---------- */
.callout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.callout__media { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.callout__media .img-placeholder { position: absolute; inset: 0; }
.callout__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.callout.section--navy .callout__media { border-color: rgba(255,255,255,0.2); }
.callout__body h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.4rem,2.6vw,1.9rem); letter-spacing: 0.05em; color: var(--navy); margin: 14px 0 18px; }
.section--navy .callout__body h3 { color: #fff; }
.callout__body p { line-height: 2.05; color: var(--ink-sub); }
.section--navy .callout__body p { color: rgba(255,255,255,0.86); }

/* ---------- Feature/point list (school philosophy) ---------- */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,2.4vw,34px); counter-reset: pt; }
.point {
  background: var(--white); border: 1px solid var(--line);
  padding: clamp(28px,3vw,42px); display: flex; flex-direction: column; gap: 16px;
}
.point__num { counter-increment: pt; font-family: var(--font-display); font-size: 2.2rem; color: var(--ice); line-height: 1; }
.point__num::before { content: "0" counter(pt); }
.point h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.2rem; color: var(--navy); letter-spacing: 0.04em; }
.point p { color: var(--ink-sub); font-size: 0.92rem; line-height: 2; }

/* ---------- SDGs strip ---------- */
.sdgs { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.sdgs__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sdgs__chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 2px; padding: 10px 16px;
  font-size: 0.84rem; color: var(--navy); background: var(--white);
}
.sdgs__chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ice); flex: none; }
.sdgs__logo { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 200px; justify-self: center; }
.sdgs__logo .img-placeholder { position: absolute; inset: 0; }
.sdgs__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ---------- Definition table (company) ---------- */
.deftable { border-top: 1px solid var(--line); }
.deftable__row { display: grid; grid-template-columns: 220px 1fr; gap: clamp(16px,3vw,40px); padding: 24px 4px; border-bottom: 1px solid var(--line); }
.deftable__key { font-weight: 500; color: var(--navy); letter-spacing: 0.04em; }
.deftable__val { color: var(--ink); line-height: 1.9; }
.deftable__val ul { margin: 0; padding-left: 1.1em; }
.deftable__val li { margin-bottom: 6px; }

/* ---------- News list (full) + filter ---------- */
.news-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px,4vw,44px); }
.news-filter button {
  font-size: 0.82rem; letter-spacing: 0.08em; color: var(--ink-sub);
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  padding: 9px 18px; transition: all .3s var(--ease);
}
.news-filter button:hover { border-color: var(--ice); color: var(--ice); }
.news-filter button.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.news-empty { padding: 48px 0; text-align: center; color: var(--ink-sub); }

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(80px,13vw,200px); align-items: start; }
.contact-info__row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.contact-info__row:last-child { border-bottom: 1px solid var(--line); }
.contact-info__label { font-family: var(--font-en); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ice); padding-top: 4px; }
.contact-info__val { color: var(--ink); line-height: 1.8; }
.contact-info__val .big { font-family: var(--font-en); font-size: 1.4rem; letter-spacing: 0.03em; color: var(--navy); }
.contact-pamphlet { display: block; width: 100%; max-width: 320px; margin-top: 32px; border: 1px solid var(--line); }
.pamphlet-notice {
  margin: 16px 0 0; padding: 16px 20px;
  border: 1px solid var(--navy); border-left: 4px solid var(--navy);
  background: var(--mist); color: var(--navy);
  font-weight: 700; font-size: 1.05rem; line-height: 1.8; letter-spacing: 0.02em;
}

.form { display: grid; gap: 22px; }
.form-field { display: grid; gap: 8px; }
.form-field label { font-size: 0.86rem; font-weight: 500; color: var(--navy); letter-spacing: 0.04em; }
.form-field .req { color: var(--ice); font-size: 0.72rem; margin-left: 6px; }
.form-field input, .form-field textarea, .form-field select {
  font-family: inherit; font-size: 0.95rem; color: var(--ink);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--white); transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(91,163,140,0.16);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-check { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: var(--ink-sub); line-height: 1.7; }
.form-check a { color: var(--ice); text-decoration: underline; }
.form-check a:hover { color: var(--navy); }
.form-check input { margin-top: 3px; }
.form .btn { justify-content: center; }
.form-thanks {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  border: 1px solid var(--line); background: var(--mist); padding: clamp(40px, 6vw, 64px) 32px;
}
.form-thanks[hidden] { display: none; }
.form-thanks__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ice); color: #fff; font-size: 1.5rem;
}
.form-thanks__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3rem; letter-spacing: 0.05em; color: var(--navy); }
.form-thanks__text { max-width: 32em; color: var(--ink); line-height: 1.9; }
.form-thanks__actions { margin-top: 10px; }

/* ---------- Pamphlet (grid + lightbox) ---------- */
.pamphlet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px,2vw,20px); }
.pamphlet-thumb {
  position: relative; padding: 0; border: 1px solid var(--line); border-radius: 2px;
  background: #fff; overflow: hidden; aspect-ratio: 1310 / 1852; cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(27,58,92,0.25);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pamphlet-thumb:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -14px rgba(27,58,92,0.35); }
.pamphlet-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.pamphlet-thumb:hover img { transform: scale(1.04); }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px,5vw,56px); background: rgba(20,32,46,0.92);
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 100%; box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
.lightbox__close {
  position: absolute; top: clamp(12px,3vw,28px); right: clamp(12px,3vw,28px);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
  background: transparent; color: #fff; font-size: 1.4rem; line-height: 1;
  transition: background .3s var(--ease);
}
.lightbox__close:hover { background: rgba(255,255,255,0.12); }
.lightbox__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
  background: transparent; color: #fff; font-family: var(--font-en); font-size: 1.2rem;
  transition: background .3s var(--ease);
}
.lightbox__arrow:hover { background: rgba(255,255,255,0.12); }
.lightbox__arrow--prev { left: clamp(8px,3vw,28px); }
.lightbox__arrow--next { right: clamp(8px,3vw,28px); }

@media (max-width: 860px) {
  .pamphlet-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .levels { grid-template-columns: repeat(2, 1fr); }
  .schedule { grid-template-columns: 1fr; }
  .points { grid-template-columns: 1fr; }
  .lesson-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .callout, .sdgs, .contact-grid { grid-template-columns: 1fr; }
  .curriculum__row { grid-template-columns: 1fr; gap: 14px; }
  .curriculum__no { flex-direction: row; align-items: baseline; gap: 14px; }
  .deftable__row { grid-template-columns: 1fr; gap: 6px; }
  .form-row { grid-template-columns: 1fr; }
  .page-hero__inner { padding-top: 120px; }
}
@media (max-width: 600px) {
  .levels { grid-template-columns: 1fr; }
  .lesson-gallery { grid-template-columns: 1fr; }
}