@charset "utf-8";

/* CSS変数 */
:root {
  --font-serif: "ヒラギノ明朝 Pro", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", serif;
}

#contents-area{
  width: 100%;
  min-width: 990px;
}
.lyt-col-1 #contents-body {
  width: 100%;
}
#str-contents {
  padding: 0;
}

#sports {
  color: #000;
  background: #fff;
  min-width: 300px;
  font-size: 16px;
  line-height: 1.8;
  overflow: hidden;
}
#sports * {
  box-sizing: border-box;
}
#sports ul,
#sports ol,
#sports dl,
#sports dd,
#sports dt {
  margin: 0;
  padding: 0;
}
#sports img:not([class]),
#sports svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
#sports a {
  outline: none;
  text-decoration: none;
}
#sports a:hover {
  color: var( --color-main );
}
#sports .sp {
  display: none;
}
/*
#sports .newwindowicon {
  display: none;
}
*/
#sports .inner {
  max-width: 1028px;
  margin-inline: auto;
  padding-inline: 25px;
}

/* animation */
#sports .js-fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 2s, transform 2s cubic-bezier(0.23, 1, 0.32, 1);
}
#sports .js-fade-up.is-show {
  transform: translateY(0);
  opacity: 1;
}

/* button */
#sports .button-more {
  display: block;
  display: inline-block;
  position: relative;
  align-items: center;
  width: 200px;
  height: 58px;
  text-align: center;
  z-index: 0;
}
#sports .button-more::before {
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100%;
  height: 100%;
  background: linear-gradient( 30deg, #C3C3C3, #000000);
  z-index: -1;
}
#sports .button-more > span {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #000;
  background: #fff;
  line-height: 1.3;
  font-size: 18px;
  font-weight: bold;
  transition: color .3s linear, background .3s linear, transform .3s ease;
}
#sports .button-more > span::after {
  content: '';
  display: block;
  position: absolute;
  right: 20px;
  top: calc( 50% - 10px );
  width: 20px;
  height: 20px;
  background: #000;
  -webkit-mask-image: url(/mobile/set/data/special/sports/img/shared/icon_arrow.svg);
          mask-image: url(/mobile/set/data/special/sports/img/shared/icon_arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  transition: background .3s linear, transform .3s ease;
}
#sports a:hover .button-more span {
  color: #fff;
  background: #000;
  transform: translate( 2px, 2px );
}
#sports a:hover .button-more > span::after {
  background: #fff;
  transform: translateX( 4px );
}

/* mv */
#sports .mv {
  position: relative;
  max-height: 810px;
}
#sports .mv__inner {
  position: relative;
  min-width: 990px;
  max-width: 1400px;
  aspect-ratio: 1400 / 810;
  margin-inline: auto;
}
#sports .mv__image {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin-inline: auto;
  overflow: hidden;
}
#sports .mv__image > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.05);
  opacity: 0;
  transition: transform 5s, opacity 1s linear;
}
#sports .mv.is-show .mv__image > img {
  transform: scale(1);
  opacity: 1;
}
#sports .mv__title {
  position: absolute;
  left: calc( 142% / 1400 * 100 );
  top: calc( 81% / 765 * 100 );
  width: calc( 1119% / 1400 * 100 );
  aspect-ratio: 1119 / 1124;
  transform: translateX(-20px);
  transition: transform 1s ease, opacity 1s linear;
  opacity: 0;
  transition-delay: .8s;
}
#sports .mv.is-show .mv__title {
  transform: translateX(0);
  opacity: 1;
}
#sports .mv__text {
  position: absolute;
  left: calc( 142% / 1400 * 100 );
  top: calc( 251% / 765 * 100 );
  width: calc( 586% / 1400 * 100 );
  aspect-ratio: 586 / 234;
  transform: translateX(-20px);
  transition: transform 1s ease, opacity 1s linear;
  opacity: 0;
  transition-delay: 1.2s;
}
#sports .mv.is-show .mv__text {
  transform: translateX(0);
  opacity: 1;
}
#sports .mv__sports-list {
  position: absolute;
  left: 50%;
  bottom: calc(48% / 765 * 100 );
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: calc( 957% / 1400 * 100 );
  transform: translateX( -50% );
}
#sports .mv__sports-item {
  width: 24.4%;
  transform: translateY( 20px );
  transition: transform 1s ease, opacity 1s linear;
  opacity: 0;
  transition-delay: 2.2s;
}
#sports .mv__sports-item:nth-child(1) { 
  width: 100%;
  margin-bottom: 0.7%;
}
#sports .mv.is-show .mv__sports-item {
  transform: translateY( 0 );
  opacity: 1;
}
#sports .mv__sports-item > a {
  display: block;
  transition: -webkit-filter .3s ease;
  transition: filter .3s ease;
  transition: filter .3s ease, -webkit-filter .3s ease;
}
#sports .mv__sports-item > a:hover {
  -webkit-filter: contrast(90%);
          filter: contrast(90%);
}

