@charset "utf-8";
/* CSS Document */
:root{
	/* カラー変数設定 */
	--gold-gradation1: linear-gradient(to right,#ab9100 8%,#fcee91 20%,#ab9100 45%,#e3c25f 75%,#ab9100 100%);
	--evening-gradation: linear-gradient(90deg, rgba(251,199,15,1) 0%, rgba(241,134,51,1) 8%, rgba(235,95,73,1) 85%, rgba(19,44,141,1) 100%);
	--lightblue-gradation: radial-gradient(circle, rgba(58, 99, 255, 1), rgba(42, 179, 252, 1) 90%);
	--darkblue-gradation: linear-gradient(315deg, #182b3a 0%, #20a4f3 74%);
	--purpleblue-gradation: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
        
	--red: #922d13;
	--darkblue: #1c2857;
	--yellow: #ab9100;
	--blue-gradation: linear-gradient(to bottom,#1c2857,#0076a9);
	--gray: #bfbdbd;
	--pailblue: rgba(227,239,246,0.7);
	--gold-gradation2: linear-gradient(to bottom,#ab9100,#fcee91);
	--white: #ffffff;
	--darkyellow: #332500;
	--transparent: transparent;
	--blue-gradation2: linear-gradient(-45deg,#0076a9,#1c2857);
	--black: #000000;
	--blue: #0076a9;
	--blue2: #0071bc;        
	--blue3: #00BCD4;
	--lightblue: #23cccc;
	--lightblue2: #1a9999;
        --darkgray: #666666;
	
	/* スタイルガイド変数 */
	--header-main-color: var(--purpleblue-gradation);
	--header-sub-color: var(--blue2);
	--telop-main-color: var(--darkblue);
	--telop-sub-color: var(--blue3);
	--race-title-color: var(--darkblue);
	--race-mile-color: var(--yellow);
	--race-info-main-color: var(--gray);
	--race-info-sub-color: var(--white);
	--race-menu-select-color: var(--darkblue);
	--race-menu-none_select-color: var(--gray);
	--race-menu-gradation-color: var(--blue-gradation);
	--race-submenu-select-color: var(--yellow);
	--race-submenu-none_select-color: var(--darkblue);
	--race-table-title-color: var(--darkyellow);
	--youtube-backcolor: var(--blue);
	--youtube-button-active-color: var(--lightblue);
	--youtube-button-none_active-color: var(--gray);
	--tenbou-link-color: var(--darkblue);
	--tile-button-active-color: var(--lightblue2);
	--tile-button-none_active-color: #bfbdbd;
	--tile-button-title-color: var(--pailblue);
	--info-main-color: var(--darkblue);
	--info-sub-color: var(--gray);
	--tile-main-color: rgba(255,255,255,0.6);
	--tile-sub-color: var(--purpleblue-gradation);
	--footer-main-color: var(--darkblue);
	--footer-sub-color: var(--white);
	--wall-backcolor: var(--purpleblue-gradation);

	/*汎用変数*/
	--main-color: var(--purpleblue-gradation);
	--sub-color1: var(--lightblue2);
	--sub-color2: var(--darkblue);
	

	/*汎用スタイルガイド*/
	--h1-color: var(--main-color);
	--h2-color: var(--sub-color1);
	--h3-color: var(--white);
	
	/*PC用予想ページスタイルガイド*/
	--table_th-bkcolor: var(--sub-color2);
	--table_th-color: var(--white);
	--commentbox-color: var(--sub-color2);
	--commentbox-bkcolor: var(--white);

	
	/*スマホ用　汎用変数*/
	--header-sub-color-sp: var(--blue2);
	--telop-sub-color-sp: var(--blue2);
	--wall-backcolor-sp: var(--purpleblue-gradation);

}

/*全体*/
body,.top_page_body{
/*	background: url("../images/pr2022/tiger.png"), var(--wall-backcolor);
	background-repeat: repeat;*/
background: var(--purpleblue-gradation);

}

/*ヘッダー部分*/
body #common_header{
	background: var(--black);
}
#common_header #common_header_col_box1{
	background: var(--header-main-color);
	border-bottom: 1px solid var(--white);
}
#common_header #common_header_col_box4{
	background: var(--transparent);
}
#common_header #common_header_col_box5{
	background: var(---transparent);
}
#common_header #common_header_box #logo{
	background: var(--transparent);
}
#common_header #flex_box #kaisai_status{
	background: var(--header-sub-color);
}
#common_header_box #common_menu ul li:hover{
	background: var(--blue-gradation2);
}
.common_header_sp{display: none};
/* フッター */
#common_footer{
	background: var(--footer-main-color);
	color: var(--footer-sub-color);
}
.common_footer_col_change{
	background: var(--footer-main-color)!important;
	color: var(--footer-sub-color);
}
/*PC版トップページ---------------------------------------*/
/*PR大使部分*/
.common_header_pr{
	/*width: 89px;*/
	height: 89px;
	position: absolute;
	left: 220px;
}
.common_header_pr img{
	width: 100%;
	height: 100%;
}
.pr_visual_sp{display: none;}
/* telop部分 */
.top_telop{
	height: 39px;
	border-bottom: 1px solid var(--white);
}
.top_telop .telop_text{
	background: var(--telop-main-color);
}
.top_telop_back .telop_text_back{
	background: var(--telop-main-color);
}
.top_telop .telop_img{
	background: var(--telop-sub-color)!important;
}
.top_telop_back .telop_img_back{
	background: var(--telop-sub-color)!important;
}
.top_telop .telop_img::after{
	border-top-color: var(--telop-sub-color)!important;
}

