@charset "UTF-8";

@font-face {
	font-family: "YuGothic M";
	src: local("Yu Gothic Medium");
}

html {
	font-size: 62.5%;
}

body {
	margin: 0;
	padding: 0;
	color: #444;
	line-height: 1;
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: -.03rem;
	font-family: "游ゴシック体", YuGothic, "YuGothic M", Verdana, Meiryo, "M+ 1p", sans-serif;
}

* {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5 {
	margin: 0;
}

img {
	border: 0;
	vertical-align: top;
}

p {
	margin: 0;
	line-height: 1.7;
}

a {
	color: #055dcb;
	text-decoration: none;
}

a:hover {
	color: #055dcb;
	text-decoration: none;
}

.container {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}


/* navi */

nav .header {
	width: 234px;
	float: left;
}

nav .header a.brand {
	display: block;
	padding: 10px 0;
}

nav .header a.brand img {
	width: 234px;
}

nav .nav {
	max-width: 776px;
	margin-top: .5rem;
	float: right;
}

nav .nav ul {
	overflow: hidden;
	margin: .6rem -.5rem .6rem 0;
	padding: 0;
	list-style: none;
}

nav .nav li {
	padding: 0 .5rem;
	float: left;
	border-left: 1px solid #a9a9a9;
}

nav .nav li:first-child {
	padding-left: 0;
	border-left: 0;
}

nav .nav a {
	color: #898989;
	font-size: 1.5rem;
	line-height: 2rem;
	text-decoration: none;
}

nav .nav a:hover {
	color: #444;
	text-decoration: underline;
}

nav .nav .ntv,
nav .nav .csn {
	float: right;
	border: none;
}

nav .nav .ntv:before,
nav .nav .csn:before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 6px;
	margin-right: 2px;
}

nav .nav .ntv:before {
	border: solid 3px #fa0;
}

nav .nav .ntv :hover {
	color: #fa0;
}

nav .nav .csn:before {
	border: solid 3px #960;
}

nav .nav .csn a:hover {
	color: #960;
}

nav:after {
	content: "";
	display: block;
	clear: both;
}


/* footer */

footer .container {
	padding: 1rem 0;
	border-top: 1px solid #d0d0d0;
}

footer .content {
	font-size: 1.3rem;
}

footer .copyright {
	text-align: center;
	top: 1rem;
	font-size: 1.1rem;
	color: #898989;
}

footer a {
	color: #898989;
	text-decoration: none;
}

footer a:hover {
	color: #444;
	text-decoration: underline;
}

a#pagetop {
	display: block;
	position: fixed;
	bottom: 0;
	right: 17px;
	z-index: 101;
	visibility: hidden;
	opacity: 0;
	width: 34px;
	height: 34px;
	cursor: pointer;
	background: url(../img/pagetop.svg) no-repeat;
	background-size: contain;
	transition: opacity .3s linear;
}

a#pagetop.active {
	visibility: visible;
	opacity: 1;
}


/* header */

h1 {
	color: #fff;
	background: #000;
	font-size: 2.4rem;
	line-height: 3.2rem;
	font-weight: bold;
	letter-spacing: .1rem;
	padding: .8rem 1.3rem;
}

a.customercenter {
	display: block;
	width: 1024px;
	margin: 0 auto .5rem auto;
	border : solid 1px rd;
}

a.extrabanner {
	display: block;
	width: 1024px;
	margin: 0 auto .5rem auto;
}




#toppage-header {
	width: 100%;
	overflow: hidden;
}

#topvideo-track {
	text-align: center;
	background: #000;
	margin: 0;
}

.topslider {
	width: 1024px;
	margin: 0 auto;
}

.topslider .slick-list {
  overflow: visible;
}

.topslider .slick-slide {
	background: #000;
}

.topslider .slick-slide h1,
.topslider .slick-slide .creditbox {
	display: none;
}

.topslider .slick-current h1,
.topslider .slick-current .creditbox {
	display: block;
}

