/* ===================================================
   GYM 45th Anniversary LP — section styles
   =================================================== */

/* ---------- hero ---------- */
/* ==========================================================================
   Section - Hero (s-hero)
   Mobile-first. Default rules match the SP (375px) design;
   the @media (min-width: 768px) block applies the PC (1440px) design.
   All decorative pieces are positioned with percentages against a sized
   ancestor so the composition scales fluidly at any width in each range,
   rather than being pinned to the 375px / 1440px canvases.
   ========================================================================== */

.s-hero {
  /* Pure background layer: always full window width, at any viewport size
     (including past 1920px) — the artwork's own max-width/centering lives
     on .s-hero__stage below instead, so widening the window never leaves
     unpainted margins beside the red background. */
  position: relative;
  overflow: hidden;
  background-color: #E50012;
  font-family: 'Noto Sans JP', sans-serif;
}

.s-hero__stage {
  position: relative;

  /* SP: padded flex column -> [visual][people] */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
}

/* --------------------------------------------------------------------------
   Visual block: record graphic + heading lockup that sits above the fold.
   On SP this is a flow item sized by aspect-ratio (327:140, the content
   width vs. the reserved "Hero Deco Spacer" height from the design).
   -------------------------------------------------------------------------- */
.s-hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 327 / 140;
}

.s-hero__record {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -65.71%;   /* -92px / 140px visual height */
  width: 114.68%; /* 375px / 327px content width */
  height: auto;
  pointer-events: none;
  /* main.js continuously rewrites `transform` to spin this clockwise,
     composed on top of the translateX(-50%) centering above. */
  will-change: transform;
}

.s-hero__heading {
  position: absolute;
  left: 23.23%;
  top: -3.93%;
  width: 53.55%;
  margin: 0;
  line-height: 0;
}

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

.s-hero__title--pc {
  display: none;
}

.s-hero__logo-lockup {
  display: none; /* PC-only small lockup; absent from the SP design */
}

/* --------------------------------------------------------------------------
   People illustration
   -------------------------------------------------------------------------- */
.s-hero__people {
  display: block;
  width: 100%;
  height: auto;
  /* SP: the record graphic (position:absolute) bleeds down past its own
     140px-tall container into this block's space, so without an explicit
     z-index the absolute record would paint above this in-flow image and
     clip the people's heads. Force this in front, matching the Figma
     z-order (people is the frontmost layer, drawn after the record). */
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Present badge cluster - PC-only on SP (not present in the SP Figma node)
   -------------------------------------------------------------------------- */
.s-hero__present {
  display: none;
}

/* ==========================================================================
   PC / desktop (>= 768px), based on the 1440x902 design
   ========================================================================== */
@media (min-width: 768px) {
  .s-hero__stage {
    display: block;
    padding: 0;
    aspect-ratio: 1440 / 902;
    max-width: 1920px;
    margin: 0 auto;
  }

  .s-hero__visual {
    position: static;
    width: auto;
    aspect-ratio: auto;
  }

  .s-hero__record {
    /* left/transform inherited from the base rule: left:50%; translateX(-50%) */
    top: -19.62%;   /* -177 / 902 */
    width: 59.24%;  /* 853 / 1440 */
  }

  .s-hero__heading {
    left: 50%;
    top: 3.77%;     /* 34 / 902 */
    width: 32.88%;  /* 473.5 / 1440 */
    transform: translateX(-50%);
  }

  .s-hero__title--sp {
    display: none;
  }

  .s-hero__title--pc {
    display: block;
  }

  .s-hero__logo-lockup {
    display: block;
    position: absolute;
    left: 3.125%;   /* 45 / 1440 */
    top: 5.14%;     /* 46.35 / 902 */
    width: 10.66%;  /* 153.52 / 1440 */
    height: auto;
  }

  .s-hero__people {
    position: absolute;
    left: 50%;
    top: 45.9%;     /* 414 / 902 */
    width: 60.87%;  /* 876.5 / 1440 */
    transform: translateX(-50%);
  }

  /* ---- Present badge cluster --------------------------------------------
     Fixed to the viewport (not the section) so it tracks the user down the
     page as they scroll, like the SP sticky CTA bar. Sized at its original
     Figma dimensions (253px) since it's no longer scaling with the section
     width; its children below use fixed px to match (not vw units). */
  .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: 'Kumar One', 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 30px; /* fixed: badge is now a fixed 253px viewport-pinned size */
    line-height: 1.2;
    letter-spacing: 2.1px;
    color: #E50012;
    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; /* fixed: badge is now a fixed 253px viewport-pinned size */
    line-height: 1.44;
    color: #2B2B2B;
    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);
  }
}