/* top_main */
#main_wrapper #main_race_info{
	background: var(--race-title-color);
}
#race_info #mile_status1{
	background: var(--race-mile-color);
}
#race_info #mile_status2{
	background: var(--race-mile-color);
}
#main_wrapper #race_info_line{
	background: var(race-info-main-color);
}

#tab li.active, #tab li{
	background: var(--race-menu-none_select-color);
}
.cf #tab .active a, .cf #tab li:hover a{
	background: var(--race-menu-select-color);
}
#racetab ul li{
	background: var(--race-submenu-none_select-color);
}
#racetab ul li.activetab{
	background: var(--race-submenu-select-color);
}
#racetab ul li.activetab::after{
	border-top: 15px solid var(--race-submenu-select-color);
}
#racetab ul li:hover{
	background: var(--race-submenu-select-color);
}
.tab-wrap .pc_racetab_background{
	background: var(--race-menu-gradation-color);
}
/*テーブル*/
#new_player_table_wrap th,#tblchokuzen_detail.data th, #tblcomment.data th, #tblstart.data th, #tblstartslit.data th, #tbldemedas.data th, #tblracekekka.data th ,#tblharai.data th, #tblsuimen.data th{
	background: var(--race-table-title-color);
}
#tblcomment.data .chaku1{
	background: var(--white);
	color: var(--black);
}
#framemenu{
	background: var(--race-table-title-color);
}
/*youtubeまわり*/
#youtube .pc_youtube_box{
	background: var(--youtube-backcolor);
}
#youtube #main_navi_top .item1{
	background: var(--youtube-button-active-color);
}
#main_navi_top02 .item{
	background: var(--youtube-button-active-color);
}
/*非公開時処理ありのため追加する事*/
#main_navi_top03 .item{
	background: var(--youtube-button-active-color);
}

