@layer components {
  .feature {
    background-color: var(--color-accent-light);
    padding-block: 14cqi;
  }

  /* Title */
  .feature__title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    margin-block-end: 8cqi;
  }

  .feature__title-char-l,
  .feature__title-char-r {
    position: absolute;
    inset-block-end: 8cqi;
    inline-size: 30cqi;
    block-size: auto;
    z-index: 0;
  }

  .feature__title-char-l {
    inset-inline-start: 0cqi;
  }

  .feature__title-char-r {
    inset-inline-end: 0cqi;
    scale: -1 1;
  }

  .feature__title-sub,
  .feature__title-main {
    position: relative;
    z-index: 1;
  }

  .feature__title-sub {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
    padding-block: 1.25cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(1 0 0);
  }

  .feature__title-main {
    font-family: var(--font-hero);
    font-size: 8cqi;
    font-weight: 800;
    line-height: 1.45;
    color: var(--color-accent);
    text-align: center;
  }

  .feature__title-strong {
    position: relative;
    display: inline;
    color: var(--color-accent-light);
    padding-inline: 1cqi;
    isolation: isolate;

    &::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-start: 1cqi;
      inset-block-end: 0cqi;
      background-color: var(--color-accent);
      z-index: -1;
    }
  }

  /* Cards */
  .feature__cards {
    display: flex;
    flex-direction: column;
    gap: 6cqi;
    padding-inline: 6cqi;
  }

  .feature__card {
    position: relative;
    background-color: oklch(1 0 0);
    border-radius: 2.5cqi;
    border: 3px solid var(--color-accent);
    padding: 8cqi 6cqi;
  }

  .feature__card-title {
    font-family: var(--font-hero);
    font-size: 6.5cqi;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-accent);
    text-align: center;
    margin-block-end: 4cqi;
    padding-block-end: 4cqi;
    border-block-end: 2px dashed oklch(0.5 0.2 265);
  }

  /* Slider (Feature 2) */
  .feature__slider-track {
    display: flex;
    gap: 3cqi;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -6cqi;
    padding-inline: 6cqi;
    margin-block-end: 6cqi;
    -webkit-overflow-scrolling: touch;
  }

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

  .feature__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);
  }

  .feature__mockup--pc {
    inline-size: 76cqi;
    block-size: 46cqi;
  }

  .feature__mockup--sp {
    inline-size: 23cqi;
    block-size: 46cqi;
  }

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

  .feature__card-img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border: 1px solid oklch(0.45 0.02 260);
    border-radius: 1.5cqi;
    margin-block-end: 1cqi;
  }

  .feature__card-img-caption {
    font-family: var(--font-hero);
    font-size: 3cqi;
    font-weight: 700;
    line-height: 1.25;
    color: oklch(0.47 0.02 260);
    margin-block-end: 6cqi;
  }

  .feature__card-texts {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
  }

  .feature__card-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.6;
    color: oklch(0.13 0 0);
    max-inline-size: none;
    text-wrap: wrap;
  }

  .feature__card-text .feature__em {
    font-weight: 800;
    color: oklch(0.45 0.22 265);
  }

  /* Point box (Feature 1) */
  .feature__point {
    position: relative;
    margin-block-start: 6cqi;
    padding: 4cqi 8cqi;
    text-align: center;
  }

  .feature__point-brackets {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;
  }

  .feature__point-bracket {
    inline-size: 3.25cqi;
    block-size: 43.5cqi;
  }

  .feature__point-bracket--r {
    scale: -1 1;
  }

  .feature__point-title {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    border-radius: 1cqi;
    padding-block: 1cqi;
    padding-inline: 2cqi;
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-accent-light);
    margin-block-end: 3cqi;
  }

  .feature__point-content {
    display: flex;
    align-items: flex-start;
    gap: 3cqi;
  }

  .feature__point-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-accent);
    inline-size: 32cqi;
    flex-shrink: 0;
    max-inline-size: none;
    text-wrap: wrap;
  }

  .feature__point-designer-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .feature__point-designer {
    inline-size: 24cqi;
    block-size: 25.5cqi;
    margin-block-start: 3.5cqi;
  }

  .feature__point-fukidashi {
    position: absolute;
    inset-block-start: -2cqi;
    inset-inline-end: -17cqi;
    background: url("../../assets/images/feature1-designer-fukidashi.svg") center / 100% 100% no-repeat;
    padding: 2cqi;
    font-family: var(--font-hero);
    font-size: 3cqi;
    font-weight: 800;
    line-height: 1.2;
    color: oklch(0.15 0 0);
    text-align: center;
    inline-size: 20cqi;
    block-size: 14cqi;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block-end: 3.5cqi;
    white-space: nowrap;
  }

  /* Creatives subsection (Feature 2) */
  .feature__creatives {
    margin-block-start: 12cqi;
    background-color: oklch(0.45 0.22 265);
    border-radius: 0 0 1.75cqi 1.75cqi;
    padding: 0 4cqi 4cqi;
    margin-inline: -6cqi;
    margin-block-end: -8cqi;
  }

  .feature__creatives-title {
    display: inline-flex;
    min-inline-size: max-content;
    background-color: oklch(0.45 0.22 265);
    border-radius: var(--radius-full);
    padding-block: 2.5cqi;
    padding-inline: 6cqi;
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent-light);
    text-align: center;
    margin-block-start: -6cqi;
    margin-block-end: 2cqi;
  }

  .feature__creatives-title-wrap {
    text-align: center;
  }

  .feature__creatives-img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: 1.5cqi;
    margin-block-end: 4cqi;
  }

  .feature__creatives-texts {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
  }

  .feature__creatives-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-accent-light);
    max-inline-size: none;
    text-wrap: wrap;
  }

  /* Infographic (Feature 3) */
  .feature__infographic {
    position: relative;
    margin-block-start: 6cqi;
    inline-size: 72cqi;
    block-size: 45cqi;
  }

  /* Left gray bar */
  .feature__infographic-bar-left {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 33cqi;
    block-size: 45cqi;
    background-color: oklch(0.6 0.03 260);
    border-radius: 2.5cqi 2.5cqi 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1cqi;
    color: oklch(1 0 0);
    text-align: center;
  }

  /* Right blue bar */
  .feature__infographic-bar-right {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: 33cqi;
    block-size: 31cqi;
    background-color: oklch(0.45 0.22 265);
    border-radius: 2.5cqi 2.5cqi 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1cqi;
    color: var(--color-accent-light);
    text-align: center;
  }

  /* Diagonal connector between bars */
  .feature__infographic-diagonal {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 33cqi;
    inline-size: 6cqi;
    block-size: 45cqi;
  }

  /* Ellipse on top of right bar area */
  .feature__infographic-ellipse {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 39.25cqi;
    inline-size: 32.5cqi;
    block-size: 12.5cqi;
  }

  /* "管理費分の差額を生む!" label */
  .feature__infographic-diff {
    position: absolute;
    inset-block-start: 2cqi;
    inset-inline-start: 39.25cqi;
    inline-size: 32.5cqi;
    font-family: var(--font-hero);
    font-size: 3.25cqi;
    font-weight: 800;
    line-height: 1.3;
    color: oklch(0.45 0.22 265);
    text-align: center;
  }

  .feature__infographic-label {
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 800;
    line-height: 1.35;
  }

  .feature__infographic-price {
    font-family: var(--font-hero);
    font-size: 5.5cqi;
    font-weight: 800;
    line-height: 1;
  }

  .feature__infographic-unit {
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1;
  }

  /* Footnote */
  .feature__footnote {
    margin-block-start: 4cqi;
    font-family: var(--font-hero);
    font-size: 2.75cqi;
    font-weight: 400;
    line-height: 1.35;
    color: oklch(0.13 0 0);
    max-inline-size: none;
    text-wrap: wrap;
  }

  .feature__footnote ul {
    list-style: disc;
    padding-inline-start: 4cqi;
  }

  .feature__footnote li {
    max-inline-size: none;
    text-wrap: wrap;
    overflow-wrap: break-word;
  }

  .feature__footnote p {
    max-inline-size: none;
    text-wrap: wrap;
  }
}