/* ! --------------------------------------------------
variable
-------------------------------------------------- */
:root{
  --gold: #C9A777;
  --gold-light: #e6c597;
  --pink :#E72E8B;
  --purple:#64286C;
  --bg-fivestar: rgb(157,80,187);
  --bg-fivestar-grade: linear-gradient(90deg, rgba(157,80,187,1) 0%, rgba(110,72,170,1) 100%);
  --bg-gold: rgb(172,125,53);
  --bg-gold-grade: linear-gradient(90deg, rgba(172,125,53,1) 0%, rgba(201,167,119,1) 31%, rgba(243,222,191,1) 65%, rgba(172,125,53,1) 100%);
}

/* ! --------------------------------------------------
- FIVESTAR（背景に関して）
-------------------------------------------------- */
/* カラー */
.bg_fivestar{
  background: var(--bg-fivestar);
  background: var(--bg-fivestar-grade);
}
.bg_fivestar *{
  color: #fff;
}
.bg_fivestar .bg_white *{
  color: initial;
}
.bg_fivestar .text_pink{
  color: var(--pink);
}
.text_fivestar{
  color: var(--bg-fivestar);
}
.text_gold{
  color: var(--gold);
}
.text_gold_light{
  color: var(--gold-light);
}

/* ボタン */
.bg_fivestar .btn_outline_gray{
  color: #fff;
}
.bg_fivestar .btn_outline_gray:hover{
  color: initial;
}
.bg_fivestar .btn_outline_gray:hover span{
  color: #000;
}

/* ロゴ */
.logo_fivestar{
  text-align: center;
  padding: 10px 24px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: var(--bg-fivestar);
  background: var(--bg-fivestar-grade);
}

/* ! --------------------------------------------------
- FIVESTAR（テキスト）
-------------------------------------------------- */
/* テキスト */
.p-fivestar--text{
  font-weight: 400;
  letter-spacing: .06em;
}
.p-fivestar--text.font_weight_bold{
  font-weight: 700;
}
.p-fivestar--text span{
  letter-spacing: .1em;
}

/* ! --------------------------------------------------
- FIVESTAR（タブ）
-------------------------------------------------- */
.p-fivestar--tab .nav_pill{
  gap: 1rem;
}
.p-fivestar--tab .nav_pill.theme_pink .nav_item{
  color: #FFF;
  margin: 0;
  min-width: 160px;
  text-align: center;
}
.p-fivestar--tab .content-block .bg_white{
  padding: 4em;
  border-radius: 5px;
}
.p-fivestar--tab .news_box{
  margin: 20px 0 45px;
}
@media screen and (max-width: 991px) {
  .p-fivestar--tab .content-block .bg_white{
    padding: 4em 2em;
  }
}


/* ! --------------------------------------------------
- FIVESTAR（リスト）
-------------------------------------------------- */
/* レビューリスト */
.p-fivestar__reviewList {
  font-feature-settings: "palt";
}
.p-fivestar__reviewList .bg_white{
  padding: 2em;
  border-radius: 5px;
}
.p-fivestar__reviewList *{
  color: initial;
}
@media screen and (max-width: 960px) {
  .p-fivestar__reviewList .bg_white{
    padding: 2em 1em;
  }
}

