@charset "UTF-8";

@layer style {
  .footer-image {
    overflow: clip;

    img {
      inline-size: 100%;
      object-fit: cover;
      border-radius: 40px;

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

  .footer {
    padding-block: 97px;

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

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

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

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

      >ul {
        display: grid;
        gap: 42px 0;

        @media (width > 768px) {
          grid-template-rows: repeat(2, auto);
          grid-auto-flow: column;
        }

        @media (width <=768px) {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0;
          align-items: flex-start;
        }

        >li {
          display: block grid;
          gap: 10px;

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

        @media (width > 768px) {
          >li[data-id='products'] {
            grid-row: 1 / 3;
            align-items: flex-start;
            margin-inline: -16px 72px;
          }

          >li[data-id='business'] {
            grid-row: 1 / 3;
          }
        }

        >li> :where(a, p) {
          inline-size: fit-content;
          margin-inline-end: 88px;
          font-size: 18px;
          font-weight: 700;

          @media (width <=768px) {
            inline-size: 100%;
            padding-block: 2.9vw;
            margin-inline-end: 0;
            font-size: calc((100 / 390) * 16 * 1vw);
          }
        }

        >li>a {
          display: block flow;
        }

        .children {
          display: grid;
          gap: 5px;
          align-items: flex-start;
          padding-inline-start: 16px;

          @media (width <=768px) {
            gap: 1.6vw;
            padding-inline-start: 3.7vw;
            margin-block-start: 0;
            font-size: calc((100 / 390) * 13 * 1vw);
          }

          li {
            position: relative;

            &::before {
              position: absolute;
              inset-block-start: 48%;
              inset-inline-start: -16px;
              inline-size: 8px;
              aspect-ratio: 8 / 2;
              content: '';
              background: #00529f;

              @media (width <=768px) {
                inset-block-start: 50%;
                inset-inline-start: -3.1vw;
                inline-size: calc((100 / 390) * 6 * 1vw);
                translate: 0 -50%;
              }
            }

            a {
              display: block flow;
            }
          }
        }
      }
    }

    /* ==== contact-button ==== */
    .contact-button {
      position: relative;
      grid-row: 3 / 5;
      grid-column: 2 / 3;
      justify-self: flex-end;
      inline-size: fit-content;
      padding-block: 39px;
      padding-inline: 40px 95px;
      margin-block-start: 29px;
      background: var(--lightblue);
      border-radius: 40px;

      @media (width > 768px) {
        inline-size: 480px;
      }

      @media (width <=768px) {
        inline-size: 100%;
        padding-block: 7.4vw;
        padding-inline: calc((100 / 390) * 32 * 1vw);
        margin-block-start: var(--nudge-5);
        border-radius: calc((100 / 390) * 20 * 1vw);
      }

      &::before {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 40px;
        inline-size: 42px;
        aspect-ratio: 1 / 1;
        content: '';
        background-color: var(--primary);
        background-image: url('../img/_common/icon/arrow_white.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px 14px;
        border: 3px solid var(--primary);
        border-radius: 6px;
        translate: 0 -50%;
        transition: background 250ms ease 0s;

        @media (width <=768px) {
          inset-inline-end: calc((100 / 390) * 16 * 1vw);
          inline-size: calc((100 / 390) * 32 * 1vw);
          background-size: calc((100 / 390) * 10 * 1vw);
          border-radius: calc((100 / 390) * 6 * 1vw);
        }
      }

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

      @media (any-hover: hover) {
        &:hover {
          &::before {
            background-color: var(--white);
            background-image: url('../img/_common/icon/arrow_blue.svg');
          }
        }
      }
    }

    /* ==== .sub ==== */
    .sub {
      display: block flex;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
      gap: 32px;
      align-items: center;
      align-self: flex-start;
      margin-block-start: 108px;

      @media (width <=768px) {
        display: block flow;
        margin-block-start: var(--nudge-5);
        margin-inline: auto;
      }
    }

    /* ==== sdgs-button ==== */
    .sdgs-button {
      display: block grid;
      place-content: center;
      inline-size: fit-content;

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

      img {
        inline-size: 169px;
        aspect-ratio: 169 / 21;

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

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block flex;
      gap: 24px;
      align-items: center;
      margin-block-start: 1px;
      font-size: 13px;

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

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

      @media (width <=768px) {
        margin-block-start: var(--nudge-4);
        margin-inline: auto;
      }

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

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

      @media (width <=768px) {
        display: block flow;
        margin-block-start: var(--nudge-4);
        margin-inline: auto;
        font-size: calc((100 / 390) * 13 * 1vw);
        text-align: center;

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

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

        @media (width <=768px) {
          gap: 0.5em;
          inline-size: 100%;
          margin-inline: auto;
          text-align: center;
        }
      }
    }

    /* ==== copyright ==== */
    .copyright {
      grid-row: 4 / 5;
      grid-column: 1 / 2;
      align-self: flex-start;
      inline-size: fit-content;
      margin-block-start: 17px;
      font-size: 12px;
      font-weight: 400;
      color: var(--text_gray);

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