@charset "utf-8";

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　初版 1.0.0
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/* CSS Document */


.contactForm {
	width:calc(100% - 30px);
	padding-left:15px;
	padding-right:15px;
}


/*
	.contactForm h2.contactForm-title {
	}

	.contactForm h3 {
	}
*/	
	.contactForm p {margin-top:0px;}

	.contactForm-body {padding:24px 24px;}	
		.contactForm-body p {padding:0 0 12px 0;}
	
	.contactForm table { width:100%;}
	
	.contactForm a.btn {margin-bottom:18px; width:80%; height:3em; padding-top:0.75em; font-size:12pt; margin-left:auto; margin-right:auto;}


.formReadonly {
	background-color:#ffffff;
	border-style:none;
}


/* 入力項目のタイトルと入力項目のブロック要素 */
.form-group {
	border-bottom:1px solid #cdcdcd;
		padding-left:0rem;
		padding-right:0rem;
		padding-bottom:2rem;
		margin-bottom:2rem;
}
.form-group:first-child {
	padding-top:2rem;
	border-top:1px solid #cdcdcd;
}
.form-group:last-child {
	border-bottom:none;
}

	.form-group textarea {
		padding:0;
		margin:0;
		width:100%;
		height:10em;
	}

	.form-group ul {

		margin-bottom:0;
	}
/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ タイトルの必須項目に「.required」を記載する
	│　
	└──────────────────────────────────────────────────────────┘*/

.form-group div.required{
	position: relative;
	padding-right: 4rem;
}
.form-group div.required::after {
	position:absolute;
	padding:0 0.5rem;
	border-radius: 0.25rem;
	content:"必須";
	color:#ffffff;
	top:0.35rem;
	right:0.5rem;
	background-color:rgba(255, 34, 0, 0.9);
	border:1px solid rgba(255, 34, 0, 0.9);
}

.form-group div.required-en::after {
	content:"reqd";
}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 
	│　
	└──────────────────────────────────────────────────────────┘*/

form label.form-control-label {
    display: inline-block;
    text-align:left;
    max-width: 100%;
	margin-top:0.35rem;
	margin-left:0.5rem;
	margin-right:0.5rem;
    margin-bottom: 5px;
    font-weight: 700;
}

.inputCol {
    text-align:left;
}

/* 項目の必須アイコン */
.icon-required {float:right; margin-top:4px;}

.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
    margin-top: 0.5em;
	margin-left: 0px;
}

.form-group #zipcode1 {
	width:4em;
	display:inline;
	ime-mode:disabled;
}
.form-group #zipcode2 {
	width:5em;
	display:inline;
	ime-mode:disabled;
}

	
	.formReadonly {background-color:#ffffff; border-style:none;}
	
	/* 入力するためのフォームがあるcol
	div.inputCol{
		
	}
 	*/
/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ エラー表示
	│　
	└──────────────────────────────────────────────────────────┘*/
	.inputCol .error + input , 
	.inputCol .error + textarea , 
	.inputCol .error + select ,
	.inputCol .error label {
		background:#FFCCCC;
		border:1px solid #ff8888;	/* color:#FF0000; */
	}

	* html .inputCol .error label {
		background:none;
	}

	*+html .inputCol .error label{
		background:none;
	}

	.inputCol p.error{
		margin:0;
		color:red;
		font-weight:bold;
		margin-bottom:1em;
	}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ エラー表示
	│　
	└──────────────────────────────────────────────────────────┘*/

.inputCol h4 {
    margin-top:1.50em;
    margin-bottom:0.00em;
}
    .inputCol h4:first-child {
        margin-top:0em;
    }

.checkboxRequired span.checkboxArea {
    display:inline-block;
}

.checkboxRequired label {
	margin-right:1em;
}

.checkboxRequired input[type=checkbox] {
	margin-top:0.50em;
	margin-right:0.25em;
}