@charset "utf-8";

#smart #headerAd{
	margin-bottom: 30px;
}
#headerMessage{
	flex-grow: 1;
	font-size:12px;
	font-weight:bold;
}
#pc #headerAd.gameScreenShown{
	margin-bottom:30px;
}
#menuList{
	width: 100%;
	margin:5px auto;
}
#news{
	margin:5px 0 10px;
	padding:10px;
	background: #e6f5ff;
	font-weight:bold;
	border-radius: 10px;
}
#smart #iphone_home{
	position:fixed;
	bottom:0;
	left:16px;
	width:288px;
	z-index:9999;
}
#smart #iphone_home a{
	display:block;
	background:#313131;
	margin:0;
	padding:10px;
	text-align:right;
	color:#fff;
}
#smart #iphone_home h2{
	background:#313131;
	margin:0;
	color:#fff;
	font-weight:bold;
}
#smart #iphone_home img{
	width:288px;
	height:133px;
}

#pc #footerAd{
	margin-top:10px;
}
#pc #footerAd.gameScreenShown{
	margin-top:100px;
}

/* Pager */
#pageHolder{
	position:relative;
	width:100%;
	margin-bottom:5px;
	overflow: hidden;
}
#smart #pageHolder{
	min-height:100vh;
}
#pageHolder div.page{
	position:absolute;
	width:100%;
	display:none;
	/*
	will-change: transform;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	*/
}

/* lobby */
div.searchRoom{
	padding:10px 20px;
}
input.searchRoomInput{
	width: 100%;
	max-width:300px;
}
ul.roomList{
	padding:10px 0;
	clear:both;
	
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#smart ul.roomList{
	-webkit-box-pack: center;
	-ms-flex-pack: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
ul.roomList:empty:after{
	content: "現在なし";
	display:block;
	min-height:100px;
	width: 100%;
	text-align: center;
}
ul.roomList li.loading{
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
ul.roomList li.item{
	width:150px;
	height:280px;
	display:block;
	margin:5px;
}
ul.roomList select{
	width:140px;
}
img.roomImage{
	width:120px;
	height:120px;
	border:1px solid #ccc;
	border-radius: 10px;
	box-sizing: content-box;
}
ul.roomList li.item ul li{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* 部屋詳細 */
#roomDetail h1{
	margin-bottom:10px;
}
#roomDetail h1 span{
	font-size:inherit;
}
#roomDetail select{
	width:160px;
}
#entryButton{
	margin-top:10px;
}

/* 作成 */
#create h1{
	margin-bottom:10px;
}
#limitRound, #limitTime, #interval, #penalty, #maxPlayer{
	width:100px;
}
#createSubmitButton{
	width:200px;
}

/* 辞書 */
#dicForm{
	padding:5px 0;
	background: #f4f4f4;
	background: -moz-linear-gradient(top,  #f4f4f4 0%, #d6d6d6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#d6d6d6));
	background: -webkit-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: -o-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: -ms-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: linear-gradient(to bottom,  #f4f4f4 0%,#d6d6d6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#d6d6d6',GradientType=0 );
	border-top:1px solid #aaa;
	border-bottom:1px solid #aaa;
}
button#dicSelectButton{
	padding:5px 0;
	height:inherit;
	width:100%;
	min-height:35px;
	color:#444;
	text-shadow:none;
	background:#fff url(/img/link_arrow.png) right center no-repeat;
	filter:none;
	border:1px solid #aaa;
}
#smart button#dicSelectButton{
	width:195px;
}
button#dicSelectButton ul li{
	padding:2px 0;
}
#closeDicSelect{
	width:200px;
}
ul li.next{
	background-color:#ffdddd;
}
ul#dicTargetList li.selected{
	background:#2DB9ED;
}
ul#dicTargetList li a{
	color:#444;
}
ul#dicTargetList li.selected a{
	color:#fff;
	text-decoration:none;
}
ul#dicTargetList li.selected a:hover{
	background:transparent;
}

