@charset "UTF-8";
/* font */
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap);
@font-face {
  font-family: "Rakuten Sans UI";
  src: url(https://brandavenue.r10s.jp/font/RakutenSansUI_W_Bd.woff2) format("woff"), url(https://brandavenue.r10s.jp/font/RakutenSansUI_W_Rg.woff2) format("woff");
}
#areaWrapper {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
}

#areaWrapper img {
  width: 100%;
}

.breadcrumb-list {
  width: 1000px;
  margin: 0 auto;
}

/* reward */
.reward {
  display: flex;
  width: 1000px;
  margin: 0 auto 16px;
}

.reward__list {
  display: flex;
  align-items: center;
}

.reward__list > li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin-right: 8px;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  background-color: #eeeeee;
}

.reward__description {
  display: flex;
  align-items: center;
}

/* kv */
.kv {
  width: 1000px;
  margin: 0 auto;
}

.kv-heading {
  position: relative;
}

.kv .contents__heading {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  text-align: center;
}

.kv-text {
  position: absolute;
  bottom: 64px;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
}

.kv-text__maxoff {
  margin-bottom: 8px;
  font-family: "Rakuten Sans UI", "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  color: #f0d23c;
  letter-spacing: 3px;
}

.kv-text__maxoff span {
  padding: 0 4px;
  font-size: 50px;
}

.kv-text__info {
  font-size: 16px;
}

.kv-text__date {
  margin-bottom: 24px;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 1px;
}

/* slide */
.js-gender-logo-area {
  visibility: hidden;
  height: 0;
}

.js-gender-logo-area.active {
  visibility: visible;
  height: 100%;
}

.slider {
  width: 100%;
  background-color: #f4eff6;
}

.slideWrap {
  width: 960px;
  padding: 24px 0;
  margin: 0 auto;
  overflow: hidden;
}

.slideshow {
  display: flex;
  flex-wrap: nowrap;
  width: 960px;
}

.slideshow:hover {
  animation-play-state: paused !important;
}

.slideWrap.anime_start .slideshow {
  animation: loop-slide 20s infinite linear;
}

.slideshow.slideshow--item4 {
  width: 640px;
}

.slideWrap.anime_start .slideshow.slideshow--item4 {
  animation: loop-slide 13s infinite linear;
}

.slideshow > li {
  min-width: 140px;
  margin-right: 20px;
}

.slideshow > li a {
  display: block;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.0784313725);
  transition-timing-function: ease;
  transition-duration: 0.3s;
  transition-property: transform;
}

.slideWrap.anime_start .slideshow:hover > li a:hover {
  transform: scale(1.1);
}

.slideshow > li img {
  width: 100%;
  height: auto;
}

