@charset "UTF-8";
/* Layout: sky-blue airline LP — photo hero, pale sections, cloud texture on curriculum, navy footer */
:root {
  --navy: #0C2A66;
  --navy-2: #163F8F;
  --blue: #1D63D2;
  --sky: #3C9BE6;
  --turq: #22B6DA;
  --turq-deep: #0A8DB4;
  --ink: #1B2C4E;
  --mute: #4A5D7E;
  --pale: #EEF6FC;
  --pale-2: #F7FBFE;
  --line: #D3E5F4;
  --white: #FFFFFF;
  --grad: linear-gradient(90deg, #1B58C9 0%, #2196E3 60%, #2BC0E0 100%);
  --grad-num: linear-gradient(140deg, #1550C2 0%, #1F8FE0 55%, #27BCD9 100%);
  --f-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --f-gothic: var(--f-mincho);
  --f-script: "Allura", "Snell Roundhand", cursive;
  --wrap: 1140px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-gothic);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--turq); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 8vw, 112px); position: relative; overflow-x: hidden; overflow-x: clip; }
.section--tint { background: linear-gradient(180deg, var(--pale-2) 0%, var(--pale) 100%); }

/* ---------- buttons ---------- */
/* the gradient stops are registered so they can fade smoothly to white on hover */
@property --btn-c1 { syntax: "<color>"; inherits: false; initial-value: #0C2A66; }
@property --btn-c2 { syntax: "<color>"; inherits: false; initial-value: #163F8F; }
@property --btn-c3 { syntax: "<color>"; inherits: false; initial-value: #1D5BC0; }
/* pill with label on the left and a white circle carrying the arrow on the right */
.btn {
  --circle: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 52px;
  padding: 6px 7px 6px 28px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(100deg, var(--btn-c1) 0%, var(--btn-c2) 60%, var(--btn-c3) 100%);
  color: var(--white);
  font-family: var(--f-mincho);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px -14px rgba(12, 42, 102, 0.6);
  position: relative;
}
/* hover: a brighter sky-blue fills in from the left and the button lifts slightly */
.btn { border: 2px solid transparent; background-origin: border-box; transition: color .4s ease, box-shadow .4s ease, border-color .4s ease, --btn-c1 .4s ease, --btn-c2 .4s ease, --btn-c3 .4s ease; }
/* hover: colors invert — white fill (an inset shadow paints over the gradient, so no extra layer is needed), navy text, navy border */
.btn:hover { color: var(--navy); border-color: var(--navy); --btn-c1: #FFFFFF; --btn-c2: #FFFFFF; --btn-c3: #FFFFFF; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}
.btn__arrow {
  position: relative;
  flex: none;
  width: calc(var(--circle) * 0.62);
  height: calc(var(--circle) * 0.62);
  color: inherit;
}
.btn__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .btn:hover .btn__arrow::before { transform: translateX(6px); }
}
.btn__icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2.5 1.8 10.6c-.8.3-.8 1.4 0 1.7l5.4 2 2 6.3c.2.7 1.1.9 1.6.4l3-2.9 5.3 3.9c.6.4 1.4.1 1.6-.6L23.2 3.6c.2-.8-.5-1.4-1.2-1.1zM9.4 14.6l9.2-8.4-7.3 9.6-.4 3.4z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2.5 1.8 10.6c-.8.3-.8 1.4 0 1.7l5.4 2 2 6.3c.2.7 1.1.9 1.6.4l3-2.9 5.3 3.9c.6.4 1.4.1 1.6-.6L23.2 3.6c.2-.8-.5-1.4-1.2-1.1zM9.4 14.6l9.2-8.4-7.3 9.6-.4 3.4z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn--sm { --circle: 30px; min-height: 44px; padding: 5px 20px 5px 24px; font-size: 15px; gap: 16px; }
.btn--sm { border-width: 1.5px; }
.btn--sm:hover { box-shadow: none; }
.btn--lg { --circle: 40px; min-height: 64px; padding: 8px 32px 8px 44px; font-size: clamp(18px, 1.8vw, 22px); gap: 24px; }
.btn-hp {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 6px 30px 6px 34px;
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: 999px;
  color: var(--navy);
  font-family: var(--f-mincho);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn-hp__arrow {
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20L20 4M9 4h11v11'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20L20 4M9 4h11v11'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s ease;
}
.btn-hp:hover { background: transparent; color: var(--white); }
.btn-hp:hover .btn-hp__arrow { transform: translate(2px, -2px); }

/* ---------- header ---------- */
.header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
}
.header__inner {
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 48px);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.header__logo { width: auto; height: 44px; flex: none; }
.header__title {
  font-family: var(--f-mincho);
  font-weight: 800;
  font-size: clamp(17px, 2vw, 25px);
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.gnav { display: flex; align-items: center; gap: 24px; }
.gnav__list { display: flex; align-items: center; }
.gnav__list a {
  display: block;
  padding: 4px 18px;
  font-family: var(--f-mincho);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.gnav__list a { position: relative; }
/* hover: underline draws in from left to right */
@media (min-width: 1024px) {
  .gnav__list a::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s cubic-bezier(.6, 0, .2, 1);
  }
  .gnav__list a:hover::after { transform: scaleX(1); }
}
.header__toggle { display: none; }
@media (max-width: 767px) {
  .header__brand { gap: 8px; }
  .header__logo { height: 34px; }
}

@media (max-width: 1023px) {
  .header__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
  }
  .header__toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s, opacity .25s; }
  .header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  /* full-screen drawer that fades and drifts down slowly */
  .gnav {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    bottom: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 32px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: var(--white);
    border-top: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-40px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .6s;
  }
  .gnav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .3, 1), visibility 0s;
  }
  .gnav__list { flex-direction: column; align-items: stretch; width: min(100%, 420px); }
  .gnav__list a { padding: 18px 4px; font-size: 16px; text-align: center; }
  .gnav .btn { width: min(100%, 320px); }
  html.is-menu-open { overflow: hidden; }
}

