/* main_movie
--------------------------------------------------*/
#main_moviesp{
display:none;
}

#main_movie {
max-width: 100%;
min-width: 100%;
}

video {
display:block;
}

.black {
position:fixed;
right:0;
top:100px;
height:auto;
max-width: 100%;
min-width: 100%;
z-index: -10;
opacity:0.3;
}

.bg-video {
position:fixed;
top:100px;
right:0;
bottom:0;
height:auto;
z-index:-100;
max-width: 100%;
min-width: 100%;
}

.spvideo {
display:none;
}

.main_contents {
display: table;
margin-left: auto;
margin-right: auto;
margin-top:15%;
position:relative;
}

.main_contents .tab-mode{
display:none;
}

.main_contents .sp-mode{
display:none;
}

.main_contents img{
 display: block;
 margin-left: auto;
 margin-right: auto;
}

.main_contents .scroll{
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-bottom:30px;
}

.button{
display:block;
width:125px;
margin-top:30px;
margin-bottom:40%;
margin-left:auto;
margin-right:auto;
border: solid 1px #fff;
background: rgba(0,0,0,0.2);
color: #fff;
text-decoration: none;
font-size:17px;
letter-spacing: 2px;
transition: .3s;
text-align:center;
}

.button:hover{
  color: #333;
  background: #fff;
}

/* responsive
-------------*/
@media screen and (max-width: 1280px){
.black {
top:70px;
}
.bg-video {
top:70px;
}
.button {
margin-bottom:20%;
}
}

@media screen and (max-width: 1180px){
.button {margin-bottom:10%;}
}

@media screen and (max-width: 1080px){
.main_contents{margin-top:12%;}
}

@media screen and (max-width: 960px){
.main_contents{margin-top:15%;}

.main_contents img {
  display:none;
}
.main_contents .tab-mode {
  display:block;
}
.main_contents .scroll{display:none;}
}

/* responsive
-------------*/
@media screen and (max-width: 768px){
#main_movie{
display:none;
}
#main_moviesp{
display:block;
}
#main_moviesp .spvideo {
display:block;
top:100px;
margin-top:45px;
right:0;
bottom:0;
height:auto;
z-index:-100;
max-width: 100%;
min-width: 100%;
}
.main_contents .tab-mode {
display:none;
}
.main_contents .sp-mode {
display:block;
margin-bottom: 15%;
}
.main_contents {
margin-top:24%;
}
.button {
display:none;
}
}


/* onmovie fb plugin
--------------------------------------------------*/

#main_movie .fb {
float: right;
top: 300px;
right: 40px;
position: absolute;
}

@media screen and (min-width: 1280px){
.max1280fb{display:none;}
.sp_fb{display:none;}
}

@media screen and (max-width: 1280px){
.fb{display:none;}
.sp_fb{display:none;}
.max1280fb{display:block;}
}

@media screen and (max-width: 768px){
.max1280fb{display:none;}
.sp_fb{display:block;}
}

.max1280fb,.sp_fb{
padding-top:50px;
margin:0 auto;
}

/* next program
--------------------------------------------------*/
#next{
width:100%;
}

.nbox_left1{
width:53.125%;
margin-right:auto;
margin-left:auto;
float:left;
vertical-align:bottom;
}

.nbox_right1{
clear:both;
width:46.875%;
vertical-align:bottom;
float:right;
}

.nbox_left2{
clear:both;
width:46.875%;
margin-right:auto;
margin-left:auto;
float:left;
vertical-align:bottom;
}

.nbox_right2{
width:53.125%;
vertical-align:bottom;
float:right;
}

/* responsive
-------------*/
@media screen and (max-width: 768px){
.nbox_left1{
width:100%;
margin-right:auto;
margin-left:auto;
vertical-align:bottom;
}
.nbox_right1{
width:100%;
vertical-align:bottom;
}
.nbox_left2{
width:100%;
margin-right:auto;
margin-left:auto;
margin-top:10px;
vertical-align:bottom;
}
.nbox_right2{
width:100%;
vertical-align:bottom;
}
}


/* topics
--------------------------------------------------*/
#topics{
 display: table;
table-layout: fixed;
width:100%;
}

