@charset "UTF-8";
/* =====================
  footer
===================== */
@layer style {
  .footer {
    position: relative;
    padding-block-start: 48px;
    padding-block-end: 24px;

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

    .u-inner {
      padding-inline: 40px;

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

      .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: 41px;

          @media (width <= 768px) {
            grid-area: 1/1/2/2;
            margin-block-start: 0;
          }
          & > ul {
            font-weight: 500;
            display: block grid;
            grid-template-columns: repeat(3, 98px);
            block-size: 100%;
            column-gap: 72px;
            row-gap: 56px;

            @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) * 56 * 1vw);
              justify-content: center;
            }

            & > li {
              position: relative;
              .u-hover {
                position: relative;
                display: block grid;
                inline-size: 100%;
                block-size: inherit;
                font-weight: 500;
                color: var(--primary);

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

                &::before {
                  content: '';
                  background: linear-gradient(180deg, #1990bc 0%, #4ae296 100%);
                  inline-size: 6px;
                  aspect-ratio: 1/1;
                  border-radius: 2px;
                  margin-block-end: 8px;
                }
                &::after {
                  content: attr(data-text);
                  background: linear-gradient(180deg, #1990bc 0%, #4ae296 100%);
                  font-family: var(--title);
                  font-size: 12px;
                  font-weight: 500;
                  line-height: 1.1;
                  -webkit-background-clip: text;
                  background-clip: text;
                  -webkit-text-fill-color: transparent;
                  text-align: left;
                  position: absolute;
                  top: -3px;
                  left: 10px;
                }

                @media (width <= 768px) {
                  &::before {
                    inline-size: calc((100 / 390) * 6 * 1vw);
                    border-radius: calc((100 / 390) * 2 * 1vw);
                  }
                  &::after {
                    font-size: calc((100 / 390) * 12 * 1vw);
                    top: calc((100 / 390) * -3 * 1vw);
                    left: calc((100 / 390) * 10 * 1vw);
                  }
                }
              }
            }
          }
        }

        /* ==== 会社情報 ==== */
        .footer_info {
          grid-area: 1/1/3/2;
          display: block grid;
          grid-template-columns: repeat(2, max-content);
          align-items: center;
          column-gap: 64px;
          row-gap: 15px;

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
            grid-template-columns: 1fr;
            column-gap: 0;
            row-gap: 0;
            margin-block-start: calc((100 / 390) * 61 * 1vw);

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

          .address {
            grid-area: 2/1/3/2;
            font-size: 14px;
            margin-block-start: 16px;

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

          .pdf-btn {
            grid-area: 2/2/3/3;
            inline-size: fit-content;
            margin-block-start: 15px;
            /*  */

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

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

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 58 * 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: 48px;
            font-size: 12px;
            color: #797979;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 11 * 1vw);
              gap: calc((100 / 390) * 32 * 1vw);
            }
          }
        }
      }
    }
    .foot {
      border-top: 1px solid #b8b8b8;
      margin-block-start: 31px;

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

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

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