@charset "utf-8";
/*---------------------------------
* EPISODES
----------------------------------*/
body {
  background:#000;
}
.content__aroundWrap {
  height: calc(100% - var(--footerHeight));
}
.episodes {
  padding: min(calc(186 / var(--vw-min) * 100vw), 186px) 0 min(calc(220 / var(--vw-min) * 100vw), 220px);
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .episodes {
    padding: calc(170 / var(--vw-min) * 100vw) 0 calc(160 / var(--vw-min) * 100vw);
  }
}

.episodes__content {
  width: min(calc(800 / var(--vw-min) * 100vw), 800px);
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .episodes__content {
    width: 100%;
    padding: 0 calc(48 / var(--vw-min) * 100vw);
    margin: calc(32 / var(--vw-min) * 100vw) 0 calc(48 / var(--vw-min) * 100vw);
  }
}
.episodes__navLists {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom:min(calc(56 / var(--vw-min) * 100vw),56px);
  flex-wrap: wrap;
}
@media screen and (max-width:768px){
  .episodes__navLists {
    margin:0 auto calc(56 / var(--vw-min) * 100vw);
    width:calc(648 / var(--vw-min) * 100vw);
  }
}
.episodes__navLists:before,
.episodes__navLists:after {
  content:'';
  display: block;
  height:1px;
  flex:1;
  background:var(--color-yellow);
  opacity:0.5;
}
@media screen and (max-width:768px){
  .episodes__navLists:before {
    display: none;
  }
}
.episodes__navItem {
  width:min(calc(48 / var(--vw-min) * 100vw),48px);
  margin:0 1px;
}
@media screen and (max-width:768px){
  .episodes__navItem {
    width:calc(70 / var(--vw-min) * 100vw);
    margin:calc(1 / var(--vw-min) * 100vw);
  }
}
.episodes__navLink {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-en);
  font-size:min(calc(18 / var(--vw-min) * 100vw),18px);
  width:100%;
  height:min(calc(48 / var(--vw-min) * 100vw),48px);
  position: relative;
  color:#fff;
}
@media screen and (max-width:768px){
  .episodes__navLink {
    font-size:calc(30 / var(--vw-min) * 100vw);
    height:calc(70 / var(--vw-min) * 100vw);
  }
}
.episodes__navLink.is-active {
  color:var(--color-yellow);
}
.episodes__navLink:before {
  content:'';
  position: absolute;
  left:50%;
  top:50%;
  width:min(calc(34 / var(--vw-min) * 100vw),34px);
  height:min(calc(34 / var(--vw-min) * 100vw),34px);
  box-sizing: border-box;
  margin-left:max(calc(-17 / var(--vw-min) * 100vw),-17px);
  margin-top:max(calc(-17 / var(--vw-min) * 100vw),-17px);
  border:1px solid #fff;
  transform:rotate(360deg) scale(0);
  opacity:0;
  transition:all 0.6s ease;
}
@media screen and (max-width:768px){
  .episodes__navLink:before {
    width:calc(49.5 / var(--vw-min) * 100vw);
    height:calc(49.5 / var(--vw-min) * 100vw);
    margin-left:calc(-24.75 / var(--vw-min) * 100vw);
    margin-top:calc(-24.75 / var(--vw-min) * 100vw);
  }
}
.episodes__navLink:hover:before{
  transform:rotate(45deg) scale(1);
  opacity:.5;
}
.episodes__navLink.is-active:before {
  transform:rotate(45deg) scale(1);
  opacity:.5;
  border-color:var(--color-yellow);
}
.episodes__navLink.is-soon {
  pointer-events: none;
  opacity:.3;
}
.episodes__contentSwiper {
  margin:0 max(calc(-10 / var(--vw-min) * 100vw),-10px) min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:768px){
  .episodes__contentSwiper {
    margin:0 calc(-7 / var(--vw-min) * 100vw) calc(16 / var(--vw-min) * 100vw);
  }
}
.episodes__swiper {
  overflow: visible;
}
.episodes__swiper-slide {
  width:min(calc(820 / var(--vw-min) * 100vw),820px);
  padding:0 min(calc(10 / var(--vw-min) * 100vw),10px);
  opacity:0.5;
}
@media screen and (max-width:768px){
  .episodes__swiper-slide {
    width:calc(668 / var(--vw-min) * 100vw);
    padding:0 calc(7 / var(--vw-min) * 100vw);
  }
}
.episodes__swiper-slide.swiper-slide-active {
  opacity:1;
}
.episodes__thumbLists {
  display: flex;
  margin:0 max(calc(-2 / var(--vw-min) * 100vw),-2px) min(calc(48 / var(--vw-min) * 100vw),48px);
}
@media screen and (max-width:768px){
  .episodes__thumbLists {
    flex-wrap: wrap;
    margin:0 calc(-3 / var(--vw-min) * 100vw) calc(72 / var(--vw-min) * 100vw);
  }
}
.episodes__thumbItem {
  width:calc(100% / 7);
  padding:0 min(calc(2 / var(--vw-min) * 100vw),2px) min(calc(4 / var(--vw-min) * 100vw),4px);
}
@media screen and (max-width:768px){
  .episodes__thumbItem {
    flex:unset;
    padding:0 calc(3 / var(--vw-min) * 100vw) calc(6 / var(--vw-min) * 100vw);
    width:calc(100% / 5);
  }
}
.episodes__thumbLink {
  display: block;
  filter:grayscale(1);
  transition:all 0.3s ease;
}
.episodes__thumbLink:hover {
  filter:grayscale(0);
}
.episodes__thumbLink.is-active {
  filter:grayscale(0);
}
.episodes__thumbLink img {
  width:100%;
  height:auto;
}
.episodes__titles {
  margin:0 -100vw min(calc(48 / var(--vw-min) * 100vw),48px);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  height:min(calc(133 / var(--vw-min) * 100vw),133px);
}
@media screen and (max-width:768px){
  .episodes__titles {
    margin:0 -100vw calc(48 / var(--vw-min) * 100vw);
    height:unset;
    background-size:auto calc(86 / var(--vw-min) * 100vw);
  }
}
.episodes__titlesInner {
  width:min(calc(800 / var(--vw-min) * 100vw),800px);
  margin:0 auto;
  padding-top:min(calc(43 / var(--vw-min) * 100vw),43px);
}
@media screen and (max-width:768px){
  .episodes__titlesInner {
    width:calc(654 / var(--vw-min) * 100vw);
    padding-top:calc(27 / var(--vw-min) * 100vw);
  }
}
.episodes__titleNum {
  font-size:min(calc(18 / var(--vw-min) * 100vw),18px);
  line-height:1.5555;
  font-weight: 600;
  color:var(--color-yellow);
  letter-spacing: 0.1em;
}
@media screen and (max-width:768px){
  .episodes__titleNum {
    font-size:calc(24 / var(--vw-min) * 100vw);
  }
}
.episodes__title {
  line-height: 1.4583;
  font-weight: 700;
  font-size:min(calc(24 / var(--vw-min) * 100vw),24px);
  letter-spacing: 0.06em;
}
@media screen and (max-width:768px){
  .episodes__title {
    font-size:calc(34 / var(--vw-min) * 100vw);
  }
}
.episodes__texts {
  width:min(calc(800 / var(--vw-min) * 100vw),800px);
  margin:0 auto;
}
@media screen and (max-width:768px){
  .episodes__texts {
    width:calc(654 / var(--vw-min) * 100vw);
  }
}
.episodes__description {
  line-height:2.1333;
  letter-spacing: 0.06em;
  font-size:min(calc(15 / var(--vw-min) * 100vw),15px);
  margin-bottom: min(calc(80 / var(--vw-min) * 100vw),80px)
}
@media screen and (max-width:768px){
  .episodes__description {
    font-size:calc(24 / var(--vw-min) * 100vw);
    margin-bottom: calc(64 / var(--vw-min) * 100vw);
  }
}
.episodes__staff-trailer {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width:768px){
  .episodes__staff-trailer {
    display: block;
  }
}
.episodes__staffLists {
  margin-bottom:calc(92 / var(--vw-min) * 100vw);
  width: 60%;
}
@media screen and (max-width:768px){
  .episodes__staffLists {
  width: 100%;
}
}
.episodes__staffItem {
  display: flex;
  font-size:min(calc(15 / var(--vw-min) * 100vw),15px);
  line-height:1.8;
  margin-bottom:0.3333em;
  letter-spacing: 0.06em;
}
@media screen and (max-width:768px){
  .episodes__staffItem {
    font-size:calc(24 / var(--vw-min) * 100vw);
    line-height:1.8;
  }
}
.episodes__staffKey {
  white-space: nowrap;
}
.episodes__staffKey:after {
  content:'：';
}
.episodes__staffVal {
  flex:1;
}
.episodes__trailer {
  width:min(calc(440 / var(--vw-min) * 100vw),440px);
  position: relative;
}
@media screen and (max-width:768px){
  .episodes__trailer {
    width:calc(654 / var(--vw-min) * 100vw);
    position: relative;
  }
}
.episodes__trailerTitle {
  font-size:min(calc(48 / var(--vw-min) * 100vw),48px);
  color:var(--color-yellow);
  line-height:1;
  font-family: var(--font-en);
  z-index:50;
  pointer-events: none;
  position: absolute;
  left:max(calc(-48 / var(--vw-min) * 100vw),-48px);
  top:max(calc(-24 / var(--vw-min) * 100vw),-24px);
}
@media screen and (max-width:768px){
  .episodes__trailerTitle {
    font-size:calc(60 / var(--vw-min) * 100vw);
    left:unset;
    right:calc(-36 / var(--vw-min) * 100vw);
    top:calc(-30 / var(--vw-min) * 100vw);
  }
}
.movieBoxWrap {
  background: #000;
  display: block;
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}
.movieBoxWrap::before {
  background: #000;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  display: block;
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.movieBoxWrap:hover:before {
  opacity: 0;
}
.item_img {
  transition: 0.4s ease;
}
.movieBox {
  width: 100%;
  height: 100%;
  transition: 0.3s ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.play-icon {
  width: min(calc(56 / var(--vw-min) * 100vw), 56px);
  height: min(calc(56 / var(--vw-min) * 100vw), 56px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(../img/common/deco/play_icon.svg) no-repeat center center/contain;
  transform: scale(1);
  transition: 0.4s ease;
}
@media screen and (max-width:768px){
  .play-icon {
    width: calc(96 / var(--vw-min) * 100vw);
    height: calc(96 / var(--vw-min) * 100vw);
  }
}
.btn_moviePlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/*hover*/
.movieBoxWrap:hover .item_img {
  transform: scale(1.05);
}
.movieBox:hover {
  cursor: pointer;
}