@charset "UTF-8";
@media (max-width: 768px){
  /*
  //サイトトップカテゴリー
  */
  .category_list-container_opt {
    display: flex;
    width: 95%;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;
  }
  .category_list-top {
    display: flex;
    font-family: "Bitter", serif;
    width: 100%;
    font-size: 0.8rem;
    gap: 0 7%;
    color: #FFFFFF;
    border-radius: 13px;
    background: #1427af;
    box-shadow: 1px 1px 1px 1px #1a003d inset;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 2.5% 0 1.5% 0;
    margin-top: 1%;
    margin-bottom: 1.5%;
  }
  .category_list-top2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
    width: 100%;
    font-size: 0.75rem;
    color: #FFFFFF;
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 13px;
    background: #1427af;
    box-shadow: 1px 1px 1px 1px #1a003d inset;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 1.5% 0 1.5% 0;
  }
  .category-btn_opt3 {
    width: 21.2%;
    background-color: #f7f7f7;
    border: 2px solid #f7f7f7;
    border-radius: 10px;
    margin: 1.2% 0;
    box-shadow: 1px 1px 1px rgb(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .category-name_opt3 {
    font-family: "Bitter", serif;
    font-size: 0.75rem;
    color: #4e454a;
    text-align:center;
    line-height: 1.2;
    margin: 11% 0;
  }
  .ion--home-sharp {
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 8px;
    font-size: 1.0rem;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M416 174.74V48h-80v58.45L256 32L0 272h64v208h144V320h96v160h144V272h64z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .mdi--human-female {
    display: inline-block;
    font-size: 1.2rem;
    margin-bottom: 5px;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m-1.5 20v-6h-3l2.59-7.59C10.34 7.59 11.1 7 12 7s1.66.59 1.91 1.41L16.5 16h-3v6z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .mdi--human-male {
    display: inline-block;
    font-size: 1.2rem;
    margin-bottom: 5px;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m-1.5 5h3a2 2 0 0 1 2 2v5.5H14V22h-4v-7.5H8.5V9a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .mdi--human-female-girl {
    display: inline-block;
    font-size: 1.2rem;
    margin-bottom: 5px;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.5 2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2M6 22v-6H3l2.6-7.6c.3-.8 1-1.4 1.9-1.4s1.7.6 1.9 1.4L12 16H9v6zm8.5-10a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m.5 3h3l1.5 4H18v3h-3v-3h-1.5z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /*
  //キャラカテゴリー
  */
  .category-btn1 {
    position: relative;
    width: 30vw;
    height: 30vw;
    border-radius: 10px;
    margin: 15px 0px 10px 0px;
    filter: drop-shadow(0px 5px 1px rgb(0, 0, 0,0.4));
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0 2px;
  }
  .category-btn2 {
    position: relative;
    width: 22vw;
    height: 22vw;
    background-color: #eeeeee;
    border-radius: 6px;
    margin: 2px 2px 10px 2px;
    box-shadow: 0px 5px 1px rgb(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .category-btn2 img {
    filter: drop-shadow(0px 5px 1px rgb(0, 0, 0,0.2));
  }
  .category-btn3 {
    position: relative;
    width: 22vw !important;
    height: 22vw !important;
    background-color: #FFFFFF;
    border: 2px solid #868686;
    border-radius: 6px;
    margin: 2px 2px 10px 2px;
    box-shadow: 7px 7px 1px rgb(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
  }
  .category_list-container a,
  .category-btn a,
  .category-btn2 a {
    text-decoration: none;
  }
  .category-name {
    font-size: 33px;
    font-weight: bold;
    color: #ffffff;
    margin: 10px;
    text-align:center;
    line-height: 1.2;
  }
  .category-name1 {
    font-family: "Bitter", serif;
    font-size: 0.9rem;
    color: #FFFFFF;
    background-color: #000000;
    border-radius: 7px;
    margin: 10px 0 10px 0;
    padding: 4px 0px;
    width: 94%;
  }
  .scroll_category-name1 {
    font-size: 0.9rem;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #000000;
    border-radius: 7px;
    margin: 0 auto;
    padding: 10px 10px;
    width: 160px;
  }
  .category-name2 {
    font-size: 0.9rem;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #000000;
    border-radius: 7px;
    margin: 19px 0 10px 0;
    padding: 4px 0px;
    width: 94%;
  }
  .category-name3 {
    font-family: "Bitter", serif;
    font-size: 0.9rem;
    color: #FFFFFF;
    background-color: #000000;
    border-radius: 7px;
    margin: 10px 0 10px 0;
    padding: 4px 0px;
    width: 94%;
  }


  /*
  //100pct ミニカテゴリー
  */
  .category_100sale-scroll-container {
    position: relative;
    margin-bottom: 30px;
  }
  .category_100sale-scroll-table {
    padding: 0 0 0 20px;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: -4%;
  }
  .category_100sale-btn2 {
    position: relative;
    width: 21vw;
    height: 21vw;
    border-top: 1px solid #a9a9a9;
    border-right: 1px solid #dfdfdf;
    border-bottom: 2px solid #414141;
    border-left: 1px solid #979797;
    border-radius: 8px;
    margin: 15px 3px 10px 0px;
    box-shadow: 0px 3px 1px rgb(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .category_100sale-btn2:after {
    content: '';
    position: absolute; /* 親要素に重なるように */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    /* 👇白の透明度を調整したグラデーション */
    background: linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 70%,
      rgba(255 255 255 / 21%) 74%,
      rgba(255 255 255 / 36%) 86%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .category_100sale-name3 {
    font-size: 0.8rem;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #000000;
    border-radius: 3px;
    padding: 2% 1%;
    width: 21vw;
  }



}