@charset "UTF-8";

/* =====================
  aside
===================== */
@layer style {
  .aside {
    position: relative;
    z-index: 2;
    padding-block: 117px 128px;
    color: white;
    background-image: url('../img/aside/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    isolation: isolate;

    @media (width <= 768px) {
      padding-block: 21.3vw 23vw;
      background-image: url('../img/aside/bg_sp.webp');
    }

    /* ==== inner ==== */
    .inner {
      display: block grid;
      justify-content: center;
      text-align: center;
    }

    /* ==== hgroup ==== */
    hgroup {
      display: block grid;
      gap: 13px;
      margin-block-end: 19px;

      @media (width <= 768px) {
        gap: 4.1vw;
        margin-block-end: 5.6vw;
      }

      h2 {
        font-size: 18px;

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

      p[lang='en'] {
        margin-block: calc((1em - 1lh) / 2);
        font-size: 56px;
        font-weight: 400;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 44 * 1vw);
          line-height: 1;
        }
      }
    }

    /* ==== body ==== */
    .body {
      margin-block-end: 36px;

      @media (width <= 768px) {
        padding-inline: 5vw;
        margin-block-end: 10.4vw;
        font-size: calc((100 / 390) * 15 * 1vw);

        br {
          display: none;
        }
      }
    }

    /* ==== u-anchor ==== */
    .u-anchor {
      margin-inline: auto;

      &::after {
        border-inline-start-color: #959686;
      }
    }
  }
}