@charset "UTF-8";

/* =====================
  footer
===================== */
@layer style {
  .footer {
    padding-block: 80px 40px;
    overflow: clip;
    color: var(--gray100);
    background: var(--color-text-primary);

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

    /* ==== entry ==== */
    .entry {
      position: relative;
      display: block flex;
      gap: 16px;
      inline-size: 100vw;
      padding-block: 47px;
      margin-inline: calc(50% - 50vw);
      border-top: 1px dashed var(--white, #fff);
      border-bottom: 1px dashed var(--white, #fff);

      @media ((width > 768px) and (width <= 1440px)) {
        inline-size: 100%;
        margin-inline: auto;
      }

      @media (width <= 768px) {
        gap: 5vw;
        padding-block: 8vw;
      }

      &::before,
      &::after {
        display: block flow;
        flex-shrink: 0;
        inline-size: 1996px;
        block-size: 90px;
        content: '';
        background-image: url('../../img/recruit/_common/loop.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        animation: marquee 40s linear 0s infinite normal none running;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 864 / 2 * 1vw);
          block-size: calc((100 / 390) * 112 / 2 * 1vw);
          background-image: url('../../img/recruit/_common/loop_sp.png');
          animation: marquee 40s linear 0s infinite normal none running;
        }
      }

      @media (any-hover: hover) {
        &:hover {
          &::before,
          &::after {
            opacity: 0.7;
          }
        }
      }
    }

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      grid-template-columns: 1fr auto;
      gap: 25px 0;
      padding-block: 80px 0;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: 5.9vw;
        padding-block: 14.2vw;
      }

      /* ==== logo ==== */
      .logo {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        inline-size: fit-content;

        @media (width <= 768px) {
          margin-block-start: 5.7vw;
        }

        a {
          display: block flex;
          gap: 4px;
          align-items: center;

          @media (width <= 768px) {
            gap: 1vw;
          }
        }

        img {
          inline-size: 155px;
          block-size: 60px;
          filter: invert(1);

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

        span {
          font-size: 20px;

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

      /* ==== nav ==== */
      .nav {
        grid-row: 1 / 4;
        grid-column: 2 / 3;
        align-self: flex-start;
        padding-inline-end: 8px;
        margin-block-start: -2px;

        @media (width <= 768px) {
          padding-inline-end: 8px;
          margin-block-start: -2px;
        }

        ul {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 19px 64px;
          font-size: 15px;

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

          li {
            font-weight: 700;
          }

          @media (width <= 768px) {
            grid-template-columns: repeat(2, 1fr);
            font-size: calc((100 / 390) * 15 * 1vw);
          }
        }
      }

      /* ==== .sub-nav ==== */
      .sub-nav {
        display: block flex;
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        gap: 26px;
        align-items: center;
        align-self: flex-start;
        inline-size: fit-content;
        font-weight: 700;

        @media (width <= 768px) {
          gap: 6vw;
          margin-block-start: 2.4vw;
        }

        a {
          display: block flex;
          gap: 7px;
          align-items: center;
          font-size: 13px;

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

          &::after {
            inline-size: 10px;
            aspect-ratio: 1 / 1;
            content: '';
            background-color: currentcolor;
            mask-image: var(--icon-blank);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            translate: 0 -1px;

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

      /* ==== copyright ==== */
      .copyright {
        grid-row: 3 / 4;
        grid-column: 1 / 2;
        align-self: flex-start;
        margin-block-start: -7px;
        font-size: 13px;
        font-weight: 400;

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