@charset "UTF-8";

#DispContentsHeader{
	height: 100%;
	width: 10rem;
	float: left;
	text-align: center;
}

#DispContentsWrapper{
	height: 100%;
	/* width: calc(100% - 10rem);
	float: left; */
}

/*フレーム単体*/
.DispContent{
	float: left;
	border: 1px solid #000000;
	box-shadow: 1px 1px 2px #969696;
}
/*フレーム単体ヘッダ部分*/
.DispContentHeader{
	position: relative;
	width: 100%;
	height: 4rem;
	overflow: hidden;
}
/*フレーム単体コンテンツ部分*/
.Content{
	width: 100%;
	height: calc(100% - 4rem);
}
.DispContentHeader hr{
	border: none;
	clear: both;
}
.rvrselect{
	display: none;
}
.KWB_WLGage .rvrselect{
	display: inline-block;
	float: right;
	width: 5rem;
}

.SelContents{
	width: 7rem;
}
.childselect{
	float: right;
	width: 5rem;
}
.childselect.CCTVSelect,.childselect.CAMSelect,.childselect.LIVECAMSelect{
	width: 9rem;
}

/* Fase選択ボタン */
#DispContentsHeader ul{
	display: block;
	height: 100%;
	overflow: hidden;
}
#DispContentsHeader li{
	width: calc( 100% - .25rem);
}

.FaseBtn {
	display: block;
	width: 100%;
	height: 3rem;
	margin: .25rem auto;
	/*line-height: 3rem;*/
	line-height: 3rem;
	text-align: center;
	border: 3px outset #eee;
}
#Fase1{
	background-image: url('./img/fase1.png');
	background-size: cover;
	background-repeat: repeat-y;
}
#Fase2{
	background-image: url('./img/fase2.png');
	background-size: cover;
	background-repeat: repeat-y;
}
#Fase3{
	background-image: url('./img/fase3.png');
	background-size: cover;
	background-repeat: repeat-y;
	color: #FFFFFF;
}





#DispContentsHeader li div:hover{
cursor: pointer;
}


#DispContentsHeader li div.BtnOn{
	height: 4rem;
	line-height: 4rem;
}

#DispContentsHeader li div.BtnOn{
	height: 5rem;
	line-height: 5rem;
	background-size: contain;
	border: 3px inset #EEEEEE;
	box-shadow: 0 0 1px 1px rgba(0,0,0,0.2) inset;
	cursor: auto;
	pointer-events: none;
}


.DispContent{
	width: 33.333%;
	height: 50%;
}

.DispContent.height-100{
	height: 100%;
}
/* .CAMIMG,.TOTTORI{
	max-height: calc(100% - 3rem);
} */

@media (max-width:1300px) {
	html{
		font-size:14px;
	}
	.SelContents{
		width: 6rem;
	}
}
@media (max-width:950px) {
	html{
		font-size: 12px;
	}
	.SelContents{
		-webkit-appearance: button;
		appearance: button;
		width: 5rem !important;
	}
	select{
		-webkit-appearance: button;
		appearance: button;
		/*width: 1rem !important;*/
	}
}


@media (orientation: portrait) {
	.DispContent{
		width: 50%;
		height: 33.333%;
	}
	/* 20211221  */
	#GblNav {
		z-index: 2;
	}
	.DispContent:first-child,.DispContent:nth-child(2){
		height: 50%;
	}
	#DispContentsWrapper{
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
}