/* reset css -------------------------------------*/
/* ------------------------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
p,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.p,
ul,
li,
a {
  margin: 0;
  padding: 0;
  color: initial;
  font-family: "Noto Sans JP", sans-serif;
}

h1,
h2 {
  font-size: 24px;
  font-weight: 600;
}
p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06rem;
  font-family: "Noto Sans JP", sans-serif;
}

li {
  list-style: none;
}

/* common -------------------------------------*/
/* ------------------------------------------------------------------------------*/
.pc-only {
  display: block;
  @media screen and (max-width: 768px) {
    display: none;
  }
}

.sp-only {
  display: none;

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

.title-wrapper {
  text-align: center;

  h2 {
    font-size: 24px;
    font-weight: 600;
  }
}

/* header footer -------------------------------------*/
/* ------------------------------------------------------------------------------*/

.announcement-bar__message {
  color: var(--color-add-white);
  padding: 10px 0;
  font-weight: 600;
}

header {
  max-width: 1360px;
  margin: 0 auto;

  @media screen and (max-width: 989px) {
    padding: 10px 2rem !important;
  }

  header-drawer {
    justify-self: start;
    margin-left: -1.2rem;

    .menu-drawer-container {
      display: flex;

      .list-menu {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .menu-drawer {
        height: 100vh !important;

        .menu-drawer__navigation {
          padding: 0;

          .header_sp_top_wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;

            a {
              display: flex;
              align-items: center;
              justify-content: center;
              width: calc(100% / 3);
              height: 48px;
            }

            a.login {
              border: 2px solid var(--color-add-orange);

              p {
                color: var(--color-add-orange);
                font-weight: 500;
              }
            }

            a.register {
              background-color: var(--color-add-orange);

              p {
                color: var(--color-add-white);
                font-weight: 500;
              }
            }

            a.favorites {
              border: 2px solid var(--color-add-border);

              p {
                font-weight: 500;
              }
            }
          }

          .menu-drawer__two-column {
            display: flex;
            height: 100%;

            .menu-drawer__first-column {
              width: 50%;
              border-right: 1px solid #e0e0e0;

              .menu-drawer__menu-item {
                cursor: pointer;
                padding: 15px 10px;
                border-bottom: 1px solid #f0f0f0;
                transition: background-color 0.3s ease;
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-decoration: none;
                height: 50px;

                span {
                  font-size: 14px;
                  font-weight: 700;
                }

                .menu-drawer__first-column-arrow {
                  width: 10px;
                  height: 6px;
                  transform: rotate(-90deg);
                  flex-shrink: 0;

                  svg {
                    width: 10px;
                    height: 6px;
                  }

                  .icon-caret {
                    display: block !important;
                  }
                }
              }
            }

            .menu-drawer__second-column {
              width: 50%;
              min-height: 100rem;

              .menu-drawer__second-column-content {
                display: none;

                &.active {
                  display: block;
                }

                .menu-drawer__accordion-item {
                  border-bottom: 1px solid #e0e0e0;

                  .menu-drawer__accordion-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 12px 10px;
                    background-color: #f8f8f8;
                    transition: background-color 0.3s ease;
                    height: 49px;

                    a {
                      flex: 1;
                      text-decoration: none;
                      padding: 0;
                      border: none;
                      font-size: 14px;
                      font-weight: 700;
                    }

                    .menu-drawer__accordion-arrow {
                      transition: transform 0.3s ease;
                      display: inline-flex;
                      align-items: center;
                      justify-content: center;
                      width: 30px;
                      height: 30px;
                      cursor: pointer;
                      background-color: #e8e8e8;
                      border-radius: 4px;
                      position: relative;

                      &.rotated {
                        transform: rotate(180deg);
                      }

                      svg {
                        position: absolute;
                        width: 10px;
                        height: 6px;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                      }
                    }
                  }

                  .menu-drawer__accordion-content {
                    max-height: 0;
                    overflow: hidden;
                    padding: 0 10px;
                    transition: max-height 0.3s ease-in-out,
                      padding 0.3s ease-in-out;

                    &.active {
                      max-height: 100%;
                      padding: 0;
                      overflow-y: auto;

                      @media screen and (max-width: 767px) {
                        max-height: 100%;
                        padding: 0;
                        overflow-y: auto;
                      }
                    }

                    a {
                      display: block;
                      padding: 11px 15px;
                      border-bottom: 1px solid var(--color-add-gray);
                      text-decoration: none;
                      transition: background-color 0.3s ease;
                      font-size: 13px;

                      &:last-child {
                        border-bottom: none;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .header-wrapper--border-bottom {
    border: none;
  }

  .header__menu-item {
    padding: 30px 15px;

    span {
      font-size: 14px;
      font-weight: 700;
      color: var(--color-add-black);
    }
  }

  ul.list-menu {
    li.mega-menu-item {
      &:first-child {
        li.mega-menu__link--wrapper {
          &:first-child {
            width: 45% !important;

             @media screen and (max-width: 1200px) {
                width: 15% !important;
             }
          }
        }
      }
      .mega-menu__content {
        top: 77px;
        background-color: var(--color-add-bg);
        z-index: 9999;

        ul.mega-menu__list {
          display: flex;
          justify-content: space-between;
          gap: 20px;

          li.mega-menu__link--wrapper {
            width: 15%;

            &:first-child{
              .list-unstyled {
                height: 330px;

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

            .mega-menu__link--level-2 {
              border-bottom: 1px solid var(--color-add-header-border);
              padding: 0 0 20px;
              margin: 0 0 20px;
              width: 100%;
              color: var(--color-add-black);
              opacity: 0.75;
            }

            .list-unstyled {
              display: flex;
              flex-direction: column;
              flex-wrap: wrap;
              height: 360px;

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

            .mega-menu__link--level-3 {
              padding: 10px 0;
              color: var(--color-add-black);
              opacity: 0.75;
            }
          }
        }
      }
    }
  }

  .list-menu--inline {
    display: inline-flex;
    flex-wrap: wrap;

    summary.list-menu__item {
      padding-right: 2.7rem;
    }

    .list-menu__item {
      display: flex;
      align-items: center;
      line-height: calc(1 + 0.3 / var(--font-body-scale));

      &:hover {
        background-color: var(--color-add-bg);
      }
    }

    .mega-menu[open] > summary.list-menu__item {
      background-color: var(--color-add-bg);
    }
  }

  .customer-account-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 10px 0 0;

    @media screen and (max-width: 1250px) {
      gap: 25px;
      margin: 0 20px 0 0;
    }

    @media screen and (max-width: 989px) {
      margin: 0 10px 0 0;
    }

    a {
      text-decoration: none;
      color: var(--color-add-white);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 140px;
      height: 40px;
      border-radius: 4px;
      position: relative;

      @media screen and (max-width: 1250px) {
        width: 20px;
        height: 20px;
      }
    }

    .my-page-link {
      position: relative;

      @media screen and (max-width: 989px) {
        top: -5px;
      }

      &::after {
        @media screen and (max-width: 989px) {
          content: "ログイン";
          position: absolute;
          right: 0;
          top: 21px;
          left: -5px;
          width: 45px;
          text-align: center;
          font-size: 8px;
          font-weight: 600;
        }
      }
      a {
        background-color: var(--color-add-white);
        border: 2px solid var(--color-add-orange);
        transition: all 0.3s;

        @media screen and (max-width: 1250px) {
          background: none;
          border: none;
        }

        &::before {
          position: absolute;
          left: 8px;
          content: "";
          display: inline-block;
          width: 18px;
          height: 20px;
          background-image: url(../assets/add-login-orange.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 18px 20px;
          margin-right: 8px;

          @media screen and (max-width: 1250px) {
            filter: brightness(0);
          }

          @media screen and (max-width: 989px) {
            filter: brightness(1);
          }
        }

        &:hover {
          background-color: var(--color-add-orange);

          @media screen and (max-width: 1250px) {
            background-color: var(--color-add-white);
          }

          &::before {
            filter: brightness(10);

            @media screen and (max-width: 1250px) {
              filter: brightness(0);
              transform: scale(1.1);
            }

            @media screen and (max-width: 989px) {
              filter: brightness(1);
            }
          }

          p {
            color: var(--color-add-white);
          }
        }

        p {
          font-size: 14px;
          margin: 0;
          font-weight: 500;
          padding: 0 0 0 15px;
          color: var(--color-add-orange);

          @media screen and (max-width: 1250px) {
            display: none;
          }
        }
      }
    }

    .register-link {
      @media screen and (max-width: 989px) {
        display: none;
      }

      a {
        background-color: var(--color-add-orange);
        border: 2px solid var(--color-add-orange);
        transition: all 0.3s;

        @media screen and (max-width: 1250px) {
          background: none;
          border: none;
        }

        &::before {
          position: absolute;
          left: 8px;
          content: "";
          display: inline-block;
          width: 19px;
          height: 20px;
          background-image: url(../assets/add-account-orange.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 19px 20px;
          margin-right: 8px;
          filter: brightness(10);

          @media screen and (max-width: 1250px) {
            filter: brightness(0);
          }
        }

        &:hover {
          background-color: var(--color-add-white);

          @media screen and (max-width: 1250px) {
            background-color: var(--color-add-white);
          }

          &::before {
            filter: brightness(1);

            @media screen and (max-width: 1250px) {
              filter: brightness(0);
              transform: scale(1.1);
            }
          }

          p {
            color: var(--color-add-orange);
          }
        }

        p {
          font-size: 14px;
          margin: 0;
          font-weight: 500;
          padding: 0 0 0 23px;
          color: var(--color-add-white);

          @media screen and (max-width: 1250px) {
            display: none;
          }
        }
      }
    }
  }

  .header__icon--heart {
    @media screen and (max-width: 989px) {
      display: none !important;
    }

    .icon {
      width: 20px;
      height: 20px;
    }
  }

  .header__icon--cart {
    position: relative;

    @media screen and (max-width: 989px) {
      top: -5px;
    }

    &::after {
      @media screen and (max-width: 989px) {
        content: "カート";
        position: absolute;
        right: 0;
        top: 33px;
        left: 54%;
        width: 30px;
        text-align: center;
        transform: translateX(-50%);
        font-size: 8px;
        font-weight: 600;
      }
    }

    .icon {
      width: 22px;
      height: 22px;
    }
  }
}

.header__search-bar-container {
  background-color: var(--color-add-gray);
  padding: 10px 0;

  .header__search-always-visible {
    max-width: 600px;
    margin: 0 auto;

    .search-form {
      display: flex;
      width: 100%;

      .field {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;

        &::before,
        &::after {
          content: none;
        }

        .search__input {
          width: 100%;
          padding: 20px 50px 12px 16px;
          border: 1px solid var(--color-add-white);
          border-radius: 4px;
          font-size: 16px;
          background-color: var(--color-add-white);
          height: 50px;
          font-weight: 600;
          transition: all 0.3s;

          &:focus {
            border: 1px solid var(--color-add-blue);
          }
        }

        .search__button {
          position: absolute;
          right: 4px;
          background: none;
          border: none;
          cursor: pointer;
          padding: 8px;
          border-radius: 4px;
          top: 50%;
          transform: translateY(-50%);

          &:hover {
            background-color: #f8f9fa;
          }
        }

        .reset__button {
          position: absolute;
          right: 45px;
          top: 50%;
          transform: translateY(-50%);
          background: none;
          border: none;
          cursor: pointer;
          padding: 4px;
        }

        .field__label {
          position: absolute;
          left: 15px;
          opacity: 1;
          font-size: 14px;
          font-weight: 600;
          color: #878787;
          top: 50%;
          transform: translateY(-50%);
        }

        .field__input:focus ~ .field__label,
        .field__input:not(:placeholder-shown) ~ .field__label {
          top: 10px !important;
          font-size: 10px;
          color: var(--color-add-gray);
        }
      }
    }
  }
}

footer {
  div:empty {
    display: block !important;
  }
  .footer-top-wrapper {
    background-color: var(--color-add-bg);

    .footer-inner {
      display: flex;
      justify-content: space-between;
      max-width: 1460px;
      padding: 50px;
      margin: 0 auto;

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

      .footer-content {
        width: 30%;

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

        .icon-wrapper {
          display: flex;
          align-items: center;

          svg {
            color: var(--color-add-blue);
          }

          h3 {
            padding: 0 0 0 10px;
            font-size: 20px;
            font-weight: 600;
          }
        }

        h4 {
          margin: 20px 0 0;
          font-size: 14px;
          font-weight: 600;

          span.blue-text {
            font-weight: 600;
            color: var(--color-add-blue);
          }
        }

        .text-content {
          margin: 30px 0 0 15px;

          p {
            margin: 15px 0 0;
            font-size: 13px;
            font-weight: 400;
          }

          .blue-text {
            font-weight: 600;
            position: relative;
            color: var(--color-add-blue);
            font-weight: 600;

            &::before {
              position: absolute;
              top: 50%;
              left: -15px;
              display: inline-block;
              width: 0;
              height: 0;
              content: "";
              border-top: 5px solid transparent;
              border-bottom: 5px solid transparent;
              border-left: 8px solid var(--color-add-blue);
              border-radius: 2px;
              transform: translateY(-50%);
            }
          }
        }
      }

      .right-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top-wrapper {
          height: 40%;
        }

        .bottom-wrapper {
          height: 40%;
        }

        .border-line-horizontal {
          max-width: 100%;
          height: 1px;
          background-color: var(--color-add-footer-border);

          @media screen and (max-width: 768px) {
            margin: 30px 0;
          }
        }

        .btn-wrapper-200 {
          margin: 30px 0 0;
        }
      }

      .border-line-vertical {
        width: 1px;
        max-width: 100%;
        background-color: var(--color-add-footer-border);

        @media screen and (max-width: 768px) {
          width: 100%;
          height: 1px;
          margin: 30px 0;
        }
      }
    }
  }

  .page-link-wrapper {
    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      justify-content: center;
      padding: 0 5%;
      margin: 25px 0 20px;

      @media screen and (max-width: 768px) {
        gap: 20px;
        justify-content: space-between;
      }

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

        a {
          position: relative;
          display: inline-block;
          padding: 0 0 5px;

          &::after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            content: "";
            background-color: var(--color-add-blue);
            transition: width 0.3s ease;
          }

          &:hover::after {
            width: 100%;
          }

          p {
            font-size: 14px;
            font-weight: 600;
          }
        }
      }
    }
  }

  .footer-bottom-wrapper {
    padding: 30px 0 40px;
    background-color: var(--color-add-blue);

    ul {
      display: flex;
      gap: 40px;
      justify-content: center;
      padding: 0 5%;

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

      li {
        a {
          position: relative;
          display: inline-block;
          padding: 0 0 5px;

          &::after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            content: "";
            background-color: var(--color-add-white);
            transition: width 0.3s ease;
          }

          &:hover::after {
            width: 100%;
          }

          p {
            font-size: 12px;
            font-weight: 400;
            color: var(--color-add-white);
          }
        }
      }
    }

    .copyright {
      margin: 40px 0 0;
      font-size: 12px;
      font-weight: 600;
      color: var(--color-add-white);
      text-align: center;
    }
  }
}

/* btn  -------------------------------------*/
/* ------------------------------------------------------------------------------*/

/* btn-wrapper */
.btn-wrapper-200 {
  a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    min-width: 200px;
    height: 40px;
    background-color: var(--color-add-white);
    border: 2px solid var(--color-add-blue);
    border-radius: 4px;

    &::after {
      position: absolute;
      content: "";
      background-image: url(../assets/icon_arrow_navy.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      filter: brightness(0);
      top: 50%;
      right: 10px;
      width: 14px;
      height: 18px;
      content: "";
      transform: translateY(-50%);
    }

    p {
      font-size: 12px;
      font-weight: 600;
      color: var(--color-add-blue);
    }
  }
}

.btn-wrapper-230 {
  a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 230px;
    min-width: 230px;
    height: 40px;
    background-color: var(--color-add-white);
    border: 2px solid var(--color-add-blue);
    border-radius: 4px;

    &::after {
      position: absolute;
      content: "";
      background-image: url(../assets/icon_arrow_navy.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      filter: brightness(0);
      top: 50%;
      right: 10px;
      width: 14px;
      height: 18px;
      content: "";
      transform: translateY(-50%);
    }

    p {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-add-blue);
    }
  }
}

.btn-wrapper-310 {
  a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 310px;
    max-width: 310px;
    height: 48px;
    margin: 0 auto;
    background-color: var(--color-add-white);
    border: 2px solid var(--color-add-blue);
    border-radius: 4px;

    &::after {
      position: absolute;
      content: "";
      background-image: url(../assets/icon_arrow_navy.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      filter: brightness(0);
      top: 50%;
      right: 10px;
      width: 14px;
      height: 18px;
      content: "";
      transform: translateY(-50%);
    }

    p {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-add-blue);
    }
  }
}

/* btn action-btn */
.action-btn {
  a {
    transition: 0.4s cubic-bezier(0.37, 0, 0.63, 1);

    &:hover {
      letter-spacing: 0.5;
      background: var(--color-add-blue);

      p {
        color: var(--color-add-white);
      }

      &::after {
        filter: brightness(10);
        background-image: url(../assets/icon_arrow_navy.svg);
      }
    }
  }
}

/* btn liner-btn */
.liner-btn {
  position: relative;
  display: inline-block;

  &::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 1px;
    content: "";
    background-color: #1f7ccb;
    transition: width 0.3s ease;
  }

  &:hover {
    &::after {
      width: 100%;
    }
  }
}

/* btn opacity-btn */
.opacity-btn {
  transition: all 0.3s;

  &:hover {
    opacity: 0.6;
  }
}

/* top-title */
.section-title-wrapper {
  text-align: center;
}

/* section -------------------------------------*/
/* ------------------------------------------------------------------------------*/

/* map-news-section (top-page) */
.map-news-section {
  background-color: var(--color-add-bg);

  .map-news-wrapper {
    display: flex;
    max-width: 1000px;
    padding: 50px;
    margin: 0 auto;

    @media screen and (max-width: 768px) {
      flex-direction: column;
      align-items: center;
      padding: 50px 5%;
    }

    .section-title-wrapper {
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: center;
      justify-content: center;
      width: 30%;
      background-color: var(--color-add-blue);

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

      h2 {
        color: var(--color-add-white);
      }
    }

    ul.news-wrapper {
      display: flex;
      flex-direction: column;
      width: 70%;
      padding: 0 40px;
      background-color: var(--color-add-white);

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

      li {
        position: relative;
        padding: 20px 40px 20px 0;
        border-top: 1px dotted var(--color-add-border);

        &::after {
          position: absolute;
          top: 50%;
          right: 0;
          width: 14px;
          height: 18px;
          content: "";
          background-image: url(../assets/icon_arrow_green.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          transition: all 0.3s;
          transform: translateY(-50%);
        }

        &:first-child {
          border-top: none;
        }

        &:hover::after {
          transform: translate(50%, -50%);
        }

        a {
          display: flex;

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

          p.news-title {
            margin: 0 0 0 30px;

            @media screen and (max-width: 768px) {
              margin: 5px 0 0;
              font-weight: 600;
            }
          }
        }
      }
    }

    .btn-wrapper-200 {
      a {
        border: 2px solid var(--color-add-white);

        &::after {
          background-image: url(../assets/icon_arrow_green.svg);
          filter: brightness(1);
        }

        &:hover {
          background-color: var(--color-add-blue);

          &::after {
            filter: brightness(10);
          }

          p {
            color: var(--color-add-white);
          }
        }

        p {
          color: var(--color-add-blue);
        }
      }
    }

    .btn-wrapper-200.sp-only {
      @media screen and (max-width: 768px) {
        padding: 25px 5%;
        background-color: var(--color-add-blue);
        width: 100%;
        display: flex;
        justify-content: center;
      }
      a {
        max-width: 310px;
        height: 48px;
        border: 2px solid var(--color-add-white);

        &::after {
          background-image: url(../assets/icon_arrow_green.svg);
          filter: brightness(1);
        }

        &:hover {
          background-color: var(--color-add-blue);

          &::after {
            filter: brightness(10);
          }

          p {
            color: var(--color-add-white);
          }
        }
      }
    }
  }
}

/* featured-collection-index (top-page) */
.featured-collection-index {
  .grid--5-col-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25%;

    .grid__item {
      width: 19%;
    }
  }

  .grid--3-col-tablet-down {
    display: flex;
    flex-wrap: no-wrap;
    justify-content: space-between;

    @media screen and (max-width: 989px) {
      flex-wrap: wrap;
    }

    @media screen and (max-width: 640px) {
      gap: 4%;
    }

    .grid__item {
      width: 31%;
      margin: 30px 0 0;

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

  .grid__item:nth-child(n + 7) {
    display: none;
  }

  @media screen and (max-width: 989px) {
    .grid__item:nth-child(6) {
      display: block;
    }
  }

  @media screen and (min-width: 990px) {
    .grid__item:nth-child(6) {
      display: none;
    }
  }

  .btn-wrapper-310 {
    margin: 40px 0 0;
  }
}

/* map-search-section (top-page) */
.map-search-section-wrapper {
  background-color: var(--color-add-bg);

  .map-search-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;

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

    .title-wrapper {
      text-align: center;
      margin-bottom: 40px;

      h2 {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 20px 0;
      }

      p {
        font-size: 14px;
        color: #666;
        margin: 0;
      }
    }

    ul.first-ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

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

      li.first-li {
        width: 24%;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          z-index: 2;
          top: 0;
          left: 2px;
          width: 46px;
          height: 57px;
          background-image: url(../assets/Rectangle_blue.svg);
        }

        @media screen and (max-width: 989px) {
          width: 49%;
        }

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

        h3 {
          font-size: 18px;
          font-weight: 600;
          margin: 0;
          padding: 15px 15px 15px 70px;
          background: #f8f8f8;
          border: 2px solid var(--color-add-blue);
          border-radius: 4px;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: background-color 0.3s ease;
          position: relative;
          z-index: 1;

          &:hover {
            color: var(--color-add-blue);
          }
        }

        .accordion-wide {
          height: 0;
          overflow: hidden;
          background: var(--color-add-blue-deep);
          border-top: none;
          padding: 20px 0 0;
          position: relative;
          top: -20px;
          border-radius: 0 0 4px 4px;

          ul.second-ul {
            display: flex;
            flex-direction: column;

            li {
              border-top: 1px solid #4eb1b7;

              &:first-child {
                border-top: none;
              }

              p {
                font-size: 14px;
                font-weight: 500;
                color: var(--color-add-white);
                padding: 12px 15px;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: background-color 0.3s ease;

                .accordion-icon {
                  &::before,
                  &::after {
                    background-color: var(--color-add-white);
                  }
                }
              }

              .accordion-narrow {
                height: 0;
                overflow: hidden;
                background: var(--color-add-white);
                border-top: none;
                border-radius: 0 0 4px 4px;

                ul.third-ul {
                  display: flex;
                  flex-direction: column;

                  li {
                    border-top: 1px solid var(--color-add-white);

                    &:first-child {
                      border-top: none;
                    }

                    a.arrow-link {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      padding: 10px 22px 10px 25px;
                      text-decoration: none;
                      color: var(--color-add-white);
                      background: var(--color-add-blue-dark);
                      transition: all 0.3s ease;
                      position: relative;
                      font-size: 14px;

                      &::after {
                        content: "";
                        display: inline-block;
                        width: 12px;
                        height: 6px;
                        background-image: url(../assets/icon_arrow_navy.svg);
                        background-size: contain;
                        background-repeat: no-repeat;
                        position: absolute;
                        right: 15px;
                        top: 50%;
                        transform: translateY(-50%);
                        filter: brightness(10);
                      }

                      img {
                        width: 16px;
                        height: 16px;
                        object-fit: contain;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .accordion-icon {
      position: relative;
      width: 14px;
      height: 14px;

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: var(--color-add-blue);
      }

      &::before {
        width: 12px;
        height: 1px;
        transform: translate(-50%, -50%);
      }

      &::after {
        width: 1px;
        height: 12px;
        transform: translate(-50%, -50%);
        transition: transform 0.3s ease;
      }
    }

    .accordion-trigger[aria-expanded="true"] .accordion-icon::after,
    .accordion-icon.expanded::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }
  }
}

/* banner-section (top-page) */
.banner-section {
  padding: 50px 0;

  .banner-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;

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

    .banner-item {
      overflow: hidden;
      border-radius: 4px;

      a {
        transition: all 0.3s;

        &:hover img {
          transform: scale(1.05);
        }

        img {
          transition: all 0.3s;
          max-width: 320px;
          width: 100%;
          height: 100%;
          border-radius: 4px;

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

/* footer-blog-section (top-page) */
.footer-blog-section {
  ul.blog-list {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    margin: 30px 0 0;

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

    li {
      width: 24%;

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

      a {
        display: block;
        text-decoration: none;
        color: var(--color-add-black);
        transition: all 0.3s ease;

        &:hover img {
          transform: scale(1.1);
        }

        .img-wrapper {
          overflow: hidden;
          border-radius: 4px;
          aspect-ratio: 4 / 5;

          img {
            border-radius: 4px;
            transition: all 0.6s;
            object-fit: cover;
            width: 100%;
            height: auto;
            aspect-ratio: 4/5;
          }
        }

        h3 {
          margin: 15px 0 0;
          font-weight: 600;
          font-size: 14px;
          line-height: 1.5;
        }
      }
    }
  }

  .btn-wrapper-310 {
    margin: 40px 0 0;
  }
}

/* footer-mekiki-member-section (footer) */
.footer-mekiki-member-section {
  padding: 50px 0;
  border-top: 1px solid var(--color-add-border);

  .page-width {
    @media screen and (max-width: 989px) {
      padding: 0;
    }

    .section-title-wrapper {
      h2 {
        margin: 0 0 20px;
      }
    }

    ul.mekiki-member-list {
      display: flex;
      gap: 35px;
      margin: 40px 0 0;

      @media screen and (max-width: 989px) {
        overflow-x: auto;
        padding: 0 5%;
      }
    }

    li {
      .mekiki_member {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;

        img {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          border: 2px solid var(--color-add-blue);
        }

        .mekiki_member_content {
          display: flex;
          flex-direction: column;
          gap: 15px;

          h2 {
            font-size: 18px;
            font-weight: 500;
            background-color: var(--color-add-blue);
            padding: 5px 15px;
            border-radius: 0 8px 0 8px;
            color: var(--color-add-white);
            width: max-content;
            margin: 0 auto;
          }

          h3 {
            text-align: center;
            font-size: 14px;
            font-weight: 500;
          }

          p {
            font-size: 12px;

            @media screen and (max-width: 750px) {
              min-width: 190px;
            }
          }
        }
      }
    }
  }

  .btn-wrapper-310 {
    margin: 40px 0 0;
  }
}

/* footer-benefit-section (footer) */
.footer-benefit-section {
  .page-width {
    margin: 0 auto;

    ul.benefit-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-items: stretch;
      justify-content: space-between;
      margin: 30px 0 0;

      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 31%;
        padding: 20px;

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

        h3 {
          display: flex;
          gap: 10px;
          font-size: 18px;
          font-weight: 600;
        }

        p {
          margin: 15px 0 0;
        }

        a {
          position: relative;
          display: block;
          margin: 15px 0 0;
          font-size: 14px;
          font-weight: 600;
          line-height: 1;
          color: var(--color-add-blue);

          &:hover::before {
            transform: translate(50%, -50%);
          }

          &::before {
            position: absolute;
            top: 50%;
            right: -15px;
            width: 14px;
            height: 18px;
            content: "";
            background-image: url(../assets/icon_arrow_navy.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            transition: all 0.3s;
            transform: translateY(-50%);
          }
        }
      }

      li.link-box {
        background-color: var(--color-add-white);
        border: 2px solid var(--color-add-blue);
        border-radius: 4px;

        h3 {
          svg {
            color: var(--color-add-blue);
          }
        }
      }

      li.not-link-box {
        color: #fff;
        background-color: var(--color-add-blue);

        h3 {
          color: #fff;

          svg {
            color: #fff;
          }
        }

        p {
          line-height: 2;
          color: var(--color-add-white);
        }
      }
    }
  }
}
.newsletter-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  &.active {
    display: flex;
    opacity: 1;
    visibility: visible;

    .newsletter-modal-content {
      transform: scale(1);
    }
  }

  .newsletter-modal-content {
    background: var(--color-add-white);
    padding: 40px 25px;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;

    .newsletter-modal-close {
      position: absolute;
      top: 15px;
      right: 20px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #999;

      &:hover {
        color: #333;
      }
    }

    .newsletter-popup-wrapper {
      h2.inline-richtext {
        font-size: 24px;
        font-weight: 600;
      }

      .newsletter-form-wrapper {
        padding: 0 40px;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0.3s ease;

        &.hidden {
          opacity: 0;
          visibility: hidden;
        }

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

        .newsletter__wrapper {
          .newsletter__subheading {
            p {
              font-size: 14px;
              margin: 25px 0 0;
              font-weight: 400;
              line-height: 1.8;
            }
            p.red-text {
              margin: 15px 0 0;
              color: var(--color-add-red);
            }
          }

          #newsletter-popup-form {
            margin: 30px 0 0;

            .newsletter-form__field-wrapper {
              .field {
                &::before,
                &::after {
                  content: none;
                }

                input.field__input {
                  --color-foreground: none;
                  border-radius: 4px;
                  font-weight: 600;
                  border: 2px solid var(--color-add-blue);
                }

                .field__input:focus ~ .field__label,
                .field__input:not(:placeholder-shown) ~ .field__label {
                  top: 6px !important;
                  font-size: 10px;
                }

                label.field__label {
                  top: 14px;
                }

                button.newsletter-form__button {
                  background-color: var(--color-add-blue);
                  color: var(--color-add-white);
                  transition: all 0.3s;
                  height: 50px;
                  width: 70px;
                  top: 50%;
                  right: 0;
                  transform: translateY(-50%);
                  border-radius: 0 4px 4px 0;
                  border: 2px solid var(--color-add-blue);
                  font-weight: 600;
                  letter-spacing: 2px;

                  &:hover {
                    background-color: var(--color-add-white);
                    color: var(--color-add-blue);
                    border: 2px solid var(--color-add-blue);
                  }
                }
              }
            }
          }
        }
      }

      .newsletter-success-message {
        display: none;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;

        &.active {
          display: block;
          opacity: 1;
          visibility: visible;
        }

        p {
          font-size: 14px;
          margin: 25px 0 0;
          font-weight: 400;
          line-height: 1.8;

          span.red-text {
            margin: 15px 0 0;
            color: var(--color-add-red);
          }
        }
      }
    }
  }
}

/* footer-news-section (footer) */
.footer-news-section {
  .footer-news-wrapper {
    display: flex;
    max-width: 1000px;
    padding: 50px;
    margin: 0 auto;

    @media screen and (max-width: 768px) {
      flex-direction: column;
      align-items: center;
      padding: 50px 5%;
    }

    .section-title-wrapper {
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: center;
      justify-content: center;
      width: 30%;

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

    ul.news-wrapper {
      display: flex;
      flex-direction: column;
      width: 70%;
      padding: 0 40px;

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

      li {
        position: relative;
        padding: 20px 40px 20px 0;
        border-top: 1px dotted #d9d9d9;

        &::after {
          position: absolute;
          top: 50%;
          right: 0;
          width: 14px;
          height: 18px;
          content: "";
          background-image: url(../assets/icon_arrow_navy.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          transition: all 0.3s;
          transform: translateY(-50%);
        }

        &:first-child {
          border-top: none;
        }

        &:hover::after {
          transform: translate(50%, -50%);
        }

        a {
          display: flex;
          align-items: center;

          p.news-title {
            margin: 0 0 0 30px;

            @media screen and (max-width: 768px) {
              margin: 0 0 0 15px;
              font-weight: 600;
            }
          }
        }
      }
    }

    .btn-wrapper-200.sp-only {
      margin: 30px 0 0;

      a {
        min-width: 310px;
        max-width: 310px;
        height: 48px;
      }
    }
  }
}

/* collection-page -------------------------------------*/
/* ------------------------------------------------------------------------------*/

/* collection-banner */
.collection-hero {
  .collection-hero__title {
    text-align: center;
    font-weight: 700;
    font-size: 2.4rem;
  }

  .mekiki_member_collection-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 40px auto 30px;
    padding: 30px 30px 30px 50px;
    background-color: var(--color-add-blue);
    border-radius: 0 16px 0 16px;
    max-width: 900px;

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

    &::before {
      content: "";
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 210px;
      height: 36px;
      background-image: url(../assets/mekiki_series.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .mekiki_member {
      display: flex;
      align-items: center;
      gap: 15px;

      @media screen and (max-width: 768px) {
        border-bottom: 1px solid var(--color-add-white);
        padding-bottom: 20px;
        margin-bottom: 20px;
        width: 100%;
      }

      img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 50%;
      }

      .mekiki_member_content {
        h2 {
          font-size: 14px;
          font-weight: 600;
          color: var(--color-add-white);
        }

        h3 {
          font-size: 12px;
          font-weight: 400;
          margin: 10px 0 0;
          color: var(--color-add-white);
        }

        p {
          display: none;
        }
      }
    }

    .mekiki_collection_comment {
      width: 70%;
      margin: 0 0 0 20px;

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

      p {
        color: var(--color-add-white);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        margin: 10px 0 0;

        strong {
          font-size: 16px;
          font-weight: 600;
        }
      }
    }
  }

  .description-accordion {
    border: 1px solid rgba(var(--color-base-text), 0.1);
    overflow: hidden;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    text-align: center;

    .accordion-trigger {
      background: transparent;
      border: none;
      padding: 1rem;
      width: 100%;
      text-align: left;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.1rem;
      font-weight: 500;
      color: rgb(var(--color-base-text));
      transition: background-color 0.3s ease;

      &:hover {
        background-color: rgba(var(--color-base-text), 0.05);
      }

      &:focus {
        outline: 2px solid rgb(var(--color-base-accent-1));
        outline-offset: -2px;
      }

      span:first-child {
        flex: 1;
        text-align: center;
        transition: opacity 0.3s ease;
        font-size: 14px;
        font-weight: 600;
      }

      .accordion-icon {
        position: relative;
        width: 14px;
        height: 14px;
        transition: transform 0.3s ease;

        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          background-color: var(--color-add-blue);
          transition: transform 0.3s ease;
        }

        &::before {
          width: 12px;
          height: 1px;
          transform: translate(-50%, -50%);
        }

        &::after {
          width: 1px;
          height: 12px;
          transform: translate(-50%, -50%);
        }
      }
    }

    .accordion-trigger[aria-expanded="true"] .accordion-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }
  }

  .accordion-content {
    max-height: 0;
    overflow: hidden;
    background: rgba(var(--color-base-text), 0.02);
    transition: max-height 0.4s ease-in-out;

    &.expanded {
      max-height: 5000px;
      overflow: visible;
    }

    .collection-hero__description {
      max-width: 100%;

      .col-3 {
        max-width: 16%;
      }
    }
  }

  #collection-description-1 {
    .accordion-content-inner {
      padding: 30px 0;
      text-align: left;

      .collection-hero__image {
        text-align: center;

        img {
          width: 100%;
        }
      }

      .sec {
        padding: 50px 0;

        @media screen and (max-width: 750px) {
          padding: 30px 0;
        }
      }

      .sec__inner {
        max-width: 1000px !important;
        padding: 0 3% !important;

        @media screen and (max-width: 989px) {
          padding: 0 5% !important;
        }

        @media screen and (max-width: 750px) {
          padding: 5% !important;
        }
      }

      .guide__pic {
        position: relative;

        .icon-zoom {
          right: 2%;

          @media screen and (max-width: 750px) {
            bottom: 31%;
          }
        }
      }

      .close {
        padding: 19px 0 0 8px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        line-height: 0;

        @media screen and (max-width: 750px) {
          width: 30px;
          height: 30px;
          padding: 15px 0 0 8px;
          font-size: 14px;
        }
      }

      h3 {
        font-size: 20px;
        font-weight: 700;
        margin: 15px 0 0;
        color: var(--color-add-blue);
      }

      p {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.8;
        margin: 15px 0 0;
      }

      button {
        color: var(--color-add-white);
        background-color: var(--color-add-blue);
        border-radius: 4px;
        padding: 10px 20px;
        font-size: 14px;
        border: none;
        font-weight: 600;
        line-height: 1.8;
        transition: all 0.3s;
        cursor: pointer;

        &:hover {
          opacity: 0.6;
        }

        &::before,
        &::after {
          content: none;
        }
      }

      .sec--gray {
        background: #f2f2f2;
      }
    }
  }

  .recommend-collection-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    padding: 0 0 20px;
    gap: 2%;

    @media screen and (max-width: 640px) {
      justify-content: space-between;
    }

    li {
      margin: 20px 0 0;
      width: 15%;

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

      a {
        display: flex;
        flex-direction: column;
        align-items: center;

        &:hover img {
          transform: scale(1.1);
        }

        .img-wrapper {
          position: relative;
          overflow: hidden;
          border-radius: 4px;
          transition: all 0.3s;

          img {
            border-radius: 4px;
            background-color: #f8f8f8;
            object-fit: contain;
            width: 100%;
            height: auto;
            aspect-ratio: 170/239;
            transition: all 0.3s;
          }
        }

        p {
          text-align: center;
          font-size: 12px;
          font-weight: 600;
          margin: 10px 0 0;
        }
      }
    }
  }

  .description-accordion + .description-accordion {
    border-top: none;
  }
}

/* collection-list */
.facets-vertical {
  margin-top: 20px;

  .facets-container {
    margin-top: 32px;
    padding-top: 0;

    .facets__form-vertical {
      .product-count-vertical {
        margin: 0 !important;

        h2 {
          text-align: left;
          margin: 0 0 16px;
          font-size: 14px;
          font-weight: 700;

          span {
            color: var(--color-add-black) !important;
          }
        }
      }

      .facets__summary-label {
        font-weight: 600;
        color: var(--color-add-black);
      }

      .facets__summary {
        span {
          font-weight: 600;
          color: var(--color-add-black);
        }
      }

      .list-menu__item {
        line-height: 1;
      }
    }
  }

  .product-grid-container {
    .facets-vertical-sort__inner {
      margin-top: 16px;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;

      .active-facets {
        flex-grow: 1;
      }
    }
  }
}

/* product-page -------------------------------------*/
/* ------------------------------------------------------------------------------*/

.section-template--19659317674213__main-padding {
  background-color: var(--color-add-bg);
}

.product-section + .breadcrumb,
[data-section*="main-product"] ~ .breadcrumb,
body:has(.product-section) .breadcrumb {
  margin: 0;
  padding: 15px 0 0;
  background-color: var(--color-add-bg);
}

.product-section {
  ul.product-category-list {
    display: flex;
    gap: 4px;
    padding-left: 0;
    margin-bottom: 19px;

    li {
      padding: 0 9px;
      text-align: center;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.5;

      &.sale {
        background: var(--color-add-sale);
      }
      &.new {
        background: var(--color-add-new);
      }
      &.osusume {
        background: var(--color-add-osusume);
      }
      &.kaitei {
        background: var(--color-add-kaitei);
      }
      &.yoyaku {
        background: var(--color-add-yoyaku);
      }
      &.ordered {
        background: var(--color-add-ordered);
      }
      span {
        color: var(--color-add-white);
        font-size: 12px;
        letter-spacing: 0.02em;
        font-weight: 700;
        padding: 4px 0;
      }
    }
  }

  p.product__text {
    font-size: 14px;
    font-weight: 600;
  }

  .form__label {
    margin: 0 0 10px !important;
  }

  .price {
    .price__container {
      .price-item {
        font-size: 18px;
        font-weight: 600;
      }

      .tax-included {
        font-size: 13px;
        font-weight: 400;
        margin-left: 4px;
      }
    }
  }

  .mekiki-member-wrapper {
    position: relative;
    margin: 50px 0 0;
    padding: 30px 0 0;
    border-top: 2px solid var(--color-add-blue);

    &::before {
      content: "";
      position: absolute;
      top: -23px;
      left: 50%;
      transform: translateX(-50%);
      width: 210px;
      height: 37px;
      background-image: url(../assets/mekiki_comment.png);
      background-size: cover;
    }

    .mekiki_member {
      display: flex;
      align-items: center;
      gap: 20px;

      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid var(--color-add-blue);
      }

      .mekiki_member_content {
        display: flex;
        flex-direction: column;
        gap: 8px;

        h2 {
          font-size: 16px;
        }

        h3 {
          font-size: 13px;
          font-weight: 500;
        }

        p {
          font-size: 12px;
        }
      }
    }

    .mekiki_long {
      p {
        padding: 20px;
        font-size: 12px;
        color: var(--color-add-white);
        background-color: var(--color-add-blue);
        border-radius: 0 16px 0 16px;
        margin: 20px 0 0;
        line-height: 1.8;

        strong {
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }

  .product-form__input {
    margin-top: 30px;
  }

  .ruffruff-order-limits__product-messages {
    p {
      color: var(--color-add-red);
    }
  }

  .product-form__buttons {
    margin: 30px 0 0;

    button.product-form__submit {
      background-color: var(--color-add-orange);
      color: var(--color-add-white);

      &::before,
      &::after {
        content: none !important;
      }
    }
  }

  button.bis-button {
    &::before,
    &::after {
      content: none;
    }
  }

  button.mxpr-favorites-button {
    background: none !important;
    transition: none !important;
    position: relative;
    padding: 0 0 0 20px;
    width: max-content;
    margin: -15px auto 0;
    text-align: center;
    transition: all 0.3s;

    &::before,
    &::after {
      content: none;
    }

    &:hover {
      transition: none !important;
      transform: none !important;
      opacity: 0.6;
    }

    &::before {
      content: "";
      position: absolute;
      background-image: url(../assets/add-heart.png);
      background-size: cover;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 14px;
      height: 12px;
      border-radius: 0;
    }
  }

  #mxpr-complete-message {
    text-align: center;
    font-size: 14px;
  }

  #mxpr-already-exists {
    text-align: center;
    font-size: 14px;
  }

  .product-detail {
    margin-top: 30px;

    ul.product-detail-list {
      display: flex;
      flex-wrap: wrap;
      border-left: 1px solid #f2f2f2;
      padding-left: 0;

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

      li.product-detail-item {
        width: 33%;
        border-right: 1px solid #f2f2f2;
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
        background-color: var(--color-add-white);
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
        padding: 11px 0;

        @media screen and (max-width: 1100px) {
          width: 100%;
          flex-direction: row;
        }

        .product-detail-ttl {
          color: var(--color-add-blue);
          font-size: 12px;
          font-weight: 700;

          @media screen and (max-width: 1100px) {
            width: 35%;
            margin: 0 0 0 20px;
          }
        }

        .product-detail-txt {
          font-size: 14px;
          font-weight: 500;

          @media screen and (max-width: 1100px) {
            width: 60%;
          }
        }
      }
    }
  }

  .product-form__input--pill input[type="radio"]:checked + label {
    background-color: var(--color-add-orange) !important;
    border: 1px solid var(--color-add-orange) !important;
  }
}

/* media-gallery */
@media screen and (min-width: 750px) {
  .product-media-wrapper {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;

    .slider-mobile-gutter {
      width: 100%;
    }

    .thumbnail-slider {
      width: 10%;

      ul.thumbnail-list {
        display: flex;
        flex-direction: column;

        li.slider__slide {
          width: 100%;
        }
      }
    }
  }
}

@media screen and (max-width: 750px) {
  .product__info-wrapper {
    margin: 20px 0 0;
  }
}

/* related-mekiki-products */
.related-mekiki-products-container {
  padding: 40px 5% 20px;
  text-align: center;

  .page-width {
    padding: 0;

    .related-mekiki-products__heading {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin: 0 0 30px;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 1px;
        z-index: -1;
        background-color: var(--color-add-border);
      }

      span {
        font-size: 16px;
        font-weight: 600;
        background-color: var(--color-add-white);
        padding: 0 20px 0 0;

        @media screen and (max-width: 768px) {
          font-size: 13px;
        }
      }

      .mekiki_member {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-add-white);
        padding: 0 0 0 20px;

        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          border: 1px solid var(--color-add-blue);
        }

        .mekiki_member_content {
          h2 {
            font-size: 16px;
            padding: 0 0 0 10px;

            @media screen and (max-width: 768px) {
              font-size: 13px;
            }
          }

          h3 {
            display: none;
          }

          p {
            display: none;
          }
        }
      }
    }

    ul.product-grid {
      li.grid__item {
        .card-wrapper {
          .mekiki-product-comment {
            display: none !important;
          }
        }
      }
    }
  }
}

/* related-products */
.related-products-container {
  padding: 20px 5% 40px;
  text-align: center;

  .page-width {
    padding: 0;

    h2.related-products__heading {
      font-size: 16px;
      font-weight: 600;
      position: relative;
      display: inline-block;
      padding: 0 20px;
      background-color: var(--color-add-white);

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 1px;
        z-index: -1;
        background-color: var(--color-add-border);
      }
    }

    ul.product-grid {
      li.grid__item {
        .card-wrapper {
          .mekiki-product-comment {
            display: none !important;
          }
        }
      }
    }
  }
}

/* blog-page -------------------------------------*/
/* ------------------------------------------------------------------------------*/

article{
  h1{
    font-size: 32px;
  }
}

/* blog-column-yomimono list */
.blog-column-yomimono {
  margin: 40px auto;

  h1.title--primary {
    text-align: center;
    margin: 0 0 30px;
  }

  .blog-articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;

    &::before {
      content: "";
      display: block;
      width: 23%;
      order: 1;
    }

    &::after {
      content: "";
      display: block;
      width: 23%;
    }

    .blog-articles__article {
      margin: 20px 0 0;
      width: 23%;

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

      .article-card-wrapper {
        .article-card {
          background: none;

          .article-card__image-wrapper {
            .article-card__image {
              border-radius: 4px;

              img {
                object-fit: cover;
              }
            }
          }

          .card__content {
            padding: 0;

            .card__information {
              padding: 0;

              h3 {
                font-size: 16px;
                font-weight: 600;
                margin: 10px 0 0;
              }

              .caption-with-letter-spacing {
                font-size: 14px;
                margin: 15px 0 0;
              }

              p.article-card__excerpt {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}

/* blog-column-yomimono article */
.article-template-column-yomimono {
  margin: 40px auto;

  /* thumbnail */
  .article-template__hero-container {
    max-width: 726px;
  }

  /* title */
  header {
    padding-bottom: 30px !important;
    border-bottom: 1px solid var(--color-add-border);

    h1.article-template__title {
      line-height: 1.5;
    }

    span.caption-with-letter-spacing {
      font-size: 14px;
      font-weight: 600;
      margin: 10px 0 0;
    }
  }

  /* content */
  .article-template__content {
    h2 {
      margin: 40px 0 0;
      font-size: 24px;
      padding: 0 0 0 20px;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 4px;
        height: 100%;
        background-color: var(--color-add-blue);
        transform: translateY(-50%);
      }
    }

    h3 {
      font-size: 20px;
      font-weight: 600;
      margin: 40px 0 0;
      padding: 0 0 10px;
      border-bottom: 1px solid var(--color-add-blue);

      strong {
        color: var(--color-add-red-deep);
        font-weight: 600;
      }
    }

    p {
      font-size: 18px;
      line-height: 1.8;
      margin: 30px 0 0;
    }

    img {
      width: 100%;
    }

    blockquote {
      margin: 0;

      p {
        font-size: 12px;
        margin: 0;
      }
    }

    .blog-product-item {
      cursor: pointer;
      img {
        margin: 20px 0 0;
        max-width: 300px;
        border-radius: 6px;
        max-height: 300px;
        object-fit: contain;
        background-color: var(--color-add-bg);
      }

      h4.blog-product-item__title {
        font-size: 14px;
        font-weight: 600;
        margin: 5px 0 0;
      }

      p.price {
        font-size: 12px;
        font-weight: 600;
        margin: 5px 0 0;
      }
    }
  }
}

/* blog-common list */
.blog-common {
  margin: 40px auto;

  h1.title--primary {
    text-align: center;
    margin: 0 0 30px;
  }

  .blog-articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &::after {
      content: "";
      display: block;
      width: 30%;
    }

    .blog-articles__article {
      width: 30%;

      @media screen and (max-width: 750px) {
        width: 100%;
        padding: 0 0 20px;
      }

      .article-card-wrapper {
        .article-card {
          background: none;

          .card__inner.ratio {
            max-height: 200px;

            .article-card__image-wrapper {
              .article-card__image {
                border-radius: 4px;

                img {
                  object-fit: cover;
                }
              }
            }
          }

          .card__content {
            padding: 0;

            .card__information {
              padding: 0;

              h3 {
                font-size: 16px;
                font-weight: 600;
                margin: 10px 0 0;
              }

              .caption-with-letter-spacing {
                font-size: 14px;
                color: var(--color-add-blue);
                font-weight: 600;
                margin: 15px 0 0;
              }

              p.article-card__excerpt {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}

/* blog-common article */
.article-template-common {
  margin: 40px auto;

  /* thumbnail */
  .article-template__hero-container {
    max-width: 726px;
    .article-template__hero-adapt {
      img {
      }
    }
  }

  /* title */
  header {
    padding-bottom: 30px !important;
    border-bottom: 1px solid var(--color-add-border);

    h1.article-template__title {
      line-height: 1.5;
    }

    span.caption-with-letter-spacing {
      font-size: 14px;
      font-weight: 600;
      margin: 10px 0 0;
    }
  }

  /* content */
  .article-template__content {
    h2 {
      margin: 30px 0 0;
      font-size: 30px;
      font-weight: 500;
    }

    h3 {
      font-size: 24px;
      font-weight: 500;
      margin: 30px 0 0;
    }

    p {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.8;
      margin: 20px 0 0;
    }

    a {
      text-decoration: underline !important;
    }

    .button-link {
      color: var(--color-add-white);
      text-decoration: none !important;
    }

    img {
      width: 100%;
    }
  }
}

.blog-products{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .blog-product-item {
    width: 30%;

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

/* lower-page -------------------------------------*/
/* ------------------------------------------------------------------------------*/

/* お買い物ガイド、よくあるご質問、esim使用方法(デフォルトテンプレート) */
.default-page-container {
  .page-width {
    max-width: 1200px;
    margin: 30px auto 80px;
    padding: 0 50px;

    @media screen and (max-width: 750px) {
      padding: 0 5%;
    }
  }
  h1 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
  }

  h2 {
    margin-top: 60px;
  }
  p {
    font-weight: 600;
    margin-top: 15px;
  }

  ul.esimlink {
    padding-left: 0 !important;
    li {
      margin: 0 !important;
    }
  }

  .animation-underline {
    display: inline-flex;
    position: relative;
    text-decoration: none;
    color: #333333;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 700;
    line-height: 1.6;
  }
  .animation-underline:before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    top: 100%;
    background: #256cad;
    transition: width 0.3s;
  }
  .animation-underline--thin:before {
    height: 1px;
  }
  .animation-underline--active:before {
    width: 100%;
  }
  @media (min-width: 993px) {
    .hover-area:hover .animation-underline:not(.hover-area--native):before,
    .animation-underline:hover:before {
      text-decoration: none;
      width: 100%;
    }
    .hover-area:hover
      .animation-underline:not(.hover-area--native):hover:before {
      text-decoration: none;
      width: 0;
    }
    .hover-area:hover .animation-underline:not(.hover-area--native):after {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      left: 0;
      top: 100%;
      background: transparent;
    }
  }
}

/* yutai-page */
.col-md-12.col-6 {
  max-width: 1200px;
  width: 100%;

  #yutai-page {
    margin: 60px 0 80px;
    text-align: center;

    h1 {
      padding: 30px 10px;
      margin: 40px 0 60px;
      background-color: var(--color-add-blue);
      color: #fff !important;
      border-radius: 10px;
      margin-top: 0px;
    }

    h2 {
      padding: 20px 10px;
      margin: 30px 0 40px;
      background-color: #e3e3e3;
      font-size: 20px;
      color: var(--color-add-blue);
    }

    h3 {
      padding: 20px 10px;
      margin: 20px 0 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--color-add-blue);
    }

    p {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      margin: 20px 0 0;
      color: var(--color-add-blue);
    }

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

    .input-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;

      #yutai_code_input {
        height: 50px;
        width: 320px;
        padding: 10px;
        border-radius: 6px;
        font-size: 1.2rem;
        border: 2px solid var(--color-add-blue);

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

      #yutai_code_btn {
        cursor: pointer;
        height: 50px;
        width: 80px;
        background-color: var(--color-add-blue);
        color: #fff !important;
        padding: 10px;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
        border: none;
      }
    }

    .yutai-note {
      text-align: center;
      display: block;

      .yutai-text {
        text-align: left;
        display: inline-block;
      }
    }

    .yutai-riyo-text {
      margin: 40px 0 20px;

      @media screen and (max-width: 768px) {
        margin: 30px 0 10px;
      }
    }

    .yutai-riyo-img {
      margin: 20px 0 80px;

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

    .modal-container {
      .yutai_code_chk {
        color: red;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
      }

      ul#yutai_code_menu {
        padding: 0px;
        display: flex;
        list-style: none;
        justify-content: center;
        margin: 20px 0 0;

        li {
          padding: 8px 25px;
          margin: 10px;
          background-color: #1D2D68 !important;

          @media screen and (max-width: 768px) {
            padding: 8px 12px;
            margin: 5px;
          }

          a {
            color: #fff !important;
            text-decoration: none;
          }
        }
      }
    }

    /*モーダルを開くボタン*/
    .modal-open {
      /*
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 50px;
    font-weight: bold;
    color: #fff;
    background: #000;
    margin: auto;
    cursor: pointer;
    transform: translate(-50%,-50%);
    */
    }
    /*モーダル本体の指定 + モーダル外側の背景の指定*/
    .modal-container {
      z-index: 10000;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      background: rgba(0, 0, 0, 50%);
      padding: 30px 15px;
      overflow: auto;
      opacity: 0;
      visibility: hidden;
      transition: 0.3s;
      box-sizing: border-box;

      /*モーダル本体の擬似要素の指定*/
      &:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }

      &.active {
        opacity: 1;
        visibility: visible;
      }
    }

    /*モーダル枠の指定*/
    .modal-body {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      max-width: 550px;
      width: 90%;
    }
    /*モーダルを閉じるボタンの指定*/
    .modal-close {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: -30px;
      right: -30px;
      width: 30px;
      height: 30px;
      font-size: 35px;
      color: #fff;
      cursor: pointer;
    }
    /*モーダル内のコンテンツの指定*/
    .modal-content {
      background: #fff;
      text-align: left;
      padding: 20px;
    }
  }
}

/* mekiki-list-page */
.mekiki-list-section {
  margin: 0 0 80px;
  h1.main-page-title {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin: 40px 0 0;
  }

  .main-page-description {
    margin: 30px 0 0;
    text-align: center;
    p {
      line-height: 1.8;
    }
  }

  ul.mekiki-member-list {
    display: flex;
    margin: 60px 0 0;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;

    @media screen and (max-width: 989px) {
      margin: 40px 0 0;
    }

    &::before {
      content: "";
      width: 22%;
      display: block;
      order: 1;
    }

    &::after {
      content: "";
      width: 22%;
      display: block;
    }
  }

  li {
    width: 22%;
    margin: 30px 0 0;
    display: flex;
    flex-direction: column;

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

    .mekiki_member {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      height: 100%;

      img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 2px solid var(--color-add-blue);
      }

      .mekiki_member_content {
        display: flex;
        flex-direction: column;
        gap: 15px;

        h2 {
          font-size: 18px;
          font-weight: 500;
          background-color: var(--color-add-blue);
          padding: 5px 15px;
          border-radius: 0 8px 0 8px;
          color: var(--color-add-white);
          width: max-content;
          margin: 0 auto;
        }

        h3 {
          text-align: center;
          font-size: 14px;
          font-weight: 500;
        }

        p {
          font-size: 12px;
          flex: 1 1 auto;
        }
      }
    }

    .mekiki-link {
      a {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--color-add-blue);
        border-radius: 4px;
        padding: 10px;
        margin: 20px 0 0;

        &:hover {
          background-color: var(--color-add-blue);

          p {
            color: var(--color-add-white);
          }
        }

        p {
          color: var(--color-add-blue);
          font-weight: 600;
        }
      }
    }
  }
}

/* お気に入り-page */
#mxpr-favorites-container {
  margin: 40px auto 80px;

  #mxpr-favorites-table {
    margin: 40px 0 0;
  }
}

/* 地図屋本舗とは */
.about-page-container {
  .page-width {
    max-width: 100%;

    @media screen and (max-width: 989px) {
      padding: 0;
    }

    .about-page-title {
      background-image: url(../assets/img_about_bg.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;

      h1 {
        font-size: 24px;
        font-weight: 600;
        margin: 0;
        color: var(--color-add-white);
      }
    }

    .about-page-content {
      text-align: center;
      max-width: 800px;
      padding: 0 50px;
      margin: 80px auto 60px;

      @media screen and (max-width: 989px) {
        padding: 0 5%;
      }

      h2 {
        font-size: 28px;
        margin: 0 0 60px;

        @media screen and (max-width: 989px) {
          font-size: 24px;
        }
      }

      p {
        font-size: 15px;
        font-weight: 600;
        margin: 20px 0 0;
        line-height: 1.8;

        @media screen and (max-width: 989px) {
          text-align: left;
        }
      }
    }

    .btn-wrapper-310 {
      margin: 0 auto 80px;
    }
  }
}

/* policy-page -------------------------------------*/
/* ------------------------------------------------------------------------------*/
.shopify-policy__container {
  max-width: 1200px;
  margin: 30px auto 80px;
  padding: 0 50px;

  @media screen and (max-width: 750px) {
    padding: 0 5%;
  }

  h1 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 40px;
  }

  .shopify-policy__body {
    table {
      box-shadow: none;

      tr {
        &:nth-of-type(odd) {
          background-color: var(--color-add-bg);

          @media screen and (max-width: 750px) {
            height: max-content !important;
          }
        }
        th {
          border: none;
          font-weight: 600;

          @media screen and (max-width: 750px) {
            display: block;
            width: 100%;
            text-align: left;
            height: max-content !important;
            padding-bottom: 0.5em !important;
          }
        }
        td {
          border: none;
          font-weight: 600;

          @media screen and (max-width: 750px) {
            display: block;
            width: 100%;
            text-align: left;
            height: max-content !important;
            padding-top: 0 !important;
          }

          p {
            font-weight: 600;
          }
        }
      }
    }
    a {
      border-bottom: 1px solid var(--color-add-blue);
      color: var(--color-add-blue);
      transition: all 0.3s;

      &:hover {
        opacity: 0.6;
      }
    }
    h2 {
      font-size: 20px;
      font-weight: 600;
      margin: 40px 0 20px;
    }
    h3 {
      font-size: 18px;
      font-weight: 600;
      margin: 30px 0 10px;
    }
    ul {
      margin: 20px 0 0;
    }
    ol {
      li {
        font-weight: 600;
      }
    }
  }
}

/* account -------------------------------------*/
/* ------------------------------------------------------------------------------*/
/* create-account */
#shopify-section-template--19659318395109__rich_text_DLjbz6 {
  h2 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
  }
}
#shopify-section-template--19659318395109__17536648930964ba57 {
  margin: 0 0 80px;

  .cf-field {
    label {
      font-weight: 600;
      color: var(--color-add-blue);
    }
    select {
      background-color: var(--color-add-white);
    }
  }
  .cf-form-actions {
    button.cf-cancel {
      background-color: var(--color-add-gray);
      font-weight: 600;
      border: 1px solid var(--color-add-gray);
      color: var(--color-add-black);

      &::before {
        content: none;
      }

      &::after {
        content: none;
      }
    }
    button.cf-submit-form {
      background-color: var(--color-add-orange);
      font-weight: 600;
      color: var(--color-add-white);

      &::before {
        content: none;
      }

      &::after {
        content: none;
      }
    }
  }
}

/* my-account */
.customer.login {
  .login-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;

    .field {
      &::before {
        box-shadow: none !important;
        border: none !important;
      }

      &::after {
        box-shadow: none !important;
        border: none !important;
      }

      input {
        background-color: var(--color-add-bg);
        border: 1px solid var(--color-add-border) !important;
        border-radius: 6px;
        box-shadow: none !important;

        &:focus {
          background-color: var(--color-add-white);
        }

        &:not(:placeholder-shown) {
          color: var(--color-add-blue);
          font-weight: 600;
        }
      }

      label {
        font-weight: 600;

        &:focus {
          font-weight: 400;
        }
      }
    }

    .icon-wrapper {
      margin: 2rem 0 0;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;

      svg {
        color: var(--color-add-blue);
      }
    }

    .add-lock-icon {
      svg {
        width: 24px !important;
        height: 24px !important;
      }
    }
  }

  a.recover-password {
    margin: 20px auto 0 !important;
    text-align: center;
    border-bottom: 1px solid var(--color-add-blue);
    font-weight: 600;
    color: var(--color-add-blue);
  }

  a.create-account {
    margin: 30px auto 80px !important;
    text-align: center;
    border-bottom: 1px solid var(--color-add-blue);
    font-weight: 600;
    color: var(--color-add-blue);
  }

  a.cancel-button {
    margin: 30px auto 80px !important;
    text-align: center;
    border-bottom: 1px solid var(--color-add-blue);
    font-weight: 600;
    color: var(--color-add-blue);
  }

  button {
    background-color: var(--color-add-blue) !important;
    font-weight: 600;
  }
}

.customer.account {
  tbody {
    tr {
      &:last-of-type {
        border-bottom: 0.01rem solid rgba(var(--color-foreground), 0.08);
      }
    }
  }
}

.customer.order {
  .customer__header {
    a {
      .svg-wrapper {
        transform: rotate(180deg);
        width: 14px;
      }
    }
  }

  .customer-personal-wrapper {
    @media screen and (max-width: 989px) {
      margin: 60px 0 0;
    }
  }

  .fulfillment {
    a {
      transition: all 0.3s;
    }
  }

  tfoot {
    tr {
      margin: 0 !important;
    }
  }

  @media screen and (min-width: 750px) {
    tfoot {
      tr {
        border-bottom: 1px dotted #e9e9e9;

        &:first-of-type {
          td {
            &:first-of-type {
              padding-top: 2.4rem;
              padding-bottom: 1.5rem;
            }
          }
        }

        &:nth-of-type(n + 2) {
          td {
            &:first-of-type {
              padding-top: 1.5rem;
              padding-bottom: 1.5rem;

              span.cart-discount {
                margin: 1rem 0 0;
              }
            }
          }

          &:last-of-type {
            border-bottom: none;
          }
        }
      }
    }
  }
}

.customer.addresses {
  .customer__header {
    a {
      display: flex;
      align-items: center;
      gap: 10px;
      .svg-wrapper {
        transform: rotate(180deg);
        width: 14px;
      }
    }
  }

  h2 {
    color: var(--color-add-blue);
  }

  ul.address-list {
    li.address-item {
      text-align: left;
      border: 1px solid var(--color-add-blue);
      border-radius: 10px;
      padding: 30px;

      .default-address-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 15px;

        .svg-wrapper {
          width: 14px;

          svg {
            color: var(--color-add-blue);
          }
        }

        h2 {
          font-size: 18px;
          text-align: left;

          color: var(--color-add-blue);
        }
      }

      p {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-add-blue);
      }

      button {
        margin: 20px 0 0;
        color: var(--color-add-white);

        &.cancel-button {
          background-color: var(--color-add-blue);
        }

        &:first-of-type {
          margin: 20px 10px 0 0;
        }

        &::before {
          content: none;
        }

        &::after {
          content: none;
        }
      }
    }
  }

  .edit-address {
    margin: 40px 0 0;

    form {
      .field {
        &::before {
          content: none;
        }

        &::after {
          content: none;
        }

        input {
          border: 1px solid var(--color-add-bg);
          border-radius: 6px;
          background-color: var(--color-add-bg);
          transition: all 0.3s;
          font-weight: 600;
          color: var(--color-add-blue);

          &:focus {
            border: 1px solid var(--color-add-blue);
            background-color: var(--color-add-white);
          }
        }

        label {
          font-weight: 400;
          color: var(--color-add-blue);
        }
      }

      .select-wrapper {
        margin: 20px 0 0;

        .select {
          &::before {
            content: none;
          }

          &::after {
            content: none;
          }

          select {
            height: 50px;
            border: none;
            border-radius: 6px;
            width: 100%;
            background-color: var(--color-add-bg);
            padding: 2.2rem 1.5rem 0.8rem 2rem;
            margin: var(--inputs-border-width);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            transition: all 0.3s;

            &:focus {
              border: 1px solid var(--color-add-blue);
              background-color: var(--color-add-white);
            }
          }

          label {
            font-size: 1rem;
            top: calc(var(--inputs-border-width) + 0.5rem);
            left: calc(var(--inputs-border-width) + 2rem);
            margin-bottom: 0;
            pointer-events: none;
            position: absolute;
            transition: top var(--duration-short) ease,
              font-size var(--duration-short) ease;
            color: var(--color-add-blue);
            letter-spacing: 0.1rem;
            line-height: 1.5;
          }

          span {
            &.svg-wrapper {
              right: 15px;
            }
          }
        }
      }

      .default-address-checkbox {
        margin: 30px 0 0;

        label {
          font-weight: 600;
          color: var(--color-add-blue);
        }
      }
    }
  }

  button {
    background-color: var(--color-add-blue) !important;
    font-weight: 600;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    &.cancel-button {
      background-color: var(--color-add-bg) !important;
      color: var(--color-add-blue) !important;
    }
  }
}

.customer.cf-form-section {
  a#cf-edit-account-back-link {
    font-weight: 600;
    color: var(--color-add-blue);
    transition: all 0.3s;
    display: block;
    text-align: center;

    &:hover {
      opacity: 0.6;
    }
  }

  h1 {
    text-align: center;
    margin: 20px 0 0;
  }

  form {
    margin: 40px 0 0;

    label {
      font-weight: 600;
      color: var(--color-add-blue);
      font-size: 14px;
    }

    .input-full {
      background-color: var(--color-add-white);
    }

    .cf-form-actions {
      .button {
        background-color: var(--color-add-blue) !important;
        font-weight: 600;
      }
    }
  }
}

.customer {
  margin: 0 auto 80px !important;

  .customer__header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;

    .customer__title {
      text-align: center;
    }

    .customer__action {
      font-weight: 600;
      color: var(--color-add-blue);
      transition: all 0.3s;

      svg {
        color: var(--color-add-blue);
      }
    }
  }

  .customer-content-wrapper {
    margin: 50px 0 0;

    .order-header-wrapper {
      p {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-add-blue);
        margin: 20px 0 0;
      }
    }

    table {
      box-shadow: none;

      #ColumnOrder {
        width: 15%;
      }

      #ColumnDate {
        width: 25%;
      }

      #ColumnPayment {
        width: 20%;
      }

      #ColumnFulfillment {
        width: 20%;
      }

      #ColumnTotal {
        width: 30%;
      }

      tr {
        th {
          font-weight: 600;
          font-size: 14px;
          color: var(--color-add-blue);

          &:first-of-type {
            padding-left: 0;
          }
        }

        td {
          font-weight: 600;
          font-size: 14px;
          color: var(--color-add-blue);

          &:first-of-type {
            padding-left: 0;
          }

          a {
            font-size: 14px;
            font-weight: 600;
            color: var(--color-add-blue);
            border-bottom: 1px solid var(--color-add-blue);
            box-shadow: none !important;
            padding-left: 0;
            padding-right: 0;
            transition: all 0.3s;
          }
        }
      }
    }

    .order-history-wrapper {
      h2 {
        margin: 0 0 20px;
        color: var(--color-add-blue);
      }

      p.order-history-description {
        font-weight: 600;
        font-size: 14px;
        color: var(--color-add-blue);
        margin: 0 0 30px;
      }
    }

    .customer-personal-wrapper {
      max-width: 300px;
      min-width: 300px;

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

      h2 {
        margin: 0 0 20px;
        color: var(--color-add-blue);
      }

      p.order-history-description {
        font-weight: 600;
        font-size: 14px;
        color: var(--color-add-blue);
        margin: 30px 0;
      }

      .personal-content {
        max-width: 300px;
        padding: 20px;
        border: 1px solid var(--color-add-blue);
        border-radius: 8px;

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

        p {
          font-weight: 600;
          font-size: 14px;
          color: var(--color-add-blue);

          strong {
            font-weight: 600;
            color: var(--color-add-blue);
          }

          &:last-of-type {
            margin: 0;
          }
        }

        a {
          font-weight: 600;
          color: var(--color-add-blue);
          border-bottom: 1px solid var(--color-add-blue);
          transition: all 0.3s;
          line-height: 1.3;
        }
      }
    }
  }

  .pagination {
    margin: 30px 0 0;

    ul {
      li {
        width: 40px;
        height: 40px;

        a {
          background-color: var(--color-add-blue);
          color: var(--color-add-white);
          border-radius: 4px;
        }

        span {
          &[aria-current="page"] {
            background-color: var(--color-add-blue);
            color: var(--color-add-white);
            opacity: 0.5;
            border-radius: 4px;
          }
        }
      }
    }

    .svg-wrapper {
      margin: 0;

      svg {
        height: 8px !important;
      }
    }
  }
}

