@charset "UTF-8";
@import url("default.pc.css");

/*--------------------
　お問い合わせ
--------------------*/
#content-progress {
	position: relative;
	height: 60px;
	margin: 20px 0;
}




/* 工程 */
#content-progress div {
	position: absolute;
	top: 0;
	left: 30px;
	width: 190px;
	height: 60px;
	line-height: 60px;
	background: #68a;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	color: #fff;
	text-shadow: 2px 2px 0 #000;
	opacity: 0;
	animation: animeProgress 1.0s forwards;
}

@keyframes animeProgress {
	from {
		opacity: 0.1;
		transform: translateY(-30px);
		-webkit-transform: translateY(-30px);
		-moz-transform: translateY(-30px);
		-ms-transform: translateY(-30px);
	}
	to {
		opacity: 1.0;
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
	}
}



/* 工程(2) */
#content-progress div:nth-child(2) {
	left: 265px;
	animation: animeProgress 1.0s 0.3s forwards;
}

/* 工程(3) */
#content-progress div:nth-child(3) {
	left: 500px;
	animation: animeProgress 1.0s 0.6s forwards;
	
}

/* 帯(左) */
#content-progress div::before {
	content: "";
	position: absolute;
	top: 0;
	left: -30px;
	border-top: 30px #68a solid;
	border-bottom: 30px #68a solid;
	border-left: 30px transparent solid;
}

/* 帯(右) */
#content-progress div::after {
	content: "";
	position: absolute;
	top: 0;
	right: -60px;
	border: 30px transparent solid;
	border-left: 30px #68a solid;
}

/* 現在の位置 */
#content-progress div.now {
	background: #d44;
}
#content-progress div.now::before {
	border-top: 30px #d44 solid;
	border-bottom: 30px #d44 solid;
	border-left: 30px transparent solid;
}

#content-progress div.now::after {
	border: 30px transparent solid;
	border-left: 30px #d44 solid;
}


/* 説明部分 */
#content-top {
}

#content-top .caution {
	text-align: center;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 10px 0;
}


#content-top .box1 {
	padding: 8px;
	background: #ffd;
	border: 1px #cc6 solid;
}


#content-top .box2 {
	padding: 8px;
	background: #ffd;
	border: 1px #c88 solid;
}

#content-top .req {
	color: #fff;
	font-size: 0.85em;
	font-weight: bold;
	background: #f00;
	padding: 0 5px;
	border-radius: 5px;
}


/*----------------------
　メールフォーム(入力)
----------------------*/
#content-form ul#form01 li:nth-child(2n+1) {
	color: #fff;
	background: url("../img/bg2.png") #444;
}


/* 例) の部分 */
#content-form ul#form01 li:nth-child(2n+2) p {
}


/* 送信ボタン */
#formBtn01 {
	text-align: center;
	margin: 20px 0;
}

input[type="submit"] {
	width: 300px;
	height: 40px;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	background: #44a;
	
	border: 1px #aaa solid;

	border-radius: 8px;

}





/*----------------------
　メールフォーム(確認)
----------------------*/
#content-form ul#form02 li:nth-child(2n+1) {
	color: #fff;
	background: url("../img/bg2.png") #33a;
}



#content-form ul#form02 li:nth-child(2n+2) {
	border-bottom: 1px #aaa dotted;

}

#content-form ul#form02 li:nth-child(2n+2) p {
	color: #333;
	font-size: 1.2em;
	line-height: 70px;
}


#content-form ul#form02 li:nth-child(2n+2) pre {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 16.5em;
	overflow: auto;
}


#formBtn01 div {
	text-align: center;
	margin: 20px 0;
	height: 50px;

}


/* 送信ボタン */
#formBtn02 div {
	position: relative;
	text-align: center;
	margin: 20px 0;
	height: 50px;
}


#formBtn02 div:first-child {
	float: left;
	width: 50%;
	
}

#formBtn02 div:last-child {
	float: right;
	width: 50%;

}


/*----------------------
　メールフォーム(完了)
----------------------*/
#content-form div#form03 {
}

#content-form div#form03 .box1 {
	border: 2px #6c7 solid;
	
	font-size: 1.8em;
*	font-weight: bold;
	text-align: center;
	
	color: #333;
	padding: 16px;
	
	
	border-radius: 10px;
*	background: #6a7;

	margin-bottom: 20px;
	

}


#content-form div#form03 .box2 {
	border: 1px #f00 dotted;
	padding: 10px;
	background: #ffd;

}

/* 注意ボックス */
#content-form .caution {
	width: 180px;
	background: #f00;
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	border: 1px #faa solid;
	border-radius: 6px;
	
}



