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

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

/*
================================================================================================================
 メインメニューロゴ表示・非表示
================================================================================================================
*/
#worldclassic_logo { display:block;}
ul#g_menu {
  display:table;
  margin:0 auto;
  width:calc(100% - 210px);
  width:-moz-calc(100% - 210px);
  width:-webkit-calc(100% - 210px);
}

/*
================================================================================================================
 メイン画像バナーエリア（画像指定）
================================================================================================================
*/

#main_banner_pc {
  width:100%;
  /*min-width:980px;*/
  height:0px;
  position:relative;
  background-image: url(../images/common/main_img_bg01.png);
  background-repeat:repeat;
  background-position:center center;
}
#main_banner_bg_01 {
  width:100%;
  height:0px;
  position:relative;
  background-image: url(../images/common/main_img_bg02.png);
  background-repeat: no-repeat;
  background-position:center center;
  background-size:70%;
}
#main_banner_bg_02a {
  width:100%;
  height:308px;
  position:relative;
  background-image: url("../images/common/main_img_bg02a.png"), url(../images/common/main_img_bg02b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right -60px, top left -60px;
  background-size: contain;
}
#main_banner_bg_02b {
  width:100%;
  height:308px;
  position:relative;
  background-image: url(../images/common/main_img_bg03a.png), url(../images/common/main_img_bg03b.png);
  background-repeat: repeat-x, repeat-x;
  background-position:top center, bottom center;
}
#main_banner_bg_03 {
  width:100%;
  height:308px;
  position:relative;
  background-image: url(../images/common/main_img_bg04a.png), url(../images/common/main_img_bg04b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right, top left;
}
#all_chara {
  width:100%;
  max-width:1300px;
  height:308px;
  position:relative;
  margin:0 auto;
}
#main_banner_bg_chara01, #main_banner_bg_chara02 {
  width:100%;
  height:308px;
  max-width:1200px;
  margin:0 auto;
}
#bg_logo {
  width:100%;
  height:308px;
  max-width:1200px;
  margin:0 auto;
}
#main_banner_bg_chara02 img {
  width:360px;
  top:-20px;
  left:-4%;
  float:left;
  position: absolute;
}
#main_banner_bg_chara01 img {
  width:360px;
  top:-20px;
  right:-4%;
  float:right;
  position: absolute;
}
#main_banner_bg_logo img {
  width:58%;
  top:15px;
  right:21%;
  left:21%;
  float:right;
  position: absolute;
}
 @media screen and (min-width:900px) and (max-width:1400px) {
#main_banner_pc {
  width:100%;
  height:0px;
  position:relative;
  background-image: url(../images/common/main_img_bg01.png);
  background-repeat:repeat;
  background-position:center center;
}
#main_banner_bg_01 {
  width:100%;
  height:0px;
  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_bg02a.png"), url(../images/common/main_img_bg02b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right -90px, top left -90px;
  background-size: contain;
}
#main_banner_bg_02b {
  width:100%;
  height:308px;
  position:relative;
  background-image: url(../images/common/main_img_bg03a.png), url(../images/common/main_img_bg03b.png);
  background-repeat: repeat-x, repeat-x;
  background-position:top center, bottom center;
}
#main_banner_bg_03 {
  width:100%;
  height:308px;
  position:relative;
  background-image: url(../images/common/main_img_bg04a.png), url(../images/common/main_img_bg04b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right, top left;
}
#all_chara {
  width:100%;
  max-width:1300px;
  height:308px;
  position:relative;
  margin:0 auto;
}
#main_banner_bg_chara01, #main_banner_bg_chara02 {
  width:100%;
  height:308px;
  max-width:1200px;
  margin:0 auto;
}
#bg_logo {
  width:100%;
  height:308px;
  margin:0 auto;
}
#main_banner_bg_chara02 img {
  width:360px;
  top:-20px;
  left:-8%;
  float:left;
  position: absolute;
}
#main_banner_bg_chara01 img {
  width:360px;
  top:-20px;
  right:-8%;
  float:right;
  position: absolute;
}
#main_banner_bg_logo img {
  width:80%;
  max-width:740px;
  top:18px;
  right:0%;
  left:0%;
  margin: 0 auto;
}
}

@media screen and (min-width:600px) and (max-width:899px) {
#main_banner_sp {
  width:100%;
  height:260px;
  position: relative;
  background-image: url(../images/common/main_img_bg01.png);
  background-repeat:repeat;
  background-position:center center;
}
#main_banner_bg_01 {
  width:100%;
  height:260px;
  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:260px;
  position:relative;
  position:relative;
  background-image: url("../images/common/main_img_bg02a.png"), url(../images/common/main_img_bg02b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right, top left;
  background-size: contain;
}
#main_banner_bg_02b {
  width:100%;
  height:260px;
  position:relative;
  background-image: url(../images/common/main_img_bg03a.png), url(../images/common/main_img_bg03b.png);
  background-repeat: repeat-x, repeat-x;
  background-position:top center, bottom center;
}
#main_banner_bg_03 {
  width:100%;
  height:260px;
  position:relative;
  background-image: url(../images/common/main_img_bg04a.png), url(../images/common/main_img_bg04b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right, top left;
  background-size: 50%;
}

#all_chara {
  width:100%;
  height:260px;
  position:relative;
  margin:0 auto;
}
#main_banner_bg_chara01, #main_banner_bg_chara02, #bg_logo {
  width:100%;
  max-width:1300px;
  height:260px;
  margin:0 auto;
}
}