/* ---------- about ---------- */
/* ==========================================================================
   Section - About (45周年インフォメーション)
   Mobile-first: base rules = SP (375px design), overridden at 768px+ for PC (1440px design)
   Source: Figma fileKey FlMdfhCyjJBL4RtfBY0EQX
     - PC node 2002:3 "Section - About"
     - SP node 2054:4 "Section - About SP"
   Font: 'Noto Sans JP' (Medium / Bold) — the only font family used in this section.
   ========================================================================== */

.s-about {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #e50012;
  color: #ffffff;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  word-break: break-word;

  /* SP: pt-40 / pb-69 / px-24 / gap-20 (exact Figma SP values) */
  padding: 40px 24px 69px;
  gap: 20px;
}

/* Decorative watermark ("Keep Creative / 45TH ANNIVERSARY") — hidden on SP,
   shown from PC breakpoint up. Sized relative to the section, not pixel-locked. */
.s-about__watermark {
  display: none;
}

/* ---------- Heading: "2026年10月8日 GYMは創業45周年を迎えました。" ---------- */
.s-about__heading {
  width: 100%;
}

.s-about__heading-line {
  margin: 0;
  font-weight: 500; /* Noto Sans JP Medium */
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 4.8px;
}

/* On SP the "45" is not enlarged — it matches the surrounding heading text */
.s-about__num {
  font-size: inherit;
  font-weight: inherit;
}


/* ---------- Body copy: company history paragraph ---------- */
.s-about__body {
  width: 100%;
}

.s-about__body p {
  margin: 0;
  font-weight: 700; /* Noto Sans JP Bold */
  font-size: 14px;
  line-height: 2.62;
  letter-spacing: 2.8px;
}

/* ==========================================================================
   PC (min-width: 768px) — reproduces the 1440px desktop design
   ========================================================================== */
@media (min-width: 768px) {
  .s-about {
    /* PC: pt-106 / pb-172 / gap-55 (from Figma text-block y/height values) */
    padding: 106px 0 172px;
    gap: 55px;
  }

  .s-about__watermark {
    display: block;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 63.62%; /* left/right 18.19% inset on a 1440px canvas */
    max-width: 916px;
    height: auto;
    opacity: 0.44;
    pointer-events: none;
    z-index: 0;
  }

  .s-about__heading,
  .s-about__body {
    position: relative;
    z-index: 1;
  }

  .s-about__heading-line {
    font-size: 32px;
    line-height: 1.35;
    letter-spacing: 7.68px;
    white-space: nowrap;
  }

  /* SP-only manual break ("GYMは創業45周年を / 迎えました。") — the PC line
     already fits on one row, so the forced break is suppressed here. */
  .s-about__heading-break {
    display: none;
  }

  .s-about__num {
    font-size: 50px;
  }

  .s-about__body {
    max-width: 658px;
  }

  .s-about__body p {
    font-size: 18px;
    line-height: 3;
    letter-spacing: 3.6px;
  }
}

/* ---------- special-questions ---------- */
/* ===================================================
   Section - SpecialQuestions (45周年社員アンケート)
   Mobile-first: SP (375px) default → PC (1440px) at 768px+
   =================================================== */

.s-questions {
  position: relative;
  overflow: hidden;
  background-color: #EAE4E4;
  /* No horizontal padding here: .s-questions__inner (and the marquee inside
     it) must span the full window width. The 24px SP inset that used to
     live here is applied to .s-questions__head instead, so the text/CTA
     stay comfortably clear of the edges without shrinking the marquee. */
  padding: 40px 0;
}

@media (min-width: 768px) {
  .s-questions {
    padding: 100px 0 130px;
  }
}

/* ---------- decorative watermark blobs (PC only) ----------
   Figma's mask export for these two elements returned only a
   flat bounding rectangle (the true vector mask path could not
   be retrieved), so the circular "GYM 45th ANNIVERSARY / KEEP ON
   CREATIVE" texture is cropped by the fixed-size overflow:hidden
   boxes below instead of a pixel-exact mask. Visually this
   reproduces the two low-opacity arcs bleeding off the top-left
   and bottom-right corners seen in the design. SP design has no
   such decoration, so it is hidden below 768px. */
.s-questions__deco {
  display: none;
}

@media (min-width: 768px) {
  .s-questions__deco {
    display: block;
    position: absolute;
    inset: 0;
    max-width: 1440px;
    margin: 0 auto;
    pointer-events: none;
  }

  .s-questions__deco-item {
    position: absolute;
    display: block;
    width: 805px;
    height: 865px;
    overflow: hidden;
    /* main.js continuously rewrites `transform` to spin this clockwise. */
    will-change: transform;
  }

  .s-questions__deco-item img {
    display: block;
    width: 865px;
    height: 805px;
    max-width: none;
    object-fit: cover;
    opacity: 0.15;
    transform: rotate(90deg);
    transform-origin: center;
    position: relative;
    left: -30px;
    top: 30px;
  }

  .s-questions__deco-item--1 {
    left: -459px;
    top: -392px;
  }

  .s-questions__deco-item--2 {
    left: 972px;
    top: 441px;
  }
}

