@charset "UTF-8";

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

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

    .footer_wrap {
      margin-inline: 120px;
      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) * 60 * 1vw);
        justify-content: start;
      }

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

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

        & > ul {
          display: block grid;
          grid-template-columns: repeat(5, max-content);
          column-gap: 64px;

          @media only screen and (width <= 768px) {
            grid-template-columns: repeat(3, max-content);
            justify-content: center;
            gap: calc((100 / 390) * 44 * 1vw) calc((100 / 390) * 40 * 1vw);
          }

          .head {
            position: relative;
            font-weight: 500;
            line-height: 1.4;
            color: var(--primary);

            &::before {
              content: attr(data-text);
              display: block flow;
              font-family: var(--title);
              font-size: 14px;
              font-weight: 400;
              line-height: 1.1;
              background: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
              letter-spacing: normal;
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
              margin-block-end: 8px;
            }

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

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

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

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

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

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

          .list {
            @media only screen and (width <= 768px) {
              padding-inline: calc((100 / 390) * 52 * 1vw) calc((100 / 390) * 24 * 1vw);
            }

            .item {
              display: block grid;
              grid-template-columns: 42px max-content;
              column-gap: 32px;
              align-items: start;

              @media only screen and (width <= 768px) {
                grid-template-columns: calc((100 / 390) * 42 * 1vw) 1fr;
                column-gap: calc((100 / 390) * 32 * 1vw);
              }

              .title {
                font-size: 14px;
                font-weight: 500;
                color: var(--primary);

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

              .unit {
                line-height: 1.5;
              }

              &[data-id='2'] {
                margin-block-start: 16px;

                @media (width <=768px) {
                  margin-block-start: calc((100 / 390) * 8 * 1vw);
                }
              }
            }
          }
          .unit[data-id='tel'] {
            margin-block-start: 14px;
            margin-inline-start: 72px;

            @media only screen and (width <= 768px) {
              margin-block-start: calc((100 / 390) * 17 * 1vw);
              margin-inline-start: calc((100 / 390) * 124 * 1vw);
            }
          }
        }
      }

      .pdf-btn {
        display: block flow;
        margin-block-start: 36px;
        padding-inline: 40px 85px;

        @media only screen and (width <=768px) {
          margin-block-start: calc((100 / 390) * 23 * 1vw);
          margin-inline: auto;
          padding-inline: calc((100 / 390) * 32 * 1vw) calc((100 / 390) * 76 * 1vw);

          .u-text-gradation {
            font-size: calc((100 / 390) * 15 * 1vw);
          }
        }

        &::after {
          inline-size: 21px;
          aspect-ratio: 21 / 17;
          background-image: url('../img/_common/icon_download.svg');
        }
      }
      @media (any-hover: hover) {
        .pdf-btn:hover {
          &::after {
            filter: unset;
            top: 54%;
            right: 40px;
          }
        }
      }
    }

    .foot {
      grid-area: 2/2/3/3;
      block-size: 100%;
      display: block grid;
      grid-template-rows: auto max-content;
      justify-items: end;
      align-items: end;

      @media only screen and (width <=768px) {
        grid-area: 3/1/4/2;
        block-size: unset;
        padding-inline: calc((100 / 390) * 16 * 1vw);
        display: block flow;
        align-items: center;
        justify-items: center;
      }

      .sub-nav {
        position: relative;
        display: block flex;
        align-items: flex-end;
        gap: 48px;

        @media only screen and (width <= 768px) {
          flex-direction: column;
          align-items: center;
          gap: calc((100 / 390) * 24 * 1vw);
        }

        .sdgs-bnr {
          .u-hover {
            @media only screen and (width <= 768px) {
              & img {
                inline-size: calc((100 / 390) * 177 * 1vw);
              }
            }
          }
        }

        & > ul {
          display: block flex;
          gap: 48px;
          font-size: 12px;
          color: #797979;

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

      .copyright {
        display: block flow;
        font-family: var(--title);
        font-size: 12px;
        color: #848484;
        line-height: 1;
        margin-block-start: 35px;

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

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

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

    &::before {
      content: '';
      position: absolute;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/recruit/_common/footer_r.png');
      inline-size: 161px;
      block-size: 140px;
      pointer-events: none;
      top: -46px;
      right: 0;
      z-index: -1;
    }

    @media only screen and (width <= 768px) {
      &::before {
        background-image: url('../img/recruit/_common/footer_r_2x.png');
        inline-size: calc((100 / 390) * 178 * 1vw);
        block-size: calc((100 / 390) * 139.5 * 1vw);
        top: calc((100 / 390) * -48 * 1vw);
      }
    }

    &::after {
      content: '';
      position: absolute;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/recruit/_common/footer_l.png');
      inline-size: 427px;
      block-size: 166px;
      pointer-events: none;
      bottom: 0;
      left: 0;
    }

    @media only screen and (width <= 768px) {
      &::after {
        background-image: url('../img/recruit/_common/footer_l_2x.png');
        inline-size: calc((100 / 390) * 211 * 1vw);
        block-size: calc((100 / 390) * 98 * 1vw);
      }
    }

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

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

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

        @media only screen and (width <=768px) {
          grid-area: 2/1/3/2;
          margin-block-start: 0;
        }

        & > ul {
          display: block grid;
          grid-template-columns: repeat(6, max-content);
          column-gap: 56px;

          @media only screen and (width <= 768px) {
            display: block flex;
            flex-wrap: wrap;
            justify-content: center;
            column-gap: calc((100 / 390) * 32 * 1vw);
            row-gap: calc((100 / 390) * 26 * 1vw);
          }

          .head {
            position: relative;
            font-weight: 500;
            line-height: 1.4;
            color: var(--primary);
          }
        }
      }

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

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

        & img {
          display: block flow;
          inline-size: 263px;

          @media (width <=768px) {
            inline-size: calc((100 / 390) * 263 * 1vw);
            margin-inline: auto;
            & img {
              display: block flow;
              inline-size: calc((100 / 390) * 263 * 1vw);
              margin-inline: auto;
            }
          }
        }
      }
      /* ==== sub-nav Copyright ==== */
      .foot {
        grid-area: 2/2/3/3;
        block-size: 100%;
        display: block grid;
        grid-template-rows: auto max-content;
        justify-items: end;
        align-items: end;

        @media only screen and (width <=768px) {
          grid-area: 3/1/4/2;
          block-size: unset;
          margin-block-start: calc((100 / 390) * 21 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          align-items: center;
          justify-items: center;
        }

        .sub-nav {
          position: relative;
          display: block flex;
          align-items: flex-end;
          gap: 48px;

          @media only screen and (width <= 768px) {
            align-items: center;
            gap: calc((100 / 390) * 32 * 1vw);
          }

          & > ul {
            display: block flex;
            gap: 48px;
            font-size: 12px;
            color: #b7b7b7;

            @media only screen and (width <=768px) {
              font-size: calc((100 / 390) * 11 * 1vw);
              justify-content: center;
              gap: calc((100 / 390) * 40 * 1vw);
            }

            & li {
              .u-hover {
                &::after {
                  content: '';
                  display: inline-block;
                  background-repeat: no-repeat;
                  background-size: contain;
                  background-position: center;
                  background-image: url('../img/recruit/_common/link_icon.svg');
                  inline-size: 9px;
                  aspect-ratio: 1/1;
                  margin-inline-start: 8px;
                }

                @media only screen and (width <= 768px) {
                  &::after {
                    inline-size: calc((100 / 390) * 9 * 1vw);
                    margin-inline-start: calc((100 / 390) * 8 * 1vw);
                  }
                }
              }
            }
          }
        }

        .copyright {
          display: block flow;
          font-family: var(--title);
          font-size: 12px;
          color: rgba(132, 132, 132, 0.6);
          line-height: 1;
          margin-block-start: 17px;

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