@media screen and (max-width:599px) {
#main_banner_sp {
  width:100%;
  height:180px;
  position: relative;
  background-image: url(../images/common/main_img_bg01.png);
  background-repeat:repeat;
  background-position:center center;
}
#main_banner_bg_01 {
  width:100%;
  height:180px;
  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:180px;
  position:relative;
  position:relative;
  background-image: url("../images/common/main_img_bg02a.png"), url(../images/common/main_img_bg02b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right, top left;
  background-size: contain;
}
#main_banner_bg_02b {
  width:100%;
  height:180px;
  position:relative;
  background-image: url(../images/common/main_img_bg03a.png), url(../images/common/main_img_bg03b.png);
  background-repeat: repeat-x, repeat-x;
  background-position:top center, bottom center;
}
#main_banner_bg_03 {
  width:100%;
  height:180px;
  position:relative;
  background-image: url(../images/common/main_img_bg04a.png), url(../images/common/main_img_bg04b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right, top left;
  background-size: 50%;
}

#all_chara {
  width:100%;
  height:180px;
  position:relative;
  margin:0 auto;
}
#main_banner_bg_chara01, #main_banner_bg_chara02, #bg_logo {
  width:100%;
  max-width:1300px;
  height:180px;
  margin:0 auto;
}
}

@media screen and (min-width:600px) and (max-width:899px) {
#main_banner_bg_chara02 img {
  width:40%;
  max-width:320px;
  top:-10px;
  left:-5%;
  float:left;
  position:absolute;
}
#main_banner_bg_chara01 img {
  width:40%;
  max-width:320px;
  top:0px;
  float:right;
  right:-10%;
  position: absolute;
}
#main_banner_bg_logo img {
  width:auto;
  height:240px;
  top:20px;
  right:0%;
  left:0%;
  margin: 0 auto;
}
#main_banner_bg_02a {
  width:100%;
  height:260px;
  position:relative;
  position:relative;
  background-image: url("../images/common/main_img_bg02a.png"), url(../images/common/main_img_bg02b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right -320px, top left -320px;
  background-size: contain;
}
}
@media screen and (max-width:599px) {
#main_banner_bg_chara02 img {
  width:260px;
  top:-20px;
  float:left;
  left:-50px;
  position:absolute;
}
#main_banner_bg_chara01 img {
  width:260px;
  top:-10px;
  float:right;
  right:-70px;
  position: absolute;
}
#main_banner_bg_logo img {
  width:auto;
  max-height:160px;
  top:20px;
  right:0%;
  left:0%;
  margin: 0 auto;
}
#main_banner_bg_02a {
  width:100%;
  position:relative;
  position:relative;
  background-image: url("../images/common/main_img_bg02a.png"), url(../images/common/main_img_bg02b.png);
  background-repeat: no-repeat, no-repeat;
  background-position:bottom right -320px, top left -320px;
  background-size: contain;
}
}
@media screen and (max-width:429px) {
#main_banner_bg_logo img {
  width:auto;
  max-height:160px;
  top:20px;
  right:0%;
  left:0%;
  margin: 0 auto;
}
}


/*====================================================*/
/* pc/spの切り替え */
/*====================================================*/
@media screen and (min-width:900px) {
#main_banner_bg_01 {
  display:none!important;
}
#main_banner_bg_chara01, #main_banner_bg_chara02{
  display:block!important;
}
}
@media screen and (max-width:899px) {
#main_banner_bg_01 {
  display:block!important;
}
#main_banner_bg_chara01, #main_banner_bg_chara02{
  display:none!important;
}
}

/*
================================================================================================================
 コンテンツエリア（新規で変更・追加がある場合）
================================================================================================================
*/
@media screen and (min-width:900px) {
#container_bottom {
  width:100%;
  height:100%;
  top:0px;
  margin:0px 0px 0px 0px;
  position: relative;
  /*min-width:980px;*/
  padding:140px 0 20px 0;
}
}
@media screen and (max-width:899px) {
#container_bottom {
  width:100%;
  height:100%;
  top:0px;
  margin:0px 0px 0px 0px;
  position: relative;
  min-width:320px;
  padding:20px 0 20px 0;
}
}
@media screen and (max-width:499px) {
#container_bottom {
  width:100%;
  height:100%;
  margin:-50px 0px 0px 0px;
  position: relative;
  min-width:320px;
  padding:38px 0 20px 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:left; 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:left; 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; }
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:center; padding:5px;}

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

/*/// 右カラム ///*/
table tbody.cal_r{text-align:left; vertical-align:middle; margin:2% auto 0 auto; padding:1% 0; width:98%; border:solid 8px;}
table tbody.cal_r tr.cal_t{text-align:left; vertical-align:middle; margin:2% auto 0 auto; padding:0%; width:98%; border:solid 8px;}

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

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

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

table tbody.cal_r tr.cal_c td{background-color:#FFF; line-height:normal; border:#DCB solid 1px;}

/*/// クラスアイコン ///*/
span.bg_g1{background:linear-gradient(#00BBFF, #003399); color:#FFF; box-shadow:#036 0 0 3px;}
span.bg_g2{background:linear-gradient(#FF00CC, #990000); color:#FFF; box-shadow:#600 0 0 3px;}
span.bg_g3{background:linear-gradient(#66EE66, #009900); color:#FFF; box-shadow:#060 0 0 3px;}
span.bg_jp1{background:linear-gradient(#00BBFF, #003399); color:#FFF; box-shadow:#606 0 0 3px;}
span.bg_open{background:linear-gradient(#EE7700, #996600); color:#FFF; box-shadow:#630 0 0 3px;}
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 10px 0px 0; height: auto; border-radius:4px;}

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.4vw; line-height:1.5vw;}
.f_16px_a{ font-size:1.8vw; line-height:1.9vw;}
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;}
}