/* ---------- layout ---------- */
.s-questions__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
}

/* head -> marquee spacing (was previously the .s-questions__inner gap) */
.s-questions__head {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .s-questions__head {
    margin-bottom: 0;
  }
}

.s-questions__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Restores the inset the section used to provide via its own padding
     (now removed so the marquee can span the full window width). */
  padding: 0 24px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .s-questions__head {
    /* PC text/CTA never needed the inset — they're centered, content-width
       blocks that naturally clear the edges — so no horizontal padding here. */
    padding: 0;
  }
}

/* SP order: title → eyebrow → lead / PC order: eyebrow → title → lead */
.s-questions__title {
  order: 1;
}

.s-questions__eyebrow {
  order: 2;
}

.s-questions__lead {
  order: 3;
}

@media (min-width: 768px) {
  .s-questions__eyebrow {
    order: 1;
  }

  .s-questions__title {
    order: 2;
  }

  .s-questions__lead {
    order: 3;
  }
}

/* Order: head → marquee → cta, at both breakpoints (per explicit request:
   the CTA sits 40px below the track, not above it). */
.s-questions__head {
  order: 1;
}

.s-questions__marquee {
  order: 2;
}

.s-questions__cta {
  order: 3;
  margin-top: 40px;
}

/* ---------- text ---------- */
.s-questions__eyebrow {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 2.16px;
  color: #2B2B2B;
  text-align: center;
}

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

.s-questions__title {
  margin: 0;
  font-family: 'Kumar One', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 2.8px;
  color: #E50012;
  text-align: center;
}

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

@media (min-width: 768px) {
  .s-questions__title {
    font-size: 120px;
    letter-spacing: 8.4px;
    margin-bottom: 19px;
  }
}

.s-questions__lead {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1.68px;
  color: #2B2B2B;
  text-align: center;
}

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

/* ---------- CTA button ---------- */
.s-questions__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 31px;
  background-color: #E50012;
  box-shadow: 4px 10px 10px 0px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 0.2s ease;
}

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

.s-questions__cta-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1.92px;
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  white-space: nowrap;
}

.s-questions__cta-text--pc {
  display: none;
}

@media (min-width: 768px) {
  .s-questions__cta {
    width: 259px;
    height: 62px;
    padding: 0;
    box-shadow: 4px 10px 16px 0px rgba(0, 0, 0, 0.1);
  }

  .s-questions__cta-text--sp {
    display: none;
  }

  .s-questions__cta-text--pc {
    display: inline;
  }
}

.s-questions__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  transform: rotate(90deg);
}

.s-questions__cta-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- staff marquee ---------- */
.s-questions__marquee {
  /* Full-bleed breakout: .s-questions__inner is centered with
     max-width:1440px, so past 1440px window width this element would
     otherwise stay capped at 1440px too, leaving empty margins on both
     sides. This "calc(50% - 50vw)" margin trick escapes that constraint
     (it's parent-width-agnostic, unlike a left:50%/-50vw offset, which
     misbehaves as a flex item) so the marquee always spans the true
     window width, however wide — the cards inside keep their own fixed
     px size either way, so widening the window just reveals more of
     them, it doesn't enlarge them. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  /* the card box-shadow (offset 4/10, blur 16) bleeds past the card's own
     box; without this breathing room the overflow:hidden clip (needed to
     hide the duplicated marquee track) cuts the shadow off flush at the
     top/bottom edge. Padding pushes the clip boundary out; the matching
     negative margin cancels it back out so surrounding spacing is unchanged. */
  padding: 30px 0;
  margin-top: -30px;
  margin-bottom: -30px;
}

.s-questions__track-wrap {
  display: flex;
  width: max-content;
  animation: s-questions-scroll 36s linear infinite;
}

.s-questions__track-wrap:hover {
  animation-play-state: paused;
}

.s-questions__track {
  display: flex;
  gap: 33px;
  padding: 0 16.5px;
}

@keyframes s-questions-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-questions__track-wrap {
    animation: none;
  }
}

@media (min-width: 768px) {
  .s-questions__track-wrap {
    animation-duration: 54s;
  }
}

/* ---------- staff card ---------- */
.s-questions__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  padding-top: 18px;
  border-radius: 8px;
  background-color: var(--card-bg, #A6B60F);
  box-shadow: 4px 10px 16px 0px rgba(0, 0, 0, 0.1);
}

/* Makes the whole card clickable (not just the photo/text), linking through
   to the interview page. Fills the card exactly and reproduces the same
   centered flex layout the card itself used to provide directly to its
   img/dl children. */
