@charset "UTF-8";
@media (min-width: 0px) {
  /*
  //サイトトップカテゴリー
  */
  .genderBtn {
    font-family: "Bitter", serif;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0px;
    border-radius: 9px;
    background-color: #870005;
    color: #fff;
    font-size: 0.77rem;
    width: 23.7vw;
  }
  .max2000pt {
    margin-top: 2.5%;
    filter: drop-shadow(0px 5px 1px rgb(0, 0, 0, 0.4));
  }
  .richcosme {
    margin-top: 1.7%;
    filter: drop-shadow(0px 5px 1px rgb(0, 0, 0, 0.4));
  }
  .topCategory_container {
    display: flex;
    width: 92%;
    gap: 3%;
    margin-top: 3%;
  }
  .topCategory_inner span {
    display: block;
    line-height: 1.3;
    font-size: 0.77rem;
    color: #ff609d;
    font-weight: bold;
    margin-top: 7%;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff,
      1px -1px 0 #fff, 0px 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff,
      1px 0 0 #fff !important;
  }
  .topCategory_bg {
    filter: drop-shadow(0px 5px 1px rgb(0, 0, 0, 0.4));
  }
  .slidein {
    transition: 0.5s cubic-bezier(0.25, 0, 0.25, 1);
  }
  .slide_left {
    transform: translateX(calc(-50vw - 50%));
  }
  .slide_right {
    transform: translateX(calc(50vw + 50%));
  }
  .show {
    transform: translateX(0);
  }

  .category_list-container_opt {
    display: flex;
    width: 95%;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    filter: drop-shadow(0px 5px 1px rgb(0, 0, 0, 0.4));
  }
  .category_list-top {
    display: flex;
    font-family: "Bitter", serif;
    width: 100%;
    font-size: 0.87rem;
    font-weight: bold;
    gap: 0 7%;
    color: #ffffff;
    border-radius: 7px;
    /*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: 1rem;
    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;
    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;
    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;
    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%;
  }
  .icon-park-solid--cosmetic-brush {
    display: inline-block;
    font-size: 1.2rem;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cmask id='ipSCosmeticBrush0'%3E%3Cg fill='none' stroke-linejoin='round' stroke-width='4'%3E%3Cpath fill='%23fff' stroke='%23fff' d='m16.1 25.829l22.627-19.8s2.12-2.12 4.242 0c2.121 2.122 0 4.243 0 4.243L23.17 32.9z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' d='m22.464 20.879l5.657 5.657'/%3E%3Cpath stroke='%23fff' d='m5.493 30.778l10.607-4.95l7.07 7.072l-4.95 10.606s-4.95.707-9.192-3.535c-4.243-4.243-3.536-9.193-3.536-9.193Z'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' d='m6.908 36.435l4.95-2.121m.707 7.778l1.415-2.828'/%3E%3Cpath stroke='%23fff' d='m18.93 23.354l2.828-2.475l2.828-2.475m6.01 6.01l-2.475 2.828l-2.475 2.829'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath fill='%23000' d='M0 0h48v48H0z' mask='url(%23ipSCosmeticBrush0)'/%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%;
  }

  .all-item-txt-container {
    display: flex;
    margin: 0 1.5%;
    gap: 1%;
    align-items: center;
    filter: drop-shadow(0px 5px 1px rgb(0, 0, 0, 0.4));
  }
  .all-item-txt {
    width: 97%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 9px;
    height: 12vw;
    font-size: 0.9rem;
    font-weight: bold;
    vertical-align: bottom;
  }
  .all-txt {
    vertical-align: baseline;
  }
  .all-txt2 {
    font-size: 0.6rem;
    font-weight: normal;
    margin-left: 2px;
  }

  /*
  //キャラカテゴリー
  */
  .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;
  }
}