@charset "UTF-8";

/* ●全般 */
input, button, textarea {
	outline: none !important;
}

/* ●マスターヘッダー */
.navbar {
	padding: 0 1rem;
	background-color: #ff7800;
	z-index: 1000;
}

.navbar .btn {
	color: white;
	background-color: #ff7800;
}

/* ●ナビバー */
/* PC用ナビバー（左固定） */
@media ( min-width : 992px) {
	#side_nav {
		position: fixed;
		top: 0;
		height: 100vh;
		background: #ff7800;
		padding-top: 40px;
		z-index: 999;
	}
	#side_nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	#side_nav li {
		padding: 5px;
		text-align: left;
	}
	#side_nav a {
		color: white;
		text-decoration: none;
		padding: 10px;
		display: block;
		font-size: 16px;
	}
	#side_nav a:hover {
		background-color: #e66b00;
	}
	#main_screen {
		margin-top: 10px;
		margin-right: 10px;
	}
}

/* スマホ用ナビバー（下固定 & 横並び） */
@media ( max-width : 991px) {
	#side_nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ff7800;
		display: flex;
		justify-content: space-around; /* 各アイテムを均等配置 */
		z-index: 999;
	}
	#side_nav ul {
		display: flex;
		width: 100%;
		justify-content: space-around;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	#side_nav li {
		flex-grow: 1;
		text-align: center;
	}
	#side_nav a {
		color: white;
		text-decoration: none;
		font-size: 14px;
		text-align: center;
		display: block;
		padding: 10px 0;
		width: 100%;
	}
	#side_nav a:hover {
		background-color: #e66b00;
	}

	/* スマホでは「する」「を見る」を非表示 */
	#side_nav a span {
		display: none;
	}

	/* コンテンツがナビバーと被らないようにする */
	#main_screen {
		margin-bottom: 60px;
	}
}

/* ●メイン画面 */
#main_screen {
	z-index: 1;
}

/* ●スクリーンヘッダー */
#screen_header, .content_header {
	width: 100%;
	background-color: #ff7800;
	color: white;
	padding: 10px;
	margin: 10px 0;
}

/* ●アラート */
.alert {
	margin: 10px 0;
	padding: 5px;
}

/* ●ボディ */
#body {
	margin-top: -3px;
}

/* ●タブ制御 */
#tab_menu {
	position: sticky;
	top: -1px;
	z-index: 9998;
	background-color: white;
	border-bottom: solid #ff7800;
	margin-top: 10px;
}

.tab {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

ul.tab {
	list-style: none;
	padding: 0 10px 0 10px;
}

.tab li {
	border: solid 1px white;
	border-bottom: none;
	background-color: #f5c3af;
	text-align: center;
	margin: 0 !important;
	cursor: pointer;
}

.tab li a {
	display: block;
	color: white;
	font-size: 15px;
	text-decoration: none;
	padding: 5px;
}

.tab li.active {
	background-color: #ff7800;
}

.area {
	display: none;
	background: white;
	border: solid #ff7800;
}

.area.is-active {
	display: block;
}

/* ●テーブル */
table {
	min-width: 100%;
}

table.dataTable thead th, table.dataTable thead td, table.dataTable tbody th,
	table.dataTable tbody td {
	max-width: 100dvw;
	white-space: nowrap;
	padding: .3rem;
	border: 1px solid rgba(0, 0, 0, .125);
}

table.dataTable th {
	background-color: #ff7800;
	color: white;
}

.hidden {
	display: none;
}

.item_td {
	padding: 10px 10px 0 10px !important;
	border: none !important;
}

.table-striped>tbody>tr:nth-child(odd) {
	background-color: cornsilk;
}

table.dataTable.no-footer {
	border-bottom: none;
}

div#policy_table_length, div#policy_table_filter, div#problem_table_length,
	div#problem_table_filter, div#solution_table_length, div#solution_table_filter,
	div#problem_and_solution_table_length, div#problem_and_solution_table_filter,
	div#result_table_length, div#result_table_filter, div#search_result_table_length,
	div#search_result_table_filter, div#everyone_notification_list_table_length,
	div#everyone_notification_list_table_filter, div#you_notification_list_table_length,
	div#you_notification_list_table_filter {
	margin: 10px 10px 0 10px;
}

/* ●アイテムテーブル */
.item_table {
	border: 1px solid rgba(0, 0, 0, .125);
	border-radius: .25rem;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.item_table tr:first-child th:first-child, .item_table tr:first-child td:first-child
	{
	border-top-left-radius: .25rem;
}

.item_table tr:first-child th:last-child, .item_table tr:first-child td:last-child
	{
	border-top-right-radius: .25rem;
}

.item_table tr:last-child th:first-child, .item_table tr:last-child td:first-child
	{
	border-bottom-left-radius: .25rem;
}

.item_table tr:last-child th:last-child, .item_table tr:last-child td:last-child
	{
	border-bottom-right-radius: .25rem;
}

.item_table th, .item_table td {
	padding: 5px;
	border: 1px solid rgba(0, 0, 0, .125);
}

.item_table th {
	color: white;
	background-color: #ff7800;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.item_table td {
	width: 100%;
}

.clamp-1 {
	display: block;
	overflow: hidden;
	line-height: 1.5;
	max-height: 24px;
}

.clamp-3 {
	display: block;
	overflow: hidden;
	line-height: 1.5;
	max-height: 72px;
}

.clamp-10 {
	display: -webkit-box;
	-webkit-line-clamp: 10;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.5;
	max-height: calc(1.5em * 10);
	transition: max-height 0.3s ease;
}

.clamp-full {
	display: block !important;
	max-height: none !important;
	overflow: visible !important;
}

#toggleDetail {
	width: 100%;
}

.toggle-detail-link {
	width: 100%;
	background-color: #e0e0e0;
	text-align: center;
	padding: 5px;
}

.toggle-detail-link a {
	text-decoration: none;
	color: #333;
	font-size: 0.9rem;
	display: inline-block;
	font-size: 0.9rem;
}

.progress {
	height: 2rem;
	font-size: 1rem;
}

.border-left-white {
	border-left: 4px solid white;
}

.card-body {
	padding: 10px;
}

/* ●グラフ */
.chart-scroll-wrapper {
	overflow-x: auto;
	width: 100%;
}

canvas {
	display: block;
}

/* ●PC表示 */
@media ( min-width : 992px) {
	#main_screen {
		width: 50%;
		margin-left: auto !important;
		margin-right: auto;
	}
}