/* =========================================================
   Next Home LP — SP (≤768px) Responsive Overrides
   PC layout is kept intact; this file only overrides.
   ========================================================= */

/* Hide SP-only elements on PC by default */
.system__sports-sp { display: none; }
.case__cards-sp    { display: none; }

@media (max-width: 768px) {

  /* ---------- global ---------- */
  html { overflow-x: hidden; width: 100%; }
  body { min-width: 0; overflow-x: hidden; width: 100%; max-width: 100vw; }
  img { max-width: 100%; height: auto; }

  /* ========== FV ========== */
  .fv {
    height: auto;
    min-height: auto;
    padding: 0 0 24px;
  }
  .fv__inner {
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: visible;
  }
  .fv__bg {
    background-image: url("../img/bg1smp.png");
    background-image: -webkit-image-set(url("../img/bg1smp.webp") type("image/webp"), url("../img/bg1smp.png") type("image/png"));
    background-image: image-set(url("../img/bg1smp.webp") type("image/webp"), url("../img/bg1smp.png") type("image/png"));
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }

  /* Header */
  .header {
    top: 12px;
    left: 12px;
  }
  .header__logo img { height: 37px; }

  /* Hero */
  .fv__hero {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    padding: 72px 0 0;
  }
  .fv__hero-imgwrap,
  .fv__hero picture {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .fv__hero-img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* Character illustration on SP */
  .fv__character {
    display: block;
    position: absolute;
    top: auto;
    bottom: -10px;
    right: 8px;
    width: 260px;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }
  .fv .line-cta { z-index: 5; position: relative; }

  /* LINE CTA on FV */
  .fv .line-cta {
    position: relative;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 90%;
    max-width: 520px;
    margin: 20px auto 0;
  }
  body.is-ready .fv .line-cta { transform: none !important; }
  .fv .line-cta:hover { transform: translateY(-2px) !important; }

  /* Profile block */
  .fv__profile {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    margin-top: 48px;
    padding: 0 16px;
  }
  .fv__profile-heading {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-bottom: 14px;
  }
  .fv__profile-title-row { gap: 12px; }
  .fv__profile-title { font-size: 34px; }
  .fv__profile-sub   { font-size: 14px; margin-top: 4px; }
  .fv__profile-line  { margin-top: 8px; margin-right: -16px; padding-right: 0; }
  .fv__profile-card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  /* ========== MESSAGE ========== */
  .message {
    height: auto;
    padding: 40px 16px 60px;
  }
  .message__inner {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
  }
  .message__photo { display: none; }
  .message__photo img { width: 100%; height: auto; }
  .message__text {
    position: relative;
    top: auto; left: auto; right: auto;
    width: 100%;
    padding: 0;
    font-size: 14px;
    line-height: 1.85;
    padding-top: 46%;
  }
  .message__greeting,
  .message__lead,
  .message__body { font-size: 16px; line-height: 1.5; }
  .message__lead { font-size: 24px; font-weight: 700; }
  .message__lead span { padding: 0 2px; }

  /* ========== MEMBER INTERVIEW ========== */
  .member {
    height: auto;
    padding: 0 0 60px;
  }
  .member__inner {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 16px;
  }
  .member__heading {
    position: relative;
    top: auto; left: auto;
    display: block;
    text-align: left;
    margin-bottom: 20px;
  }
  .member__title {
    font-size: 55px;
    line-height: 1.5;
  }
  .member__bubble {
    position: relative;
    top: auto; left: auto;
    margin: 20px 0 0;
    width: 100%;
    max-width: 720px;
  }
  .member__bubble img { width: 100%; height: auto; }

  .staff-slider {
    position: relative;
    top: auto; left: auto;
    width: 100vw;
    height: auto;
    margin: 18px -16px 0;
  }
  .staff-slider__viewport { width: 100%; overflow: hidden; }
  .staff-slider__track {
    display: flex;
    width: auto;
    padding: 0;
    gap: 0;
  }
  .staff-card {
    flex: 0 0 84vw;
    width: 84vw;
    height: auto;
  }
  .staff-card img,
  .staff-card picture,
  .staff-card picture img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ========== COMPANY (どんな会社？) ========== */
  .company {
    height: auto;
    padding: 36px 16px 60px;
  }
  .company__inner {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
  }
  .company__heading {
    position: relative;
    top: auto; left: auto; right: auto;
    text-align: center;
    margin-bottom: -21px;
  }
  .company__title { max-width: 100%; }

  .company__main {
    position: relative;
    top: auto; left: auto;
    display: block;
    width: 100%;
  }
  .company__logo {
    position: relative;
    top: auto; left: auto;
    width: 62%;
    max-width: 260px;
    margin: 0 auto 20px;
  }
  .company__logo img { width: 100%; height: auto; }

  .company__text {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
  }
  .company .company__text p { font-size: 16px; }
  .company .company__text p.company__text-emph { font-size: 24px; font-weight: 900; }
  .company .company__text p.company__text-emph span {
    padding: 0 2px;
    background: linear-gradient(transparent 45%, #FFF100 45%, #FFF100 95%, transparent 95%);
  }

  .company__gallery { display: none; }
  .company__gallery-sp {
    display: block;
    width: 100%;
    height: auto;
    margin: 28px auto 0;
  }

  /* ========== STATS ========== */
  .stats {
    height: auto;
    padding: 40px 16px 50px;
  }
  .stats__inner {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
  }
  .stats__heading {
    position: relative;
    top: auto; left: auto; right: auto;
    text-align: center;
    margin-bottom: 22px;
  }
  .stats__title { max-width: 100%; }
  .stats__taiguu {
    position: relative;
    top: auto; left: auto;
    width: 100%;
  }
  .stats__taiguu img { width: 100%; height: auto; }

  /* ========== CASE STUDIES ========== */
  .case {
    height: auto;
    padding: 40px 16px 60px;
  }
  .case__inner {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
  }
  .case__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    top: auto; left: auto; right: auto;
    margin-bottom: 20px;
  }
  .case__title { font-size: 56px; line-height: 1.5; }
  .case__bubble {
    position: relative;
    top: auto; left: auto;
    width: fit-content;
    margin: 0;
  }
  .case__bubble-text { max-width: 100%; }

  /* hide PC 3-card list, show SP single SVG */
  .case__cards { display: none; }
  .case__cards-sp {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* ========== FAQ ========== */
  .faq {
    height: auto;
    padding: 30px 16px 50px;
  }
  .faq__inner {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
  }
  .faq__grid {
    position: relative;
    top: auto; left: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .faq__item {
    width: 100%;
    height: auto;
    position: relative;
    top: auto; left: auto;
  }
  .faq__item + .faq__item {
    margin-top: -40px;
  }
  .faq__item img { width: 100%; height: auto; display: block; }
  .faq__item--character { display: none; }
  .faq__character { display: none; }

  /* ========== SYSTEM (自分らしく働くための制度) ========== */
  .system {
    height: auto;
    padding: 40px 16px 60px;
  }
  .system__inner {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
  }
  .system__heading {
    position: relative;
    top: auto; left: auto; right: auto;
    text-align: center;
    margin-bottom: -50px;
    z-index: 2;
  }
  .system__title { max-width: 100%; }

  .system__panel {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    padding: 40px 16px 20px;
    z-index: 1;
  }
  .system__table { display: block; }
  .system__row {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .system__row:last-child { border-bottom: 0; }
  .system__label {
    display: block;
    width: 100%;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 8px;
    padding: 0;
  }
  .system__desc {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.85;
    margin: 0;
  }

  .system__bottom {
    display: block;
    margin-top: 28px;
    padding: 0;
  }
  .system__video {
    width: 100%;
    margin: 0 0 20px;
  }
  .system__video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .system__sports {
    width: 100%;
    margin: 0;
  }
  /* Hide PC combined image, show SP-specific markup */
  .system__sports .system__sports-pc { display: none; }
  .system__sports-sp {
    display: block;
    width: 100%;
    padding: 20px 12px;
    background: #fff;
    border-radius: 8px;
    text-align: center;
  }
  .system__sports-lead {
    font-size: 15px;
    font-weight: 900;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .system__sports-logos {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 14px;
  }
  .system__sports-logos figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 46%;
    max-width: 140px;
  }
  .system__sports-logos img {
    width: 92px;
    height: auto;
    object-fit: contain;
  }
  .system__sports-logos figcaption {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
  }
  .system__sports-extra {
    font-size: 13px;
    font-weight: 700;
    margin-top: 4px;
  }

  /* ========== BRIDGE CTA ========== */
  .bridge {
    padding: 40px 0 50px;
    background-color: #FCC930;
    background-image: url("../img/footersmp.png");
    background-image: -webkit-image-set(url("../img/footersmp.webp") type("image/webp"), url("../img/footersmp.png") type("image/png"));
    background-image: image-set(url("../img/footersmp.webp") type("image/webp"), url("../img/footersmp.png") type("image/png"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .bridge__inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 16px;
    grid-template-columns: none;
    column-gap: 0;
  }
  .bridge__text {
    display: contents;
    text-align: left;
  }
  .bridge .bridge__lead { font-size: 16px; text-align: left; }
  .bridge .bridge__headline { font-size: 22px; margin: 4px 0 8px; text-align: left; }
  .bridge .bridge__body { font-size: 16px; text-align: left; }

  .bridge__character {
    order: 1;
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bridge__character img {
    width: 260px;
    max-width: 80%;
    height: auto;
    transform: none !important;
  }

  .bridge__cta {
    order: 2;
    width: 100%;
    max-width: 420px;
    margin: -90px auto 0;
    position: relative;
    z-index: 2;
  }

  /* ========== FOOTER ========== */
  .footer {
    padding: 24px 16px 40px;
    text-align: center;
  }
  .footer__inner {
    width: 100%;
    max-width: 100%;
    display: block;
  }
  .footer__logo img {
    width: 140px;
    height: auto;
    margin: 0 auto 14px;
  }
  .footer__link {
    display: inline-block;
    font-size: 14px;
  }

  /* ========== Floating CTA (追従版) — keep, but lower profile ========== */
  .line-cta--float {
    bottom: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: 420px !important;
  }

  /* ========== Loader ========== */
  .loader__stage {
    width: 220px;
    height: 220px;
  }
  .loader__logo { width: 140px; }
  .loader__ring--3 { inset: -30px; }

  /* Kill motion's FV per-element transform overrides on SP so layout doesn't break */
  .fv .header,
  .fv .fv__character,
  .fv .fv__profile,
  .fv .line-cta {
    opacity: 1 !important;
    transform: none !important;
  }
  .fv .fv__hero-img { clip-path: none !important; opacity: 1 !important; }
  .fv__hero-imgwrap {
    opacity: 1 !important;
    clip-path: none !important;
  }

  /* ---------- staff modal (SP) ---------- */
  .staff-modal { padding: 16px; }
  .staff-modal__inner { gap: 14px; }
  .staff-modal__pic img {
    max-width: 92vw;
    border-radius: 12px;
  }
  .staff-modal__close {
    width: clamp(140px, 50vw, 200px);
  }
}