:root {
  --gray: #D6D9DC;
  --navy: #3c4651;
  --light-navy: #787883;
  --pale-navy: #d4dae8;
  --red: #e74c3c;
}

.eng {
  font-family: "Inter", sans-serif;
}

.bold {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.fade {
  &:hover {
    opacity: 0.6;
  }
}

/* COLOR
----------------------------- */
.navy {
  color: var(--navy);
}

.light-navy {
  color: var(--light-navy);
}

/* HEADER
----------------------------- */
header {
  max-width: inherit;
  background-color: var(--navy);

  .headnavi {
    .shop-logo {
      margin-inline-start: 0.5em;

      @media (width < 1300px) {
        margin-inline-start: calc(25px + 15px);
      }
    }

    .serch-box {
      position: relative;

      @media (width < 1300px) {
        display: none;
      }

      .search-keyword {
        min-width: 20em;
      }

      .search-btn {
        width: auto;
        height: 100%;
        border-radius: 0;
        position: absolute;
        top: 0;
        right: 0;
        aspect-ratio: 1 / 1;

        a {
          width: 100%;
          height: 100%;
          background-image: url(https://gigaplus.makeshop.jp/testskymuse/common/images/icon_search.svg);
          background-repeat: no-repeat;
          background-position: 50%;
          background-size: 160%;
          padding: 0;
          display: block;
        }
      }
    }

    .full-navi {
      color: #fff !important;
      margin-inline-start: 2rem;

      @media (width < 1300px) {
        display: none;
      }

      .nav-list {
        li {
          font-size: calc(1rem * 0.9);
          position: relative;
          z-index: 0;

          &.now {
            .sub {
              display: block;
            }
          }

          .sub {
            width: max-content;
            background-color: #fff;
            font-feature-settings: "palt";
            box-shadow: 0 0 1.5em -1em var(--navy);
            padding: 0.5em 1.5em 1em;
            position: absolute;
            top: 49px;
            left: -1.5em;
            display: none;

            >div {
              padding-block: 0.35rem 0.5rem;

              &:not(:first-child) {
                font-size: calc(1rem * 0.9);
                border-top: var(--gray) solid 1px;
              }

              a {
                padding-inline-end: 5em;
              }
            }
          }
        }
      }
    }

    .account-cart-box {
      img {
        width: inherit;
        height: 25px;
      }
    }
  }

  .head-nav-icon {
    color: #fff;
  }
}

/* ハンバーガーボタン */
.mb-navi {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;

  .head-nav-icon {
    font-size: 25px;
    cursor: pointer;

    &.up {
      color: var(--navy);
    }
  }

  @media (width >=1300px) {
    display: none;
  }
}

/* パンくず */
.main-pankuzu-list {
  display: flex;
  font-size: calc(1rem * .75);
  align-items: center;
  /* flex-wrap: wrap; */
  overflow-x: auto;

  li {
    >span {
      white-space: nowrap;

      &::after {
        content: ">";
        margin: 0 0.5rem;
        position: relative;
        top: 0.1rem;
      }
    }

    &:last-child>span::after {
      content: "";
    }
  }

  &+hr {
    margin-block-end: 36px;
    opacity: 0;
  }
}


/* FOOTER
-----------------------------------*/
#footer {
  color: #fff;
  background-color: var(--navy);
  padding-block: 4em;

  .container {
    width: 90%;
    margin-inline: auto;

    .logo {
      text-align: center;

      a {
        img {
          width: 70%;
          max-width: 200px;
          height: auto;
        }
      }
    }

    .sns {
      text-align: center;
      padding-block: 2em 2em;

      a {
        &:hover {
          opacity: 0.6;
        }

        img {
          width: 1.5em;
          height: 1.5em;
        }
      }
    }

    .footer-nav-area {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 2rem;

        li {
          a {
            color: #fff;
            font-size: calc(1rem * 0.8);
          }
        }
      }
    }
  }
}

/* CONTENTS
-----------------------------------*/
body {
  >article {
    min-height: 60svh;
  }
}

.title-02 {
  margin-block-end: 1.5em;

  &:not(.text-center) {
    .eng {
      padding-inline-end: 1rem;
    }
  }

  .eng {
    color: var(--navy);
    font-size: calc(1rem * 1.7);
    font-weight: bold;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
  }

  .jpn {
    color: var(--light-navy);
    font-size: calc(1rem * 0.9);
  }
}

.title-03 {
  color: var(--navy);
  font-size: calc(1rem * 1.25);
  margin-block-end: 1em;
}

.main-contents {

  #new-arraival,
  #recently-area {
    width: 90svw;
    transform: translateX(-50%);
    position: relative;
    left: 50%;

    .product-list {
      justify-content: flex-start;

      @media (width >=768px) {
        gap: 2em;
      }

      li {
        @media (width >=768px) {
          width: calc(20% - (2em * 4 / 5));
        }
      }
    }
  }
}