@charset "utf-8";

/*
 common
======================================================= */
html{
  overflow: auto;
}
body{
  position: relative;
  overflow-x: hidden;
  min-width: 960px;
}
.main_contents{
  color: #333;
}
.win960{
  width: 960px;
  transform: translateX(-50%);
  margin-left: 50%;
}
.ecm-reward-header{
  padding: 4px 8px 8px 0;
}
/*kanban
========================*/
.kanban_wrap{
  overflow: hidden;
}
.fadein_wrap{
  position: absolute;
  top: 61px;
  left: 0;
  right: 0;
  width: 1920px;
  height: 360px;
  margin-left: 50%;
  transform: translateX(-50%);
}
.fadein_wrap > div{
  position: absolute;
  opacity: 0;
  animation-name: fadeInAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.fadein_wrap .fadein_img01{
  top: 67px;
  left: 91px;
  width: 244px;
  height: 243px;
  animation-delay: 0.7s;
}
.fadein_wrap .fadein_img02{
  top: 183px;
  left: 346px;
  width: 140px;
  height: 144px;
  animation-delay: 0.4s;
}
.fadein_wrap .fadein_img03{
  top: 94px;
  left: 466px;
  width: 245px;
  height: 216px;
  animation-delay: 0.1s;
}
.fadein_wrap .fadein_img04{
  top: 105px;
  right: 456px;
  width: 267px;
  animation-delay: 0.1s;
}
.fadein_wrap .fadein_img05{
  top: 204px;
  right: 241px;
  width: 229px;
  height: 132px;
  animation-delay: 0.4s;
}
.fadein_wrap .fadein_img06{
  top: 94px;
  right: 46px;
  width: 240px;
  height: 209px;
  animation-delay: 0.7s;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*Coupon
========================*/
.coupon_wrap{
  width: 960px;
  margin: 0 auto;
  padding: 48px 0 80px;
}
.coupon_ttl{
  margin-bottom: 20px;
  font-size: 28px;
  color: #09844c;
  line-height: 1.2;
  text-align: center;
}
.coupon_ttl > span{
  position: relative;
  display: inline-block;
  padding: 0 32px;
}
.coupon_ttl > span::before,
.coupon_ttl > span::after{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 31px;
  margin: auto 0;
  background-image: url("https://r.r10s.jp/evt/event/household/coupon/plus/_pc/img/20240327/couponttl_icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px auto;
}
.coupon_ttl > span::before{
  left: 0;
}
.coupon_ttl > span::after{
  right: 0;
  transform: scale(-1, 1);
}
.coupon_ttl > span ._bold{
  font-weight: bold;
}
.rc-noTransitionCoupon__text {
  color: #fff;
}
.ri-item__buttonIcon {
  color: #fff;
}
/* coupon01 */
.coupon01 .rc-noTransitionCoupon__title{
  color: #564333;
}
.coupon01 .coupon_list_text{
  border-top: none;
  color: #fff;
  padding: 9px 0;
  font-size: 12px;
}
.coupon01 .coupon_list_title{
  color: #333;
  margin-bottom: 4px;
}
.coupon01 .coupon_list_discount em{
  font-size: 40px;/*「<em>●●</em>」の調整*/
}
.coupon01 .coupon_list_filled{
  color: #fff;
}
.coupon01 .rc-noTransitionCoupon__annotation{
  color: #333;
  font-size: 14px;
}
.coupon01 .coupon_list_body::before {
  background-image: none;
}
.coupon01 .coupon_list_link {
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  padding: 8px 0 0;/*クーポン背景上部の余白調整*/
}
.coupon01 .coupon_list_link::before {
  background-image: none;
  height: 98%;
}
.coupon01 .coupon_list_link::after{
  background-image: url(https://r.r10s.jp/evt/event/household/coupon/plus/_sp/img/20240327/coupon.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  content: "";
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.coupon01 .coupon_list_discount{
  color: #564333;
  margin-bottom: 7px;
}
.coupon01 .coupon_list_note{
  font-size: 12px;
  margin-top: 8px;
}
/* periodWrap01 */
.periodWrap01{
  margin: 28px 0 0;
  line-height: 1.5;
}
.periodTxt{
  font-size: 18px;
  text-align: center;
}
.period_ttl{
  font-weight: bold;
}
.cautionTxt_wrap{
  margin: 20px 0 0;
  text-align: center;
}
.cautionTxt{
  font-size: 14px;
  color: #666;
  text-indent: -1em;
  padding-left: 1em;
}
.campaignLinkList{
  width: 480px;
  margin: 24px auto 0;
}
.campaignLinkList>li{
  margin-right: 0!important;
  box-sizing: border-box;
}
.campaignLinkList>li:nth-of-type(2n){
  border-left: 1px solid #a3a3a3;
}
.campaignLinkList li a{
  display: block;
  color: #333;
  font-size: 16px;
  text-align: center;
  line-height: 1;
}
.campaignLinkList span{
  position: relative;
  padding-right: 17px;
}
.campaignLinkList span::before{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 4px;
  right: 3px;
  width: 8px;
  height: 8px;
  margin: auto;
  border-right: 1px solid #4e4e4e;
  border-top: 1px solid #4e4e4e;
  transform: rotate(135deg);
}
/*
section_wrap
========================*/
.main_section{
  position: relative;
  padding: 84px 0 88px;
  overflow: visible;
}
.main_section.bg_gray{
  background-color: #f2f1eb;
}
.main_section::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 82px;
  background-image: url("https://r.r10s.jp/evt/event/household/coupon/plus/_pc/img/20240327/maincontents_top.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 1920px 82px;
}
.main_section_inner{
  width: 960px;
  margin: 0 auto;
}
.main_ttl{
  margin-bottom: 40px;
  color: #249365;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}
.main_ttl > p{
  font-size: 36px;
}
.alcor_wrap{
  margin-bottom: -32px;
}

.price_wrap .default_btn{
  margin-top: 44px;
}
.default_btn>*{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 380px;
  height: 80px;
  border-radius: 40px;
  font-size: 20px;
  font-weight: bold;
  color: #fff!important;
  background-color: #564333;
  text-align: center;
}
.default_btn>*:hover{
  opacity: .8;
  text-decoration: none;
}
.default_btn>*::before{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 32px;
  margin: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.price_inner01 .default_btn>*{
  background-color: #564333;
}
.price_inner02 .default_btn>*{
  background-color: #249365;
}
.price_inner03 .default_btn>*{
  background-color: #86ac03;
}
/*
search
======================================================= */
/* search01 */
.search01{
  width: 780px;
  margin: 0 auto;
}
.search01 .search_box{
  height: 50px;
  border-radius: 4px;
  border: 2px solid #564333;
}
.search01 .search_box_submit{
  width: 54px;
  background-color: #564333;
  padding: 0;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}
.search01 .search_input{
  padding-left: 8px;
  font-size: 14px;
}
.search01 .search_box_ic{
  font-size: 26px;
}
/* keyword01 */
.keyword01{
  width: 780px;
  margin: 28px auto 0;
}
.keyword01 .keyword_list{
  gap: 16px;
}
.keyword01 .keyword_list > a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  font-size: 16px;
  color: #666;
  background-color: #fff;
  line-height: 1.3;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .16);
  border: none;
}
.keyword01 .keyword_list > a:hover{
  opacity: .8;
}
/*
index
=======================================*/
.index{
  width: 100%;
  overflow: hidden;
}
.index__menu{
  height: 90px;
  background-color: #379124;
}
.index__menuContainer{
  display: flex;
  align-items: stretch;
}
.index__menuList{
  margin: 0 auto;
  width: 960px;
  display: flex;
  align-items: stretch;
  height: 100%;
  border-left: 1px solid #32791d;
  box-sizing: border-box;
}
.index .index__menuItem{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 160px;
}
.index .index__menuItem::before{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-color: #32791d;
  display: block;
  z-index: 1;
}
.index a.index__menuLink:hover{
  text-decoration: none;
}
.index a.index__menuLink{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90px;
  padding-bottom: 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
  box-sizing: border-box;
}
.index a.index__menuLink:hover{
  background-color: #09844c;
}
.index a.index__menuLink::before{
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 12px;
  margin: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  transform: rotate(135deg);
}

/*
 genre
=============================================*/
.genre_wrap ul.genre_list{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 36px 24px;
}
.genre_wrap ul.genre_list li{
  width: calc((100% - 144px - 0.01px)/5);
}
.genre_wrap ul.genre_list li a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}
.genre_wrap ul.genre_list li a:hover{
  opacity: .8;
  text-decoration: none;
}
.genre_wrap ul.genre_list li a ._img{
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}
.genre_wrap ul.genre_list li a p{
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.3;
  color: #333;
}

/*
 pickupLogo, related
=============================================*/
.pickupLogo_wrap ul.pickupLogo_list,
.related_wrap ul.related_list{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.pickupLogo_wrap ul.pickupLogo_list li,
.related_wrap ul.related_list li{
  width: calc((100% - 72px - 0.01px)/4);
}
.pickupLogo_wrap ul.pickupLogo_list li a,
.related_wrap ul.related_list li a{
  display: block;
}
.pickupLogo_wrap ul.pickupLogo_list li a:hover,
.related_wrap ul.related_list li a:hover{
  opacity: .8;
}

/* tab01 */
.tab01 .tab_menuList{
  width: 576px;
  margin: 0 auto 40px;
}
.tab01 .tab_menuItem{
  position: relative;
  display: flex;
  justify-content: center;
  height: 60px;
  align-items: center;
  margin: 0;
  background-color: #fff;
  border: 1px solid #564333;
  border-radius: 0;
  box-sizing: border-box;
  color: #564333;
  line-height: 1;
  padding: 0;
  font-size: 18px;
  line-height: 1.3;
}
.tab01 .tab_menuItem + * {
  border-left: none;
}
.tab01 .tab_menuItem[aria-selected=true] {
  background-color: #564333;
  color: #fff;
  font-weight: bold;
}
.tab01 .tab_menuItem[aria-selected=true]::after{
  position: absolute;
  left: calc(50% - 8px);
  bottom: -7px;
  display: inline-block;
  content: "";
  width: 0;
  height: 0;
  border-color: #564333 transparent transparent;
  border-style: solid;
  border-width: 8px 8px 0;
}
.tab01 .tab_menuItem[aria-selected=true]::before{
  position: absolute;
  left: calc(50% - 8px);
  bottom: -8px;
  display: inline-block;
  content: "";
  width: 0;
  height: 0;
  border-color: #564333 transparent transparent;
  border-style: solid;
  border-width: 8px 8px 0;
}
.tab01 .tab_menuItem[aria-selected=true]:nth-of-type(2) {
  background-color: #249365;
}
.tab01 .tab_menuItem[aria-selected=true]:nth-of-type(3) {
  background-color: #86ac03;
}
.tab01 .tab_menuItem[aria-selected=true]:nth-of-type(2)::after{
  position: absolute;
  left: calc(50% - 8px);
  bottom: -7px;
  display: inline-block;
  content: "";
  width: 0;
  height: 0;
  border-color: #249365 transparent transparent;
  border-style: solid;
  border-width: 8px 8px 0;
}
.tab01 .tab_menuItem[aria-selected=true]:nth-of-type(3)::after{
  position: absolute;
  left: calc(50% - 8px);
  bottom: -7px;
  display: inline-block;
  content: "";
  width: 0;
  height: 0;
  border-color: #86ac03 transparent transparent;
  border-style: solid;
  border-width: 8px 8px 0;
}
.tab01 .tab_menuItem:hover {
  background-color: #564333;
  color: #fff;
  font-weight: bold;
}
.tab01 .tab_menuItem:nth-of-type(2):hover {
  background-color: #249365;
}
.tab01 .tab_menuItem:nth-of-type(3):hover {
  background-color: #86ac03;
}

.ranking_note {
  padding: 52px 16px 0;
  font-size: 12px;
  color: #717171;
}

.ranking_note p{
  text-indent: -1em;
  padding-left: 1em;
}

/*
shop
======================================================= */
.shop_wrap ul.shop_anc_list{
  width: 100%;
  padding: 0 28px 32px;
  box-sizing: border-box;
  gap: 4px 24px;
}
.shop_wrap ul.shop_anc_list li a{
  position: relative;
  display: inline-block;
  padding-left: 18px;
  font-size: 15px;
  color: #333;
  box-sizing: border-box;
}
.shop_wrap ul.shop_anc_list li a:hover{
  text-decoration: underline;
}
.shop_wrap ul.shop_anc_list li a::before{
  content: "";
  position: absolute;
  display: inline-block;
  top: calc(50% - 4px);
  left: 0;
  width: 0;
  height: 0;
  border-color: #333 transparent transparent;
  border-style: solid;
  border-width: 7px 5px 0;
}
.shop_wrap .shop_con_wrap{
  padding: 40px 32px;
  background: #fff;
  /*border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;*/
}
.shop_wrap .shop_con + .shop_con{
  margin-top: 48px;
}
.shop_wrap .shop_con ul{
  width: 100%;
  box-sizing: border-box;
}
.shop_wrap .shop_con ul li a{
  position: relative;
  display: inline-block;
  padding-left: 10px;
  font-size: 14px;
  color: #333;
  line-height: 1.75;
}
.shop_wrap .shop_con ul li a::before{
  content: "";
  position: absolute;
  display: inline-block;
  top: 0;
  bottom: 0;
  left: 1px;
  width: 2px;
  height: 2px;
  margin: auto 0;
  border-radius: 50%;
  background-color: #333;
}
.shop_wrap .shop_con ul li a:hover{
  text-decoration: underline;
}
.shop_wrap .shop_con_ttl{
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 4px solid #249365;
  font-size: 17px;
  font-weight: bold;
  color: #333;
}

.rule{
  padding: 40px 0 32px;
}

/*
navi
======================================================= */
.floating_box .ecm-floating-navi{
  background: #379124;
  height: 60px;
}
.floating_box .ecm-floating-navi-item{
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  padding: 0;
}
.floating_box .ecm-floating-navi-item:first-of-type{
  border-left: 1px solid #32791d;
}
.floating_box .ecm-floating-navi-item::before{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-color: #32791d;
  display: block;
  z-index: 1;
}
.ecm-floating-navi-item.ecm-floating-navi-item-anchor[data-in-viewport=true],
.ecm-floating-navi-item.ecm-floating-navi-item-anchor:hover{
  background-color: #09844c;
  border-bottom: none;
  font-weight: normal;
}
.floating_box .ecm-floating-navi-item span{
  width: 160px;
}
.ecm-floating-navi-container[data-static=false][data-pinned=false]{
  border-bottom: none;
}