/* top_visual */
/* タイル設定 */
.pc_top_button_title{
	background: var(--tile-button-title-color);
}
.pc_top_button_mini,
.pc_top_button{
	background: var(--tile-button-active-color);
}
.pc_top_button_dbl{
    background-color: none;
}
/*展望*/
.readmore-label{
	background: var(--tenbou-link-color);
}
.top_tenbou_link .clicklink{
	background: var(--tenbou-link-color);
}
/* インフォメーション */
.full_content ul li a{
	background: var(--info-sub-color);
}
.pc_top_info_area .full_content ul li.active, .pc_top_info_area .full_content ul li.hover{
	background: var(--info-main-color);
}
.full_content ul li#honjo_news, .full_content ul li#news{
	background: var(--info-sub-color);
}
.pc_top_info_area .full_content ul li a:hover{
	background: var(--info-main-color);
	color: var(--white);
}
.full_content ul li.active a{
	background: var(--info-main-color);
}
.pc_top_info_area #tab1, .pc_top_info_area #tab2, .pc_top_info_area #tab3 {
  border: 5px solid var(--info-main-color);
}
/*PC版トップページ　END---------------------------------------*/

/*PC版下層ページ---------------------------------------*/
.Menu .menu{
	background: transparent;
}
#common_header_box .Menu li{
	background: transparent;
}
#common_header_box .Menu li:hover{
	background: #f5cb00;
}
#common_header_box .Menu li ul.subMenu li{
	background: linear-gradient(to bottom right, #f5cb00, lemonchiffon);
}
h1{
	background: var(--h1-color);
}
h2{
	background: var(--h2-color);
}
h3{
	background: var(--h3-color);
}
table.data th{
	background: var(--table_th-bkcolor);
}
/*アクセスページ*/
#access .omura_h1{
	background: var(--h1-color);
}
#access .omura_h2{
	background: var(--h2-color);
}
#access .omura_h3{
	background: var(--h3-color);
}
/*oricaページ*/
#orica .omura_h1{
	background: var(--h1-color);
}
#orica .omura_h2{
	background: var(--h2-color);
}
#orica .omura_h3{
	background: var(--h3-color);
}
#orica .orica_h1{
	background: var(--h1-color);
}
/*PC版下層ページ　END---------------------------------------*/
/*予想ページ*---------------------------------------/
/*テーブルの共通設定*/
div#point.contents table th{
	background: var(--table_th-bkcolor) !important;
	color: var(--table_th-color);
}
/*コメントボックス*/
.commentbox{
	background: var(--commentbox-color);
}
.commentbox_in{
	background: var(--commentbox-bkcolor);
}
/*予想ページ*---------------------------------------/
/*スマホ対応*/
@media screen and (max-width : 767px ){
	.top_page_body{
		/*background: url("/images/pr2022/tiger_sp.png"), var(--wall-backcolor-sp);*/
		/*background-repeat: repeat;*/
                
  background: var(--wall-backcolor);
                
	}
	.common_header_pr{display: none;}
	.common_header_pr_sp{
		width: 100%;
		position: relative;
		top: 38px;
	}
	.common_header_pr_sp img{
		max-width: 100%;
	}
	/*ヘッダー*/
	body #common_header{
		height: inherit;
		width: 100%;
	}
        /* 20220423 comment
	#common_header #header_banner{
		background: var(--white); 
		top: 39px;
		padding: 0;
		margin: 0;
		width: 180px;
		height: 35px;
		position: absolute;
	}*/
	#common_header #header_banner{
		background: var(--white); 
