@charset "utf-8";
/*
 common
============================================*/
html{overflow:auto;}
body{
  position:relative;
  min-width:1024px;
  overflow-x:hidden;
  color: #333;
}
.all_contents a:hover{
  text-decoration: none;
}
.all_contents{
  font-size: 14px;
  color: #333;
}

.main_section{
  position: relative;
  padding: 0 0 80px;
}
/*.main_section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 500%;
  margin: 0 -500%;
  z-index: -1;
}
.main_section:nth-of-type(odd)::before{
  background-color: #fff;
}
.main_section:nth-of-type(even)::before{
  background-color: #fff;
}*/
.sub_section + .sub_section{
  margin-top: 100px;
}

/*
 title
============================================*/
.main_title{
  position: relative;
  height: 184px;
  margin-bottom: 36px;
  padding-top: 114px;
  font-size: 38px;
  font-weight: bold;
  color: #4f4f4f;
  text-align: center;
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_pc/img/20230519/heading_bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}
.main_title::before{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 131px;
  padding: 0 500%;
  margin: 0 -500%;
  background-color: #e2f6ff;
  z-index: -1;
}
.main_title::after{
  content: "";
  display: block;
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 62px;
  height: 62px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}
.main_section#umbrella .main_title::after{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon01.png);
}
.main_section#rainwear .main_title::after{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon03.png);
}
.main_section#rain_shoes .main_title::after{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon02.png);
}
.main_section#kids .main_title::after{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon04.png);
}
.main_section#search .main_title::after{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon05.png);
}
.main_section#ranking .main_title::after{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon06.png);
}
.main_section#shoplist .main_title::after{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon07.png);
}
.main_section#others .main_title::after{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon08.png);
}

.main_title_sub {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  color: #4f4f4f;
  margin-bottom: 48px;
}
.main_title_sub span {
  padding: 0 36px;
}
.main_title_sub::before,
.main_title_sub::after {
  content: "";
  display: inline-flex;
  width: 43px;
  height: 46px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_pc/img/20230519/heading_sub_bg.png);
}
#ranking .main_title_sub{
  margin-bottom: 32px;
}

/*button*/
.default_btn > a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 48px auto 0;
  width: 280px;
  height: 56px;
  border: 1px solid #4f4f4f;
  border-radius: 28px;
  font-size: 18px;
  font-weight: bold;
  color: #4f4f4f;
  background-color: #fff;
  text-align: center;
}
.default_btn > a:hover{
  opacity: .8;
}

/*
 mainNavi
============================================*/
.mainNavi_container{
  background-color: #90d6f7;
  border-bottom: none!important;
}
.mainNavi_navi{
  height: 64px;
}
.mainNavi_navi .mainNavi_anchor{
  padding: 0 24px;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  border: none;
  line-height: 1.2;
  text-align: left;
}
.mainNavi_navi .mainNavi_anchor > span{
  position: relative;
  display: inline-block;
  padding: 6px 0 6px 40px;
}
.mainNavi_navi .mainNavi_anchor:nth-of-type(1) span{
  padding-left: 44px;
}
.mainNavi_navi .mainNavi_anchor > span::before{
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: auto 0;
  background-repeat: no-repeat;
  background-size: 32px auto;
  background-position: top center;
}
.mainNavi_navi .mainNavi_anchor._umbrella span::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon01.png);
}
.mainNavi_navi .mainNavi_anchor._rainwear span::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon03.png);
}
.mainNavi_navi .mainNavi_anchor._rain_shoes span::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon02.png);
}
.mainNavi_navi .mainNavi_anchor._kids span::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon04.png);
}
.mainNavi_navi .mainNavi_anchor._search span::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon05.png);
}
.mainNavi_navi .mainNavi_anchor._ranking span::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon06.png);
}
.mainNavi_navi .mainNavi_anchor[data-in-viewport=true]{
  background-color: #fff;
  border: none;
  font-weight: bold;
}
.mainNavi_navi .mainNavi_anchor:hover > span{
  opacity: .8;
}

