@charset "UTF-8";

/*----------------------------------------

	+ wrapper
		+ box01
			- contact
			- name
			- kana
			- postal_code
			- address
			- tel
			- age
			- gender
			- mail01
			- mail02
			- message
			- form_btn

-----------------------------------------*/

/*----------------------------------------
	wrapper
-----------------------------------------*/

div#wrapper > article > h1 {
	padding: 25px 0;
	background: url(../../img/c_bg06.gif) repeat left top;
	text-align: center;
}

div#wrapper > article > p {
	width: 350px;
	margin: 0 auto;
	padding: 36px 0;
}

div#wrapper > article > div {
	padding-bottom: 40px;
	background: url(../../img/c_bg03.gif) repeat left top;
}

div#wrapper > article > div > p {
	width: 350px;
	margin: 0 auto;
}

div#wrapper > article > div > p:first-child {
	padding: 36px 0;
}

/*----------------------------------------
	box01
-----------------------------------------*/

#box01 {
	width: 350px;
	margin: 0 auto;
}

#box01 > h1 {
	padding: 36px 0 16px;
	text-align: center;
}

#box01 > form > section {
	padding: 20px 0;
	border-top: 1px solid #cccccc;
}

/* ハイフン */
#box01 > form .hyphen {
	display: inline-block;
	width: 13px;
	height: 2px;
	margin: 19px 10px 0;
	background: #3f3f3f;
	vertical-align: top;
}

/* エラーメッセージ */
#box01 > form .error_message {
	padding-top: 10px;
}

/*----------------------------------------
	contact
-----------------------------------------*/

#contact > h1 {
	padding-bottom: 16px;
}

#contact > div > #contact_box01 > input[type="radio"] {
	display: none;
}

#contact > div > #contact_box01 > label {
	display: block;
	position: relative;
	padding-left: 40px;
}

#contact > div > #contact_box01 > label::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #cccccc;
	border-radius: 50%;
	background: #ffffff;
}

#contact > div > #contact_box01 > input[type="radio"]:checked + label::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #05478b;
}

#contact > div > #contact_box01 > p {
	display: table;
	padding: 16px 0 0 40px;
}

#contact > div > #contact_box01 > p > span {
	display: table-cell;
	width: 60px;
	vertical-align: middle;
}

#contact > div > #contact_box01 > p > input[type="text"] {
	display: table-cell;
	width: 236px;
	height: 26px;
	padding: 5px;
	border: 2px solid #cccccc;
	border-radius: 0;
	/*background: #ff9999;*/
	-webkit-appearance: none;
}

#contact > div > #contact_box02 {
	padding-top: 20px;
}

#contact > div > #contact_box02 > ul > li {
	min-height: 24px;
}

#contact > div > #contact_box02 > ul > li:nth-child(n+2) {
	padding-top: 20px;
}

#contact > div > #contact_box02 > ul > li > input[type="radio"] {
	display: none;
}

#contact > div > #contact_box02 > ul > li > label {
	display: block;
	position: relative;
	padding-left: 40px;
}

#contact > div > #contact_box02 > ul > li > label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #cccccc;
	border-radius: 50%;
	background: #ffffff;
}

#contact > div > #contact_box02 > ul > li > input[type="radio"]:checked + label::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #05478b;
}

/*----------------------------------------
	name
-----------------------------------------*/

#name > h1 {
	padding-bottom: 16px;
}

#name > div > input[type="text"] {
	width: 336px;
	height: 26px;
	padding: 5px;
	border: 2px solid #cccccc;
	border-radius: 0;
	/*background: #ff9999;*/
	-webkit-appearance: none;
}

/*----------------------------------------
	kana
-----------------------------------------*/

#kana > h1 {
	padding-bottom: 16px;
}

#kana > div > input[type="text"] {
	width: 336px;
	height: 26px;
	padding: 5px;
	border: 2px solid #cccccc;
	border-radius: 0;
	/*background: #ff9999;*/
	-webkit-appearance: none;
}

/*----------------------------------------
	postal_code
-----------------------------------------*/

