/* ===========================================
	TBS TV (smp)
=========================================== */

@media all and (min-width: 1200px) {
main, div.note {
	max-width:1200px;
	margin:0 auto;
}
}
@media all and (min-width: 992px) {
div.tbsv9_banner_responsive {
	margin-bottom:80px;
}
}
@media all and (max-width: 991.98px) {
body.tv div.nowoa {
	margin-bottom:20px;
}
main, div.note {
	padding:0 5.3333333333vw;
}
div.tbsv9_banner_responsive {
	margin-bottom:40px;
}
}


/*	.header
============================ */

header.header h1 {
	margin-bottom:0.25em;
}
header.header p.cap {
	color:#4e4e4e;
	font-size:75%;
	line-height:1.5;
}
header.header p.cap:before {
	content:"※ ";
}


@media all and (min-width: 992px) {
div.breadcrumbs + header.header {
	padding-top: 60px;
}
}
@media all and (max-width: 991.98px) {
div.breadcrumbs + header.header {
	padding-top: 30px;
}
}


/*	.tbs-btn
============================== */
.tbs-btn.btn-nowoa {
	text-align:center;
}
.tbs-btn.btn-nowoa a {
	color:#000;
	background-color:#fff55a;
}
.tbs-btn.btn-nowoa a > span {
	display:inline-block;
	position:relative;
}
.tbs-btn.btn-nowoa a > span:after {
	width: 2px;
	height: 100%;
	top:0;
	left:50%;
	margin-left:-1px;
	margin-top:0;
}
.tbs-btn.btn-nowoa a > span:before {
	transform: rotate(135deg);
	transform-origin: left bottom;
	left: 50%;
	right:0;
	top: -50%;
}
@media all and (min-width: 992px) {
.tbs-btn.btn-nowoa {
	margin-bottom:40px;
}
}
@media all and (max-width: 991.98px) {
.tbs-btn.btn-nowoa {
	margin-bottom:20px;
}
}


/*	.pulldownMenu
============================ */
nav.nav-days {
	background-color:#0050ff;
	padding:12px 5.3333333333vw;
}
form.pulldownMenu {
	position: relative;
	max-width:800px;
	margin:0 auto;
}
form.pulldownMenu select {
	width:100%;
	display:block;
	
	overflow: hidden;

	color: #33363B;
	background-color:#fff;
	font-size:16px;
	line-height:24px;
	font-weight:700;
	text-align:left;
	letter-spacing:0.1em;

	cursor: pointer;
	
	text-overflow: ellipsis;
	
	outline: none;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	
	padding: 12px 20px;
	border: 2px solid #33363B;
	border:none;
	border-radius: 24px;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;

	box-shadow:4px 4px 10px hsla(0,0%,0%,.2);
}
form.pulldownMenu::after {
	content:"";
	display: block;
	width: 12px;
	height: 12px;
	border-top: 2px solid #0050ff;
	border-right: 2px solid #0050ff;
	position:absolute;
	right:20px;
	top:50%;
	transform: rotate(135deg);
	margin-top:-10px;
	pointer-events: none;
}
form.pulldownMenu select::-ms-expand {
	display: none;
}


/*	main
============================ */
main {
	text-align:left;
}
@media all and (min-width: 992px) {
main {
	padding-top:40px;
	margin-bottom:40px;
}
}
@media all and (max-width: 991.98px) {
main  {
	padding-top:20px;
	margin-bottom:20px;
}
}
/*	main > article
============================ */
main > article {
	min-height:100vh;
}
main > article > header > h2 {
	display:flex;
	justify-content:center;
	align-items:center;
	color:#fff;
	background-color:#0050ff;
	letter-spacing:0.1em;
	text-indent:0.1em;
}
@media all and (min-width: 992px) {
main > article > header > h2 {
	font-size:150%;
	height:48px;
	border-radius:8px;
}
}
@media all and (max-width: 991.98px) {
main > article > header > h2 {
	font-size:112.5%;
	height:36px;
	border-radius:5px;
}
}


