/* "cross.css" */
@charset "UTF-8";

#data_cross {
	font-size:			0.875rem;
	max-width:			100%;
	min-width:			min(var(--main-content-width), 100%);
	width:				fit-content;
}

.cond {
	flex-wrap:			wrap;
	border:				solid 1px gray;
	background-color:	#FDF9F3;
	display:			inline-block;
}
.cond > table > tbody > tr {
	vertical-align:		top;
}
.cond > div {
	display:			inline-block;
	vertical-align:		top;
	letter-spacing:		0rem;
}
.cond .exp {
	color:				#222;
	font-size:			0.625rem;
	text-align:			center;
}
.cond #period_year {
	width:				4rem;
}

.cond input[type=text] {
	padding:			2px;
	width:				10rem;
}

.cond_tbl {
	border-collapse:	collapse;
}
@media screen and (min-width:1px) and (max-width:500px) {
	.cond_tbl {
		font-size:			0.875rem;
	}
}

.cond_tbl > tbody > tr > td {
	border:				solid 1px gray;
	min-height:			3rem;
	padding:			2px 5px;
	vertical-align:		middle;
}
.cond_tbl label {
	margin-right:		1rem;
}
.cond_tbl > tbody > tr > td:nth-child(1) {
	background-color:	#4C70C3;
	color:				white;
	white-space:		nowrap;
}
.cond_tbl #name {
	width:				200px;
}
.cond_tbl #price_all {
	width:				100px;
}
.cond_tbl #price {
	width:				100px;
}

.data_btns {
	margin:				0.5rem 0rem 0.5rem 0rem;
	white-space:		nowrap;
}

.cmt {
	color:				blue;
}
.err {
	color:				red;
}

.cat_bar {
	background-color:	var(--color-primary-500);
	color:				white;
	margin-top:			16px;
	padding:			2px 5px;
}

.cat_label {
	display:			inline-block;
	font-size:			1.125rem;
	width:				120px;
}

.show_dtl {
	background-color:	#FDF9F3;
	color:				black;
	cursor:				pointer;
	border-radius:		5px;
	padding:			0 5px;
	text-decoration:	none;
}

#data_cross .data_result table {
	border-collapse:	collapse;
}

#data_cross .data_result thead td {
	background-color:	var(--color-primary-100);
	border-bottom:		solid 2px var(--color-primary-200);
}

#data_cross .data_result td {
	padding:			2px 4px;
	white-space:		nowrap;
}

.sdgs {
	font-variant:		jis83;
	border:				1px solid #2bb32b;
	border-radius:		5px;
	color:				#2bb32b;
	font-size:			1.2rem;
	margin-left:		3px;
	padding:			0px 3px 0px 3px;
}

.rt {
	text-align:			right;
}

.cat_table {
	width:				100%;
}

.cat_table td {
	vertical-align:		top;
}

.cat_table tbody td {
	border-bottom:		solid 1px #eee;
}

.candidate {
	border:				none;
    background-color:	transparent;
	color:				blue;
	font-size:			0.875rem;
	margin-bottom:		5px;
	text-decoration:	underline;
}

.col_long {
	white-space:		normal!important;
	max-width:			250px;
	overflow:			hidden;
	display:			-webkit-box;
	-webkit-line-clamp:	3;
	-webkit-box-orient:	vertical;
}

.col_per_old,
.col_per_new {
	display:			inline-block;
	text-align:			right;
	max-width:			40px;
	min-width:			40px;
	width:				40px;
}

.col_per_arw {
	display:			inline-block;
	max-width:			25px;
	min-width:			25px;
	width:				25px;
	text-align:			center;
}

.result_name {
	margin-top:			10px;
	font-size:			2rem;
	font-weight:		bold;
}

/*
	画面が小さい時に、テーブルを横スクロールするための wrapper
	<table> に直接 overflow-x を指定しても効かないため。
*/
.table_wrap {
	max-width:			100%;
	overflow-x:			auto;
}