.p-fivestar__reviewList ul{
  margin: -16px -10px !important;
}
.p-fivestar__reviewList--item{
  position: relative;
}
.p-fivestar__reviewList--item {
  padding: 16px 10px !important;
}
.p-fivestar__reviewList--item article > a{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.p-fivestar__reviewList--item article:has( > a:hover) .ttl{
  color: var(--gold);
  text-decoration: underline;
}
.p-fivestar__reviewList--item .block_user{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex: auto !important;
  z-index: 2;
}
.p-fivestar__reviewList--item .block_user a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.p-fivestar__reviewList--item .block_user [class*="thumb"] {
  flex: 0 0 20px;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: 50px;
  margin: 0 8px 0 0;
}
.p-fivestar__reviewList--item .block_user [class*="thumb"]::before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.p-fivestar__reviewList--item .name{
  margin: 0;
}
.p-fivestar__reviewList--item .ttl{
  font: 600 16px / 1.3em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;
  white-space: initial;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 4px;
}
.p-fivestar__reviewList--item .description{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4em;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
}
.p-fivestar__reviewList--item .rating{
  margin: 4px 0;
}
.p-fivestar__reviewList--item .area_blog_info{
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 28px;
  white-space: nowrap;
  margin: 0 0 6px !important;
}
.p-fivestar__reviewList--item .block_user{
  flex: auto;
  z-index: 2;
}
.p-fivestar__reviewList--item .block_user:hover{
  opacity: .7;
}
.p-fivestar__reviewList--item .label{
  font-size: 12px;
  font-weight: 700;
  opacity: .5;
}
.p-fivestar__reviewList--item .purchased{
  margin: 1rem 0 0;
}
.p-fivestar__reviewList--item .purchased *{
  margin: 0;
}
.p-fivestar__reviewList--item .purchased__item{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.p-fivestar__reviewList--item .purchased__img{
  width: fit-content;
  max-width: 40px;
}
.p-fivestar__reviewList--item .purchased__img img{
  max-width: 100%;
}
.p-fivestar__reviewList--item .purchased__name{
  font-size: 12px;
  font-weight: 700;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .p-fivestar__reviewList ul{
    margin: -16px -5px !important;
  }
  .p-fivestar__reviewList--item {
    padding: 16px 5px !important;
  }
}
@media screen and (max-width: 480px) {
  .p-fivestar__reviewList--item .ttl{
    font-size: 14px;
  }
  .p-fivestar__reviewList--item .purchased__item{
    grid-template-columns: 40px 1fr;
    gap: 6px;
  }
}

/* サイズ sm */
.sm .p-fivestar__reviewList--item .rating_item .star{
  width: 10px;
  height: 10px;
}
.sm .p-fivestar__reviewList--item .ttl{
  font-size: 15px;
  -webkit-line-clamp: 1;
}
.sm .p-fivestar__reviewList--item .description{
  font-size: 11px;
}
.sm .p-fivestar__reviewList--item .purchased{
  margin: .5rem 0 0;
}
.sm .p-fivestar__reviewList--item .label{
  font-size: 11px;
}
.sm .p-fivestar__reviewList--item .purchased__name{
  font-size: 11px;
}

/* 縦並び */
.p-fivestar__reviewList--item.column > article{
  flex-direction: column;
}
.p-fivestar__reviewList--item.column .main{
  display: grid;
  grid-template-columns: 1fr 2.6fr;
  gap: 40px;
}
.p-fivestar__reviewList--item.column .text{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.p-fivestar__reviewList--item.column .rating{
  margin: 0;
}
.p-fivestar__reviewList--item.column .ttl{
  font-size: 24px;
  margin: 0;
}
.p-fivestar__reviewList--item.column .description{
  font-size: 14px;
  -webkit-line-clamp: 1;
  white-space: wrap;
}
.p-fivestar__reviewList--item.column .p-fivestar--image{
  margin: 0;
}
@media screen and (max-width: 960px) {
  .p-fivestar__reviewList--item.column .main{
    gap: 30px;
  }
}
@media screen and (max-width: 768px) {
  .p-fivestar__reviewList--item.column .main{
    grid-template-columns: 160px 1fr;
  }
  .p-fivestar__reviewList--item.column .ttl{
    font-size: 20px;
  }
}
@media screen and (max-width: 560px) {
  .p-fivestar__reviewList--item.column .main{
    gap: 20px;
  }
  .p-fivestar__reviewList--item.column .ttl{
    font-size: 18px;
  }
}
@media screen and (max-width: 480px) {
  .p-fivestar__reviewList--item.column .main{
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  .p-fivestar__reviewList--item.column .p-fivestar--image{
    max-height: max-content;
  }
  .p-fivestar__reviewList--item.column .text{
    gap: 4px;
  }
  .p-fivestar__reviewList--item.column .description{
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
}

/* オンラインショップ 商品リスト */
.p-fivestar__productList{
  margin-top: 55px;
  font-feature-settings: "palt";
}
.p-fivestar__item{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 15px 20px;
}
.p-fivestar__item + .p-fivestar__item{
  margin: 30px 0 0;
}
.p-fivestar__item .p-fivestar--image{
  margin: 0;
  aspect-ratio: 1 / 1;
  grid-row: 1 / 3;
}
.p-fivestar__item--ttl{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5 !important;
  margin: 0 0 5px;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: initial;
  overflow: hidden;
}
.p-fivestar__item--productInfo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.p-fivestar__item--productNum{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 12px;
}
.p-fivestar__item--btn{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
/* 注文者ボタン */
.btn_orderer{
  font-size: 12px;
  display: flex;
  gap: 10px;
  padding: 6px 8px; 
  border-color: #EAE1EA;
  background-color: #fff;
}
.btn_orderer.btn_next::before{
  background-image: url(../../images/admin/ico_prev.svg);
  transform: translateY(-50%) rotate(-180deg);
  z-index: 101;
}
.btn_orderer::after{
  content: "一覧を見る";
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EAE1EA;
  position: absolute;
  inset: 0;
  z-index: 100;
  opacity: 0;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.btn_orderer:hover::after{
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .p-fivestar__item{
    grid-template-columns: 120px 1fr;
    gap: 15px 10px;
  }
  .p-fivestar__item .p-fivestar--image{
    grid-row: 1 / 2;
  }
  .p-fivestar__item--btn{
    grid-column: 1 / 3;
  }
}
@media screen and (max-width: 576px) {
  .p-fivestar__item--status{
    margin: 0 0 5px;
  }
}
@media screen and (max-width: 480px) {
  .p-fivestar__item{
    grid-template-columns: 100px 1fr;
    gap: 10px;
  }
  .p-fivestar__item--btn{
    grid-template-columns: 1fr;
  }
}
/* カードタイプ */
.p-fivestar__productList:has(.card){
  display: grid;
  grid-template-columns: repeat(6,1fr);
  align-items: flex-start;
  gap: 20px;
  padding: 0;
  margin: 0;
}
.p-fivestar__item.card{
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
  flex: 0 0 auto; 
}
.p-fivestar__item.card + .p-fivestar__item.card{
  margin: 0;
}
.card .p-fivestar__item--ttl{
  font-size: 14px;
  -webkit-line-clamp: 3;
}
.card .p-fivestar__item--productInfo{
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}
@media screen and (max-width: 800px) {
  .p-fivestar__productList:has(.card){
    grid-template-columns: repeat(3,1fr);
  }
}
@media screen and (max-width: 480px) {
  .p-fivestar__productList:has(.card){
    grid-template-columns: repeat(2,1fr);
  }
  .p-fivestar__item.card{
    gap: 16px;
  }
  .p-fivestar__item.card .p-fivestar--image{
    aspect-ratio: 3 / 2;
  }
  .card .p-fivestar__item--ttl{
    font-size: 13px;
  }
}

/* 画像 */
.p-fivestar--image{
  padding: 0 !important;
  margin: 0 0 8px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  box-shadow: 0px 1px 14px 0px rgba(40, 96, 119, .1);
  background-color: #FFF;
  max-height: 170px;
  aspect-ratio: 5/3;
  /* min-height: 170px; */
  overflow: hidden;
}
.p-fivestar--image .img{
  margin: 0 !important;
  height: 100%;
  background-size: cover !important;
}
.p-fivestar--image img{
  position: relative;
  inset: 0;
  transform: translateY(0) translateX(0);
}

/* 販売ステータス */
.p-fivestar__item--status{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 10px;
}
.p-fivestar__item--status span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  padding: 4px;
  border-radius: 2px;
  background-color: transparent;
  /* margin: 0 0 10px; */
}
.p-fivestar__item--status span::before{
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
/* 販売中 */
.p-fivestar__item--status .sale{ background-color: #62296B; }
.p-fivestar__item--status .sale::before{ content: "販売中"; }
/* 注文済み */
.p-fivestar__item--status .ordered{ background-color: #00CA9A; }
.p-fivestar__item--status .ordered::before{ content: "注文済み"; }
/* 販売予定 */
.p-fivestar__item--status .schedule{ background-color: #9EB1BF; }
.p-fivestar__item--status .schedule::before{ content: "販売予定"; }
/* 完売 */
.p-fivestar__item--status .soldOut{ background-color: #ccc; }
.p-fivestar__item--status .soldOut::before{ content: "完売"; }

/* ! --------------------------------------------------
- FIVESTAR（ユーザーサムネイル）
-------------------------------------------------- */
/* ユーザー情報 */
.p-fivestar__user{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.p-fivestar__user--thumb{
  width: 48px;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}
.p-fivestar__user--membership{
  display: flex;
  align-items: center;
  min-width: 140px;
}
.p-fivestar__user:has(.logo) .p-fivestar__user--text{
  margin-inline-end: 16px;
}
a:hover:has(.p-fivestar__user){
  text-decoration: none;
}
a:hover .p-fivestar__user--name{
  text-decoration: underline;
}

/* ユーザーリスト */
.p-fivestar__userThumb{
  display: flex;
  align-items: center;
  gap: 10px;
}
.p-fivestar__userThumb--total{
  display: flex;
  align-items: center;
  position: absolute;
  top: 5px;
  right: 110px;
}
.p-fivestar__userThumb--total span:nth-child(2){
  margin-inline: 4px 2px;
  margin-block: 0 4px;
}
.p-fivestar__userThumb--list{
  display: flex;
  align-items: center;
}
.p-fivestar__userThumb--list .thumb{
  width: 40px;
  border: 1px solid #fff;
  background-size: cover;
}
.p-fivestar__userThumb--list .thumb + .thumb{
  margin-inline-start: -18px;
}
.p-fivestar__userThumb--list .thumb.sm{
  width: 20px;
}
.p-fivestar__userThumb--list .thumb.sm + .thumb.sm{
  margin-inline-start: -5px;
}
.p-fivestar__userThumb:has(.thumb.sm){
  gap: 5px;
}
.p-fivestar__userThumb--other{
  color: #64286C;
  font-weight: 500;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 100px;
  background-color: #fff;
}
.p-fivestar__userThumb--other.purple{
  color: #fff;
  background-color: #64286C;
}

/* ! --------------------------------------------------
- FIVESTAR（FIVESTAR 進捗バー）
-------------------------------------------------- */
.p-fivestar__meter{
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}
.p-fivestar__meter--head{
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 12px;
  margin: 0;
}
.p-fivestar__meter--head .ttl{
  margin: 0 auto 0 0;
  color: #708090;
}
.p-fivestar__meter--head .remaining{
  margin-inline-start: auto;
}
.p-fivestar__meter--head.row {
  flex-wrap: nowrap;
}
.p-fivestar__meter--head.row .ttl{
  width: auto;
}
.p-fivestar__meter--head.row .remaining{
  margin-inline-start: 0;
}
@media screen and (max-width: 576px) {
  .p-fivestar__meter--head.row .ttl{
    font-size: 12px;
  }
}
@media screen and (max-width: 480px) {
  .p-fivestar__meter--head.row {
    flex-wrap: wrap;
  }
  .p-fivestar__meter--head.row .ttl{
    width: 100%;
  }
  .p-fivestar__meter--head.row .total{
    margin-inline-end: auto;
  }
}

.p-meter__bar{
  width: 100%;
  height: 12px;
  border-radius: 12px;
  background-color: #ddd;
}
.p-meter__bar--progress{
  height: 100%;
  border-radius: 12px;
  background: var(--bg-fivestar);
  background: var(--bg-fivestar-grade);
}
.p-meter__scale{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  margin: -12px 0 0;
}
.p-meter__scal--item{
  text-align: right;
  padding-block-start: 32px;
  position: relative;
}
.p-meter__scal--item::before{
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: #ccc;
  position: absolute;
  top: 0;
  right: 0;
}
.p-meter__scal--item:last-child::before{
  display: none;
}
.p-meter__scal--item span{
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  bottom: 0;
  right: -8px;
}
.p-meter__scal--item:last-child span{
  right: 0 !important;
}
/* 累計美コイン数 */
.p-meter__scale.bcoin{
  grid-template-columns: repeat(4,1fr);
}
.bcoin .p-meter__scal--item{
  padding-block-start: 28px;
}
.bcoin .p-meter__scal--item span{
  right: -10px;
}

/* FIVESTAR会員の場合 */
.fivestar .p-meter__bar--progress{
  background: var(--bg-gold);
  background: var(--bg-gold-grade)
}
.fivestar .p-meter__scal--item::before{
  background-color: #fff;
}
/* FIVESTAR会員ではない場合 表示/非表示 */
.excludeFivestar .on{
  display: none;
}
.excludeFivestar .off{
  display: block;
}
/* FIVESTAR会員の場合 表示/非表示 */
.fivestar .on{
  display: block;
}
.fivestar .off{
  display: none;
}

/* ! --------------------------------------------------
- FIVESTAR（会員一覧）
-------------------------------------------------- */
.p-fivestar__member{
  max-width: 100%;
  position: relative;
  font-feature-settings: "palt";
}
.p-fivestar__member--item{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.p-fivestar__member--item a{
  position: absolute;
  inset: 0;
  z-index: 2;
}
.p-fivestar__member--item:hover .name,
.p-fivestar__member--item:hover .name *{
  color: var(--gold);
}
.p-fivestar__member--item:hover .name{
  text-decoration: underline;
}

.p-fivestar__member--item .img_circle{
  width: 100px;
  border: 1px solid var(--gold);
}
.p-fivestar__member--item .rating_item{
  margin: 0;
  line-height: 1;
}
.p-fivestar__member--bcoin .image_bcoin_medium{
  width: 18.85px;
  height: 18.85px;
}
.p-fivestar__member-nav > button[class^="owl-"] {
  position: absolute;
  user-select: none;
  outline: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0);
  padding: 0 20px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  opacity: 0;
  z-index: 2;
  transition: all 0.25s ease;
  width: 40px;
  height: 160px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--gold);
}
.p-fivestar__member:hover .p-fivestar__member-nav > button[class^="owl-"] {
  opacity: 1;
} 
.p-fivestar__member-nav > button[class^="owl-"] span{
  color: var(--gold);
}
.p-fivestar__member-nav .owl-prev{
  left: 20px;
  box-shadow: 8px 0 8px 0 rgba(0, 0, 0, 0.1);
}
.p-fivestar__member-nav .owl-next{
  right: 20px;
  box-shadow: -8px 0 8px 0 rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 576px) {
  .p-fivestar__member-nav > button[class^="owl-"] {
    opacity: 1;
    width: 28px;
  }
  .p-fivestar__member-nav .owl-prev{
    left: 10px;
  }
  .p-fivestar__member-nav .owl-next{
    right: 10px;
  }
}