#topics .banner {
float: left;
width:50%;
}

/* responsive
-------------*/
@media screen and (max-width: 768px){
#topics{
display:table;
table-layout: fixed;
width:100%;
}
#topics .banner {
width:100%;
vertical-align:bottom;
margin-bottom:10px;
}
}


/* about
--------------------------------------------------*/
#aboutsp{
display:none;
}

#about{
background: url(../img/yellow_stripe.png);
background-repeat: no-repeat;
background-position: center 88%;
width:1280px;
margin-right:auto;
margin-left:auto;
}

#boxarea{
width:1280px;
height:500px;
margin-right:auto;
margin-left:auto;
}

#right_box{
float:right;
width:550px;
margin-right:30px;
margin-top:5px;
}

#left_box{
float:left;
margin-left:95px;
}

#left_box img{
margin-bottom:35px;
}

#left_box .catch .pcmode{
display:none;
}

#left_box .sub .pcmode{
display:none;
}

#left_box .keyword .fullmode{
width:530px;
margin-right:50px;
}

#left_box .keyword .pcmode{
display:none;
}

#left_box .text{
width: 100%;
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
font-size: 11px;
line-height:2.4;
color:#000000;
margin:0 auto;
padding:0;
overflow-x:hidden;
position: relative;
}

#right_box .fullmode{
vertical-align: bottom;
margin-bottom:50px;
}

#right_box .pcmode{
display:none;
}

/* responsive
-------------*/
@media screen and (max-width: 1280px){
#about{
background-position: center 77%;
width:100%;
margin-right:auto;
margin-left:auto;
}
#boxarea{
width:960px;
height:500px;
margin-right:auto;
margin-left:auto;
}
#right_box{
float:right;
width:385px;
margin-right:40px;
}
#right_box .fullmode{
display:none;
}
#right_box .pcmode{
display:block;
padding-top:10px;
padding-bottom:100px;
}
#left_box{
float:left;
margin-left:40px;
}
#left_box .catch .fullmode{
display:none;
}
#left_box .catch .pcmode{
display:block;
}
#left_box .sub .fullmode{
display:none;
}
#left_box .sub .pcmode{
display:block;
}
#left_box .keyword .fullmode{
display:none;
}
#left_box .keyword .pcmode{
display:block;
}
#left_box img{
margin-bottom:25px;
}
#left_box .text{
line-height:2.1;
}
}

@media screen and (max-width: 768px){
#about{
display:none;
}
#aboutsp{
clear:both;
display:block;
width:100%;
}
#aboutsp .ttl{
margin-right:auto;
margin-left:auto;
}
#boxarea{
width:100%;
height:100%;
}
#boxarea p{
width:100%;
max-width:768px;
margin-bottom:30px;
margin-left:5%;
}
.keyword .spmode{
width:100%;
margin-right:auto;
margin-left:auto;
margin-bottom:20px;
}
#boxarea .text{
width: 90%;
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
font-size: 14px;
line-height:2.2;
color:#000000;
margin:0 auto;
padding:0;
overflow:auto;
position: relative;
margin-left:5%;
}
#aboutsp .photo{
width:100%;
margin-top:20px;
margin-bottom:50px;
}
#footer{
padding-top:40px;
}
}


/* support
--------------------------------------------------*/
#support{
clear:both;
}

.s_logo{
display:block;
margin-right:auto;
margin-left:auto;
}


/* sponsor banner
--------------------------------------------------*/
.sponsor_banner{
clear:both;
display:block;
margin-left: auto;
margin-right: auto;
}

@media screen and (max-width: 768px){
.sponsor_banner{width:100%;}
}


/* facebook plugin
--------------------------------------------------*/
#facebookplugin{
padding-top:100px;
width:100%;
background-color: #ffffff;
}

#facebookplugin #contsp{
display:none;
}

#facebookplugin #cont{
width:500px;
margin-right:auto;
margin-left:auto;
}

.fb_iframe_widget{
width:100%;
margin-right:auto;
margin-left:auto;
}

@media screen and (max-width: 500px){
#facebookplugin #cont{
display:none;
}
#facebookplugin #contsp{
display:block;
width:300px;
margin-right:auto;
margin-left:auto;
}
}