@charset "UTF-8";
:root {
  --contentsBoxShadow: 0 3px 6px #d4cfd68f;
}

.Shopping {
  width: 100%;
  height: auto;
  background-color: var(--color-mainBg);
  padding: 0 0 var(--CommonContentsMargin);
}
.ClickStamp__icon img,
.ClickStamp__tit img,
.ShopSaleInfo__itemBnr img,
.StandardAd__item img,
.Shopping__AdHalfBnr img {
  display: block;
  width: 100%;
  height: auto;
}

.Shopping__rotationBnr {
  padding: 20px 0;
  box-sizing: border-box;
  background-color: var(--color-gray4);
}

.Shopping__standardAd,
.Shopping__recommend,
.Shopping__ranking {
  width: 100%;
  height: auto;
  margin: 0 auto var(--CommonContentsMargin);
  position: relative;
}

.Shopping__saleInfo,
.Shopping__howTo,
.Shopping__pointUp,
.Shopping__newShop,
.Shopping__clickstamp {
  width: 90%;
  height: auto;
  margin: 0 auto var(--CommonContentsMargin);
  position: relative;
}

.Shopping__AdHalfBnr {
  display: block;
  width: 90%;
  max-width: 600px;
  margin: 20px auto;
}
.Shopping__commonLink {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
  text-align: right;
  color: var(--color-link);
  font-size: var(--FontSizeDefault);
}

.Shopping__commonLinkIcon {
  font-size: 20px;
  margin-right: 3px;
}

.StandardAd {
  padding: 30px 5%;
  border-bottom: 1px solid var(--color-gray4);
  margin-bottom: 20px;
  box-sizing: border-box;
}
.StandardAd__List {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 15px;
  column-gap: 15px;
}

.StandardAd__item {
  font-size: var(--FontSizeSubDefault);
  align-items: flex-start;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}
.StandardAd__sale-label {
  background-color: #ff1010;
  color: #fff;
  font-size: var(--FontSizeSubDefault);
  font-weight: bold;
  line-height: 14px;
  padding: 3px 7px;
  border-radius: 100px;
  position: absolute;
  top: 8px;
}
.StandardAd__itemLink {
  width: 25%;
  text-align: center;
}

.StandardAd__caption {
  margin-top: 8px;
  font-size: var(--FontSizeMinimum);
  color: var(--color-font);
  font-weight: bold;
  text-align: center;
}

.ShopSaleInfo__tit {
  width: 100%;
  margin: 0 auto 8px;
  color: var(--color-main);
}

.ShopSaleInfo__inner {
  background-color: var(--color-main);
  border-radius: 15px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: var(--contentsBoxShadow);
}

.ShopSaleInfo__item {
  width: 100%;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  margin: 10px auto 0;
}
.ShopSaleInfo__item:first-child {
  margin-top: 0;
}
.ShopSaleInfo__item:nth-child(n + 6) {
  max-height: 0;
  margin-top: 0;
  padding: 0 10px;
  opacity: 0;
  overflow: hidden;
  transition: 0.3s;
  border-bottom: none;
}
.ShopSaleInfo__item.--open:nth-child(n + 6):nth-child(n + 6) {
  max-height: 300px;
  margin-top: 10px;
  padding: 10px;
  opacity: 1;
  transition: 0.3s;
  border-bottom: 1px dotted var(--color-gray4);
}
.ShopSaleInfo__item.--open:nth-child(n + 6):first-child {
  margin-top: 0;
  border-bottom: none;
}

.ShopSaleInfo__timelimitBox {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  border-bottom: 1px solid var(--color-gray4);
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-weight: bold;
}

.ShopSaleInfo__timelimitWrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.ShopSaleInfo__timelimitCaption {
  font-size: var(--FontSizeSubDefault);
  margin: 0 3px 3px 0;
  color: var(--color-attention);
}

.ShopSaleInfo__timelimit {
  font-size: var(--FontSizeSubDefault);
  color: var(--color-attention);
}
.ShopSaleInfo__timelimit .TxtBig {
  font-size: var(--FontSizeMax);
  margin: 0 3px;
}

.ShopSaleInfo__timelimitDate {
  margin-bottom: 2px;
  text-align: center;
  font-size: var(--FontSizeSubDefault);
  color: var(--color-font);
}

.ShopSaleInfo__item2col {
  display: grid;
  grid-template-columns: min(25%, 120px) 1fr;
  -moz-column-gap: 10px;
  column-gap: 10px;
  position: relative;
}

