/*	stream
============================== */
div#tshd{padding:1em 0 1.25em; background-color:#e86da5; border-radius: 0 0 40px 40px; width:1080px; margin:0 auto;}

div#tshd .wrap {width:90%; margin: 0 auto; display:flex; flex-flow: row wrap; align-items: center; justify-content: space-between; justify-content: center;}
.stbx_1 {width:48%;}
.stbx_2 {width:48%;}
div#tshd div.stbx {display:flex; flex-flow: row wrap; align-items: center;}

div#tshd h3 {font-size: 110%; color: #fff; font-weight: 700;}
.stbn a {
  width: 100%;
  display:block;
  background-position: center;
  background-repeat: no-repeat;
  background-size:contain;
  position: relative;
  height: 0;
  padding-top:25%;
  border-radius:16px;
  background-color:rgba(255,255,255,0.9);
}
.realtime a,a.realtime {
  background-image: url(../img/top/stream/realtime.svg);
}
.tver a,a.tver {background-size:30%;
  background-image: url(../img/top/stream/tver.svg);
}
.tbsfree a,a.tbsfree {
  background-image: url(../img/top/stream/tbsfree.svg);
}
.paravi a,a.paravi {background-size:60%;
  background-image: url(../img/top/stream/u-next.svg);
}


@media all and (min-width: 768px) {
div#tshd div.stbn {
    width:70%;
    margin-left:.5em;
}
div#tshd h3::after {
    content: " ▶︎";
    color: #66bf97;
  }
}

@media all and (max-width: 767px) {
div#tshd{padding:2% 0; width:100%; border-radius:0;}
div#tshd .wrap {width:94%;}
div#tshd div.stbn {
    width:100%;
    margin: 0.3em;
}
.stbn a {border-radius:2vw !important;}

div#tshd h3 {
    font-size:4vw;
    letter-spacing: 0.1em;
    width: 100%;
    text-align: center;
    margin-bottom: 0.3em;
  }
div#tshd h3::after {
    content: " ▼";
    color: #66bf97;
  }
}

/*	.t_stream
============================== */
#stream{background-color:#ef8bb6; padding:0 0 1em; margin:4em auto 1em; position:relative;}
#stream h2{position:absolute;left:5%;top:-45px;}
div#tsft{padding:3em 0 0; margin:0 auto; position:relative;	max-width:1080px;}
div#tsft .box a.realtime {background-size:80%;}
div#tsft .box a.tver {background-size:45%;}
div#tsft .box a.tbsfree {background-size:70%;}
div#tsft .box a.paravi {background-size:70%;}

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

@media all and (min-width: 768px) {
.box_realtime {width:25%;}
.box_tver {width:48%;}
.box_paravi {width:25%;}
a.tver {width:49% !important;}
a.tbsfree {width:49% !important;}
}

@media all and (max-width: 767px) {
#stream{margin:11% auto 5%; padding:0 0 3%;}
#stream h2{top:-7vw;}
div#tsft{padding:8% 0 0; width:100%;} 
div#tsft .inner{width:92%;}
.box_realtime,.box_paravi {width:55%; margin: 0 auto;}
  .box_tver {
    width: 100%;
    margin:5% auto;
  }
a.tver {width:49% !important;}
a.tbsfree {width:49% !important;}

div#tsft .box a {height:18vw; border-radius:4vw !important;}
div#tsft .txt { font-size:3.8vw;  margin:2.5% 0 0;}  
div#tsft .caution {font-size:70%; padding:4% 0 0;}
}