@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
@import 'html5reset-1.6.1.css';

/* clearfix
------------------------------------------*/
.clear{ clear: both; }
.clearfix{ zoom: 1; }
.clearfix:after{ content: ''; display: table; clear: both; }

/* base
------------------------------------------*/
html{
	font-size: 62.5%;
}
*{
	outline: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
body, th, td, h1, h2, h3, h4, h5, h6, table, td, th, input, textarea, select, label, button, submit{
	color: #333;
	font-size: 1.5rem;
	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
	line-height: 1.6;
	letter-spacing: 0;
	word-break: break-all;
	word-wrap: break-word;
	-webkit-text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a{ color: #00b800; text-decoration: none; }
a:hover{ color: #00b800; text-decoration: none; }

ul{ list-style: none; }
::-moz-focus-inner{ padding: 0; border: 0; }
:placeholder-shown { color: #bbb; }
::-webkit-input-placeholder{ color: #bbb; }
::-moz-placeholder{ color: #bbb; }
:-moz-placeholder{ color: #bbb; }
:-ms-input-placeholder{ color: #bbb; }
label{ vertical-align: middle; }
img{ max-width: 100%; height: auto; vertical-align: middle; }
iframe{ width: 100%; height: auto; }

.fa{ vertical-align: baseline; }

/* chat-top
------------------------------------------*/
.chat-top-container{
	min-height: 100vh;
	text-align: center;
	background: #c5e6f9 url(/images/bg.jpg) no-repeat center bottom / cover;
	background-attachment: fixed;
}
.chat-top-main{
	margin: 0 auto;
	padding: 220px 20px 20px 20px;
	max-width: 640px;
}
.chat-top-main h1{
	margin: 0 auto 50px auto;
	width: 330px;
}
.chat-top-main .btn a{
	display: block;
	margin: 0 auto 20px auto;
	padding: 20px 0;
	max-width: 500px;
	color: #fff;
	font-size: 3.0rem;
	font-weight: bold;
	background: #ef651c;
	border-radius: 5px;
	box-shadow:
		0 -5px 0 0 rgba(0, 0, 0, 0.15) inset,
		0 3px 10px 5px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
}
.chat-top-main .btn a .fa{
	margin: 0 10px 0 0;
}
.chat-top-main .btn a:hover{
	box-shadow: none;
}
.chat-top-main .copyright{
	font-size: 1.2rem;
}

/* chat
------------------------------------------*/
.chat-container{
	padding: 60px 0;
	min-height: 100vh;
	text-align: center;
	background: #c5e6f9 url(/images/bg.jpg) no-repeat center bottom / cover;
	background-attachment: fixed;
}
.chat-main{
	margin: 0 auto;
	padding: 0 20px;
	max-width: 640px;
	text-align: left;
}
.chat-main li{
	position: relative;
	font-size: 1.8rem;
	font-weight: bold;
	border-radius: 10px;
	max-width: 400px;
}
.chat-main li input,
.chat-main li select,
.chat-main li .radio-wrap div label{
	font-size: 1.8rem;
	font-weight: bold;
}
.chat-main li.q{
	margin: 0 0 30px 70px;
	padding: 15px;
	background: #fff;
}
.chat-main li.q:before{
	content: '';
	position: absolute;
	top: 0;
	left: -70px;
	width: 77px;
	height: 50px;
	background: url(/images/q.png) no-repeat 0 0 / 77px;
}
.chat-main li.a{
	margin: 0 20px 30px auto;
	padding: 15px;
	color: #fff;
	background: #00b800;
}
.chat-main li.a:before{
	content: '';
	position: absolute;
	top: 0;
	right: -15px;
	width: 21px;
	height: 26px;
	background: url(/images/a.png) no-repeat 0 0 / 21px;
}
.chat-main li.text{
	margin: 0 20px 30px auto;
	padding: 5px;
	color: #fff;
	background: #fff;
	border: #333 5px solid;
}
.chat-main li input.input-text{
	margin: 0;
	padding: 10px;
	width: 100%;
	background: #e6e6e6;
	border: none;
	border-radius: 5px;
	box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1) inset;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
.chat-main li.select{
	margin: 0 20px 30px auto;
	padding: 5px;
	color: #fff;
	background: #fff;
	border: #333 5px solid;
}
.chat-main li .select-wrap{
	position: relative;
}
.chat-main li .select-wrap:before{
	content: '\f0d7';
	position: absolute;
	top: 15px;
	right: 15px;
	color: #333;
	font-family: FontAwesome;
}
.chat-main li .select-wrap select{
	padding: 10px;
	width: 100%;
	background: none;
	border: none;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
.chat-main li.radio{
	margin: 0 20px 30px auto;
	padding: 15px;
	color: #fff;
	background: #fff;
	border: #333 5px solid;
}
.chat-main li .radio-wrap div{
	display: inline-block;
	margin: 0 10px 0 0;
}
.chat-main li .radio-wrap div input{
	display: none;
}
.chat-main li .radio-wrap div label:before{
	content: '\f10c';
	display: inline-block;
	width: 20px;
	color: #bbb;
	font-size: 1.8rem;
	font-family: FontAwesome;
	vertical-align: middle;
	text-align: left;
}
.chat-main li .radio-wrap div input:checked + label:before{
	content: '\f192';
	color: #333;
}

.chat-main li.text-radio{
	margin: 0 20px 30px auto;
	padding: 5px;
	color: #fff;
	background: #fff;
	border: #333 5px solid;
}
.chat-main li.text-radio .input-text{
	float: left;
	width: 50%;
}
.chat-main li.text-radio .radio-wrap{
	float: right;
	padding: 10px;
	width: 50%;
}

.chat-main li.select-radio{
	margin: 0 20px 30px auto;
	padding: 5px;
	color: #fff;
	background: #fff;
	border: #333 5px solid;
}
.chat-main li.select-radio .select-wrap{
	float: left;
	width: 50%;
}
.chat-main li.select-radio .radio-wrap{
	float: right;
	padding: 10px;
	width: 50%;
}

.chat-main li.text-text{
	margin: 0 20px 30px auto;
	padding: 5px;
	color: #fff;
	background: #fff;
	border: #333 5px solid;
}
.chat-main li.text-text .input-text{
	float: left;
	width: 49%;
}
.chat-main li.text-text .input-text:nth-child(2){
	float: right;
}

.chat-main li.select-dob{
	margin: 0 20px 30px auto;
	padding: 5px;
	color: #fff;
	background: #fff;
	border: #333 5px solid;
}
.chat-main li.select-dob .select-wrap{
	float: left;
	width: 25%;
}
.chat-main li.select-dob .select-wrap:nth-child(1){
	width: 50%;
}

.chat-container button{
	display: block;
	margin: 0 auto 20px auto;
	padding: 20px 0;
	max-width: 300px;
	width: 100%;
	color: #fff;
	font-size: 3.0rem;
	font-weight: bold;
	background: #ef651c;
	border: none;
	border-radius: 5px;
	box-shadow:
		0 -5px 0 0 rgba(0, 0, 0, 0.15) inset,
		0 3px 10px 5px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
	cursor: pointer;
}
.chat-container button .fa{
	margin: 0 10px 0 0;
}
.chat-container button:hover{
	box-shadow: none;
}

.chat-container submit{
	display: block;
	margin: 0 auto 20px auto;
	padding: 20px 0;
	max-width: 300px;
	width: 100%;
	color: #fff;
	text-align: center;
	font-size: 3.0rem;
	font-weight: bold;
	background: #ef651c;
	border: none;
	border-radius: 5px;
	box-shadow:
		0 -5px 0 0 rgba(0, 0, 0, 0.15) inset,
		0 3px 10px 5px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
	cursor: pointer;
}
.chat-container submit .fa{
	margin: 0 10px 0 0;
}
.chat-container submit:hover{
	box-shadow: none;
}