.topslider .slick-slide .catch {
	opacity: 0;
}

.topslider .slick-current .catch {
	opacity: 1;
}

#topslider a,
#category-header a,
#category-header .image,
#program-header .image {
	display: block;
	position: relative;
}

#topslider a,
#toppage-header .slick-dots,
#category-header .slider a {
	opacity: 0;
}

#topslider a:after {
	content: "";
	display: block;
	clear: both;
}

#topslider img.pickup {
	float: left;
	margin-top: .8rem;
	margin-left: 4px;
	
	display: none;
}

#topslider h1 {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
	background: none;
	text-shadow: 1px 1px 2px #000;
}

#topslider h1 span.long {
	font-size: 80%;
}

#category-header h1 .categoryname {
	display: inline-block;
	float: left;
}

#category-header h1 .catch {
	display: inline-block;
	font-size: 1.8rem;
	font-weight: normal;
	padding-left: 1rem;
	line-height: 2.4rem;
}

#topslider .osusume {
	position: absolute;
	bottom: 456px;
	z-index: 1;
	
	display: none;
}

#topslider .osusume img:hover {
	opacity: 1 !important;
}

#topslider .creditbox,
#category-header .creditbox,
#program-header .creditbox {
	position: absolute;
	top: 554px;
	width: 100%;
	z-index: 1;
	text-align: right;
	right: 4px;
}

#topslider .creditbox .credit,
#category-header .creditbox .credit,
#program-header .creditbox .credit {
	display: inline-block;
	text-align: left;
	color: #fff;
	font-size: 1rem;
	padding: .2rem .5rem;
	margin-bottom: 0.2rem;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 3px;
}

#topslider .creditbox .credit:empty,
#category-header .creditbox .credit:empty,
#program-header .creditbox .credit:empty {
	display: none;
}

#topslider .catchbox,
#category-header .catchbox,
#program-header .catchbox {
	background: #000;
	color: #fff;
	font-size: 2rem;
	padding: .8rem;
}

#topslider .catchbox .catch span.light {
	font-weight: bold;
	color: #a00;
}

#category-header .catchbox .catch span.light,
#program-header .catchbox .catch span.light {
	font-weight: bold;
	color: #ff0;
}

#program-header iframe {
	display: block;
	width: 1024px;
	height: 576px;
}

#category-header .embedtitle,
#program-header .embedtitle {
	
	display: none;
	
	color: #fff;
	padding: 1rem;
	text-align: right;
}

#category-header .slick-dots {
	display: none !important;
}

/* now onair */

#toppage-nowonair {
	padding: 1rem 0;
}

#toppage-nowonair div#nowonair {
	border: solid 1px #333;
	display: table;
	table-layout: fixed;
	width: 100%;
}

#toppage-nowonair div#nowonair div.onair {
	display: table-cell;
	background: #000;
	color: #fff;
	font-size: 1.8rem;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

#toppage-nowonair div#nowonair div.programs {
	display: table-cell;
	width: 928px;
	padding: .4rem 0;
}

#toppage-nowonair div#nowonair div.programs div,
#toppage-nowonair div#nowonair div.programs a {
	display: block;
	padding: .4rem 1rem;
	font-size: 1.5rem;
	line-height: 1.6rem;
	color: #000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#toppage-nowonair div#nowonair div.now:before,
#toppage-nowonair div#nowonair a.now:before {
	content: 'NOW';
	color: #c00;
}

#toppage-nowonair div#nowonair div.next:before,
#toppage-nowonair div#nowonair a.next:before {
	content: 'NEXT';
	color: #c00;
}

#toppage-nowonair div#nowonair span.triangle {
	color: #c00;
	padding-left: .2rem;
}

#toppage-nowonair div#nowonair div.now span.triangle {
	color: #c00;
	padding-left: .3rem;
}

#toppage-nowonair div#nowonair span.title {
	padding-left: .6rem;
}

