@charset "utf-8";


.m_favoriteItem {
  position: relative;
}


.l_grid__inner.m_favoriteItem {
  display: flex;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

/* 既存の共有 li へは Modifier で position だけを足す（全件への波及を避ける） */
.m_contLineup__item--hasFavorite,
.m_lineup_movie_listItem--hasFavorite,
.m_lineup_popularMovie_listItem--hasFavorite {
  position: relative;
}

/* =========================================================
 * m_favoriteBtn : カード右上の円形ハートボタン
 * ======================================================= */
.m_favoriteBtn {
  --_size: clamp(28px, 4.17vw, 32px);
  --_color-heartOn: #8F1E35;
  --_color-heartOff: #9B8E92;
  --_color-face: #fff;
  position: absolute;
  top: calc(var(--_size) / -3);
  right: calc(var(--_size) / -3);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_size);
  height: var(--_size);
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background-color: var(--_color-face);
  color: var(--_color-heartOff);
  cursor: pointer;
  appearance: none;
  
  font-family: inherit;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.m_favoriteBtn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400; /* 400=輪郭ハート（未登録） */
  font-size: calc(var(--_size) * 0.5);
  line-height: 1;
  content: "\f004";
}

.m_favoriteBtn.is_active {
  color: var(--_color-heartOn);
}

.m_favoriteBtn.is_active::before {
  font-weight: 900; /* 900=塗りハート（登録済） */
}

.m_favoriteBtn:hover {
  transform: scale(1.08);
}

.m_favoriteBtn:focus-visible {
  outline: 2px solid var(--_color-heartOn);
  outline-offset: 2px;
}

.m_favoriteBtn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.m_favoriteBtn[disabled]:hover {
  transform: none;
}

/* アイコン単体のボタンでは、名前は読み上げにだけ残す
   （position: absolute で流れから抜くため、旧来の margin: -1px は不要） */
.m_favoriteBtn__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------
 * m_favoriteBtn--pill : 詳細ページのラベル付きボタン
 * ------------------------------------------------------- */

.m_favoriteBtn--pill {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: clamp(11px, 1.56vw, 12px);
  font-weight: bold;
  gap: 6px;
  height: auto;
  line-height: 1;
  min-height: 24px;
  padding: 6px 12px;
  position: static;
  white-space: nowrap;
  width: auto;
}


.m_favoriteBtn--pill::before {
  font-size: 1em;
}

.m_favoriteBtn--pill.is_active {
  border-color: var(--_color-heartOn);
  background-color: #FCE7EE;
}

.m_favoriteBtn--pill:hover {
  transform: none;
  background-color: #FCE7EE;
}

/* ピルではラベルを見せる */
.m_favoriteBtn--pill .m_favoriteBtn__label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

/* =========================================================
 * m_favoriteNav : 「お気に入り一覧」への導線リンク
 *   追従ナビ（js_fixNav）内と、詳細ページのパンくず行右端で共用する。
 * ======================================================= */
.m_favoriteNav {
  --_color-main: #8F1E35;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 18px;
  border: 1px solid var(--_color-main);
  border-radius: 999px;
  background-color: #fff;
  color: var(--_color-main);
  font-size: clamp(12px, 1.82vw, 14px);
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.m_favoriteNav::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f004";
}

.m_favoriteNav:hover {
  background-color: var(--_color-main);
  color: #fff;
}

.m_favoriteNav:focus-visible {
  outline: 2px solid var(--_color-main);
  outline-offset: 2px;
}


.m_favoriteMetaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

/* ---------------------------------------------------------
 * m_favoriteNavRow : パンくず行の右端に導線を並べる器（詳細ページ）
 *   導線リンク自体に外向き margin / float を持たせると Block 外 margin になるため、
 *   並びと間隔はこの器が持つ。SP では gap がそのまま行間になる。
 * ------------------------------------------------------- */
.m_favoriteNavRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* =========================================================
 * m_favoriteSec : /favorite/ 本体
 * ======================================================= */
.m_favoriteSec__body {
  /* 上下どちらの隣接も保証できないため margin を持たせない */
}


