/* スキルアップLP専用。店舗・フォーム・アニメーションはstyle.cssを共用。 */
.skillup-page .skill-hero {
  position: relative;
  height: auto;
  max-height: none;
  background: #fff;
}
.skill-hero-inner {
  position: relative;
  height: 90.42vw;
  background: url('../img/skillup2026_topfv_pc.png') center / cover no-repeat;
}
.skill-hero h1 { margin: 0; }
.skill-brand { position: absolute; top: 1.45%; left: 20.3%; width: 21%; z-index: 3; }
.skill-title { position: absolute; top: 8.4%; left: 20.8%; width: 31.5%; z-index: 2; }
.skill-date { position: absolute; top: 10.6%; right: 21%; width: 24%; z-index: 3; }
.skill-photo { position: absolute; top: 21%; right: 21.5%; width: 25.3%; z-index: 1; }
.skill-stage { position: absolute; bottom: 5.4%; left: 19.3%; width: 61.4%; }
.skill-stage img { width: 100%; height: auto; }
.skillup-page .skill-nav { left: 48%; right: auto; top: 1.35%; width: 32%; gap: 1.2vw; z-index: 5; }
.skillup-page .intro { padding-block: 70px 95px; gap: 32px; }
.skillup-page .intro video { aspect-ratio: 16/9; object-fit: cover; border-radius: 40px; }
.skillup-page .intro p { font-size: clamp(17px,1.65vw,30px); }
.skillup-page .campaign { padding: 65px 0 135px; }
.skillup-page .campaign .section-title { font-size: clamp(22px,2.4vw,44px); margin-bottom: 70px; }
.skill-courses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 60px; margin-bottom: 100px; }
.skill-course { min-width: 0; margin: 0; }
.skill-course > img { width: 100%; height: auto; }
.skill-course { container-type: inline-size; overflow: hidden; border-radius: 34px; background: #fff; }
.skill-course > img { display: block; }
.skill-course-notes { padding: 0 3.2% 4.5%; color: #111; font-size: clamp(12px, 3.7cqw, 18px); font-weight: 700; line-height: 1.55; }
.skill-course-notes p { margin: 0; }
.skill-course-notes p + p { margin-top: 3.5em; }
.skill-course-notes a { color: #124c9a; text-decoration: underline; text-underline-offset: .15em; }
.skill-course-notes a:hover, .skill-course-notes a:focus-visible { color: #b00020; }

.skillup-page .stores { padding-top: 70px; }
.skill-start { margin: 15px 0 75px; font-size: 36px; }
.skillup-page .stores .section-title { margin-bottom: 75px; }
.skillup-page .okinawa { margin-top: 150px; }
@media (prefers-reduced-motion: no-preference) {
  .skill-title { animation: soft-in .9s both; }
  .skill-photo { animation: soft-in 1s .15s both; }
}
@media (min-width:768px) and (max-width:1250px) {
  .skill-courses { gap: 40px; }
  .skill-start { font-size: 30px; }
}
@media (max-width:767px) {
  .skill-hero-inner {
    height: max(147.2vw, calc(100svh - var(--mobile-cta-height,100px)));
    background-image: url('../img/skillup2026_topfv_sp.png');
  }
  .skill-brand { left: 4%; top: 3%; width: 29%; }
  .skill-title { left: 2.5%; top: 9%; width: 55%; }
  .skill-date { right: 4%; top: 5.5%; width: 39%; }
  .skill-photo { right: 3%; top: 18%; width: 43%; }
  .skill-stage { left: 7%; bottom: 3%; width: 86%; }
  .skillup-page .skill-nav {
    position: fixed;
    left: 0; top: auto; right: 0; bottom: 0;
    width: 100%;
    padding: 12px 5% calc(12px + env(safe-area-inset-bottom,0px));
    gap: 12px;
    z-index: 100;
  }
  .skillup-page .intro { padding: 0 0 40px; gap: 25px; }
  .skillup-page .intro video { border-radius: 0; }
  .skillup-page .intro p { font-size: clamp(16px,3.8vw,26px); margin: 12px 0 5px; }
  .skillup-page .campaign { padding: 55px 0 45px; }
  .skillup-page .campaign .section-title { font-size: clamp(22px,5.4vw,37px); margin-bottom: 40px; }
  .skill-courses { grid-template-columns: 1fr; gap: 40px; margin-bottom: 45px; padding: 0 8px; }
  .skillup-page .stores { padding-top: 60px; }
  .skill-start { display: none; }
  .skillup-page .stores .section-title { margin-bottom: 45px; }
  .skillup-page .okinawa { margin-top: 65px; }
}

/* PC：本文の最大幅を1200pxにし、FV全体を画面の高さ以内に収める。 */
@media (min-width: 768px) {
  .skillup-page { background: #fff; }
  .skillup-page main { background: var(--cream); }
  .skillup-page .container { max-width: 1200px; }
  .skillup-page .skill-hero {
    --skill-fv-width: min(100vw, 1920px);
    width: 100%;
    background: url('../img/skillup2026_topfv_pc.png?v=20260927-wide') center / cover no-repeat;
  }
  .skillup-page .skill-hero-inner {
    width: var(--skill-fv-width);
    margin-inline: auto;
    height: min(90.42vw, 100vh);
    height: min(90.42vw, 100svh);
    aspect-ratio: auto;
    background: none;
  }
  .skillup-page .skill-nav {
    left: calc(50% - var(--skill-fv-width) * .02);
    width: calc(var(--skill-fv-width) * .32);
    gap: calc(var(--skill-fv-width) * .012);
  }
  .skillup-page .intro { padding-block: 60px 75px; }
  .skillup-page .intro p { font-size: 25px; }
  .skillup-page .skill-courses { gap: 45px; }
  .skillup-page .booking h3 { font-size: 24px; }
  .skillup-page .booking-form { font-size: 16px; }
  .skillup-page .booking-form .pill { font-size: 15px; }
  .skillup-page .stores .section-title { font-size: 36px; }
  .skillup-page .okinawa > p { font-size: 18px; }
}

/* PC：横幅を保ち、段階図をFVの下端に収める独立配置。 */
@media (min-width: 768px) {
  .skill-brand { width: min(21%, 24vh); width: min(21%, 24svh); }
  .skill-title { width: min(31.5%, 37vh); width: min(31.5%, 37svh); }
  .skill-date { width: min(24%, 28vh); width: min(24%, 28svh); }
  .skill-photo { width: min(25.3%, 29vh); width: min(25.3%, 29svh); }
  .skill-stage { left: 18.75%; bottom: 3%; width: 62.5%; }
}