.index{
  width: 826px;
  margin: 64px auto;
}
.index_list{
  display: flex;
  justify-content: center;
}
.index_list > li{
  width: 124px;
}
.index_list > li + li{
  margin-left: 16px;
}
.index_list > li a{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px 0 4px;
  border-radius: 4px;
  font-size: 15px;
  color: #4f4f4f;
  background-color: #a4ddf8;
  text-align: center;
}
.index_list > li a::before{
  content: "";
  position: relative;
  display: block;
  width: 100%;
  height: 58px;
  background-repeat: no-repeat;
  background-size: 56px auto;
  background-position: top center;
}
.index_list > li._umbrella a::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon01.png);
}
.index_list > li._rainwear a::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon03.png);
}
.index_list > li._rain_shoes a::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon02.png);
}
.index_list > li._kids a::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon04.png);
}
.index_list > li._search a::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon05.png);
}
.index_list > li._ranking a::before{
  background-image: url(https://r.r10s.jp/evt/event/fashion/rainitem/_cmn/img/20230519/icon/icon06.png);
}
.index_list > li a span{
  display: block;
  padding: 16px 0 4px;
}
.index_list > li a:hover{
  opacity: .8;
}

/*
 genderTab
============================================*/
.genderTab{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.genderTab::before{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #a4ddf8;
  z-index: -1;
}
.genderTab_list{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 516px;
  margin: 0 auto;
}
.genderTab_list > li{
  width: 50%;
  text-align: center;
}
.genderTab_list > li > a{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 4px 4px 0 0;
  font-size: 20px;
  color: #515151;
  font-weight: bold;
}
.genderTab_list > li.active{
  height: 75px;
}
.genderTab_list > li.border{
  height: 58px;
}
.genderTab_list > li:first-of-type.border a{
  border-radius: 4px 0 0 0;
}
.genderTab_list > li:last-of-type.border a{
  border-radius: 0 4px 0 0;
}
.genderTab_list > li.active > a{
  cursor: default;
  pointer-events: none; 
  border: 2px solid #a4ddf8;
  background-color: #fff;
  border-bottom: none;
}
.genderTab_list > li.border > a{
  border: none;
  background-color: #a4ddf8;
}
.genderTab_list > li > a:hover{
  text-decoration: none;
  opacity: .8;
}

/*
 coupon
============================================*/
.coupon_wrap{
  position: relative;
  padding: 52px 0 64px;
}
.coupon_wrap::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 500%;
  margin: 0 -500%;
  z-index: -1;
  background-color: #e2f6ff;
}
.coupon_area_title{
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.1;
}
.coupon_body{
  width: 402px;
  margin: 0 auto;
}
.coupon_body::before{
  background-image: 
    radial-gradient(circle at center left, transparent 0, transparent 10px, #42b2e8 11px),
    radial-gradient(circle at center right, transparent 0, transparent 10px, #42b2e8 11px);
}
.coupon_link {
  padding-top: 16px;
}
.coupon_link::before{
  top: 1px;
  left: 1px;
  width: calc(100% - 2.4px);
  height: calc(100% - 2.4px);
  background-image: 
    radial-gradient(circle at center left, transparent 0, transparent 11px, #ffffff 12px),
    radial-gradient(circle at center right, transparent 0, transparent 11px, #ffffff 12px);
}
.coupon_discount{
  font-size: 28px;
  color: #42b2e8;
}
.coupon_discount > em{
  font-size: 56px;
}
.coupon_title{
  font-size: 15px;
  margin-bottom: 16px;
}
.coupon_text{
  color: #ffffff;
  border: none;
  background-color: #42b2e8;
  height: 40px;
}
.coupon_text .coupon_text_icon{
  color: #ffffff;
}
.coupon_note{}

.periodWrap01{
  margin: 16px 0 0;
}
.period{
  margin-bottom: 16px;
  font-size: 16px;
  text-align: center;
}
.cautionTxt_wrap{
  margin-bottom: 24px;
  font-size: 14px;
  text-align: center;
}
.campaignLink_wrap{
  width: 400px;
  margin: 0 auto;
  font-size: 14px;
  text-align: center;
  line-height: 1.1;
}
.campaignLink_wrap > li{
  text-align: center;
}
.campaignLink_wrap > li.campaignLink:nth-of-type(2){
  border-left: 1px solid #ccc;
}
.campaignLink_wrap > li.campaignLink .ic_right{
  display: none;
  font-size: 12px;
  margin-left: 8px;
}
.campaignLink_wrap > li a{
  display: inline-block;
}
.campaignLink_wrap > li a:hover{
  text-decoration: underline;
}

/*
search
======================================================= */
#search .rc-searchForm__selectContainer{
  position: relative;
  margin-bottom: 45px;
}
#search .rc-searchForm__select,
#search .rc-searchForm__textInput{
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 100%;
  height: 56px;
  background-color: #fff;
  text-align: left;
  text-align: -webkit-left;
  cursor: text;
  border: 1px solid #4f4f4f;
  font-size: 18px;
  padding: 0 12px;
}
#search .rc-searchForm__select:hover{
  opacity: .8;
}
#search .rc-searchForm__selectContainer::before{
  content: "";
  position: absolute;
  display: inline-block;
  margin: auto;
  padding: 0;
  top: 0;
  bottom: 4px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-right: 1px solid #4f4f4f;
  border-top: 1px solid #4f4f4f;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  pointer-events: none;
  z-index: 1;
}
#search .rc-searchForm__textInput{
  box-sizing: border-box;
  border-radius: 0;
  text-indent: 0;
}
#search .sggstInputWrap input::placeholder{
  color: #7f7f7f;
}
/* 検索 */
.searchInner{
  width: 576px;
  margin: 0 auto;
}
.searchInner__ttl{
  font-size: 26px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px;
  color: #4f4f4f;
}
.formWrap input[type="checkbox"] {
  display: none;
}
.inputWrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 35px;
}
.formWrap .inputWrap > li.checked_disNone {
  display: none;
}
.formWrap .inputWrap._color_area input[type="checkbox"] + label {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 7px 9px;
}
.formWrap input:checked + label {
  position: relative;
}
.formWrap input:checked + label::after{
  content: "";
  left: 30%;
  top: 32%;
  position: absolute;
  width: 15px;
  height: 8px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(135deg);
}
.formWrap ._white input:checked + label::after{
  border-right: 2px solid #999;
  border-top: 2px solid #999;
}
#search .rc-searchForm__select{
  color: #333;
}

