@charset "utf-8";

/* common
------------------------------------------------ */
#page_title { background-image: url(../../img/flow/title.jpg); }

/* flow
------------------------------------------------ */
#flow {
}

/* top_block */
#top_block {
	padding: 60px 0;
	background: url(../../img/flow/deco1.png) no-repeat right top;
	background-size: auto 272px;
}

	#top_block .copy {
		padding-left: 24px;
		border-left: solid #be9245 6px;
		font-size: 32px;
		font-size: 3.2rem;
		color: #be9245;
	}

	#top_block .lead {
		margin-top: 30px;
		padding-left: 30px;
		font-size: 14px;
		font-size: 1.4rem;
	}

/* flow_block */
#flow_block {
	margin-top: 60px;
	width: 1110px;
}

	#flow_block .list {
	}

		#flow_block .list .box {
			float: left;
			margin-left: 20px;
			width: 535px;
		}
		#flow_block .list .box:first-child { margin-left: 0; }

			#flow_block .list .box .title {
				margin-bottom: 26px;
				text-align: center;
				font-size: 26px;
				font-size: 2.6rem;
				font-weight: normal;
			}

			#flow_block .list .box ol {
			}

				#flow_block .list .box ol li {
					position: relative;
					margin-bottom: 70px;
					padding: 30px 40px;
					border-radius: 6px;
					-webkit-border-radius: 6px;
					-moz-border-radius: 6px;
					-ms-border-radius: 6px;
					-o-border-radius: 6px;
				}
				#flow_block .list .box ol li:last-child { margin-bottom: 0; }

				#flow_block .list .box ol li:after {
					content: " ";
					display: block;
					position: absolute;
					bottom: -44px;
					left: 50%;
					margin-left: -20px;
					width: 40px;
					height: 22px;
					background-position: left top;
					background-repeat: no-repeat;
					background-size: 100%;
				}
				#flow_block .list .box ol li:last-child:after { display: none; }

					#flow_block .list .box ol li .name { margin-bottom: 20px; text-align: center; font-size: 26px; font-size: 2.6rem; font-weight: normal; }
					#flow_block .list .box ol li dl {}
						#flow_block .list .box ol li dl dt { padding-bottom: 6px; font-size: 16px; font-size: 1.6rem; }
						#flow_block .list .box ol li dl dd { padding: 8px; border-top: solid #ccc 1px; }
							#flow_block .list .box ol li dl dd p { margin-top: 1em; font-size: 12px; font-size: 1.2rem; }
							#flow_block .list .box ol li dl dd p:first-child { margin-top: 0; }
							#flow_block .list .box ol li dl dd .attention { padding-left: 1.4em; text-indent: -1.4em; }
							#flow_block .list .box ol li dl dd .tel { width: 296px; }

				#flow_block .list .before ol li { background: #f2e9da; }
				#flow_block .list .before ol li:after { background-image: url(../../img/flow/arrow1.png); }
					#flow_block .list .before ol li .name { color: #be9245; }
					#flow_block .list .before ol li dl {}
						#flow_block .list .before ol li dl dt { color: #be9245; }
						#flow_block .list .before ol li dl dd { border-top-color: #be9245; }

				#flow_block .list .after ol li { background: #e2e2e2; }
				#flow_block .list .after ol li:after { background-image: url(../../img/flow/arrow2.png); }
					#flow_block .list .after ol li dl { margin-top: 5em; }
						#flow_block .list .after ol li dl dd { border-top-color: #4d4d4d; }

	#flow_block .continue {
		margin: 100px auto 0;
		width: 620px;
		height: 96px;
		text-align: center;
		font-size: 28px;
		font-size: 2.8rem;
		line-height: 96px;
	}

		#flow_block .continue a {
			display: block;
			background: #be9245;
			color: #fff;
		}

/* responsive style
------------------------------------------------ */
@media screen and (max-width: 1120px) {
	/* flow_block */
	#flow_block {}
	#flow_block .list {}
	#flow_block .list .box { margin-left: 4%; width: 48%; }
}

@media screen and (max-width: 750px) {
	/* flow */
	#flow {}

	/* top_block */
	#top_block { padding: 0; background: none; }
	#top_block .copy { padding-left: 12px; border-left-width: 3px; font-size: 2rem; }
	#top_block .lead { margin-top: 20px; padding-left: 20px; font-size: 1.2rem; }

	/* flow_block */
	#flow_block { margin-top: 30px; }
	#flow_block .list {}
	#flow_block .list .box { float: none; margin: 0; width: 100%; }
	#flow_block .list .box:first-child { margin-bottom: 20px; }
	#flow_block .list .box .title { margin-bottom: 12px; font-size: 2rem; }
	#flow_block .list .box ol {}
	#flow_block .list .box ol li { margin-bottom: 30px; padding: 20px 5%; }
	#flow_block .list .box ol li:after { bottom: -32px; margin-left: -10px; width: 20px; height: 22px; }
	#flow_block .list .box ol li .name { margin-bottom: 10px; font-size: 2rem; }
	#flow_block .list .box ol li dl {}
	#flow_block .list .box ol li dl dt { padding-bottom: 3px; font-size: 1.2rem; }
	#flow_block .list .box ol li dl dd { padding: 4px; }
	#flow_block .list .box ol li dl dd p { margin-top: .6em; font-size: 1rem; }
	#flow_block .list .box ol li dl dd .attention { padding-left: 1.6em; text-indent: -1.6em; }
	#flow_block .list .box ol li dl dd .tel { width: 100%; }
	#flow_block .list .after ol li dl { margin-top: 1em; }
	#flow_block .continue { margin-top: 40px; width: 100%; height: 60px; font-size: 2rem; line-height: 60px; }
}