@charset "UTF-8";
/* ==========================================================================
   タブ
   ========================================================================== */

:root {
	--tab_content-background: #FFFFFF;
	--ship-monitor-sensor-menu-font-size: 1.2rem;
	--select-tab-label-backcolor: #FFFFFF;
	--unselect-tab-label-backcolor: #f5f5f5;
	--select-tab-label-font-color: #000000;
	--unselect-tab-label-font-color: #000000;
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto 1rem;
	padding: 1rem;
}

.tab_label {
	height: 5rem;
	color: var(--unselect-tab-label-font-color);
	font-size: var(--ship-monitor-sensor-menu-font-size);
	font-weight: bold;
	padding-left: 4rem;
	border: var(--primary-border);
	order: -1;
	position: relative;
	cursor: pointer;
	flex: 1;
	/* 選択タブの境界線を消す */
	bottom: -1px;
	z-index: 2;
	/* タブ画像 */
	background: var(--unselect-tab-label-backcolor);
	background-image: url(../../img/group_icon.png);
	background-repeat: no-repeat;
	background-size: 3rem;
	background-position: center left 5%;
	/* 文字位置中央 */
	display:flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* タブの切替表示 */
	transition: .5s opacity;
	max-width: 12.5%;
}

.tab_label:not(:last-of-type) {
	margin-right: .3rem;
}

.tab_content {
	display: none;	/* タブを全て非表示 */
	width: 100%;
	height: 43rem;
	overflow: hidden;
	opacity: 0;
	background: var(--tab_content-background);
	border: var(--primary-border);
	/* 選択タブの境界線を消す */
	z-index: 1;
}

/* アクティブタブ ----------------------*/

.tab_active:checked+.tab_label {
	color: var(--select-tab-label-font-color);
	background: var(--select-tab-label-backcolor);
	border-bottom: solid 1px var(--select-tab-label-backcolor);
	/* タブ画像 */
	background-image: url(../../img/group_icon.png);
	background-repeat: no-repeat;
	background-size: 3rem;
	background-position: center left 5%;
}

.tab_active:checked+.tab_label+.tab_content {
	display: block;	/* アクティブタブのみ表示 */
	overflow: auto;
	padding: 1rem 1rem 0rem 3rem;
	opacity: 1;
}

/* 非表示タブ ----------------------*/

input[type="radio"][hidden] {
	display: none;
}

input[type="radio"][hidden]+.tab_label {
	display: none;
}

input[type="radio"][hidden]+.tab_label+.tab_content {
	display: none;
}

 /* ラジオボタン非表示 ----------------------*/

.tab_active {
	display: none;
}