@charset "utf-8";

/* CSS Document */


/*-- 全体共通上書き --*/
.tss_wrap a{
  text-decoration: none;
}

.tss_body{
 border-top:#efefef 1px solid;
 padding-top:20px;
}

.tss_gotop{
right:calc(50% - 800px)
}

.tss_ellipsis{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
/*--   -webkit-line-clampのみ個別に指定すること --*/
}

.tss_gotop{
  right:40px;
}

/*-- 以下コンテンツ共通 --*/

/*-- 見出し --*/
h2.tss_1clm{
  width:60%;
  position:absolute;
  top: calc((48px + 0.75vw) * -1);
  left: 50%;
  transform: translateX(-50%);
  text-align:center;
  z-index:2;
}


h2.tss_1clm + div, h2.tss_1clm + ul{
  position:relative;
  z-index:3;
}

.tss_wrap h2 img{
  max-width:100%;
}

/*-- 画像調整 --*/
.tss_contentsBlock{
  font-size:clamp(14px,calc(0.75em + 0.2vw),18px);
}

.tss_contentsBlock picture{
  display: block;
  width: 100%;
  overflow: hidden;
  background-color:#e5e5e5;
  /*-- aspect-ratioとbackground-colorは個別指定 --*/
}

.tss_contentsBlock picture img{
object-fit:contain;
width:100%;
height:100%;
}



/*-- 番組 --*/

.tpg_programWrap{
  position: relative;
  width:100%;
  max-width:1600px;
  margin:80px auto 160px;
  line-height:1.5;
}

.tss_prglink{
  display:block;
  width:20vw;
  max-width:100px;
  padding:4px;
  background-color:#E63B3C;
  position:relative;
  right:0;
  margin: 0  0  8px  auto;
}

.tss_prglink img{
  width:100%;
  height:auto;
}

.tpg_contentsWrap{
  position: relative;
  margin-bottom: 160px;
  padding:clamp(80px, 5vw,120px) 0 80px;
  background: linear-gradient( rgba(203,203,203,0.5) 0%, rgba(255,255,255,0.5) 20%);
}

[class^="tpg_pgWrap"]{
width: 90%;
max-width:1480px;
margin:8px auto;
display:flex;
flex-wrap:wrap;
}
.tss_programBox{
  padding:0 2% 4%;
}



.tss_programBox > a, .tss_programBox > div{
  display: block;
  color: #000000;
  border-radius: 8px;
  overflow:hidden;
  height:100%;
}

[class^="tpg_pgWrap"] picture{
  aspect-ratio: 16 / 9;
}

[class^="tpg_pgWrap"] picture img{
  display:block;
  border-top: thin solid #C7C7C7;
  border-left: thin solid #C7C7C7;
  border-right: thin solid #C7C7C7;
  border-radius: 8px 8px 0 0;
}

.tss_programBox picture + div{
  min-height: 4em;
  padding: 8px;
  font-size: 0.875rem;
  border-radius: 0 0 8px 8px;
  background-color: #FFFFFF;
  border-bottom: thin solid #C7C7C7;
  border-left: thin solid #C7C7C7;
  border-right: thin solid #C7C7C7;
  border-radius: 0 0 8px 8px;
}
.tss_programBox div p{
  -webkit-line-clamp:2;
}
.tss_programBox div p + p{
  font-weight:bold;
}

.tss_programBox div p span{
  display:inline-box;
}

/*-- カテゴリ固有 --*/


section:first-of-type div.tpg_contentsWrap{
  background: linear-gradient( rgba(198,161,207,0.5) 0%, rgba(255,255,255,0.5) 20%);
}
section:last-of-type div.tpg_contentsWrap{
  background: linear-gradient( rgba(245,245,245,0.5) 0%, rgba(245,245,245,0.5) 64%);
}

section:last-of-type .tpg_contentsWrap{
  padding:24px 0 80px;
}

section:last-of-type h2.tss_1clm{
  position:relative;
  top: 0;
  margin-bottom:24px;
}

.tpg_pgWrap_tssprogram > .tss_programBox{
  width: calc(100% / 3);
}
.tpg_pgWrap_newprogram > .tss_programBox{
  width: calc(100% / 3);
}

.tpg_pgWrap_variety > .tss_programBox{
  width: calc(100% / 3);
}
.tpg_pgWrap_drama > .tss_programBox,
.tpg_pgWrap_drama_regular > .tss_programBox,
.tpg_pgWrap_drama_new > .tss_programBox{
  width:50%;
}

.tpg_pgWrap_tssfinishedprogram > .tss_programBox{
  width: calc(100% / 6);
  padding:0 1% 2%;
}

.tpg_pgWrap_tssfinishedprogram img{
border-bottom:thin solid #C7C7C7;
border-radius:8px !important; 
}

.tpg_innlink{
  width:100%;
}

.tpg_innlink a{
  display:block;
  width:16em;
  border:solid 1px #8A8A8A;
  background-color:#F5F5F5;
  padding:1em;
  text-align:center;
  font-size:0.875em;
  color:#333333;
  margin:1em auto;
  border-radius:2em;
}

.tss_cprt{
  background-color:#F5F5F5;
}


@media screen and (min-width:801px){
.tss_wrap a:hover{
  opacity:0.5;
  color:#8D8D8D;
}
}

@media screen and (max-width:800px){

.tss_prglink{
  display:none;

}
.tss_programWrap > a{
  display:none;
}

h2.tss_1clm{width:90vw;}

[class^="tpg_pgWrap"]{
  width:100%;
  padding:0 0.5%;
}

[class^=" tpg_Wrap"] .tss_ellipsis{
  font-size:0.875em;
}

.tpg_contentsWrap{
  padding:clamp(24px, 10vw,120px) 0 40px;
  margin-bottom:64px;
}
section:first-of-type h2.tss_1clm{width:90vw;}
section:first-of-type div.tpg_contentsWrap{
  background: linear-gradient( rgba(198,161,207,0.5) 0%, rgba(245,245,245,1) 64%);
  margin-bottom:160px;
}
.tpg_pgWrap_tssprogram .tss_programBox, .tpg_pgWrap_variety .tss_programBox{
  width: 50%;
}

.tss_programBox{
  padding:0 0.25% 2%
}

.tpg_innlink{
  width:80%;
  margin:1em auto -1.5em;
}

.tpg_innlink a{
  background-color:#ffffff;
  padding:1em;
  border-radius:2em;
  position:relative;
  bottom:-48px;
}

.tpg_pgWrap_tssfinishedprogram .tss_programBox{
  width: calc(100% / 3);
  padding:0 0.5% 2%;
}
.tss_gotop{
  right:0;
}

}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    tss_body img{
        image-rendering: -webkit-optimize-contrast;
    }
}