@keyframes loop-slide {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
.dpg-icon {
  width: 200px;
  margin: 0 auto 72px;
}

.familysale-anchor {
  margin-bottom: 80px;
  text-align: center;
}

.familysale-anchor-link:link {
  position: relative;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  color: #1c5ea9;
  text-decoration: underline;
}

.familysale-anchor-link::after {
  position: absolute;
  bottom: -12px;
  left: 47%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  content: "";
  border: 0;
  border-top: solid 1px #1c5ea9;
  border-right: solid 1px #1c5ea9;
  transform: rotate(135deg);
}

.entry {
  box-sizing: border-box;
  width: 1000px;
  padding: 48px 32px;
  margin: 0 auto 80px;
  text-align: center;
  background: #f7f7f7;
}

.entry h3 {
  margin-bottom: 24px;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
}

.entry .sub-heading {
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.entry__term {
  margin-bottom: 19px;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
}

.entry__term span {
  margin-right: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
}

.entry_button_footer-attention {
  margin-bottom: 40px;
  font-size: 12px;
  font-weight: 400;
  line-height: 15.6px;
}

.entry_button_footer-attention-item a:link,
.entry_button_footer-attention-item a:visited {
  color: #0078b5;
}

.entry_button_footer-attention-item {
  margin-bottom: 4px;
  color: #717171;
}

.entry_button_footer-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry_button_footer-list-item {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.entry_button_footer-list-item + .entry_button_footer-list-item {
  padding-left: 10px;
  margin-left: 10px;
  border-left: solid 1px #666;
}

.entry_button_footer-list-link:link,
.entry_button_footer-list-link:visited {
  color: #333333;
}

/* gender nav */
.fixed-menu.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: block;
  width: 100%;
  background: #fff;
  transition: transform 0.5s;
}

.js-gender-tab:has(.fixed-menu.is-fixed) {
  margin-top: 160px;
}

.menu-body {
  width: 100%;
}

.gender-select-item {
  height: 0;
  opacity: 0;
}

.gender-menu-list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40px;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

.gender-menu-item {
  width: 200px;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  color: #717171;
  text-align: center;
  background: #f7f7f7;
}

.gender-menu-item:not(:last-child) {
  border-right: 1px solid #ebebeb;
}

.gender-menu-item:hover {
  cursor: pointer;
}

.gender-menu-item.current {
  font-size: 16px;
  font-weight: 700;
  line-height: 20.8px;
  background: #fff;
  border-bottom: 2px solid #333333;
}

.fixed-menu.is-fixed .gender-menu {
  position: absolute;
  width: 100%;
}

.fixed-menu.is-fixed .gender-menu-list {
  display: block;
  border: none;
}

.fixed-menu.is-fixed #gender-select:hover {
  cursor: pointer;
}

.fixed-menu.is-fixed .gender-select-item,
.fixed-menu.is-fixed .gender-menu-item {
  position: relative;
  z-index: 10000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.2em;
  text-decoration: none;
  background-color: #6e6673;
  border: none;
  opacity: 1;
}

.fixed-menu.is-fixed .gender-select-item {
  height: 41px;
}

.fixed-menu.is-fixed .gender-select-item span {
  position: relative;
  color: #ffffff;
}

.fixed-menu.is-fixed .gender-select-item span::after {
  position: absolute;
  top: 8px;
  right: -20px;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  content: "";
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  transform: rotate(135deg);
}

.fixed-menu.is-fixed .gender-select-item.open span::after {
  top: 13px;
  transform: rotate(-45deg);
}

.fixed-menu.is-fixed.gender-hide {
  transform: translateY(-41px);
  transition: transform 0.5s;
}

.fixed-menu.is-fixed .gender-menu-item.current {
  color: #fff;
}

.contents-menu {
  display: none;
}

.fixed-menu.is-fixed .contents-menu {
  display: block;
}

/* gender-tab */
.js-gender-tab .js-gender-tab_item {
  display: none;
}

.js-gender-tab .js-gender-tab_item.active {
  display: block;
}

/* sml-contents-navi */
.sml-contents-navi {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1000px;
  margin: 0 auto 24px;
}

.sml-contents-navi__item:not(:last-child) {
  margin-right: 20px;
}

.sml-contents-navi__item a {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 225px;
  padding: 8px 36px 8px 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  background: #f4eff6;
}

.sml-contents-navi__item a::after {
  position: absolute;
  top: 47%;
  right: 24px;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  content: "";
  border: 0;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  transform: rotate(135deg);
}

.sml-contents-navi__item a:hover {
  text-decoration: none;
}

/* sale-item-area */
.sale-item__heading {
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
}

.sale-item__sub-text {
  font-size: 20px;
}

.sale-item__attention {
  margin-bottom: 64px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #717171;
  text-align: center;
}

.gender-top-search__keywords {
  box-sizing: border-box;
  width: 100%;
  height: 40px !important;
  padding-left: 40px !important;
  font-size: 14px;
  background-color: #eceeef;
  border: none !important;
  border-radius: 2px;
}

.gender-top-search__wrap {
  position: relative;
  width: 518px;
  margin: 80px auto 24px;
}

.gender-top-search__wrap::before {
  position: absolute;
  top: 12px;
  left: 16px;
  width: 16px;
  height: 16px;
  content: "";
  background: url(https://brandavenue.r10s.jp/img/library/contents/cosmetics/20240328/icon_search.png) no-repeat;
  background-size: contain;
}

/* contents */
.contents {
  width: 1000px;
  margin: 0 auto;
}

.contents__heading {
  padding-top: 64px;
  margin: 0 auto 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #000;
  text-align: center;
}

#brandlist .contents__heading {
  padding-top: 0;
}

.contents__heading-sub-text {
  margin-bottom: 32px;
  text-align: center;
}

.contents__sub-heading {
  margin: 64px 0 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  text-align: center;
}

.contents__more-link:link,
.contents__more-link:visited {
  display: block;
  width: 80%;
  padding: 10px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #747474;
  transition: 0.2s;
}

.contents__more-link:hover {
  color: #ffffff;
  text-decoration: none;
  background: #747474;
}

.js-tab .contents__more-link:hover {
  transition: 0.2s;
}

.ranking {
  padding-bottom: 16px;
}

/* API簡略化PC用！ */
.itemlist + .itemlist {
  margin-top: 20px;
}

.itemlist + .contents__more {
  margin-top: 32px;
}

/* js-tab */
.js-tab .js-tab_item {
  display: none;
  margin-bottom: 0;
}

.js-tab .js-tab_item.active {
  display: block;
}

.js-tab_btn_wrap {
  display: flex;
  justify-content: center;
  margin: 32px auto;
  border-bottom: 1px solid #cdcdcd;
}

.js-tab_btn_wrap .js-tab_btn {
  box-sizing: border-box;
  display: block;
  height: 46px;
  padding: 0 25px 15px;
  margin-right: 8px;
  font-size: 21px;
  font-weight: bold;
  color: #9c9c9c;
  text-align: center;
}

.js-tab_btn_wrap .js-tab_btn[href$=ranking_all] {
  padding-top: 3px;
  font-size: 23px !important;
}

.js-tab_btn_wrap li:last-child .js-tab_btn {
  margin-right: 0;
}

.js-tab_btn_wrap .js-tab_btn.active {
  color: #000000;
  border-bottom: 5px solid #cccccc;
}

.js-tab_btn_wrap .js-tab_btn:hover {
  text-decoration: none;
}

.js-tab .contents__more-link:link,
.contents__more-link:visited {
  transition: none;
}

.js-tab .contents__more-link:link:hover {
  transition: 0.2s;
}

/* category */
#category-women,
#category-men,
#category-kids {
  margin-bottom: 80px;
}