.s-questions__card-link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18px;
  text-decoration: none;
  color: inherit;
  border-radius: inherit;
}

@media (min-width: 768px) {
  .s-questions__card-link {
    padding-top: 27px;
  }
}

@media (min-width: 768px) {
  .s-questions__card {
    width: 300px;
    height: 300px;
    padding-top: 27px;
  }
}

.s-questions__photo {
  display: block;
  width: 106.667px;
  height: 106.667px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .s-questions__photo {
    width: 160px;
    height: 160px;
    margin-bottom: 15px;
  }
}

.s-questions__meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-questions__name {
  margin: 0 0 2px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2.16px;
  color: var(--card-color, #FFFFFF);
  text-align: center;
  white-space: nowrap;
}

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

.s-questions__quote {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 1.44px;
  color: var(--card-color, #FFFFFF);
  text-align: center;
}

@media (min-width: 768px) {
  .s-questions__quote {
    font-size: 14px;
    letter-spacing: 1.68px;
  }
}

/* ---------- present ---------- */
/* ==========================================================================
   Section - Present (プレゼント / GYMオリジナル Tシャツ&キーホルダー)
   Mobile-first: default rules match the SP (375px) design,
   overridden at (min-width: 768px) to match the PC (1440px) design.
   Figma: fileKey FlMdfhCyjJBL4RtfBY0EQX
     PC node 2002:5 "Section - Present"
     SP node 2054:6 "Section - Present SP"
   ========================================================================== */

.s-present {
  --present-red: #e50012;
  --present-yellow: #fbc400;
  --present-white: #ffffff;

  position: relative;
  overflow: hidden;
  background-color: var(--present-red);
  font-family: 'Noto Sans JP', sans-serif;
}

.s-present__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 55px 24px 40px;
}

/* --------------------------------------------------------------------------
   Title "PRESENT" — outlined display type.
   Figma font: Kumar One (script/display font, NOT Noto Sans JP).
   -------------------------------------------------------------------------- */
.s-present__title {
  margin: 0;
  width: 100%;
  font-family: 'Kumar One', 'Noto Sans JP', cursive, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 2.52px;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--present-yellow);
  text-stroke: 1.2px var(--present-yellow);
}

.s-present__heading {
  margin: 0;
  width: 100%;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  text-align: center;
  color: var(--present-yellow);
}

/* --------------------------------------------------------------------------
   Product visual: photo + scattered T-shirt / keychain collage
   -------------------------------------------------------------------------- */
.s-present__visual {
  position: relative;
  width: 100%;
  max-width: 336px;
  aspect-ratio: 336 / 338;
}

.s-present__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  background-color: #d9d9d9;
}

.s-present__photo img {
  position: absolute;
  /* Zoomed in and repositioned so the model's face sits centered left-right
     and the blank backdrop above the head is roughly half of the original
     crop's — top/left shift the crop window, width/height enlarge it. */
  top: -8.3%;
  left: -18%;
  width: 140.3%;
  height: 111.6%;
  max-width: none;
  object-fit: cover;
}

