@charset "UTF-8";

body{
	background-color:#3d3d3d;
	color:#ffffff;
}


#mainContent{
	/*width: min(100%,800px);*/
	width:100%;
	margin:1em auto;
}


/*テレビ画面*/
#televison{
	display:inline-block;
	overflow:hidden;
	width:720px;
	height:518px;
	position:relative;
	margin:0 auto 0;
	-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	background-color:#333333;
}


/*入力画面*/
#telPanel{
	clear:both;
	display:block;
	overflow:hidden;
	width:min(100%,480px);
	position:relative;
	margin:1em auto 1em;
}

#telPanel *{
	vertical-align:middle;
}

#telPanel input{
	width:calc(100% - 160px - 1em);
	margin-left:1em;
	padding:0.25em 0.5em;
	font-size:2.1rem;
	line-height:125%;
	text-align:center;
	background-color:#f2ffd1;
	border:2px solid #333333;
	border-radius:6px;
	text-shadow: 1px 1px 2px #c3c3c3;
}


button[name="connectBtn"]{
	width:155px;
	border-radius:6px;
	border:1px solid #333333;
	font-weight:700;
	/*background: linear-gradient(to bottom,  #ff0084 0%,#ff0084 100%);*/
}
button[name="connectBtn"] > span::before{
	content:"Connect";
}

.avtiv button[name="connectBtn"]{
	
}
.avtiv button[name="connectBtn"] > span::before{
	content:"Disconnect";
}

/*#televison::after{
	display:block;
	overflow:hidden;
	content:"";
	width:720px;
	height:518px;
	position:absolute;
	top:0;
	left:0;
	border: 20px solid #000000;
	pointer-events:none;
}
*/


/*電話帳*/
#telList{
	display:inline-block;
	overflow:hidden;
	width:min(100%,450px);
	height:520px;
	border:1px solid #cccccc;
	text-align:left;
	background-color:#ffffff;
	color:#333333;
	margin-left:2em;
	border-radius: 10px;
}

#telList > p{
	display:flex;
	overflow:hidden;
}

#telList > p > label{
	flex:1;
}

#mainContent #telList > p > label + label{
	margin-left:0;
}

#telList > p > label > input{
	display:none;
}
#telList > p > label > input + span{
	display:block;
	overflow:hidden;
	padding:0.25em 0.5em;
	background-color:#cccccc;
	text-align:center;
}
#telList > p > label > input:checked + span{
	background-color:#ff9800;
}

ul#telBook{
	display:block;
	overflow-y:auto;
	height:calc(100% - 2.5em);
	padding:0 1em;
}

ul#telBook > li{
	
}
ul#telBook > li > label{
	display:block;
	overflow:hidden;
	padding:0.25em 0.5em;
	cursor:pointer;
	border:none;
	background-color:#ffffff;
}

ul#telBook > li > label:hover{
	background-color:#eeeeee;
}
ul#telBook > li > label:has(input:checked){
	background-color:#ddf3f9;
}

ul#telBook > li > label > input{
	display:none;
}

ul#telBook > li + li{
	border-top: 1px dotted #cccccc;
}

ul#telBook > li > label > span.ttl{
	display:inline-block;
	width:18em;
}

.ctg01 li:not(.otaku),
.ctg02 li:not(.dorama),
.ctg03 li:not(.movie),
.ctg04 li:not(.variety){
	display:none;
}

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

}