/* ----------------------------------------------------------------------

	G1レース
	データ分析

----------------------------------------------------------------------　*/

#data_analysis > .content {
	margin-top: 30px;
}

#data_analysis > .content .block_unit { margin-top: 40px;}
#data_analysis > .content .block_unit:first-child { margin-top: 30px;}

#data_analysis > .content > .block_unit .head_unit {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	gap: 1em;
	grid-template-columns: auto 1fr;
}

#data_analysis > .content > .block_unit .head_unit h4 {
	grid-template-columns: auto;
	text-align: left;
	line-height: 1.3;
}

 #data_analysis > .content > .block_unit h3,
 #data_analysis > .content > .block_unit h4 {
	font-weight: bold;
	color: var(--color-dark-gray);
	font-size: var(--font-size-16);
}

#data_analysis > .content > .block_unit h3.head {
	position: relative;
	width: fit-content;
	padding: 4px 8px;
	border-radius: 3px;
	background-color: var(--main-color);
	background-color: #f6f2da;
	background-color: #0f7770;
	background-color: #de3d18;
	background-color: #009479;
	background-color: #047e68;
	color: var(--color-white);
	/* color: #004e08; */
	font-weight: bold;
	font-size: var(--font-size-18);
	letter-spacing: 0.1em;
	
    display: grid;
	grid-auto-flow: column;
	gap: 0.2em;
}

#data_analysis > .content > .block_unit h3.head:after {
	content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 10px 0 0 10px;
    /* border-color: #1d2286 transparent transparent; */
    border-color: #047e68 transparent transparent;
    translate: -50% 100%;
}

/* #data_analysis > .content > .block_unit h3.head.pop { background-color: #d1551f ;}
#data_analysis > .content > .block_unit h3.head.age { background-color: #1c53aa ;}
#data_analysis > .content > .block_unit h3.head.pre { background-color: #c826ad ;}
#data_analysis > .content > .block_unit h3.head.win { background-color: #0f7770 ;} */

#data_analysis > .content > .block_unit h3.head .icon {
	width: 28px;
}

#data_analysis > .content > .block_unit .inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;

	margin-top: 16px;
}

#data_analysis > .content > .block_unit .inner + .inner {
	margin-top: 20px;
}

#data_analysis > .content > .block_unit .inner .list h4 {
	font-size: var(--font-size-13);
	margin-bottom: 4px;
}

#data_analysis > .content > .block_unit .inner .list table caption {
	font-size: var(--font-size-13);
	margin-bottom: 4px;
	font-weight: bold;
	text-align: left;
}

#data_analysis > .content > .block_unit .txt {
	font-size: var(--font-size-14);
}

#data_analysis > .content > .block_unit .txt p {
	/* margin-top: 8px; */
}

/* ----- 署名 ----- */
#data_analysis > .content > .block_unit .txt .sign {
	text-align: right;
	font-size: var(--font-size-13);
}

p.sp_line { display: none; }

#data_analysis > .content > .block_unit .inner .list {
	padding-top: 2px;
}

#data_analysis > .content > .block_unit .list ul.annotation {
	margin-top: 5px;
	font-size: var(--font-size-12);
}

#data_analysis > .content > .block_unit .inner .list.scr {
	
}

/* 表・基本設定 
------------------------------------*/
#data_analysis > .content > .block_unit table.data_list thead th {
	background-color: var(--color-gray);
	background-color: #004e08;
	color: var(--color-white);
	padding: 4px;
	font-weight: normal;
	font-size: var(--font-size-12);
	border-bottom: none;
 }

 #data_analysis > .content > .block_unit table.data_list tbody th {
	background-color: var(--btn-bg-gray);
	color: #555;
	font-size: var(--font-size-12);
	font-weight: bold;
	padding: 1px;
 }

 #data_analysis > .content > .block_unit table.data_list tbody td {
	background-color: var(--color-white);
	font-size: var(--font-size-12);
	padding: 4px;
	text-align: left;
 }

 #data_analysis > .content > .block_unit table.data_list tbody tr:nth-child(odd) td {
	background-color: #f8f2ec;
 }

 /* 表・条件別成績 */
#data_analysis > .content > .block_unit.cond_result table.data_list tbody th,
#data_analysis > .content > .block_unit.cond_result table.data_list tbody td {	
	padding: 4px 2px;
	font-size: var(--font-size-11);
 }


/* --- table header 長さ調整--- */
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_5 { width:5%; }
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_10 { width:10%; }
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_15 { width:15%; }
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_20 { width:20%; }
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_25 { width:25%; }
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_30 { width:30%; }
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_35 { width:35%; }
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_40 { width:40%; }
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_45 { width:45%; }
#data_analysis > .content > .block_unit table.data_list tr.header > th.w_50 { width:50%; }


/* --- 改行防止 --- */
#data_analysis > .content > .block_unit table.data_list th.nowrap,
#data_analysis > .content > .block_unit table.data_list td.nowrap {
	white-space: nowrap;
}

