/*	stream
============================== */
.realtime a,a.realtime {
  background-image: url(../img/stream/realtime.svg);
}
.tver a,a.tver {
  background-image: url(../img/stream/tver.svg);
}
.tbsfree a,a.tbsfree {
  background-image: url(../img/stream/tbsfree.svg);
}
.u-next a,a.u-next {
  background-image: url(../img/stream/u-next.svg);
}
.netflix a,a.netflix {
  background-image: url(../img/stream/netflix.svg);
}


/*	.t_stream
============================== */
#stream{padding:3em 0 1.5em; margin:0 auto 0; position:relative;
background: url(../img/top/night.jpg) no-repeat center center; background-size:cover;
}
#stream h2{color:#fff;
 font-size:380%;
position: absolute;
left:3%;
top:-28px;
}
div#tsft{margin:0 auto; position:relative;	max-width:1080px;}
div#tsft .box a.realtime {background-size:78%; background-size:56%;}
div#tsft .box a.tver {background-size:40%;}
div#tsft .box a.tbsfree {background-size:72%;}
div#tsft .box a.u-next {background-size:72%;}
div#tsft .box a.netflix {background-size:62%;}

div#tsft .inner {
position:relative;
display:flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; justify-content:center;
background-color:rgba(56,70,90,.6);
padding:3em 0 2em;
max-width:920px;
margin:0 auto;
backdrop-filter: blur(2px);
}
div#tsft .caution {text-align: center; color:#fff; font-size:85%; padding:2.25em 0 0;}
div#tsft .box {position:relative; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; align-items: stretch;}
div#tsft .box a {display:block;width:100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius:1px;
  background-color:rgba(255,255,255,1);
  aspect-ratio: 4 / 1;
}
div#tsft .txt {
font-weight: 500;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 90%;
  padding:.6em 0 0;
}

@media all and (min-width: 768px) {
.box_realtime {width:20%; width:35%;}
.box_tver {width:36%; margin:0 0 0 1%;}
.box_u-next {width:50%; margin:0 0 0 1%;}
a.tver,a.tbsfree,a.u-next,a.netflix {width:49% !important;}
}

@media all and (max-width: 991px) { 
div#tsft{width:100%;}
div#tsft .box a {height:8vw; height:7.5vw;}
div#tsft .inner{width:92%;
padding:8% 0 5%;
}
}

@media all and (max-width: 767px) {
#stream{margin:0 auto 5%; padding:8% 0 3%;}
#stream h2{font-size:10vw;
top:-5vw;
}
div#tsft{width:100%;} 
.box_realtime {width:55%; margin: 0 auto;}
.box_tver,.box_u-next {width:96%; margin:5% auto;}
.box_u-next {margin:0 auto;}
a.tver,a.tbsfree,a.u-next,a.netflix {width:49% !important;}
div#tsft .box a {height:16vw; border-radius:.6vw !important;}
div#tsft .txt { font-size:3.4vw;  margin:0 0 0; padding:2% 0 0;}  
div#tsft .caution {font-size:2.6vw; padding:5% 0 1.5%;}
div#tsft .box a.realtime {background-size:70%;}
}