/* ゲーム画面 */
#gameStart{
	display:none;
	font-size:11px;
	line-height:14px;
}
#gameStart p{
	text-align:left;
	padding:5px;
}
#pc #gameStart{
	width:200px;
	margin:10px 0;
}
#smart #gameStart{
	width:100%;
	clear:both;
	border-bottom:1px solid #aaa;
	margin-top:5px;
}
#gameScreenTitle{
	position:relative;
	margin-bottom:5px;
	padding:10px 0 5px 0;
	border-bottom:2px solid #aaa;
	line-height:22px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e7eef0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e7eef0));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e7eef0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7eef0',GradientType=0 );
}
#countDown{
	margin-right:10px;
	font-size:18px;
	min-width:45px;
	background:#2DB9ED;
	color:#fff;
	position:absolute;
	left:0;
}
#subject{
	font-size:20px;
	font-weight:bold;
}
#imageSearchButton{
	display: none;
	float:right;
	margin-right: 10px;
}
#imageSearchButton img{
	height: 22px;
	margin: -1px 0;
}
#canvasHolder{
	position:relative;
	margin:0;
	width:320px;
	height:320px;
	border:1px solid #aaa;
	overflow:hidden;
	float:left;
}
#smart #canvasHolder{
	margin:0 auto;
	border-left:none;
	border-right:none;
	float:none;
}
#canvas, #previewCanvas{
	top:0;
	left:0;
	position:absolute;
	width:320px;
	height:320px;
	background:#fff;
	z-index:1;
}
#previewCanvas{
	background:transparent;
	z-index:10;
}
#gameScreen.joined #canvas, #gameScreen.joined #previewCanvas{
	touch-action: none;
}
#canvasHolder div.scrollMessage{
	position:absolute;
	pointer-events:none;
	font-size:16px;
	white-space:nowrap;
	text-shadow:1px 1px 3px #fff;
	z-index:5;
	will-change: transform;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
#canvasHolder div.scrollMessage span{
	font-weight:bold;
}
#canvasHolder div.scrollMessage img.trip{
	height: 16px;
	margin: -2px 2px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
#canvasHolder div.drawingUserLabel{
	position:absolute;
	pointer-events:none;
	display: none;
	padding: 4px 5px;
	width: auto;
	height: auto;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: rgba(255, 0, 0, 0.5);
	color: #fff;
	font-size: 8px;
	line-height: 8px;
	border: 1px solid #fff;
	z-index:6;
	box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	will-change: transform, opacity;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
#pc #clearButton{
	margin-bottom:7px;
}
#smart #clearButton{
	position:absolute;
	top:0;
	left:0;
	margin:0;
	z-index:20;
}
#pc #undoButton{
	position:absolute;
	bottom:0;
}
#smart #undoButton{
	position:absolute;
	bottom:0;
	left:0;
	margin:0;
	z-index:20;
}
#clearButton, #undoButton, #sizeButtonHolder button{
	display:block;
	width:60px;
	height:27px;
	margin:0;
	padding:0;
	border:2px solid #999;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	filter:none;
}
#smart #clearButton, #smart #undoButton, #smart #sizeButtonHolder button{
	width:30px;
	height:30px;
	border-left:none;
}
#clearButton{
	background:#fff url(/img/clear.png) center center no-repeat;
	background-size:auto 100%;
}
#undoButton{
	background:#fff url(/img/undo.png) center center no-repeat;
	background-size:auto 100%;
}
#sizeButtonHolder{
	margin-top:5px;
}
#smart #sizeButtonHolder{
	position:absolute;
	bottom:40px;
	left:0;
	margin:0;
	z-index:20;
}
#sizeButtonHolder button.size{
	margin-top:2px;
	background:#fff url(/img/size_ball.png) center center no-repeat;
}
#sizeButtonHolder button.size1{
	background-size:auto 10%;
}
#sizeButtonHolder button.size2{
	background-size:auto 20%;
}
#sizeButtonHolder button.size3{
	background-size:auto 40%;
}
#sizeButtonHolder button.size4{
	background-size:auto 60%;
}
#sizeButtonHolder button.size5{
	background-size:auto 80%;
}
#sizeButtonHolder button.size.selected{
	background-color:#aaa;
}
#smart #colorPalette{
	position:absolute;
	top:1px;
	right:0;
	text-align:right;
	float:none;
	margin:0;
	z-index:20;
}
#colorPalette button.color{
	display:block;
	width:60px;
	height:27px;
	margin:0 0 2px 0;
	padding:0;
	color:#fff;
	background:#000 center center no-repeat;
	background-size:auto 50%;
	border:2px solid #000;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	filter:none;
}
#smart #colorPalette button.color{
	width:30px;
	height:30px;
	border-right:none;
}
#colorPalette button.color.selected{
	background-image:url(/img/selected_color.png);
}
#pc #opacitySliderHolder{
	margin-top:2px;
	width:60px;
	height:45px;
}
#smart #opacitySliderHolder{
	position:absolute;
	top:35px;
	left:0;
	margin:0;
	width:30px;
	z-index:20;
}
#opacitySliderHolder h2{
	font-size:10px;
	text-align:left;
	word-break: keep-all;
}
#smart #opacitySliderHolder h2{
	font-size:7px;
}
#opacitySlider{
	position:relative;
	margin-left:5px;
	width:50px;
	height:15px;
	background:#fff;
	border:1px solid #aaa;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
