/* ===================================================
   GYM 45th Anniversary LP — Interview page (SPECIAL 15QUESTIONS)
   Mobile-first. Default rules match the SP design;
   the @media (min-width: 768px) block applies the PC design.
   ========================================================================== */

.s-interview {
  position: relative;
  overflow: hidden;
  background-color: #FFFFFF;
}

.s-interview__inner {
  position: relative;
  width: 100%;
}

/* ---------- head (title / eyebrow / lead) ---------- */
.s-interview__head {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #EAE4E4;
  /* no bottom padding: .s-interview__gnav sits flush against the lead
     text, right where the divider used to be. */
  padding: 20px 20px 0;
}

@media (min-width: 768px) {
  .s-interview__head {
    padding: 32px 20px 0;
  }
}

.s-interview__record {
  position: absolute;
  z-index: 0;
  top: -70px;
  right: -140px;
  width: 300px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}

@media (min-width: 768px) {
  .s-interview__record {
    top: -180px;
    right: -120px;
    width: 620px;
  }
}

.s-interview__logo {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 20px;
  width: 90px;
  height: auto;
  margin: 0;
}

.s-interview__logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .s-interview__logo {
    top: 32px;
    left: 40px;
    width: 140px;
  }
}

.s-interview__title {
  position: relative;
  z-index: 1;
  margin: 90px 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 2.8px;
  color: var(--color-red);
  text-align: center;
}