.s-present__collage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s-present__tshirt,
.s-present__keychain {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-present__tshirt img,
.s-present__keychain img {
  display: block;
  max-width: none;
  object-fit: cover;
}

/* T-shirt collage — positions/sizes as % of .s-present__visual (336x338 SP box),
   rotation + natural (unrotated) image size taken from Figma. */
.s-present__tshirt--1  { left: 46.45%; top: 80.63%; width: 23.86%; height: 22.24%; }
.s-present__tshirt--1  img { width: 64.153px; height: 54.999px; transform: rotate(-22.21deg); }
.s-present__tshirt--2  { left: 55.86%; top: 65.82%; width: 20.24%; height: 18.21%; }
.s-present__tshirt--2  img { width: 58.816px; height: 50.424px; transform: rotate(-12.01deg); }
.s-present__tshirt--3  { left: 62.85%; top: 63.56%; width: 18.02%; height: 15.52%; }
.s-present__tshirt--3  img { width: 58.816px; height: 50.424px; transform: rotate(-2.01deg); }
.s-present__tshirt--4  { left: 69.66%; top: 62.16%; width: 19.42%; height: 17.19%; }
.s-present__tshirt--4  img { width: 58.816px; height: 50.424px; transform: rotate(7.99deg); }
.s-present__tshirt--5  { left: 78.40%; top: 62.61%; width: 21.28%; height: 19.56%; }
.s-present__tshirt--5  img { width: 58.816px; height: 50.424px; transform: rotate(17.99deg); }
.s-present__tshirt--6  { left: 56.91%; top: 75.63%; width: 18.70%; height: 16.32%; }
.s-present__tshirt--6  img { width: 58.816px; height: 50.424px; transform: rotate(-4.79deg); }
.s-present__tshirt--7  { left: 64.98%; top: 74.35%; width: 18.22%; height: 15.75%; }
.s-present__tshirt--7  img { width: 58.816px; height: 50.424px; transform: rotate(2.8deg); }
.s-present__tshirt--8  { left: 73.62%; top: 73.49%; width: 20.96%; height: 19.13%; }
.s-present__tshirt--8  img { width: 58.816px; height: 50.424px; transform: rotate(15.99deg); }
.s-present__tshirt--9  { left: 80.92%; top: 74.70%; width: 21.97%; height: 20.52%; }
.s-present__tshirt--9  img { width: 58.816px; height: 50.424px; transform: rotate(22.92deg); }
.s-present__tshirt--10 { left: 47.00%; top: 69.66%; width: 22.07%; height: 20.67%; }
.s-present__tshirt--10 img { width: 58.816px; height: 50.424px; transform: rotate(-23.8deg); }

.s-present__keychain--1 { left: 8.06%; top: 67.79%; width: 23.70%; height: 26.42%; }
.s-present__keychain--1 img { width: 67.494px; height: 79.26px; transform: rotate(9.49deg); }
.s-present__keychain--2 { left: 20.35%; top: 72.46%; width: 25.57%; height: 27.91%; }
.s-present__keychain--2 img { width: 67.185px; height: 79.26px; transform: rotate(-15.48deg); }

/* --------------------------------------------------------------------------
   Copy blocks
   -------------------------------------------------------------------------- */
.s-present__variation {
  margin: 0;
  width: 100%;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1.68px;
  text-align: center;
  color: var(--present-white);
}

.s-present__lead {
  margin: 0;
  width: 100%;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1.68px;
  text-align: center;
  color: var(--present-white);
}

.s-present__lead-accent {
  font-size: 14px;
}

/* Matches the PC design's bordered pill treatment. font-size/letter-spacing
   here are just the starting point for main.js, which measures the real
   available width at any viewport size and shrinks them just enough to
   always keep this on one line (the text is long enough to wrap at some
   widths otherwise, e.g. narrow SP phones or mid-range PC widths). */
.s-present__deadline {
  display: inline-block;
  margin: 0;
  width: fit-content;
  max-width: 100%;
  padding: 14px 28px;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 1.68px;
  text-align: center;
  white-space: nowrap;
  color: var(--present-white);
  border: 2px solid var(--present-yellow);
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   CTA button (same size/typography at both breakpoints)
   -------------------------------------------------------------------------- */
.s-present__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 259px;
  max-width: 100%;
  height: 62px;
  border-radius: 31px;
  background-color: var(--present-white);
  box-shadow: 4px 10px 16px 0 rgba(0, 0, 0, 0.1);
  text-decoration: none;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 0.2s ease;
}

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

.s-present__cta-sub {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.44px;
  color: var(--present-red);
}

.s-present__cta-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1.92px;
  color: var(--present-red);
  text-decoration: underline;
  text-underline-position: from-font;
}

.s-present__cta-arrow {
  flex: none;
  transform: rotate(90deg);
  color: var(--present-red);
}

/* --------------------------------------------------------------------------
   Decorative left-edge colorway strip — PC only, hidden on mobile.
   -------------------------------------------------------------------------- */
.s-present__swatch-strip {
  display: none;
}

/* ==========================================================================
   Desktop / PC (>= 768px) — matches 1440px design (node 2002:5)
   ========================================================================== */
