/* TODO: このファイルを更新したら、wordpress側も更新する */

.custom-footer-wrapper {
  @media screen and (max-width: 768px) {
    padding-inline: 0;
  }
}

.custom-footer {
  background: var(--mymoods-blue);
  color: white;
  border-radius: 10px;
  padding: 60px;
  position: relative;
  z-index: 3;

  @media screen and (max-width: 768px) {
    padding: 40px 36px;
    border-radius: 0;
  }

  .custom-footer__flex-container {
    display: flex;
    gap: 60px;
    margin-bottom: 50px;

    @media screen and (max-width: 768px) {
      flex-direction: column-reverse;
    }

    .custom-footer__logos {
      width: 330px;

      @media screen and (max-width: 1200px) {
        width: 240px;
      }

      @media screen and (max-width: 768px) {
        width: 100%;
      }

      .custom-footer__logos--top {
        width: 100%;

        @media screen and (max-width: 768px) {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 40px;
        }

        .custom-footer__logos--vape {
          margin-bottom: 18px;

          @media screen and (max-width: 768px) {
            width: 50%;
            max-width: 300px;
            margin-bottom: 0;
          }

          .vape-person {
            display: block;
            width: 100%;
            object-fit: contain;
          }
        }

        .custom-footer__logos--main {
          display: flex;
          justify-content: center;
          margin-bottom: 60px;

          @media screen and (max-width: 768px) {
            flex: 1;
            width: 50%;
            margin-bottom: 0;
          }

          svg {
            color: var(--mymoods-beige);
          }
        }
      }

      .custom-footer__social-icons {
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 48px;
        flex-wrap: wrap;

        @media screen and (max-width: 768px) {
          justify-content: center;
        }

        .custom-footer__social-icons--item {
          width: 40px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;

          .link {
            color: var(--mymoods-beige);
            padding: 0;
            margin: 0;
            width: 100%;
            cursor: pointer;
            display: block;

            .svg-wrapper {
              width: 40px;
              height: 40px;
            }
          }
        }
      }
    }

    .custom-footer__links {
      flex: 1;

      .custom-footer__right--top-flex {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 40px;

        @media screen and (max-width: 768px) {
          flex-direction: column;
          align-items: flex-start;
          gap: 0;
          margin-bottom: 48px;
        }

        .custom-footer__menu-header {
          font-size: 24px;
        }
      }

      .custom-footer__main--wrapper {
        display: grid;
        grid-template-columns: repeat(5, minmax(0px, 1fr));
        margin-bottom: 24px;

        @media screen and (max-width: 1400px) {
          grid-template-columns: repeat(2, minmax(0px, 1fr));
        }

        .custom-footer__main--section {
          width: auto;

          @media screen and (max-width: 768px) {
          }

          .custom-footer__menu-header {
            font-size: 24px;
            margin-bottom: 16px;
          }

          .custom-footer__main--list {
            padding: 0;
            margin: 0 0 30px;
            list-style: none;

            .custom-footer__main--list-item {
              color: white;
              font-family: var(--mymoods-font-poppins), sans-serif;
              font-weight: var(--mymoods-font-weight-bold);
              font-size: 16px;
              margin-bottom: 12px;

              .custom-footer__main--link {
                color: white;
                text-decoration: none;
                line-height: 1.4;
                display: block;
              }
            }
          }

          &.flavors {
            grid-column: span 2;

            .custom-footer__main--list {
              display: grid;
              grid-template-columns: repeat(2, minmax(160px, 1fr));
              column-gap: 6px;
            }
          }
        }
      }

      .custom-footer__fixed-pages-menu {
        display: flex;
        column-gap: 24px;
        row-gap: 12px;
        flex-wrap: wrap;

        @media screen and (max-width: 768px) {
          flex-direction: column;
        }

        .custom-footer__fixed-pages-menu--link {
          font-weight: 900;
          font-size: 14px;
          color: white;
          text-decoration: none;
        }
      }

      .custom-footer__bottom--flex {
        padding-top: 40px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 30px;

        @media screen and (max-width: 768px) {
          flex-direction: column-reverse;
          gap: 24px;
        }

        .custom-footer__menu-header {
          font-size: 22px;
          margin-bottom: 16px;
        }

        .custom-footer__bottom--payment-methods {
          .list-payment {
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            list-style: none;

            @media screen and (max-width: 768px) {
              gap: 6px;
            }

            .list-payment__item {
              width: 70px;
              display: flex;
              justify-content: center;
              align-items: center;

              @media screen and (max-width: 768px) {
                width: 48px;
              }

              svg {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
          }
        }

        .custom-footer__bottom--delivery {

          .list-delivery {
            display: flex;
            gap: 20px;
            list-style: none;
            padding: 0;
            margin: 0;
            font-family: var(--mymoods-font-poppins), sans-serif;
            font-weight: var(--mymoods-font-weight-bold);
            font-size: 16px;
          }
        }
      }
    }
  }

  .custom-footer__copyright {
    .copyright {
      font-family: var(--mymoods-font-poppins), sans-serif;
      font-weight: var(--mymoods-font-weight-bold);
      font-size: 12px;
      text-align: center;
      margin: 0;

      a {
        color: white !important;
        text-decoration: underline;
      }
    }
  }
}

.custom-footer__menu-header {
  font-family: var(--mymoods-font-poppins), sans-serif;
  font-weight: var(--mymoods-font-weight-black);
  color: var(--mymoods-beige);
  text-decoration: none;
}

/* 20241211 add */
/* 運営元情報の掲載 */
.foot-company-info{
  margin-top: 10px;
  width: 100%;
}
.foot-company-info p{
  line-height: 1.1;
}
.contact-pc-hidden {
  text-align: right;
  color: #fff;
}

.contact-pc-hidden>a {
  text-align: right;
  color: #fff;
}

.contact-sp-hidden {
  display: none;
}
.contact-sp-hidden > a{
  color:#fff;
}

@media screen and (min-width: 750px) {
  .contact-pc-hidden {
    display: none;
  }

  .contact-sp-hidden {
    display: inline-block;
  }
}
/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

.back-to-top {
  position: fixed;
  z-index: 9;
  right: 20px;
  bottom: 20px;
  visibility: hidden;
  z-index: 1000;
}

.back-to-top {
  visibility: visible;
  animation: g-back-to-top 1s both;
}

.back-to-top a {
  display: flex;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #2500C1;
  align-items: center;
  justify-content: center;
}

.arrow::before {
  content: '';
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  top: 45%;
  left: 37%;
  position: absolute;
}

@media screen and (min-width: 750px) {
  .back-to-top {
    right: 20px;
    bottom: 70px;
  }
}