@charset "utf-8";
/* CSS Document */

/*
================================================================================================================
 html・bodyエリア（縦横・背景色・テキストカラーの指定）
================================================================================================================
*/
html {}
body {background-color:#FFFFFF; color: #000000;}

/*
================================================================================================================
 メインメニューロゴ表示・非表示
================================================================================================================
*/
#worldclassic_logo { display:none;}

/*
================================================================================================================
 メイン画像バナーエリア（画像指定）
================================================================================================================
*/
 @media screen and (min-width:900px) {
#main_banner_pc {
  width:100%;
  position:relative;
  background-image:url(../images/common/main_img_bg01_2.png),url(../images/common/main_img_bg01.png);
  background-repeat:repeat-x,repeat;
  background-position:center top,center bottom;
  background-size:auto 52px,auto 108%;
  overflow:hidden;
}
#main_banner_pc.is-fixed{padding-bottom:140px;}

/*#main_banner_bg_01 {
  width:100%;
  height:308px;
  position:relative;
  background-image: url(../images/common/main_img_bg02.png);
  background-repeat: no-repeat;
  background-position:center center;
  background-size:cover;
}*/
#main_banner_bg_02a {
  width:100%;
  height:308px;
  position:relative;
  background-image: url(../images/common/main_img_bg03a.png);
  background-repeat: repeat-x;
  background-position:top top;
}
#main_banner_bg_02b {
  width:100%;
  height:308px;
  position:relative;
  background-image: url(../images/common/main_img_bg03b.png);
  background-repeat: repeat-x;
  background-position:top bottom;
}
#all_chara {
  width:100%;
  max-width:1300px;
  position:relative;
  margin:0 auto;
}
#main_banner_bg_chara, #main_banner_bg_kyoutai {
  position: absolute;
}
#main_banner_bg_kyoutai{
  width:36%;
  right:-4%;
  bottom:-18%;
}
#main_banner_bg_chara{
  width:30%;
  left: 0;
  bottom:0;
}
#main_banner_bg_logo {
  width:45%;
  max-width:540px;
  margin:0 auto;
  padding-top:40px;
  position: relative;
}

#main_banner_bg_kyoutai img,
#main_banner_bg_chara img,
#main_banner_bg_logo img{
width:100%;height:auto;
}
}
@media screen and (min-width:1100px)  {
#main_banner_bg_logo img {top:10px;}
#main_banner_bg_chara img,
#main_banner_bg_kyoutai img {bottom: 0;}
}


@media screen and (max-width:899px) {
#main_banner_sp {
  width:100%;
  position: relative;
}
#main_banner_sp img{width:100%;height auto;}

#main_banner_bg_02a {
  width:100%;
  height:420px;
  position:relative;
  background-image: url(../images/common/main_img_bg03a.png);
  background-repeat: repeat-x;
  background-position:top top;
}
#main_banner_bg_02b {
  width:100%;
  height:420px;
  position:relative;
  background-image: url(../images/common/main_img_bg03b.png);
  background-repeat: repeat-x;
  background-position:top bottom;
}

#all_chara {
  width:100%;
  height:420px;
  position:relative;
  margin:0 auto;
}
#main_banner_bg_chara, #main_banner_bg_kyoutai, #bg_logo {
  width:100%;
  max-width:1300px;
  margin:0 auto;
}

}
@media screen and (min-width:600px) and (max-width:899px) {
#main_banner_bg_02a {
  width:100%;
  height:420px;
  position:relative;
  background-image: url(../images/common/main_img_bg03a.png);
  background-repeat: repeat-x;
  background-position:top top;
}
#main_banner_bg_02b {
  width:100%;
  height:420px;
  position:relative;
  background-image: url(../images/common/main_img_bg03b.png);
  background-repeat: repeat-x;
  background-position:top bottom;
}

#all_chara {
  width:100%;
  height:420px;
  position:relative;
  margin:0 auto;
}
#main_banner_bg_kyoutai img {
  width:70%;
  max-width:560px;
  min-width:400px;
  top:5px;
  left:40%;
  float:left;
  position:absolute;
}
#main_banner_bg_chara img {
  width:460px;
  top:-64px;
  float:left;
  left:-1%;
  position: absolute;
}
#main_banner_bg_logo img {
  width:84%;
  bottom:-10px;
  left:10%;
  float:right;
  position:absolute;
}
}
@media screen and (max-width:599px) {

#main_banner_bg_02a {
  width:100%;
  height:360px;
  position:relative;
  background-image: url(../images/common/main_img_bg03a.png);
  background-repeat: repeat-x;
  background-position:top top;
}
#main_banner_bg_02b {
  width:100%;
  height:360px;
  position:relative;
  background-image: url(../images/common/main_img_bg03b.png);
  background-repeat: repeat-x;
  background-position:top bottom;
}

