@charset "UTF-8";

/*----------------------------------------------PC用ページ用設定*/
/*ニュース全般設定*/
:root {
  --txttableW200: 10%;
}

:root {
  --main-bg-color: pink;
}

a.linkColor:link,
a.linkColor:visited {
  color: #333;
  text-decoration: underline;
}

a.linkColor:hover,
a.linkColor:active {
  color: #333;
  text-decoration: none;
}

/*-----------------------------------------------------------*/
#episode {
  width: 1118px;
  margin: 0 auto;
  padding: 80px 0;
}

#episode .top {
  background: url("_image/episodeTop.png")no-repeat center top/100% auto;
  height: 102px;
}

#episode .cnt {
  background-image: url("_image/episodeTop2.png"), url("_image/episodeCnt.png");
  background-repeat: no-repeat, repeat;
  background-position: top center, top center;
  background-size: 100% auto;
  padding: 60px 40px 0 120px;

}

#episode .btm {
  background: url("_image/episodeBtm.png")no-repeat center top/100% auto;
  height: 110px;
}

#episode p {
  padding: 40px 100px 24px;
  font-size: 15px;
  line-height: 1.8;
}

#episode p.staff {
  width: 80%;
  margin: 0 auto 36px;
  padding: 8px 12px;
  border-top: 1px solid #CCC;
}

.thumbnail {
  width: 808px;
  margin: 4px auto 0;

}

.thumbnail li {
  width: 25%;
  margin: 4px;

}

.ttl {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  width: 80%;
  margin: 0 auto 12px;
  font-size: 24px;
  color: #1589e1;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;

}

.ttl strong {
  display: block;
  width: 120px;
  height: 40px;
  margin-right: 24px;
  background: #1589e1;
  transform: skewX(45deg);
  text-align: center;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;


}

.ttl strong i {
  display: inline-block;
  transform: skewX(-45deg);
  font-size: 18px;
  line-height: 40px;
  color: #FFF;
  letter-spacing: 0.01em;



}

ruby>rt {
  font-size: 40%
}

/*エピソード専用*/
article {
  width: 1090px;
  margin: 0 auto
}

.eplist {
  display: flex;
  flex-wrap: wrap;
  min-height: auto
}

.eplist li {
  position: relative;
  width: 294px;
  margin: 8px;
  border-radius: 12px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
}


.eplist li:first-child::before {
  content: '';
display: block;
width: 71px; 
height: 20px;
background-image: url("../_image/icon_new.svg");
background-size: contain;
background-repeat:no-repeat;
position:absolute;
top:-2px;
left:-8px;
z-index: 5;
}
 


.eplist li a{
 display: block;
  clip-path: inset(0px 0px round 12px);

}

/*newアイコン*/
.eplist li i.new {
  position: absolute;
  top: 4px;
  left: -4px;
}



.slider li,
.thumbnail li {
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 80%, 90% 100%);
}





@media screen and (max-width: 667px) {
  /*----------------------------------------------SP用ページ用設定*/

  /*-----------------------------------------------------------*/


  .eplist {
    display: flex;
    min-height: auto
  }

  .eplist li {
    width: 44.8%
  }




  #episode {
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;

  }

  #episode .top {
    background: url("_image/episodeTopSP.png")no-repeat center top/100% auto;
    height: auto;
    padding-bottom: calc(100% * 110/800);
  }

  #episode .cnt {
    background-image: url("_image/episodeTop2SP.png"), url("_image/episodeCntSP.png");
    background-repeat: no-repeat, repeat;
    background-position: top center, top center;
    background-size: 100% auto;
    padding: 28px 12px 0 12px;

  }

  #episode .btm {
    background: url("_image/episodeBtmSP.png")no-repeat center top/100% auto;
    height: auto;
    padding-bottom: calc(100% * 100/800);
  }

  #episode p {
    padding: 20px 12px 24px;
    font-size: 14px;
    line-height: 1.8;
  }

  #episode p.staff {
    width: 96%;
    margin: 0 auto 36px;
    padding: 8px 12px;
    border-top: 1px solid #CCC;
  }

  .slider {
    width: 96%;
    margin: 0 auto 0;

  }

  .slider li {
    width: 100%;
    margin: 0 auto 0;

  }

  .slider .slick-slide {
    padding: 0;
  }

  .thumbnail {
    width: 98%;
    margin: 4px auto 0;

  }

  .thumbnail li {
    width: 25%;
    margin: 4px;

  }




  .ttl {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    width: 96%;
    margin: 0 0 12px -12px;
    font-size: 20px;
    color: #1589e1;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;

  }

  .ttl strong {
    display: block;
    width: 90px;
    height: 32px;
    margin-right: 20px;
    background: #1589e1;
    transform: skewX(45deg);
    text-align: center;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;


  }

  .ttl strong i {
    display: inline-block;
    transform: skewX(-45deg);
    font-size: 18px;
    height: 32px;
    line-height: 32px;
    color: #FFF;
    letter-spacing: 0.01em;



  }

  article {
    width: 98%;
    margin: 0 auto
  }

  /*newアイコン*/
  .eplist li i.new {
    position: absolute;
    top: 0;
    left: -4px;
  }


  /*newアイコン*/
  .eplist li i.new img {
    max-width: 80%;
  }


  /*end media---------------------------------------------------*/
}