@charset "UTF-8";
/*
 * contact.css
 */
/* ==========================================================
!Common
========================================================== */
.contact01 {
	margin: 4% 0 0 0;
	padding: 4% 0 16% 0;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #cccccc;
}

.contact01 .example01 {
	color: #666666;
	font-size: 82%;
	font-weight: normal;
}

@media screen and (min-width: 768px) {
	.contact01 .table_basic01 table {
		display: table;
	}
}

.contact01 .table_basic01 table th {
	display: block;
	width: 100%;
	padding: 8% 0 5px 0;
}

@media screen and (min-width: 768px) {
	.contact01 .table_basic01 table th {
		display: table-cell;
		width: 40%;
		padding: 2% 20px 2% 0;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}
}

.contact01 .table_basic01 table th::after {
	display: inline-block;
	float: right;
	width: 36px;
	margin: 5px 0 0 0;
	padding: 1px 0 1px 0;
	border-radius: 2px;
	color: #ffffff;
	font-size: 63%;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	content: "必須";
	background: #c81c14 none;
}

.contact01 .table_basic01 table th.any::after {
	content: none;
}

.contact01 .table_basic01 table td {
	display: block;
	padding: 0;
}

@media screen and (min-width: 768px) {
	.contact01 .table_basic01 table td {
		display: table-cell;
		padding: 2% 0 2% 0;
	}
}

.contact01 .table_basic01 table td.check01 {
	padding: 3% 0 2% 0;
}

.contact01 .table_basic01 table td.txtarea01 {
	padding: 16px 0 16px 0;
}

/* ==========================================================
!Form Perts
========================================================== */
/* !default
---------------------------------------------------------- */
input[type="text"],
textarea {
	padding: 10px 5px 12px 5px;
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-color: #cccccc;
	border-radius: 2px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

input[type="text"] {
	width: 100%;
}

textarea {
	width: 100%;
}

select {
	padding: 5px 5px 5px 5px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

input[type="text"].zip1 {
	width: 100px;
}

input[type="text"].zip2 {
	width: 130px;
}

/* focus */
input:focus,
select:focus,
textarea:focus {
	background: #fff9c0;
}

/* Placeholder Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
	color: #999999;
}

/* Placeholder Firefox 18- */
:-moz-placeholder {
	opacity: 1;
	color: #999999;
}

/* Placeholder Firefox 19+ */
::-moz-placeholder {
	opacity: 1;
	color: #999999;
}

/* Placeholder IE 10+ */
:-ms-input-placeholder {
	color: #999999;
}

/* !ラジオボタン、チェックボックス
---------------------------------------------------------- */
input[type="radio"],
input[type="checkbox"] {
	display: none;
}

/* !ラジオボタン　チェックボックス クリック範囲
---------------------------------------------------------- */
input[type="radio"] + label,
input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	margin: 0 6px 16px 0;
	padding: 12px 15px 12px 48px;
	border: 1px solid #ffffff;
	border-radius: 24px;
	-webkit-box-shadow: 0 1px 3px rgba(17, 5, 8, 0.35);
	        box-shadow: 0 1px 3px rgba(17, 5, 8, 0.35);
	line-height: 1.2;
	text-align: left;
	background: #f0efed none;
	cursor: pointer;
	        -o-transition-property: color, background-color;
	        transition-property: color, background-color;
	        -o-transition-duration: 0.1s;
	           transition-duration: 0.1s;
	/* fade */

	-webkit-transition-duration: 0.1s;
	/* 0.1秒かけて */
	-webkit-transition-property: color, background-color;
	/* transitionを適用するCSSプロパティ名を指定 colorとbackground-colorが変更対象 */
}

/* ラジオボタン チェック印の背景 */
input[type="radio"] + label:before {
	position: absolute;
	top: 17px;
	left: 9px;
	width: 22px;
	height: 22px;
	margin: -10px 0 0 0;
	border: 1px solid #ffffff;
	border-radius: 50%;
	-webkit-box-shadow: 0 1px 2px rgba(51, 51, 51, 0.5);
	        box-shadow: 0 1px 2px rgba(51, 51, 51, 0.5);
	line-height: 100%;
	content: "";
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff));
	background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff);
}

/* ラジオボタン チェックの印 */
input[type="radio"]:checked + label:after {
	position: absolute;
	top: 12px;
	left: 14px;
	width: 12px;
	height: 12px;
	border: 1px solid #fe0000;
	border-radius: 50%;
	content: "";
	background: #fe0000;
}

/* ラジオボタン チェックされたらクリック範囲の色を変える */
input[type="radio"]:checked + label {
	border: 1px solid #00508e;
	border-radius: 24px;
	-webkit-box-shadow: 0 1px 2px rgba(51, 51, 51, 0.5);
	        box-shadow: 0 1px 2px rgba(51, 51, 51, 0.5);
	color: #ffffff;
	font-weight: bold;
	background: #00508e none;
}

/* チェックボタン チェック印の背景 */
input[type="checkbox"] + label:before {
	position: absolute;
	top: 20px;
	left: 14px;
	width: 22px;
	height: 22px;
	margin: -10px 0 0 0;
	border: 1px solid #ffffff;
	-webkit-box-shadow: 0 1px 2px rgba(51, 51, 51, 0.7);
	        box-shadow: 0 1px 2px rgba(51, 51, 51, 0.7);
	line-height: 100%;
	content: "";
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff));
	background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff);
}

input[type="checkbox"] + label a {
	color: #00508e;
	text-decoration: underline;
}

input[type="checkbox"] + label a:hover {
	text-decoration: none;
}

/* チェックボタン チェックの印 */
input[type="checkbox"]:checked + label:after {
	position: absolute;
	top: 14px;
	left: 15px;
	width: 22px;
	height: 22px;
	content: "";
	background: url("../img/contact/ico_check01.svg") no-repeat 0 0;
	background-size: 22px 16px;
}

/* チェックボタン チェックされたらクリック範囲の色を変える */
input[type="checkbox"]:checked + label {
	border: 1px solid #00508e;
	border-radius: 24px;
	-webkit-box-shadow: 0 1px 2px rgba(51, 51, 51, 0.5);
	        box-shadow: 0 1px 2px rgba(51, 51, 51, 0.5);
	color: #ffffff;
	font-weight: bold;
	background: #00508e none;
}

input[type="checkbox"]:checked + label a {
	color: #ffffff;
}

/* !ファイル選択ボタン
---------------------------------------------------------- */
input[type="file"] {
	padding: 20px 0 10px 0;
}

/* ==========================================================
!Form Thanks
========================================================== */
.contact_thanks01 {
	padding: 0 0 24% 0;
}

.contact_thanks01 .bnr img {
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #cccccc;
}

/*# sourceMappingURL=../../../map/contact.css.map */