@charset "UTF-8";

@layer style {
  .footer {
    position: relative;
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-template-columns: minmax(260px, 1fr) auto;
    max-inline-size: var(--inner-width);
    padding-block: 56px 39px;
    padding-inline: 40px;
    margin-block-end: 24px;
    margin-inline: auto;
    container-type: inline-size;
    color: white;
    background-image: url('../img/_common/footer.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 16px;
    transition: background-image 250ms ease 0s;
    will-change: background-image;

    @media (width > 1920px) {
      background-image: url('../img/_common/footer_wide.png');
    }

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      padding-block: 10.6vw 8.2vw;
      padding-inline: calc((100 / 390) * 24 * 1vw);
      margin-block-end: var(--nudge-1);
      background-image: url('../img/_common/footer_sp.webp');
      border-radius: calc((100 / 390) * 16 * 1vw);
    }

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

      /* navigation */
      >ul {
        display: block flex;
        flex-wrap: wrap;
        gap: 32px 48.5px;
        padding-inline-end: 64px;

        @media (width > 768px) {
          @container (width<850px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-block-end: 40px;
          }
        }

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

        /* ==== li ==== */
        >li {
          block-size: fit-content;

          >a {
            @media (width >=1920px) {
              letter-spacing: 0.13px;
            }
          }

          @media (width <=768px) {
            margin-block-end: calc((100 / 390) * 10 * 2.4vw);

            &:nth-child(2) {
              margin-block-end: 0;
              break-after: column;
            }
          }
        }
      }

      /* ==== child ==== */
      >ul ul {
        display: block grid;
        gap: 4px;
        margin-block-start: 9px;
        font-size: 14px;

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

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

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

            &::before {
              inline-size: 4px;
              aspect-ratio: 1 / 1;
              content: '';
              background: currentcolor;
              border-radius: calc(infinity * 1px);

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

    /* ==== mark ==== */
    .mark {
      display: block grid;
      grid-row: 4 / 5;
      grid-column: 2 / 3;
      gap: 8px;
      align-self: flex-start;
      inline-size: fit-content;
      padding-block: 16px;
      padding-inline: 16px;
      margin-block-start: -53px;
      margin-inline: auto 0;
      font-size: 13px;
      color: var(--color-text-primary);
      background: white;
      border-radius: 8px;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: 2.8vw;
        inline-size: 100%;
        padding-block: 4vw;
        padding-inline: 16vw;
        margin-block-start: 8.2vw;
        margin-inline: auto;
        border-radius: 8px;
      }

      .img {
        display: block flex;
        gap: 16px;
        align-items: center;

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

        img {
          flex-shrink: 0;
        }
      }

      p {
        @media (width >=1920px) {
          letter-spacing: 0.13px;
        }

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

      &[hidden] {
        visibility: hidden;
        pointer-events: none;
        user-select: none;
        opacity: 0;

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

    /* ==== logo ==== */
    .logo {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      inline-size: fit-content;
      margin-block-start: 22px;
      filter: brightness(0) invert(1);
      transition: all 250ms ease 0s;
      will-change: filter;

      @media (any-hover: hover) {
        &:hover {
          filter: brightness(1) invert(0);
        }
      }

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

    /* ==== address ==== */
    .address {
      display: block grid;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      gap: 1px;
      align-self: flex-start;
      inline-size: fit-content;
      margin-block-start: 17px;
      font-size: 13px;

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

      .item {
        display: block flex;
        flex-wrap: wrap;
        gap: 0 4px;
        align-items: center;

        p {
          @media (width >=1920px) {
            letter-spacing: 0.13px;
          }
        }
      }

      .item[data-id='2'] {
        padding-inline-start: 3px;
      }

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

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block flex;
      flex-wrap: wrap;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
      gap: 0 16px;
      align-self: flex-end;
      inline-size: fit-content;
      margin-block-end: 19px;
      font-size: 13px;

      @media (width <=768px) {
        gap: 4.2vw;
        margin-block: 6.2vw 0;
        margin-inline: auto;
        font-size: calc((100 / 390) * 12 * 1vw);
      }

      a {
        @media (width >=1920px) {
          letter-spacing: 0.13px;
        }
      }
    }

    /* ==== anchor ==== */
    .anchor {
      display: block flex;
      grid-row: 4 / 5;
      grid-column: 1 / 2;
      gap: 10px;
      align-self: flex-start;
      inline-size: fit-content;
      padding-block: 8px 7px;
      padding-inline: 24px 26px;
      margin-block-start: -3px;
      font-size: 13px;
      color: var(--lightblue);
      background: white;
      border-radius: calc(infinity * 1px);
      transition: all 250ms ease 0s;

      @media (width >=1920px) {
        letter-spacing: 0.13px;
      }

      @media (width <=768px) {
        gap: 2.6vw;
        padding-block: 2.1vw;
        padding-inline: 6.3vw;
        margin-block-start: 4.3vw;
        margin-inline: auto;
        font-size: calc((100 / 390) * 12 * 1vw);
      }

      &::after {
        inline-size: 15px;
        aspect-ratio: 1 / 1;
        content: '';
        background-color: currentcolor;
        mask-image: var(--icon-download);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        transition: inherit;

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

      @media (any-hover: hover) {
        &:hover {
          color: white;
          background: var(--lightblue);
        }
      }
    }

    /* ==== copyright ==== */
    .copyright {
      grid-row: 5 / 6;
      grid-column: 1 / 2;
      inline-size: fit-content;
      margin-block-start: -44px;
      font-family: var(--title);
      font-size: 13px;

      @media (width >=1920px) {
        letter-spacing: 0.13px;
      }

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