.category__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.category__list-item {
  width: 16.5%;
  margin-bottom: 32px;
  text-align: center;
}

.category__list-item.category__list-item--empty {
  margin: 0;
}

.category__list-item-img {
  margin-bottom: 8px;
}

.category__list-item-img img {
  box-sizing: border-box;
  max-width: 120px;
  border-radius: 50%;
}

.cosme .category__list-item-img img {
  border: none;
}

/* search rate */
.search-rate {
  display: -webkit-box;
  display: flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 64px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.search-rate__item {
  margin-right: 16px;
}

.search-rate__item:last-child {
  margin-right: 0;
}

.search-rate__item-link:link,
.search-rate__item-link:visited {
  box-sizing: border-box;
  display: block;
  width: 110px;
  height: 110px;
  padding: 26px 0 18px;
  font-size: 22px;
  font-weight: bold;
  color: #ff4c6e;
  text-align: center;
  text-decoration: none;
  background: #fff;
  border: 2px solid #ff4c6e;
  border-radius: 100px;
  box-shadow: 2px 4px 20px rgba(129, 129, 129, 0.12);
}

.search-rate__item-link:hover {
  opacity: 0.8;
}

.search-rate__item-number {
  font-size: 45px;
  line-height: 0.8;
}

.search-rate__item-percent {
  font-size: 24px;
  line-height: 0.6;
}

/* search-parts */
.search-wrap {
  width: 960px;
  margin: 24px auto 48px;
  margin-top: 24px;
  margin-bottom: 144px;
}

.search-wrap .contents__heading {
  padding-bottom: 48px;
  margin-bottom: 24px;
  border-bottom: 1px solid #d2d3d5;
}

input[type=checkbox],
input[type=radio],
input[type=checkbox] + label::before {
  display: none;
}

.gender {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 570px;
  padding: 10px 0;
  margin: 0 auto 40px;
  text-align: center;
}

.gender label,
.fixed_price_upper__list label,
.discount_rate_lower__list label {
  box-sizing: border-box;
  width: 125px;
  padding: 5px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #69767b;
  letter-spacing: 1.5px;
  border: 1px solid #a0acb2;
  border-radius: 2px;
}

.gender label {
  border: none;
}

.gender label:not(:last-child),
.fixed_price_upper__list label:not(:last-child),
.discount_rate_lower__list label:not(:last-child) {
  margin-right: 20px;
}

input[type=radio]:checked + label {
  font-weight: 700;
  color: #393e44;
  background: #eceeef;
  border: none;
}

.wrapper {
  width: 664px;
  margin: 0 auto 40px;
  text-align: center;
}

.wrapper > label {
  display: block;
  padding: 24px 0 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.wrapper.category,
.wrapper.keyword {
  box-sizing: border-box;
  width: 570px;
  text-align: center;
}

.fixed_price_upper__list,
.discount_rate_lower__list {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 570px;
  margin: 0 auto;
  text-align: center;
}

.wrapper .fixed_price_upper,
.wrapper .discount_rate_lower {
  display: flex;
  align-items: center;
  justify-content: center;
}

.selectWrap__category {
  width: 100%;
  height: 40px;
  padding: 4px 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #393e44;
  text-align: left;
  appearance: none;
  outline: none;
  border: 1px solid #393e44;
}

.selectWrap {
  position: relative;
}

.selectWrap::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  margin-top: -8px;
  content: "";
  border: 0;
  border-right: solid 1px #393e44;
  border-bottom: solid 1px #393e44;
  transform: rotate(45deg);
}

.color__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.color__list-item {
  position: relative;
}

.color__list-item:not(:nth-child(10n)) {
  margin-right: 16px;
}

.color__list-item:not(:nth-child(-n+10)) {
  margin-top: 16px;
}

.color__list-item label {
  box-sizing: border-box;
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  background: #ccc;
  border-radius: 50%;
}

.color__list-item--red label {
  background: #d62525;
}

.color__list-item--grey label {
  background: #999;
}

.color__list-item--black label {
  background: #000;
}

.color__list-item--white label {
  background: #fff;
  box-shadow: 0 0 0 2px #d1d1d1;
}

.color__list-item--yellow label {
  background: #e7dd40;
}

.color__list-item--navy label {
  background: #060f80;
}

.color__list-item--brown label {
  background: #955322;
}

.color__list-item--blue label {
  background: #04a3d7;
}

.color__list-item--beige label {
  background: #d9c7a2;
}

.color__list-item--khaki label {
  background: #5c5428;
}

.color__list-item--green label {
  background: #009600;
}

.color__list-item--gold label {
  background: linear-gradient(-45deg, #fee66d 0%, #fee66d 50%, #efd14c 51%, #efd14c 100%);
}

.color__list-item--silver label {
  background: linear-gradient(-45deg, #dfdfdf 0%, #dfdfdf 50%, #c9c9c9 51%, #c9c9c9 100%);
}

.color__list-item--other label {
  background: linear-gradient(137.82deg, #ffe073 15.8%, #fda06c 27.91%, #fb7666 40.94%, #da6792 52.76%, #b26dca 65.38%, #6390d5 81.78%);
}

.color__list-item--orange label {
  background: #f49000;
}

.color__list-item--pink label {
  background: #ffb1bf;
}

.color__list-item--purple label {
  background: #6c1e98;
}

input[type=checkbox]:checked + label::after {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 14px;
  height: 8px;
  margin-top: -8px;
  margin-left: -8px;
  content: "";
  border-bottom: 3px solid #444;
  border-left: 3px solid #444;
  transform: rotate(-45deg);
}

input[id=colblack]:checked + label::after,
input[id=colbrown]:checked + label::after,
input[id=colgreen]:checked + label::after,
input[id=colkhaki]:checked + label::after,
input[id=colblue]:checked + label::after,
input[id=colnavy]:checked + label::after,
input[id=colpurple]:checked + label::after,
input[id=colred]:checked + label::after,
input[id=colother]:checked + label::after {
  border-color: #fff;
}

.color__list-item-text {
  position: absolute;
  top: -42px;
  left: -22px;
  box-sizing: border-box;
  display: none;
  width: 100px;
  padding: 5px 25px;
  font-size: 12px;
  line-height: 22.4px;
  color: #555e66;
  text-align: center;
  background: #f3f4f5;
  border: solid 1px #a0acb2;
  border-radius: 2px;
}

.color__list-item-text::after {
  position: absolute;
  bottom: -16px;
  left: 50%;
  z-index: 1;
  margin-left: -10px;
  content: "";
  border: 9px solid transparent;
  border-top: 7px solid #a0acb2;
}

.color__list-item-text::before {
  position: absolute;
  bottom: -13px;
  left: 50%;
  z-index: 2;
  margin-left: -9px;
  content: "";
  border: 8px solid transparent;
  border-top: 6px solid #f3f4f5;
}

.color__list-item label:hover + .color__list-item-text {
  display: block;
}

.viewmore {
  display: none;
}

.inputWrap {
  position: relative;
  display: flex;
}

.inputWrap > input {
  box-sizing: border-box;
  height: 40px;
  font-weight: 500;
}

.inputWrap > input[name=freeword] {
  width: calc(100% - 50px);
  padding: 8px 16px;
  font-size: 14px;
  line-height: 150%;
  border: 1px solid rgba(0, 0, 0, 0.1215686275);
  border-radius: 2px 0 0 2px;
}

.inputWrap > button[name=kw_search] {
  box-sizing: border-box;
  width: 50px;
  padding: 8px 0;
  background: #333 url(https://brandavenue.r10s.jp/img/library/contents/secretsale/20241028/search-icon_white.png) no-repeat center/18px;
  border-radius: 0 2px 2px 0;
}

button[name=kodawari_search] {
  display: block;
  width: 480px;
  height: 56px;
  padding: 13px 0;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
  color: #fff;
  background: #393e44;
  border: none;
  border-radius: 2px;
}

.gender label:hover,
.selectWrap__category:hover,
.fixed_price_upper__list label:hover,
.discount_rate_lower__list label:hover,
.color__list-item label:hover,
.submitBtn:hover {
  cursor: pointer;
}

/* brandlist */
#brandlist {
  padding: 96px 0;
  margin-top: 80px;
  background-color: #f7f7f7;
}
#brandlist .contents__heading {
  margin-top: 0;
  margin-bottom: 64px;
}
#brandlist .contents__sub-heading {
  margin-bottom: 32px;
}
#brandlist .brandlist-wrap h4.contents__sub-heading {
  margin-bottom: 24px;
  color: #000000;
}
#brandlist .brandlist-wrap h5.contents__sub-heading {
  margin-bottom: 24px;
  color: #717171;
}

