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

/*--------------------
　お問い合わせ
--------------------*/
#content-progress {
	position: relative;
	width: 325px;
	height: 40px;
	margin: 10px auto;
}

/* 工程 */
#content-progress div {
	position: absolute;
	top: 0;
	left: 15px;
	
	margin: 0 auto;
	
	width: 80px;
	height: 40px;
	line-height: 40px;
	background: #68a;
	text-align: center;
	font-size: 0.8em;
	font-weight: bold;
	color: #fff;
	text-shadow: 2px 2px 0 #000;
	opacity: 0;
	animation: animeSpProgress 1.0s forwards;
	
}

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



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

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

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

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

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

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


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

.spbr {
	display: block;
}

#content-top .caution {
	text-align: center;
	font-weight: bold;
	font-size: 3.8vw;
	line-height: 1.4;
	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.9em;
	font-weight: bold;
	background: #f00;
	padding: 2px 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[id^="form"] {
	width: 100%;
}

#content-form ul[id^="form"] > li {
*	height: 40px;
*	margin-bottom: 10px;
}

/* 見出し */
#content-form ul[id^="form"] > li:nth-child(2n+1) {
	position: relative;
	width: 100%;
	height: 40px;
	text-shadow: 1px 1px 0 #000;
	box-shadow: 3px 3px 0px #000;
	
	margin-bottom: 10px;
}

/* お問い合わせの種類 */
#content-form #inqType {
	font-size: 1em;
	line-height: 2;

}




/* 文字設定 */
#content-form ul[id^="form"] > 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[id^="form"] > li:nth-child(2n+2) {
	position: relative;
	width: 100%;
	margin-bottom: 40px;
*	height: 100px;
}

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


#content-form ul[id^="form"] > li:nth-child(2n+2) input[type=text],
#content-form ul[id^="form"] > li:nth-child(2n+2) input[type=email] {
	width: 100%;
	height: 2.2em;
	font-size: 1.2em;
	border: 1px #555 solid;
}

#content-form ul[id^="form"] > li:nth-child(2n+2) textarea {
	width: 100%;
	height: 18em;
	border: 1px #555 solid;
}




/* お問い合わせ詳細 */
#content-form ul[id^="form"] > li.msg:nth-child(2n+2) {
	height: 268px;
}


/* 必須 */
.required {
	position: absolute;
	background: #f00;
	color: #fff;
	text-align: center;
	width: 40px;
	height: 22px;
	line-height: 22px;
	font-size: 0.9em;
	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: 95%;
	line-height: 2;
	color: #fff;
	font-size: .9rem;
	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 .errorBox {
	position: absolute;
	color: #f00;
	font-size: 0.8em;
	text-align: left;
	padding: 0 5px;
	background: #fff;
	border: 1px #c33 solid;
	top: -4px;
	right: 0px;
	border-radius: 10px;
	
	animation: animeSpErrorBox 1.0s forwards;
}

/* エラーボックスアニメ */
@keyframes animeSpErrorBox {
	from {
		opacity: 0;
		-webkit-transform: translateY(30px);
	}
	
	to {
		opacity: 1;
		-webkit-transform: translateY(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: animeSpBouncing 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: animeSpBouncing 1.0s infinite;
	
}

/* 下矢印アニメ */
@keyframes animeSpBouncing {
	
	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(0px);
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		
	}
}