#all_chara {
  width:100%;
  height:360px;
  position:relative;
  margin:0 auto;
}
#main_banner_bg_kyoutai img {
  width:360px;
  top:30px;
  right:-15%;
  float:right;
  position:absolute;
}
#main_banner_bg_chara img {
  width:360px;
  top:-40px;
  float:left;
  left:-40px;
  position: absolute;
}
#main_banner_bg_logo img {
  width:92%;
  bottom:10px;
  left:5%;
  float:right;
  position:absolute;
}
}


/*
================================================================================================================
 コンテンツエリア（新規で変更・追加がある場合）
================================================================================================================
*/
#container_bottom {
  width:100%;
  height:100%;
  margin:0px;
  position: relative;
}
@media screen and (min-width:900px) {
#container_bottom {
  width:100%;
  height:100%;
  margin:0px;
  position: relative;
  /*margin-top:448px;*/
  /*min-width:980px;*/
  padding:50px 0 20px 0;
}
}
@media screen and (max-width:899px) {
#container_bottom {
  width:96%;
  height:100%;
  margin:0px auto;
  position: relative;
  /*margin-top:412px;*/
  /*min-width:320px;*/
  padding:30px 0 20px 0;
}
}

/*
================================================================================================================
 更新情報
================================================================================================================
*/
/*「更新履歴」「お知らせバナー」一覧ページへのリンク*/

#whatsnew .contents_01,
#info .contents_01{margin:30px auto 15px;}

.list_btn{
width:260px;
position: relative;
  overflow: hidden;
  text-decoration: none;
  border-radius: 5px;
  background-color: #231815;
  border: #fff09c solid 1px;
  color: #FFF;
  font-weight:bold;
  font-size:16px;
  text-align: center;
  outline: none;
  margin:0 auto 20px;
  cursor:pointer;
}
.list_btn span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 10px 50px;
  color: #FFF;
  transition: color 0.2s ease;
}
.list_btn::before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  transform: scale(0, 0);
  background-color: #804000;
  transition: transform 0.2s ease;
}

.list_btn:hover span {
  color: #FFF;
}
.list_btn:hover::before {
  transform: scale(1, 1);
}

section.news_update{
  width:100%;
  top:0;
  text-align: center;
  position:relative;
}