.brandlist {
  width: 960px;
  margin-bottom: 112px;
}
#brandlist .brandlist-wrap .brandlist:last-child {
  margin-bottom: 0;
}
.brandlist__list-logo {
  margin: 0 24px 8px;
}
.brandlist__list-new-icon {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 500;
  line-height: 150%;
  color: #fff;
  background: #6e6673;
}

/* brands */
.brands__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 14px;
}

.js-pickup-brands {
  display: none;
}

.js-pickup-brands.active {
  display: flex;
  justify-content: center;
}

.brands__list-item {
  box-sizing: border-box;
  width: 140px;
  margin: 0 calc((100% - 840px) / 5) 20px 0;
  border: 1px solid #ddd;
}

.brands__list-item-link {
  display: block;
  padding: 10px 0;
  background-color: #fff;
}

.brands__list-item-link:hover {
  opacity: 0.8;
}

.brands__list-item-link img {
  width: 100%;
  vertical-align: bottom;
}

.brands__list-item:nth-child(6n) {
  margin-right: 0;
}

.brands__list-item:nth-child(6n+1):nth-last-child(-n+6),
.brands__list-item:nth-child(6n+1):nth-last-child(-n+6) ~ li {
  margin-bottom: 0;
}

/* 検索窓 */
.brandlist-filter-search {
  position: relative;
  width: 518px;
  margin: 40px auto;
}