/* ---------- section heading ---------- */
.sec-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 26px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.sec-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sky), rgba(60, 155, 230, 0.25)); min-width: 40px; }
.sec-head--plain::after { display: none; }
.sec-head__en {
  position: absolute;
  top: -6px;
  left: -10px;
  font-family: var(--f-script);
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  color: #2C8BE0;
  transform: rotate(-8deg);
  transform-origin: left bottom;
  letter-spacing: 0;
  pointer-events: none;
}
.sec-head__ja {
  position: relative;
  font-family: var(--f-mincho);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: 0.06em;
  padding-left: clamp(16px, 2vw, 28px);
  text-wrap: balance;
}

/* centered variant (お申し込み): rules on both sides, like the SP layout */
.sec-head--center { justify-content: center; }
.sec-head--center::before { content: ""; flex: 1; min-width: 40px; height: 1px; background: linear-gradient(90deg, rgba(60, 155, 230, 0.25), var(--sky)); }
.sec-head--center .sec-head__ja { padding-left: 0; text-align: center; }
.sec-head--center .sec-head__en { left: 50%; transform: translateX(-50%) rotate(-8deg); transform-origin: center; top: -20px; white-space: nowrap; }
.sec-head--center { padding-top: 34px; }

/* SP: centered title with rules running to both edges */
@media (max-width: 767px) {
  .sec-head { justify-content: center; gap: 12px; padding-top: 30px; }
  .sec-head::before { content: ""; flex: 1; min-width: 16px; height: 1px; background: linear-gradient(90deg, rgba(60, 155, 230, 0.25), var(--sky)); }
  .sec-head::after { min-width: 16px; }
  .sec-head__ja { padding-left: 0; text-align: center; white-space: nowrap; }
  .sec-head__en { left: 50%; transform: translateX(-50%) rotate(-8deg); transform-origin: center; top: -4px; white-space: nowrap; }
  .sec-head--long .sec-head__ja { font-size: clamp(17px, 5.6vw, 28px); letter-spacing: 0.02em; }
}

