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

/*----------------------------
　ご利用案内
----------------------------*/

#content-workflow01 {
	margin-bottom: 60px;
	counter-reset: worksNum;
}

#content-workflow01
	.area {
}



/* 大見出し */
#content-workflow01
	.area h3 {
		position: relative;
		width: 90%;
		height: 40px;
		line-height: 40px;
		color: #fff;
		text-shadow: 1px 1px 0 #333;
		background: #ccc;
		margin-bottom: 10px;
		text-indent: 2.2em;
		font-size: 1.2em;

		background: linear-gradient( left, #aaa 0, #ccc 100% );
		background: -webkit-linear-gradient( left, #666 0, #888 80%, #ccc 100% );
}

/* 大見出しのナンバリング */
#content-workflow01
	.area h3::before {
		position: absolute;
		content: counter( worksNum );
		counter-increment: worksNum;
		
		width: 34px;
		height: 34px;
		line-height: 36px;
		padding: 0;
		margin: 0;
		
		text-align: center;
		font-size: 1.2em;
		color: #fff;
		text-shadow: 1px 1px 0 #888;

		background: #35a;
		top: -10px;
		left: -6px;
		text-indent: 0;
		
		border: 1px #fff solid;
		border-radius: 5px;
		box-shadow: 1px 1px 0 #333;
}


#content-workflow01
	.area h3::after {
		position: absolute;
		right: -40px;
		content: "";
		border-top: 40px #ccc solid;
		border-right: 40px transparent solid;
}



/* 画像エリア */
#content-workflow01
	.area .area1 {
		width: 100%;
		height: auto;
		border: 1px #aaa #solid;
}

#content-workflow01
	.area .area1 img {
		border-radius: 5px;
}


/* 文章エリア */
#content-workflow01
	.area .area2 {
		width: 100%;
}

/* 小見出し */
#content-workflow01
	.area .area2 h4 {
		background: #cfa;
		width: 100%;
		font-size: 0.9em;
		text-indent: 1em;
		box-shadow: 2px 2px 0 #7a4;
		margin-bottom: 10px;
}

#content-workflow01
	.area .area2 p {
		margin-left: 0.5em;
}

#content-workflow01
	.area .area2 .box {
		width: 100%;
		height: 100px;
		background: #ffd;
		border: 1px #aaa dotted;
}


#content-workflow01
	.area .area2 .boxa {
		font-size: 0.9em;
		color: #333;
		border: 1px #3a6 solid;
		background: #ffe;
		padding: 5px;
}


/* 下矢印 */
#content-workflow01
	.arrow {
		position: relative;
		width: 0;
		height: 0;
		margin: 30px auto;
		border-top: 40px #666 solid;
		border-left: 60px transparent solid;
		border-right: 60px transparent solid;
		top: 2px;
		left: 4px;
		opacity: 0;
}

#content-workflow01
	.arrow::before {
		position: absolute;
		content: "";
		border-top: 40px #f00 solid;
		border-left: 60px transparent solid;
		border-right: 60px transparent solid;
		top: -42px;
		left: -64px;
}

/* 下矢印 アニメーション */
.animeArrow {
	animation: animeArrow 2.0s forwards;
}

@keyframes animeArrow {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1.0;
		transform: translateY(10px);
	}
}




#content-workflow02 {
	border: 1px #aaa solid;
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 50px;
}