@charset "UTF-8";

/* =====================
  footer
===================== */
@layer style {
  .footer {
    max-inline-size: calc(100% - 80px * 2);
    margin-block: 59px 0;
    margin-inline: auto;
    border-block: 1px solid #e0e0e0;

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

    /* ==== .inner ==== */
    .inner {
      display: block grid;
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      grid-template-columns: 1fr auto;
      max-inline-size: 1280px;
      padding-block: 60px 25px;
      margin-inline: auto;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        inline-size: 100%;
        padding-block: calc((100 / 390) * 60 * 1vw) 15.3vw;
      }
    }

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

    /* ==== .address ==== */
    .address {
      display: block grid;
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      grid-row: 2 / 5;
      grid-column: 1 / 2;
      inline-size: fit-content;
      block-size: fit-content;
      padding-block-start: 12px;
      margin-block-start: 20px;
      font-size: 14px;

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

      & address {
        display: block grid;
        align-self: flex-start;

        & > span {
          display: block flex;
          align-items: center;
        }

        /* ==== position ==== */
        .position {
          gap: 1em;

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

        /* ==== tel-fax ==== */
        .tel-fax {
          @media (width <= 768px) {
            margin-inline: auto;
          }

          & span:last-child {
            margin-inline-start: 3px;
          }

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

    /* ==== .nav ==== */
    .nav {
      grid-row: 1/ 4;
      grid-column: 2 / 3;
      block-size: fit-content;
      padding-block-start: 7px;
      padding-inline-start: 25px;
      margin-block: calc((1em - 1lh) / 2);
      margin-block-end: 0;

      @media (width <= 768px) {
        inline-size: 100%;
        padding-block-start: 13.6vw;
        padding-inline-start: 0;
        text-align: center;
      }

      & ul {
        display: block grid;
        gap: 10px;
        font-size: 15px;
        font-weight: 500;

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

          & a {
            display: block flex;
            gap: 0;
            align-items: baseline;
            justify-content: center;
            padding-block: 1.3vw;
          }
        }
      }
    }

    /* ==== .sub-nav ==== */
    .sub-nav {
      display: block grid;
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      grid-row: 1/ 4;
      grid-column: 3 / 4;
      gap: 10px;
      block-size: fit-content;
      padding-block-start: 5px;
      margin-block: calc((1em - 1lh) / 2);
      margin-inline: auto 0;
      font-size: 13px;
      font-weight: 400;
      color: var(--gray);

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

        a {
          display: block flow;
          inline-size: 100%;
          padding-block: 1.1vw;
        }
      }
    }

    /* ==== .anchor ==== */
    .anchor {
      display: block flex;
      grid-row: 3 / 4;
      grid-column: 2 / 4;
      gap: 10px;
      padding-inline-end: 2px;

      @media (width <= 768px) {
        flex-direction: column;
        gap: 4.1vw;
        padding-inline-end: 0;
        margin-block-start: 1vw;
      }
    }
  }

  /* ==== copyright ==== */
  .copyright {
    display: block flow;
    inline-size: fit-content;
    padding-block: 18px 20px;
    margin-block: calc((1em - 1lh) / 2);
    margin-inline: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray);
    letter-spacing: 1.2px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 18 * 1vw) calc((100 / 390) * 20 * 1vw);
      font-size: calc((100 / 390) * 12 * 1vw);
      letter-spacing: calc((100 / 390) * 1.2 * 1vw);
    }
  }
}