.puzzle-piece-form-link {
  margin: 30px 0 0 !important;
  background-color: #F36C32 !important;
  border: 2px solid #F36C32 !important;
  transition: all 0.3s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 20px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;

  &:hover {
    background-color: #fff !important;
    color: #F36C32 !important;
  }
}


/* cart-page -------------------------------------*/
/* ------------------------------------------------------------------------------*/

.cart-item__totals {
  .price {
    font-weight: 600;
    color: var(--color-add-blue);
  }
}

#main-cart-footer {
  .cart__blocks {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    @media screen and (max-width: 750px) {
      align-items: center;
    }

    .totals {
      h2.totals__total {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-add-blue);
      }
      p.totals__total-value {
        font-size: 24px;
        font-weight: 600;
        color: var(--color-add-blue);
      }
    }
    .tax-note {
      #code-order-note {
        p.note-title {
          font-size: 16px;
          font-weight: 600;
          color: var(--color-add-red);
        }
        p.note-text {
          margin-top: 10px;
          color: var(--color-add-red);
        }
        p.note-annotation {
          margin-top: 10px;
          color: var(--color-add-blue);
        }
      }
    }
    button#checkout {
      font-weight: 600;
    }
  }
}

quantity-input {
  &:before {
    transition: box-shadow 0.3s;
  }
  &:after {
    transition: box-shadow 0.3s;
  }

  &:hover {
    &:before {
      box-shadow: 0 0 0 1px var(--color-add-orange);
    }
    &:after {
      box-shadow: 0 0 0 1px var(--color-add-orange);
    }
  }
}