@charset "utf-8";

/* 星取表 */
#main_body .detail_free table {

	margin-block: 20px;
	margin-inline: auto;
	& :where(th,td){
		border: 1px solid;
		border-collapse: separate;
		border-spacing: 0;
		padding: 5px 5px;
		font-size: 1rem;
		box-sizing: border-box;
		border-bottom: 0;
		border-left: 0;
	}
	& tr:first-child th{
		writing-mode: vertical-rl;
		text-align: left;
		text-orientation: upright;
		background: transparent;
		&:not(.empty_cell){
			/* border-top: 1px solid; */
			
			&:nth-child(odd){
			background: #F2F2F2;
			}
		}
	}
	& tr:first-child .empty_cell{
		/* visibility: hidden; */
		border: none;
		/* background: #fff; */
		position: sticky;
		left: 0px;
		border-right: 1px solid;
	}
	& tr:last-child :where(th,td){
		border-bottom: 1px solid;
	}
	& th{
		text-align: left;
	}
	& th[rowspan]{
		padding: 10px;
	}
	& td{
		text-align: center;
		&:last-child{
			border-right: 1px solid currentColor;
		}
	}

	/* 国公立 */
	& th.public_univ[rowspan]{
		background: #00B0F0;
	}

	& tr:has(.public_univ):nth-child(odd) :where(th,td){
		background: #B8CCE4;
	}

	& tr:has(.public_univ) :where(th,td){
		background: #DCE6F1;
	}

	/* 私立 */
	& th.private_univ[rowspan]{
		background: #92D050;
	}
	& tr:has(.private_univ) :where(th,td){
		background: #EBF1DE;
	}
	& tr:has(.private_univ):nth-child(odd) :where(th,td){
		background: #D8E4BC;
	}

	/* 短期 */
	& tr:has(.junior_college) :where(th,td){
		background: #FDE9D9;
	}
	& tr:has(.junior_college):nth-child(odd) :where(th,td){
		background: #FCD5B4;
		/* border: 1px solid; */
	}
	& th.junior_college.row_top{
		background: #FFC000;
		position: sticky;
		left: 0;
		border-bottom: 1px solid;
	}

	& th.row_top{
		writing-mode: vertical-rl;
		border-left: 1px solid;
	}
	& th[scope="row"]{
		position: sticky;
		left: 0;
		line-height: 1;
		/* border: 1px solid; */
		/* border-collapse:unset; */
		
		
		&:not(.row_top){
			left: calc(calc(20px + 1em) + 2px);
		}
	}
	
}

/* タブ */
ul.tab_select {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin: 0;
	padding: 0 20px;
	list-style: none;
	gap: 5px;
	/* border-bottom: 2px solid #6ec9ff; */
	position: relative;
}
ul.tab_select::after{
	content: '';
	display: block;
	height: 2px;
	width: calc(100% + 20px);
	position: absolute;
	bottom: 0;
	left: -10px;
	background: #6ec9ff;;
}
ul.tab_select li{
	flex: 1;
}
ul.tab_select button{
	display: grid;
	place-content: center center;
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 100%;
	min-height: 62px;
	border: none;
	padding: 10px 10px;
	background: #e2f4ff;
	font-size: 1.6rem;
	font-weight: 300;
}
ul.tab_select button.active{
	background: #6ec9ff;
}
#main_body .tab_body_wrap .detail_free:not(.active){
	display: none;
}