@charset "UTF-8";

@layer style {
  .footer {
    position: relative;

    /* ==== inner ==== */
    .inner {
      display: block grid;
      grid-template-columns: 1fr auto auto;
      align-items: start;
      padding-block: 80px 15px;
      padding-inline: 80px;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        padding-block: 15.2vw 3.8vw;
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== nav ==== */
    .nav {
      grid-row: 1 / 4;
      grid-column: 2 / 3;

      @media (width <=768px) {
        inline-size: 100%;
      }

      ul {
        position: relative;
        display: block grid;
        gap: 0 20px;
        margin-block-start: -6px;
        margin-inline-end: 17px;
        font-size: 15px;

        --_oversize: 3px;
        --active-anchor: --home;

        &::before {
          position: absolute;
          inset-block-start: calc(anchor(start) - var(--_oversize));
          inset-inline-start: calc(anchor(start) + var(--_oversize));
          z-index: 1;
          inline-size: calc(anchor-size(width) - calc(var(--_oversize) * 2));
          block-size: calc(anchor-size(height) + calc(var(--_oversize) * 2));
          position-anchor: var(--active-anchor);
          pointer-events: none;
          content: '';
          background: var(--primary);
          background: color-mix(in srgb, var(--primary) 20%, transparent);
          border-radius: 4px;
          opacity: 0;
          transition: all 300ms var(--slideInBezier) 0s;
        }

        @media (width <=768px) {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 3.6vw 0;
          padding-inline: calc((100 / 390) * 16 * 1vw);
          margin-block-start: 0;
          margin-inline-end: 0;
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }

      @media (width > 768px) {
        li {
          grid-column: 2 / 3;

          &[data-id='home'] {
            grid-column: 1 / 2;
          }
        }
      }

      [data-id='home'] {
        a {
          font-family: var(--sanserif);
        }
      }

      a {
        position: relative;
        display: block grid;
        padding-block: 5.2px;
        padding-inline: 17px 44px;
        font-weight: 500;
        border-inline-start: 1px solid rgb(0 0 0 / 20%);

        @media (width <=768px) {
          padding-block: 1.3vw;
          padding-inline: 3.2vw;
        }
      }
    }

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block grid;
      grid-row: 1 / 4;
      grid-column: 3 / 4;
      gap: 10px 0;
      font-size: 13px;
      color: #888;
      border-inline-start: 1px solid rgb(0 0 0 / 20%);

      @media (width <=768px) {
        display: block flex;
        flex-wrap: wrap;
        gap: 0;
        justify-content: space-between;
        inline-size: 100%;
        padding-inline: 1vw;
        margin-block-start: 16.4vw;
        font-size: calc((100 / 390) * 13 * 1vw);
        border-inline-start: unset;
      }

      a {
        display: block grid;
        padding-inline: 18px 0;
        font-weight: 400;

        @media (width <=768px) {
          padding-inline: 0;
        }
      }
    }

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

      @media (width <=768px) {
        margin-block-start: 16.5vw;
        margin-inline: auto;

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

    /* ==== address ==== */
    .address {
      display: block grid;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      inline-size: fit-content;
      margin-block-start: 20px;
      font-size: 14px;
      font-weight: 400;

      @media (width <=768px) {
        inline-size: 100%;
        margin-block-start: 5.7vw;
        margin-inline: auto;
        font-size: calc((100 / 390) * 13 * 1vw);
        text-align: center;
      }

      .location {
        display: block flex;
        gap: 17px;

        @media (width <=768px) {
          gap: 4.4vw;
          justify-content: center;
          margin-block-start: 0.1vw;

          p {
            font-size: calc((100 / 390) * 13 * 1vw);
          }
        }
      }

      .tel-fax {
        display: block flex;
        gap: 2px;

        @media (width <=768px) {
          gap: 1vw;
          justify-content: center;
          margin-block-start: -0.2vw;

          p {
            font-size: calc((100 / 390) * 13 * 1vw);
          }

          a[href^='tel:'] {
            color: var(--primary);
            text-decoration: underline;
          }
        }

        p+p {
          &::before {
            margin-inline-end: 4px;
            content: '／';
          }
        }
      }
    }

    /* ==== sdgs ==== */
    .sdgs {
      display: block grid;
      place-content: center;
      inline-size: fit-content;
      padding-block: 10.2px;
      padding-inline: 27px;
      margin-block-start: 19px;
      border: 1px solid #bababa;

      @media (width <=768px) {
        padding-block: 2.8vw;
        padding-inline: 5vw;
        margin-block-start: 6.1vw;
        margin-inline: auto;

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

    /* ==== copyright ==== */
    .copyright {
      inline-size: fit-content;
      margin-block-start: 44px;
      font-size: 12px;
      font-weight: 400;
      color: #888;

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

    /* ==== to-top ==== */
    .to-top {
      position: absolute;
      inset-block-end: 0;
      inset-inline-end: 0;
      display: block grid;
      place-content: center;
      inline-size: 50px;
      aspect-ratio: 1 / 1;
      background: var(--primary);
      border-radius: 8px 0 0;

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

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

      @media (any-hover: hover) {
        &:hover {
          img {
            transform: translateY(-25%);
          }
        }
      }

      img {
        transition: transform 250ms ease 0s;
      }
    }
  }

  body:not([data-page='top']) .footer {
    border-block-start: 1px solid rgb(0 0 0 / 20%);
  }

  /* ==== active ==== */
  body .footer .nav ul:has([data-id='home']:hover),
  body[data-page='top'] .footer .nav ul:not(:hover):has([data-id='home']) {
    --active-anchor: --home;

    &::before {
      opacity: 1;
    }
  }

  body .footer .nav ul:has([data-id='company']:hover),
  body[data-page='company'] .footer .nav ul:not(:hover):has([data-id='company']) {
    --active-anchor: --company;

    &::before {
      opacity: 1;
    }
  }

  body .footer .nav ul:has([data-id='business']:hover),
  body[data-page='business'] .footer .nav ul:not(:hover):has([data-id='business']) {
    --active-anchor: --business;

    &::before {
      opacity: 1;
    }
  }

  body .footer .nav ul:has([data-id='recruit']:hover),
  body[data-page='recruit'] .footer .nav ul:not(:hover):has([data-id='recruit']) {
    --active-anchor: --recruit;

    &::before {
      opacity: 1;
    }
  }

  body .footer .nav ul:has([data-id='contact']:hover),
  body[data-page='contact'] .footer .nav ul:not(:hover):has([data-id='contact']) {
    --active-anchor: --contact;

    &::before {
      opacity: 1;
    }
  }

  body .footer .nav ul:has([data-id='product']:hover),
  body[data-page='product'] .footer .nav ul:not(:hover):has([data-id='product']) {
    --active-anchor: --product;

    &::before {
      opacity: 1;
    }
  }
}