@layer utility {
  /* =====================
    u-line-text > {inline-element}
  ===================== */
  .u-line-text {
    -webkit-box-decoration-break: clone;
    background: #004c98;
    border-radius: 16px;
    box-decoration-break: clone;
    color: white;
    font-size: 32px;
    font-weight: 700;
    line-height: 3.6;
    padding: 22px 32px;
    @media (width <= 768px) {
      border-radius: calc((100 / 390) * 8 * 1vw);
      font-size: calc((100 / 390) * 20 * 1vw);
      padding: 3vw 2.1vw;
      line-height: 3.8;
    }
  }

  /* =====================
    u-list
  ===================== */
  :where(.u-list) {
    display: block grid;
    gap: 110px;
    position: relative;
    z-index: 2;
    @media (width <= 768px) {
      max-inline-size: calc(100vw - calc((100 / 390) * 15 * 1vw));
      margin-inline: auto;
      gap: 20.4vw;
    }

    /* ==== li ==== */
    & :where(li) {
      position: relative;
      display: block flex;
      padding-inline: 80px 0;
      @media (width <= 768px) {
        padding-inline: 0;
        display: block flow;
      }
    }

    /* ==== p ==== */
    & :where(p) {
      inset-inline-end: 0;
      align-self: flex-start;
      z-index: 2;
      text-align: left;
      position: absolute;
      font-size: 24px;
      padding-block: 59px 62px;
      padding-inline: 36px 60px;
      font-weight: 400;
      border: 4px solid var(--light-gray, #bbb);
      background: rgba(255, 255, 255, 0.9);
      translate: 0 33px;
      line-height: 1.8;
      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 296 * 1vw);
        translate: 1vw 0;
        position: relative;
        margin-inline: auto;
        padding-block: 5.2vw 5.1vw;
        margin-block-start: -12.4vw;
        padding-inline: 3.2vw;
        border: calc((100 / 390) * 4 * 1vw) solid var(--light-gray, #bbb);
        font-size: calc((100 / 390) * 20 * 1vw);
      }
    }

    @media (width > 768px) {
      /* odd */
      & :where(li:nth-child(odd)) {
        padding-inline: 0 80px;
        flex-direction: row-reverse;
        .label {
          inset-inline-start: unset;
          inset-inline-end: -60px;
        }

        & :where(p) {
          inset-inline-end: unset;
          inset-inline-start: 0;
        }
      }

      /* even */
      & :where(li:nth-child(even)) {
        & :where(p) {
          padding-inline: 36px 87px;
        }
      }
    }

    /* reverse */
    &[data-direction='reverse'] {
      @media (width > 768px) {
        & :where(li:nth-child(odd)) {
          padding-inline: 80px 0;
          flex-direction: row;
          .label {
            inset-inline-start: -60px;
            inset-inline-end: 0;
          }

          & :where(p) {
            inset-inline-end: 0;
            inset-inline-start: unset;
            padding-inline: 35px 122px;
          }
        }
      }
      @media (width > 768px) {
        & :where(li:nth-child(even)) {
          & :where(p) {
            padding-inline: 36px 87px;
          }
        }
      }
    }

    /* img */
    :where(.img) {
      position: relative;
    }
    :where(.label) {
      position: absolute;
      z-index: 2;
      inset-inline-start: -60px;
      inset-block-start: -59px;
      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 80 * 1vw);
        block-size: calc((100 / 390) * 80 * 1vw);
        inset-inline-start: 2vw;
        inset-block-start: -7.7vw;
      }
    }
    :where(.picture) {
      box-shadow: 32px 32px 0 0 rgba(213, 234, 255, 0.5);
      border-radius: 24px;
      @media (width <= 768px) {
        box-shadow: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 16 * 1vw) 0 0 rgba(213, 234, 255, 0.5);
        border-radius: calc((100 / 390) * 12 * 1vw);
        max-inline-size: calc((100 / 390) * 340 * 1vw);
      }
    }

    /* ==== sub-picture ==== */
    :where(.sub-picture) {
      position: absolute;
      inset-inline-start: 51px;
      z-index: 2;
      inset-block-start: 296px;
      @media (width <= 768px) {
        position: relative;
        margin-block-start: calc((100 / 390) * 41 * 1vw);
        inline-size: calc((100 / 390) * 177.6 * 1vw);
        block-size: calc((100 / 390) * 201.932 * 1vw);
        inset-block-start: unset;
        inset-block-end: unset;
        inset-inline-start: unset;
        inset-inline-end: unset;
      }
    }
  }

  /* =====================
    u-bg
  ===================== */
  .u-bg {
    background-repeat: repeat;
    background-size: 24px 24px;
    background-position: center;
    background-image: url('../img/_common/bg1.png');
    background-color: lightgray;
    @media (width <= 768px) {
      background-size: calc((100 / 390) * 48 / 2 * 1vw) calc((100 / 390) * 48 / 2 * 1vw);
      background-image: url('../img/_common/bg01_sp.png');
    }
  }

  /* =====================
    u-head
  ===================== */
  :where(.u-head) {
    display: block grid;
    gap: 40px;
    @media (width <= 768px) {
      gap: calc((100 / 390) * 33 * 1vw);
    }

    & p {
      display: block flex;
      align-items: center;
      font-size: 40px;
      font-weight: 900;
      justify-content: center;
      color: var(--color-text-primary);
      margin-block: calc((1em - 1lh) / 2);
      @media (width <= 768px) {
        position: relative;
        display: block flow;
        font-size: calc((100 / 390) * 28 * 1vw);
        line-height: 1.6 !important;
      }

      & strong {
        font-size: 48px;
        @media (width <= 768px) {
          font-size: calc((100 / 390) * 40 * 1vw);
        }
      }

      &::before,
      &::after {
        content: '';
        display: block flow;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/_common/line.svg');
        inline-size: 147px;
        block-size: 53px;
        margin-inline: 9px;
      }
      @media (width <= 768px) {
        &::before,
        &::after {
          position: absolute;
          inset-block-start: 50%;
          translate: 0 -50%;
          margin-inline: 0;
          inline-size: calc((100 / 390) * 73.345 * 1vw);
          block-size: calc((100 / 390) * 26.291 * 1vw);
        }
        &::before {
          inset-inline-start: 2.1vw;
        }
        &::after {
          inset-inline-end: 2.1vw;
        }
      }
    }

    &[data-id='trash'] p {
      @media (width <= 768px) {
        line-height: 1.2 !important;
      }
    }
    &[data-id='context'] p {
      @media (width <= 768px) {
        line-height: 1.2 !important;
      }
    }
    &[data-id='awards'] p {
      @media (width <= 768px) {
        line-height: 1.2 !important;
      }
    }
    &[data-id='closing'] p {
      @media (width <= 768px) {
        line-height: 1.5 !important;
      }
    }

    &::after {
      content: '';
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/heart.webp');
      inline-size: 80px;
      block-size: 68px;
      margin-inline: auto;
    }
    @media (width <= 768px) {
      &::after {
        inline-size: calc((100 / 390) * 80 * 1vw);
        block-size: calc((100 / 390) * 68 * 1vw);
      }
    }
  }

  /* =====================
    text
  ===================== */
  :is([data-color='primary']) {
    color: var(--primary);
  }

  /* =====================
    u-separator
  ===================== */
  :where(.u-separator) {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    display: block flow;
    margin-inline: auto;
    inset-inline: 0;
    inset-block-start: 0px;
    inline-size: 100%;
    block-size: 120px;
    @media (width > 1441px) {
      block-size: 160px;
    }
    @media (width > 1900px) {
      block-size: calc((100 / 1440) * 160 * 1vw);
    }
    @media (width <= 768px) {
      block-size: calc((100 / 390) * 32.7 * 1vw);
      background-size: cover;
    }

    &[data-color='blue'] {
      background-image: url('../img/_common/separator-blue.svg');
    }
    &[data-color='yellow'] {
      background-image: url('../img/_common/separator-yellow.svg');
    }
    &[data-type='u'] {
      inset-block-start: -120px;
      @media (width > 1441px) {
        inset-block-start: -140px;
      }
      @media (width <= 768px) {
        inset-block-start: -8.3vw;
      }
    }
    &[data-type='n'] {
      rotate: 0 0 1 180deg;
      @media (width > 1441px) {
        inset-block-start: -17px;
      }
      @media (width > 1900px) {
        inset-block-start: -1.5vw;
      }
      @media (width <= 768px) {
        inset-block-start: -0.5vw;
      }
    }
  }

  /* =====================
    u-hover
  ===================== */
  .u-hover {
    transition: opacity 250ms ease 0s;
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }
}