
@media (min-width: 681px) {
  html.has-go6 a.mv > .mv__img { position: relative; }
  span.go6 { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 36px 12px 12px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6)); color: #fff; font: 800 13px/1 var(--jp); letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 260ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1); }
  span.go6 i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0b0f17; font-style: normal; text-shadow: none; }
  a:focus-visible > .cv__img > .go6, a:focus-visible > .poster__img > .go6, a:focus-visible > .mv__img > .go6 { opacity: 1; transform: none; }
  .covers.is-drag a.cv .go6 { opacity: 0; }
  
  a.poster > .poster__img > span.go6 { padding: 46px 16px 14px; font-size: 14px; }
  a.poster > .poster__img > span.go6 i { width: 34px; height: 34px; }
  a.mv > .mv__img > span.go6 { padding: 56px 18px 16px; font-size: 15px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.68)); }
  a.mv > .mv__img > span.go6 i { width: 38px; height: 38px; font-size: 17px; }
  
  .mv-more a::after { content: "↗"; margin-left: 3px; font-size: 11px; }
  .mv-more a:hover, .mv-more a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  i.go6m { display: none; }
}
@media (min-width: 681px) and (hover: hover) and (pointer: fine) {
  a.cv:hover .go6, a.poster:hover .go6, a.mv:hover .go6 { opacity: 1; transform: none; transition-delay: 80ms; }
  .covers.is-drag a.cv:hover .go6 { opacity: 0; }
}

@media (max-width: 680px) {
  html.has-go6m .sph-img, html.has-go6m a.mv > .mv__img { position: relative; }
  i.go6m { position: absolute; right: 4px; top: 4px; z-index: 3; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.95); color: #0b0f17; font: 800 9px/1 var(--jp); font-style: normal; text-shadow: none; box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: scale(.6); }
  #highlights i.go6m { right: 5px; top: 5px; width: 18px; height: 18px; font-size: 10px; }
  #mv i.go6m { right: 8px; top: 8px; width: 26px; height: 26px; font-size: 13px; }
  i.go6m.is-on { animation: go6mPop 1900ms cubic-bezier(.22, 1, .36, 1) var(--gd, 0ms) both; }
  a:active > .sph-img > i.go6m, a:active > .spc__img > i.go6m, a:active > .sps__img > i.go6m, a:active > .mv__img > i.go6m { opacity: 1; transform: none; animation: none; }
  span.go6 { display: none; }
}
@keyframes go6mPop { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.1); } 20% { opacity: 1; transform: scale(1); } 74% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.92); } }
@keyframes go6mFade { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { span.go6 { transition: none; transform: none; } i.go6m { transform: none; } i.go6m.is-on { animation-name: go6mFade; } }
