@charset "utf-8";

html{
  overflow: auto;
}
.overflow_wrap{
  position: relative;
  overflow-x: hidden;
  width: 100%;
  min-width: 1024px;
}

/*
 swipe
=============================================*/
.swiper-container{
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.swiper-wrapper{
  overflow: visible;
}
.swiper-container01{
  height: 320px;
  z-index: 1;
  opacity: 0;
}
.swiper-initialized{
  opacity: 1!important;
}
.swiper-container01 .swiper-arrow-wrapper{
  display: none;
}
.swiper-pagination{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0 0;
  bottom: auto!important;
  left: auto!important;
}
.swiper-pagination-bullet{
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 8px!important;
  background-color: #cfcfcf;
  line-height: 1;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color: #333;
}
.swiper-container01 .swiper-slide{
  width: 520px;
  height: 320px;
}
.swiper-slide > a{
  display: block;
}
.swiper-container01 .swiper-slide > a:hover{
  opacity: .75;
}
/*
 section
=============================================*/
.main_section{
  position: relative;
  padding: 40px 0;
}
.main_section:first-of-type{
  padding-top: 1px;
}
.pickup.main_section{
  padding-bottom: 64px;
}
.bg_f4f4f4::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  padding: 0 500%;
  margin: 0 -500%;
  background-color: #f4f4f4;
}
.main_ttl_wrap{
  position: relative;
  margin-bottom: 36px;
  padding-bottom: 36px;
  text-align: center;
}
.main_ttl_wrap::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 234px;
  height: 15px;
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h2_line.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.main_ttl > img{
  width: 215px;
  height: auto;
}
.main_ttl_subtxt{
  margin-top: 6px;
  font-size: 20px;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.sub_ttl{
  margin-bottom: 36px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
}
/*
 floating
=============================================*/
.mainNavi_container{
  border-bottom: none!important;
}
.mainNavi_navi{
  height: 60px;
  background-color: #f4f4f4;
}
.mainNavi_navi .mainNavi_anchor{
  width: calc(960px/3);
  padding: 0;
  font-size: 16px;
  font-weight: normal;
  color: #333;
  border: none;
  line-height: 1.3;
}
.mainNavi_navi .mainNavi_anchor::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-color: #333;
  display: block;
  z-index: 1;
}
.mainNavi_navi .mainNavi_anchor:last-of-type::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-color: #333;
  display: block;
  z-index: 1;
}
.mainNavi_navi .mainNavi_anchor[data-in-viewport=true]{
  background-color: #333;
  border: none;
  font-weight: bold;
  color: #fff;
}
.mainNavi_navi .mainNavi_anchor:hover span{
  opacity: .7;
}
.mainNavi_navi .mainNavi_anchor[data-in-viewport=true]:hover span{
  opacity: 1;
}
.float_text{
  position: relative;
  width: 127px;
  height: 60px;
}
.float_text::before{
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
  position: absolute;
  width: 127px;
  height: 60px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 127px auto;
}
.float_text._01::before{
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h2_01.png");
}
.mainNavi_anchor[data-in-viewport=true] .float_text._01::before{
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h2_01_white.png");
}
.float_text._02::before{
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h2_02.png");
}
.mainNavi_anchor[data-in-viewport=true] .float_text._02::before{
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h2_02_white.png");
}
.float_text._03::before{
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h2_03.png");
}
.mainNavi_anchor[data-in-viewport=true] .float_text._03::before{
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h2_03_white.png");
}
.float_text._04::before{
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h2_04.png");
}
.mainNavi_anchor[data-in-viewport=true] .float_text._04::before{
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h2_04_white.png");
}

