@charset "utf-8";
@import url("root.css");

/***************************************
-------------- PURCHASE --------------
***************************************/

.sitemap_wrap {
  background: url(../img/contents_bg01.webp) repeat;
  padding: clamp(10px, 2vw, 20px) clamp(15px, 3vw, 30px);
}
.sitemap_wrap:not(:last-of-type) {
  margin-bottom: clamp(25px, 5vw, 50px);
}

.sitemap_wrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 20px) 4%;
  li {
    width: calc(88% / 4);
    a {
      width: fit-content;
      display: flex;
      align-items: flex-start;
    }
    a:hover {
      color: var(--base-color01);
      text-decoration: underline;
    }
    a::before {
      content: "";
      display: block;
      width: 10px;
      height: auto;
      aspect-ratio: 1/1;
      background: var(--base-color01);
      margin-top: 0.5em;
      margin-left: 5px;
      margin-right: 10px;
      border-radius: 2px;
      flex-shrink: 0;
    }
  }
  li.parent {
    width: 100%;
    color: var(--base-color01);
    padding-bottom: clamp(5px, 1vw, 10px);
    border-bottom: 1px solid var(--base-color01);
  }
}
.sitemap_wrap ul:not(:nth-of-type(1)) {
  margin-top: clamp(10px, 2vw, 20px);
}


@media screen and (max-width: 767.98px) {
  .sitemap_wrap ul {
    li { width: calc(92% / 3); }
  }
}
@media screen and (max-width: 599.98px) {
  .sitemap_wrap ul {
    li { width: calc(96% / 2); }
  }
}
/* =======================
  PC
======================== */
@media screen and (min-width: 1200px) {
}

/* =======================
  TABLET
======================== */
@media screen and (max-width: 1199px) {
}

/* =======================
  SP
======================== */