/*	.timeline
============================ */
div.timeline > ul > li {
	border-bottom:1px solid #b4b4b4;
}
div.timeline > ul > li.now {
	background-color:#fffac8;
}
div.timeline > ul > li > dl > dt {
	display:flex;
	align-items:center;
	gap:16px;
	margin-bottom:1em;
}
div.timeline > ul > li > dl > dt > span {
	display:inline-block;
	font-weight:700;
}
div.timeline > ul > li > dl > dt > span.start-time {
	display:inline-flex;
	align-items:center;
	color:#fff;
	background-color:#0050ff;
}
div.timeline > ul > li.overnight > dl > dt > span.start-time {
	background-color:#81899C;
}
div.timeline > ul > li.morning > dl > dt > span.start-time {
	background-color:#5a96ff;
}
div.timeline > ul > li.daytime > dl > dt > span.start-time {
	background-color:#ff781e;
}
div.timeline > ul > li.afternoon > dl > dt > span.start-time {
	background-color:#32c83c;
}
div.timeline > ul > li.midnight > dl > dt > span.start-time {
	background-color:#81899c;
}
div.timeline > ul > li.now > dl > dt > span.start-time {
	background-color:#ff5064;
}
div.timeline > ul > li > dl > dt > span.now-onair {
	color:#e61400;
}
div.timeline > ul > li > dl > dd h3 {
	line-height:1.5;
}
div.timeline > ul > li > dl > dd h3:not(:last-child) {
	margin-bottom:1em;
}
div.timeline > ul > li > dl > dd h3 a {
	display:block;
}
div.timeline > ul > li > dl > dd h3 a:link,
div.timeline > ul > li > dl > dd h3 a:active,
div.timeline > ul > li > dl > dd h3 a:hover {
	color:#0050ff;
}
div.timeline > ul > li > dl > dd h3 a:visited {
	color:#0014c8;
}
div.timeline > ul > li.now > dl > dd h3 a:link,
div.timeline > ul > li.now > dl > dd h3 a:active,
div.timeline > ul > li.now > dl > dd h3 a:hover {
	color:#ff3c1e;
}
div.timeline > ul > li.now > dl > dd h3 a:visited {
	color:#e61400;
}
div.timeline > ul > li > dl > dd p.txt {
	line-height:1.5;
}
div.timeline > ul > li > dl > dd p.txt:not(:last-child) {
	margin-bottom:1.5em;
}
@media all and (min-width: 992px) {
div.timeline > ul > li {
	padding:30px;
}
div.timeline > ul > li > dl > dt > span.start-time {
	font-size:100%;
	height:32px;
	padding:0 32px;
	border-radius:16px;
}
div.timeline > ul > li > dl > dd h3 {
	font-size:125%;
}
div.timeline > ul > li > dl > dd p.txt {
	font-size:112.5%;
}
}
@media all and (max-width: 991.98px) {
div.timeline > ul > li {
	padding:20px 0;
}
div.timeline > ul > li.now {
	margin:0 -5.3333333333vw;
	padding:20px 5.3333333333vw;
}
div.timeline > ul > li > dl > dt > span.start-time {
	font-size:87.5%;
	height:28px;
	padding:0 28px;
	border-radius:14px;
}
div.timeline > ul > li > dl > dd h3 {
	font-size:100%;
}
div.timeline > ul > li > dl > dd p.txt {
	font-size:87.5%;
}
}



/*	figure
============================ */
div.timeline ul li dl dd figure {
	max-width:304px;
	margin:0 auto;
}
div.timeline ul li dl dd figure:not(:last-child) {
	margin-bottom: 20px;
}
div.timeline ul li dl dd figure span,
div.timeline ul li dl dd figure img {
	display:block;
}
div.timeline ul li dl dd figure span {
	position:relative;
	height:0;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	padding-top: -webkit-calc(9 / 16 * 100%);
	padding-top: -webkit-calc(9 / 16 * 100%);
}
div.timeline ul li dl dd figure img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.timeline ul li dl dd figure figcaption {
	text-align:center;
	line-height:1.5;
	font-size:83%;
	margin-top:0.5em;
}