.m_favoriteList:empty {
  display: none;
}

/* =========================================================
 * m_favoriteEmpty : 0件時の案内
 * ======================================================= */
.m_favoriteEmpty {
  --_color-main: #8F1E35;
  padding: clamp(20px, 3.65vw, 28px);
  border-radius: 8px;
  background-color: #FCE7EE;
  text-align: center;
}

.m_favoriteEmpty__heading {
  margin-bottom: 16px;
  color: #4B1528;
  font-size: clamp(14px, 2.08vw, 16px);
  font-weight: bold;
}

.m_favoriteEmpty__footer {
  margin-top: 16px;
}

.m_favoriteEmpty__target {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 999px;
  background-color: var(--_color-main);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.m_favoriteEmpty__target:hover {
  opacity: 0.85;
}

.m_favoriteEmpty__target:focus-visible {
  outline: 2px solid var(--_color-main);
  outline-offset: 2px;
}

/* =========================================================
 * m_favoriteNotice : localStorage が使えない環境の注記
 * ======================================================= */
.m_favoriteNotice {
  padding: 12px 16px;
  border: 1px solid #9E2730;
  border-radius: 4px;
  background-color: #FCF4F5;
  color: #4B1528;
  font-size: clamp(12px, 1.82vw, 14px);
}

/* =========================================================
 * m_favoriteSlider : トップの「お気に入りの動画」
 *   段組みは slick（未読込時は横並びフォールバック）が担うため、
 *   このモジュールでは等分グリッドを持たない。
 * ======================================================= */
.m_favoriteSlider__body {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

/* slick 初期化後は slick 側のトラックに任せる */
.m_favoriteSlider.is_sliderReady .m_favoriteSlider__body {
  display: block;
  gap: 0;
}

.m_favoriteSlider__item {
  flex: 0 1 calc((100% - 52px) / 3);
}

.m_favoriteSlider.is_sliderReady .m_favoriteSlider__item {
  flex: none;
  padding-right: 13px;
  padding-left: 13px;
}

@media screen and (max-width: 768px) {
  .m_favoriteSlider__item {
    flex-basis: calc((100% - 26px) / 2);
  }
}

@media screen and (max-width: 599px) {
  .m_favoriteSlider__item {
    flex-basis: 100%;
  }
}


@media screen and (min-width: 769px) {
  .m_searchBoxNav_list.m_searchBoxNav_list--hasFavorite {
    grid-template-columns: repeat(8, 1fr);
  }
}


@media screen and (max-width: 768px) {
  .m_searchBoxNav_list--hasFavorite .m_searchBoxNav_catalog {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
}


.m_searchBoxNav_item--favorite a::before {
  margin-right: 6px;
  color: var(--_color-heartOn, #8F1E35);
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f004";
}

/* ホバー時は箱が #8D1321 に反転する。ハートに色を固定したままだと
   暗赤の上の暗赤で見えなくなるので、a の色（白）を継がせる。 */
@media (any-hover: hover) {
  .m_searchBoxNav_item--favorite a:hover::before {
    color: inherit;
  }
}

/* =========================================================
 * アニメーション抑制
 * ======================================================= */
@media (prefers-reduced-motion: reduce) {
  .m_favoriteBtn,
  .m_favoriteNav,
  .m_favoriteEmpty__target {
    transition: none;
  }
  .m_favoriteBtn:hover {
    transform: none;
  }
}



/* ボタンが消えた分、商品No./更新日を右寄せのまま保つ（子が1つになるため） */
.m_favoriteMetaRow {
  justify-content: flex-end;
}

.m_favoriteBtn--pill,
.m_favoriteNotice,
.m_searchBoxNav_item--favorite {
  display: none;
}


@media screen and (min-width: 769px) {
  .m_searchBoxNav_list.m_searchBoxNav_list--hasFavorite {
    grid-template-columns: repeat(7, 1fr); /* ← 上方の repeat(8, 1fr) の打ち消し */
  }
}


@media screen and (max-width: 768px) {
  .m_searchBoxNav_list--hasFavorite .m_searchBoxNav_catalog {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(33.3333% - 5.33333px);
  }
}