@charset "UTF-8";

@layer style {
  .footer {
    padding-block: 85px;

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

    /* ==== inner ==== */
    .inner {
      display: block grid;
      padding-inline: 80px;

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

    /* ==== .logo ==== */
    .logo {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      inline-size: fit-content;
      margin-block-start: 5px;

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

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

    /* ==== .nav ==== */
    .nav {
      grid-row: 1 / 5;
      grid-column: 2 / 3;
      inline-size: fit-content;
      margin-inline: auto 0;

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

      ul {
        display: block grid;
        gap: 31px 40.6px;
        align-items: start;
        align-self: flex-start;
        color: var(--form-form-optional, #575757);

        @media (width > 768px) {
          margin-block-start: 5.3px;
        }

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

        @media (width > 768px) {
          li[data-id='home'] {
            grid-row: 1 / 2;
            grid-column: 1 / 2;
          }

          li[data-id='service'] {
            grid-row: 2 / 3;
            grid-column: 1 / 2;
          }

          li[data-id='company'] {
            grid-row: 1 / 3;
            grid-column: 2 / 3;
          }

          li[data-id='recruit'] {
            grid-row: 2 / 3;
            grid-column: 2 / 3;
            margin-block-start: 64px;
          }

          li[data-id='contact'] {
            grid-row: 1 / 3;
            grid-column: 3 / 4;
          }
        }

        >li {
          position: relative;
          padding-inline-start: 10.9px;
          border-inline-start: 1px solid var(--form-form-border);

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

        >li>a {
          position: relative;
          display: block flex;
          gap: 0 7px;
          align-items: center;
          padding-block: 0.9px;
          font-size: 15px;
          font-weight: 700;

          @media (width > 768px) {
            margin-block: calc((1em - 1lh) / 2);
          }

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

          &::before {
            display: block flow;
            flex-shrink: 0;
            inline-size: 6px;
            block-size: 8px;
            content: '';
            background: var(--primary);
            clip-path: polygon(0 0, 0 100%, 100% 50%);

            @media (width <=768px) {
              display: none;
            }
          }
        }
      }

      li {
        position: relative;
        display: block grid;
      }

      label {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        z-index: 2;
        display: block grid;
        place-content: center end;
        inline-size: calc((100 / 390) * 40 * 1vw);
        aspect-ratio: 1 / 1;
        cursor: pointer;
        -webkit-tap-highlight-color: rgb(0 0 0 / 10%);

        &::before {
          inline-size: calc((100 / 390) * 24 * 1vw);
          aspect-ratio: 1 / 1;
          margin-inline: auto 0;
          content: '';
          background-color: var(--primary);
          mask-image: var(--icon-plus);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          transition: rotate 250ms ease 0s;
          will-change: rotate;
        }

        input {
          display: none;
        }

        @media (width > 768px) {
          display: none;
        }
      }

      .children {
        display: block grid;
        font-size: 12px;
        font-weight: 400;
        color: var(--form-form-optional, #575757);

        @media (width > 768px) {
          margin-block-start: 17px;
        }

        @media (width <=768px) {
          grid-template-rows: 0fr;
          transition: grid-template-rows 0.2s ease-out;
        }
      }

      .children-wrap {
        display: block grid;
        gap: 8.5px;

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

        @media (width <=768px) {
          overflow: hidden;
        }

        a {
          position: relative;
          display: block flex;
          gap: 3px;
          padding-inline-start: 11px;

          @media (width <=768px) {
            gap: var(--nudge-1);
            padding-inline-start: 2vw;
          }

          &::before {
            content: '-';
          }
        }
      }

      li:has(input:checked) {
        .children {
          grid-template-rows: 1fr;
        }

        label::before {
          rotate: 0 0 1 45deg;
        }
      }
    }

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block flex;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
      gap: 30px;
      inline-size: fit-content;
      margin-block-start: 93px;
      font-size: 13px;
      font-weight: 500;
      color: #969696;

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

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

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

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

      .location {
        display: block flex;
        gap: 14px;
        align-items: center;

        @media (width <=768px) {
          gap: calc((100 / 390) * 11 * 1vw);
        }
      }

      .tel-fax {
        display: block flex;
        gap: 0 2px;
        align-items: center;

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

        span+span::before {
          margin-inline-end: 4px;
          content: '／';

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

        @media (width <=768px) {
          a[href^='tel:'] {
            color: var(--primary);
            text-decoration: underline;
          }
        }
      }

      .unit+.unit {
        margin-block-start: 14px;
      }
    }

    /* ==== links ==== */
    .links {
      display: block flex;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
      gap: 8px;
      align-items: center;
      margin-block-start: 22px;

      @media (width <=768px) {
        display: block grid;
        gap: 2.6vw 0;
        justify-content: center;
        inline-size: fit-content;
        margin-block-start: calc((100 / 390) * 23.7 * 1vw);
        margin-inline: auto;
      }

      a {
        display: block grid;
        place-content: center;
        block-size: 100%;
        background: white;
      }

      .border {
        padding-block: 26.1px;
        padding-inline: 18.8px;
        border: 1px solid #ccc;

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

      @media (width <=768px) {
        [data-id='sdgs'] {
          grid-row: 1 / 2;
          grid-column: 1 /3;

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

        [data-id='youtube'] {
          grid-row: 2 / 3;
          grid-column: 1 /3;

          @media (width <=768px) {
            justify-content: start;

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

        [data-id='green'] {
          grid-row: 3 / 4;
          grid-column: 1 / 2;

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

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

        [data-id='safe'] {
          grid-row: 3 / 4;
          grid-column: 2 / 3;

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

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

    /* ==== copy ==== */
    .copy {
      grid-row: 4 / 5;
      grid-column: 2 / 3;
      inline-size: fit-content;
      margin-block-start: 93px;
      margin-inline: auto 0;
      font-size: 12px;
      font-weight: 500;
      color: #969696;
      letter-spacing: 1.2px;

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