@charset "utf-8";

/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #0bd;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}
 
.loaded {
  opacity: 0;
  visibility: hidden;
}



#wrappar{
	width:100%;
}

#stream{
	width:100%;
	padding:0;
}
.main-wrapper {
	width:100%;
	background-color: #00296F;
	text-align: center;
	padding:0;
}
.main-wrapper .video {
	width: 80vw !important;
	height: calc(80vw * 0.5625) !important;
	margin:0 auto ;
}
.main-wrapper #video_tag_id {
	margin:0 auto ;
	text-align:-webkit-center;
	width: 80vw !important;
	height: calc(80vw * 0.5625) !important;
}
.main-wrapper #video_tag_id_player{
	width:100% !important;
	height:100% !important;
}
	
.main-wrapper img{
	width: 80vw;
	height:auto;
	margin:0 auto;
}
.main-wrapper .nosignal{
	display: none;
	width: 100%;
	height: 100%;
	background: #808080;
}
.main-wrapper .video .program_movie{
	width: 100%;
	height: 100%;
	background: #808080;
}


.contents{
	width:1200px;
	margin:0 auto;
	padding:20px 0;
	text-align:center;
}
.contents.top-bottom{
	display: flex;
}
.contents.top-bottom div{
	width:50%;
}

.page_contents {
	width:1024px;
	overflow:hidden;
}
.page_contents h2{
	display: block;
}

.centerBtn{
	text-align:center;
	margin-top:15px;
}
.centerBtn input,
.centerBtn p{
	background:#0086cd;
	width:30%;
	padding:6px 0;
	color:#FFF;
	font-size:90%;
	font-weight:bolder;
	border:none;
	border-radius:20px;
	text-align:center;
	color:#FFF;
}
.centerBtn p{
	margin:0 auto 30px auto;
}
.centerBtn p a{
	color:#FFF;
}

.normal_text{
	margin-bottom:15px;
	line-height:160%;
}
.center_text{
	margin-bottom:15px;
	line-height:160%;
	text-align:center;
}
.center_text img.eventimg{
	width:100%;
}

ul.center_text li{
	font-size:90%;
}

.font-small{
	font-size:70%;
}
.font-red{
	color:#F00;
}

/*TOPページ*/
h2{
	font-size:180%;
	margin:0 auto;
	margin-bottom:40px;
	position: relative;
	display: inline-block;
	padding: 0 120px;
}

h2:before,
h2:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 80px;
    height: 2px;
    background-color: #666;
}

h2:before {
    left: 0;
}

h2:after {
    right: 0;
}

/*youtube*/
.nosignal,
.program_movie{
  position: relative;
  width:100%;
  margin:0px auto;
}

.nosignal video,
.program_movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.program_movie iframe {
	width: 80vw;
	height: calc(80vw * 0.5625);
	margin:0 auto;
}


.ouenBox{
	background:#2F9CD6;
	width:80%;
	margin:0 auto;
	padding:20px;
	margin-bottom:30px;
}
.ouenBox h3{
	margin-bottom:20px;
}
.ouenBox h3 img{
	width:50%;
}
.ouenBox ul{
	display:flex;
}
.ouenBox ul li{
	margin:0 25px 10px 0;
	width:calc(50% - 25px);
}
.ouenBox ul li.ouenBox_text{
	text-align:right;
}
.ouenBox ul li.ouenBox_text img{
	width:90%;
}
.ouenBox ul li.ouenBox_btn p{
	font-weight:bolder;
	color:#130E54;
	font-size:120%;
	line-height:130%;
	margin-bottom:8px;
}
.ouenBox ul li.ouenBox_btn{
	background:#FFF;
	padding:10px 15px;
}
.ouenBox ul li.ouenBox_btn img{
	width:70%;
}
@media only screen and (max-width: 768px) {
	.ouenBox{
		width:86%;
	}
	.ouenBox h3 img{
		width:80%;
	}
	.ouenBox ul{
		display:block;
	}
	.ouenBox ul li{
		width:100%;
		margin:0;
	}
	.ouenBox ul li.ouenBox_text img{
		width:100%;
	}
	.ouenBox ul li.ouenBox_btn{
		padding:10px 0;
		margin-top:15px;
	}
	.ouenBox ul li.ouenBox_btn p{
		font-size:100%;
	}
	.ouenBox ul li.ouenBox_btn img{
		width:80%;
	}
}