.s-interview__title-line {
  display: block;
  font-size: clamp(24px, 9vw, 40px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.s-interview__title-num {
  display: inline-block;
  font-size: clamp(30px, 11.2vw, 50px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (min-width: 768px) {
  .s-interview__title {
    letter-spacing: 8.4px;
    margin-top: 145px;
    margin-bottom: 16px;
  }

  .s-interview__title-line {
    font-size: 120px;
  }

  .s-interview__title-num {
    font-size: 150px;
  }
}

.s-interview__people {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-top: -60px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .s-interview__people {
    max-width: 760px;
    margin-top: -150px;
    margin-bottom: 20px;
  }
}

.s-interview__eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 2.16px;
  color: var(--color-dark);
}

@media (min-width: 768px) {
  .s-interview__eyebrow {
    font-size: 24px;
    letter-spacing: 2.88px;
    margin-bottom: 16px;
  }
}

.s-interview__lead {
  position: relative;
  z-index: 1;
  margin: 0 0 24px;
  max-width: 680px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1.68px;
  color: var(--color-dark);
}

@media (min-width: 768px) {
  .s-interview__lead {
    font-size: 20px;
    letter-spacing: 2.4px;
    margin-bottom: 32px;
  }
}

/* ---------- global nav (jump to question) ----------
   Sits in normal flow right above Q1 by default, so it first appears
   there rather than covering the hero. interview.js pins it to
   position: fixed once that starting point scrolls above the viewport
   (real position: sticky doesn't work here — .s-interview has
   overflow: hidden for the decorative bleed graphics, and a hidden/
   clipping ancestor stops sticky from ever leaving its start position),
   inserting .s-interview__gnav-spacer to hold its old flow space so the
   list underneath doesn't jump. */
.s-interview__gnav {
  position: static;
  z-index: 50;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.s-interview__gnav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 10px 12px;
  border-right: 1px solid rgba(43, 43, 43, 0.12);
}

.s-interview__gnav-logo img {
  display: block;
  width: auto;
  height: 24px;
}

@media (min-width: 768px) {
  .s-interview__gnav-logo {
    padding: 14px 24px;
  }

  .s-interview__gnav-logo img {
    height: 32px;
  }
}

.s-interview__gnav.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
}

.s-interview__gnav-spacer {
  height: 0;
}

.s-interview__gnav-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 20px 10px 12px;
  list-style: none;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.s-interview__gnav-list::-webkit-scrollbar {
  display: none;
}

.s-interview__gnav-link {
  display: block;
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid rgba(43, 43, 43, 0.15);
  border-radius: 999px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--color-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.s-interview__gnav-link.is-active {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: #FFFFFF;
}

@media (min-width: 768px) {
  /* Centered via auto margins on the first/last item rather than
     justify-content: center — in an overflow-x: auto scroller, centering
     pushes the leading pills (Q1…) past the left edge where they can't be
     scrolled back into view. Auto margins collapse to 0 once the pills
     overflow, so the row starts at Q1 and stays scrollable. */
  .s-interview__gnav-list {
    gap: 12px;
    padding: 14px 60px 14px 24px;
  }

  .s-interview__gnav-list > li:first-child {
    margin-left: auto;
  }

  .s-interview__gnav-list > li:last-child {
    margin-right: auto;
  }

  .s-interview__gnav-link {
    padding: 9px 20px;
    font-size: 15px;
    letter-spacing: 1.2px;
  }
}

/* jump targets land below the sticky nav instead of underneath it;
   --gnav-height is measured and kept in sync by interview.js since the
   nav's real height depends on font loading/line-wrapping. interview.js
   animates the jump itself, so scroll-behavior stays "auto" here — a CSS
   "smooth" here would hijack the plain scrollTo() calls in that animation
   and turn each step into its own competing (and never-finishing) native
   smooth-scroll. */
.s-interview__row {
  scroll-margin-top: var(--gnav-height, 60px);
}

/* ---------- question list ---------- */
.s-interview__list {
  position: relative;
}

.s-interview__row {
  position: relative;
  padding: 24px 0 40px;
  background-color: #EAE4E4;
}

.s-interview__row--alt {
  background-color: #FFFFFF;
}

@media (min-width: 768px) {
  .s-interview__row {
    padding: 64px 0 72px;
  }
}

.s-interview__row-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .s-interview__row-head {
    padding: 0 60px;
  }
}

.s-interview__qnum {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.23;
  letter-spacing: 3.5px;
  color: #FFFFFF;
}

.s-interview__row--alt .s-interview__qnum {
  color: #EAE4E4;
}

@media (min-width: 768px) {
  .s-interview__qnum {
    font-size: 64px;
    letter-spacing: 4.48px;
  }
}

.s-interview__qtitle {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.4px;
  color: var(--color-dark);
}

@media (min-width: 768px) {
  .s-interview__qtitle {
    font-size: 32px;
    letter-spacing: 3.84px;
  }
}

/* ---------- horizontal scroll track ---------- */
.s-interview__track-wrap {
  margin-top: 16px;
}

@media (min-width: 768px) {
  .s-interview__track-wrap {
    margin-top: 28px;
  }
}

.s-interview__track {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: none;
  padding: 16px 20px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.s-interview__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.s-interview__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .s-interview__track {
    padding: 16px 60px 24px;
  }
}

.s-interview__card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 270px;
  height: 270px;
  border-radius: 7.2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #FFFFFF;
  filter: drop-shadow(4px 10px 8px rgba(0, 0, 0, 0.1));
}

@media (min-width: 768px) {
  .s-interview__card {
    width: 300px;
    height: 300px;
    border-radius: 8px;
  }
}

.s-interview__card-head {
  display: flex;
  align-items: center;
  gap: 11.7px;
  flex-shrink: 0;
  padding: 14.4px 17.1px;
  background-color: var(--card-bg, #A6B60F);
}

@media (min-width: 768px) {
  .s-interview__card-head {
    gap: 13px;
    padding: 16px 19px;
  }
}

.s-interview__avatar {
  display: block;
  flex-shrink: 0;
  width: 37.8px;
  height: 37.8px;
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .s-interview__avatar {
    width: 42px;
    height: 42px;
  }
}

.s-interview__namerole {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--card-color, #FFFFFF);
  white-space: nowrap;
}

.s-interview__role {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1.32px;
}

.s-interview__name {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2.16px;
}

.s-interview__answer {
  margin: 0;
  flex: 1 0 0;
  min-height: 0;
  overflow: hidden;
  padding: 21.6px 24.3px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 21.6px;
  line-height: 1.6;
  letter-spacing: 2.592px;
  color: var(--color-dark);
}

.s-interview__answer--sm {
  font-size: 18px;
  letter-spacing: 2.16px;
}

/* Q4 / HAJIME ("新聞広告15段の制作を担当したことです...") — manually pinned
   size (skipped by interview.js's auto-fit, see data-font-locked) rather
   than the computed auto-fit value, per request. 15px on SP (fits exactly),
   16px on PC (also fits at that breakpoint's wider card). */
.s-interview__answer--fixed-hajime-q4 {
  font-size: 15px;
  letter-spacing: 1.8px;
}

/* Q12 / AMANE ("撮影の時間を甘く見積もったことで...") — manually pinned to the
   largest size that still fits the card at each breakpoint (found by
   binary search), rather than the more conservative auto-fit estimate. */
.s-interview__answer--fixed-amane-q12 {
  font-size: 15.5px;
  letter-spacing: 1.86px;
}

/* Q11 / MIYAZAWA ("広告視点でいうと情報が早く正確に伝わるもの...") — same
   binary-search-for-largest-fitting-size treatment as the two rules above. */
.s-interview__answer--fixed-miyazawa-q11 {
  font-size: 15.5px;
  letter-spacing: 1.86px;
}

/* Q16 / MEGUMI ("今後も時代に取り残されることなく...") — same treatment:
   largest size that fits each breakpoint's card (measured max 15.2px SP /
   16.9px PC), rounded down slightly to absorb font-metric differences
   between browsers. */
.s-interview__answer--fixed-megumi-q16 {
  font-size: 15px;
  letter-spacing: 1.8px;
}

@media (min-width: 768px) {
  .s-interview__answer {
    padding: 24px 27px;
    font-size: 24px;
    letter-spacing: 2.88px;
  }

  .s-interview__answer--sm {
    font-size: 20px;
    letter-spacing: 2.4px;
  }

  .s-interview__answer--fixed-hajime-q4 {
    font-size: 16px;
    letter-spacing: 1.92px;
  }

  .s-interview__answer--fixed-amane-q12 {
    font-size: 17.8px;
    letter-spacing: 2.136px;
  }

  .s-interview__answer--fixed-miyazawa-q11 {
    font-size: 17.8px;
    letter-spacing: 2.136px;
  }

  .s-interview__answer--fixed-megumi-q16 {
    font-size: 16.8px;
    letter-spacing: 2.016px;
  }
}

/* ---------- pagination dots ---------- */
.s-interview__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  padding: 0 20px;
}

.s-interview__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #FFFFFF;
  border: 1px solid rgba(43, 43, 43, 0.2);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.s-interview__dot.is-active {
  background-color: var(--color-red);
  border-color: var(--color-red);
}

@media (min-width: 768px) {
  .s-interview__dot {
    cursor: pointer;
  }
}

/* ==========================================================================
   Section - Contact (コーポレートサイト誘導 CTA)
   Copied from sections.css (shared with index.html) since this page has
   its own standalone stylesheet rather than loading sections.css.
   Mobile-first: base rules = SP (375px design), overridden at 768px+ for PC (1440px design)
   Source: Figma fileKey FlMdfhCyjJBL4RtfBY0EQX
     - PC node 2002:7 "Section - Contact"
     - SP node 2054:8 "Section - Contact SP"
   Font: 'Noto Sans JP' (Medium) — the only font family used in this section.

   Layout notes:
   - SP: normal flex-column flow (illustration -> heading -> text -> button),
     with 3 decorative line-art/circle images absolutely positioned behind it
     and clipped by `overflow: hidden` on the section (exact px, 375 canvas).
   - PC: the whole section becomes a fixed-aspect-ratio (1440:456) absolute
     canvas; every element is positioned with percentages derived from the
     original Figma px values (value / 1440 for x/width, value / 456 for
     y/height) so the section scales fluidly while preserving the design's
     proportions and keeping circular decoration perfectly round.
   ========================================================================== */

.s-contact {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #f5f5f5;
  color: #2b2b2b;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  word-break: break-word;

  /* SP: flex column, gap-19 (exact Figma SP values) */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 107px 24px 40px;
  gap: 19px;
}

/* ---------- Decorative background artwork (behind the content) ---------- */
.s-contact__deco {
  position: absolute;
  z-index: 0;
  max-width: none;
  pointer-events: none;
}

.s-contact__deco--lines-b {
  left: 211px;
  top: 346.57px;
  width: 185.112px;
  height: 253.739px;
}

.s-contact__deco--circle {
  left: -55px;
  top: 29.572px;
  width: 484.001px;
  height: 484.001px;
}

.s-contact__deco--lines-a {
  left: -89px;
  top: -67.428px;
  width: 276.314px;
  height: 333.202px;
}

/* ---------- Content (sits above the decorative artwork) ---------- */
.s-contact__illustration {
  position: relative;
  z-index: 1;
  width: 193px;
  height: 162px;
  object-fit: contain;
}

.s-contact__heading {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  font-weight: 500; /* Noto Sans JP Medium */
  font-size: 20px;
  line-height: normal;
  letter-spacing: 2.4px;
}

.s-contact__heading-line {
  display: block;
}

.s-contact__text {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 1.56px;
}

.s-contact__button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e50012;
  /* Always a full pill/stadium shape: at PC this button's height is a
     percentage of the section (so its actual px size shifts with viewport
     width), and a fixed px radius would stop matching a true semicircle
     once the height changes. An oversized radius is clamped by the browser
     to exactly half the box's own height, so the ends stay perfectly round
     at any size. */
  border-radius: 999px;
  box-shadow: 4px 10px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 18px 28px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.s-contact__button:hover {
  transform: translateY(-10px);
}

.s-contact__button-label {
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 1.92px;
  color: #ffffff;
  white-space: nowrap;
}

/* Arrow icon only appears in the PC design of this button */
.s-contact__button-arrow {
  display: none;
}

/* ==========================================================================
   PC (min-width: 768px) — reproduces the 1440x456 desktop design as a
   fluid, percentage-based absolute layout (aspect-ratio keeps every value
   proportionally correct at any width).
   ========================================================================== */
@media (min-width: 768px) {
  .s-contact {
    display: block;
    aspect-ratio: 1440 / 456;
    padding: 0;
    gap: 0;
  }

  .s-contact__deco--lines-b {
    left: 75.556%;
    top: 28.728%;
    width: 26.042%;
    height: 112.939%;
  }

  .s-contact__deco--circle {
    left: 15.833%;
    top: -68.86%;
    width: 68.333%;
    height: 215.789%;
  }

  .s-contact__deco--lines-a {
    left: 1.736%;
    top: -67.325%;
    width: 39.028%;
    height: 148.465%;
  }

  .s-contact__illustration {
    position: absolute;
    left: 27.222%;
    top: 25.877%;
    width: 18.125%;
    height: 48.246%;
  }

  .s-contact__heading {
    position: absolute;
    left: 50.069%;
    top: 32.895%;
    width: 30.069%;
    /* 24px at the 1440px reference width, scaling with the section so it
       never outgrows its %-based box between the 768-1440 range */
    font-size: clamp(14px, 1.667vw, 24px);
    letter-spacing: 2.88px;
    white-space: nowrap;
  }

  .s-contact__heading-line {
    display: inline;
  }

  .s-contact__text {
    position: absolute;
    left: 53.125%;
    top: 42.325%;
    width: 23.889%;
    font-size: clamp(9px, 0.972vw, 14px);
    letter-spacing: 1.68px;
    white-space: nowrap;
  }

  .s-contact__button {
    position: absolute;
    left: 53.819%;
    top: 51.974%;
    width: 22.569%;
    height: 13.596%;
    padding: 0;
    box-shadow: 4px 10px 16px 0 rgba(0, 0, 0, 0.1);
  }

  .s-contact__button-label {
    font-size: clamp(10px, 1.111vw, 16px);
  }

  .s-contact__button-arrow {
    display: block;
    /* In-flow flex item (not absolute) so it sits a fixed 20px to the
       right of the label text, rather than pinned to the button's edge. */
    flex: none;
    margin-left: 20px;
    width: 11px;
    height: 11px;
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   Present badge ("PRESENT / GYMオリジナルTシャツ&キーホルダープレゼント")
   Copied from sections.css's .s-hero__present (shared with index.html).
   PC only, same as index.html — SP uses the sticky T-shirt/keychain bar
   below instead. Fixed to the viewport bottom-right so it tracks the
   visitor down the page.
   ========================================================================== */
.s-hero__present {
  display: none;
}

@media (min-width: 768px) {
  .s-hero__present {
    display: block;
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 253px;
    aspect-ratio: 1 / 1;
    filter: drop-shadow(2px 6px 10px rgba(0, 0, 0, 0.25));
    z-index: 60;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transform: translateY(0);
    transition: transform 0.2s ease;
  }

  .s-hero__present:hover {
    transform: translateY(-10px);
  }

  .s-hero__present-badge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .s-hero__present-inner {
    position: absolute;
    left: 8.3%;
    top: 18.97%;
    width: 88.07%;
    height: 81.01%;
  }

  .s-hero__present-label {
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 2.1px;
    color: var(--color-red);
    text-align: center;
  }

  .s-hero__present-desc {
    position: absolute;
    left: 50%;
    top: 16.59%;
    margin: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.44;
    color: var(--color-dark);
    text-align: center;
  }

  .s-hero__present-tshirt {
    position: absolute;
    left: 56.27%;
    top: 48.79%;
    width: 51.97%;
    height: 51.21%;
    object-fit: contain;
    transform: rotate(12.38deg);
  }

  .s-hero__present-keyholder--1 {
    position: absolute;
    left: 9.96%;
    top: 52.21%;
    width: 30.07%;
    height: 34.9%;
    object-fit: contain;
    transform: rotate(22.86deg);
  }

  .s-hero__present-keyholder--2 {
    position: absolute;
    left: 21.77%;
    top: 60.95%;
    width: 22.66%;
    height: 28.72%;
    object-fit: contain;
    transform: rotate(-2.11deg);
  }
}

/* ==========================================================================
   追尾CTA(スクロール固定) — SP-only sticky bottom CTA bar
   Copied verbatim from sections.css (shared with index.html); links back
   to index.html's giveaway section instead of an on-page anchor. Hides
   itself at 768px+ — PC gets the .s-hero__present badge above instead.
   ========================================================================== */
.s-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100%;
  padding: 13px 24px;
  font-family: var(--font-jp);
}

.s-sticky-cta__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 62px;
  background-color: #fbc400;
  border-radius: 31px;
  box-shadow: 4px 10px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: visible;
  padding: 0 14px 0 0;
  text-decoration: none;
}

.s-sticky-cta__tshirt {
  flex: none;
  width: 71.45px;
  height: 65.61px;
  margin-left: -22px; /* bleed off the pill's rounded left edge */
  transform: rotate(-15.98deg);
  object-fit: contain;
}

.s-sticky-cta__text {
  flex: 1 1 0;
  min-width: 0;
  z-index: 1;
  margin: 0;
  font-weight: 700; /* Noto Sans JP Bold */
  font-size: 16px;
  line-height: 1.35;
  color: #1a1a1a;
  text-align: center;
}

.s-sticky-cta__text-line {
  display: block;
  white-space: nowrap; /* each line is its own unit; interview.js shrinks the
                           font-size or stacks the chunks instead */
}

/* Three-line fallback for narrow phones (interview.js adds .is-stacked): each
   chunk of the second line gets its own row. 3 × 14px × 1.3 stays inside
   the 62px bar. */
.s-sticky-cta__text.is-stacked {
  line-height: 1.3;
}

.s-sticky-cta__text.is-stacked .s-sticky-cta__text-chunk {
  display: block;
}

.s-sticky-cta__end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.s-sticky-cta__keychains {
  position: relative;
  display: block;
  flex: none;
  width: 45px;
  height: 44px;
}

.s-sticky-cta__keychain {
  position: absolute;
  object-fit: contain;
}

.s-sticky-cta__keychain--badge {
  z-index: 2; /* in front of the record keychain */
  left: 0;
  top: 3px;
  width: 30px;
  height: 33px;
  transform: rotate(20deg); /* tilted right (clockwise) */
}

.s-sticky-cta__keychain--record {
  z-index: 1;
  left: 17px;
  top: 0;
  width: 28px;
  height: 31.4px;
  transform: rotate(-10deg); /* tilted left (counter-clockwise) */
}

.s-sticky-cta__arrow {
  flex: none;
  width: 11px;
  height: 11px;
  transform: rotate(90deg);
}

/* Hidden at PC — this bar is SP-only in the source design */
@media (min-width: 768px) {
  .s-sticky-cta {
    display: none;
  }
}