@charset "UTF-8";


/*  ハートを表示するエリア  */
.favoArea {
  width: 24px;
  padding: 0 5px;
  /* ハートの横幅       */
}

/*  チェックボックス  */
.favoArea input[type="checkbox"] {
  display: none;
  /* チェックボックス非表示 */
}

/*  チェックボックスのラベル（標準）  */
.favoArea label {
  display: block;
  /* ボックス要素に変更 */
  background-image: url(../images/common/icon_heart-off.png);
  background-repeat: no-repeat;
  height: 24px;
  background-size: contain;
  transition: .4s;
}

/*  チェックボックスのラベル（ONの時）  */
.favoArea #favocheck_r01:checked+label,
.favoArea #favocheck_r02:checked+label,
.favoArea #favocheck_r03:checked+label,
.favoArea #favocheck_r04:checked+label,
.favoArea #favocheck01:checked+label,
.favoArea #favocheck02:checked+label,
.favoArea #favocheck03:checked+label,
.favoArea #favocheck04:checked+label,
.favoArea #favocheck05:checked+label,
.favoArea #favocheck06:checked+label,
.favoArea #favocheck07:checked+label,
.favoArea #favocheck08:checked+label,
.favoArea #favocheck09:checked+label,
.favoArea #favocheck10:checked+label,
.favoArea #favocheck11:checked+label,
.favoArea #favocheck12:checked+label,
.favoArea #favocheck13:checked+label,
.favoArea #favocheck14:checked+label,
.favoArea #favocheck15:checked+label,
.favoArea #favocheck16:checked+label,
.favoArea #favocheck17:checked+label,
.favoArea #favocheck18:checked+label,
.favoArea #favocheck19:checked+label,
.favoArea #favocheck20:checked+label,
.favoArea #favocheck21:checked+label,
.favoArea #favocheck22:checked+label,
.favoArea #favocheck23:checked+label,
.favoArea #favocheck24:checked+label
 {
  background-image: url(../images/common/icon_heart-on.png);
  background-repeat: no-repeat;
  height: 24px;
  background-size: contain;
}

/*  ラベル内の画像（標準） */
.favoArea label img {
  display: block;
  /* ブロック化         */
  /* margin: 6px auto auto auto; */
  /* 上は6pxで中央寄せ  */
}