/*floating_btn*/
#floatingBanner1{
  width: 860px;
  margin: 0 auto;
  background-color: #f4f4f4;
  padding: 24px 0;
  box-sizing: border-box;
  box-shadow: 0 -1.25px 6px rgba(0, 0, 0, .2);
}
#floatingBanner1 .search_wrap{
  margin-bottom: 0;
}
.closeBtn{
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: calc(50% - 440px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #9c9c9c;
  line-height: 1;
  text-align: center;
  z-index: 101;
}
.closeBtn .closeBtn_icon{
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}
.closeBtn:hover{
  opacity: .75;
}

/*
 tab
=============================================*/
.tab01 .tab_btn_container{
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #333;
}
.brand_tab.tab01 .tab_btn_container{
  padding: 0 220px;
}
.itemList_tab.tab01 .tab_btn_container{
  padding: 0 96px;
}
.tab01 .tab_btn{
  margin: 0;
  padding: 0;
  color: #333;
  border-radius: 6px 6px 0 0;
  border: 1px solid #333;
  border-bottom: none;
  text-align: center;
}
.tab01 .brand_tab_btn.tab_btn{
  width: 254px;
  height: 40px;
  font-size: 18px;
  background-color: #f4f4f4;
}
.tab01 .target_tab_btn.tab_btn{
  width: 184px;
  height: 40px;
  font-size: 18px;
  background-color: #fff;
}
.tab01 .brand_tab_btn.tab_btn[aria-selected=true]{
  height: 50px;
  background-color: #333;
  color: #fff;
  font-weight: bold;
}
.tab01 .target_tab_btn.tab_btn[aria-selected=true]{
  height: 50px;
  background-color: #333;
  color: #fff;
  font-weight: bold;
}

.tab01 .tab_btn:hover{
  background-color: #333;
  color: #fff;
  font-weight: bold;
}

.tab_inner01{
  width: 804px;
  margin: 40px auto 0;
}
.tab_inner02{
  margin-top: 40px;
}

/*
 pickup_brand
=============================================*/
.pickup_brand_wrap{
  display: flex;
  flex-wrap: wrap;
  width: 435px;
  margin: 0 auto;
  grid-gap: 16px;
}
.pickup_brand_wrap>li{
  width: calc((100% - 48px - 0.1px)/4);
}
.pickup_brand_wrap>li>a{
  display: block;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
.pickup_brand_wrap>li>a:hover{
  opacity: .75;
}
/*
 refine_search
=============================================*/
.tab-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.tab-item{
  cursor: pointer;
  width: calc((100% - 100px - 0.1px)/11);
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  border: 1px solid #d4d4dd;
  box-sizing: border-box;
}
.tab-item:last-of-type{
  margin-right: 0!important;
}
/* tab-content */
.tab-content {
  display: block!important;
  width: 100%;
  height: 0;
  overflow: hidden;
}
input[name="tab-item"] {
  display: none;
}
#all:checked ~ #all-content,
#a:checked ~ #a-content,
#ka:checked ~ #ka-content,
#sa:checked ~ #sa-content,
#ta:checked ~ #ta-content,
#na:checked ~ #na-content,
#ha:checked ~ #ha-content,
#ma:checked ~ #ma-content,
#ya:checked ~ #ya-content,
#ra:checked ~ #ra-content,
#wa:checked ~ #wa-content {
  overflow: visible;
  height: auto;
}
/* tab active */
.tab-container .tab-item:hover,
.tab-container input:checked + .tab-item {
  background-color: #333;
  font-weight: bold;
  color: #fff;
  border: none;
}

.tab-content .swiper{
  margin-top: 40px;
  max-width: 661px;
  min-width: 661px;
  height: 366px;
  overflow: visible;
}
.tab-content .swiper-container {
  padding-left: 1px;
  width: 661px;
  overflow: hidden;
}
.tab-content .swiper-wrapper{
  height: 323px;
}
.tab-content .swiper-slide{
  height: auto;
}
.tab-content .swiper-pagination{
  margin-top: 32px;
}
.tab-content ul li a{
  display: block;
  max-width: 97px;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
.tab-content ul li a:hover{
  opacity: .75;
}
.swiper-button-next,
.swiper-button-prev{
  position: absolute;
  top: calc(50% - 15px);
  width: 32px;
  height: 32px;
}
.swiper-button-next:hover,
.swiper-button-prev:hover{
  filter: contrast(.86);
}
.swiper-button-next{
  right: -64px;
}
.swiper-button-prev{
  left: -64px;
}
.swiper-button-next,
.swiper-button-prev{
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 32px;
  height: 32px;
  margin-top: -32px;
  color: #333;
  background-color: #fff;
  box-shadow: 0 1.25px 6px #0003;
  border-radius: 100%;
}
.swiper-button-next i,
.swiper-button-prev i{
  font-size: 22px;
  color: #9c9c9c;
  font-weight: 700;
}
.swiper-button-next::after,
.swiper-button-prev::after{
  content: none;
  display: none;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled{
  opacity: 0!important;
}


/*
gift_wrapping
============================================= */
.accordion_contents{
  display: none;
  padding: 0 20px 30px;
}
.gift_info_wrap{
  margin: 48px 0 0;
  border: 1px solid #333;
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
}
.accordion_btn{
  cursor: pointer;
  position: relative;
  padding: 30px 4px;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  transition: 0.3s ease;
  line-height: 1;
}
.accordion_btn:hover{
  opacity: .75;
}
.accordion_btn p{
  display: inline-block;
  padding-right: 20px;
}
.accordion_btn::before,
.accordion_btn::after{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 28px;
  width: 16px;
  height: 2px;
  background-color: #333;
  margin: auto 0;
  transition: 0.3s ease;
}
.accordion_btn::after{
  transform: rotate(0deg);
}
.accordion_btn.-open::after{
  transform: rotate(90deg);
}
/* accordion_contents */
.accordion_txt{
  margin-bottom: 12px;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.accordion_info_txt{
  display: flex;
  font-size: 13px;
  color: #666;
  line-height: 1.1;
}
.accordion_info_txt li{
  margin-right: 14px;
}
.wrapping_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 24px;
}
.wrapping_list table {
  border-collapse: collapse;
  width: 50%;
}
.wrapping_list th {
  background: #333;
  color: #fff;
  text-align: center;
  border: 1px solid #a5a5a5;
  font-size: 14px;
  vertical-align: middle;
  height: 36px;
}
.wrapping_list table:nth-child(2n) th:first-child {
  border-right: none;
}
.wrapping_list td {
  border-right: 1px solid #a5a5a5;
  font-size: 14px;
  vertical-align: middle;
  width: 94px;
  height: 36px;
  text-align: center;
}
.wrapping_list td:first-child {
  text-align: left;
  width: auto;
  padding-left: 12px;
}
.wrapping_list td:last-child {
  width: 128px;
}
.wrapping_list td:last-child a {
  font-size: 12px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  background: #333;
  border-radius: 12px;
  height: 24px;
  width: 94px;
  position: relative;
  margin: 0 auto;
  padding-right: 6px;
  text-align: center
}
.wrapping_list a:hover{
  opacity: .75;
}
.wrapping_list table:nth-child(2n) td:last-child {
  border-right: none;
}
.wrapping_list tr:nth-child(2n + 1) td {
  background-color: #f4f4f4;
}
.wrapping_icon {
  position: absolute;
  display: block;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px;
  height: 10px;
  margin-right: 14px;
}
.wrapping_icon::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: url("/beauty/gift/_cmn/img/20240726/table_icon_arrow.svg") center center no-repeat;
  background-size: auto 100%;
  pointer-events: none;
}
.wrapping_note{
  display: inline-block;
  margin-left: 0.5em;
  font-size: 12px;
  color: #666;
}

/*
index
============================================= */
._col{
  display: flex;
  flex-wrap: wrap;
}
.anchor_list {
  grid-gap: 12px;
}
.anchor_list > li{
  width: calc((100% - 60px - 0.1px)/6);
}
.anchor_list > li a{
  display: block;
}
.anchor_list a.anchorLink__link{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 84px;
  border-radius: 6px;
  padding-bottom: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #333;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.02em;
  box-sizing: border-box;
}
.anchor_list a.anchorLink__link:hover{
  opacity: .8;
  text-decoration: none;
}
.anchor_list a.anchorLink__link::after{
  content: "";
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 12px;
  margin: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
/*
itemList
============================================= */
.itemList{}
.itemList_section + .itemList_section{
  padding-top: 56px;
}
.itemList_ttl_wrap{
  position: relative;
  margin-bottom: 28px;
  line-height: 1.1;
  text-align: center;
}
.itemList_ttl{
  font-size: 26px;
  font-weight: bold;
}
.itemList_ttl_subtxt{
  margin-top: 20px;
  font-size: 16px;
  color: #444;
}
.itemList_section:first-of-type .itemList_ttl_wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 1000px;
  height: 204px;
  margin-left: 50%;
  transform: translateX(-50%);
  background-image: url("https://r.r10s.jp/evt/event/beauty/gift/_pc/img/20240726/h3_bg_first.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}

/*
 search
=============================================*/
.search_wrap{
  width: 768px;
  margin: 0 auto 64px;
}
.search_wrap .search_box {
  height: 54px;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
.search_wrap .search_box_submit {
  width: 56px;
  padding: 0;
  background-color: #333;
  /* 角丸用↓ */
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; 
}
.search_wrap .search_input {
  padding-left: 20px;
  font-size: 16px;
}
.search_wrap .search_input::placeholder {
  color: #999999;
}
.search_wrap .search_box_ic {
  font-size: 28px;
  color: #fff;
}

/* button01 */
.button01{
  margin: 40px auto 32px;
}
.button01 .buttonLink{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 338px;
  height: 72px;
  margin: 0 auto;
  border-radius: 36px;
  background: #333333;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 1;
  box-sizing: border-box;
  font-weight: bold;
}
.button01 .buttonLink:hover{
  opacity: .8;
  text-decoration: none;
}
.button01 a.buttonLink::before{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 10px;
  height: 10px;
  margin: auto;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
}
/*
 choices
=============================================*/
.choices_wrap{
  position: relative;
  padding: 44px 0 16px;
  background-color: #f4f4f4;
}
.choices_wrap .article{
  padding-top: 16px
}
.choices_wrap::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1070px;
  height: 100%;
  z-index: -1;
  margin-left: 50%;
  transform: translateX(-50%);
  background-color: #f4f4f4;
}
.checkbox_ttl{
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #6a6a6a;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.js_conditions{
  margin-bottom: 40px;
}

/* checkbox */
input[type=checkbox],
input[type=radio]{
  display: none;
}
.checkBoxList {
  display: flex;
  flex-wrap: wrap;
  width: 768px;
  margin: 0 auto;
  padding: 0;
  grid-gap: 12px 16px;
}
.checkBoxList .checkSearch{
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border: 1px solid #a5a5a5;
  border-radius: 6px;
  font-size: 15px;
  color: #333;
  background-color: #fff;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
}
.checkBoxList._category > *{
  width: calc((100% - 48px - 0.1px)/4);
}
.checkBoxList._price > *{
  width: calc((100% - 48px - 0.1px)/4);
}
.checkBoxList .checkSearch:hover,
#category01[type=radio]:checked ~ .checkBoxList .checkSearch[for="category01"],
#category02[type=radio]:checked ~ .checkBoxList .checkSearch[for="category02"],
#category03[type=radio]:checked ~ .checkBoxList .checkSearch[for="category03"],
#category04[type=radio]:checked ~ .checkBoxList .checkSearch[for="category04"],
#category05[type=radio]:checked ~ .checkBoxList .checkSearch[for="category05"],
#category06[type=radio]:checked ~ .checkBoxList .checkSearch[for="category06"],
#category07[type=radio]:checked ~ .checkBoxList .checkSearch[for="category07"]{
  background-color: #333;
  color: #fff;
  font-weight: bold;
  border: none;
}
#price01[type=radio]:checked ~ .checkBoxList .checkSearch[for="price01"],
#price02[type=radio]:checked ~ .checkBoxList .checkSearch[for="price02"],
#price03[type=radio]:checked ~ .checkBoxList .checkSearch[for="price03"],
#price04[type=radio]:checked ~ .checkBoxList .checkSearch[for="price04"]{
  background-color: #333;
  color: #fff;
  font-weight: bold;
  border: none;
}


.empty_txt{
  padding: 0 0 40px;
  font-size: 16px;
  color: #6a6a6a;
  text-align: center;
  line-height: 1.6;
}
.empty_txt_icon{
  font-size: 24px;
  color: #6a6a6a;
  margin-bottom: 2px;
  text-align: center;
}

/*
 followUs
=============================================*/
.followUs_wrap{
  margin: 0 auto;
  width: 480px;
}
.lux_icon_wrap{
  margin: 32px auto 0;
  width: 156px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lux_icon_wrap > li{
  width: 58px;
}
.lux_bnr_wrap a:hover,
.lux_icon_wrap a:hover{
  opacity: .8;
}

.alcor_srider{
  width: 976px;
  margin-left: -8px;
  padding: 4px 8px 16px;
}
.alcor_item{
  background-color: #fff;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}