@charset "UTF-8";

@layer style {
  .aside {
    position: relative;
    padding-block: 97px;
    background-image: url('../../../img/recruit/_common/aside/bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width <=768px) {
      padding-block: var(--nudge-8) var(--nudge-10);
      background-position: -189vw center;
    }

    .u-inner {
      display: block grid;
      grid-template-columns: repeat(2, 1fr);
      max-inline-size: 1120px;
      border-block-start: 1px solid white;
      border-inline-start: 1px solid white;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: var(--nudge-4);
        max-inline-size: 100%;
        border: none;
      }

      /* ==== section ==== */
      section {
        display: block grid;
        grid-template-rows: repeat(auto-fit, minmax(0, min-content));
        gap: 48px;
        padding-block: 63px;
        padding-inline: 60px 64px;
        background: rgb(255 255 255 / 14%);
        border-block-end: 1px solid white;
        border-inline-end: 1px solid white;

        @media (width <=768px) {
          gap: var(--nudge-4);
          padding-block: var(--nudge-4);
          padding-inline: var(--nudge-2);
          border: 1px solid white;
        }
      }

      .requirements {
        color: white;

        .anchor {
          .wrap {
            position: relative;
            padding-block: 20px 32px;
            padding-inline: 40px;
            border: 1px solid #fff;

            @media (width <=768px) {
              padding-block: var(--nudge-2);
              padding-inline: var(--nudge-3);
            }

            & h4 {
              font-size: 24px;
              font-weight: 500;

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

            .anchor {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
              display: block flow;
              inline-size: 100%;
              block-size: 100%;

              &::after {
                position: absolute;
                inset-block: 44%;
                inset-inline: auto 40px;
                inline-size: 20px;
                block-size: 20px;
                aspect-ratio: 1 / 1;
                content: '';
                background: white;
                mask-image: var(--icon-arrow);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                transition: all 250ms ease 0s;
              }

              @media only screen and (width <=768px) {
                &::after {
                  inset-inline: auto calc((100 / 390) * 20 * 1vw);
                  inline-size: calc((100 / 390) * 13 * 1vw);
                  block-size: calc((100 / 390) * 13 * 1vw);
                }
              }

              @media (any-hover: hover) {
                &:hover {
                  -webkit-text-fill-color: unset;
                  color: white;
                  background: color-mix(in srgb, white 40%, transparent);
                  border-image: unset;

                  &::after {
                    background: white;
                    transform: translateX(25%) translateY(-25%);
                  }
                }
              }
            }

            .link-list {
              position: relative;
              z-index: 2;
              display: block flex;
              gap: 16px;
              inline-size: fit-content;
              margin-block-start: 10px;

              @media only screen and (width <=768px) {
                flex-direction: column;
                gap: calc((100 / 390) * 8 * 1vw);
              }

              .item {
                .u-anchor {
                  gap: 12px;
                  padding-block: 5px;
                  padding-inline: 28px;
                  font-size: 16px;

                  @media only screen and (width <=768px) {
                    gap: calc((100 / 390) * 12 * 1vw);
                    justify-content: space-between;
                    inline-size: calc((100 / 390) * 180 * 1vw);
                    min-inline-size: unset;
                    padding-block: calc((100 / 390) * 5 * 1vw);
                    padding-inline: calc((100 / 390) * 24 * 1vw);
                    font-size: calc((100 / 390) * 16 * 1vw);
                  }

                  &::after {
                    position: unset;
                    inline-size: 12.5px;

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

      .u-hgroup {
        @media (width > 768px) {
          padding-inline: 27px;
        }
      }

      .anchor {
        display: block grid;
        grid-template-rows: repeat(auto-fit, minmax(0, min-content));
        gap: 25px;

        @media (width <=768px) {
          gap: var(--nudge-2);
        }
      }

      .u-anchor {
        justify-content: flex-start;
        inline-size: 100%;
        padding-block: 48px;
        padding-inline: 40px;
        font-size: 24px;
        font-weight: 500;

        @media (width <=768px) {
          padding-block: var(--nudge-2);
          padding-inline: var(--nudge-3);
          font-size: calc((100 / 390) * 18 * 1vw);
        }

        &::after {
          position: absolute;
          inset-block: auto;
          inset-inline: auto 37px;
          inline-size: 20px;

          @media (width <=768px) {
            inset-inline-end: calc((100 / 390) * 20 * 1vw);
            inline-size: calc((100 / 390) * 13 * 1vw);
          }
        }
      }
    }

    .entry {
      .anchor {
        a {
          display: block grid;
          place-content: center;
          padding-block: 16px;
          margin-inline: auto;
          background: white;

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

          @media (width > 768px) {
            inline-size: 360px;
            block-size: 83px;
          }

          img {
            max-inline-size: 262px;
            max-block-size: 60px;
            object-fit: contain;

            @media (width <=768px) {
              max-inline-size: calc((100 / 390) * 262 * 1vw);
              max-block-size: calc((100 / 390) * 40 * 1vw);
            }
          }
        }

        .u-anchor {
          place-content: unset;
          padding-inline: 60px;
          font-size: 20px;
          color: #001636;

          @media only screen and (width <=768px) {
            padding-inline: calc((100 / 390) * 60 * 1vw);
            font-size: calc((100 / 390) * 20 * 1vw);
          }

          &::after {
            inset-inline: auto 52px;
            background: #001636;
          }

          @media only screen and (width <=768px) {
            &::after {
              inset-inline: auto calc((100 / 390) * 52 * 1vw);
            }
          }
        }
      }
    }
  }
}