@layer components {
  /* ========================
     Hero Section
     ======================== */
  .hero {
    position: relative;
    overflow: hidden;
    background: url("../../assets/images/kv-bg.png") top center / 100% auto no-repeat;
  }

  /* ========================
     Hero Content
     ======================== */
  .hero__content {
    position: relative;
    z-index: 1;
    padding-block-start: 12cqi;
    padding-inline: 4cqi;
  }

  /* ========================
     Title area — the key italic/tilt transform
     ======================== */
  .hero__title {
    position: relative;
    z-index: 2;
  }

  /* Shared tilt transform for all title text elements */
  .hero__title-tilt {
    transform: rotate(-7deg) skewX(-7deg);
  }

  .hero__title-tilt--strong {
    transform: rotate(-8deg) skewX(-8deg);
  }

  /* "Webサイト制作・運用の負担" pill — PNG background + HTML text */
  .hero__subtitle-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: url("../../assets/images/kv-subtitle-bg.png") center / 100% 100% no-repeat;
    padding-block: 1.5cqi 2cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 6cqi;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-accent);
  }

  /* Small character illustration (top-left, above subtitle) */
  .hero__small-char {
    position: absolute;
    inset-block-start: -8cqi;
    inset-inline-start: 0;
    inline-size: 16cqi;
    block-size: auto;
    z-index: 3;
    rotate: 2deg;
  }

  /* Main copy: "30分で" line */
  .hero__main-copy {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin-block-start: 0.5cqi;
  }

  .hero__number-wrap {
    position: relative;
    display: inline-block;
  }

  .hero__deco-clock {
    position: absolute;
    inset-block-start: 15%;
    inset-inline-start: 42%;
    inline-size: 12cqi;
    block-size: auto;
    z-index: 1;
    rotate: 6deg;
  }

  .hero__number {
    font-family: var(--font-hero);
    font-size: 33cqi;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--color-accent-light);
  }

  .hero__unit {
    font-family: var(--font-hero);
    font-size: 20cqi;
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-accent-light);
  }

  .hero__particle {
    font-family: var(--font-hero);
    font-size: 16cqi;
    font-weight: 800;
    line-height: 1.15;
    color: oklch(1 0 0);
  }

  /* "無料相談" badge — background image + HTML text */
  .hero__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: url("../../assets/images/badge-muryo-bg.png") center / 100% 100% no-repeat;
    padding-block: 1.5cqi 2.5cqi;
    padding-inline: 7cqi;
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.2em;
    color: var(--color-accent);
  }

  /* "整理しませんか" line */
  .hero__main-copy-line2 {
    display: flex;
    align-items: baseline;
  }

  .hero__seiri {
    font-family: var(--font-hero);
    font-size: 14cqi;
    font-weight: 800;
    line-height: 1.15;
    color: oklch(1 0 0);
  }

  .hero__shimasenka {
    font-family: var(--font-hero);
    font-size: 12cqi;
    font-weight: 800;
    line-height: 1.15;
    color: oklch(1 0 0);
  }

  /* Yellow tag pills */
  .hero__tags {
    display: flex;
    flex-direction: column;
    gap: 1.5cqi;
    margin-block-start: 3cqi;
  }

  .hero__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent-light);
    border-radius: var(--radius-full);
    padding-block: 0.5cqi;
    padding-inline: 3.5cqi 4cqi;
    font-family: var(--font-hero);
    font-size: 6cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent);
    align-self: flex-start;
  }

  /* ========================
     Character & Speech Bubble
     ======================== */
  .hero__character-area {
    position: relative;
    min-block-size: 65cqi;
    margin-block-start: -15cqi;
  }

  .hero__character {
    display: block;
    position: absolute;
    inset-inline-end: -3cqi;
    inset-block-start: 0;
    inline-size: 55cqi;
    block-size: auto;
  }

  .hero__speech-bubble {
    position: absolute;
    inset-block-start: 32cqi;
    inset-inline-start: 0;
    inline-size: 38cqi;
    background-color: oklch(1 0 0);
    border: 2px solid oklch(0.3 0 0);
    border-radius: var(--radius-m);
    padding: 3cqi 4cqi;
    rotate: -9deg;
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    color: oklch(0.2 0 0);

    &::after {
      content: "";
      position: absolute;
      inset-block-end: -2cqi;
      inset-inline-end: 4cqi;
      inline-size: 0;
      block-size: 0;
      border-inline-start: 1.5cqi solid transparent;
      border-inline-end: 1.5cqi solid transparent;
      border-block-start: 2cqi solid oklch(1 0 0);
    }
  }

  .hero__speech-bubble-highlight {
    color: oklch(0.55 0.22 25);
  }

  .hero__speech-bubble-blue {
    color: oklch(0.5 0.2 265);
  }

  .hero__lightbulb {
    position: absolute;
    inset-block-start: -5cqi;
    inset-inline-end: -2cqi;
    inline-size: 5cqi;
    block-size: auto;
  }

  /* ========================
     Slider
     ======================== */
  .hero__slider {
    position: relative;
    z-index: 1;
    padding-block-start: 4cqi;
    padding-block-end: 6cqi;
    background-color: oklch(0.93 0.015 240);
  }

  .hero__slider-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2cqi;
    font-family: var(--font-hero);
    font-size: 4.5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(0.45 0.2 265);
    text-align: center;
    margin-block-end: 2cqi;
  }

  .hero__slider-line {
    inline-size: 2.5cqi;
    block-size: 5cqi;
    flex-shrink: 0;
  }

  .hero__slider-track {
    display: flex;
    gap: 3cqi;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: 2cqi;
    -webkit-overflow-scrolling: touch;
  }

  .hero__slider-track::-webkit-scrollbar {
    display: none;
  }

  .hero__mockup {
    flex-shrink: 0;
    border-radius: 3.75cqi;
    overflow: hidden;
    background-color: oklch(0.1 0 0);
    scroll-snap-align: start;
    border: 2px solid oklch(0.1 0 0);
  }

  .hero__mockup--pc {
    inline-size: 95cqi;
    block-size: 57.5cqi;
  }

  .hero__mockup--sp {
    inline-size: 29cqi;
    block-size: 57.5cqi;
  }

  .hero__mockup-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 3cqi;
  }
}