/* =================================
	lower CSS
================================= */

/*	.unit
============================== */
main > .unit > section,
main > .unit article {}

main > article h2 {
	line-height:1.5;
	margin-bottom:0.75em;
}

main section h2 {
	color:#231816;
	line-height:1.5;
	margin-bottom:0.75em;
}

section h3 { text-align: center; padding-bottom: 0.5em; }
.tag section h3 { padding-bottom: 1.5em; }
.programs section article h3 { text-align: left; border-left: solid 5px #42bdd2; padding: 0.2em 0 0.2em 0.5em; margin-bottom: 0.5em;} 
section h3 span {background: linear-gradient(transparent 50%, #ffbcbe 50%); padding: 5px 10px; display: inline-block; text-align: center;}
.programs section h3 span {background: none;  padding: 5px 0; display: inline-block; text-align: center;}
section h4 { padding-bottom: 0.5em; line-height: 1.75;}

section p, article p { line-height: 1.75; margin-bottom: 1em;}
section p.comingsoon, article p.comingsoon { text-align: center; color: #999;
font-family: alwyn-new-rounded-web, sans-serif;
font-weight: 700;
font-style: normal;
}
.programs .read { text-align: center;
    font-family: m-plus-rounded-1m, sans-serif;
    font-weight: 400;
    font-style: normal;
}
section dl { line-height: 1.75;}
section dl dd { padding: 0 0 0 1em;}



main > .programs article h2 {
	line-height:1.5;
	margin-bottom:0.75em;
}
main > .programs article h2 {
	margin-bottom:0.5em;
}
p.date { margin-bottom: 0.2em;}
main > .programs article p.date, main > .programs article dl.narrator dt, main > .programs article dl.narrator dd {
	color:#333;
	font-weight:bold;
}
main > .programs article p,
main > .programs article dl.narrator dt,
main > .programs article dl.narrator dd {
	line-height:1.75;
}
main > .programs article dl.narrator dt {
	float:left;
}
main > .programs article dl.narrator {
	margin-bottom:0.5em;
}
main > .programs article dl.narrator dd {
	padding-left:4.5em;
}

@media all and (min-width: 768px) {
main section h2 {
	font-size:150%;
}
main > .unit:not(:last-child) {
	margin-bottom:30px;
}
main > .unit > section, main > .unit > article {
	border-radius:25px;
	padding:35px 50px 50px;
	border: solid 1px #797979;
}
main > .unit > section > p {
	font-size:112.5%;
}
main > .release article section h3 {
	font-size:112.5%;
}
main > .unit > article p,
main > .unit > article dl dt,
main > .unit > article dl dd {
	font-size:100%;
}
main > .unit > article > section:not(:last-child) {
	margin-bottom:40px;
}
section p.comingsoon, article p.comingsoon {margin: 1em 0; font-size: 1.5em!important;}
	section h3 span { font-size: 140%;}
	section h3 span.wbr:first-child{padding-right: 0;}
section h3 span.wbr:last-child{padding-left: 0;}
	section .box:not(:last-child) { padding-bottom: 2em;}
	section .set:not(:last-child) { padding-bottom: 1.5em;}
	
	section h4 { font-size: 1.1em; }
	
main > .programs article h2 {
	font-size:150%;
}
main > .programs article h3 span {
	font-size:150%;
}
main > .programs article p.date {
	font-size:1.1em;
}
	.programs .read {font-size: 1.4em; padding: 1em 0 0.5em;}
}
@media all and (max-width: 767px) {
main section h2 {
	font-size:112.5%;
	
}

section p, article p, section dl, section h4 {font-size:87.5%;}

main > .unit:not(:last-child) {
	margin-bottom:20px;
}
main > .unit > section, main > .unit > article {
	border-radius:15px;
	padding:15px;
	border: solid 1px #797979;
}
main > .unit > section > p {
	font-size:100%;
}
main > .release article section h3 {
	font-size:100%;
}
main > .unit > article p,
main > .unit > article dl dt,
main > .unit > article dl dd {
	font-size:87.5%;
}
main > .unit > section > p:not(:last-child) {
	margin-bottom:1.5em;
}
main > .unit > article > section:not(:last-child) {
	margin-bottom:20px;
}
section p.comingsoon, article p.comingsoon {margin: 1em 0; font-size: 1.2em!important;}
	section h3 span { font-size: 112.5%;}
	section .box { padding-bottom: 1em;}
	section .set { padding-bottom: 1em;}
	
	main > .programs article h2 {
	font-size:112.5%;
}
	main > .programs article h3 span {
	font-size:112.5%;
}
	.programs .read {font-size: 1.0em;}
main > .programs article p.date,
main > .programs article dl.narrator dt,
main > .programs article dl.narrator dd {
	font-size:0.9em;
}
	
	.cont.tiktok { overflow-x:scroll; margin: 0 auto; padding: 0; text-align: center;}
}









.pic-large {
}
.pic-large span,
.pic-large span img {
	display:block;
}
.pic-large > span.lazy-done {
	-webkit-animation: fadeIn 1000ms;
	animation: fadeIn 1000ms;
}
.pic-large span {
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
	height:0;
	padding-top:56.1224489795918%;
}
.pic-large span img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 768px) {
.pic-large:not(:last-child) {
	margin-bottom:40px;
}
}
@media all and (max-width: 767px) {
.pic-large:not(:last-child) {
	margin-bottom:20px;
}

}



/*	.video
============================== */

.video main div.unit section h2, .onair main div.unit section.video h2 {
	text-align:center;
	line-height:1.5;
	margin-bottom:0.75em;
}
.video main div.unit section h2 span, .onair main div.unit section.video h2 span {
	background: linear-gradient(transparent 50%, #ffbcbe 50%); padding: 5px 10px; display: inline-block; text-align: center;
	padding:0 0.5em;
}
.video main div.unit section ul, .onair main div.unit section.video ul {
	/**/
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	/**/
}
.video main div.unit section ul li, .onair main div.unit section.video ul li {
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	width:50%;
}
.video main div.unit section ul li span,
.video main div.unit section ul li a,
.video main div.unit section ul li img,
.onair main div.unit section.video ul li span,
.onair main div.unit section.video ul li a,
.onair main div.unit section.video ul li img{
	display:block;
	position: relative;
}
.video main div.unit section ul li > span,
.onair main div.unit section.video ul li > span{
	width:100%;
}
.video main div.unit section ul li > span a,
.onair main div.unit section.video ul li > span a{
	text-decoration:none;
}
.video main div.unit section ul li span a span.img,
.onair main div.unit section.video ul li span a span.img{
	background-size:cover;
	background-position:center cener;
	background-repeat:no-repeat;
	position:relative;
	height:0;
	padding-top:56.25%;
}
.video main div.unit section ul li span a span.lazy-done,
.onair main div.unit section.video ul li span a span.lazy-done{
	-webkit-animation: fadeIn 1000ms;
	animation: fadeIn 1000ms;
}
.video main div.unit section ul li span a span img,
.onair main div.unit section.video ul li span a span img{
	background-size:cover;
	background-position:center cener;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.video main div.unit section ul li span a .btn,
.onair main div.unit section.video ul li span a .btn
{background-repeat: no-repeat;
  background-position: center center;
background-image:url(../img/btn_mov.png);
	background-size: contain;
	width: 60px;
  height: 42px;
	position: absolute;
	top:50%; left:50%; margin: -21px 0 0 -30px;
	opacity: 0.75;
}
.video main div.unit section ul li span a:hover .btn,
.onair main div.unit section.video ul li span a:hover .btn
{opacity: 1.0;}

@media all and (min-width: 768px) {
.video main div.unit section h2,
.onair main div.unit section.video h2 {
	font-size:175%;
}
.video main div.unit section ul li,
.onair main div.unit section.video ul li
	{
	margin-bottom:30px;
}
.video main div.unit section ul li:nth-child(odd),
.onair main div.unit section.video ul li:nth-child(odd){
	clear:both;
}
.video main div.unit section ul li:nth-child(odd) > span,
.onair main div.unit section.video ul li:nth-child(odd) > span{
	margin-right:10px;
}
.video main div.unit section ul li:nth-child(even) > span,
.onair main div.unit section.video ul li:nth-child(even) > span{
	margin-left:10px;
}
}
@media all and (max-width: 767px) {
.video main div.unit section h2,
.onair main div.unit section.video h2 {
	font-size:112.5%;
}
.video main div.unit section ul li,
.onair main div.unit section.video ul li {
	margin-bottom:10px;
}
.video main div.unit section ul li:nth-child(odd),
.onair main div.unit section.video ul li:nth-child(odd ){
	clear:both;
}
.video main div.unit section ul li:nth-child(odd) > span,
.onair main div.unit section.video ul li:nth-child(odd) > span {
	margin-right:5px;
}
.video main div.unit section ul li:nth-child(even) > span,
.onair main div.unit section.video ul li:nth-child(even) > span {
	margin-left:5px;
}
.video main div.unit section ul li span a .btn,
.onair main div.unit section.video ul li span a .btn {
		width: 40px;
		height: 28px;
		margin: -14px 0 0 -20px;
	}
	.onair main div.unit section.video { margin-bottom: 1em;}
}


h4#jnnnews { width: 150px; height: 85px; background-repeat: no-repeat; background-position: 0 0; background-size: contain; background-image: url(../img/logo_jnnnews.png); text-indent: -9999px; }
h4#nsta { width: 150px; height: 85px; background-repeat: no-repeat; background-position: 0 0; background-size: contain; background-image: url(../img/logo_nsta.png); text-indent: -9999px; }
h4#news23 { width: 150px; height: 55px;  background-repeat: no-repeat; background-position: 0 0; background-size: contain; background-image: url(../img/logo_news23.png); text-indent: -9999px; }
h4#houtoku { width: 150px; height: 84px;  background-repeat: no-repeat; background-position: 0 0; background-size: contain; background-image: url(/program/um/v8/img/thumb/houtoku_3.jpg); text-indent: -9999px; }
h4#sunday { width: 150px; height: 84px;  background-repeat: no-repeat; background-position: 0 0; background-size: contain; background-image: url(/program/um/v8/img/thumb/sunday_3.jpg); text-indent: -9999px; }

#p2.programs .box { text-align: center;}
#p2.programs .box .set { display: inline-block;}
h3.pd {padding-bottom: 1.5em;}
@media all and (min-width: 768px) {
	#p2.programs h4,#p2.programs p { display: inline-block; vertical-align: top;}
	#p2.programs h4 { margin-right: 10px; padding-bottom: 0;}
}
@media all and (max-width: 767px) {
	h4#jnnnews, h4#nsta, h4#houtoku, h4#sunday { width: 100px; height:56px; margin: 0 auto; }
	h4#nsta { width: 100px; height:56px; margin: 0 auto; }
	h4#news23 { width: 100px; height: 37px; margin: 0 auto; }
	h3.pd {padding-bottom: 1em;}
	#p2.programs .box .set { padding-bottom: 0;}
}