@charset "utf-8";
/* ----- Button ------------------------------------- */
.custom_like-btn {
  color: #afa9aa;
  border: 1px solid #afa9aa;
  border-radius: 50px;
  line-height: normal;
  padding:3px 8px;
  outline: none;
}
.custom_like-btn::before {
  content: '';
  display: inline-block;
  height: 1em;
  vertical-align: middle;
}
.custom_like-btn:is(:hover, :focus) {
  background: #f1f1f1;
  border-color: #dcdddd;
  transition: all .4s;
}
.custom_like-btn:active,
.custom_like--liked,
.custom_like--liked:is(:hover, :focus) {
  color: #ed5d78;
  border: 1px solid #ed5d78;
}
.custom_like-btn:active,
.custom_like--liked:is(:hover, :focus) {
  background: #fdeff2;
}
.custom_like-btn:is(:active, :focus),
.custom_like--liked:is(:active, :focus) {
  color: #fff;
  background: #ed5d78;
}
.custom_like-btn:is(:hover, :focus, :active),
.custom_like--liked:is(:hover, :focus, :active) {
  transition: all .4s;
}
/* クリック禁止 */
.custom_like-btn:disabled {
  color: #afa9aa;
  background: #f1f1f1;
  border-color: #dcdddd;
  cursor:not-allowed;
}
/* ----- Popup -------------------------------------- */
.custom_like-popup {
  color: #555;
  font-size: .875rem;
  background:#fff;
  text-align: left;
  border: 1px solid #dcdddd;
  border-radius: 5px;
  width: 400px;
  box-shadow: 0 5px 8px 0 rgba(220, 221, 221, 0.5);
}

/* 変更不可 */
.custom_like-popup {
  position: absolute;
  padding: 10px;
  margin: 10px auto;
  max-width: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  transition: all .4s ease-out;
  visibility: hidden;
  opacity: 0;
}
.custom_like-popup.show {
  visibility: visible;
  opacity: 1;
}

/* 左寄せ */
.custom_like-wrap--left {
  text-align: left;
}
.custom_like-wrap--left > .custom_like-popup {
  left: 0;
  transform: translateX(50%);
}

/* 右寄せ */
.custom_like-wrap--right {
  text-align: right;
}
.custom_like-wrap--right > .custom_like-popup {
  right: 0;
  transform: translateX(-25%);
}

@media screen and (max-width:767.98px) {
  .custom_like-popup,
  .custom_like-wrap--left > .custom_like-popup,
  .custom_like-wrap--right > .custom_like-popup {
    left: 50%;
    transform: translateX(-50%);
    bottom: auto;
    right: auto;
    margin: 10px auto;
  }
}