/* === Remove input autofocus webkit === */
*:focus {outline: none;}

/* === Form Typography === */
body { margin:20px 0; font: 14px/21px "メイリオ",Meiryo,"ＭＳ Ｐゴシック","Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.form_hint, .required_notification {font-size: 11px;}
em { font-style:normal; color:#F00;}
ul li {list-style: none;}

a { color:#1960AB; font-weight:bold;}
a:hover { text-decoration:underline; opacity:.80; cursor: pointer; }


h1 { margin:0; padding:15px; color:#FFF; font-size:28px; font-weight:bold; text-align:center; background:#3A7ED8; line-height:120%;}
h2 { margin:0 0 20px 0; padding:10px 5px; color:#1960AB; background:#CFE9F8; font-size:22px; text-align:center; line-height:140%;}
h3 { margin-top:30px; color:#3A7ED8; font-size:26px; text-align:center; line-height:140%;}

.text { width:780px; margin:0 auto 30px auto; padding-bottom:10px; border-bottom:1px solid #DDD;}

.box{ width:770px; margin:30px auto; padding:5px; border:1px solid #DDD;}

dl { margin-left:20px; margin-right:20px;}
dl dt {  float:left; width:120px; margin-top:10px; font-weight:bold;}
dl dd { margin-left:130px; margin-top:10px; }

dl dd ul,dl dd ol  { margin:0; padding-left:15px;}
dl dd ul li {
	position: relative;
}
dl dd ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #3498db;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

dl dd ol li { margin:0; padding:0; }

@media screen and (max-width: 640px) {
h1 { font-size:24px;}
h2 { font-size:22px;}
h3 { font-size:18px;}
.text,.box { width:95%; padding:10px 1%;}
dl { width:95%; margin:0 auto;}
dl dt { float:none; width:auto; margin-top:1em; font-weight:bold;}
dl dd { margin-left:1em; margin-top:0; }
.spnone{display:none;}
}


/* === List Styles === */
.contact_form { margin:10px;}

.contact_form table {
    width:780px;
    list-style-type:none;
	list-style-position:outside;
	margin:0px auto;
	padding:0px;
}

.contact_form table tr {
}

.contact_form table td {
	margin:0;
	padding:10px;
	background:#F1F7FF;
}

.contact_form table td.label {
	width:220px;
	background:#CFE9F8;
	color:#333;
}

.contact_form table td.bgnone {
	background:#FFF;
}
.contact_form table td.add span {
	width:80px;
	display:inline-block;
}
.contact_form table td.add input {
	margin-bottom:10px;
}

@media screen and (max-width: 640px) {
.contact_form { width:95%; margin:0 auto; padding:10px 0;}
.contact_form table { width:95%; margin:0;}
.contact_form table tr td { margin:0 auto; display:block; width:100%; position:relative;}
.contact_form table td.label { margin:0 auto; display:block; width:100%;}
}



/* === Form Header === */
.h1 { margin:0;}
.note { margin:5px 0 0 0; text-align:right;}

/* === Form Elements === */

/*input { padding:5px 8px;}*/
input { padding:2px 2px;}
text { width:23em;}
input.long { width:23em;}
input.short { width:4em;}
input.midium { width:10em;}
radio { width:auto;}
.multi { clear:both; margin:10px 0 0 155px;}
.multi span { float:left; margin:7px 0 0 0; width:90px; display:block;}

textarea {padding:8px; }

button { }

	/* form element visual styles */
	.contact_form input, .contact_form textarea { 
		border:2px solid #1960AB;
		padding-right:20px;
	}
@media screen and (max-width: 640px) {

input.sp { width:80%;}

input[type="radio"] {
}
}


/* === Form hints === */
.form_hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left:8px;
	padding: 1px 6px;
	z-index: 999; /* hints stay above all other elements */
	position: absolute; /* allows proper formatting if hint is two lines */
	display: none;
}
.form_hint::before {
	content: "\25C0";
	color:#d45252;
	position: absolute;
	top:1px;
	left:-6px;
}
@media screen and (max-width: 640px) {
.form_hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left:-280px;
	margin-top:40px;
	padding: 1px 6px;
	z-index: 999; /* hints stay above all other elements */
	position: absolute; /* allows proper formatting if hint is two lines */
	display: none;
}
.form_hint::before {
	content: "\25b4";
	color:#d45252;
	position: absolute;
	top:-12px;
	left:20px;
}
}

@media screen and (max-width: 580px) {
.form_hint {
	margin-left:-180px;
}
}

@media screen and (max-width: 300px) {
.form_hint {
	margin-left:-100px;
}
}



.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
	
/* ボタン */
input[type="submit"],
button.submit {
  	background: url(bg_sample-gradient.png) 0 0 repeat-x;/* IE6-9, other old browsers */
  	background: -moz-linear-gradient(top, #0099CC, #3A7ED8);/* FF3.6+ */
  	background: -webkit-linear-gradient(top, #0099CC, #3A7ED8);/* Chrome10+, Safari5.1+ */
  	background: -o-linear-gradient(top, #0099CC, #3A7ED8);/* Opera 11.10+ */
  	background: linear-gradient(to bottom, #0099CC, #3A7ED8);/* IE10+, W3C */
  	border: 1px solid #DDD;
	color:#FFF;
	font-size:16px;
	font-weight: bold;
	margin:10px auto 20px auto;
	padding: 10px 20px;
	display:block;
	text-align: center;
	text-shadow: 0 -1px 0 #3A7ED8;
	width:240px; height:50px;
}

input[type="submit"]:hover,
button.submit:hover {
	opacity:.80;
	cursor: pointer; 
}

input[type="submit"][disabled],
button.submit[disabled] {
	-webkit-appearance: none;
	font-size:16px;
	font-weight: bold;
	margin:10px auto 20px auto;
	padding: 10px 20px;
	display:block;
	text-align: center;
	background:#EEE;
	color:#BBB;
	width:200px; height:50px;
	text-shadow:none;
	cursor: default;
}
input[type="submit"][disabled]:hover {
	opacity:1;
}

#checkBtn { margin-top:20px;}

button.small { font-size:13px; width:120px; heignt:30px!important; padding: 0px 10px!important;}



footer { width:100%; margin:20px 0; text-align:center;}



/* チェック */
table.formTable { width:100%;}
table.formTable th { width:160px; padding:5px 10px; text-align:right; border-bottom:1px solid #CCC;}
table.formTable td { padding:5px 10px; border-bottom:1px solid #CCC;}

@media screen and (max-width: 580px) {
table.formTable th { width:40%;}
}
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"]{
    -moz-appearance:textfield;
}