@charset "utf-8";

html{overflow:auto;}
body{
  position:relative;
  min-width:950px;
  overflow:hidden;
}

.hidden_wrap{
  position:relative;
  min-width:950px;
  overflow-x: hidden;
}

/*
section
======================================================= */
.main_section{
  position: relative;
  margin-bottom: 80px;
}
.subSection_wrap + .subSection_wrap{
  margin-top: 60px;
}

/*タイトル*/
.main_ttl{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 140px;
  margin-bottom: 60px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}
.main_ttl::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: #eceae3;
}
.main_ttl>span{
  position: relative;
  display: block;
  width: 100%;
}
.main_ttl>span::before,
.main_ttl>span::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 86px;
  height: 6px;
  background-color: #5dcbe3;
}
.main_ttl>span::before{
  left: 160px;
}
.main_ttl>span::after{
  right: 160px;
}
.main_ttl._udrTxt{
  margin-bottom: 28px;
}
.main_ttl_udrTxt{
  width: 960px;
  margin: 0 auto 50px;
  font-size: 16px;
}
.cmn_ttl{
  margin-bottom: 28px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}
.sub_ttl{
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 16px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 1.1;
}
.sub_ttl::after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 60px;
  height: 4px;
  background-color: #5dcbe3;
}
.small_ttl{
  position: relative;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: bold;
  color: #08add0;
  text-align: center;
  line-height: 1.1;
}
.ttl{
  font-size: 30px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  padding-top:50px;
}

/*カラム*/
._col{
  display: flex;
  flex-wrap: wrap;
}
.anchor_list {
  grid-gap: 8px;
}
.anchor_list._col._4 > li{
  width: calc((100% - 24px - 0.1px)/4);
}
.anchor_list._col._5 > li{
  width: calc((100% - 32px - 0.1px)/5);
}
.category_list {
  justify-content: center;
  grid-gap: 16px;
}
.category_list._col > li{
  width: calc((100% - 48px - 0.1px)/4);
}
.brand_list {
  grid-gap: 24px 16px;
}
.brand_list._col > li{
  width: calc((100% - 48px - 0.1px)/4);
}

