/* Studio.Design uses a generic <div class="container"> wrapper, but
     Tailwind also defines .container (max-width per breakpoint + padding).
     Inside the studio-body the Tailwind rules constrain the Studio canvas
     to ~1376px and add side margins/padding, leaving visible empty bands
     at the page edges on PC. Neutralise Tailwind's .container here so the
     Studio canvas resumes its intended full-bleed layout. */
  .studio-body .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Studio.Design's broad selector list resets all text-bearing elements
     to color:#333 (a, button, p, h1..h6, span, li, etc.). On HP pages
     that rule leaks out of .studio-body and hits the React Footer's
     <a>, <p>, <li>, etc., overriding wp-styles.css's inherited #fff.
     Result: footer text reads dark grey on the orange gradient.
     Restore the white-on-orange contrast with a specific override. */
  .p-footer,
  .p-footer * { color: #ffffff; }
  .p-footer a,
  .p-footer a:visited,
  .p-footer a:hover { color: #ffffff; }

  .studio-body *, .studio-body *::before, .studio-body *::after {
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .studio-body #text1, .studio-body #text2-b, .studio-body #text3 {
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .studio-body #text2-a {
    background: linear-gradient(135deg, #eb6132 0%, #f08b26 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .studio-body #text2-box {
    background: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .studio-body #orange {
    clip-path: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .studio-body #fv-logo, .studio-body #fv-anime, .studio-body #logo-box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .studio-body [id^="member"],
  .studio-body [id^="battery"],
  .studio-body [id^="cover"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .studio-body [data-type="carousel"] > .__ariaHidden { display: none !important; }
  .studio-body [data-type="carousel"] > *:not(.__ariaHidden) {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition-duration: 0s !important;
  }
  .studio-body [style*="opacity: 0"],
  .studio-body [style*="opacity:0"] { opacity: 1 !important; }
  .studio-body [style*="visibility: hidden"],
  .studio-body [style*="visibility:hidden"] { visibility: visible !important; }
  .studio-body [style*="translateX(100%)"],
  .studio-body [style*="translateX(-100%)"],
  .studio-body [style*="translateY(100%)"],
  .studio-body [style*="translateY(-100%)"],
  .studio-body [style*="translate3d"] { transform: none !important; }
  .studio-body .scale-logo #fv-logo,
  .studio-body .darken-cover #fv-anime,
  .studio-body .hide-fv-anime #fv-anime,
  .studio-body .freeze-animation #fv-logo,
  .studio-body .whiten-screen #logo-box {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }
  .studio-body #cover-sp,
  .studio-body #cover,
  .studio-body #logo-box,
  .studio-body #fv { display: none !important; }
  .studio-body #why, .studio-body #why-1 { display: none !important; }
  /* What We Do: the section's background photo (::before, z-index -2) washes
     out to near-white at the top, making the white heading hard to read on both
     mobile and desktop. Lay an orange overlay at z-index -1 (above the photo,
     below the z-index:1 content) so the band stays orange throughout —
     strongest at the top where the heading sits. */
  .studio-body [data-s-3eaab65f-5834-48e5-bc6f-d242e8536b7b]::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    /* Strong over the heading/body text (top ~3/4), then fully transparent by
       80% so the clean background photo at the bottom of the section is not
       tinted. The text block ends ~74% (desktop) / ~91% (mobile); the lower
       part of the photo is already orange, so readability holds either way. */
    background: linear-gradient(180deg,
      rgba(233,89,47,.92) 0%, rgba(236,108,46,.82) 40%,
      rgba(239,128,44,.45) 62%, rgba(240,140,37,0) 80%);
  }
  .studio-body .rw-hs-form { width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 0; }
  .studio-body .rw-hs-form .hs-form-field { margin-bottom: 16px; }
  .studio-body .rw-hs-form input[type="submit"],
  .studio-body .rw-hs-form .hs-button {
    background: linear-gradient(135deg, #eb5f33 0%, #f08c25 100%) !important;
    border: none !important; border-radius: 999px !important;
    color: #fff !important; font-weight: 700 !important;
    padding: 14px 40px !important; cursor: pointer !important;
  }
  .studio-body button[data-s-6d37a8dd-5e8e-436a-8e05-f056fd5f1002],
  .studio-body button[data-s-e1f4be25-64b2-4089-94cb-fd800c225101] {
    cursor: pointer;
  }
  /* About member-detail modal. */
  .rw-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(17,17,17,.62);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    font-family: 'Noto Sans JP', sans-serif;
  }
  .rw-modal {
    position: relative; background: #fff;
    border-radius: 18px; width: 100%; max-width: 820px;
    max-height: 86vh; overflow: hidden;
    display: flex;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
  }
  .rw-modal-photo { position: relative; flex: 0 0 42%; background: #f0f0f0; }
  .rw-modal-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    display: block;
  }
  .rw-modal-text { flex: 1 1 0; padding: 52px 44px; overflow-y: auto; }
  .rw-modal-close {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    width: 40px; height: 40px; border: none; cursor: pointer;
    border-radius: 50%; background: rgba(255,255,255,.92); color: #333;
    font-size: 22px; line-height: 1;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
  }
  .rw-modal-close:hover { background: #fff; }
  .rw-m-role { margin: 0 0 8px; color: #f08c25; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
  .rw-m-name { margin: 0 0 2px; color: #1a1a1a; font-size: 26px; font-weight: 700; }
  .rw-m-en { margin: 0 0 24px; color: #9a9a9a; font-size: 13px; letter-spacing: .04em; }
  .rw-m-bio { margin: 0; color: #333; font-size: 14px; line-height: 2; border-top: 1px solid #eee; padding-top: 22px; }
  @media (max-width: 680px) {
    .rw-modal { flex-direction: column; max-height: 90vh; overflow-y: auto; }
    .rw-modal-photo { flex: none; height: 280px; }
    .rw-modal-text { padding: 32px 26px 40px; }
  }

  .rw-hero {
    position: relative; width: 100%;
    height: 94vh; min-height: 620px;
    overflow: hidden; background: #111;
    font-family: 'Noto Sans JP', sans-serif;
    --slant: 7vw;
  }
  .rw-hero__panels {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: calc(100% + var(--slant) * 2);
    display: flex; background: #111;
  }
  .rw-hero__panel { position: relative; flex: 1 1 0; }
  .rw-hero__panel:nth-child(1) {
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  }
  .rw-hero__panel:nth-child(2) {
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
    margin-left: calc(var(--slant) * -1);
  }
  .rw-hero__panel:nth-child(3) {
    clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
    margin-left: calc(var(--slant) * -1);
  }
  .rw-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }
  .rw-hero__panel::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(17,17,17,.72) 0%, rgba(17,17,17,.15) 34%,
                      rgba(17,17,17,.15) 52%, rgba(17,17,17,.78) 100%);
  }
  .rw-hero__caption {
    position: absolute; z-index: 2;
    left: 0; right: 0; bottom: clamp(40px, 7vh, 90px);
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    transform: translateX(calc(var(--slant) / -2));
  }
  .rw-hero__bar {
    width: 40px; height: 3px; margin-bottom: 18px;
    background: linear-gradient(135deg, #eb5f33 0%, #f08c25 100%);
  }
  .rw-hero__word {
    color: #fff; font-weight: 700;
    font-size: clamp(30px, 3.6vw, 56px);
    line-height: 1.1; letter-spacing: .02em;
    text-shadow: 0 4px 24px rgba(0,0,0,.4);
  }
  .rw-hero__satasu {
    color: rgba(255,255,255,.88); font-weight: 500;
    font-size: clamp(14px, 1.4vw, 19px);
    margin-top: 10px; letter-spacing: .04em;
  }
  /* Combined keyword line, shown only on the single-image mobile hero. */
  .rw-hero__word-all {
    display: none;
    color: #fff; font-weight: 700; letter-spacing: .02em;
    text-shadow: 0 4px 24px rgba(0,0,0,.4);
  }
  .rw-hero__head {
    position: absolute; z-index: 3;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; max-width: 900px;
    text-align: center; padding: 0 24px;
  }
  .rw-hero__eyebrow {
    margin: 0 0 18px; color: #fff;
    font-size: 13px; font-weight: 600; letter-spacing: .22em;
  }
  .rw-hero__title {
    margin: 0; color: #fff; font-weight: 700;
    font-size: clamp(32px, 5vw, 72px); line-height: 1.2;
    text-shadow: 0 4px 30px rgba(0,0,0,.45);
    white-space: nowrap;
  }
  .rw-hero__en {
    margin: 20px 0 0; color: rgba(255,255,255,.8);
    font-size: clamp(11px, 1.2vw, 15px); letter-spacing: .08em;
  }
  .rw-hero__cta {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 16px; margin-top: 32px;
  }
  .rw-hero__btn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 56px; padding: 0 30px; border-radius: 999px;
    font-size: 15px; font-weight: 700; text-decoration: none;
    background: linear-gradient(135deg, #eb5f33 0%, #f08c25 100%);
    color: #fff; box-shadow: 0 10px 30px rgba(235,95,51,.4);
  }
  .rw-hero__btn span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; color: #eb5f33; font-size: 12px;
  }
  .rw-hero__btn--ghost {
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.75); box-shadow: none;
  }
  @media (max-width: 768px) {
    .rw-hero { height: auto; min-height: 0; --slant: 0px; }
    .rw-hero__panels {
      position: relative; width: 100%;
      flex-direction: column; gap: 0;
    }
    /* Single-image hero: keep only the first panel, drop the stacked triptych.
       flex:none is required — the base flex:1 1 0 sets flex-basis:0 on the
       column main axis, which would override the height below and collapse it. */
    .rw-hero__panel { flex: none; height: clamp(240px, 60vw, 340px); min-height: 0; }
    .rw-hero__panel:nth-child(n + 2) { display: none; }
    .rw-hero__panel:nth-child(1) { clip-path: none; margin-left: 0; }
    .rw-hero__head {
      position: relative; top: auto; left: auto;
      transform: none; max-width: 100%;
      background: #111;
      /* top padding clears the fixed .l-header (~76px on mobile) so the
         eyebrow/title aren't hidden behind it, with extra breathing room. */
      padding: 120px 24px 44px;
    }
    .rw-hero__title {
      white-space: normal;
      font-size: clamp(26px, 7.4vw, 34px);
      line-height: 1.3;
      text-wrap: balance;
    }
    /* Subtle vignette behind the centered keyword only — fades to fully clear
       at the edges so the photo reads cleanly instead of looking covered. */
    .rw-hero__panel:nth-child(1)::after {
      background: radial-gradient(ellipse 135% 72% at 50% 50%,
        rgba(17,17,17,.46) 0%, rgba(17,17,17,.16) 62%, rgba(17,17,17,0) 100%);
    }
    /* Center the keyword line vertically within the single hero image. */
    .rw-hero__caption {
      top: 50%; bottom: auto; transform: translateY(-50%);
      left: 0; right: 0; padding: 0 20px;
      align-items: center; text-align: center;
    }
    .rw-hero__word { display: none; }
    .rw-hero__word-all {
      display: block; width: 100%; text-align: center;
      font-size: 21px; line-height: 1.35;
      text-shadow: 0 2px 16px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.5);
    }
    .rw-hero__satasu {
      display: block; width: 100%; text-align: center;
      font-size: 15px; text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.5);
    }
    /* Hide the decorative photo-only band (4 portraits, no text, ~1200px tall). */
    .studio-body section[data-s-91de708b-8321-4979-93e2-4505992b940e] {
      display: none !important;
    }
    /* Empty image placeholders in the 採用支援事業 (RPO) card / Service area:
       their ::before background-image was never set, so at <=840px Studio shows
       them as blank boxes. Desktop already hides them — do the same here. */
    .studio-body [data-s-b1c21c71-cd17-4c4d-9fc8-5bdd5142e645],
    .studio-body [data-s-0fdf8d7f-fcb6-4f36-9dfa-1695d68911e2] {
      display: none !important;
    }
  }