/*----------------------
　共通
----------------------*/
#content-form {
}

#content-form ul{
	width: 100%;
}

#content-form ul li {
	float: left;
	height: 70px;
	margin-bottom: 16px;
}

/* 見出し */
#content-form ul li:nth-child(2n+1) {
	position: relative;
	width: 220px;
	margin-right: 20px;
	text-shadow: 1px 1px 0 #000;
	box-shadow: 3px 3px 0px #000;
}



/* 文字設定 */
#content-form ul li:nth-child(2n+1) > p {
	position: absolute;
	font-size: 1em;
	height: 22px;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto 0;
}


/* 入力フォーム */
#content-form ul li:nth-child(2n+2) {
	position: relative;
	width: 490px;
}

/* 入力フォーム文字 */
#content-form ul li:nth-child(2n+2) p {
	font-size: 0.9em;
	color: #888;
	margin-bottom: 2px;
}


#content-form ul li:nth-child(2n+2) input[type=text],
#content-form ul li:nth-child(2n+2) input[type=email] {
	padding: 0 5px 0 5px ;
	vertical-align: bottom;
	width: 26em;
	height: 2.2em;
	font-size: 1.2em;
	border: 1px #555 solid;
}

#content-form ul li:nth-child(2n+2) textarea {
	width: 36em;
	height: 18em;
	border: 1px #555 solid;
}




/* お問い合わせ詳細 */
#content-form ul li.msg {
	height: 268px;
}


/* 必須 */
.required {
	position: absolute;
	background: #f00;
	color: #fff;
	text-align: center;
	width: 40px;
	height: 22px;
	line-height: 22px;
	font-size: 0.85em;
	font-weight: bold;
	top: 0;
	bottom: 0;
	right: 5px;
	margin: auto 0;
	text-shadow: 0 0 0 #000;

	border-radius: 5px;
}


input[type="submit"] {
	outline: none;
	width: 300px;
	line-height: 2;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	background: #35a;
	border: 0;
	
	border-radius: 8px;
	box-shadow: 2px 2px 0 #333;
	
	left: 0;
	right: 0;
	margin: 0 auto;
	
}


input[type="submit"]:active {
	box-shadow: 0 0 0 #000;
	transform: translate(2px,2px);
}



/* お問い合わせの種類 */
#content-form ul#form01 li ul#inqType {
	width: 100%;
	height: 48px;
}

#content-form ul#form01 li ul#inqType li {
	width: 230px;
	height: 24px;
	line-height: 24px;
	font-size: 1.0em;
	color: #333;
	background: transparent;
	margin-bottom: 2px;
	text-shadow: none;
	box-shadow: none;
}

#content-form ul#form01 li ul#inqType li label {
	display: block;
}

#content-form ul#form01 li ul#inqType li:nth-child(2n+1) {
	margin-right: 5px;
}


/* エラーボックス */
#content-form .errorBox {
	position: absolute;
	color: #f00;
	font-size: 0.8em;
	text-align: left;
	padding: 0 5px;
	background: #fff;
	border: 1px #c33 solid;
	top: -4px;
	left: 320px;
	border-radius: 10px;
	
	animation: animeErrorBox 1.6s forwards;
}

/* エラーボックスアニメ */
@keyframes animeErrorBox {
	from {
		opacity: 0;
		transform: translateX(150px);
		-webkit-transform: translateX(150px);
		-moz-transform: translateX(150px);
		-ms-transform: translateX(150px);
	}
	
	to {
		opacity: 1;
		transform: translateX(0px);
		-webkit-transform: translateX(0px);
		-moz-transform: translateX(0px);
		-ms-transform: translateX(0px);
	}
}


/* 下矢印 */
#content-form .errorBox::before {
	position: absolute;
	content: "";
	border-top: 7px #f00 solid;
	border-right: 4px #f00 solid;
	border-left: 4px #f00 solid;
	border-bottom: 7px #f00 solid;
	top: -4px;
	left: -14px;

	animation: animeBouncing 1.0s infinite;
	
}


#content-form .errorBox::after {
	position: absolute;
	content: "";
	border-top: 5px #f00 solid;
	border-right: 7px #f00 solid;
	border-left: 7px transparent solid;
	border-bottom: 5px transparent solid;
	top: 8px;
	left: -20px;
	
	animation: animeBouncing 1.0s infinite;
	
}

/* 下矢印アニメ */
@keyframes animeBouncing {
	
	0% {
		-webkit-transform: translateY(0);

		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);

	}
	
	70% {
		transform: translateY(10px);
		-webkit-transform: translateY(10px);
		-moz-transform: translateY(10px);
		-ms-transform: translateY(10px);
	}
	
	100% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		
	}
}