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

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

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

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; }
section h3 span {background: linear-gradient(transparent 50%, #efd3c9 50%); padding: 5px 10px; 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 dl { line-height: 1.75;}
section dl dd { padding: 0 0 0.5em 1em;}



main > .programs article h2 {
	line-height:1.5;
	margin-bottom:0.75em;
}
main > .programs article h2 {
	margin-bottom:0.5em;
}
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:1.5em;
}
main > .programs article dl.narrator dd {
	padding-left:5.5em;
}

@media all and (min-width: 768px) {
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 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 { padding-bottom: 2em;}
	section .set { padding-bottom: 1.5em;}
	
	section h4 { font-size: 1.1em; }
	
main > .programs article h2 {
	font-size:150%;
}
main > .programs article p.date,
main > .programs article dl.narrator dt,
main > .programs article dl.narrator dd {
	font-size:112.5%;
}
}
@media all and (max-width: 767px) {
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 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 p.date,
main > .programs article dl.narrator dt,
main > .programs article dl.narrator dd {
	font-size:100%;
}
	
	.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;
}

}

/*	ph_cut
============================== */
.ph_cut{}

.ph_cut span {
  display: block;
  position: relative;
}

.ph_cut span {
  background-size: 100%;
}

@media all and (min-width: 768px) {
  .ph_cut,
  .ph_cut span {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .ph_cut {
    margin: 1em auto;
  }
	.sakamoto, .sakamoto span {
    width: 300px;
    height: 439px;
}
	.noritake, .noritake span {
    width: 300px;
    height: 300px;
}
	.ph_onair01, .ph_onair01 span {
    width: 878px;
    height: 587px;
}
	.ph_onair02, .ph_onair02 span {
    width: 350px;
    height: 475px;
}
	
}

@media all and (max-width: 767px) {
  .ph_cut span img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
	.ph_cut {
    width: 100%;
    margin: 0.5em 0;
    box-sizing: border-box;
  }
	.ph_cut.ph_onair02 {
    width: 65%;
    margin: 0.5em auto;
    box-sizing: border-box;
  }
	.ph_cut span {
    height: 0;
    position: relative;
	}
		
	.sakamoto span {
    height: 0;
    padding: 146.333% 0 0;
    position: relative;
	}
	
	.noritake span {
    height: 0;
    padding: 100% 0 0;
    position: relative;
	}
	
	.ph_onair01 span {
    height: 0;
    padding: 66.856% 0 0;
    position: relative;
	}
	.ph_onair02 span {
    height: 0;
    padding: 135.746% 0 0;
    position: relative;
	}

}

/*	figure (sub)
============================== */

div.cmn-pic-sub figure {
	width:50%;
}
div.cmn-pic-sub figure.subpic-lef {
	float:left;
}
div.cmn-pic-sub figure.subpic-rig {
	float:right;
}
div.cmn-pic-sub figure span,
div.cmn-pic-sub figure span img {
	display:block;
}
div.cmn-pic-sub figure > span {
	/* border:1px solid #fff;
	background-color:#fff;
	background-image: -webkit-gradient(linear, center top, center bottom, from(#d9eafc), color-stop(0.5, #fff), to(#d9eafc));
	background-image: linear-gradient(#d9eafc, #fff 50%, #d9eafc); */
}
div.cmn-pic-sub figure > span span {
	position:relative;
	height:0;
	background-repeat:no-repeat;
	background-size:cover;
	padding-top:56.25%;
}
div.cmn-pic-sub figure > span span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.cmn-pic-sub figure > span span.lazy-done {
	-webkit-animation: fadeIn 1000ms;
	animation: fadeIn 1000ms;
}
@media all and (min-width: 768px) {
div.cmn-pic-sub figure.subpic-lef > span {margin-right:12px}
div.cmn-pic-sub figure.subpic-rig > span {margin-left:12px}
div.cmn-pic-sub {
	margin-bottom:30px;
}
div.cmn-pic-sub figure > span span.lazy-done {
	-webkit-box-shadow:8px 8px 0 0 hsla(0,0%,100%,0.3);
	box-shadow:8px 8px 0 0 hsla(0,0%,100%,0.3);
}
}
@media all and (max-width: 767px) {
div.cmn-pic-sub figure.subpic-lef > span {margin-right:6px}
div.cmn-pic-sub figure.subpic-rig > span {margin-left:6px}
div.cmn-pic-sub {
	margin-bottom:20px;
}
div.cmn-pic-sub figure > span span.lazy-done {
	-webkit-box-shadow:5px 5px 0 0 hsla(0,0%,100%,0.3);
	box-shadow:5px 5px 0 0 hsla(0,0%,100%,0.3);
}
}


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

.video main div.unit section h2 {
	text-align:center;
	line-height:1.5;
	margin-bottom:0.75em;
}
.video main div.unit section h2 span {
	background: linear-gradient(transparent 50%, #efd3c9 50%); padding: 5px 10px; display: inline-block; text-align: center;
	padding:0 0.5em;
}
.video main div.unit section 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 {
	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 {
	display:block;
	position: relative;
}
.video main div.unit section ul li > span {
	width:100%;
}
.video main div.unit section ul li > span a {
	text-decoration:none;
}
.video main div.unit section 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 {
	-webkit-animation: fadeIn 1000ms;
	animation: fadeIn 1000ms;
}
.video main div.unit section 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 {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 {opacity: 1.0;}

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

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: 56px;  background-repeat: no-repeat; background-position: 0 0; background-size: contain; background-image: url(../img/logo_news23.png); text-indent: -9999px; }
@media all and (max-width: 767px) {
	h4#nsta { width: 100px; height:56px; margin: 0 auto; }
h4#news23 { width: 100px; height: 37px; margin: 0 auto; }
}