/*		top: 39px;*/
		padding: 0;
		margin: 0;
		width: 100%;
		/*height: 45px;*/
                height: auto;
		position: relative;
	}      
	#common_header #header_banner1212{
		background: var(--evening-gradation); 
		top: 39px;
		padding: 0;
		margin: 0;
		width: 100%;
		height: auto;
		position: relative;
	}   
        /* pr外す場合はnoneにする */
        .pr_sp2{
            /*display: none;*/
        }
	#common_header_box #common_header_base{
		background: var(--header-main-color);
	}
	#common_header #common_header_box #flex_box_sp .common_day{
		background: var(--header-sub-color-sp);
	}
	body #common_header #logo a img{
		margin: 15px 0px 4px 5px;
	}
	#menu_drawer #menu_icon_base{
		border-top-color: var(--transparent);
	}
	
	/* テロップ */
	#common_header_box .header_telop .telop_img::after{
		border-top: 38px solid  var(--telop-sub-color-sp);

	}
	#common_header_box .header_telop .telop_img {
  		background:var(--telop-sub-color-sp);
	}
	#common_header_box .header_telop .telop_text{
		background:var(--telop-main-color);
	}
	.sp_top_countdown_item{
		position: absolute;
		top: 64px;
	}
	.sp_top_countdown_item1212{
		position: relative;
	}        
        /*20220423 comment
	.sp_top_countdown_img{
		position: relative;
		width: 180px;
		height: 30px;
		z-index: 100px;
	}*/
	.sp_top_countdown_img{
		position: relative;
		/*width: 200px;*/
		height: 75px;
		z-index: 100;
		margin:2px 0px;
	}
	.sp_top_countdown_img_wide{
		position: relative;
		/*width: 200px;*/
		height: 80px;
		z-index: 100;
	}
	.sp_top_countdown_img_wide img{
            width:100%;
        }        
	.sp_top_countdown_text {
  		font-size: 20px;
	}
        .sp_top_countdown_text span {
  		font-size: 28px;
                color: yellow;
	}
	.sp_top_countdown_text_wide {
  		font-size: 32px;
                font-weight: 600;
	}
	/*top_menu*/
	.pr_visual_sp{
		display: block;
		width: 100%;
		height: 125px;
		z-index: -10;
		position: relative;
	}
        /* 20220731 add: line campaign 
        ※掲載画像が２倍サイズ１枚の場合はこちらを有効 1つの場合はコメントすること！ */
	/* .pr_visual_sp{
		display: block;
		width: 100%;
		height: 245px;
		z-index: -10;
		position: relative;
	} */       
        /* 20220423 comment
        ※掲載画像通常サイズ２枚
	.pr_visual_sp img{
		position: absolute;
		width: 350px;
		height: auto;
		top: -20px;
		left: calc(50% - 175px);
		transform: rotate(-8deg);
	}*/
        /* 20221117 PR大使はずし
        ※画像を外すのて高さを調整　*/
	/*.pr_visual_sp{
		display: block;
		width: 100%;
		height: 0px;
		z-index: -10;
		position: relative;
	}     */   
	.pr_visual_sp img{
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		left: 0;
/*		transform: rotate(-8deg);*/
	}
        /* 20220731 add: line campaign 
        ※掲載画像が2つの場合はこちらを有効 1つの場合はコメントすること！ */
	/*.pr_visual_sp img{
		position: absolute;
		width: 340px;
		height: auto;
		top: 30px;
		left: calc(50% - 170px);
	}*/
        
	#top_next #top_sp_nextrace_title{
		color: var(--black);
	}
	.top_sp_nextrace_date_box_2m{
		background: var(--lightblue-gradation);
	}
	#top_next{
		background: rgba(256,256,256,0.7);
		padding-top: 20px;
	}
	#top_next .top_sp_nextrace_tenbou{
		background: var(--sub-color2);
	}
	#top_next .top_sp_nextrace_tenbou::after{
		border-top: 24px solid var(--sub-color2);
	}
	/*  ボタン群*/
	#new_wrapper .top_menu_box{
		background: var(--transparent);
	}
	.top_main .top_menu_box2{
		background: var(--transparent);
	} 
	.top_menu_box .top_menu_sp .menu2 li{
		background: var(--tile-button-active-color);
	}
	.top_menu_box .top_menu_sp .menu1 .change_color1{
		background: var(--tile-button-active-color);
	}
	.top_menu_box .top_menu_sp .menu2 .change_color2{
		background: var(--tile-button-active-color);
	}
	.top_menu_box2 .top_menu_sp2 .menu1 li{
		background: var(--tile-button-active-color);
	}
	.top_menu_box2 .top_menu_sp2 .menu2 li{
		background: var(--tile-button-active-color);
	}
	.top_menu_box h1{
		color: var(--white);
		text-shadow:  0 0 5px var(--black),0 0 15px var(--black);
	}
	.top_main h1{
		color: var(--white);
		text-shadow:  0 0 5px var(--black),0 0 15px var(--black);
	}
	.top_main .news h1{
		color: var(--white);
		text-shadow:  0 0 5px var(--black),0 0 15px var(--black);
	}
	/*top_navi*/
	#pickup_banner_sp{
		background: var(--transparent);
	}
	#pickup_banner_sp h1{
		color: var(--white);
	}
	/*インフォメーション*/
	#navi_wrapper{
		background: var(--transparent);
	}
	.top_news_sp{
		padding: 0;
	}
	.top_news{
		background-color: var(--transparent);
	}
	.top_news .news{
		margin-bottom: 0;
		padding-bottom: 40px;
	}
	#tab1, #tab2, #tab3, #tab4{
		margin-bottom: 0;
	}
	.full_content .tabmenu{
		border-bottom: solid 5px var(--info-main-color);
	}
	#tab-container #tab1,#tab-container #tab2,#tab-container #tab3{
		border-top:  var(--info-main-color) 0px solid;
		border-left: var(--info-main-color) 5px solid;
		border-right: var(--info-main-color) 5px solid;
		border-bottom: var(--info-main-color) 5px solid;
	}
	/*スマホ下層ページ対応*/
	body #common_footer{
		background: var(--footer-main-color);
	}
	/*展望*/
	#series_index #racer{
		background: var(--gray);
	}
	.ui-body-c, .ui-overlay-c, .ui-overlay-custom{
		/*background: url("/images/pr2022/tiger_sp.png"), var(--wall-backcolor-sp)!important;*/
                /*background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%)!important;*/
                background: var(--wall-backcolor)!important;
	}
	/*予想サイト*/
	#content{
            background-color: white!important;
		/*background: rgba(256,256,256,0.8)!important;*/
		padding-bottom: 20px;
	}
	#scrollmenu{
		background: var(--transparent);
		padding-bottom: 10px;
	}
	.ui-body-custom{
		background: var(--transparent);
	}
	.yosou_button1{
		background: var(--transparent);
	}
	#gnav .btn1 a{
		background: linear-gradient(to bottom,var(--sub-color2),var(--blue),var(--sub-color2));
		border:none;
	}
	.btn_wrapper .btn_item{
		background: var(--sub-color2);
	}
	.btn_wrapper .btn_internet{
		background: var(--sub-color1);
	}
	.linkspbtn a{
		background: var(--sub-color2)!important;
	}
	.ui-btn-up-c {
		border: 2px solid var(--darkgray) !important;
	}
	.ui-btn-up-c{
		color: var(--darkgray);
	}
	.ui-icon, .ui-icon-searchfield::after {
  		filter: invert(100%) sepia(91%) saturate(7085%) hue-rotate(128deg) brightness(50%) contrast(106%);
	}
	#yosoucomment .lblracebody a{
		background:  var(--sub-color2);
	}
	
	#wrapper .bkcolor_1{
		background: var(--transparent);
	}
	#wrapper .bkcolor_2{
		background: var(--transparent);
	}
	#content .return_top a{
		background: var(--sub-color2);
	}
	#content table.data th{
		background: var(--sub-color2);
		color: var(--white);
	}
	div .lbl_yosou{
		background: var(--sub-color1);
	}
	#content #omidashi td, #content  #demetr,#content  #tr2_b td,#content  #shutu,#content  #koutr td,#content  #rhead,#content  #r-head2,#content  #statr td,#content  #statr2 td,#content  #omidashi_t td,#content  #omidashi_b td,#content  #omini2, #content #omini {
		background: var(--sub-color2);
	}
}