@charset "UTF-8";

/* =====================
  footer
===================== */
@layer style {
  .footer {
    position: relative;
    padding-block-start: 64px;
    padding-block-end: 24px;

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

    .u-inner {
      .footer_wrap {
        display: block grid;
        align-items: start;
        grid-template-columns: max-content auto;
        justify-content: space-between;

        @media (width <=768px) {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(4, auto);
          column-gap: 0;
          row-gap: 0;
          padding-inline-end: 0;
        }

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

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

          &>ul {
            text-align: center;
            font-weight: 500;
            display: block grid;
            grid-template-columns: repeat(6, max-content);
            block-size: 100%;
            column-gap: 64px;
            row-gap: 8px;

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

            &>li {
              position: relative;

              .u-hover {
                position: relative;
                display: block grid;
                inline-size: 100%;
                block-size: inherit;
                font-weight: 500;

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

                &::before {
                  content: attr(data-text);
                  background: linear-gradient(255.87deg, #d2d200 -8.93%, #007635 37.32%, #18562a 83.58%);
                  font-size: 13px;
                  font-weight: 500;
                  line-height: 1.2;
                  -webkit-background-clip: text;
                  background-clip: text;
                  -webkit-text-fill-color: transparent;
                  text-align: left;
                }

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

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

          @media (width <=768px) {
            grid-area: 1/1/2/2;

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

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

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

          .pdf-btn {
            inline-size: fit-content;
            margin-block-start: 15px;

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

        .sub-nav {
          grid-area: 2/2/3/3;
          display: block flex;
          align-items: center;
          justify-content: flex-end;
          gap: 64px;
          margin-block-start: 130px;

          @media (width <=768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 76 * 1vw);
            flex-direction: column;
            justify-content: center;
            gap: calc((100 / 390) * 25 * 1vw);
          }

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

          &>ul {
            display: block flex;
            justify-content: center;
            gap: 64px;
            font-size: 12px;
            color: #797979;

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

    .foot {
      border-top: 1px solid #b8b8b8;
      margin-block-start: 54px;

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

      .copyright {
        display: block flow;
        padding-block-start: 18px;
        font-size: 12px;
        text-align: right;
        color: #848484;
        opacity: 0.6;

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