@charset "UTF-8";

/* =====================
  aside
===================== */
@layer style {
  .aside {
    position: relative;
    inline-size: 100%;
    min-block-size: 222px;

    @media (width <= 768px) {
      min-block-size: calc((100 / 390) * 280 * 1vw);
    }

    .u-hover {
      display: block grid;
      grid-template-columns: max-content auto max-content;
      align-items: center;
      justify-items: end;
      column-gap: 51px;
      padding-inline: 80px 90px;
      padding-block: 48px;
      border-radius: 16px;
      background-image: linear-gradient(139deg, #22327e 34.75%, #5d69a1 55.2%, #0f1b53 81.5%);

      @media (width <= 768px) {
        grid-template-columns: 1fr;
        align-items: start;
        padding-inline: calc((100 / 390) * 24 * 1vw);
        justify-items: start;
        padding-block: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 40 * 1vw);
        border-radius: calc((100 / 390) * 16 * 1vw);
        column-gap: calc((100 / 390) * 48 * 1vw);
        row-gap: calc((100 / 390) * 30 * 1vw);
      }

      .description {
        line-height: 1.9;
        color: #fff;

        @media (width <= 768px) {
          grid-area: 2/1/3/3;
        }
      }

      .arrow {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/_common/icon_ellipse.svg');
        inline-size: 78px;
        block-size: 63px;
        display: block grid;
        place-content: center;

        @media (width <= 768px) {
          grid-area: 1/2/2/3;
          inline-size: calc((100 / 390) * 63 * 1vw);
          block-size: calc((100 / 390) * 51 * 1vw);
          margin-inline-end: calc((100 / 390) * 8 * 1vw);
          margin-block-start: calc((100 / 390) * 25 * 1vw);
        }

        &::after {
          content: '';
          display: block flow;
          inline-size: 19px;
          aspect-ratio: 19 / 14;
          mask-repeat: no-repeat;
          mask-size: contain;
          mask-position: center;
          mask-image: var(--icon-arrow);
          background: linear-gradient(139deg, #22327e 34.75%, #5d69a1 55.2%, #0f1b53 81.5%);
        }
        @media (width <= 768px) {
          &::after {
            inline-size: calc((100 / 390) * 19 * 1vw);
          }
        }
      }
    }
  }
}