/*	.btn
============================== */
.btn {
	text-align:center;
}
.btn:not(:last-child) {
	margin-bottom:20px;
}
.btn a {
	display:inline-flex;
	align-items: center;
	justify-content: center;
	color:#3B3F4A !important;
	background-color:#fff;
	text-decoration:none !important;
	padding-right:1em;
	padding-left:3em;
	box-shadow:4px 4px 10px hsla(0,0%,0%,.1);
}
.btn a > span {
	display:inline-block;
	position:relative;
}
.btn a > span:after {
	content: '';
	display: inline-block;
	line-height: 1;
	width: 100%;
	height: 2px;
	background-color: #3B3F4A;
	position:absolute;
	top:50%;
	left:0;
	margin-top:-1px;
}
.btn a > span:before {
	content: '';
	width: 75%;
	height: 75%;
	border: 2px solid #3B3F4A;
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	transform-origin: top right;
	position: absolute;
	top: 50%;
	right: -1px;
	box-sizing: border-box;
}
.btn p.outgoing {
	line-height:1.5;
	font-size:75%;
	margin-top:0.75em;
}
@media all and (min-width: 992px) {
.btn a {
	font-size:16px;
	height:56px;
	letter-spacing:0.2em;
	border-radius:28px;
}
.btn a > span {
	width:12px;
	height:12px;
	margin-left:24px;
}
}
@media all and (max-width: 991.98px) {
.btn a {
	font-size:14px;
	height:40px;
	letter-spacing:0.1em;
	border-radius:20px;
}
.btn a > span {
	width:10px;
	height:10px;
	margin-left:18px;
}
}


/*	hanrei
============================ */

div.note {
	text-align:left;
}
div.note-inner ul {
	display:flex;
	flex-wrap:wrap;
}
div.note-inner ul li {
	font-size:75%;
	line-height:1.5;
}
div.note-inner ul li a {
	color:#0050ff;
}
div.note-inner ul.ul-icons {
	margin-bottom:20px;
}
@media all and (min-width: 992px) {
div.note {
	margin-bottom:80px;
}
div.note-inner ul li {
	width:20%;
}
}
@media all and (max-width: 991.98px) {
div.note {
	margin-bottom:40px;
}
}
@media all and (min-width: 768px) and (max-width: 991.98px) {
div.note-inner ul li {
	width:25%;
}
}
@media all and (min-width: 576px) and (max-width: 767.98px) {
div.note-inner ul li {
	width:33.3333333333%;
}
}
@media all and (max-width: 575.98px) {
div.note-inner ul li {
	width:50%;
}
}


/*	stream
============================ */
div.btn-realtime:not(:last-child),
ul.ul-stream:not(:last-child) {
	margin-bottom:20px;
}
ul.ul-stream {
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	gap:6px;
}
ul.ul-stream li {
	width:calc((100% - 6px*2)/3);
}
ul.ul-stream li a,
div.btn-realtime a {
	display:block;
	height:40px;
	line-height:40px;
	border-radius:14px;
	text-decoration:none;
	background-position:center center;
	background-repeat:no-repeat;
	background-color:#fff;	
	font-size:2px;
	text-indent:-9999px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	outline-style:none;
	/* border:2px solid #c8c8c8; */
	background-size:contain;
	box-shadow:4px 4px 10px hsla(0,0%,0%,.1);
}
div.btn-realtime a {
	background-image:url(/um/v7/img/tv_btn_realtime.png);
	background-size:218px 22px;
}
ul.ul-stream li.tbsfree a {
	background-image:url(/um/v7/img/tv_btn_tbsfree.png);
}
ul.ul-stream li.tver a {
	background-image:url(/um/v7/img/tv_btn_tver.png);
}
ul.ul-stream li.unext a {
	background-image:url(/um/v7/img/tv_btn_paravi.png);
}

/*	.bpro
============================ */
div.bpro p,
div.bpro section h4 {
	line-height:1.5;
}
div.bpro div.bpro-header > p {
	color:#ff5064;
}
div.bpro-off section {
	display:none;
}
div.bpro div.bpro-header {
	display:inline-flex;
	align-items :center;
	gap:20px;
}
div.bpro section {
	color:#ff5064;
	background-color:#ffe6e8;
	padding:1em;
	margin-top:1em;
}
div.bpro section h4 {
	margin-bottom:0.5em;
}
@media all and (min-width: 992px) {
div.bpro p,
div.bpro section h4 {
	font-size:112.5%;
}
}
@media all and (max-width: 991.98px) {
div.bpro p,
div.bpro section h4 {
	font-size:87.5%;
}
}