.brandlist-filter-search::before {
  position: absolute;
  top: 12px;
  left: 16px;
  width: 16px;
  height: 16px;
  content: "";
  background: url(https://brandavenue.r10s.jp/img/library/contents/cosmetics/20240328/icon_search.png) no-repeat;
  background-size: contain;
}

.brandlist-filter-search-field {
  box-sizing: border-box;
  width: 100%;
  height: 40px !important;
  padding-left: 40px !important;
  font-size: 14px;
  background-color: #fff;
  border-radius: 2px;
}

.brandlist-filter-search-field::placeholder {
  font-weight: 400;
  color: #555e66;
}

/* アルファベット */
.brandlist-filter-list {
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px;
}

.brandlist-filter-list::-webkit-scrollbar {
  display: none;
}

.brandlist-filter {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 48px;
  font-weight: 400;
  line-height: 48px;
  color: #69767b;
  text-align: center;
  word-break: keep-all;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid #eceeef;
  transition: background 0.2s ease-out;
}

.brandlist-filter--active {
  display: inline-block;
  font-weight: 700;
  color: #393e44;
  border-bottom: 2px solid #393e44;
}

.disabled {
  color: #a0acb2 !important;
  pointer-events: none !important;
}

/* ジェンダータブ */
.brandlist-tab {
  display: flex;
  padding: 10px 0;
  margin-bottom: 24px;
}

.brandlist-tab_btn {
  width: 25%;
  font-size: 13px;
  font-weight: 700;
  line-height: 32px;
  color: #69767b;
  text-align: center;
  cursor: pointer;
}

.brandlist-tab_btn.active {
  color: #393e44;
  background-color: #eceeef;
}

.brandlist-des .brandlist-tab_btn {
  width: 33.3333%;
}

/* main */
.brandlist__list {
  position: relative;
  margin: 0 -8px;
}

.brandlist__list-fix {
  display: flex;
  flex-wrap: wrap;
}

.brandlist__list-tab:not(.active) {
  visibility: hidden;
  height: 0 !important;
}

.brandlist__list-tab.active {
  visibility: visible;
  height: auto;
}

.brandlist__list-item {
  position: absolute;
  display: block;
  width: 228px;
  height: 240px;
  margin: 0 8px 8px;
}

.brandlist__list-fix .brandlist__list-item {
  position: relative;
}

.brandlist__list-link {
  display: flex;
  flex-direction: column;
  padding: 17px 6px 6px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 2px #e7e7e7;
  transition: opacity 0.2s ease-out;
}

.brandlist__list-link:hover {
  text-decoration: none;
  opacity: 0.7 !important;
}

.brandlist__list-off {
  height: 32px;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: #333;
  text-align: center;
  letter-spacing: 0.05em;
  background-color: #e9e9e9;
}

.brandlist__list-off span {
  padding-right: 1px;
  padding-left: 6px;
  font-size: 21.6px;
}

.brandlist-nohit {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

/* キャンペーン詳細 */
.campaign-detail {
  box-sizing: border-box;
  width: 960px;
  padding-top: 96px;
  margin: 0 auto 64px;
}

.campaign-detail__title {
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: center;
}

.campaign-detail__notes--type01 {
  margin-bottom: 32px;
  line-height: 180%;
  text-align: center;
}

.campaign-detail__notes-item--type01 {
  font-size: 14px;
  line-height: 180%;
}

.notes__item-link:link,
.campaign-detail__item-link:link,
.notes__item-link:visited,
.campaign-detail__item-link:visited {
  color: #0070c9;
  text-decoration: underline;
}

.campaign-detail__notes-item--type02 {
  font-size: 14px;
  line-height: 180%;
  color: #828282;
}

.campaign-detail__benefit-title {
  margin-bottom: 32px;
  font-size: 16px;
  font-weight: bold;
  line-height: 180%;
  text-align: center;
}

.campaign-detail__item + .campaign-detail__item {
  margin-top: 40px;
}

.campaign-detail__item-title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 180%;
}

.campaign-detail__item-text {
  font-size: 14px;
  line-height: 25.2px;
}

.campaign-detail__item-nest {
  margin: 0 0 24px 20px;
}

.campaign-detail__item-nest-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
}

