@charset "UTF-8";

/* =====================
  aside
===================== */
@layer style {
  .aside {
    padding-block: 40px;
    background: linear-gradient(121.61deg, #2b7996 -4.53%, #102647 33.56%);

    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 48 * 1vw);
    }

    .inner {
      margin-inline: 40px;
      background: linear-gradient(134.74deg, #102647 47.8%, #2b7996 115.47%);
      padding-inline: 80px 112px;
      padding-block: 46px 40px;
      display: block grid;
      grid-template-columns: repeat(2, max-content);
      grid-template-rows: repeat(2, max-content);
      align-items: end;
      justify-content: space-between;

      @media only screen and (width <= 768px) {
        margin-inline: calc((100 / 390) * 32 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        display: block flow;
        padding-block: calc((100 / 390) * 76 * 1vw) calc((100 / 390) * 72 * 1vw);
      }

      .u-hgroup {
        grid-area: 1/1/2/2;

        @media only screen and (width <= 768px) {
          margin-inline: auto;
        }

        & span[lang='en'] {
          background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        }
      }
      .description {
        grid-area: 2/1/3/2;
        color: #fff;
        margin-block-start: 46px;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 31 * 1vw);
          text-align: center;
        }
      }
      .u-anchor {
        grid-area: 1/2/3/3;
        font-family: var(--serif);
        font-size: 20px;
        font-weight: 500;
        padding-inline: 122px;
        padding-block: 23px;

        @media only screen and (width <= 768px) {
          font-size: calc((100 / 390) * 18 * 1vw);
          padding-inline: calc((100 / 390) * 62 * 1vw);
          padding-block: calc((100 / 390) * 14 * 1vw);
          margin-block-start: calc((100 / 390) * 72 * 1vw);
          margin-inline: auto;
        }
      }
    }
  }
}