/* movie */
#sports .movie-block {
  position: relative;
  padding-block: 180px 128px;
  background: radial-gradient(ellipse 150% 150%, #fff, #C4C4C4);
  z-index: 0;
}
#sports .movie-block::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(/mobile/set/data/special/sports/img/s/bg_secondary-contents.webp) repeat-y center top;
  background-size: 100%;
  z-index: -1;
  mix-blend-mode: screen;
}
#sports .movie__inner {
  max-width: 1028px;
  margin-inline: auto;
  padding-inline: 25px;
}
#sports .movie__ttl {
  width: 874px;
  margin: 0 auto 122px;
}
#sports .movie__thum {
  position: relative;
}
#sports .movie__thum > img {
  transition: -webkit-filter .2s linear;
  transition: filter .2s linear;
  transition: filter .2s linear, -webkit-filter .2s linear;
}
#sports a:hover .movie__thum > img {
  -webkit-filter: brightness(0.7);
          filter: brightness(0.7);
}
#sports .movie__thum::before,
#sports .movie__thum::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
}
#sports .movie__thum::before {
  top: calc( 50% - 68px );
  left: calc( 50% - 68px );
  width: 128px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  opacity: 0.5;
  border: 4px solid transparent;
  transition: opacity .2s linear, scale .2s ease-out, background-color .2s ease, border .2s ease-out, transform .3s ease-out;
}
#sports .movie__thum::after {
  left: calc( 50% - 25px );
  top: calc( 50% - 23px );
  width: 58px;
  height: 50px;
  background: url(/mobile/set/data/special/sports/img/shared/icon_play.svg) no-repeat center / contain;
}
#sports a:hover .movie__thum::before {
  opacity: 0.7;
  background: transparent;
  border-color: #fff;
  transform: scale(1.1);
}
#sports .movie__caption {
  text-align: left;
  margin-bottom: 32px;
}
#sports .movie__caption img {
  width: auto;
  margin-inline: 0;
  height: 35px;
}
#sports .movie__txt01 {
  width: 598px;
  margin: 100px auto 0;
}
#sports .movie__txt02 {
  width: 766px;
  margin: 60px auto 0;
}

/* modal */
:root {
  --mmScrlOffset:0px;
}
.mmWrap {
  --mmPad:3vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: 0.2s opacity;
  background: rgba(17, 17, 17, 0.7333333333);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  outline: none;
}
.mmWrap.-ready {
  opacity: 1;
}
.mmInner {
  position: relative;
  width: 100%;
  max-height: 85vh;
  padding: var(--mmPad);
  overflow: auto;
}
.mmScreen {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(100% - 17px);
  height: 100%;
}
.mmCnt {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  background: #fff;
  outline: none;
}
.mmCnt > img:only-child {
  max-width: 100%;
  max-height: calc(100vh - 8vw);
}
.mmWrap[data-mm-type=iframe] iframe {
  width: 100vw;
  max-width: 100%;
  height: calc(100vh - var(--mmPad) * 2);
}
.mmWrap[data-mm-type=YouTube] .mmCnt {
  width: 100%;
  background: unset;
}
.mmWrap[data-mm-type=YouTube] iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
.mmCaption {
  position: relative;
  color: #fff;
}
.mmCaption:not(:empty) {
  margin-top: 1rem;
  text-align: center;
}
.mmClose, .mmPrev, .mmNext {
  all: unset;
  position: fixed;
  overflow: hidden;
  border-radius: 50%;
  white-space: nowrap;
  text-indent: 100%;
  cursor: pointer;
  transition: 0.15s;
}
.mmClose {
  right: 0;
  top: 0;
  height: 80px;
  width: 80px;
}
.mmClose:before, .mmClose:after {
  content: "";
  display: block;
  width: 70%;
  height: 5%;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  translate: -50% -50%;
}
.mmClose:before {
  rotate: 45deg;
}
.mmClose:after {
  rotate: -45deg;
}
.mmPrev, .mmNext {
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(136, 136, 136, 0.7333333333);
}
.mmPrev:before, .mmNext:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  aspect-ratio: 1/1;
  border: #fff solid;
  border-width: 3px 0 0 3px;
  translate: -50% -50%;
}
.mmPrev {
  left: 1.5vw;
}
.mmPrev:before {
  rotate: -45deg;
  margin-left: 2px;
}
.mmNext {
  right: calc(1.5vw + var(--mmScrlOffset));
}
.mmNext:before {
  rotate: 135deg;
  margin-left: -2px;
}

/* primary-contents */
#sports .primary-contents {
  position: relative;
}
#sports .primary-contents__banner {
  overflow: hidden;
}
#sports .primary-contents__banner > img {
  transition: transform .3s ease, -webkit-filter .3s ease;
  transition: transform .3s ease, filter .3s ease;
  transition: transform .3s ease, filter .3s ease, -webkit-filter .3s ease;
}
#sports .primary-contents__inner {
  position: relative;
}
#sports .primary-contents__button {
  position: absolute;
  right: 0;
  bottom: 40px;
}
#sports a:hover .primary-contents__banner > img {
  transform: scale( 1.01 );
  -webkit-filter: contrast( 70% );
          filter: contrast( 70% )
}

/* secondary-contents */
#sports .secondary-contents {
  position: relative;
  padding-block: 80px;
  background: linear-gradient(to bottom, #F0F0F0, #C4C4C4);
  z-index: 0;
}
#sports .secondary-contents__inner {
  display: flex;
  gap: 56px;
}
#sports .secondary-contents::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(/mobile/set/data/special/sports/img/p/bg_secondary-contents.webp) repeat-y center top;
  background-size: 100%;
  z-index: -1;
  mix-blend-mode: screen;
}
#sports .secondary-contents__banner {
  width: calc( ( 100% - 56px ) / 2 );

}
#sports .secondary-contents__banner a {
  transition: -webkit-filter .3s ease;
  transition: filter .3s ease;
  transition: filter .3s ease, -webkit-filter .3s ease;
}
#sports .secondary-contents__banner a:hover {
  -webkit-filter: contrast(70%);
          filter: contrast(70%);
}