@charset "UTF-8";

/* =====================
  aside
===================== */
@layer style {
  .aside {
    position: relative;
    padding-block: 160px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/_common/aside_bg.png');
    background-color: #71716f;

    @media only screen and (width <= 768px) {
      background-image: url('../img/_common/aside_bg_2x.png');
      padding-block: calc((100 / 390) * 60 * 1vw);
    }

    .u-inner {
      .anchor {
        position: relative;
        border: 1px solid #ffffff;
        border-radius: 10px;
        display: block grid;
        place-content: center;
        padding-block: 47px;
        font-family: var(--pop);
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        color: #fff;

        @media only screen and (width <= 768px) {
          font-size: calc((100 / 390) * 22 * 1vw);
          padding-block: calc((100 / 390) * 24 * 1vw);
          border-radius: calc((100 / 390) * 10 * 1vw);
        }

        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background-color: #929292;
          mix-blend-mode: multiply;
          border-radius: inherit;
          transition: all 250ms ease 0s;
        }

        .en-title {
          position: relative;
        }
        &:hover::before {
          background-color: rgb(146 146 146 / 60%);
        }
      }

      .description {
        color: #fff;
        text-align: center;
        margin-block-start: 30px;

        @media only screen and (width <= 768px) {
          text-align: left;
        }
      }
    }
  }
}