/* Copyright (C) 2014 UNIVERSAL ENTERTAINMENT All Rights Reserved. */

@charset "shift-jis";

html,body {
	height:100%;
}
body {
	margin:0 auto; 
	font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	-webkit-text-size-adjust: 100%; 
	background:#e9f9ec;
}

input[type="button"] { -webkit-appearance: none; }
input[type="text"] { -webkit-appearance: none; }


/* .viii_containerArea 
**************************/
.viii_containerArea{
	height:100%;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
	.viii_inputArea{
		-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		
	}
	.viii_chatArea{
		-webkit-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		overflow-y:auto;
	}
	.viii_chatArea-wrap{
		padding-bottom:10px;
	}

/* parts
**************************
**************************/

.backToSite{
	padding:1px 5px 3px;
}
.backToSite a{
	text-decoration:none;
	color:#1f641f;
	font-weight:bold;
	font-size:10px;
	display:inline-block;
}
.backToSite a:before{
	content:"";
	display:inline-block;
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-right: 4px solid #1f641f;
	margin-right:5px;
	transition: all 0.2s ease-in-out;
}

/* .parts_input
**************************/
.parts_input{
	background:#525252;
	padding:8px;
	margin-top:10px;
}
	#viii_inputArea{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	}
	#viii_sendMessage { 
		background-color: #ffffff;
		color: #333333;
		font-size: 16px;
		padding:7px 5px;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.1),0 0 2px rgba(0,0,0,0.2);
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1),0 0 2px rgba(0,0,0,0.2);
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1),0 0 2px rgba(0,0,0,0.2);
		-webkit-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	#qa { 
		background-color: #ffffff;
		color: #333333;
		font-size: 16px;
		padding:7px 5px;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.1),0 0 2px rgba(0,0,0,0.2);
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1),0 0 2px rgba(0,0,0,0.2);
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1),0 0 2px rgba(0,0,0,0.2);
		-webkit-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	.viii_submit_btn {
		background: #6f7279;
		color: #ffffff;
		font-size:16px;
		font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-weight:bold;
		border:0;
		text-decoration:none;
		padding:10px 20px;
		text-align:center;
		vertical-align:middle;
		display:block;
		border-radius:4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		cursor:pointer;
		-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}

/* #viii_ui_main
**************************/
#viii_ui_main {
	width: 100%;
	z-index:0; 
	position:relative; 
	display:none;
}

/* .parts_chat_self
**************************/
.parts_chat_self{
	position:relative;
    display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction:row-reverse;
	margin:12px 0;
	text-align:left;
	overflow:hidden;
	padding:5px 12px;
	z-index:1;

}

.selfBaloon{
	min-width:30%;
	font-size:16px;
	display:inline-block;
	background:#f9f9f9;
	color:#000;
	border-radius:10px;
	padding:6px;
	text-align:left;
	min-height:18px;

	box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
}

		.selfBaloon:after{
			content:"";
			display:block;
			width: 0;
			height: 0;
			border: 8px solid transparent;
			border-left: 8px solid #f9f9f9;
			position:absolute;
			top:20px;
			right:-4px;

		}



/* .parts_chat_operator
**************************/
.parts_chat_operator{
	position:relative;
    display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin:20px 0 0px;
	text-align:left;
	overflow:hidden;
	padding:5px 12px;
	z-index:1;
}
	.parts_chat_operator .operatorImg{
		background-image:url(../images/chara_green1.png);
		background-repeat:no-repeat;
		width:15%;
		padding-top:24%;
		background-size: contain;
		-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}

.operatorAnswer{
	padding-left:20px;
	min-width:60%;
}

.operatorBaloon{
	position:relative;
/*	width:70%;*/
	font-size:16px;
	display:inline-block;
	background:#fff;
	color:#000;
	border-radius:10px;
	padding:15px;
	text-align:left;
	min-height:18px;

	box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
}

		.operatorBaloon:after{
			content:"";
			display:block;
			width: 0;
			height: 0;
			border: 8px solid transparent;
			border-right: 8px solid #fff;
			position:absolute;
			top:20px;
			left:-16px;
		}

			a {
			color: #0099ff;
			text-decoration: none;
			}

/* .parts_chat_choice
**************************/
.parts_chat_choice{
	position:relative;
    display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin:0 0 10px;
	text-align:left;
	overflow:hidden;
	padding:5px 12px;
	z-index:1;
}
	.operatorImg{
		background-repeat:no-repeat;
		width:15%;
		padding-top:10px;
		background-size: contain;
		-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}

.operatorAnswer{
	padding-left:20px;
	min-width:60%;
}

	.operatorChoices{
		margin-left:10px;
	}
	.choice{
		color:#fff;
		background:#4c9fff;
		font-size:16px;
		border-radius:6px;
		padding:15px;
		margin-bottom:5px;

	}





#viii_main1 { clear:both; z-index:2; }
#viii_canvas1 { height: 70px; }
#viii_canvas { height: 70px; position:absolute; left:-20px; top:20px; }
img { border: 0; margin: 0; padding: 0; }
div.viii_baloon { width: 95%; background-color: #ffffff; border:1px solid #428ec9; color: #333333; margin: 0px auto; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
p.viii_msgArea { overflow-y: auto; padding:15px; z-index:1000; }
#viii_inputArea_box { margin: 0px auto; text-align:center; }


ul.viii_infoArea { width:100%; border-top:1px solid #428ec9; border-left:1px solid #428ec9; border-right:1px solid #428ec9; color: #0000be; padding: 0; margin: 10px 0; list-style: none; }
ul.viii_infoArea li { border:1px solid #428ec9; background: -moz-linear-gradient(top, #99c9e5 0%, #7ba1b8); background: -webkit-gradient(linear, left top, left bottom, from(#99c9e5), to(#7ba1b8)); background: -ms-linear-gradient(top, #99c9e5 0%, #7ba1b8); text-decoration: none; display: block; padding: 8px 10px; }
ul.viii_infoArea li a { font-size: 12px; margin: 0px; text-align: left; }
ul.viii_infoArea li a:hover { list-style-type: none; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; text-decoration:none; }
ul.viii_infoArea li span { width:100%; margin: 1px 0px; display: block; background: url(../css/images/list_mark1.png)no-repeat right; }
@media screen and (max-width: 480px) {
ul.viii_infoArea li span { width:96%; margin: 1px 0px; display: block; background: url(../css/images/list_mark1.png)no-repeat right; padding:8px 10px 8px 5px; overflow: hidden; line-height: 1.0; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; /* Safari */ -o-text-overflow: ellipsis; /* Opera */ }
}
#jumpbtn { display:none; }



.viii_jump_btn a { width: 92%; background: -moz-linear-gradient(top,#f1f1f1 0%,#e1e1e1); background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1)); background: -ms-linear-gradient(top,#f1f1f1 0%,#e1e1e1); border: 1px solid #e1e1e1; color: #777; font-size: 16px; font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 10px; margin: 15px auto; display: block; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-align: center; vertical-align: middle; text-decoration: none; }