@media all and (min-width: 900px){  
/*新着・アップデートアイコン******************************************/
.state{
line-height:0;
float:left;
width:8%;
height: auto;
margin:0px 2px 0 -2px;
}
.state img{
margin-top:0px;
left:0px;
width:100%;
padding:0;
}

#news_all{
  width:100%;
  height:100%;
  top:0;
  margin:0;
  text-align: center;
  position:relative;
}
#news{
  position:relative;
  width:100%;
  height:100%;
  padding:0%;
  text-align:left;
  margin:0 auto;
  background-color: rgba(10,10,10,0.0);
}
#news .title {
  height: auto;
  vertical-align:middle;
  font-weight: bold;
  top:0;
  left:0px;
  padding-top:1%;
  padding-bottom:3%;
  border-bottom:solid 2px #339;
  text-align:left;
  color:#FF0;
}
.news_item{
  width:100%;
  list-style:none;
  text-align:left;
  left:0%;
  padding-bottom:2%;
}
.news_item section {
  width:98%;
  padding:1.5% 0;
  margin:0 0 0 1%;
  border-bottom:dotted 1px #339;
  float:left;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.news_item{
  position:relative;
  width:100%;
  height:100%;
  padding:0%;
  text-align:left;
  margin:0 auto;
  background-color: rgba(10,10,10,0.0);
  overflow-y:auto;
  overflow-x: hidden;
}
.los_news a {color:#06C;}
.los_news a:hover {color:#F33;}
.news_item section .los_news{
  float:left;
  width:78%;
  text-align:left;
  margin-left:0%;
  padding-left:0.5%;
  padding-right:0%;
  background-color: rgba(10,10,10,0.0);
}
.news_item section span{
  float:left;
  font-weight:bold;
}
.news_item section .date{
  float:left;
  width:22%;
  font-weight:bold;
  padding-left:0.5%;
  padding-right:0.5%;
  background-color: rgba(10,10,10,0.0);
}
}
@media all and (max-width: 899px){
/*新着・アップデートアイコン******************************************/
.state{
line-height:0;
float: none;
width:10%;
height:0;
margin:0 0.5% 0 0;
}
.state img{
margin-top:0px;
left:0px;
width:100%;
padding:0;
}

#news_all{
  width:100%;
  height:100%;
  top:0;
  margin:0;
  text-align: center;
  position:relative;
}
#news{
  position:relative;
  width:100%;
  height:100%;
  padding:0%;
  text-align:left;
  margin:0 auto;
  background-color: rgba(10,10,10,0.0);
}
#news .title {
  height: auto;
  vertical-align:middle;
  font-weight: bold;
  top:0;
  left:0px;
  padding-top:1%;
  padding-bottom:3%;
  border-bottom:solid 2px #339;
  text-align:left;
  color:#FF0;
}
.news_item{
  position:relative;
  width:100%;
  height:100%;
  max-height:120px;
  padding:0%;
  text-align:left;
  margin:0 auto;
  background-color: rgba(10,10,10,0.0);
  overflow-y:auto;
  overflow-x: hidden;
}
.news_item section {
  width:98%;
  padding:1.5% 0;
  margin:0 0 0 1%;
  border-bottom:dotted 1px #339;
  float:left;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
.los_news {color:#333;}
.los_news a {color:#06C;}
.los_news a:hover {color:#F33;}
.news_item section .los_news{
  float: none;
  width:78%;
  text-align:left;
  margin-left:0%;
  padding-left:0.5%;
  padding-right:0%;
  background-color: rgba(10,10,10,0.0);
}
.news_item section span{
  float:left;
  font-weight:bold;
}
.news_item section .date{
  float: none;
  width:24%;
  font-weight:bold;
  padding-left:0.5%;
  padding-right:0.5%;
  background-color: rgba(10,10,10,0.0);
}
}

/*
================================================================================================================
 iframeスクロール
================================================================================================================
*/


iframe{
  position:relative;
  width:100%;
  height: auto;
  max-height:300px;
  padding:0%;
  text-align:left;
  margin:0 auto;
  background-color: rgba(10,10,10,0.0);
}


/*
================================================================================================================
 表
================================================================================================================
*/
.ranking_title01 {width:98%; height:auto; margin:0 0 3% 1%; padding:5px;}

.base_left {width:48%; float:left; margin-left:1.3%; margin-top:2%; margin-bottom:2%;}
.base_right {width:48%; float:right; margin-right:1.3%; margin-top:2%; margin-bottom:2%;}
/*BGカラー*/
.bg_t01{ background-color:#FFF;}
.bg_t02{ background-color:#EFF;}
.fcol_bk{color:#004;}
.fcol_rd{color:#F00;}
.fcol_bl{color:#06F;}
.fcol_gr{color:#3C3;}

table tbody.cal_l{text-align: center; vertical-align:middle; margin:2% auto 0 auto; padding:1% 0; width:98%; border:solid 8px;}
table tbody.cal_l tr.cal_t{text-align:center; vertical-align:middle; margin:2% auto 0 auto; padding:0%; width:98%; border:solid 8px;}

table:nth-child(even) tbody.cal_l,
table:nth-child(even) tbody.cal_l tr.cal_t{border-color:#BCD;}
table:nth-child(even) tbody.cal_l tr.bg_wh{background-color:#BCD;}

table:nth-child(odd) tbody.cal_l,
table:nth-child(odd) tbody.cal_l tr.cal_t{border-color:#BCD}
table:nth-child(odd) tbody.cal_l tr.bg_wh{background-color:#BCD;}

table tbody.cal_l tr.cal_c{text-align:center; margin:0 auto 4% auto; padding:0 0 5% 0; width:98%;}
table tbody.cal_l tr.cal_t th, table.cal_l tr.cal_c th{ padding:0.5% 0%; color:#336; font-weight:bold; text-align:center;}
table tbody.cal_l tr.cal_t th span, table.cal_l tr.cal_c th span{ color:#FFC;}
table tbody.cal_l tr.cal_c td, table.cal_l tr.cal_c td{text-align:left; padding:5px;}

table tbody.cal_l tr.cal_c td{background-color:#FFF; line-height:normal; border:#BCD solid 1px;}
table tbody.cal_l tr.cal_c td.bg_name{background-color:#DEF; line-height:normal; border:#BCD solid 1px;}

table.rnk{width:98%; text-align:center; margin:10px auto; padding:0; border:solid 8px; box-shadow:#999 1px 1px 1px;}




@media screen and (min-width:900px) {
.f_12px_a{ font-size:14px; line-height:16px;}
.f_16px_a{ font-size:18px; line-height:20px;}
}
@media screen and (max-width:899px) {
.ranking_title01 {width:98%; height:auto; margin:0 0 3% 1%; padding:1% 0 0 0; line-height:4.4vw;}
.f_12px_a{ font-size:1.6vw; line-height:1.7vw;}
.f_16px_a{ font-size:2.2vw; line-height:2.3vw;}
span.bg_g1, span.bg_g2, span.bg_g3, span.bg_jp1, span.bg_open{ font-weight:bold; text-align:center; font-style:italic; padding:0% 2% 0% 1%; margin:0px 2% 0px 1%; height: auto; border-radius:2px;}
table.rnk{border:solid 2px;}
table tbody.cal_l{border-top:solid 8px; border-bottom:solid 2px; border-left:solid 2px; border-right:solid 2px;}
table tbody.cal_l tr.cal_t{border-top:solid 8px; border-bottom:solid 8px; border-left:solid 2px; border-right:solid 2px;}
table tbody.cal_r{border-top:solid 8px; border-bottom:solid 2px; border-left:solid 2px; border-right:solid 2px;}
table tbody.cal_r tr.cal_t{border-top:solid 8px; border-bottom:solid 8px; border-left:solid 2px; border-right:solid 2px;}
}


/*
================================================================================================================
 youtube埋込 
================================================================================================================
*/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom:0;
  left:0
  width: 100%;
  height: 100%;
  max-height: 100%!important;
}