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

.title01-wrap {
	background: url(../img/flow-all/bg-title01.jpg) no-repeat 50% 20% #fff;
}


.intro-holder {}
	.intro-holder p {
		float: right;
		width: 500px;
		font-size: 87.5%;
	}
	.intro-holder img {
		float: left;
		width: 198px;
	}



.list-flow-all li {
	position: relative;
}
.list-flow-all li:last-child .step-wrap-03 {
		padding-bottom: 0;
}


/* step-wrap */
.step-wrap-01,
.step-wrap-02,
.step-wrap-03 {
	position: relative;
	padding-bottom:60px;
}
.step-wrap-01 { background: url(../img/flow-all/bg_flowbox_arrow01.gif) no-repeat 100% 100%;}
.step-wrap-02 { background: url(../img/flow-all/bg_flowbox_arrow02.gif) no-repeat 100% 100%;}
.step-wrap-03 { background: url(../img/flow-all/bg_flowbox_arrow03.gif) no-repeat 100% 100%;}

.step-wrap-03:last-child {
	}
	
	
/* .ttl-step */
.ttl-step {
	position: relative;
	padding: .2em .6em;
	color: #fff;
	font-weight: bold;
	font-size: 125%;
	background-color: #9dc815;
	border: 1px solid #c0bdb5;
	border-radius: 4px;
}
.ttl-step span {
	display: inline-block;
	position: relative;
	margin: 0 1em .4em 0;
	padding: .2em .8em;
	font-size: 60%;
	background-color: #fff;
	border-radius: 4px;
	color: #639100;
}
.ttl-step strong {
	display: inline-block;
	position: absolute;
	right: 10px;
	top :10px;
	font-weight: bold;
	font-size: 60%;
	background-color: #f6ab00;
	padding: .2em .6em;
	border-radius: 4px;
}

.fig-arrow01-txt,
.fig-arrow02-txt,
.fig-arrow03-txt {
	position: absolute;
	right: 0;
	top: 60px;
}



/* .flow-block */
.flow-block01,
.flow-block02 {
	margin: 20px 52px 0 0;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #c0bdb5;
	}
	.flow-block01 .flow-txt p,
	.flow-block02 .flow-txt p,
	.flow-block03 .flow-txt p {
		font-size: 87.5%;
	}

		.flow-block01 .flow-txt {
			float: right;
			width: 400px;
		}
			.flow-block01 .flow-txt ul {
				margin-top: 1em;
			}
			.flow-block01 .flow-txt ul li {
				margin-top: .4em;
			}
		.flow-block01 img.thumb02 {
			float: left;
		}
		
		.flow-block02 .flow-txt {
		}
		
		.flow-block02 .list-thumb {
			position: relative;
			margin: 10px -10px 0 0;
			width: 648px;
		} 
		.flow-block02 .list-thumb li {
			float: left;
			margin: 10px 10px 0 0;
			width: 152px;
		} 
		.flow-block02 .list-thumb li span {
			display: block;
			text-align: center;
			font-size: 75%;
			margin-top: .5em;
		} 
		.flow-block02 .list-thumb li p {
			font-size: 75%;
		}

.toggle-block {
	margin: 20px auto;
	width: 596px;
}
	.toggle-block dt {
		cursor:pointer;
		background: url(../img/common/icon-circle-arw01-down.png) no-repeat 0 50%;
		padding-left: 1.2em;
		font-weight: bold;
		}
		.toggle-block dt:hover {
			text-decoration: underline;
		}
	.toggle-block dd {
		display:none;
		font-size: 87.5%;
		margin-top: 1em;
		border: 1px dotted #c0bdb5;
		padding: 1em 2em;
		background-color: #f9f8f7;
		}


.img-even {
	position: absolute;
	right: -5px;
	top: -83px;
	z-index: 2;
}

.line-free {
	position: absolute;
	right: 20px;
	bottom: 30px;
	z-index: 2;
}
.flow-all-youtube {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 85px;
}
.shadow8 {
	box-shadow: 0 0 8px grey;
}