.ShopSaleInfo__itemBnr {
  position: relative;
  width: 100%;
  height: auto;
}
.ShopSaleInfo__details {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ShopSaleInfo__itemName {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 5px;
}

.ShopSaleInfo__itemTxt {
  margin-bottom: 10px;
}

.ShopSaleInfo__itemPt {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
}

.ShopSaleInfo__moreBtn {
  display: none;
  margin-top: 10px;
}

.RecommendShop__tit {
  width: 90%;
  margin: 0 auto 8px;
}

.PointUpShop__tit {
  margin: 0 auto 8px;
}

.PointUpShop__itemWrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -moz-column-gap: 3%;
  column-gap: 3%;
  row-gap: 10px;
}

.PointUpShop__item:nth-child(n + 7) {
  display: none;
}

.PointUpShop__itemBnr {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-sizing: border-box;
}

.PointUpShop__link {
  padding: 10px 5%;
}

.NewShop__tit {
  margin: 0 auto 8px;
}

.NewShop__itemWrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -moz-column-gap: 3%;
  column-gap: 3%;
  row-gap: 10px;
}

.NewShop__itemBnr {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-sizing: border-box;
}

.NewShop__link {
  padding: 10px 5%;
}

.Ranking__tit {
  width: 90%;
  margin: 0 auto 20px;
}

.Ranking__nav {
  width: 100%;
}

.Ranking__navSlider {
  height: auto;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
  display: flex;
}
.Ranking__navSlider li {
  border: 1px solid var(--color-gray4);
  margin: 0 5px 10px;
  border-radius: 30px;
}

.Ranking__navBtn {
  background: none;
  padding: 8px 15px;
  border-bottom: 0;
  border: none;
  font-weight: normal;
  font-size: 15px;
}

.CommonTab__btn--active {
  color: #fff;
  background: var(--color-font);
  border-radius: 30px;
}
.CommonTab__btn--active:active,
.CommonTab__btn--active:hover {
  color: #fff;
}

.CommonRankingBox__itemBnr {
  align-self: center;
}

.CommonRankingBox__itemReviews {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
  font-size: var(--FontSizeSubDefault);
  color: var(--color-font);
}

#HeaderNavSearchForm__category__shopping-input,
#HeaderNavSearchForm__category__earn-input {
  display: none;
}

#HeaderNavSearchForm__category__shopping-input:checked
  ~ .HeaderNavSearchForm__category__link-box--shopping,
#HeaderNavSearchForm__category__earn-input:checked
  ~ .HeaderNavSearchForm__category__link-box--earn {
  width: 100%;
  height: auto;
  display: block;
}

#ModalTriggerSearch:checked ~ #HeaderNavSearchForm {
  opacity: 1;
  z-index: 10000;
}

#btn-category-shop,
#btn-category-item {
  width: 0;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  box-sizing: border-box;
}
#btn-category-shop input,
#btn-category-item input {
  display: none;
}

#switch-btn-shop:checked ~ #btn-category-shop,
#switch-btn-item:checked ~ #btn-category-item {
  width: 100%;
  height: auto;
  visibility: visible;
  opacity: 1;
}

/*================
共通
================*/
.item_copy {
  color: #ff9900;
  font-size: 15px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  margin-bottom: 5px;
}

.item_title {
  width: 100%;
  font-size: 13px;
  margin-bottom: 5px;
  overflow: hidden;
  vertical-align: middle;
  color: #555;
  font-weight: bold;
  position: relative;
  transition: max-height 0.5s;
  line-height: 1.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.item_pt_before {
  color: #555;
  font-size: 12px;
  white-space: nowrap;
}

.item_pt_after,
.item_pt {
  color: var(--color-attention);
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
  word-break: break-word;
  text-align: right;
}
.item_pt_after .icon-ico_point_bag::before,
.item_pt .icon-ico_point_bag::before {
  display: none;
}

.item_explanation {
  display: none;
}

s {
  display: inline;
  color: #555;
  font-size: 12px;
  font-weight: normal;
}
s::after {
  content: "\a";
  white-space: normal;
}

/*================
あなたへのオススメ
================*/
#OneToOne_shop .recommend_wrap {
  padding: 0 5%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#OneToOne_shop .recommend_wrap .comment_acco_btn {
  position: relative !important;
  width: 100%;
  text-align: center;
}
#OneToOne_shop .recommend_wrap .kutikomi_rate_box_f {
  margin-top: 3px;
}
#OneToOne_shop .recommend_wrap .kutikomi_rating_star_f {
  font-size: 0.7rem;
}
#OneToOne_shop .recommend_wrap .kutikomi_total_num_f {
  font-size: 0.7rem;
}
#OneToOne_shop .recommend_wrap ul.item_atleast_5 {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 10px;
  box-sizing: border-box;
}
#OneToOne_shop .recommend_wrap ul.item_within_4 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 5%;
}
#OneToOne_shop .recommend_wrap ul.item_atleast_5 li {
  min-width: 120px;
  max-width: 120px;
  margin-right: 10px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  position: relative;
}
#OneToOne_shop .recommend_wrap ul.item_within_4 li {
  position: relative;
  width: 42.5%;
  margin-bottom: 30px;
  box-sizing: border-box;
}
#OneToOne_shop .recommend_wrap ul li img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#OneToOne_shop .recommend_wrap ul li .item_explanation {
  margin-bottom: 0;
}
#OneToOne_shop .recommend_wrap .recommend_item_l {
  position: relative;
  height: auto;
  background: var(--color-gray4);
  border: 1px solid var(--color-gray4);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
