@charset "UTF-8";

h1{
	margin:1em 0;
	font-size:2.1rem;
	font-weight:700;
	line-height:125%;
	text-align:center;
}

#mainContent{
	display:block;
	overflow:hidden;
	width: min(100%,720px);
	margin:1em auto;
	font-size:1.6rem;
	line-height:155%;
	text-align:center;
}

#mainContent dl{
	display:block;
	overflow:hidden;
	border:6px double #333333;
	margin-bottom:1em;
	border-radius:16px;
	position:relative;
}
#mainContent dl::after{
	content:"";
	display:block;
	overflow:hidden;
	width: 100%;
	height:100%;
	background-color: rgba(0,0,0,0.8);
	position:absolute;
	top:0;
	left:0;
}

#mainContent dl > dt{
	clear:both;
	display:block;
	overflow:hidden;
	padding:0.5em 1em;
	/*width: 8em;
	float:left;*/
	font-weight:700;
	background-color:#c3c3c3
}


#mainContent dl > dd{
	display:block;
	overflow:hidden;
	padding:1em 1em;
	/*width:calc(100% - 8em);
	float:left;*/
	position:relative;
}

#mainContent dl > dd > div > *{
	vertical-align:middle;
	display:inline-block;
	position:relative;
}

#mainContent label + label{
	margin-left: 1em;
}

#mainContent input{
	display:inline-block;
	overflow:hidden;
	padding:0.25em 0.5em;
	font-size: 1.6rem;
	line-height:125%;
}

#mainContent button{
	display:inline-block;
	overflow:hidden;
	padding:0.5em 2em;
	font-size: 1.6rem;
	line-height:125%;
	cursor:pointer;
	border:1px solid #3c3c3c;
	border-radius:6px;
	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%);
}

#mainContent button:hover,
#mainContent label:has(input[type='checkbox']):hover{
	opacity:0.75;
}

#mainContent button:active{
	background: linear-gradient(to bottom,  #eeeeee 100%,#cccccc 0%);
}

#mainContent label{
	display:inline-block;
	overflow:hidden;
	cursor:pointer;
}


#mainContent dl > dd input[type='number']{
	margin:0 0.25em;
}


.txtBox{
	padding:0.25em 0.5em;
	min-width: 5em;
	background-color:#cccccc;
	font-weight:700;
	margin-right:1em;
	background-color:#ddf3f9;
}



/*LED コントロール*/
#ledBox{
	display:block;
	overflow:hidden;
}

#ledBox label > input{
	display:none;
}

#ledBox label > span{
	display:block;
	overflow:hidden;
	min-width:8em;
	padding:0.25em 0.75em;
	text-align:center;
	border-radius:25px;
	background-color:#ededed;
	border:2px solid #333333;
	pointer-events:none;
}

#ledBox label:nth-child(1) > input +span{
	background-color:#019101;
}
#ledBox label:nth-child(1) > input:checked +span{
	background-color:#00ff00;
}

#ledBox label:nth-child(2) > input +span{
	background-color:#b9b903;
}
#ledBox label:nth-child(2) > input:checked +span{
	background-color:#ffff00;
}

#ledBox label:nth-child(3) > input +span{
	background-color:#c00264;
}
#ledBox label:nth-child(3) > input:checked +span{
	background-color:#f4007e;
}


/*ブザー コントロール*/
#buzzerBox{
	display:block;
	overflow:hidden;
}




/*明度センサ コントロール*/
#brightBox{

}


#brightBox #britnessVal,
#brightBox label:nth-child(2){
	opacity:0.25;
	pointer-events:none;
}

#brightBox.actv #britnessVal,
#brightBox.actv label:nth-child(2){
	opacity:1.0;
	pointer-events:initial;
}


input[name='brightSwitch']{
	display:none!important;
}
input[name='brightSwitch'] + span{
	display: block;
	overflow: hidden;
	min-width:5em;
	padding: 0.25em 0.75em;
	text-align: center;
	border-radius: 25px;
	background-color: #ededed;
	border: 1px solid #333333;
	pointer-events: none;
}
input[name='brightSwitch'] + span::before{
	content:"Off";
}
input[name='brightSwitch']:checked + span::before{
	content:"On";
}



/*その他 コントロール*/
#exBox{
	display:block;
	overflow:hidden;
}

#mainContent dl > dd > div#exBox > p{
	display:block;
	overflow:hidden;
}

div#exBox > p+p{
	margin-top:0.5em;
}


#mainContent > p+p{
	margin:1em 0;
}



/*コネクトボタン*/
button[name='connectBtn']{
	width:15em;
	background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%);
}

button[name='connectBtn'] > span::before{
	content:"Connect";
}


/*BLE 接続完了*/
.bleon button[name='connectBtn']{
	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%);
}

.bleon button[name='connectBtn'] > span::before{
	content:"Disonnect";
}
.bleon #mainContent dl::after{
	display:none;
}


#linkList{
	display:inline-block;
	overflow:hidden;
	text-align:left;
	padding:1em 0;
}

#linkList ul{

}


#linkList > ul > li{

}

#linkList > ul > li > a{
	display:inline-block;
	margin-left:0.5em;
}

#linkList > ul > li +li{
	margin-top: 0.5em;
}

/***********************************
for SP
***********************************/
@media screen and (max-width:768px){


	#mainContent dl > dt{
		width: 100%;
		float:none;
	}

	#mainContent dl > dd{
		width: 100%;
		float:none;
		text-align:center;
	}

	#mainContent label + label{
		margin-left: 1em;
	}

	button[name='buzzerBtn']{
		margin-top:0.5em;
	}

}