@charset "utf-8";

.vpc{display: inherit;}
.vsp{display: none;}

div.left_box {}
div.left_box div.sppg_title p span { font-size:80%; font-weight:lighter; color:#FF0000;}



.page_contents .sppg_content p.txt01 { padding: 10px}


div.left_box div.sppg_content div.backnumber_box h4 { border:none;}
div.left_box div.sppg_content div.onair_box { border-radius: 6px;}
div.left_box div.sppg_content div.onair_box,
div.left_box div.sppg_content div.backnumber_box dl { width:96%; margin:0 auto;}
div.left_box div.sppg_content div.onair_box { color:#000; position:relative; top:-10px; margin-bottom:50px; /*background:#f17496;*/;border: 1px solid #000; border-radius: 0.5em;}
div.left_box div.sppg_content div.onair_box p,
div.left_box div.sppg_content div.backnumber_box dl dd p { font-size:90%; display: -webkit-flex;  display: flex; padding:0; margin:0; line-height:1.4;}
div.left_box div.sppg_content div.onair_box p span,
div.left_box div.sppg_content div.backnumber_box dl dd p span { position:relative; top:-10px; display:block; padding-bottom:5px;}
div.left_box div.sppg_content div.backnumber_box dl dd p span { left:-3px; margin-right:5px;}
div.left_box div.sppg_content div.onair_box  dl dd p strong,
div.left_box div.sppg_content div.backnumber_box dl dd p strong { display:block; font-size:105%; font-weight:bold; padding-bottom:5px;}
div.left_box div.sppg_content div.onair_box  dl dd p strong{ color: #000;}
div.left_box div.sppg_content div.onair_box dl dd p img,
div.left_box div.sppg_content div.backnumber_box dl dd p img { position:relative; left:13px; width:49%; height:49% !important; margin:1em 1% 0 0;}
div.left_box div.sppg_content div.onair_box p img.w100,
div.left_box div.sppg_content div.backnumber_box dl dd p img.w100 { left:0; width:100% !important; height:auto; margin:0;}
/*div.left_box div.sppg_content div.onair_box p:first-child { border:solid 2px #000; text-align:center;}*/
div.left_box div.sppg_content div.onair_box p:last-child,
div.left_box div.sppg_content div.backnumber_box dl dd p:last-child { padding:15px;}


div.left_box div.sppg_content div.backnumber_box dl dt { font-weight:bold; color:#15628e; padding:5px 0;}
div.left_box div.sppg_content div.backnumber_box dl dt:before{content: "■"}
div.left_box div.sppg_content div.backnumber_box dl dd { margin-bottom:20px;/*background:#B8DFF4;*/border: 1px solid #000;border-radius: 0.5em;}
p.list_more { color:#fff; padding: 10px 0; border-radius:6px; background: #00a0d1; text-align: center; cursor: pointer; font-weight: bold;}
p.list_more:hover { opacity: 0.7; filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)";  /* ie 8 */}

div.left_box section.sppg_box p.btn_gyao { text-align:center;}
div.left_box section.sppg_box p.pr_banner { width: 96%; margin: 30px auto;}
div.left_box section.sppg_box p.pr_banner img { width: 100%; height: auto;}

.s_01 { position:relative; top:5px; width:564px; height:317px; margin:0 0 30px 5px !important; padding:4px; background:#333;}
.s_01 a:hover {	opacity: 0.7; filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)";  /* ie 8 */ -webkit-transition: 1.0s ease-out;	transition: 1.0s ease-out;	}
.s_01 img { width:100%; height:auto;}
.s_01 .btn_play_on,
.s_01 .btn_play_off{
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width:564px;
	height:317px;
	z-index:101;
	background:url(/ondemand/images/btn_play_off.png) 50% 50% no-repeat;
	background-size:60px 60px;
	opacity:1.0;
	-webkit-transition: 1.0s ease-out;
	transition: 1.0s ease-out;
}
.s_01 .btn_play_on{
	z-index:100;
	background:url(/ondemand/images/btn_play_on.png) 50% 50% no-repeat ;
	background-size:60px 60px;
	opacity:0.0;
}
.s_01:hover .btn_play_off{
	opacity:0.0;
}
.s_01:hover .btn_play_on{
	opacity:1.0;
}

.pc_none { display:none;}

.page_contents div.movie_box { width:96%; margin:0 auto;}


.btn_flex-even{display: flex;}
.btn_flex-even > li{/*flex-basis: 100%;*/flex-basis: 32%;}
.btn_flex-even li a{display:block;padding: 0.3em; margin: 0 0.3em;border: 1px solid #ccc; border-radius: 6px;}
.btn_flex-even li img{display:block;width: 84%; max-width:200px; height: auto; text-align: center; margin: 0 auto;}


.flb{display:flex; flex-wrap: wrap; /*justify-content:center;*/ width: 100%; max-width: 600px; margin: 0 auto;}

/* タイトル */
div.left_box div.sppg_content p.lead_txt span strong {color:#6666cc; font-size:130%; display:block;}

.bg_title{background: #ff6a68; border-radius: 6px; margin: 0 0 8px;}
.page_contents .sppg_content .box_oa .title p{margin: 0 auto!important;}
.title p span{font-size: 120%; font-weight: 300; line-height: 1.0; color: #fff; padding: 14px 0 0; display: inline-block;}

/*.title.flb{margin: 0 0 30px; border-top: 2px solid #6666cc; border-bottom: 2px solid #6666cc; background: #ffdef3;}
.title.flb div:nth-child(1){width: 20%; text-align: center; color:#6666cc;}
.title.flb div:nth-child(2){width: 56%; color:#6666cc;}
.title.flb div:nth-child(3){width: 24%; text-align: center; color:#6666cc;}*/

.page_contents .sppg_content .date p{width: 96%; margin: 0 auto; padding: 0 0 6px; color: #fcf147; text-align: right; font-size: 80%; font-weight: 600;}
/*.title.flb div{margin-top: 15px;}
.title.flb div:nth-child(2) p span{font-size: 140%; font-weight: 600; line-height: 1.2;}
.title.flb div:nth-child(3) p{margin: 10px 0 0; font-weight: 600;}*/


.notice{font-size: 80%;}

/*.flb.box-photogallery{width: 96%; margin: 18px auto 14px;}
.flb.box-photogallery a{width: calc(100% / 4);}
.flb.box-photogallery a img{width: 100%; height: auto;}
*/

/* フォトギャラリー調整 ------------------------------------------*/
.page_contents .sppg_content div#box-photogallery {position: relative; display: flex;flex-wrap: wrap;gap:0.25rem;box-sizing: border-box;margin-left: 0.25rem;}
.page_contents .sppg_content div#box-photogallery a {float:none; width: calc(25% - 0.25rem); margin:0; }
.page_contents .sppg_content div#box-photogallery a img {width: 100%; object-fit: cover;border-radius: 0.2rem; aspect-ratio: 4 / 3;}


/* 番組詳細 */
.txt p{font-size: 88%; line-height: 1.8!important;}

.comment.flb{margin: 0 0 8px;}
/*.comment+.comment{margin: 0 0 30px;}*/
.comment.flb div:nth-child(1){width: 26%; text-align: center; padding: 0 1.5%; order: 2;}
.comment.flb div:nth-child(1) img{width: 100%;}
.comment.flb div:nth-child(2){width: 66%; order: 3;}
.comment.flb div:nth-child(3){width: 30%; margin: 0 70% 10px 0; order: 1;}
.comment.flb div:nth-child(3) img{width: 100%;}

.page_contents .sppg_content p { width: 94%; font-size: 0.9rem; }


/*スライダー*/
/*.swiper {width: 80%; margin: 0 0 30px;}
#next .swiper {width: 90%;margin: 0.25rem auto 2rem;}
#end .swiper {width: 90%;margin: 0.25rem auto; border-bottom: 1px dotted #c3c3c3;}
.swiper-slide {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: bold;}
.swiper-slide img {width: 100%; height: auto; margin: 0;}*/

/*場面*/
ul.img_spot{margin:0 auto; width:90%;max-width: 500px;overflow: hidden;}
ul.img_spot li{margin-bottom: 0.5rem;}
ul.img_spot img{width: 100%;height: auto;}

/*出演者*/
.page_contents .sppg_content ul.cast_list li.wide1 {position: relative; float: left; width: 100%; margin: 0;}
.page_contents .sppg_content ul.cast_list li.wide1 img {width: 100%;}
.page_contents .sppg_content ul.cast_list li.wide1 p.cast_txt { text-align: center; }
.page_contents .sppg_content ul.cast_list li.wide1 p.cast_txt span { font-size: 90%; }



/*動画配信*/
#movie_h { position:relative; z-index:2; width:96%;width-max:640px; margin:0 auto; padding:0px; }
#movie_h dl {padding:10px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; background:#000;}
#movie_h dl img { width:100%; height:auto;}
#movie_h dl dt { margin-bottom:15px;}
#movie_h dl dd { width:48%;}
#movie_h dl dd img { border-radius:8px;}
#movie_h dl dd img:hover { opacity: 0.9;}
/*ヘッダー*/
#top_img{position: relative; width: 100%; max-width: 600px; padding-top: 75%; /*height: 356px;*/ background-color: #FFF;}
#top_logo{position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; max-width: 600px;}
#top_logo img{width: 100%;}
/*#top_img{width: 100%; height: auto; padding-top: 61.33%; overflow: hidden;}
#top_logo{position: absolute; left: 0px; bottom: 0px; width: 100%; max-width: 600px;}
#top_logo img{width: 100%;}*/


ul.cnt{width: 96%; margin: 0 2%;}
ul.cnt li{padding-left: 1em; text-indent: -1em; font-size: 0.9rem; line-height: 2;}

.teikyou{width: 96%; max-width: 240px; margin: 0 2% 30px;}
.teikyou img{width: 100%;}
.kyouryoku{width: 96%; margin: 0 auto 30px; padding-bottom: 30px; border-bottom: dotted 1px #333;}
.kyouryoku li{font-size: 0.9rem; margin-bottom: 0.5rem; line-height: 1.6;}


/*見逃し配信------------------------------------------*/
div.left_box div.sppg_content  div.movie_box { margin-bottom:1em;}
div.left_box div.sppg_content  div.movie_box img{ width: 100%; height: auto;}


@media screen and (max-width: 768px) {

.vpc{display: none;}
.vsp{display: inherit;}

.page_contents .sppg_content p { /*width:auto;*/ width: 90%; margin: 0 auto 10px; text-align: justify; }
.page_contents .sppg_content ul.cast_list li p.cast_txt { width:88%; left:0;}
div.left_box div.sppg_content div.onair_box,
div.left_box div.sppg_content div.backnumber_box dl dd { display:block;}
div.left_box div.sppg_content div.onair_box p:first-child,
div.left_box div.sppg_content div.backnumber_box dl dd p:first-child { width:95%;}
/*div.left_box div.sppg_content div.backnumber_box dl dt { width:50%;}*/
div.left_box div.sppg_content div.backnumber_box dl dd p:last-child { padding:10px;}
div.left_box div.sppg_content div.onair_box p img,
div.left_box div.sppg_content div.backnumber_box dl dd p img { left:2.7%;}
div.left_box section.sppg_box p.btn_gyao { width:90%; margin:0 auto;}
div.left_box section.sppg_box p.btn_gyao img { width:100%; height:auto;}

div.left_box div.sppg_content  div.movie_box { text-align:center;}
div.left_box div.sppg_content  div.movie_box iframe { position:relative; width:100%; max-width:360px; height:200px;}
.s_01 { width:94%; height:auto; margin:0 auto 25px !important;}
.s_01 .btn_play_on,
.s_01 .btn_play_off{ width:100%; height:auto;}

.pc_none { display:block;}

#top_img{max-width: none;}
#top_logo{max-width: none;}

/* SP版 */
#movie_h {margin-top: 1em;}

/*見逃し配信*/
div.left_box div.sppg_content  div.movie_box { text-align:center;margin-bottom:0.5em;}
div.left_box div.sppg_content  div.movie_box iframe {position:relative; width:96%;}	

}




@media screen and (max-width: 480px) {

/* タイトル */
.page_contents .sppg_content .date p{text-align: center;}
/*.title.flb div:nth-child(1){width: 100%;}
.title.flb div:nth-child(2){width: 100%; text-align: center;}
.title.flb div:nth-child(3){width: 100%;}
.title.flb div:nth-child(3) p{width: 100%; margin: 10px 0 15px;}*/

/* ランキング */


/* コメント */

/*.comment.flb div:nth-child(1){width: 26%; text-align: center; padding: 0 1.5%; order: 2;}
.comment.flb div:nth-child(1) img{width: 100%;}
.comment.flb div:nth-child(2){width: 66%; order: 3;}
.comment.flb div:nth-child(3){width: 30%; margin: 0 70% 10px 0; order: 1;}
.comment.flb div:nth-child(3) img{width: 100%;}*/

.comment.flb div:nth-child(1){width: 50%; margin: 20px 25% 10px; order: 2;}
.comment.flb div:nth-child(2){width: 100%; order: 1;}
.comment.flb div:nth-child(3){width: 100%; margin: 0 25% 10px; order: 3;}

/*吹き出し*/
.balloon{position: relative; display: inline-block; margin: 0 0 0 15px; padding: 7px 10px; min-width: 120px; max-width: 100%; color: #333; font-size: 95%; line-height: 2.1; background: #FFF; border: solid 3px #cacaca; box-sizing: border-box; border-radius: 6px;}
.balloon:before {
  content: ""; position: absolute; top: unset; bottom: -24px; left: 50%; margin-left: -15px; border: 12px solid transparent; border-top: 12px solid #fff; z-index: 2;}
.balloon:after {
  content: ""; position: absolute; top: unset; bottom: -30px; left: 50%; margin-left: -17px; border: 14px solid transparent; border-top: 14px solid #cacaca; z-index: 1;}

}