#OneToOne_shop .recommend_wrap .recommend_item_l::before {
  content: "";
  display: block;
  padding-top: 100%;
}
#OneToOne_shop .recommend_item_r {
  padding: 10px;
}
#OneToOne_shop .recommend_wrap .item_title {
  width: 100%;
  font-size: 13px;
  margin-bottom: 5px;
  overflow: hidden;
  vertical-align: middle;
  color: #555;
  font-weight: bold;
  position: relative;
  transition: max-height 0.5s;
  line-height: 1.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#OneToOne_shop .hidden {
  display: none !important;
}

/*================
onetoone 書き換えの時にクラス名を新しくする
================*/
.onetoone_list {
  overflow-x: scroll;
  width: auto;
  display: flex;
  padding: 0 5%;
}
.onetoone_list li {
  overflow: hidden;
  background: #fff;
  position: relative;
  min-width: 120px;
  max-width: 120px;
  margin-right: 10px;
  border-radius: 10px;
}
.onetoone_list li:last-child {
  margin-right: 0;
}

.onetoone_list .item_img {
  position: relative;
  height: auto;
  background: var(--color-gray4);
  border: 1px solid var(--color-gray4);
}
.onetoone_list .item_img::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.onetoone_list .item_img img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.onetoone_txt {
  padding: 5px 5px 45px;
}

.onetoone_list .item_genre {
  display: none;
}

/*======================= PCのみ ================================*/
.PcShopping {
  background: var(--color-mainBg);
}
.PcShopping__sideColumnBnr {
  width: 200px;
  height: auto;
  position: absolute;
  top: 0;
}
.PcShopping__sideColumnBnr--1 {
  left: -232px;
}
.PcShopping__sideColumnBnr--2 {
  right: -232px;
}
.PcShopping__sideColumnBnr img {
  width: 100%;
  height: auto;
}

.PcShopping__leftColumn {
  grid-column: col-start / span 2;
}

.PcShopping__mainColumn {
  grid-column: col-start 3 / span 8;
}

.PcShopping__rightColumn {
  grid-column: col-start 11 / span 2;
}

.ClickStamp__icon img,
.ClickStamp__tit img,
.Shopping__AdHalfBnr img,
.StandardAd__item img,
.ShopSaleInfo__itemBnr img {
  display: block;
  width: 100%;
  height: auto;
}

.ClickStamp__tit {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 3px;
}
.ClickStamp__list {
  margin-bottom: 20px;
  background: #ffa969;
  padding: 20px 30px;
  border-radius: 5px;
  box-sizing: border-box;
}

.ClickStamp__item {
  display: grid;
  grid-template-columns: 40px 120px 1fr;
  gap: 10px 15px;
  align-items: center;
  padding: 15px 30px;
  border-bottom: 1px dotted #ccc;
  background: #fff;
  border-bottom: 1px solid var(--color-gray4);
}
.ClickStamp__item:last-child {
  border: none;
}

.ClickStamp__icon {
  width: 40px;
  height: auto;
}
.ClickStamp__itemName {
  margin-bottom: 5px;
}

.ClickStamp__pageBtn {
  width: calc(100% - 20px);
  margin: 0 auto 20px;
}

.ClickStamp__BtnMsg {
  width: 100%;
  height: auto;
  margin: 0 auto 10px;
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
}

/*===============
バナークリックでスタンプゲット
===============*/
.clickstamp_box {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-sizing: border-box;
}

.clickstamp_title {
  width: 600px;
  margin: 0 auto 3px;
  height: auto;
  font-weight: bold;
  text-align: center;
}
.clickstamp_title img {
  width: 100%;
  height: auto;
}

.clickstamp_link {
  position: relative;
  background: #ffff88;
  padding: 15px;
  line-height: 1.5;
  font-size: 13px;
  border-radius: 10px;
}

.clickstamp_link:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: -30px;
  width: 0;
  height: 0;
  margin-top: -16px;
  border-top: 16px solid transparent;
  border-right: 15px solid #ffff88;
  border-bottom: 16px solid transparent;
  border-left: 15px solid transparent;
}

