@charset "utf-8";
/* CSS Document */
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
お問い合わせ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.footer_contact_wrap {
  padding-bottom: 0.5rem;
  margin-top: 20rem;
  @media screen and (max-width: 480px) {
    padding-bottom: 0;
    margin-top: 10rem;
  }
  .inner {
    z-index: 10;

    position: relative;
    margin: auto;
    @media screen and (max-width: 768px) {
      max-width: 480px;
    }
    .title_copy_wrap {
      display: flex;
    }
    /* お問い合わせテキスト */
    .contact_copy_tel_wrap {
      display: flex;
      margin-bottom: 3.8rem;
      justify-content: space-between;
      @media screen and (max-width: 1024px) {
        flex-direction: column;
      }

      /* タイトル */
      .title_wrap {
        padding-top: 0.8rem;
        @media screen and (max-width: 1024px) {
          padding-top: 0;
          margin-bottom: 2.6rem;
        }
      }
      .copy_tel_wrap {
        p {
          font-size: 1.6rem;
          line-height: 1.85;
          font-weight: 700;
          margin-bottom: 0.7rem;
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
            margin-bottom: 1em;
          }
        }
        .tel_wrap {
          display: flex;
          font-weight: 600;
          gap: 3rem;
          letter-spacing: 1px;
          @media screen and (max-width: 768px) {
            flex-direction: column;
            align-items: center;
            gap: 0.9rem;
          }
          .tel {
            font-size: 5.3rem;
            margin-left: 0.2em;
            @media screen and (max-width: 768px) {
              font-size: 3.75rem;
              margin-left: 0;
            }
          }
          .fax {
            padding-top: 1.6rem;
            font-size: 2.4rem;
            @media screen and (max-width: 768px) {
              font-size: 2.4rem;
              padding-top: 0;
            }
          }
        }
      }
    }
    /* お問い合わせ一覧 */
    .list_contact {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 0.5rem;
      grid-row-gap: 0px;
      width: 100%;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 10px;
      }
      li {
        /* grig */
        &.div1 {
          grid-area: 1 / 1 / 2 / 2;
        }
        &.div2 {
          grid-area: 1 / 2 / 2 / 3;
        }
        &.div3 {
          grid-area: 1 / 3 / 2 / 4;
        }
        @media screen and (max-width: 768px) {
          &.div1 {
            grid-area: 1 / 1 / 2 / 2;
          }
          &.div2 {
            grid-area: 2 / 1 / 3 / 2;
          }
          &.div3 {
            grid-area: 3 / 1 / 4 / 2;
          }
        }
        background-color: #fff;
        border-radius: 0.8rem;
        overflow: hidden;
        a {
          display: block;
          width: 100%;
          aspect-ratio: 380/320;
          box-sizing: border-box;
          padding: 14.7rem 4rem 4rem;
          position: relative;
          @media screen and (max-width: 768px) {
            padding: 6.4rem 2.9rem 0;
            aspect-ratio: auto;
            height: 17rem;
          }
          h4 {
            font-size: 2rem;
            letter-spacing: 0.036em;
            font-weight: 500;
            margin-bottom: 4.7rem;
            line-height: 1.75;
            @media screen and (max-width: 768px) {
              margin-bottom: 0.9rem;
            }
          }
          /* アイコン */
          &::before {
            content: "";
            position: absolute;
            display: block;
            top: 6.5rem;
            left: 4rem;
            background-repeat: no-repeat;
            background-size: contain;
          }
          &.oem {
            &::before {
              width: 4.7rem;
              aspect-ratio: 47/78;
              background-image: url(../img/common/icon-oem.svg);
              transform: translateX(8.5%);
            }
          }
          &.shop {
            &::before {
              width: 4.9rem;
              aspect-ratio: 1/1;
              background-image: url(../img/common/icon-shop.svg);
              transform: translate(12.2%, -2%);
            }
          }
          &.individual {
            &::before {
              width: 6.6rem;
              aspect-ratio: 66/47;
              background-image: url(../img/common/icon-individual.svg);
            }
          }

          @media screen and (max-width: 768px) {
            &::before {
              top: 2.5rem;
              left: 2.9rem;
            }
            &.oem {
              &::before {
                width: 3.2rem;
                transform: none;
              }
            }
            &.shop {
              &::before {
                width: 3rem;
                transform: none;
              }
            }
            &.individual {
              &::before {
                width: 4.1rem;
              }
            }
          }
          /* 丸矢印 */
          .yajirushi-maru {
            height: 3.2rem;
            &::before {
              height: 100%;
              aspect-ratio: 1/1;
              border: 1px solid #cbcbcb;
              border-radius: 9999px;
              background-image: url(../img/common/icon-yajirushi-long-green.svg);
              background-repeat: no-repeat;
              background-position: center center;
              background-size: 1.2rem auto;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
            span {
              position: absolute;
              left: 4.2rem;
              top: 50%;
              display: inline-block;
              padding-bottom: 0.1em;
              transform: translateY(-50%);
              font-size: 1.5rem;
              letter-spacing: 3.5%;
              font-weight: 500;
              line-height: 1.5;
              @media screen and (max-width: 768px) {
                font-size: 1.3rem;
              }
            }
          }
          &:hover {
            background-color: var(--color-green-hover);
            color: #fff;
            &.oem {
              &::before {
                background-image: url(../img/common/icon-oem-white.svg);
              }
            }
            &.shop {
              &::before {
                background-image: url(../img/common/icon-shop-white.svg);
              }
            }
            &.individual {
              &::before {
                background-image: url(../img/common/icon-individual-white.svg);
              }
            }
            .yajirushi-maru {
              &::before {
                border-color: #fff;
                background-image: url(../img/common/icon-yajirushi-long-white.svg);
              }
            }
          }
        }
      }
    }
  }
}
/* フッタ写真 */
.footer_img_wrap {
  margin-top: -9.5rem;
  position: relative;
  z-index: 5;
  height: 47.9rem;
  background-image: url(../img/common/footer_img.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  @media screen and (max-width: 768px) {
    margin-top: -5.6rem;
    height: 32.8rem;
  }
  h3 {
    position: absolute;
    font-size: 9.4rem;
    letter-spacing: 0.01em;
    font-weight: 600;
    bottom: -0.125em;
    left: 3.82vw;
    @media screen and (max-width: 768px) {
      left: 0;
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
フッター
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
footer#glo_footer {
  padding: 0 2.6rem;
  @media screen and (max-width: 480px) {
    padding-bottom: 7.2rem;
  }
  .footer_inner {
    padding-top: 6.6rem;
    border-top: 1px solid #000;
    position: relative;
    @media screen and (max-width: 480px) {
      border-top: none;
    }
    /*--------------------*/
    /* ロゴ */
    .footer_logo {
      width: 8rem;
    }

    /*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
    /* フッタメニュー */

    .footer_nav_wrap {
      border-top: 1px solid #000;
      margin: auto;
      padding: 6.6rem 3.9rem 0;
      position: relative;
      @media screen and (max-width: 1200px) {
        padding: 6.6rem 0 4.2rem;
      }
      h3 {
        font-size: 1.3rem;
        letter-spacing: 0.115em;
        font-weight: 700;
        margin-bottom: 6.6rem;
      }
      nav.sitemap_menu_wrap {
        position: relative;
        a {
          color: var(--color-base);
        }
        ul.sitemap_menu {
          display: grid;
          display: grid;
          grid-template-columns: repeat(4, auto);
          grid-template-rows: repeat(2, auto);
          grid-column-gap: min(7.5%, 6.8rem);
          grid-row-gap: 6.8rem;
          justify-content: start;

          .div1 {
            grid-area: 1 / 1 / 2 / 2;
          }
          .div2 {
            grid-area: 1 / 2 / 2 / 3;
          }
          .div3 {
            grid-area: 1 / 3 / 2 / 4;
          }
          .div4 {
            grid-area: 2 / 1 / 3 / 2;
          }
          .div5 {
            grid-area: 2 / 2 / 3 / 3;
          }
          .div6 {
            grid-area: 2 / 3 / 3 / 5;
          }
          .div7 {
            grid-area: 1 / 4 / 2 / 5;
          }

          .menu-item {
            width: auto;

            h5 {
              font-size: 1.7rem;
              line-height: 1.5;
              font-weight: 700;
              margin-bottom: 0.9rem;
            }
            &.menu-item-has-children {
              h5 {
                margin-bottom: 2.2rem;
              }
              ul {
                li {
                  font-weight: 500;
                  font-size: 1.5rem;
                  line-height: 1.5;
                  margin-bottom: 0.9rem;
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
          }
        }
        .sub_menu {
          margin-top: 4.8rem;
          display: flex;
          font-size: 1.5rem;
          line-height: 1.5;
          gap: 1em;
        }
      }
    }
    .address_wrap {
      position: absolute;
      bottom: 0.5rem;
      right: 11.8rem;
      @media screen and (max-width: 1200px) {
        position: static;
        text-align: right;
      }
      @media screen and (max-width: 480px) {
        .footer_logo {
          width: 5.9rem;
          margin: 0 auto 1.9rem;
        }
      }
      address {
        line-height: 1.5;
        font-style: normal;
        @media screen and (max-width: 480px) {
          text-align: center;
        }
        h4 {
          font-size: 1.7rem;
          @media screen and (max-width: 480px) {
            font-size: 1.4rem;
          }
        }
        p {
          font-size: 1.5rem;
          @media screen and (max-width: 480px) {
            font-size: 1.2rem;
          }
        }
      }
    }
  }
  /*--------------------*/
  /* 著作権表記 */
  .copyright {
    font-size: 1.5rem;
    line-height: 1.5;
    border-top: 1px solid #000;
    margin: 4.2rem auto 0.6rem;
    letter-spacing: 0.05em;
    padding-top: 3.9rem;
    padding-left: 3rem;
    @media screen and (max-width: 1200px) {
      padding-left: 0;
    }
    @media screen and (max-width: 480px) {
      margin: 5.1rem auto 1.3rem;
      padding: 0;
      border: none;
      text-align: center;
      font-size: 1.2rem;
    }
  }
}

/* スマホのみ表示のお問い合わせ */
#sp_otoiawase {
  &.sp_otoiawase_wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(249, 248, 244, 0.8);
    z-index: 100;
    display: flex;
    gap: 1.1rem;
    justify-content: center;
    align-items: center;
    padding: 1.4rem 0;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    &.on {
      transform: translateY(0);
    }
    .tel_wrap {
      .tel {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 0.05em;
      }
    }
    .button_wrap {
      .button {
        background-color: var(--color-green);
        color: #fff;
        padding: 1.6rem 3.4rem 1.6rem 1.1rem;
        span {
          font-size: 1.2rem;
          font-weight: 700;
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          width: 2rem;
          height: 2rem;
          border-radius: 999px;
          background-image: url(../img/common/icon-yajirushi-thick-green.svg);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 1.2rem 0.8rem;
          background-color: #fff;
          right: 0.9rem;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}