/*	.bpro button
============================ */
div.bpro div.bpro-header button {
	display: inline;
	font: inherit;
	background: none;
	border: none;
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}
div.bpro div.bpro-header button {
	display: inline-flex;
	align-items: center;
	justify-content:center;
	gap:10px;
	color:#ff5064;
	background-color:#fff;
	text-decoration: none;
	padding:0 1em;
	border-radius:16px;
	box-shadow:4px 4px 10px hsla(0,0%,0%,.1);
}
div.bpro div.bpro-header button:after {
	display:inline-block;
	width:3em;
	text-align:center;
}
div.bpro-off div.bpro-header button:after {
	content:"詳細";
}
div.bpro-on div.bpro-header button:after {
	content:"閉じる";
}
div.bpro div.bpro-header button span {
	display:inline-block;
	position:relative;
}
div.bpro div.bpro-header button span:before,
div.bpro div.bpro-header button span:after {
	content:"";
	display:inline-block;
	background-color:#ff5064;
	position:absolute;
}
div.bpro-off div.bpro-header button span:after {
	width:2px;
	height:1em;
	top:0;
	left:50%;
	margin-left:-1px;
}
div.bpro-off div.bpro-header button span:before {
	width:1em;
	height:2px;
	left:0;
	top:50%;
	margin-top:-1px;
}
div.bpro-on div.bpro-header button span:before,
div.bpro-on div.bpro-header button span:after {
	left:0;
	width:1.2em;
	height:2px;
	top: 50%;
	left: 50%;
}
div.bpro-on div.bpro-header button span:before {
	transform: translate(-50%,-50%) rotate(-45deg);
}
div.bpro-on div.bpro-header button span:after {
	transform: translate(-50%,-50%) rotate(45deg);
}
@media all and (min-width: 992px) {
div.bpro div.bpro-header button {
	font-size:100%;
	height:32px;
}
div.bpro div.bpro-header button span {
	width:1em;
	height:1em;
}
}
@media all and (max-width: 991.98px) {
div.bpro div.bpro-header button {
	font-size:83%;
	height:24px;
}
div.bpro div.bpro-header button span {
	width:1em;
	height:1em;
}
}


/*	.breadcrumbs
============================== */
div.breadcrumbs {
	text-align:left;
}
div.breadcrumbs ol.breadcrumbs-inner {
	color:#000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	word-break: break-all;
}
div.breadcrumbs ol.breadcrumbs-inner li {
	line-height:1.25;
}
div.breadcrumbs ol.breadcrumbs-inner li a {
/*	color:#fff; */
}
div.breadcrumbs ol.breadcrumbs-inner li > span:first-child {
	display:inline-block;
	position:relative;
	margin-right:8px;
}
div.breadcrumbs ol.breadcrumbs-inner li > span:first-child:before {
	content: '';
	width: 75%;
	height: 75%;
	border: 2px solid #646464;
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	transform-origin: top right;
	position: absolute;
	top: 50%;
	right: -1px;
	box-sizing: border-box;
}
div.breadcrumbs ol.breadcrumbs-inner li > span:first-child:after {
	content: '';
	display: inline-block;
	line-height: 1;
	width: 100%;
	height: 2px;
	background-color: #646464;
	position:absolute;
	top:50%;
	left:0;
	margin-top:-1px;
}
div.breadcrumbs ol.breadcrumbs-inner li.breadcrumbs-item.active a {
	pointer-events: none;
	color: inherit;
	text-decoration: none;
}
@media all and (min-width: 992px) {
div.breadcrumbs {
	padding-top:116px;
	margin:0 30px;
}
div.breadcrumbs ol.breadcrumbs-inner li {
	font-size:87.5%;
}
div.breadcrumbs ol.breadcrumbs-inner li > span:first-child {
	width:12px;
	height:12px;
}
}
@media all and (max-width: 991.98px) {
div.breadcrumbs {
	padding-top:76px;
	margin-left:3.125vw;
	margin-right:3.125vw;
}
div.breadcrumbs ol.breadcrumbs-inner li {
	font-size:75%;
}
div.breadcrumbs ol.breadcrumbs-inner li > span:first-child {
	width:10px;
	height:10px;
}
}