.searchSubmit01{
  position: relative;
  width: 280px;
  height: 56px;
  border-radius: 9.063vw;
  margin: 50px auto 150px;
  display: block;
  text-align: center;
  color: #fff;
  background-color: #4f4f4f;
  border: none;
  font-weight: bold;
  font-size: 18px;
}
.searchSubmit01:hover{
  opacity: .8;
}
.searchSubmit01 .rex-icon {
  content: "\e91c";
}
.searchSubmit01 .rex-icon:before {
  font-family: rex-icon-font!important;
  font-style: normal;
  font-weight: 400!important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* color_box */
.color_box label{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.color_box._black label{
  background-color: #333333;
}
.color_box._gray label{
  background-color: #999999;
}
.color_box._white label{
  background-color: #ffffff;
  border: 1px solid #999999;
}
.color_box._brown label{
  background-color: #955322;
}
.color_box._cream label{
  background-color: #d9c7a2;
}
.color_box._khaki label{
  background-color: #6b692c;
}
.color_box._lightpink label{
  background-color: #ffb1bf;
}
.color_box._pink label{
  background-color: #b33e5c;
}
.color_box._red label{
  background-color: #d62525;
}
.color_box._orange label{
  background-color: #f49000;
}
.color_box._yellow label{
  background-color: #e7dd40;
}
.color_box._green label{
  background-color: #009600;
}
.color_box._lightblue label{
  background-color: #04a3d7;
}
.color_box._blue label{
  background-color: #060f80;
}
.color_box._purple label{
  background-color: #6c1e98;
}
.color_box._gold label{
  background: linear-gradient(-45deg,#f0d23c,#f0d23c 50%,#ffe762 0,#ffe762);
}
.color_box._gold,
.color_box._silver,
.color_box._transparent,
.color_box._multicolor{
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 9px;
  font-weight: bold;
}
.color_box._silver label{
  background: linear-gradient(-45deg,#c9c9c9,#c9c9c9 50%,#dfdfdf 0,#dfdfdf);
}
.color_box._transparent label{
  background: linear-gradient(-45deg,#d0eeff,#d0eeff 50%,#e9f7ff 0,#e9f7ff);
}
.color_box._multicolor label .multicolor_circle{
  display: inline-block;
  box-sizing: border-box;
  border-color: #eff273 #fd7562 #54adff #4df388;
  border-style: solid;
  border-width: 20px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.color_box label:hover{
  opacity: .8;
}

/* keyword */
.keyword01{
  padding-bottom: 130px;
}
.keyword01 .keyword_list{
  display: flex;
  flex-wrap: wrap;
}
.keyword01 .keyword_list > a{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  font-size: 18px;
  color: #333;
  padding: 0 32px;
  border: 1px solid #5a5a5a;
  border-radius: 26px;
  background-color: #fff;
  box-sizing: border-box;
}
.keyword01 .keyword_list > a:hover{
  opacity: .8;
}

.ranking-textContainer{
  margin-top: 60px;
  font-size: 14px;
  line-height: 1.6;
}

/*
 shoplist
============================================*/
.shoplist_list_wrap{
  padding: 32px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: #0000000d 0 0 0 1px;
  border: 0;
}
.shop_name .icon_right{
  display: none;
}
.shoplist_list a.shop_name{
  font-size: 14px;
  color: #333;
}
.shoplist_list a.shop_name:hover{
  text-decoration: underline;
}

/*
floating
===================================== */
.floating_btn_wrap a{
  display: inline-flex;
  height: 68px;
  padding: 0 37px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: #90d6f7;
  font-size: 22px;
  font-weight: bold;
  color: #4e4e4e;
  box-shadow: 0 0 6px rgba(0,0,0,.25);
}
.floating_btn_wrap a:hover{
  opacity: .8;
  text-decoration: none;
}

/*
 related
============================================= */
.related{
  margin: 0 0 24px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}