@charset "UTF-8";

@layer style {
  .footer {
    position: relative;
    padding-block: 54px 0;
    overflow: clip;
    background: var(--gradation);

    @media (width <=768px) {
      padding-block: var(--nudge-4) 0;
      overflow: visible;
    }

    /* ==== 🌊 ==== */
    &::after {
      position: absolute;
      top: 10px;
      left: 0;
      z-index: 2;
      inline-size: 100%;
      block-size: 475px;
      pointer-events: none;
      content: '';
      background-image: url('../../../img/recruit/_common/footer/bg.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    @media only screen and (width <=768px) {
      &::after {
        top: calc((100 / 390) * 10 * 1vw);
        block-size: calc((100 / 390) * 475 * 1vw);
      }
    }

    /* ==== u-inner ==== */
    .u-inner {
      position: relative;
      z-index: 3;
      display: block grid;
      color: white;

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

    /* ==== .logo ==== */
    .logo {
      display: block grid;
      gap: 13px;
      inline-size: fit-content;
      margin-inline: auto;

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

        img {
          inline-size: calc((100 / 390) * 200 * 1vw);
        }
      }

      [lang='en'] {
        display: block flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        font-family: var(--title);
        font-size: 16px;
        font-weight: 400;

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

        &::before,
        &::after {
          display: block flow;
          inline-size: 20px;
          block-size: 1px;
          content: '';
          background: currentcolor;

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

    /* ==== .nav ==== */
    .nav {
      margin-block-start: 74px;

      @media only screen and (width <=768px) {
        margin-block-start: 0;
      }

      .main-nav {
        display: block flex;
        flex-wrap: wrap;
        gap: 40px 72px;
        justify-content: center;
        inline-size: 528px;
        margin-inline: auto;
        font-weight: 500;

        @media only screen and (width <=768px) {
          display: block grid;
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 8 * 1vw) 0;
          justify-content: space-between;
          inline-size: unset;

          & a {
            display: block flow;
            inline-size: 100%;
            padding-block: calc((100 / 390) * 8 * 1vw);
            text-align: center;
          }
        }
      }

      .sub-nav {
        display: block flex;
        gap: 64px;
        align-items: center;
        justify-content: center;
        inline-size: fit-content;
        margin-block-start: 78px;
        margin-inline: auto;
        font-size: 14px;

        @media only screen and (width <=768px) {
          display: block grid;
          grid-template-columns: repeat(2, max-content);
          gap: calc((100 / 390) * 16 * 1vw);
          margin-block-start: calc((100 / 390) * 24 * 1vw);
          font-size: calc((100 / 390) * 14 * 1vw);
          text-align: center;
        }
      }
    }

    /* ==== small ==== */
    small {
      inline-size: 100vw;
      padding-block: 16px 18px;
      margin-block-start: 34px;
      margin-inline: calc(50% - 50cqi);
      font-size: 12px;
      font-weight: 400;
      color: color-mix(in srgb, currentcolor 60%, transparent);
      text-align: center;
      border-block-start: 1px solid #80b1d9;

      @media (width < 1440px) {
        margin-inline: auto;
      }

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

    /* =====================
        to-top
    ===================== */
    .to-top {
      position: absolute;
      top: 38px;
      right: 40px;
      z-index: 30;
      inline-size: 60px;
      aspect-ratio: 1/1;
      background-image: url('../../../img/recruit/_common/totop_button.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      border-radius: 50rem;
      transition: all 250ms ease 0s;

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

      @media (any-hover: hover) {
        &:hover {
          background-color: rgb(255 255 255 / 20%);
        }
      }
    }
  }
}