.lead { font-size: clamp(15px, 1.4vw, 17px); line-height: 2.1; max-width: 32em; }
.note { margin-top: 14px; font-size: 13px; color: var(--mute); letter-spacing: 0.02em; }

/* ---------- FV ---------- */
.fv { position: relative; overflow: hidden; background: #BFE1F7; }
.fv__media { position: absolute; inset: 0; }
.fv__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
/* soft blue shade behind the headline so white type stays crisp on bright sky */
.fv__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 58, 140, 0.32) 0%, rgba(14, 58, 140, 0.16) 38%, rgba(14, 58, 140, 0) 60%);
}
@media (max-width: 767px) {
  .fv__media::after { background: linear-gradient(180deg, rgba(14, 58, 140, 0.34) 0%, rgba(14, 58, 140, 0.12) 32%, rgba(14, 58, 140, 0) 48%); }
}
.fv__body {
  position: relative;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(40px, 5vw, 72px);
  min-height: clamp(520px, 50vw, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 32px);
}
.fv__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--f-mincho);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: 0.01em;
  /* tight dark edge for crispness + wider soft glow for separation from the sky */
  text-shadow:
    0 1px 1px rgba(8, 32, 86, 0.55),
    0 2px 6px rgba(8, 32, 86, 0.5),
    0 6px 22px rgba(8, 32, 86, 0.38);
}
.fv__line1 { font-size: clamp(42px, 6.2vw, 92px); }
.fv__line2 { font-size: clamp(64px, 9vw, 132px); margin-top: 0.02em; }
/* subtitle band: tilted up to the right, swept in like a contrail */
.fv__band {
  position: relative;
  margin-top: clamp(14px, 1.8vw, 24px);
  margin-left: -0.3em;
  padding: 0.2em 1.4em 0.24em 0.8em;
  background: linear-gradient(100deg, rgba(10, 36, 92, 0.97) 0%, rgba(22, 74, 180, 0.96) 45%, rgba(36, 128, 222, 0.92) 80%, rgba(60, 170, 235, 0.75) 100%);
  clip-path: polygon(2.5% 0, 100% 0, 96% 100%, 0 100%);
  box-shadow: 0 10px 24px -12px rgba(12, 42, 102, 0.6);
  font-size: clamp(26px, 3.7vw, 54px);
  line-height: 1.3;
  text-shadow: none;
}
.fv__band > span { display: inline-block; }
.fv__band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -50%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
}
@keyframes band-in {
  from { clip-path: polygon(2.5% 0, 2.5% 0, 0 100%, 0 100%); }
  to   { clip-path: polygon(2.5% 0, 100% 0, 96% 100%, 0 100%); }
}
@keyframes band-shine {
  from { left: -50%; }
  to   { left: 110%; }
}