/* --- 右寄せ・中央寄せ --- */
#data_analysis > .content > .block_unit table.data_list td.right { text-align: right; }
#data_analysis > .content > .block_unit table.data_list td.center { text-align: center; }


/* --- テキスト横幅100 --- */

#data_analysis > .content > .block_unit .inner .txt_one {
	width: 100%;
	margin-bottom:20px;
    float: none;
}

#data_analysis > .content > .block_unit .inner .txt_one p {
	line-height: 1.6;
	font-size: 1.4rem;
}

#data_analysis > .content > .block_unit .inner .txt_one p.sign {
	font-size: 1.2rem;
	text-align:right;
}

/* --- テーブル横幅100 --- */

#data_analysis > .content > .block_unit .inner .list.list_one {
	float:none;
	width:100%;
}

/* - 2020.02 ワイド版　追加
------------------------------------------------------------ */

#data_analysis > .content > .block_unit.wide .inner {
	display: block;
	margin-top: 18px;
	margin-bottom:20px;
    padding: 0;
}

#data_analysis > .content > .block_unit.wide .txt p {
	line-height: 1.6;
	font-size: 1.4rem;
	
}

#data_analysis > .content > .block_unit.wide .txt p.sign {
	font-size: 1.2rem;
	text-align:right;
}


#data_analysis > .content > .block_unit.wide > .list {
	float:none;
	width:100%;
}


/* ------------------------------------------------------------

	〜999px

------------------------------------------------------------ */
@media screen and ( max-width : 999px ) {

	#data_analysis > .content > .block_unit.cond_result .base_table {
		grid-template-columns: repeat(2, 1fr);
	}

	#data_analysis > .content > .block_unit .inner {
		grid-template-columns: repeat(1, 1fr);
		gap: 1rem;
	}

	#data_analysis > .content > .block_unit .inner .list {
		padding-top: 0;
	}

	#data_analysis > .content > .block_unit .inner h4 {
		margin-top: 20px;
	}
	
	#data_analysis > .content > .block_unit .inner .list {
		float: none;
		width: auto;
		/* margin-top: 20px; */
	}
	
	.table_left {
	float:none !important;
	width:auto !important;
	padding-right:0px !important;
	}
	
	/* - 動画ブロック
	------------------------------------------------------------ */
	div.movie_block .line_unit > ul > li {
		width: 50%;
		padding: 10px;
		max-width: 100%;
	}
	
}

/* ------------------------------------------------------------

	〜768px

------------------------------------------------------------ */
@media screen and ( max-width : 768px ) {

	#data_analysis > .content > .block_unit .inner .scr.list_one {
			width: 100%;
			overflow-x: auto;
			padding-bottom:10px;
			margin-top:10px;
	}

	#data_analysis > .content > .block_unit .inner .scr.list_one > table.data_list {
			width: 760px !important;
	}


	#data_analysis > .content > .block_unit.wide .inner .list.scr {
			width: 100%;
			overflow-x: auto;
			padding-bottom:10px;
			margin-top:10px;
	}

	#data_analysis > .content > .block_unit.wide .inner .list.scr > table.data_list {
			width: 760px !important;
	}

	#data_analysis > .content > .block_unit.wide p.sp_line { display: block; }

}


/* ------------------------------------------------------------

	〜699px

------------------------------------------------------------ */
@media screen and ( max-width : 699px ) {

	#data_analysis > .content > .block_unit.cond_result .base_table {
		grid-template-columns: repeat(1, 1fr);
	}

}

/* ------------------------------------------------------------

	〜640px

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {

	#data_analysis > .content > .block_unit h3.head {
		gap: 0.1em;
		padding: 4px 5px;
	}

	#data_analysis > .content > .block_unit .txt { font-size: var(--font-size-13); }
	
	/* - 動画ブロック
	------------------------------------------------------------ */
	div.movie_block .line_unit > ul > li { padding: 5px; }
	div.movie_block .line_unit > ul > li > a > h3 { font-size: 1.5rem; }
	
}


@media screen and (max-width: 480px) {

/* - データ分析　各所調整
	------------------------------------------------------------ */

#data_analysis > .content > .block_unit .head_unit {
	gap: 0.6em;
}

#data_analysis > .content > .block_unit .inner .list > table.data_list tr.header > th.win {
	width:80px;
}

#data_analysis > .content > .block_unit .inner .list > table.data_list tr.header > th.corse {
	width:90px;
}

#data_analysis > .content > .block_unit .inner .list > table.data_list tr.header > th.max {
	width:90px;
}

/* - 動画ブロック
	------------------------------------------------------------ */
	div.movie_block .line_unit > ul > li {
		float: none;
		padding: 10px 0;
		width: 100%;
	}

#data_analysis > .content > .block_unit .inner .list.scr {
		width: 100%;
   		overflow-x: auto;
		padding-bottom:10px;
}
	
#data_analysis > .content > .block_unit .inner .list.scr > table.data_list { width: 440px; }


p.sp_line { display: block; margin-top:20px; }

}