#postal_code > h1 {
	padding-bottom: 16px;
}

#postal_code > div > input[type="text"] {
	width: 76px;
	height: 26px;
	padding: 5px;
	border: 2px solid #cccccc;
	border-radius: 0;
	-webkit-appearance: none;
}

#postal_code > div > input[type="submit"] {
	margin-left: 20px;
	padding: 9px 10px 10px;
	border: none;
	border-radius: 0;
	background: #cccccc;
	-webkit-appearance: none;
}

/*----------------------------------------
	address
-----------------------------------------*/

#address > h1 {
	padding-bottom: 16px;
}

#address > div > dl:nth-child(n+2) {
	padding-top: 16px;
}

#address > div > dl > dt {
	padding-bottom: 6px;
}

#address > div > dl > dd > select {
	width: 190px;
	height: 40px;
	padding: 0 8px;
	border: 2px solid #cccccc;
	border-radius: 0;
	background: #ffffff url(../../img/c_select_arrow01.png) no-repeat right 10px center;
	background-size: 11px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#address > div > dl > dd > input[type="text"] {
	width: 336px;
	height: 26px;
	padding: 5px;
	border: 2px solid #cccccc;
	border-radius: 0;
	-webkit-appearance: none;
}

/*----------------------------------------
	tel
-----------------------------------------*/

#tel > h1 {
	padding-bottom: 16px;
}

#tel > div > input[type="text"] {
	width: 76px;
	height: 26px;
	padding: 5px;
	border: 2px solid #cccccc;
	border-radius: 0;
	-webkit-appearance: none;
}

/*----------------------------------------
	age
-----------------------------------------*/

#age > h1 {
	padding-bottom: 16px;
}

#age > div > select {
	width: 190px;
	height: 40px;
	padding: 0 8px;
	border: 2px solid #cccccc;
	border-radius: 0;
	background: #ffffff url(../../img/c_select_arrow01.png) no-repeat right 10px center;
	background-size: 11px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*----------------------------------------
	gender
-----------------------------------------*/

#gender > h1 {
	padding-bottom: 16px;
}

#gender > div > ul {
	display: table;
}

#gender > div > ul > li {
	display: table-cell;
	width: 175px;
	min-height: 24px;
	vertical-align: top;
}

#gender > div > ul > li > input[type="radio"] {
	display: none;
}

#gender > div > ul > li > label {
	display: block;
	position: relative;
	padding-left: 40px;
}

#gender > div > ul > li > label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #cccccc;
	border-radius: 50%;
	background: #ffffff;
}

#gender > div > ul > li > input[type="radio"]:checked + label::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #05478b;
}

/*----------------------------------------
	mail01
-----------------------------------------*/

#mail01 > h1 {
	padding-bottom: 16px;
}

#mail01 > div > input[type="text"] {
	width: 336px;
	height: 26px;
	padding: 5px;
	border: 2px solid #cccccc;
	border-radius: 0;
	/*background: #ff9999;*/
	-webkit-appearance: none;
}

/*----------------------------------------
	mail02
-----------------------------------------*/

#mail02 > h1 {
	padding-bottom: 16px;
}

#mail02 > div > input[type="text"] {
	width: 336px;
	height: 26px;
	padding: 5px;
	border: 2px solid #cccccc;
	border-radius: 0;
	/*background: #ff9999;*/
	-webkit-appearance: none;
}

/*----------------------------------------
	message
-----------------------------------------*/

#message > h1 {
	padding-bottom: 16px;
}

#message > div > textarea {
	width: 336px;
	height: 186px;
	padding: 5px;
	border: 2px solid #cccccc;
	border-radius: 0;
	/*background: #ff9999;*/
	-webkit-appearance: none;
}

/*----------------------------------------
	form_btn
-----------------------------------------*/

#form_btn {
	display: table;
	padding-top: 20px;
	border-top: 1px solid #cccccc;
}

#form_btn > li {
	display: table-cell;
	width: 175px;
	vertical-align: top;
}

#form_btn > li:nth-child(2) {
	text-align: right;
}

#form_btn button {
	border: none;
	padding: 0;
}