/* ! --------------------------------------------------
variable
-------------------------------------------------- */
:root{
  --gold: #C9A777;
  --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（美コインショップ）
-------------------------------------------------- */
.p-fivestar__online{
  margin: 0 0 24px;
}
.p-fivestar__online .bg_fivestar{
  border: 1px solid var(--gold);
}
.p-fivestar__online--head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
}
.p-fivestar__online--logo{
  display: flex;
  align-items: center;
  gap: 16px;
}
.p-fivestar__online--logo p{
  line-height: 1.5em;
}
.p-fivestar__online--head .btn{
  padding: 3px 10px;
  height: 32px;
  background-color: #fff;
}
.p-fivestar__online--head .btn,
.p-fivestar__online--head .btn *{
  color: initial;
}
.p-fivestar__online--head .btn:hover{
  background-color: transparent;
}
.p-fivestar__online--head .btn:hover,
.p-fivestar__online--head .btn:hover *{
  color: #fff;
}
.p-fivestar__online--body{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 20px;
  background-color: #fff;
}
.p-fivestar__online--body *{
  color: initial;
}
@media screen and (max-width: 576px) {
  .p-fivestar__online--logo{
    gap: 8px;
  }
  .p-fivestar__online--logo img{
    width: 110px;
    height: 50px;
  }
  .p-fivestar__online--logo p{
    font-size: 12px;
  }
}
@media screen and (max-width: 480px) {
  .p-fivestar__online--head{
    padding: 12px;
  }
  .p-fivestar__online--body{
    padding: 12px;
  }
}

/* FIVESTAR会員の場合 */
.fivestar .p-fivestar__online--body{
  background-color: rgba(0, 0, 0, .3);
}
.fivestar .p-fivestar__online--body *:not(.text_pink){
  color: #fff;
}
.p-fivestar__online.fivestar .p-fivestar__caution{
  display: none;
}

/* 注意文 */
.p-fivestar__caution{
  color: var(--pink);  
  font-size: 12px;
  line-height: 1.5em !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  padding: .5em 16px;
  border: 1px solid var(--pink);
  border-radius: 2px;
  background-color: rgba(230, 46, 139, .05);
}
.p-fivestar__caution::before{
  content: "";
  display: block;
  min-width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.99967 1.33398C4.31967 1.33398 1.33301 4.32065 1.33301 8.00065C1.33301 11.6807 4.31967 14.6673 7.99967 14.6673C11.6797 14.6673 14.6663 11.6807 14.6663 8.00065C14.6663 4.32065 11.6797 1.33398 7.99967 1.33398ZM7.99967 8.66732C7.63301 8.66732 7.33301 8.36732 7.33301 8.00065V5.33398C7.33301 4.96732 7.63301 4.66732 7.99967 4.66732C8.36634 4.66732 8.66634 4.96732 8.66634 5.33398V8.00065C8.66634 8.36732 8.36634 8.66732 7.99967 8.66732ZM8.66634 11.334H7.33301V10.0007H8.66634V11.334Z" fill="%23E62E8B"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 576px) {
  .p-fivestar__caution{
    font-size: 12px !important;
  }
}

/* 閲覧履歴 */
.history_box .p-fivestar__item.card{
  min-width: 160px;
  padding: 0 10px;
}