@import url("/um/v7/css/reset.css");
@import url("keyframes.css");


div#bn_super {
	border-bottom:1px solid #c0c4ce;
}


/* =================================
	Web Fonts
================================= */

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

/* link */
a:link {
	text-decoration:underline;
	color:#0050ff;
}
a:visited {
	text-decoration:none;
	color:#0050ff;
}
a:active {
	text-decoration:none;
	color:#0050ff;
}
a:hover {
	text-decoration:underline;
	color:#0050ff;
}

@media all and (max-width: 374px) {
}
@media all and (min-width: 768px) {
.br-smp {
	display:none;
}
}
.ff {
	font-family:serif;
}
.lazy {
	display:block;
	position:relative;
}
.wbr {
	white-space: nowrap;
	display: inline-block;
}



/*	copyright
============================== */
div.copyright p {
	line-height:1.25;
	text-align:center;
}
div.copyright p > small {
	display:block;
}
@media all and (min-width: 768px) {
	div.copyright p {
		font-size:75%;
	}
	div.copyright p > small {
		padding:40px 0 40px;
	}
	div.copyright p a:hover {
		text-decoration:none;
	}
}
@media all and (max-width: 767px) {
	div.copyright p {
		font-size:62.5%;
	}
	div.copyright p > small {
		padding:30px 12px 30px;
	}
}


/*	background
============================== */
html, body {
	background-color:#ecedf0;
}
body {
	color:#2a2b2e;
	text-align:center;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust: 100%;
	font-family:"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
}
div.cover {
	padding:0 4vw;
}
@media all and (min-width: 768px) {
}
@media all and (max-width: 767px) {
div.cover {
	padding:0 3vw;
	min-width:320px;
}
}


/*	header/main
============================== */
header {
}
h1 {
	text-align:left;
}
header h1 span {
	display:block;
}
header h1 > span {
	position:relative;
	height:0;
	padding-top:9.705%;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
header h1 span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}
header h1 span span {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
@media all and (min-width: 768px) {
header, main {
	max-width:980px;
	margin:0 auto;
}
header {
	padding:40px 0;
}
}
@media all and (max-width: 767px) {
header {
	padding:25px 0;
}
}


/*	YouTube
============================== */
div.mov-inner {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-size:cover;
}
div.mov-inner iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 768px) {
div.mov-outer {
	margin-bottom:40px;
}
}
@media all and (max-width: 767px) {
div.mov-outer {
	
	margin:0 -4vw 40px;
}
}


/*	.programs
============================== */
div.programs article a,
div.programs article span.schedule {
	display:block;
}
div.programs article a {
	text-decoration:none;
}
div.programs article a figure {
	margin-bottom:20px; transition:0.5s;
}
div.programs article a:hover figure {opacity:0.9}
div.programs article a figure span {
	position:relative;
	height:0;
	padding-top:56.285%;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
div.programs article a figure span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
	background-color:#81899d;
	-webkit-box-shadow:5px 5px 0 0 hsla(222,12%,56%,.5);
	box-shadow:5px 5px 0 0 hsla(222,12%,56%,.5);
transition:0.5s;
}
div.programs article a:hover figure span.lazy-done {
	-webkit-box-shadow:4px 4px 1px 0 hsla(222,12%,56%,.4);
	box-shadow:4px 4px 1px 0 hsla(222,12%,56%,.4);
}
div.programs article a figure span img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.programs article a > h3,
div.programs article a > span {
	line-height:1.5;
}
div.programs article a > h3 {
	color:#0050ff;
	margin-bottom:0.5em;
}
div.programs article a > span {
	color:#2a2b2e;
}
@media all and (min-width: 768px) {
div.programs:not(:last-child) {
	margin-bottom:40px;
}
div.programs {
	display:flex;
	flex-wrap:wrap;
	gap:40px;
}
div.programs article {
	width:calc((100% - 40px*2)/3);
}
div.programs article a > h3 {
	font-size:110%;
	min-height: 3em;
}
}
@media all and (max-width: 767px) {
div.programs {
	margin:0 20px;
}
div.programs:not(:last-child) {
	margin-bottom:40px;
}
div.programs article:not(:last-child) {
	margin-bottom:30px;
}
div.programs article a > h3 {
	font-size:4.5vw; margin-bottom: 0.3em;
}
div.programs article span.schedule { font-size: 95%;}
	
	div.programs article a figure { /*padding: 0 20px;*/}
}

