@charset "UTF-8";
/* =====================
  footer
===================== */
@layer style {
  .footer {
    position: relative;
    padding-block-start: 104px;
    padding-block-end: 64px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/_common/footer_bg.png');
    min-block-size: 676px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 32 * 1vw);
      background-image: url('../img/_common/footer_bg_2x.png');
      min-block-size: calc((100 / 390) * 908 * 1vw);
    }

    .u-inner {
      .footer_wrap {
        position: relative;
        display: block grid;
        align-items: start;
        grid-template-columns: max-content auto;
        justify-content: space-between;
        row-gap: 80px;
        padding-inline: 0 40px;
        margin-block-start: 63px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(4, auto);
          column-gap: 0;
          row-gap: 0;
          padding-inline: 0;
          margin-block-start: calc((100 / 390) * 48 * 1vw);
        }

        /* ==== nav ==== */
        .main-nav {
          grid-area: 1/2/2/3;
          margin-block-start: 20px;

          @media (width <= 768px) {
            grid-area: 1/1/2/2;
            margin-block-start: 0;
          }
          & > ul {
            font-weight: 500;
            display: block flex;
            block-size: 100%;
            column-gap: 48px;

            @media (width <= 768px) {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              column-gap: 0;
              row-gap: calc((100 / 390) * 24 * 1vw);
              justify-content: center;
              text-align: center;
            }

            & > li {
              position: relative;
              .u-hover {
                position: relative;
                inline-size: 100%;
                block-size: inherit;
                line-height: 1.9;
              }
            }
          }
        }

        /* ==== 会社情報 ==== */
        .footer_info {
          grid-area: 1/1/3/2;

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
            margin-block-start: calc((100 / 390) * 46 * 1vw);

            .logo {
              & img {
                display: block flow;
                inline-size: calc((100 / 390) * 213 * 1vw);
                margin-inline: auto;
              }
            }
          }

          .address {
            font-size: 12px;
            line-height: 1.9;
            margin-block-start: 24px;

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

            .unit + .unit {
              margin-block-start: 4px;

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

        .foot {
          grid-area: 2/1/3/3;
          display: block flex;
          flex-direction: row-reverse;
          justify-content: space-between;
          align-items: flex-end;

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
            flex-direction: column;
            align-items: center;
          }

          .sub-nav {
            display: block grid;
            justify-items: end;
            gap: 32px;
            line-height: 1;

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

            .unit {
              .u-hover {
                display: block flow;
                background-color: #fff;
                padding-inline: 16px;
                padding-block: 12px;

                @media (width <= 768px) {
                  padding-inline: calc((100 / 390) * 16 * 1vw);
                  padding-block: calc((100 / 390) * 12 * 1vw);
                  & img {
                    inline-size: calc((100 / 390) * 171 * 1vw);
                  }
                }
              }
            }

            & > ul {
              display: block flex;
              justify-content: center;
              gap: 24px;
              font-family: var(--title);
              font-size: 13px;
              color: #878787;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 12 * 1vw);
                gap: calc((100 / 390) * 24 * 1vw);
              }
            }
          }
          .copyright {
            display: block flow;
            font-family: var(--title);
            font-size: 13px;
            color: #878787;

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