#index #content_bg{
  background-image:url(../images/index/bg.jpg);
  background-size:120% auto;
  background-position:left top;
}
#content_bg video{
  position:absolute;
  top:0;
  /*left:50%;
  transform:translate(-50%,0);*/
  left:0;
}

#content_bg #index_chouun{
  height:100%;
  margin-left:7%;
  opacity:0;
  position:relative;
}

/*#content #submenu nav a{
  width:40%;
}*/


#content #content_area{
  /*padding-bottom:200px;*/
  background:none;
}

#content #content_body{
  padding:0;
}


#index_main{
  width:50%;
  margin-top:100px;
  float:right;
}

#index_main img{
  width:100%;
}

/*--*/
#topic_area{
  margin:10% 0;
  display: flex;
  flex-flow: row wrap;
}

#topic_area .topic{
  display:block;
  float:left;
  padding:15px 15px;/*1.5%;*/
  background-color:rgba(255,255,255,0.8);
  text-decoration:none;
  line-height:1.3;
  text-shadow: none;
  border:1px #FFF solid;
  box-shadow:3px 3px 0 rgba(0,0,0,0.2);
  position:relative;

  margin-top:10px !important;

}

#topic_area .check:after{
  font-size:90%;
}

#topic_area a.topic:hover{
  background-color:rgba(241, 240, 182, 0.8);
}

#topic_area .level1{
  width:99%;
  margin:0.5%;
}
#topic_area .level2{
  width:49%;
  margin:0.5%;
}

#topic_area .level3{
  width:32.3%;
  margin:0.5%;
}

#topic_area .topic img{
  display:block;
  width:100%;
}


#topic_area .topic time{
  font-size:80%;
  color:#663535;
}
#topic_area .topic h4{
  color:#692828;
  margin:0;
  padding:0;
}



/*--*/

#link_openworld{
  margin-top:60px;
}

#banners_sp{
  margin-top:50px;
}

#banners_sp img{
  width:80%;
  display: block;
  margin:20px auto;
}

@media screen and (max-width:1024px){
  #index_main{
    margin-right:5%;
  }
}

@media screen and (max-width:768px){
  #content_bg{
    background-position:35% 0;
  }
}
@media screen and (max-width:459px){
  #index_main{
    float:none;
    margin:20% auto 0;
    width:80%;
  }

  #banner_twittericons{
    margin-top:10px;
  }

}