@media (min-width: 768px) {
  .s-present__inner {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(280px, 692px);
    grid-template-areas:
      "title    visual"
      "heading  visual"
      "lead     visual"
      "variation visual"
      "deadline visual"
      "cta      visual";
    align-items: center;
    justify-items: center;
    row-gap: 24px;
    column-gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 40px 60px 110px;
  }

  .s-present__title      { grid-area: title; }
  .s-present__heading    { grid-area: heading; }
  .s-present__visual     { grid-area: visual; }
  .s-present__variation  { grid-area: variation; }
  .s-present__lead       { grid-area: lead; }
  .s-present__deadline   { grid-area: deadline; }
  .s-present__cta        { grid-area: cta; }

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

  .s-present__title {
    font-size: clamp(44px, 6.2vw, 89px);
    white-space: nowrap;
    letter-spacing: 6.23px;
    -webkit-text-stroke: 2px var(--present-yellow);
    text-stroke: 2px var(--present-yellow);
  }

  .s-present__heading {
    font-size: 40px;
    max-width: 434px;
  }

  .s-present__visual {
    max-width: 692px;
    aspect-ratio: 692 / 703.4;
    justify-self: end;
  }

  .s-present__photo {
    height: 99.23%;
  }

  .s-present__lead {
    max-width: 434px;
    font-size: 16px;
    letter-spacing: 1.92px;
  }

  .s-present__lead-accent {
    font-size: 20px;
  }

  .s-present__variation {
    max-width: 434px;
  }

  /* Left-edge decorative T-shirt colorway strip */
  .s-present__swatch-strip {
    display: block;
    position: absolute;
    left: -72px;
    top: -9px; /* moved down 10px from -19px, height unchanged so it's a pure shift */
    width: 190px;
    height: calc(100% + 19px);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .s-present__swatch {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .s-present__swatch img {
    display: block;
    max-width: none;
    width: 152.562px;
    height: 130.794px;
    object-fit: cover;
  }

  /* top/height are % of the strip's own (real, responsive) height instead
     of the original fixed px — the swatch column previously assumed an
     ~800px-tall area, but the strip's actual rendered height (based on
     .s-present__inner's real content height) runs a bit taller, leaving an
     unfilled gap below the last swatch. Percentages (referenced against
     that same ~800px design span) make the whole column stretch to match
     the real area's height exactly, at any viewport width. left/width stay
     in px — only the vertical fit was off. */
  .s-present__swatch--1  { left: 16.45px; top: 0%;       width: 161.694px; height: 17.7011%; }
  .s-present__swatch--1  img { transform: rotate(4.18deg); }
  .s-present__swatch--2  { left: 0px;     top: 5.5015%;  width: 191.761px; height: 22.3716%; }
  .s-present__swatch--2  img { transform: rotate(20.73deg); }
  .s-present__swatch--3  { left: 5.5px;   top: 15.8756%; width: 182.327px; height: 20.9159%; }
  .s-present__swatch--3  img { transform: rotate(15.74deg); }
  .s-present__swatch--4  { left: 2.07px;  top: 24.2067%; width: 189.87px;  height: 22.2046%; }
  .s-present__swatch--4  img { transform: rotate(21.49deg); }
  .s-present__swatch--5  { left: 17.98px; top: 37.8805%; width: 157.755px; height: 17.1160%; }
  .s-present__swatch--5  img { transform: rotate(-2.33deg); }
  .s-present__swatch--6  { left: 8.61px;  top: 44.4410%; width: 176.558px; height: 19.9839%; }
  .s-present__swatch--6  img { transform: rotate(12.08deg); }
  .s-present__swatch--7  { left: 13.98px; top: 54.3863%; width: 167.437px; height: 18.5675%; }
  .s-present__swatch--7  img { transform: rotate(-7.04deg); }
  .s-present__swatch--8  { left: 8.17px;  top: 62.8936%; width: 178.359px; height: 20.2712%; }
  .s-present__swatch--8  img { transform: rotate(13.18deg); }
  .s-present__swatch--9  { left: 20.89px; top: 74.0167%; width: 152.562px; height: 16.3536%; }
  .s-present__swatch--9  img { transform: rotate(0deg); }
  .s-present__swatch--10 { left: 10.76px; top: 80.6435%; width: 172.564px; height: 19.3565%; }
  .s-present__swatch--10 img { transform: rotate(9.78deg); }

  /* T-shirt / keychain collage — repositioned for the 692x703.4 PC visual box */
  .s-present__tshirt--1  { left: 54.99%; top: 80.94%; width: 19.75%; height: 18.21%; }
  .s-present__tshirt--1  img { width: 109.31px; height: 93.713px; transform: rotate(-22.21deg); }
  .s-present__tshirt--2  { left: 62.78%; top: 71.72%; width: 16.75%; height: 14.91%; }
  .s-present__tshirt--2  img { width: 100.217px; height: 85.917px; transform: rotate(-12.01deg); }
  .s-present__tshirt--3  { left: 68.56%; top: 72.34%; width: 14.91%; height: 12.71%; }
  .s-present__tshirt--3  img { width: 100.217px; height: 85.917px; transform: rotate(-2.01deg); }
  .s-present__tshirt--4  { left: 72.47%; top: 71.69%; width: 16.07%; height: 14.08%; }
  .s-present__tshirt--4  img { width: 100.217px; height: 85.917px; transform: rotate(7.99deg); }
  .s-present__tshirt--5  { left: 77.58%; top: 72.06%; width: 17.61%; height: 16.02%; }
  .s-present__tshirt--5  img { width: 100.217px; height: 85.917px; transform: rotate(17.99deg); }
  .s-present__tshirt--6  { left: 63.65%; top: 81.53%; width: 15.47%; height: 13.36%; }
  .s-present__tshirt--6  img { width: 100.217px; height: 85.917px; transform: rotate(-4.79deg); }
  .s-present__tshirt--7  { left: 69.72%; top: 81.68%; width: 15.07%; height: 12.90%; }
  .s-present__tshirt--7  img { width: 100.217px; height: 85.917px; transform: rotate(2.8deg); }
  .s-present__tshirt--8  { left: 74.05%; top: 80.97%; width: 17.34%; height: 15.67%; }
  .s-present__tshirt--8  img { width: 100.217px; height: 85.917px; transform: rotate(15.99deg); }
  .s-present__tshirt--9  { left: 78.67%; top: 81.96%; width: 18.17%; height: 16.80%; }
  .s-present__tshirt--9  img { width: 100.217px; height: 85.917px; transform: rotate(22.92deg); }
  .s-present__tshirt--10 { left: 55.45%; top: 72.09%; width: 18.26%; height: 16.93%; }
  .s-present__tshirt--10 img { width: 100.217px; height: 85.917px; transform: rotate(-23.8deg); }

  .s-present__keychain--1 { left: 4.48%;  top: 75.58%; width: 19.68%; height: 21.72%; }
  .s-present__keychain--1 img { width: 115.441px; height: 135.563px; transform: rotate(9.49deg); }
  .s-present__keychain--2 { left: 17.92%; top: 75.06%; width: 21.23%; height: 22.94%; }
  .s-present__keychain--2 img { width: 114.911px; height: 135.563px; transform: rotate(-15.48deg); }
}

/* ---------- history ---------- */
/* ==========================================================================
   Section - History (45年を振り返る / company history timeline)
   Mobile-first: base rules = SP (375px design), overridden at 768px+ for PC (1440px design)
   Source: Figma fileKey FlMdfhCyjJBL4RtfBY0EQX
     - PC node 2002:6 "Section - History"
     - SP node 2054:7 "Section - History SP"
   Fonts:
     - 'Kumar One' (cursive) — used ONLY for the year numbers and the "HISTORY" watermark
     - 'Noto Sans JP' (Medium/500) — used for all other copy
   ========================================================================== */

.s-history {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #eae4e4;
  word-break: break-word;
}

/* ---------- Decorative background accent lines (PC only, red 1px rules
   sitting in the section margins outside the timeline grid) ---------- */
.s-history__accent-line {
  display: none;
}

/* ---------- Heading: "HISTORY" watermark + "45年を振り返る" ---------- */
.s-history__heading {
  position: relative;
  padding-top: 55px;
  text-align: center;
}

.s-history__watermark {
  margin: 0;
  font-family: 'Kumar One', cursive;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.23;
  letter-spacing: 2.52px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.s-history__subtitle {
  position: relative;
  margin: 0;
  margin-top: -18px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 2.64px;
  color: #e50012;
}

/* ---------- Timeline list ---------- */
.s-history__timeline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 46px 24px 56px;
  /* Capped at the 375px SP reference width and centered: without this, at
     any SP viewport wider than ~375px (e.g. a tablet in portrait, or a
     resized browser window) each item's photo/text stayed flush against
     the left edge with a large empty gap on the right, instead of the
     whole column staying centered in the window. */
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
}

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

/* Year + red underline decoration.
   The line always starts at a fixed 157px offset and spans 160px, whatever
   the digit count — reproduces the exact Figma vector position/size. */
.s-history__year-row {
  position: relative;
  height: 59px;
}

.s-history__year {
  display: block;
  font-family: 'Kumar One', cursive;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.23;
  letter-spacing: 3.36px;
  color: #e94d45;
}

.s-history__year-underline {
  position: absolute;
  left: 157px;
  top: 24px;
  width: 140px;
  height: 1px;
  background-color: #e50012;
}

/* Photo / logo media slot */
.s-history__photo,
.s-history__logo {
  margin-top: 8px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 222px;
}

.s-history__photo {
  aspect-ratio: 222 / 149;
  overflow: hidden;
  border-radius: 10px;
}

.s-history__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Visually enlarges the 1995 photo by 30% (zoomed in, cropped by the
   photo frame's overflow:hidden) without touching its width/height
   attributes — those still describe the frame's own 222x149 box. */
.s-history__photo-img--zoom-130 {
  transform: scale(1.69); /* 1.3 x 1.3 = another 30% on top of the first enlargement */
}

.s-history__logo {
  aspect-ratio: 222 / 149;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.s-history__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* The メガネのひと source artwork is a two-row lockup (illustrated row above
   a plain wordmark row). Its own box is much wider/shorter (189:68) than the
   generic 222:149 photo slot — that distinct aspect is what makes native
   `cover` crop the correct (vertical) axis and keep just the top row. */
.s-history__logo--crop-top {
  aspect-ratio: 189 / 68;
  align-items: flex-start;
}

.s-history__logo--crop-top img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: top;
}

.s-history__title {
  margin: 0;
  margin-top: 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: 2.4px;
  color: #2b2b2b;
}

.s-history__desc {
  margin: 0;
  margin-top: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1.68px;
  color: #2b2b2b;
}

/* ==========================================================================
   PC (min-width: 768px) — reproduces the 1440px desktop design.
   Layout: a 3-column grid (rows of 3, last row has 2 items and simply
   leaves the 3rd cell empty — exactly how the Figma rows are composed:
   "History Row 1/2" have 3 entries, "History Row 3" has 2).
   ========================================================================== */
@media (min-width: 768px) {
  .s-history__accent-line {
    display: block;
    position: absolute;
    height: 1px;
    background-color: #e50012;
    z-index: 0;
  }

  /* Per Figma (Vector 1-5 inside History Row 1/2/3), 5 of the 8 items keep
     their own red underline at PC too — 1981, 1995, 2000, 2011, 2018. Only
     the 3 items that instead get a different treatment (1996/2012 bleed into
     accent-line--top-right/bottom-right; 2025 is the timeline's last item
     and gets no line at all) hide this modifier-marked underline. */
  .s-history__year-underline--hide-pc {
    display: none;
  }

  /* left is fixed px so the start point never drifts as the window widens.
     width is clamped so the line never reaches the timeline grid's content:
     max(24px, (100% - 943px)/2 + 24px) tracks exactly where that grid
     content starts (edge-to-edge with 24px padding below 943px width, then
     centered with a growing margin past that); subtracting an 8px gap and
     this line's own 6.048px left leaves the width that reaches right up to
     (but never past) that gap. min(207.936px, ...) keeps it from exceeding
     its original design length once there's more than enough margin. */
  .s-history__accent-line--top-left {
    left: 6.048px;
    top: 45.6%;
    width: min(207.936px, calc(max(24px, (100% - 943px) / 2 + 24px) - 14.048px));
  }

  .s-history__accent-line--bottom-left {
    left: 6.048px;
    top: 72.3%;
    width: min(207.936px, calc(max(24px, (100% - 943px) / 2 + 24px) - 14.048px));
  }

  /* Nested inside the 1996 item's .s-history__year-row (in history.html)
     instead of being positioned against the whole section — a percentage
     `left` drifted out of sync with the year-row's real edge whenever the
     window was wider/narrower than the 1440px reference. left:100%+20px is
     relative to the year-row's own box, so it tracks the row's actual right
     edge exactly at any width. top/width stay fixed px, matched to the
     original position/length at the 1440px reference (top was 17.1% of the
     section height, width was 21.8% of the section width). */
  .s-history__accent-line--top-right {
    left: calc(100% + 20px); /* 20px right of the row's own edge */
    top: 11.742px;
    width: 313.92px;
  }

  /* Same fix, nested inside the 2012 item's .s-history__year-row. top was
     originally 45.6% of the section height at the 1440px reference. */
  .s-history__accent-line--bottom-right {
    left: calc(100% + 20px); /* 20px right of the row's own edge */
    top: 27.336px;
    width: 313.92px;
  }

  .s-history__heading {
    padding-top: 105px;
  }

  .s-history__watermark {
    font-size: 96px;
    letter-spacing: 6.72px;
  }

  .s-history__subtitle {
    margin-top: -60px;
    font-size: 40px;
    letter-spacing: 4.8px;
  }

  .s-history__timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 42px;
    row-gap: 55px;
    max-width: 943px;
    margin: 0 auto;
    padding: 60px 24px 120px;
  }

  .s-history__photo,
  .s-history__logo {
    max-width: 222px;
  }

  .s-history__logo {
    justify-content: center;
  }
}

/* ---------- contact ---------- */
/* ==========================================================================
   Section - Contact (コーポレートサイト誘導 CTA)
   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);
  }
}

/* ---------- sticky-cta ---------- */
/* ==========================================================================
   追尾CTA(スクロール固定) — SP-only sticky bottom CTA bar
   Source: Figma fileKey FlMdfhCyjJBL4RtfBY0EQX, node 2060:3
   SP-only element: appears exactly once in the Figma file, inline in the SP
   page flow (used as a viewport-fixed bar on mobile). No PC equivalent
   exists anywhere in the file — confirmed via file-wide metadata search for
   "追尾"/"CTA", so it is hidden completely from 768px up.
   Font: 'Noto Sans JP' Bold — the only font used here.

   Layout: the t-shirt (bleeding off the pill's left edge), the text and
   the "end" group (keychain pair + arrow) sit in one flex row. The text
   takes whatever width is left between the t-shirt and the end group, so
   it never overlaps either one. main.js measures that width and picks the
   largest font-size that fits — two lines while that stays 13px or more,
   otherwise three lines ("Tシャツ&キーホルダー" / "プレゼント" split onto
   their own rows), never below 12px so it stays readable on 320px phones.
   ========================================================================== */

.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: 'Noto Sans JP', sans-serif;
}

.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; main.js shrinks the
                           font-size or stacks the chunks instead */
}

/* Three-line fallback for narrow phones (main.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;
  }
}