#toppage-nowonair div#nowonair a:hover span.time,
#toppage-nowonair div#nowonair a:hover span.title {
	text-decoration: underline;
	color: #c00;
}


/* whatsnew & lineup */

#toppage-news,
#toppage-lineup #main,
#toppage-lineup #subbox,
#toppage-lineup #subbox #sub #bunners,
#toppage-lineup #subbox #sub #present,
#category-lineup .main,
.present-sns,
.present-sns .present {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}


/* whatsnew */

#toppage-news {
	margin-top: 0;
	padding-bottom: .4rem;
}

#toppage-news #whatsnew {
	width: 800px;
}

#toppage-news #whatsnew ul {
	margin: 0;
	padding: 0;
	list-style: square;
}

#toppage-news #whatsnew li {
	margin-left: 2rem;
	color: #c00;
	font-size: 1.7rem;
	line-height: 1.4;
}

#toppage-news #whatsnew li a {
	color: #c00;
	text-decoration: none;
}

#toppage-news #whatsnew li a:hover {
	text-decoration: underline;
}

#toppage-news #guides {
	width: 200px;
	font-size: 1.5rem;
	line-height: 1.8;
}

#toppage-news #guides a {
	color: #444;
	text-decoration: none;
}

#toppage-news #guides a:hover {
	text-decoration: underline;
}


/* lineup */

#toppage-lineup #main {
	margin-top: 4px;
}

#category-lineup .main {
	margin-top: 8px;
}

#toppage-lineup #subbox {
	margin-top: 0;
}

#toppage-lineup #subbox #sub,
#toppage-lineup #subbox #sub #present {
	width: 776px;
}

#toppage-lineup #main:after,
#category-lineup .main:after {
	content: "";
	display: block;
	width: 338px;
}

#toppage-lineup #main a,
#toppage-lineup #subbox #sub a,
#category-lineup .main a {
	display: block;
	margin-bottom: 4px;
}

#toppage-lineup #main a div.title,
#toppage-lineup #subbox #sub a div.title,
#category-lineup .main a div.title {
	width: 338px;
	color: #000;
	font-weight: bold;
	line-height: 1.8rem;
	padding: .1rem .4rem 1rem .4rem;
	font-size: 1.4rem;
	word-break: break-all;
}

#toppage-lineup #main a div.title span.light,
#toppage-lineup #subbox #sub a div.title span.light,
#category-lineup .main a div.title span.light {
	color: #a00;
}

#toppage-lineup #subbox #present a,
.present-sns a {
	display: block;
	position: relative;
	margin-bottom: 4px;
	width: 384px;
}

.present-sns .present {
	width: 774px;
}

#program-lineup .present-sns .present {
	margin-top: 2rem;
}


/* middle banner */
#program-content .middlebanner {
	text-align: center;
}

#program-content .middlebanner a {
	display: inline-block;
	margin-top: 1rem;
}


/* sidebar */

.sidebar {
	position: relative;
	width: 240px;
}

.sidebar .extraitem {
	display: block;
	position: relative;
	margin-bottom: 4px;
}


/* daily program */

#dailyprogram {
	position: relative;
}

#dailyprogram .head {
	height: 26px;
	color: #fff;
	text-align: center;
	font-size: 1.6rem;
	line-height: 26px;
	background: #333;
}

#dailyprogram .date {
	height: 140px;
	padding: 110px 0 10px 0;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	border: 1px solid #d0d0d0;
	background: url(../img/gtasu.svg) no-repeat center 20px;
	background-size: 33%;
}

#dailyprogram .list {
	margin-top: 4px;
	background: #f9f9f9;
	border-top: 1px solid #ddd;
}

#dailyprogram p {
	padding: .5rem .5rem .5rem 0;
	font-size: 1.4rem;
	line-height: 1.4;
	border-bottom: 1px solid #ddd;
	overflow: hidden;
}

