@charset "UTF-8";

/* =====================
  footer
===================== */
@layer style {
  .footer {
    position: relative;
    padding-block: 80px 15px;

    @media (width <=768px) {
      padding-block-start: calc((100 / 390) * 60 * 1vw);
      padding-block-end: calc((100 / 390) * 14 * 1vw);
    }

    .footer_wrap {
      margin-inline: 80px;
      display: block grid;
      align-items: start;
      grid-template-columns: max-content auto;
      justify-content: space-between;

      @media only screen and (width <=768px) {
        margin-inline: calc((100 / 390) * 16 * 1vw);
        grid-template-columns: 1fr;
        row-gap: calc((100 / 390) * 56 * 1vw);
        justify-content: start;
      }

      /* ==== nav ==== */
      .nav {
        grid-area: 1/2/2/3;
        display: block grid;
        grid-template-columns: repeat(2, max-content);
        align-items: start;
        gap: 60px;

        @media only screen and (width <= 768px) {
          grid-area: 1/1/2/2;
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 64 * 1vw) 0;
          margin-inline: calc((100 / 390) * 16 * 1vw);
        }

        .main-nav {
          display: block grid;
          grid-template-columns: repeat(2, max-content);
          column-gap: 60px;

          @media only screen and (width <= 768px) {
            grid-template-columns: repeat(2, 1fr);
            gap: calc((100 / 390) * 11 * 1vw) calc((100 / 390) * 2 * 1vw);
          }
          & > li {
            .head {
              display: block flow;
              font-size: 15px;
              font-weight: 500;
              padding-inline-start: 20px;
              border-left: solid 1px rgba(0, 0, 0, 0.2);
              padding-block: 0 10px;

              @media only screen and (width <= 768px) {
                font-size: calc((100 / 390) * 15 * 1vw);
                padding-inline-start: calc((100 / 390) * 12 * 1vw);
                padding-block: calc((100 / 390) * 6 * 1vw);
              }
            }
            &[data-id='home'] {
              grid-area: 1/1/6/2;

              @media only screen and (width <= 768px) {
                grid-area: unset;
              }
            }
          }
        }
        .sub-nav {
          position: relative;
          border-left: solid 1px rgba(0, 0, 0, 0.2);
          padding-inline-start: 20px;

          @media only screen and (width <= 768px) {
            grid-area: 2/1/3/3;
            border: unset;
            display: block flex;
            justify-content: center;
            gap: calc((100 / 390) * 30 * 1vw);
            padding-inline-start: 0;
          }

          & > li {
            font-size: 13px;
            color: #575757;
            

            @media only screen and (width <= 768px) {
              font-size: calc((100 / 390) * 13 * 1vw);
              white-space: nowrap;
            }

            & + li {
              margin-block-start: 10px;

              @media only screen and (width <= 768px) {
                margin-block-start: 0;
              }
            }
          }
        }
      }

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

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

        .logo {
          display: block flow;
          & img {
            display: block flow;
            @media only screen and (width <= 768px) {
              inline-size: calc((100 / 390) * 210 * 1vw);
              margin-inline: auto;
            }
          }
        }

        .address {
          font-size: 14px;
          margin-block-start: 20px;

          @media only screen and (width <= 768px) {
            font-size: calc((100 / 390) * 13 * 1vw);
            margin-block-start: calc((100 / 390) * 23 * 1vw);
            text-align: center;
          }
        }
        .pdf-btn {
          margin-block-start: 20px;
          @media only screen and (width <= 768px) {
            margin-block-start: calc((100 / 390) * 23 * 1vw);
            margin-inline: auto;
          }
        }
      }
    }

    .foot {
      grid-area: 2/1/3/3;

      @media only screen and (width <=768px) {
        grid-area: 3/1/4/2;
      }
      .copyright {
        display: block flow;
        font-size: 12px;
        color: #888;
        margin-block-start: 43px;

        @media only screen and (width <=768px) {
          font-size: calc((100 / 390) * 12 * 1vw);
          margin-block-start: calc((100 / 390) * 19 * 1vw);
        }
      }
    }

    /* =====================
      to-top
    ===================== */
    .to-top {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 19;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/to_top.svg');
      inline-size: 50px;
      block-size: 50px;
      transition: all 250ms ease 0s;

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