/* white diagonal veil at the bottom right of the hero */
.fv__curtain {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 62%;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.7) 75%, rgba(255, 255, 255, 0.95) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.fv__curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.55) 100%);
  clip-path: polygon(100% 35%, 100% 100%, 25% 100%);
}
.fv__actions { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2.4vw, 28px); }
.fv__badges { display: flex; gap: clamp(16px, 1.8vw, 24px); }
.fv__badges li {
  width: clamp(120px, 12.4vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px -14px rgba(12, 42, 102, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mincho);
  color: var(--navy);
  line-height: 1.25;
  text-align: center;
}
.fv__badges span { font-size: clamp(14px, 1.5vw, 20px); font-weight: 700; }
.fv__badges strong { font-size: clamp(28px, 3vw, 40px); font-weight: 800; }
/* SP: one compact hero — everything sits inside the photo, the woman framed larger */
@media (max-width: 767px) {
  .fv__media img {
    position: absolute;
    max-width: none;
    width: 141vw;
    height: auto;
    left: 0;
    top: -84vw;
    object-fit: fill;
  }
  /* every size follows the screen width (vw) so the layout keeps the same balance on any phone or small tablet */
  .fv__body {
    min-height: 0;
    height: 122vw; /* cropped at her shoulders so the copy, badges and her smile read as one block */
    justify-content: flex-start;
    gap: 0;
    padding: 6vw 4.1vw 5.6vw;
  }
  .fv__line1 { font-size: 9.6vw; }
  .fv__line2 { font-size: 16vw; }
  .fv__band { font-size: 6vw; margin-left: 0; margin-top: 3.6vw; }
  .fv__curtain { width: 80%; height: 20%; }
  .fv__actions { flex: 1; justify-content: space-between; align-items: stretch; padding-top: 5.6vw; gap: 4vw; }
  .fv__badges { gap: 3.2vw; }
  .fv__badges li { width: 23vw; }
  .fv__badges span { font-size: 3.1vw; }
  .fv__badges strong { font-size: 6vw; }
}

/* FV opening: photo settles, headline lands, band sweeps, badges pop, CTA rises and glints */
@media (prefers-reduced-motion: no-preference) {
  .fv__media picture img { animation: fv-photo 2.6s cubic-bezier(.2, .7, .2, 1) both; }
  .fv__line1 { animation: fv-rise 0.9s cubic-bezier(.2, .8, .2, 1) 0.15s both; }
  .fv__line2 { animation: fv-land 1.2s cubic-bezier(.16, 1, .3, 1) 0.45s both; transform-origin: left 70%; }
  .fv__band { animation: band-in 0.9s cubic-bezier(.2, .8, .2, 1) 0.9s both; }
  .fv__band::after { animation: band-shine 1.2s ease-out 1.7s both; }
  .fv__badges li { animation: fv-pop 0.9s cubic-bezier(.16, 1, .3, 1) both; }
  .fv__badges li:nth-child(1) { animation-delay: 1.4s; }
  .fv__badges li:nth-child(2) { animation-delay: 1.55s; }
  .fv__curtain { animation: fv-curtain 1.2s cubic-bezier(.2, .8, .2, 1) 0.3s both; }
}
@keyframes fv-photo {
  from { transform: scale(1.08); filter: brightness(1.12); }
  to   { transform: scale(1); filter: none; }
}
@keyframes fv-rise {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes fv-land {
  from { opacity: 0; transform: scale(1.22); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes fv-pop {
  from { opacity: 0; transform: translateY(14px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes btn-shine {
  0%   { left: -60%; }
  30%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes fv-curtain {
  from { opacity: 0; transform: translateX(30%); }
  to   { opacity: 1; transform: none; }
}

/* ---------- split (about / purpose) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.split__text { min-width: 0; }
.split__img {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 20px 40px -24px rgba(12, 42, 102, 0.45);
}
.split__img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.split--reverse .split__img { order: -1; }
@media (max-width: 767px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__img { order: 0; }
}

/* ---------- compare ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); align-items: stretch; }
.compare__card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F9 100%);
  border: 1px solid #E2E9F1;
  border-radius: 14px;
  box-shadow: 0 16px 32px -24px rgba(12, 42, 102, 0.35);
  color: var(--ink);
}
.compare__icon { width: 52px; height: 52px; color: var(--navy-2); }
.compare__title {
  font-family: var(--f-mincho);
  font-weight: 800;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--navy);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid #C9D6E4;
}
.compare__body p { font-size: 16px; line-height: 1.9; }
.compare__card--ours {
  background:
    radial-gradient(70% 60% at 22% 0%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(110, 225, 245, 0.55) 0%, rgba(110, 225, 245, 0) 70%),
    linear-gradient(135deg, #1844BC 0%, #1D6FD8 45%, #2398E6 75%, #36BCE6 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 0 22px rgba(190, 235, 255, 0.35),
    0 0 0 1px rgba(142, 207, 239, 0.9),
    0 0 28px rgba(70, 170, 240, 0.35),
    0 30px 48px -24px rgba(21, 80, 194, 0.65);
  color: var(--white);
}
.compare__card--ours .compare__icon { color: var(--white); filter: drop-shadow(0 2px 6px rgba(10, 40, 120, 0.35)); }
.compare__card--ours .compare__title, .compare__card--ours .compare__body { text-shadow: 0 1px 3px rgba(10, 40, 120, 0.3); }
.compare__card--ours .compare__title { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
@media (max-width: 767px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare__card { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .compare__icon { width: 42px; height: 42px; }
}

/* ---------- curriculum ---------- */
.section--clouds {
  background-color: var(--pale);
  background-image: linear-gradient(180deg, rgba(247, 251, 254, 0.1) 0%, rgba(238, 246, 252, 0.4) 70%, var(--white) 100%), url("images/clouds.jpg");
  background-size: cover;
  background-position: center top;
}
.curriculum { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.curriculum__side { display: flex; justify-content: center; align-items: center; }
.curriculum__window {
  width: min(100%, 300px);
  margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 82%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 82%, transparent 100%);
}
.course { display: flex; flex-direction: column; gap: 12px; counter-reset: none; }
.course li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 20px 8px 84px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0.08) 100%);
  border: 0;
  border-radius: 999px;
}
.course__num {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 62px;
  height: 58px;
  display: grid;
  place-items: center;
  font-family: var(--f-mincho);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--white);
  text-shadow: none;
  font-variant-numeric: lining-nums tabular-nums;
  isolation: isolate;
}
/* soft watercolor blob behind the number */
.course__num::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
  background:
    radial-gradient(circle at 75% 75%, rgba(52, 82, 190, 0.6) 0%, rgba(52, 82, 190, 0) 60%),
    linear-gradient(140deg, #239ACB 0%, #2A7FCF 55%, #3D63C4 100%);
}
.course li:nth-child(2n) .course__num::before { border-radius: 45% 55% 42% 58% / 55% 45% 58% 42%; transform: rotate(18deg); }
.course li:nth-child(3n) .course__num::before { border-radius: 52% 48% 60% 40% / 42% 55% 45% 58%; transform: rotate(-24deg); }
.course__name { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(16px, 1.7vw, 21px); color: var(--navy); line-height: 1.5; }
@media (max-width: 767px) {
  .curriculum { grid-template-columns: minmax(0, 1fr); }
  .curriculum__window { width: 200px; margin: 0 auto; }
  .course li { padding-left: 68px; min-height: 52px; }
  .course__num { width: 50px; height: 50px; font-size: 18px; }
}

/* ---------- info ---------- */
.info {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: clamp(20px, 2.4vw, 28px) 0;
  background: linear-gradient(180deg, #F6FAFE 0%, #EDF5FC 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.info__item { display: flex; gap: 18px; align-items: flex-start; padding: 4px clamp(20px, 2.6vw, 36px); min-width: 0; }
.info__item + .info__item { border-left: 1px solid #BBD3EA; }
.info__icon { flex: none; width: 48px; height: 48px; color: var(--blue); }
.info dt { font-size: 15px; font-weight: 700; color: var(--navy-2); }
.info dd { margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; }
.info dd strong { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(21px, 2.1vw, 26px); color: var(--navy); line-height: 1.35; }
.info dd small { font-size: 13px; color: var(--mute); line-height: 1.6; }
@media (max-width: 767px) {
  .info { grid-template-columns: minmax(0, 1fr); padding: 8px 0; }
  .info__item { padding: 18px 20px; }
  .info__item + .info__item { border-left: 0; border-top: 1px solid #BBD3EA; }
}

/* ---------- benefit ---------- */
.benefit {
  position: relative;
  margin-top: clamp(28px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22%);
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, #FFFFFF 0%, #F3F9FE 70%, #EDF5FC 100%);
  border: 1px solid #9CD2EF;
  border-radius: 14px;
}
.benefit::before, .benefit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.benefit::before { display: none; }
.benefit::after { display: none; }
.benefit__body { position: relative; z-index: 1; padding: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px); min-width: 0; }
.benefit__label {
  --rb-1: #9C762C;
  --rb-2: #A88236;
  --rb-3: #C9A55E;
  position: relative;
  display: inline-block;
  padding: 7px 34px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(100deg, var(--rb-1) 0%, var(--rb-2) 60%, var(--rb-3) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  color: var(--white);
  font-family: var(--f-mincho);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 2px rgba(110, 80, 20, 0.35);
  filter: drop-shadow(0 4px 8px rgba(184, 145, 63, 0.3));
}
/* thin stitched line inside the ribbon */
.benefit__label::before {
  content: "";
  position: absolute;
  inset: 4px 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.7);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.benefit__label--navy { --rb-1: #0C2A66; --rb-2: #163F8F; --rb-3: #1D5BC0; }
.benefit__text { margin-top: 12px; font-family: var(--f-mincho); color: var(--navy); }
.benefit__pre { display: block; font-weight: 700; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.6; }
.benefit__main { display: block; font-weight: 800; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.35; letter-spacing: 0.02em; }
.benefit__free, .benefit__lead { white-space: nowrap; }
.benefit__main em { font-style: normal; font-size: 1.3em; color: var(--turq-deep); margin-inline: 0.05em; }
.benefit__post { font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; letter-spacing: 0.04em; }
@media (min-width: 768px) { .benefit__main { white-space: nowrap; } }
.benefit__img { align-self: stretch; }
.benefit__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
@media (max-width: 767px) {
  /* SP: photo becomes a soft backdrop on the right, text sits over it */
  .benefit { display: block; }
  .benefit__body { padding: 20px 18px; }
  .benefit__img { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; opacity: 0.55; }
  .benefit__img img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); object-position: 75% 50%; }
  .benefit__main { font-size: clamp(22px, 6.4vw, 30px); }
  .benefit__pre { font-size: clamp(12px, 3.4vw, 14px); letter-spacing: 0; }
  .benefit::after { display: none; }
}

/* ---------- entry / form ---------- */
.section--entry { background: linear-gradient(180deg, var(--white) 0%, var(--pale) 100%); }
.entry { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.4vw, 28px); }
.entry__lead { font-size: clamp(15px, 1.5vw, 18px); text-align: center; }
.form {
  width: 100%;
  max-width: 820px;
  min-width: 0;
  padding: clamp(24px, 3.2vw, 40px);
  background: var(--white);
  border: 1px solid #E1ECF6;
  border-radius: 16px;
  box-shadow: 0 24px 48px -32px rgba(12, 42, 102, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form__row { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 16px; }
.form__row--top { align-items: start; }
/* validation messages, shown under each empty / invalid field */
.form__error { grid-column: 2; margin-top: -8px; color: #D04437; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.form .is-invalid { border-color: #D04437; background: #FFF8F7; }
@media (max-width: 767px) { .form__error { grid-column: auto; margin-top: -2px; } }
.form__row--top label { padding-top: 10px; }
.form label { font-size: 15px; font-weight: 700; color: var(--navy); }
.form__req {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px 3px;
  border-radius: 4px;
  background: #D04437;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  vertical-align: 2px;
}
.form input, .form textarea, button {
  font-family: inherit;
}
.form input, .form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #C9DCEE;
  border-radius: 6px;
  background: #FBFDFF;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.form textarea { resize: vertical; line-height: 1.7; }
.form input::placeholder, .form textarea::placeholder { color: #7B8FAA; }
.form input:focus, .form textarea:focus { border-color: var(--sky); background: var(--white); outline: none; box-shadow: 0 0 0 3px rgba(60, 155, 230, 0.2); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { display: flex; justify-content: center; margin-top: 10px; }
.form__submit .btn { min-width: min(100%, 300px); }
@media (max-width: 767px) {
  .form__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .form__row--top label { padding-top: 0; }
  .form__submit .btn { width: 100%; }
}

/* ---------- footer ---------- */
.footer { background: var(--navy); color: var(--white); }
.footer__inner {
  max-width: 1680px;
  margin-inline: auto;
  padding: 36px clamp(16px, 3vw, 48px) 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
}
.footer__title { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(18px, 1.8vw, 23px); letter-spacing: 0.06em; }
.footer__nav ul { display: flex; flex-wrap: wrap; }
.footer__nav a { display: block; padding: 2px 16px; font-size: 13px; text-decoration: none; color: #E6EEF9; }
.footer__nav a { position: relative; }
.footer__nav a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.6, 0, .2, 1);
}
.footer__nav a:hover { color: var(--white); }
.footer__nav a:hover::after { transform: scaleX(1); }
@media (max-width: 767px) { .footer__nav a::after { left: clamp(5px, 1.8vw, 12px); right: clamp(5px, 1.8vw, 12px); } }
@media (prefers-reduced-motion: reduce) { .gnav__list a::after, .footer__nav a::after { transition: none; } }
.footer__org { display: flex; align-items: center; gap: 18px; }
.footer__logo { display: block; background: var(--white); border-radius: 10px; padding: 6px 10px; }
.footer__logo img { width: 104px; height: auto; }
.footer__org-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer__org-text p { font-size: 13px; font-weight: 700; }
.footer__copy { text-align: center; padding: 0 var(--gutter) 24px; font-size: 13px; font-weight: 500; color: #DCE6F5; letter-spacing: 0.06em; }
.footer__copy small { font-size: inherit; }
@media (max-width: 1023px) {
  .footer__inner { flex-direction: column; text-align: center; }
  .footer__nav ul { justify-content: center; row-gap: 8px; }
  .footer__org { flex-direction: column; }
  .footer__org-text { align-items: center; }
}
@media (max-width: 767px) {
  .footer__nav ul { flex-wrap: nowrap; justify-content: center; }
  .footer__nav a { padding: 2px clamp(5px, 1.8vw, 12px); font-size: clamp(10px, 2.9vw, 13px); letter-spacing: 0; white-space: nowrap; }
}

/* ---------- thanks / error pages ---------- */
.page-message { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page-message .message { flex: 1; display: flex; align-items: center; justify-content: center; }
.message { padding-block: clamp(80px, 12vw, 160px); text-align: center; background: linear-gradient(180deg, var(--white), var(--pale)); }
.message h1 { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(20px, 5.4vw, 36px); text-wrap: balance; color: var(--navy); }
.message p { margin-top: 20px; }
.message ul { display: inline-block; margin-top: 20px; text-align: left; color: #B42318; }
.message .btn { margin-top: 36px; }

/* ---------- scroll animations (only when JS + motion allowed) ---------- */
.anim-ready [data-anim="fade"],
.anim-ready [data-anim="card"],
.anim-ready [data-anim="window"] {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1), filter 1s ease;
}
.anim-ready [data-anim="fade"]   { transform: translateY(32px); filter: blur(6px); }
.anim-ready [data-anim="card"]   { transform: translateY(28px) scale(.97); transition-duration: 1.1s; }
.anim-ready .compare__card--ours[data-anim="card"] { transition-delay: .3s; }
.anim-ready [data-anim="window"] { transform: translateY(40px) rotate(-6deg) scale(.92); transition-duration: 1.3s; }
.anim-ready [data-anim].is-in    { opacity: 1; transform: none; filter: none; }

/* section heading: script label writes in, title rises, rule draws out */
.anim-ready .sec-head[data-anim] .sec-head__en { clip-path: inset(-30% 100% -30% -10%); transition: clip-path 1.2s cubic-bezier(.6, 0, .2, 1) .05s; }
.anim-ready .sec-head[data-anim] .sec-head__ja { opacity: 0; transform: translateY(18px); transition: opacity .9s ease .3s, transform .9s cubic-bezier(.2, .7, .2, 1) .3s; }
.anim-ready .sec-head[data-anim]::after  { transform: scaleX(0); transform-origin: left center;  transition: transform 1.2s cubic-bezier(.6, 0, .2, 1) .45s; }
.anim-ready .sec-head[data-anim]::before { transform: scaleX(0); transform-origin: right center; transition: transform 1.2s cubic-bezier(.6, 0, .2, 1) .45s; }
.anim-ready .sec-head[data-anim].is-in .sec-head__en { clip-path: inset(-30% -10% -30% -10%); }
.anim-ready .sec-head[data-anim].is-in .sec-head__ja { opacity: 1; transform: none; }
.anim-ready .sec-head[data-anim].is-in::after,
.anim-ready .sec-head[data-anim].is-in::before { transform: none; }

/* photos: a quiet fade with a gentle settle */
.anim-ready [data-anim="reveal"] img { opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.anim-ready [data-anim="reveal"].is-in img { opacity: 1; transform: none; }

/* lists: items arrive one after another */
.anim-ready [data-anim="stagger"] > *,
.anim-ready [data-anim="stagger-x"] > * {
  opacity: 0;
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.anim-ready [data-anim="stagger"] > *   { transform: translateY(24px); }
.anim-ready [data-anim="stagger-x"] > * { transform: translateX(48px); }
.anim-ready [data-anim^="stagger"].is-in > * { opacity: 1; transform: none; }
.anim-ready [data-anim="stagger-x"].is-in .course__num { animation: num-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
@keyframes num-pop { from { scale: .3; } to { scale: 1; } }

/* "本講習会" card: a single glint once it lands */
.compare__card--ours { position: relative; overflow: hidden; }
.compare__card--ours::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
.anim-ready .compare__card--ours.is-in::after { animation: card-shine 1.4s ease-out 1.3s both; }
@keyframes card-shine { from { left: -60%; } to { left: 130%; } }

/* benefit: "無料" pops once the banner is in view */
.benefit__main em { display: inline-block; }
.anim-ready .benefit.is-in .benefit__main em { animation: free-pop .9s cubic-bezier(.3, 1.7, .5, 1) .6s both; }
@keyframes free-pop {
  0%   { transform: scale(.4) rotate(-8deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.form__submit .btn { padding-inline: 40px; gap: 10px; }

/* ---------- SP floating entry badge ---------- */
.float-entry { display: none; }
@media (max-width: 767px) {
  .float-entry {
    position: fixed;
    right: 14px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 90;
    width: clamp(102px, 16vw, 124px);
    height: clamp(102px, 16vw, 124px);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: linear-gradient(160deg, #16449A 0%, #10306F 55%, #0A2257 100%);
    color: var(--white);
    text-decoration: none;
    text-align: center;
    font-family: var(--f-mincho);
    font-weight: 700;
    font-size: clamp(13px, 2.1vw, 16px);
    line-height: 1.35;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 18px -8px rgba(12, 42, 102, 0.5);
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .float-entry::before, .float-entry::after {
    content: "";
    width: clamp(18px, 2.9vw, 22px);
    height: clamp(18px, 2.9vw, 22px);
    background: currentColor;
  }
  .float-entry::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat; }
  .float-entry::after { width: 14px; height: 14px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
  .float-entry.is-hidden { opacity: 0; visibility: hidden; transform: translate3d(0, 16px, 0); pointer-events: none; }
  html.is-menu-open .float-entry { opacity: 0; visibility: hidden; }
}

/* tablet (768–1023px): let the comparison text wrap naturally */
@media (max-width: 1023px) {
  .compare__body br { display: none; }
}
/* first view waits (paused) until fonts and the hero photo have loaded — see the script in <head> */
.fv-wait .fv *, .fv-wait .fv *::after { animation-play-state: paused !important; }

/* small desktop (1024–1279px): tighten the header so the menu and button fit on one line */
.btn { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .header__title { font-size: clamp(17px, 1.7vw, 22px); }
  .header__logo { height: 38px; }
  .gnav { gap: 14px; }
  .gnav__list a { padding-inline: 10px; font-size: 13px; letter-spacing: 0.04em; }
  .gnav__list a::after { left: 10px; right: 10px; }
  .header .btn--sm { padding-inline: 18px; font-size: 14px; }
}