.campaign-detail__item-text-item {
  font-size: 14px;
  line-height: 25.2px;
}

.campaign-detail__item-text-item--bold-underline {
  font-weight: 700;
  text-decoration: underline;
}

.campaign-detail__item-text-item--bold {
  font-weight: bold;
}

.campaign-detail__item-text-item--red {
  color: #c00;
}

.campaign-detail__benefit {
  margin-top: 64px;
}

.campaign_announcement {
  width: 80%;
  padding: 10px 0;
  margin: 0 auto 56px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #333;
}

.campaign_announcement_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}

.campaign_announcement img {
  display: block;
  width: 640px;
  padding: 10px 0;
  margin: 0 auto;
}

.campaign_announcement_annotation_wrapper {
  width: 640px;
  margin: 0 auto;
}

.campaign_announcement_annotation {
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.5;
  color: #666;
  text-align: left;
}

.sale-attention {
  width: 1000px;
  margin: 0 auto 56px;
}

.sale-attention-item {
  font-size: 12px;
  font-weight: 400;
  line-height: 15.6px;
  color: #717171;
}

/* familysale-info */
#familysale {
  width: 100%;
}

.familysale-info__heading {
  padding: 8px 0;
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  color: #fff;
  text-align: center;
  background: #333333;
}

.familysale-info__text {
  font-size: 13px;
  font-weight: 700;
  line-height: 19.5px;
  text-align: center;
}

