@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_lineup_movie_listItem--hasFavorite {
  --_favoriteBtnInset: 8px;
}


.m_contLineup__item--hasFavorite .m_favoriteBtn {
  --_size: 24px;
}

/* =========================================================
 * m_favoriteBtn : カード右上の円形ハートボタン
 * ======================================================= */
.m_favoriteBtn {
  --_size: clamp(28px, 4.17vw, 32px);
  --_color-heartOn: #8F1E35;
  --_color-heartOff: #9B8E92;
  --_color-face: #fff;
  position: absolute;
  top: var(--_favoriteBtnInset, 0px);
  right: var(--_favoriteBtnInset, 0px);
  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 var(--_color-heartOn);
  border-radius: 999px;
  background-color: var(--_color-heartOn);
  color: #fff;
  font-size: clamp(12px, 1.82vw, 13px);
  font-weight: bold;
  gap: 6px;
  height: auto;
  line-height: 1;
  min-height: 24px;
  padding: 7px 16px;
  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;
  color: var(--_color-heartOn);
}

.m_favoriteBtn--pill:hover {
  transform: none;
}

@media (any-hover: hover) {
  .m_favoriteBtn--pill:hover {
    background-color: #7A1A2D;
  }
  .m_favoriteBtn--pill.is_active:hover {
    background-color: #F7D3DF;
  }
}

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

/* =========================================================
 * m_favoriteNav : 「お気に入り一覧」への固定リンク（詳細ページ）
 *   「似たテーマの動画」の直前に、1ページ1箇所だけ置く。
 * ======================================================= */

.m_favoriteNav {
  --_color-main: #8F1E35;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border: 1px solid var(--_color-main);
  border-radius: 999px;
  background-color: #fff;
  color: var(--_color-main);
  font-size: clamp(13px, 1.95vw, 15px);
  font-weight: bold;
  line-height: 1;
  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";
}

@media (any-hover: hover) {
  .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 を持たせると Block 外 margin になるため、
 *   位置と間隔はこの器が持つ。
 * ------------------------------------------------------- */
.m_favoriteNavRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

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


.m_favoriteList:empty {
  display: none;
}

/* ---------------------------------------------------------
 * m_favoriteHint : 「外したカードがいつ消えるか」の注記
 *   ハートを外してもカードはその場に残す仕様のため、残っている理由を伝える。
 *   注意喚起ではないので m_favoriteNotice（赤枠）より弱い見た目にする。
 * ------------------------------------------------------- */
.m_favoriteHint {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 4px;
  background-color: #F4F1F2;
  color: #4B1528;
  font-size: clamp(12px, 1.82vw, 13px);
}

/* =========================================================
 * 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[hidden] {
  display: none;
}


.m_favoriteSlider {
  padding-bottom: 30px;
  border-bottom: 1px solid #333;
}

.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__inner {
  display: flex;
}


.m_favoriteSlider .m_lineup_movie_card {
  max-width: none;
}


.m_favoriteSlider .slick-arrow {
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin: auto 0;
  border: 1px solid;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
}

.m_favoriteSlider .slick-prev {
  left: 0;
  transform: none;
}

.m_favoriteSlider .slick-next {
  right: 0;
  transform: none;
}

.m_favoriteSlider .slick-arrow::before {
  width: 6px;
  height: 6px;
  margin: auto;
  border: 0;
  border-top: 1px solid;
  border-left: 1px solid;
}

.m_favoriteSlider .slick-prev::before {
  right: -3px;
  transform: rotate(-45deg);
}

.m_favoriteSlider .slick-next::before {
  left: -3px;
  transform: rotate(135deg);
}

.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;
  }
}

/* =========================================================
 * アニメーション抑制
 * ======================================================= */
/* =========================================================
 * 詳細ページの追従ナビ（.bottomSubNav）に置く円形ボタン2つ
 *   ① m_favoriteBtn--nav   … お気に入り登録／解除
 *   ② m_favoriteNavLink    … お気に入り一覧へ
 * ======================================================= */

@media screen and (min-width: 769px) {
  .bottomNavWrapper-search {
    min-width: 374px; /* 既定の 448px を、中身の自然幅まで下げる */
  }
  /* 余りは検索側に吸わせる。円の数が変わっても手で数値を直さなくて済む */
  .bottomSubNav_itm_search {
    flex: 1 1 auto;
  }
}

.bottomSubNav_itm_favorite {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

/* 2つのボタンで円形の見た目を共有する。
   トグル側は .m_favoriteBtn を継いでいるので position だけ戻せばよいが、
   リンク側は <a> で何も継いでいないため、ここで一式を持たせる。 */

.m_favoriteBtn--nav,
.m_favoriteNavLink {
  --_size: 34px;
  position: relative; /* ツールチップ（__label）の基準にする */
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--_size);
  height: var(--_size);
  padding: 0;
  border: 1px solid #E2DADD;
  border-radius: 50%;
  background-color: #F4F1F2;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

@media (any-hover: hover) {
  .m_favoriteBtn--nav:hover {
    border-color: var(--_color-heartOn);
    background-color: #FCE7EE;
  }
}

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

/* 登録済みの状態は、色だけでなく塗りハート（基底の font-weight:900）でも
   示される。色が見えない環境でも区別できるようにするため。 */

/* ---------------------------------------------------------
 * m_favoriteNavLink : 「お気に入り一覧へ」の円形リンク
 * ------------------------------------------------------- */

.m_favoriteNavLink {
  --_color-main: #8F1E35;
  color: var(--_color-main);
}

.m_favoriteNavLink::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  content: "\f03a";
}

@media (any-hover: hover) {
  .m_favoriteNavLink:hover {
    border-color: var(--_color-main);
    background-color: var(--_color-main);
    color: #fff;
  }
}

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

/* ---------------------------------------------------------
 * 追従ナビの円形ボタンのツールチップ
 * ------------------------------------------------------- */

.m_favoriteBtn--nav .m_favoriteBtn__label,
.m_favoriteNavLink__label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 20;
  width: auto;
  height: auto;
  padding: 5px 9px;
  overflow: visible;
  border: 0;
  border-radius: 4px;
  opacity: 0;
  background-color: #333;
  color: #fff;
  clip-path: none;
  font-size: 11px;
  font-weight: normal;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.15s ease;
}

/* 一覧リンクは器の右端にあるので、吹き出しも右揃えにする */
.m_favoriteNavLink__label {
  right: 0;
  left: auto;
  transform: none;
}

@media (any-hover: hover) {
  .m_favoriteBtn--nav:hover .m_favoriteBtn__label,
  .m_favoriteNavLink:hover .m_favoriteNavLink__label {
    opacity: 1;
  }
}

.m_favoriteBtn--nav:focus-visible .m_favoriteBtn__label,
.m_favoriteNavLink:focus-visible .m_favoriteNavLink__label {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .m_favoriteBtn,
  .m_favoriteNav,
  .m_favoriteNavLink,
  .m_favoriteEmpty__target {
    transition: none;
  }
  .m_favoriteBtn:hover {
    transform: none;
  }
}



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

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


@media screen and (min-width: 769px) {
  .bottomNavWrapper-search {
    min-width: 448px; /* ← 上方の 374px の打ち消し */
  }
  .bottomSubNav_itm_search {
    flex: 0 1 auto; /* ← 上方の 1 1 auto の打ち消し（flex の初期値） */
  }
}


@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);
  }
}