/*	.archive
============================== */
#archiveArea h2 { background-color: #0052FF; background-repeat: no-repeat; background-position: center center; background-size: auto 30px; height: 45px; text-indent: -9999px;}
#archiveArea h2 { background-image: url(../img/tit_drama.png);}
div.archive { padding-top: 40px;}

div.archive article a,
div.archive article span.schedule {
	display:block;
}
div.archive article a {
	text-decoration:none;
}
div.archive article a figure {
	margin-bottom:20px; transition:0.5s;
}
div.archive article a:hover figure {opacity:0.85}
div.archive article a figure span {
	position:relative;
	height:0;
	padding-top:56.285%;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
div.archive article a figure span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
	background-color:#81899d;
	-webkit-box-shadow:4px 4px 0 0 hsla(222,12%,56%,.5);
	box-shadow:4px 4px 0 0 hsla(222,12%,56%,.5);
	transition:0.5s;
}
div.archive article a:hover figure span.lazy-done {
	-webkit-box-shadow:3px 3px 1px 0 hsla(222,12%,56%,.4);
	box-shadow:3px 3px 1px 0 hsla(222,12%,56%,.4);
}
div.archive article a figure span img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.archive article a > h3,
div.archive article a > span {
	line-height:1.4;
}
div.archive article a > h3 {
	color:#0050ff;
	margin-bottom:0.5em;
}
div.archive article a > span {
	color:#2a2b2e;
}

article a > h3 .font-s { font-size: 80%;}

@media all and (min-width: 768px) {
#archiveArea {
	margin-bottom:50px;
}
div.archive {
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}
div.archive article {
	width:calc((100% - 20px*3)/4);
}
div.archive article a > h3 {
	font-size:98%;
}
div.archive article a > h3{min-height: 4em;}
div.archive article a > h3 .font-s { font-size: 90%;}
}
@media all and (max-width: 767px) {
#archiveArea {
	margin-bottom:40px;
}
#archiveArea h2 { height: 40px; background-size: 153px 23px;}
div.archive {
padding-top: 20px;
}
div.archive {
	display:flex;
	flex-wrap:wrap;
	gap:16px;
}
div.archive article {
	width:calc((100% - 16px*1)/2);
}
div.archive article a > h3 {
	font-size:3.2vw;
	line-height:1.3;
}
div.archive article:nth-child(1) a > h3, div.archive article:nth-child(2) a > h3, div.archive article:nth-child(5) a > h3, div.archive article:nth-child(6) a > h3, div.archive article:nth-child(13) a > h3, div.archive article:nth-child(14) a > h3, div.archive article:nth-child(17) a > h3, div.archive article:nth-child(18) a > h3, div.archive article:nth-child(23) a > h3, div.archive article:nth-child(24) a > h3{min-height: 4em;}
	
div.archive article a figure {
	margin-bottom:8px;
}
div.archive article a figure span.lazy-done {
	-webkit-box-shadow:3px 3px 0 0 hsla(222,12%,56%,.5);
	box-shadow:3px 3px 0 0 hsla(222,12%,56%,.5);
}

}

/*	#special .archive
============================== */
#special h2 { background-color: #0052FF; color: #fff; text-align: center;}


#special div.archive article a > h3 { display: none;}

@media all and (min-width: 768px) {
#special {
	margin-bottom:50px;
}
	#special h2 { font-size: 1.4em; padding: 12px;}
#special div.archive {
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}
#special div.archive article {
	width:calc((100% - 20px*2)/3);
}
div.archive article a > h3 {
	font-size:98%;
}

}
@media all and (max-width: 767px) {
#special  {
	margin-bottom:40px;
}
#special h2 { font-size: 1.1em; padding: 5px; line-height: 1.3em;}

#special div.archive {
	display:flex;
	flex-wrap:wrap;
	gap:16px;
}
#special div.archive article {
	width:calc((100% - 16px*1)/2);
}
#special div.archive article a figure {
	margin-bottom:10px;
}

}