#smart #opacitySlider{
	width:15px;
	height:50px;
}
#opacitySlider div{
	position:absolute;
	width:100%;
	height:100%;
	background: #0064cd;
	background: -moz-linear-gradient(top,  #0064cd 0%, #049cdb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0064cd), color-stop(100%,#049cdb));
	background: -webkit-linear-gradient(top,  #0064cd 0%,#049cdb 100%);
	background: -o-linear-gradient(top,  #0064cd 0%,#049cdb 100%);
	background: -ms-linear-gradient(top,  #0064cd 0%,#049cdb 100%);
	background: linear-gradient(to bottom,  #0064cd 0%,#049cdb 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064cd', endColorstr='#049cdb',GradientType=0 );
}
#opacitySlider a{
	position:absolute;
	margin:-5px 0 0 -5px;
	left:100%;
	width:10px;
	height:25px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e7eef0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e7eef0));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e7eef0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7eef0',GradientType=0 );
	border:1px solid #aaa;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
#smart #opacitySlider a{
	margin:-5px 0 0 -6px;
	left:0%;
	top:100%;
	width:25px;
	height:10px;
}


/* チャット */
#chatField{
	clear:left;
	width:550px;
	border-left:1px solid #aaa;
	border-right:1px solid #aaa;
}
#smart #chatField{
	width:100%;
	border:none;
	background:#2DB9ED;
}
#pc #joinButton{
	margin:10px 0;
}
#smart #joinButton{
	margin:5px 0;
}
#chatForm{
	padding:5px 0;
	background: #f4f4f4;
	background: -moz-linear-gradient(top,  #f4f4f4 0%, #d6d6d6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#d6d6d6));
	background: -webkit-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: -o-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: -ms-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: linear-gradient(to bottom,  #f4f4f4 0%,#d6d6d6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#d6d6d6',GradientType=0 );
	border-bottom:1px solid #aaa;
}
#passHolder{
	display:none;
	line-height:50px;
	font-size:18px;
	font-weight:bold;
}
#passButton{
	width:150px
}
#penaltyHolder{
	display:none;
	line-height:50px;
	font-size:18px;
	font-weight:bold;
}
#charListHolder{
	display:none;
}
#charListHolder button{
	background:#2DB9ED;
	margin:5px 5px 10px 5px;
	padding:0;
	width:35px;
	height:35px;
	font-size:20px;
	font-weight:bold;
	filter:none;
}
#charListHolder button#backCharButton{
	background:#2DB9ED url(/img/back_char.png) center center no-repeat;
	background-size:auto 100%;
	text-indent:-9999px;
	filter:none;
}
#charListHolder button#answerButton{
	display:none;
	width:255px;
}
#pc #charListHolder button:hover{
	background:#FF4693;
}
#pc #charListHolder button#backCharButton:hover{
	background-color:#FF4693;
}
#chatText{
	width:400px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
#smart #chatText{
	width:200px;
}
#chatSubmitButton{
	padding:0;
	font-size:12px;
	width:60px;
}
#chatMessage{
	padding:5px 0;
	width:100%;
	text-align:left;
	max-height:200px;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	background:#EAF3F7;
	border-bottom:1px solid #aaa;
	word-wrap: break-word;
}
#smart #chatMessage{
	width:90%;
	margin:0 auto;
	border:none;
}
#userListField #chatMessage{
	border:1px solid #aaa;
	margin:5px 0;
	padding:0;
	max-height:400px;
}
#chatMessage li{
	padding: 6px 3px 3px 6px;
	border-bottom:1px dashed #ccc;
}
#chatMessage li:last-child{
	border:none;
}
#chatMessage li.sys{
	font-weight:bold;
}
#chatMessage li.chat span.userName{
	display: inline-block;
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}
#gameScreen.owner #chatMessage span.userName{
	cursor: pointer;
	text-decoration: underline;
}
#chatMessage li span.userLabel{
	font-weight:bold;
}
#chatMessage li span.date{
	margin-left: 5px;
	font-size: 10px;
	color: #999;
	font-weight: normal;
}
#chatMessage img.trip{
	height: 16px;
	margin: -2px 2px;
}

