@charset "UTF-8";

@layer style {
  .footer {
    position: relative;
    padding-block: 80px 0;
    background: white;

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

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;
      grid-template-columns: 1fr auto 96px;
      gap: 0 72px;
      align-content: flex-start;
      align-items: flex-start;
      max-inline-size: 100%;

      @media (width > 768px) {
        padding-inline: 80px;
      }

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

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

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

    /* ==== h1 ==== */
    h1 {
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      inline-size: fit-content;
      margin-block-start: 34px;
      font-size: 14px;

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

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

      @media (width <=768px) {
        grid-template-rows: repeat(auto-fit, minmax(0, min-content));
        gap: 2vw;
        inline-size: 100%;
        margin-block-start: var(--nudge-3);
        text-align: center;
      }

      p {
        font-size: 14px;
        letter-spacing: 0.02em;

        @media (width <=768px) {
          align-self: flex-start;
          margin-block: calc((1em - 1lh) / 2);
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }
    }

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

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

      &>ul {
        display: block grid;
        grid-template-columns: auto 1fr;
        gap: 72px;
        align-items: flex-start;
        justify-content: flex-start;

        @media (width <=768px) {
          display: block flex;
          flex-direction: column;
          gap: var(--nudge-2);
          inline-size: 100%;
        }

        >li {
          display: block grid;
          gap: 15px;
          inline-size: fit-content;

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

          >a {
            display: block grid;
            inline-size: 100%;
            font-size: 16px;
            font-weight: 600;

            @media (width <=768px) {
              padding-block-end: 1vw;
              font-size: var(--nudge-2);
              border-block-end: 1px solid var(--gray_border);
            }
          }
        }
      }

      li[data-id='company'] {
        >.children {
          display: grid;
          grid-template-columns: repeat(2, auto);
          gap: 0 32px;
          align-items: flex-start;
          justify-content: flex-start;

          @media (width <=768px) {
            grid-template-columns: 50% 50%;
            gap: 0;

            li {
              inline-size: 100%;
            }
          }
        }
      }

      .children {
        display: block grid;
        color: var(--gray_text);

        @media (width <=768px) {
          grid-template-columns: repeat(2, auto);
        }

        a {
          display: block grid;
          inline-size: 100%;
          padding-block: 4.6px;
          font-size: 14px;
          font-weight: 600;

          @media (width <=768px) {
            padding-block: 2vw;
            padding-inline: 0;
            font-size: calc((100 / 390) * 14 * 1vw);
          }
        }
      }
    }

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block grid;
      grid-row: 1 / 4;
      grid-column: 3 / 4;
      gap: 26px;
      inline-size: fit-content;

      @media (width <=768px) {
        display: block flex;
        gap: var(--nudge-4);
        justify-content: center;
        inline-size: 100%;
        margin-block-start: var(--nudge-5);
      }

      a {
        font-size: 16px;
        font-weight: 600;

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

    /* ==== .tel ==== */
    .tel {
      display: block grid;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
      gap: 10px;
      inline-size: fit-content;
      margin-block-start: 10px;

      @media (width <=768px) {
        gap: 1vw;
        margin-block-start: 2vw;
        margin-inline: auto;
      }

      .unit {
        display: block flex;
        gap: 5px;

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

        p {
          font-size: 14px;
          letter-spacing: 0.02em;

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

            a[href^='tel'] {
              text-decoration: underline;
            }
          }
        }
      }
    }

    /* ==== links ==== */
    .links {
      display: block flex;
      grid-row: 6 / 7;
      grid-column: 1 / 4;
      gap: 24px;
      margin-block-start: 15px;
      margin-inline: auto 0;

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

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

      /* ==== instagram ==== */
      .instagram {
        display: block grid;
        inline-size: 40px;
        aspect-ratio: 1 / 1;
        background-color: currentcolor;
        mask-image: var(--icon-instagram);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        transition: all 600ms ease 0s;

        @media (width <=768px) {
          inline-size: calc((100 / 390) * 35 * 1vw);
          background: linear-gradient(to right, rgb(247 207 0 / 70%), rgb(246 37 2 / 70%) 45%, rgb(182 47 82 / 70%) 75%, rgb(113 58 166 / 70%));
        }

        @media (any-hover: hover) {
          &:hover {
            background: linear-gradient(to right, rgb(247 207 0 / 70%), rgb(246 37 2 / 70%) 45%, rgb(182 47 82 / 70%) 75%, rgb(113 58 166 / 70%));
          }
        }
      }
    }

    /* ==== small ==== */
    small {
      grid-row: 7 / 8;
      grid-column: 1 / 4;
      padding-block: 25px;
      margin-block-start: 23px;
      font-size: 13px;
      line-height: 1.9;
      color: var(--gray_text);
      text-align: center;
      border-block-start: 1px solid var(--gray_border);

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