/*	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:0 0 1.5em; margin:0 auto 0; position:relative;
background-color:#0061a8;
position:relative;
}
#stream:before,#stream:after{
content: "";
background: url(../img/top/stitch3.png) repeat-x left top;
position: absolute;
width:100%;
height:2px;
background-size:auto 2px;
z-index:1;
}
#stream:before{
right:0;
top:4px;
}
#stream:after{
right:0;
bottom:4px;
}
#stream h2{
position:relative;
color:#fdf5ba;
margin:0 0 .2em;
line-height:100% !important;
}
#stream h2:after{
content: "";
background: url(../img/crayon.png) no-repeat left 0 top 0;
width:90px;
aspect-ratio: 157 / 128;
position: absolute;
left:2em;
bottom:-5px;
z-index:1;
background-size:100%;}

div#tsft{padding:2em 0 0; margin:0 auto; position:relative;	max-width:980px;}
div#tsft .box a.realtime {background-size:70%;}
div#tsft .box a.tver {background-size:40%;}
div#tsft .box a.tbsfree {background-size:74%;}
div#tsft .box a.u-next {background-size:70%;}
div#tsft .box a.netflix {background-size:70%;}

div#tsft .inner {display:flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; justify-content:center; margin:.5em auto 0;}
div#tsft .caution {text-align: center; color:#fdf5ba; 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%;height:88px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color:rgba(255,255,255,1);
  border-radius:10px;
}
div#tsft .txt {
font-weight: 500;
  width: 100%;
  color: #fdf5ba;
  text-align: center;
  font-size: 90%;
  padding:.6em 0 0;
}

@media all and (min-width: 768px) {
.box_realtime {width:24%;}
.box_tver {width:50%; margin:0 1%;}
.box_u-next {width:24%;}
div#tsft .box a.realtime {background-size:74%;}
div#tsft .box a.u-next {background-size:72%;}
a.tver,a.tbsfree {width:48.5% !important;}
}

@media all and (max-width: 991px) { 
div#tsft{width:95%;}
div#tsft .box a {height:8vw;}
}

@media all and (max-width: 767px) {
#stream{margin:0 auto 5%; padding:0 0 3%;
background-position:left -16vw top 60%,right -40% bottom;
background-size:100%,0;
}
#stream h2{margin:3% 0 4% 5%; padding:0 !important;
font-size:9.5vw;
}
#stream h2:after{
width:16vw;
left:20vw;
}
div#tsft{padding:2% 0 0; width:100%;} 
div#tsft .inner{width:92%;}
.box_realtime {width:55%; width:60%; margin: 0 auto;}
.box_tver,.box_u-next {width:98%; margin:5% auto;}
.box_u-next {width:60%; margin:0 auto; justify-content: center !important;}
a.tver,a.tbsfree {width:48.5% !important;}
div#tsft .box a {height:17vw; border-radius:2vw !important;}
div#tsft .txt { font-size:3.3vw;  margin:0 0 0; padding:2% 0 0;}  
div#tsft .caution {font-size:2.6vw; padding:5% 0 1.5%;}
}