@charset "utf-8";

*{margin:0;padding:0;outline:none;text-decoration: none;}

html,body{
	font-family: "Hiragino Kaku Gothic Pro","メイリオ","Meiryo","Osaka","ＭＳ Ｐゴシック",Arial,sans-serif;
}

body{
	text-align:center;
}

#wrapper{
    max-width: 800px;
    margin: 20px auto;
    padding: 2vw;
    text-align: left;
	line-height: 1.75em;
}

#form-head{
	border-bottom: 1px solid #CCC;
	margin-bottom:1em
}

#form-head .title{
	font-size: 1.6em;
	font-weight: bold;
	line-height: 2em;
	color: #555;
}
#form-head .error{
    display:block;
    padding: .5em 1em;
    border: 1px solid orange;
    background-color: lightyellow;
	color: red;
}
#mail-form p{
    margin-bottom: .5em;
}
.form-item{
    padding:.5em 0;
}


#mail-form label{
	cursor: pointer;
	white-space:nowrap;
}

#mail-form label.must:before{
	display:block;
	float:right;
	content:"必須";
	font-size: 0.8em;
	line-height:1.75em;
	padding:0 0.5em;
	background-color:#BD2B27;
}

#mail-form input[type='text'], 
#mail-form textarea, 
#mail-form select{
	display: inline-block;
	width: 100%;
	height: 2em;
	border: 1px solid #CCC;
	border-radius: 0.15em;
	background-color: #F6F5F2;
	padding: 0 1em;
	font-family:inherit;
	font-size:1em;
	line-height: 1.75em;
}
#mail-form .text-wrap{
    border:1px solid transparent;
    padding:0 16px;
}
#mail-form .text-wrap>input[type='text'],
#mail-form .text-wrap>textarea{
    margin-left:-17px;
}
#mail-form option{
	padding: .25em 1em;
}

#mail-form textarea{
	padding: 0.3em 1em;
	height: 4em;
	line-height: 1.25em;
}

#mail-form input[type='text']:focus, 
#mail-form textarea:focus, 
#mail-form select:focus{
	border-color: #333;
}

#mail-form *::-webkit-input-placeholder{color: #999;}
#mail-form *:-moz-placeholder{color: #999;}
#mail-form *::-moz-placeholder{color: #999;}
#mail-form *:-ms-input-placeholder{color: #999;}

#mail-form em{
	display:block;
	font-size:0.8em;
	font-style: normal;
	line-height: 1em;
	padding-left:.5em;
	padding-bottom:.5em;
}
.text-wrap+em{
	padding-top:.5em;
}
#form-table>tbody>tr>td>em{
	color:#999;
}

#form-table>tbody>tr:last-child>td{
	padding: 0;
	text-align: center;
	background: #E2E2E0;
}

.btn{
	cursor: pointer;
	margin: 30px 20px 0px;
	padding: 0.5em 25px;
	min-width: 200px;
	font-size: 1.5em;
	color: #FFF;
	border: none;
	border-radius: 0.25em;
	-webkit-border-radius:.25em;
	-moz-border-radius:.25em;
	background: #6C6C6C;
}

.btn:hover, .btn:focus{
	text-shadow:0 0 5px rgba(0,0,0,.75);
	-webkit-box-shadow:0 0 5px 1px rgba(0,0,0,.1);
	-moz-box-shadow:0 0 5px 1px rgba(0,0,0,.1);
	-o-box-shadow:0 0 5px 1px rgba(0,0,0,.1);
	box-shadow:0 0 5px 1px rgba(0,0,0,.1);
	background-color:#848486;
}

.btn:active{
	color:#000;
	text-shadow:0 1px 0 rgba(255,255,255,.75);
	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.2);
	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,.2);
	-o-box-shadow:inset 0 0 10px rgba(0,0,0,.2);
	box-shadow:inset 0 0 10px rgba(0,0,0,.2);
	background-color:#bfbfc0;
}