.clickstamp_link a {
  color: #08f !important;
}

.clickstamp_box .clickstamp_list {
  margin-bottom: 20px;
  background: #ffa969;
  padding: 20px 30px;
  border-radius: 5px;
  box-sizing: border-box;
}

.clickstamp_box .clickstamp_list li {
  background: #fff;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  align-items: center;
  border-bottom: 1px dotted #ccc;
  padding: 15px 30px;
}

.clickstamp_box .clickstamp_list li:last-child {
  border: none;
}

.clickstamp_li_left {
  width: 40px;
  height: auto;
  margin-right: 30px;
}
.clickstamp_li_left img {
  width: 100%;
  height: auto;
}

.clickstamp_li_center {
  width: 120px;
  margin-right: 30px;
}

.clickstamp_li_right {
  flex: 1;
}

.clickstamp_shop_name a {
  display: block;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #08f !important;
}

.clickstamp_shop_txt {
  font-size: 13px;
}

.clickstamp_link_msg {
  width: 100%;
  height: auto;
  margin: 0 auto 10px;
  text-align: center;
  font-size: 18px;
}

a.clickstamp_link_btn {
  display: block;
  width: 600px;
  height: auto;
  margin: 0 auto 10px;
  background: #ff6e00;
  border-radius: 5px;
  line-height: 2.5em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
a.clickstamp_link_btn i {
  font-size: 20px;
  margin-right: 5px;
}
a.clickstamp_link_btn:hover {
  background: #ff9b4f;
}
a.clickstamp_link_btn:active {
  background: #ff9b4f;
}

.clickstamp_attention {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 13px;
}

/*=================================================================================
メディアクエリ
==================================================================================*/
@media screen and (min-width: 768px) {
  .Shopping__standardAd,
  .Shopping__saleInfo,
  .Shopping__recommend,
  .Shopping__ranking,
  .Shopping__categorySearch {
    width: 90%;
  }
  .Shopping__howToImg {
    width: 90%;
    height: auto;
    margin: 0 auto 50px;
    position: relative;
  }
  .Shopping__howToImg img {
    display: block;
    width: 100%;
    height: auto;
  }
  .Shopping__AdHalfBnr {
    margin-bottom: 50px;
  }
  .Shopping__rotationBnr {
    width: 90%;
    height: auto;
    margin: 0 auto 30px;
    background-color: var(--color-mainBg);
  }
  .StandardAd__sale-label {
    font-size: var(--FontSizeDefault);
    top: 4px;
  }
  .ShopSaleInfo__tit {
    color: #fff;
    margin-bottom: 0;
    padding: 15px 0;
    justify-content: center;
    background-color: var(--color-main);
    border-radius: 15px 15px 0 0;
  }
  .ShopSaleInfo__inner {
    border-radius: 0 0 15px 15px;
    padding: 0 10px 10px;
  }
  .ShopSaleInfo__item {
    margin: 10px auto 0;
    padding: 15px;
  }
  .ShopSaleInfo__timelimitBox {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
  }
  .ShopSaleInfo__item2col {
    display: grid;
    grid-template-columns: 150px 1fr;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
  .RecommendShop .RecommendShop__tit {
    width: 100%;
  }
  .PointUpShop__itemWrap {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 25px;
  }
  .PointUpShop__item {
    grid-column: span 2;
  }
  .PointUpShop__item:nth-child(n + 7) {
    display: block;
  }
  .PointUpShop__link {
    padding: 15px 0;
  }
  .NewShop__itemWrap {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 25px;
  }
  .NewShop__item {
    grid-column: span 2;
  }
  .NewShop__link {
    padding: 15px 0;
  }
  .Ranking__navSlider {
    scrollbar-width: auto;
  }
  .Ranking__navSlider::-webkit-scrollbar {
    height: 4px;
  }
  .Ranking__navSlider::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 2px;
  }
  .Ranking__tit {
    width: 100%;
  }
  .onetoone_list {
    padding: 0 5% 0 0;
  }

  .ShoppingRotationBnr__slider {
    margin: 0 auto;
  }

  .ShoppingRotationBnr__track {
    padding-bottom: 20px;
  }

  .ShoppingRotationBnr__item {
    box-shadow: 3px 4px 8px rgba(212, 207, 214, 0.5529411765);
    border-radius: 10px;
    overflow: visible;
    display: block;
  }

  .ShoppingRotationBnr__img {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    display: block;
  }
  .ShoppingRotationBnr__img img {
    width: 100%;
    height: auto;
  }

  .ShoppingRotationBnr .splide__pagination {
    bottom: -7px;
  }
}