/* secretsale-nav */
.js-floating__wrap {
  display: none;
}

.js-floating.active {
  display: block;
}

.secretsale-nav {
  position: fixed;
  left: 0;
  z-index: 9999;
  display: none;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.secretsale-nav__gender {
  display: block;
  width: 960px;
  padding: 2px 0;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  background: #69616e;
}

.secretsale-nav__floatings {
  display: flex;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  overflow-x: scroll;
  scrollbar-width: none;
  background: #f4eff6;
  transition: all 1s;
  -ms-overflow-style: none;
}

.secretsale-nav__floatings::-webkit-scrollbar {
  display: none;
}

.secretsale-nav__floating {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 20%;
  font-family: Noto Sans JP;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  text-align: center;
  background-color: #f4eff6;
}

.secretsale-nav__floating__btn:link,
.secretsale-nav__floating__btn:visited {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  padding: 19px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  color: #717171;
  text-align: center;
  text-decoration: none;
}

.secretsale-nav__floating:not(:last-child) .secretsale-nav__floating__btn:link,
.secretsale-nav__floating:not(:last-child) .secretsale-nav__floating__btn:visited {
  border-right: 1px solid #d2c6d7;
}

.secretsale-nav__floatings.inactive .secretsale-nav__floating__btn {
  pointer-events: none;
}

.secretsale-nav__floating__btn:hover {
  text-decoration: none;
}

.secretsale-nav__floating__btn.is-current {
  font-size: 16px;
  font-weight: 700;
  line-height: 20.8px;
  text-align: center;
  background-color: #fff;
  border-bottom: 2px solid #60616d;
}

/* NPS survey design change */
.Nps,
.Inquiry,
.Thanks {
  color: #000 !important;
  border-top: 1px solid #333 !important;
}

.Nps .NpsRadioWithLabel label {
  color: #333 !important;
}

.Nps .NpsRadioWithLabel:nth-child(1) label {
  border: 2px solid #ebebeb !important;
}

.Nps .NpsRadioWithLabel:nth-child(2) label {
  border: 2px solid #b6b6b6 !important;
}

.Nps .NpsRadioWithLabel:nth-child(3) label {
  border: 2px solid #828282 !important;
}

.Nps .NpsRadioWithLabel:nth-child(4) label {
  border: 2px solid #4d4d4d !important;
}

.Nps .NpsRadioWithLabel:nth-child(5) label {
  border: 2px solid #000 !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input + label:hover {
  color: #fff !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input + label.NpsRadioWithLabel_color-EC0606__c-jHm:hover {
  background-color: #ebebeb !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input + label.NpsRadioWithLabel_color-EF0AA1__a0ZK\+:hover {
  background-color: #b6b6b6 !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input + label.NpsRadioWithLabel_color-0085C7__pTIBF:hover {
  background-color: #828282 !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input + label.NpsRadioWithLabel_color-B87100__5BbVx:hover {
  background-color: #4d4d4d !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input + label.NpsRadioWithLabel_color-009500__cUA0n:hover {
  background-color: #000 !important;
}

.Primary_wrapper__g-fB9 .Primary_button__b28Uk.Primary_primary__U4wsd {
  background-color: #828282 !important;
  border: none !important;
}

.rexSurveyNamespace input:checked + label::before {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.rexSurveyNamespace img {
  filter: grayscale(100%);
}

.Inquiry.StyledBoxPopup [data-testid=HeaderCloseBar] {
  background: #828282 !important;
}

.message-text-0,
.Nps-StyledMessage {
  word-break: break-word !important;
}

.NpsRadioWithLabel input[type=checkbox]:checked + label::after {
  display: none;
}

.NpsRadioWithLabel_wrapper__VhJnb > input:checked + label.NpsRadioWithLabel_color-EC0606__c-jHm {
  background-color: #ebebeb !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input:checked + label.NpsRadioWithLabel_color-EF0AA1__a0ZK\+ {
  background-color: #b6b6b6 !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input:checked + label.NpsRadioWithLabel_color-0085C7__pTIBF {
  background-color: #828282 !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input:checked + label.NpsRadioWithLabel_color-B87100__5BbVx {
  background-color: #4d4d4d !important;
}

.NpsRadioWithLabel_wrapper__VhJnb > input:checked + label.NpsRadioWithLabel_color-009500__cUA0n {
  background-color: #000 !important;
}

input[type=checkbox]:checked + .rex-checkbox-label::after {
  display: none;
}

/* search-anchor */
#search-anchor {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 3;
  display: none;
}

#search-anchor a,
#search-anchor a:link,
#search-anchor a:visited {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 64px;
  height: 64px;
  font-size: 9px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #6e6673;
  border-radius: 50%;
  transition: 0.2s;
}

#search-anchor a span {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 13px 0;
  font-size: 9px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1215686275);
}

#search-anchor a span::before {
  position: absolute;
  top: 8px;
  left: 20px;
  width: 24px;
  height: 24px;
  content: "";
  background-image: url(https://brandavenue.r10s.jp/img/library/contents/secretsale/20241028/search-icon_white.png);
  background-size: contain;
}

#search-anchor a::before,
#search-anchor a::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  width: 64px;
  height: 64px;
  content: "";
  background: #a19aa6;
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
}

#search-anchor a::before {
  animation: wave 10s ease-out infinite;
}

#search-anchor a::after {
  animation: wave 10s ease-out 0.3s infinite;
}

@keyframes wave {
  88% {
    opacity: 1;
    transform: scale(1);
  }
  96% {
    opacity: 0.1;
  }
  to {
    opacity: 0;
    transform: scale(1.3, 1.3);
  }
}
/* page-top */
#page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  font-size: 190%;
}

#page-top a {
  display: block;
  width: 46px;
  padding: 7px 0 5px;
  color: #333 !important;
  text-align: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid #333;
  border-radius: 45px;
}