/* ユーザー */
#userListField{
	width:200px;
	float:right;
	margin-left:5px;
}
#smart #userListField{
	width:100%;
	float:none;
	margin:0;
	border-top:1px solid #aaa;
}
#userListField h2{
	padding-left:5px;
	text-align:left;
	font-weight:bold;
	font-size:10px;
}
#userListField h2 span{
	margin:0 !important;
	font-size:inherit !important;
}
#userList{
	width:100%;
}
#userList tr{
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e7eef0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e7eef0));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e7eef0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7eef0',GradientType=0 );
}
#userList tr.turnUser{
	background: #99DDF6;
	background: -moz-linear-gradient(top,  #99DDF6 0%, #2DB9ED 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99DDF6), color-stop(100%,#2DB9ED));
	background: -webkit-linear-gradient(top,  #99DDF6 0%,#2DB9ED 100%);
	background: -o-linear-gradient(top,  #99DDF6 0%,#2DB9ED 100%);
	background: -ms-linear-gradient(top,  #99DDF6 0%,#2DB9ED 100%);
	background: linear-gradient(to bottom,  #99DDF6 0%,#2DB9ED 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99DDF6', endColorstr='#2DB9ED',GradientType=0 );
}
#userList th{
	font-weight:normal;
	border-left: 5px solid hsl(0, 75%, 45%);
}
#userList img.trip{
	height: 16px;
	margin: 0 -2px 0 2px;
	float: right;
}
#requestUserContainer{
	margin-top: 5px;
	display: none;
}
#requestUserList button{
	width:100%;
	color:#fff;
	background:#fcc;
	border-color: #f33;
}

table.ranking{
	width:80%;
}
table.ranking td:first-child{
	text-align:center;
}
table.ranking td:last-child{
	font-weight:bold;
	text-align:center;
}

/*サイドツール*/
div.switch{
	display: inline-block;
	height: 35px;
}
div.switch label{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	margin: 0;
	text-indent: 6px;
	z-index:0;
	font-size: 12px;
	font-weight: bold;
}
div.switch input:checked + span{
	z-index:10;
}
div.switch input + span:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index:-10;
	border: 1px solid #aaa;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
	transition: background .5s;
}
div.switch input:checked + span:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #a4ce90;
	z-index:-10;
	border: 1px solid #44a53f;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
	transition: background .5s;
}
#userListField div.switch{
	margin: 5px 0;
	width: 140px;
	word-break: keep-all;
	white-space: nowrap;
	text-align: left;
}
div.switch input#drawingUserLabelEnabled:checked + span:before{
	background: #b6eaf7;
	border: 1px solid #6aa8da;
}
div.switch input#muteEnabled:checked + span:before{
	background: #f3bbd0;
	border: 1px solid #c1849b;
}

#messageScrollModeSelect{
	margin:10px 0 5px 0;
	width:140px;
}
#roomDataButton{
	margin:5px 0;
	background:#e4b64b;
	width:140px;
	filter:none;
}
#pc #roomDataButton{
	margin-top:20px;
}
#tweetButton{
	margin:5px 0;
	padding:0 5px 0 35px;
	background:#00ACED url(/img/twitter.gif) left center no-repeat;
	background-size:auto 100%;
	width:140px;
	filter:none;
}
#lineButton{
	margin:5px 0;
	padding:0 5px 0 35px;
	background:#39b833 url(/img/line.png) left center no-repeat;
	background-size:auto 100%;
	width:140px;
	filter:none;
}
#muteButton{
	margin:5px 0;
	padding:0;
	background:#ff7d7d;
	width:140px;
	filter:none;
}
#muteButton.checked{
	background:#ff7d7d url(/img/check_white.png) left center no-repeat;
	padding:0 5px 0 20px;
	background-size:auto 100%;
}
#leaveButton{
	margin:5px 0;
	background:#999;
	width:140px;
	filter:none;
}

#infoBar{
	margin:10px 0;
	padding:10px 5px;
	background:#fff;
	border-radius: 10px;
	font-size:12px;
	text-align:left;
}
#visitorCountHolder{
	text-align:center;
}

div.overlay{
	background:rgba(200,200,200,0.5);
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	display:flex;
	z-index:999999;
}
div.overlay > div.alertContainer{
	background:#fff;
	justify-content:center;
	align-items:center;
	border-radius:20px;
	box-shadow:0 1px 6px rgba(32,33,36,.28);
	max-width:90vw;
	width:500px;
	min-height:300px;
	max-height:90vh;
	margin:auto;
	padding:15px 25px;
	display:flex;
	flex-direction:column;
	justify-content: space-between;
}
div.overlay > div.alertContainer > div.title{
	font-size:22px;
	font-weight:bold;
	text-align:center;
	padding:10px 0;
}
div.overlay > div.alertContainer > div.content{
	flex: 1;
	width: 100%;
	text-align: left;
	overflow-y: auto;
}
div.overlay > div.alertContainer > div.buttonContainer{
	display: flex;
}
div.overlay > div.alertContainer > div.buttonContainer > button{
	margin: 0 20px;
	min-width: 120px;
	flex:1;
}