/*
 * STUDIO scroll-animation override
 * Resets all STUDIO "appear" initial states so content is visible without JS.
 * Animation effects are intentionally lost (agreed with client).
 * Generated: 2026-07-04
 */

/* Main scroll-animation initial state override.
   STUDIO adds .appear to elements before they enter the viewport.
   Without JS the class never gets removed, keeping elements invisible.
   Patterns seen: opacity:0, translate:*px, scale:0.4, transform:translate, filter:blur */
.appear {
  opacity: 1 !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* A2: carousel Prev/Next controls, production design = orange circle +
   white left/right triangle (site-wide, incl. top NEWS / パートナー carousels).
   The button's own <img> is always an intentionally-blank placeholder SVG
   (STUDIO swaps in a real icon client-side after hydration, which never
   fires on this static mirror), so we hide it and draw the triangle with a
   plain CSS border-triangle on ::after instead of depending on any image. */
button[aria-label="Prev Slide"],
button[aria-label="Next Slide"] {
  background: #fc4c0c !important;
  position: relative;
}
button[aria-label="Prev Slide"] img,
button[aria-label="Next Slide"] img {
  opacity: 0 !important;
}
button[aria-label="Prev Slide"]::after,
button[aria-label="Next Slide"]::after {
  content: "" !important;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}
button[aria-label="Prev Slide"]::after {
  border-width: 6px 9px 6px 0;
  border-color: transparent #ffffff transparent transparent;
  margin-right: 2px;
}
button[aria-label="Next Slide"]::after {
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 2px;
}

/* A1: NEWS-carousel (and any other) thumbnail images render blank.
   STUDIO's .image component paints the real photo via a `:before` layer at
   z-index:-2 (background-image, confirmed present and pointing at a valid
   local asset), stacked *behind* the container's own opaque placeholder
   background (white/gray, meant to be swapped out once the client-side JS
   "image finished loading" transition fires). That transition never runs on
   this static mirror, so the placeholder color permanently hides the real
   picture behind it. Dropping the container's own background lets the
   `:before` photo show through everywhere. */
.image {
  background-color: transparent !important;
}

/* A6: NEWS-carousel thumbnail has a mismatched corner radius baked into the
   STUDIO source (4px 4px 24px 4px — bottom-right noticeably rounder than the
   other 3 corners, screenshot-confirmed both on the mirror and on production
   itself). Requested fix: make all 4 corners consistent. */
[data-s-274a6b80-0fd4-4afa-b70f-898251674d59] {
  border-radius: 4px !important;
}

/* A5: unify the "お問合せはこちらから" / "採用情報はこちらから" CTA section
   design across all pages to the company-page-bottom style (solid orange
   band, white text, white circle + orange launch icon at the right edge —
   see ~/sb_review5/IMG_3875.png). Everywhere else on the site this section
   was a different, older "white card + black CONTACT/CAREERS heading"
   variant (confirmed present on production too, on e.g. /careers — this is
   a deliberate design unification requested by the client, not a
   match-production fix). The HTML for all instances was rewritten to a
   shared markup shape (.a5-cta-wrap > a.a5-cta-band > .a5-cta-inner >
   .a5-cta-text + .a5-cta-iconwrap > .a5-cta-icon); this is that shape's
   styling. */
.a5-cta-wrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 30px;
  width: 100%;
  padding: 0 32px;
  box-sizing: border-box;
}
@media screen and (max-width: 690px) {
  .a5-cta-wrap {
    flex-direction: column;
    gap: 15px;
    padding: 0 16px;
  }
}
.a5-cta-band {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  background: #fc4c0c !important;
  padding: 20px 0;
  text-decoration: none;
  transition: box-shadow 300ms ease-in-out, scale 300ms ease-in-out;
}
.a5-cta-band:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  scale: 1.03;
}
.a5-cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.a5-cta-text {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 400;
  text-align: center;
  flex: 1 1 auto;
  margin: 0;
}
.a5-cta-iconwrap {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a5-cta-icon {
  color: #fc4c0c !important;
  font-size: 22px !important;
}