@charset "UTF-8";

@layer style {
  .aside {
    inline-size: var(--inner-width);
    padding-block: 55px;
    margin-inline: auto;

    @media (width <=768px) {
      padding-block: var(--nudge-5) 11.8vw;
    }

    /* ==== .u-inner ==== */
    .u-inner {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 33px;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: 9.4vw;
        margin-block-start: calc((100 / 390) * -1 * 1vw);
      }
    }

    /* ==== anchor ==== */
    .anchor {
      position: relative;
      display: block grid;
      grid-template-columns: 160px 1fr auto;
      gap: 0 41px;
      align-items: center;
      padding-inline: 23px;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: var(--nudge-3);
        padding-inline: 0;
      }

      img {
        border-radius: 8px;

        @media (width <=768px) {
          inline-size: 100%;
          block-size: calc((100 / 390) * 200 * 1vw);
          border-radius: calc((100 / 390) * 8 * 1vw);
        }
      }

      .u-hgroup {
        align-self: center;
        translate: 0 -4px;
        transition: all 250ms ease 0s;

        @media (width <=768px) {
          align-self: flex-start;
          padding-inline: var(--nudge-2);
          translate: unset;
        }
      }

      a {
        position: absolute;
        inset: 0;
        display: block flow;
      }

      &::after {
        inline-size: 48px;
        aspect-ratio: 1 / 1;
        pointer-events: none;
        content: '';
        background:
          url('../img/_common/icon/arrow-white.svg') no-repeat center / 13.41px 12px,
          var(--lightblue);
        border-radius: calc(infinity * 1px);
        translate: -1px -1px;
        transition: all 250ms ease 0s;

        @media (width <=768px) {
          position: absolute;
          inset-block-end: 3.8vw;
          inset-inline-end: 4vw;
          inline-size: calc((100 / 390) * 40 * 1vw);
          background:
            url('../img/_common/icon/arrow-white.svg') no-repeat center / calc((100 / 390) * 12.42 * 1vw) calc((100 / 390) * 10 * 1vw),
            var(--lightblue);
          translate: unset;
        }
      }

      @media (any-hover: hover) {
        &:hover {
          .u-hgroup {
            opacity: 0.7;
          }

          &::after {
            transform: translateX(25%);
          }
        }
      }
    }

    .anchor:nth-child(2n) {
      @media (width > 768px) {
        &::before {
          position: absolute;
          inset-block: auto;
          inset-inline-start: -17px;
          inline-size: 1px;
          block-size: 100%;
          content: '';
          background: var(--gray_border);
        }
      }
    }

    .anchor+.anchor {
      @media (width <=768px) {
        padding-block-start: var(--nudge-5);
        border-block-start: 1px solid var(--gray_border);
      }
    }
  }
}