/*	.stream
============================== */
ul.stream {}
ul.stream li { /*display: inline-block; margin: 5px; vertical-align: top;*/ }
ul.stream li a { display: block; background-color: #fff; border-radius: 10px;
	-webkit-box-shadow:2px 2px 2px 0 hsla(222,12%,56%,.5);
	box-shadow:2px 2px 2px 0 hsla(222,12%,56%,.5);
	transition:0.5s;
}
ul.stream li a:hover {
	-webkit-box-shadow:1px 1px 2px 0 hsla(222,12%,56%,.4);
	box-shadow:1px 1px 2px 0 hsla(222,12%,56%,.4);}
ul.stream li .soon { display: block; background-color: #fff; border-radius: 10px;
	-webkit-box-shadow:2px 2px 2px 0 hsla(222,12%,56%,.3);
	box-shadow:2px 2px 2px 0 hsla(222,12%,56%,.3);
	opacity:0.5;
}

div.programs ul.stream {
	display:flex;
	flex-wrap:wrap;
	justify-content: left;
	gap:10px;
	padding: 20px ;
}
div.programs ul.stream li {
	width:calc((100% - 10px*1)/2);
}
div.programs ul.stream li:first-child {
    margin: 0 auto;
}
/*div.archive ul.stream li:first-child { margin: 0 auto;}ボタンがひとつになったら*/
div.programs ul.stream li.realtime {width: 100%;}
div.programs ul.stream li a {width: 100%; height: 0px;}


div.archive ul.stream {
	display:flex;
	flex-wrap:wrap;
	justify-content: left;
	gap:10px;
}
div.archive ul.stream li {
	width:calc((100% - 10px*1)/2);
}
div.archive ul.stream li:first-child { margin: 0 auto;}
div.archive ul.stream li a {width: 100%; height: 0px;}



ul.stream li a, ul.stream li .soon {
    display: block;
    position: relative;
    text-indent: -9999px;
    background-color: #fff;
    background-image: url(/um/img/bnr_stream.png);
    background-size: 300% 300%;
    background-repeat: no-repeat;
    height: 0;
    padding: 33.4928229665072% 0 0;
}
ul.stream li.tver a, ul.stream li.tver .soon {
    background-position: center top;
}
ul.stream li.tbsfree a, ul.stream li.tbsfree .soon {
    background-position: right top;
}
ul.stream li.paravi a, ul.stream li.paravi .soon {
    background-position: left center;
}
ul.stream li.netflix a, ul.stream li.netflix .soon {
    background-position: center center;
}
div.programs ul.stream li.realtime a {background-image: url(../img/bnr_realtime.png); background-size: contain; background-position :center center; padding:19.230% 0 0;}
ul.stream li.disney a {
    background-image: url(../img/bnr_disney.png);
    background-size:  contain;
	background-position: center center;
}

@media all and (min-width: 768px) {
	div.archive ul.stream { padding-bottom: 10px; }
}
@media all and (max-width: 767px) {
	div.programs ul.stream { padding: 15px 20px;}
	div.archive ul.stream { gap:8px; padding-bottom: 5px; }
	div.archive ul.stream li { width:calc((100% - 8px*1)/2); }
	div.archive ul.stream li a {border-radius: 5px; padding: 33.4928229665072% 0 0;}
}

/*	.Banner
============================== */
.bnrGallery, .bnrMessage {margin: 0 auto;}
.bnrGallery a, .bnrMessage a {transition:0.5s;}
.bnrGallery a span, .bnrMessage a span { position: relative;}
.bnrGallery a img, .bnrMessage a img { position: absolute; top:0; left:0; width: 100%; height: 100%;}
.bnrGallery a:hover, .bnrMessage a:hover {opacity:0.85}
.bnrGallery a span, .bnrMessage a span {
	position:relative;
	height:0;
	padding-top:30%;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	
}

.bnrGallery a span.lazy-done, .bnrMessage a span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
	-webkit-box-shadow:3px 3px 3px 0 hsla(222,12%,56%,.5);
	box-shadow:3px 3px 3px 0 hsla(222,12%,56%,.5);
}

@media all and (min-width: 768px) {
	.bnrGallery, .bnrMessage {width: 450px; padding-bottom: 50px;}
}
@media all and (max-width: 767px) {
	.bnrGallery {width: 90%; padding-bottom: 50px;}
	.bnrMessage {width: 90%;}

}