@charset "utf-8";
/* CSS Document */


/* -----------------------------------------------
 *  	         form style setting
 * ----------------------------------------------- */




/* =========== form elements =========== */

/* ----- reset -----*/
input,
select,
textarea,
button,
label {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}


/* ----- input -----*/

/** text **/
input.input-text,
input.input-mail,
input.input-tel {
	border: 1px solid #999999;
	background: #FFFFFF;
	padding: 0.3em;
	margin: -5px 0;
}

/** radio **/
input.input-radio {
	margin: 5px 0;
}

/** checkbox **/
input.input-checkbox {
	margin: 5px 0;
}

input.input-image {
	cursor: pointer;
}


/* ----- select -----*/
select {
	margin: 5px 0;
	border: 1px solid #999999;
	background: #FFFFFF;
}


/* ----- textarea -----*/
textarea {
	border: 1px solid #999999;
	background: #FFFFFF;
}


/* ----- label -----*/


/**tit**/

/*001*/
form .tit_001 {
	display: block;
	margin: 0 15px 0 0;
	background: url(../img/required-ico.png) right center no-repeat;
}

/* ==== width 768px以下の場合 ==== */
@media screen and (max-width : 768px){
	form .tit_001 { background: none; }
	form .tit_001:after { content: url(../img/required-ico.png);
	margin-top: 5px;
	padding-left: 10px; }
}

/*002*/
form .tit_002 {
	display: block;
}


/**txt**/

/*001*/
form .txt_001 {
	margin: 0 1em 0 0.5em;
}

form .error .txt_001 {
	color: #FF4D4D;
}

/*002*/
form .txt_002 {
	font-size: 14px;
	display: block;
	margin: 0.5em 0;
	color: #FF4D4D;
}

/*003*/
form .txt_003 {
	display: block;
	margin: 0.5em 0;
}


/* ----- width -----*/

/**10**/
form .width10 {
	width: 10em;
}

/**15**/
form .width15 {
	width: 15em;
}

/**20**/
form .width20 {
	width: 20em;
}

/**30**/
form .width30 {
	width: 30em;
}

/* ==== width 768px以下の場合 ==== */
@media screen and (max-width : 768px){
	form .width10 { width: 94%; }
	form .width15 { width: 94%; }
	form .width20 { width: 94%; }
	form .width30 { width: 94%; }
	form .input-tel { width: 94%; }
	form .textarea { width: 94%; }
}


/* ----- focus -----*/
form .focus {
	border: 1px solid #333333;
	/* for IE */
	border: 1px solid #333333 !important;
}


/* ----- clear -----*/
form .clear {
	color: #666666;
	background: #EEEEEE;
	/* for IE */
	background: #EEEEEE !important;
}


/* ----- error -----*/
form .error dt label {
	color: #FF4D4D;
}

form .error input,
form .error select {
	border: 1px solid #FF4D4D;
	color: #FF4D4D;
}


/* =========== form-box =========== */
.form-box {
	width: 90%;
	margin: 0 auto;
	border-top: 1px solid #CCC;
}

/* ==== width 769px以上の場合 ==== */
@media screen and (min-width : 769px){
	.form-box {
	width: 720px; }
}


/* =========== col =========== */
form .col {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border-bottom: 1px solid #CCC;
	background: #EEE;
	list-style: none;
	text-align: left;
	*zoom: 1;     /* clear float, ~WinIE7 */
	_height: 1px; /* clear float, ~WinIE6 */
}

form .col:after {
	clear: both;
	display: block;
	content: "";
	height: 0;
	visibility: hidden;
}

form .col dt {
	margin: 0;
	padding: 10px 0 10px 20px;
	background: url(../img/ico_006.png) 11px center no-repeat;
}

	form .col dd {
	margin: 0;
	padding: 19px 0 19px 16px;
	background: #FFFFFF;
	min-height: 1.3em;
}

/* ==== width 769px以上の場合 ==== */
@media screen and (min-width : 769px){
	form .col {
	width: 720px; }
	
	form .col dt {
	float: left;
/*	width: 240px;*/
	width: 220px;
	margin: 0;
	padding: 19px 0 19px 20px;
	background: url(../img/ico_006.png) 11px center no-repeat;}

	form .col dd {
	float: left;
/*	width: 480px;*/
	width: 464px;
	margin: 0;
	padding: 19px 0 19px 16px;
	background: #FFFFFF;
	min-height: 1.3em; }
}


/* =========== form-btn =========== */
ul.form-btn {
	width: 155px;
	list-style: none;
	margin: 25px auto 0;
	padding: 0;
	text-align: center;
	*zoom: 1;     /* clear float, ~WinIE7 */
	_height: 1px; /* clear float, ~WinIE6 */
}

body#confirm ul.form-btn {
	width: 310px;
}

/* ==== width 768px以下の場合 ==== */
@media screen and (max-width : 768px){
	body#confirm ul.form-btn { width: 100%; }
}

ul.form-btn:after {
	clear: both;
	display: block;
	content: "";
	height: 0;
	visibility: hidden;
}

ul.form-btn li {
	width: 150px;
	height: 36px;
	float: left;
	display: inline;
	margin: 0 5px 0 0;
	text-align: center;
}

/* ==== width 768px以下の場合 ==== */
@media screen and (max-width : 768px){
	ul.form-btn li { float: none;
	display: block;
	margin: 0 auto 10px auto;
	width: 150px; }
}

ul.form-btn li input {
	line-height: 0;
	font-size: 0;
}


/* =========== completion-txt =========== */
.completion-txt {
	width: 100%;
	margin: 0 auto 20px auto;
	line-height: 1.6;
	text-align: left;
}

/* ==== width 768px以下の場合 ==== */
@media screen and (max-width : 768px){
	.completion-txt { width: 90%; }
}