#dailyprogram p span.time {
	display: block;
	width: 55px;
	padding: .1rem 0;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	background: #333;
	float: left;
}

#dailyprogram p span.program {
	display: block;
	margin-left: 60px;
	padding-top: .1rem;
}

#dailyprogram p:hover {
	background: #f0f8f8;
}

#dailyprogram p:hover span.time {
	background: #055dcb;
}


/* sns */

.sns {
	position: relative;
	width: 240px;
	margin-top: 2rem;
	text-align: center;
}

.sns a {
	display: inline-block;
	width: 38px;
	margin: 0 1rem;
	transform: scale(1);
	transition: all .1s;
}

.sns a:hover {
	transform: scale(1.15);
}

.sns a img {
	width: 38px;
}


/* program detail */

#program-content .detail {
	padding: 1rem 1.3rem;
}

#program-content .detail .ellipsis {
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 10rem;
	line-height: 1.7;
}

#program-content .detail .ellipsis p {
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: justify;
	text-justify: inter-ideograph;
}

#program-content .detail .ellipsis p:nth-child(n + 2),
#program-content .detail .ellipsis br {
	display: none;
}

#program-content .detail .ellipsis-visible {
	overflow: auto;
	white-space: normal;
	margin-right: 0;
}

#program-content .detail .ellipsis-visible p:nth-child(n + 2) {
	display: block;
	margin-top: 1.2rem;
}

#program-content .detail .ellipsis-visible br {
	display: inline;
}

#program-content .detail a.ellipsis-more {
	display: inline-block;
	margin-top: .2rem;
	font-size: 1.3rem;
	line-height: 1.7;
	cursor: pointer;
	float: right;
}

#program-content .detail a.ellipsis-less {
	display: none;
	font-size: 1.3rem;
	cursor: pointer;
	text-align: right;
}

#program-content .detail .ellipsis .word {
	display: inline-block;
}


/* program timetable */

#program-content table.timetable {
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
}

#program-content table.timetable th, table.timetable td {
	text-align: center;
	font-weight: 600;
	font-size: 1.5rem;
	vertical-align: top;
}

#program-content table.timetable tr {
	background: #f8f8f8;
}

#program-content table.timetable tr:nth-child(2n+1) {
	background: #efefef;
}

#program-content table.timetable em {
	color: #000;
	font-size: 1.8rem;
	font-weight: bold;
	font-style: normal;
}

#program-content table.timetable p.details {
	margin-top: .3rem;
	padding-top: .3rem;
	border-top: 1px dotted #999;
	font-weight: normal;
	font-size: 1.5rem;
}

#program-content table.timetable .h1 {
	width: 64%;
	padding: .4rem 1rem;
	color: #fff;
	background: #000;
}

#program-content table.timetable .h2 {
	width: 36%;
	color: #fff;
	background: #000;
}

#program-content table.timetable .h2 table {
	width: 100%;
	border-collapse: collapse;
}

#program-content table.timetable .h2 tr {
	background: transparent;
}

#program-content table.timetable .h2 th {
	width: 50%;
	padding: .4rem 3rem .4rem 0;
}

#program-content table.timetable .c1 {
	padding: 1rem 1rem;
	border-bottom: 1px solid #333;
}

#program-content table.timetable .c1 img {
	vertical-align: text-bottom;
}


#program-content table.timetable .c2 {
	border-bottom: 1px solid #333;
	padding: 1rem 0;
}

#program-content table.timetable .c2 table {
	width: 100%;
	border-collapse: collapse;
}

#program-content table.timetable .c2 tr {
	background: transparent;
}

#program-content table.timetable .c2 tr:first-child td {
	border-top: 0;
}

#program-content table.timetable .c2 td {
	padding: 1rem;
	border-top: 1px solid #999;
}

#program-content table.timetable .c2 td.date {
	width: 160px;
	text-align: left;
	padding-left: 2rem;
}

#program-content table.timetable .c2 td.nodate,
#program-content table.timetable .c2 td.notime {
	padding-top: .5rem;
	padding-bottom: .5rem;
}