@media only screen and (max-width: 640px) {
	.nosignal video,
	.program_movie iframe{
		width: 100%;
	}
}

/*TOPページ NewProgramu*/
ul.new-program{
display:flex;
flex-wrap:wrap;
justify-content:left;
align-items:bottom;
}


ul.new-program li{
margin:0 25px 25px 0;
width:calc(33.3333333% - 25px);
}

ul.new-program li div.list_image{
width:100%;
border:1px solid #666;
}
ul.new-program li img{
	width:100%;
}

ul.new-program li p{
	text-align:left;
	font-size:80%;
}
ul.new-program li p.start_time{
	color:#0085cc;
}

/*TOPページ What's New*/
.whatsnew dl{
	text-align:left;
	margin:0 0 20px 20px;
}
.whatsnew dl dt{
	color:#0085cc;
	margin-bottom:8px;
}
.whatsnew dl dd{
	background:url(../img/top/whatnew_arow.jpg) no-repeat left top;
	padding-left:20px;
	line-height:140%;
	font-size:80%;
}
.whatsnew dl dt span{
	font-size:0.3em;
	padding: 2px 4px;
	background:#0086dc;
	border-radius:5px;
	color: #fff;
	margin-left:8px;
}

footer{
	background:#0086dc;
}
.footerBox{
	width:1200px;
	margin:0 auto;
	padding:30px 0;
	overflow:hidden;
}

.footerBox div{
	float:left;
	width:65%;
}
.footerBox ul{
	float:right;
	width:33%;
	padding-left:2%;
}
.footerBox ul.footer_sns{
	display:flex;
	flex-wrap:wrap;
}
.footerBox ul.footer_sns li {
	margin:0 20px 20px 0;
	width:calc(25% - 20px);
}
.footerBox ul.footer_sns li a img{
	width:100%;
}
.footerText{
	color:#FFF;
}


/*media:::タブレット&andoroid**************************/
@media (max-width: 1024px){
	h2{
		font-size:140%;
	}
	.contents{
		width:96%;
		padding:30px 2%;
	}
	.page_contents{
		width:96%;
		padding:30px 2%;
	}
	.recruiting_img{
		width:100%;
	}
	.footerBox{
		width:100%;
	}
	.footerBox div,
	.footerBox ul{
		width:96%;
		padding: 0 2%;
	}
}
/*media:::タブレット&andoroid**************************/
@media (max-width: 768px){
	.contents.top-bottom{
		display:block;
	}
	.contents.top-bottom div{
		width:100%;
	}
	
	ul.new-program{
		padding-left:10px;
	}
	ul.new-program li{
		margin:0 10px 10px 0;
		width:calc(33.3333333% - 10px);
	}
	
	
	.footerBox{
		width:100%;
		display:block;
	}
	.footerText{
		font-size:90%;
	}

}
@media (max-width: 640px){
	.main-wrapper .video {
		width: 100vw;
		height: calc(100vw * 0.5625);
	}
	.main-wrapper img {
		width: 100vw;
	}
	.main-wrapper #video_tag_id {
		width: 100vw !important;
		height: calc(100vw * 0.5625) !important;
	}
}
/*media:::タブレット&andoroid**************************/
@media (max-width: 414px){
	h2{
		font-size:120%;
		padding: 0 80px;
	}	
	
}


/* トップページ 20201001 追記**************************/
/* videoサイズのレスポンシブ対応 */
#player {
  width: 100%;
  height: 100%;
}
.video {
  position: relative;
}
/* playボタン時のメッセージ欄の設定 */
.video-inner {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 30%;
  z-index: 1;
  padding-top: 1rem;
  color: #ffffff;
}