/*ボタン*/
.default_btn>*{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 36px auto 0;
  width: 360px;
  height: 60px;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #fff!important;
  background-color: #1dc0e3;
  text-align: center;
}
.default_btn>*::before{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 24px;
  margin: auto;
  width: 6px;
  height: 6px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.default_btn>.modalOpenShopList{
  width: 240px;
  height: 52px;
  border-radius: 26px;
}
.default_btn>*:hover{
  opacity: .8;
  text-decoration: none;
}
/* shop */
.shop_wrap {
  /* スクロールコンテナとして設定 */
  height: 400px; /* 高さ固定 */
  overflow-y: scroll; /* 縦スクロールを許可 */
  padding-right: 10px; /* スクロールバー分のpadding */
  border: 1px solid #eee;
}

.ecm-card {
  /* 不要な高さを削除 */
  /* height: 400px; */
  /* overflow-y: scroll; */
}

.d-grid-col-3 {
  /* 3列表示を維持 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px 12px;
}

.ecm-link-color-gray-1 {
  /* リンクのスタイル */
  color: #333; /* 例：グレーのテキストカラー */
  text-decoration: none; /* 下線削除 */
}

.ecm-link-color-gray-1:hover {
  text-decoration: underline; /* ホバー時に下線 */
}


/*
coupon
======================================================= */
.coupon_wrap{
  padding-top: 56px;
}

.coupon_wrap .coupon01 .ecm-coupon-link::before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-image: radial-gradient(circle at -1px, transparent 0, transparent 12px, #ffffff 13px),
  radial-gradient(circle at calc(100% + 1px), transparent 0, transparent 12px, #ffffff 13px);
/*  width: 99.9%;*/
}
.coupon_wrap .ri-item__buttonIcon {
  color: #fff;
}
/*クーポン1*/
.coupon01{
  width: 630px;
  margin: 0 auto;
}
.coupon01 .ecm-coupon-body::before {
  background-image: radial-gradient(circle at center left, transparent 0, transparent 10px, #1dc0e3 11px),
  radial-gradient(circle at center right, transparent 0, transparent 10px, #1dc0e3 11px);
}
.coupon01 .ecm-coupon-text{
  color: #fff;
  border-color: #1dc0e3;
  background-color: #1dc0e3;
}

.coupon01 .ecm-coupon-title{
  margin-left: 8%;
  margin-right: 8%;
}

.coupon01 .ecm-coupon-text .ecm-icon-coupon-filled{
  color:#ffffff;
}

.coupon01 .ecm-coupon-discount{
  color: #08add0;
}
.coupon01 .rc-noTransitionCoupon__annotation{
  margin-top: 4px;
}
.periodWrap01{
  padding: 8px 16px 0;
}
.periodTxt{
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
}
.period_ttl{
  font-size: 18px;
  font-weight: bold;
}
.cautionTxt_wrap{
  margin-top: 16px;
  font-size: 12px;
  text-align: center;
}
.campaignLinkList.d-grid-col-2{
  width: 400px;
  margin: 20px auto 0;
  padding: 0;
}
.campaignLinkList.d-grid-col-2>li{
  margin-right: 0!important;
  box-sizing: border-box;
}
.campaignLinkList.d-grid-col-2>li:nth-of-type(2n){
  border-left: 2px solid #a3a3a3;
}
.campaignLinkList li a{
  display: block;
  color: #333;
  font-size: 16px;
  text-align: center;
  line-height: 1;
}
.campaignLinkList li a:hover{
  text-decoration: underline;
}

/*
index
======================================================= */
.index_wrap{
  width: 644px;
  margin: 60px auto;
}
.anchor_list a.anchorLink__link{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  border-radius: 4px;
  padding-bottom: 8px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background-color: #1dc0e3;
  text-align: center;
  letter-spacing: -0.04em;
  box-sizing: border-box;
  line-height: 1.3;
}
.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: 8px;
  margin: auto;
  width: 6px;
  height: 6px;
  border-right: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

/*
rn-floatingNavi
=======================================*/
.index .ecm-floating-navi-container .ecm-floating-navi{
  height: 60px;
  background: #eceae3;
  border-bottom: none;
}

.index .ecm-floating-navi-container .ecm-floating-navi-item{
  position: relative;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: calc(960px/9);
  color: #333333;

  font-size: 14px;
}
.index .ecm-floating-navi-container .ecm-floating-navi-item ::before{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-color: #d9d6ca;
  display: block;
  z-index: 1;
}
.index .ecm-floating-navi-container .ecm-floating-navi-item[data-in-viewport="true"],
.index .ecm-floating-navi-container .ecm-floating-navi-item:hover{
  color: #ffffff;
  font-weight: bold;
  border-bottom: none;
  background-color: #1dc0e3;
}



/* pickup */


.famous_list{
  padding: 32px 20px;
  background-color: #ffffff;
  border-radius: 16px;
  /* width:468px;
  margin:0 auto; */
  box-sizing: border-box;
  box-shadow:0 0 8px rgba(0,0,0,.2) ;
}

.famous_list .title02{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 28px;
}
.famous_list .famous_img{
  margin-bottom: 12px;
}
.famous_list .button01{margin-top: 8px;}
.famous_list .button01 a{
  position: relative;
  display: block;
  width: 310px;
  margin: 16px auto 0;
  padding: 17px 0;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #1dc0e3;
  text-align: center;
}
.famous_list .button01 a::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 7px;
  height: 7px;
  margin: auto;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: rotate(45deg);
}
.famous_list .button01 a:hover{
  opacity: .8;
  text-decoration: none;
}


/*
category
======================================================= */
.category_wrap{
  width: 650px;
  margin: 0 auto;
  padding-bottom: 56px;
}
.category_list li a{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 8px;
  border: 1px solid #eceae3;
  border-radius: 8px;
  background-color: #fff;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 0.5px 3px rgba(0,0,0,.1);
}
.category_list li a:hover{
  opacity: .8;
  text-decoration: none;
}
.category_list li a ._img{
  padding: 8px;
}
.category_list li a p{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  font-size: 14px;
  color: #333;
}

/*
reviewAlcor
======================================================= */
.reviewAlcor + .reviewAlcor{
  margin-top: 60px;
}

/* keyword */
.keyword {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.keyword .ecm-button.keyword__btn {
  width: calc(95%/4);
  height: 50px;
  /*border-radius: 25px;*/
  font-size: 16px;
}

.keyword .ecm-button.keyword__btn:hover {
  background-color: #f0f0f0;
  border-color: #ccc;
}

/*
brand
======================================================= */
.brand_list li a{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 78px;
  padding: 0 8px;
  border: 1px solid #eceae3;
  border-radius: 4px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
}
.brand_list li a:hover{
  opacity: .8;
  text-decoration: none;
}

/*
 selectSearch
===================================== */

.selectSearch01 select {
  -webkit-appearance: none;
  appearance: none;
}

.selectSearch01 .con-searchForm__selectContainer{
  position: relative;
  margin-bottom: 15px;
}
.selectSearch01 .con-searchForm__selectContainer._03{
  margin-bottom: 35px;
}
.selectSearch01 .con-searchForm__select,
.selectSearch01 .con-searchForm__textInput{
  width: 100%;
  height: 48px;
  background-color: #fff;
  text-align: left;
  text-align: -webkit-left;
  cursor: pointer;
  color: #5c5c63;
  border: 1px solid #b0b0b0;
  font-size: 18px;
  padding: 0 13px!important;
  border-radius: 4px;
}
.selectSearch01 .con-searchForm__selectContainer::before{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #1dc0e3 transparent transparent transparent;
  padding: 0;
  pointer-events: none;
}
.selectSearch01 .con-searchForm__textInput{
  box-sizing: border-box;
  border-radius: 4px;
  text-indent: 0;
  cursor: auto;
}
.selectSearch01 .sggstInputWrap input::placeholder{
  color: #c1c1c1;
}
.selectSearch01 .searchInner{
  width: 700px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #fff;
}
.selectSearch01 .searchInner__ttl{
  margin-bottom: 24px;
  font-size: 30px;
  font-weight: bold;
  color: #5c5c63;
  text-align: center;
}
.selectSearch01 .formWrap input[type="checkbox"] {
  display: none;
}
.selectSearch01 .formWrap .con-searchForm__selectContainer:hover {
  opacity: .8;
  text-decoration: none;
}
.selectSearch01 .inputWrap{
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.selectSearch01 .inputWrap label:hover{
  opacity: .8;
  cursor: pointer;
  text-decoration: none;
}
.selectSearch01 .formWrap .inputWrap > li.checked_disNone {
  display: none;
}
.selectSearch01 .formWrap .inputWrap._color_area input[type="checkbox"] + label {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 8px 9px;
}
.selectSearch01 .formWrap input:checked + label {
  position: relative;
}
.selectSearch01 .formWrap input:checked + label::after{
  content: "";
  left: 28%;
  top: 30%;
  position: absolute;
  width: 15px;
  height: 8px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.selectSearch01 .formWrap ._white input:checked + label::after{
  border-right: 2px solid #999;
  border-top: 2px solid #999;
}
.selectSearch01 .formWrap ._transparent input:checked + label::after{
  border-right: 2px solid #999;
  border-top: 2px solid #999;
}

.searchMoney {
  align-items: center;
}
.minPriceInput,
.maxPriceInput{
  width: 45% !important;
}
.searchMoney_tilde {
  display: inline-block;
  font-size: 20px;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 15px;
}
/* button_list */
.button_list{
  width: 492px;
  margin: 0 auto;
}
.button_list ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button_list button:hover{
  opacity: .8;
  cursor: pointer;
  text-decoration: none;
}
/* form-reset-btn */
.form-reset-btn{
  position: relative;
  width: 198px;
  height: 56px;
  border-radius: 28px;
  margin: 24px auto 5px;
  border: none;
  display: block;
  text-align: center;
  color: #1dc0e3;
  font-weight: bold;
  background-color: #eceae3;
  font-size: 20px;
  box-sizing: border-box;
}
/* searchSubmit01 */
.searchSubmit01{
  position: relative;
  width: 278px;
  height: 56px;
  border: none;
  border-radius: 28px;
  margin: 24px auto 5px;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #1dc0e3;
  font-size: 20px;
  box-sizing: border-box;
}
.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_area{
  width: 510px!important;
}
.color_box label{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.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;
}

.searchInner__flexbox{
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.searchInner__flexbox > *:nth-child(1){
  width: 130px;
  font-size: 18px;
  text-align: left;
  margin-bottom: 0;
}
.searchInner__flexbox > *:nth-child(2){
  width: calc(100% - 130px);
  margin-bottom: 0;
}

.rule{
  position: relative;
  /* margin-bottom: 60px; */
  padding: 60px 0;
  background-color: #f7f7f7;
}
.rule::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: #f7f7f7;
}

.sns{
  position: relative;
  margin-bottom: 60px;
  padding: 60px 0;
  background-color: #f7f7f7;
}
.sns::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: #f7f7f7;
}

.cntOther .bigBnrWrap > li > a:hover{
  opacity: .8;
  text-decoration: none;
}

/*other*/
.other{
  position: relative;
  margin-bottom: 60px;
  padding: 60px 0;
  background-color: #f7f7f7;
}
.other::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: #f7f7f7;
}
.other .bnr_area{
  width: 567px;
  margin: 0 auto;
}
.other a:hover{
  opacity: .8;
  text-decoration: none;
}