#program-content table.timetable .c2 div.remarkbox {
	text-align: center;
}

#program-content table.timetable .c2 div.remarkbox p.remarks {
	display: inline-block;
	text-align: left;
	padding-top: .2rem;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 1.6;
	color: #c00;
}

#program-content table.timetable .icon {
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	margin-right: .5rem;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

#program-content table.timetable .tmidnight {
	font-size: 1rem;
}

#program-content table.timetable .icon-live {
	background-image: url(../img/prog_live.svg);
}

#program-content table.timetable .icon-first {
	background-image: url(../img/prog_first.svg);
}

#program-content table.timetable .icon-theday {
	background-image: url(../img/prog_theday.svg);
}

#program-content table.timetable .icon-vtr {
	background-image: url(../img/prog_vtr.svg);
}

#program-content table.timetable .icon-repeat {
	background-image: url(../img/prog_repeat.svg);
}

#program-content table.timetable div.channel img {
	display: block;
	width: 120px;
	margin-top: .5rem;
}

#program-content table.timetable div.channel dl dd {
	position: absolute;
	width: 330px;
	padding: 10px;
	font-size: 1.3rem;
	line-height: 2.2rem;
	font-weight: normal;
	background: #fff;
	border: solid 1px #999;
}

#program-content table.timetable div.expandable {
	display: none;
}

#program-content table.timetable div.expandable p.left {
	text-align: left;
}

#program-content table.timetable a.btn-more {
	display: block;
	width: 30%;
	margin: .8rem auto .2rem;
	text-align: center;
	line-height: 1.8rem;
	background: #d9d9d9;
	border-radius: 1rem;
	cursor: pointer;
}

#program-content table.timetable a.btn-more span {
	display: inline-block;
	width: 1.4rem;
	height: 1rem;
	margin: 0;
	background: url(../img/more.svg) no-repeat center center;
	background-size: contain;
	-webkit-transition: -webkit-transform .2s;
	transition: -webkit-transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s;
}

#program-content table.timetable a.btn-more span.less {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

#program-content table.timetable dl.overview {
	margin-top: .6rem;
	padding-top: .6rem;
	border-top: 1px dotted #999;
}

#program-content table.timetable dl.overview dt {
	display: block;
	width: 30%;
	margin: 0 auto .5rem auto;
	text-align: center;
	font-size: 1.3rem;
	padding: .5rem 0;
	background: #fdc;
	border: solid 1px #f66;
	border-radius: 1rem;
}

#program-content table.timetable dl.overview dd {
	display: none;
	font-weight: normal;
	padding-bottom: 1rem;
	font-size: 1.5rem;
	line-height: 2.4rem;
}

#program-content table.timetable dl.overview dd div.ovtext {
	display: inline-block;
	text-align: left;
	font-size: 1.5rem;
}

#program-content table.timetable dl.overview dd div.ovtext p {
	line-height: 2.4rem;
}

#program-content table.timetable dl.overview dd div.ovtext p:nth-child(n + 2) {
	margin-top: 1rem;
}

#program-content table.timetable dl.overview dd div.less {
	display: block;
	width: 30%;
	margin: .8rem auto 0 auto;
	text-align: center;
	line-height: 1.8rem;
	background: #d9d9d9;
	border-radius: 1rem;
	cursor: pointer;
}

#program-content table.timetable dl.overview dd div.less span {
	display: inline-block;
	width: 1.4rem;
	height: 1rem;
	margin: 0;
	background: url(../img/more.svg) no-repeat center center;
	background-size: contain;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

#program-content table.timetable td.comingsoon {
	padding: 2rem 0;
}


/* accordion */

dl.accordion,
dl.accordion dt,
dl.accordion dd {
	margin: 0;
	padding: 0;
}

dl.accordion dt {
	cursor: pointer;
}

dl.accordion dd {
	display: none;
}