header {
	background: url("images/request_guide/pc_header_bg.jpg") center top no-repeat;
	background-size: cover;
	width: 100%;
}

h1 {
	margin-bottom: 60px;
	background: url("images/request_guide/pc_request_guide.png") top center no-repeat;
}
h1 img {
	display: block;
	margin: 0 auto;
	opacity: 0;
}

article section {
	padding-bottom: 75px;
}
article section h2 {
	font-weight: normal;
	font-size: 17px;
	line-height: 1.375;
	margin-bottom: 6px;
}
article section p {
	line-height: 1.5;
}
article section > a {
	border: 1px solid #000;
	box-sizing: border-box;
	width: 308px;
	height: 50px;
	margin: 0 auto;
	display: block;
	position: relative;
}
article section > a:hover {
	opacity: 0.8;
}
article section > a:after {
	content: "";
	position: absolute;
	background: url("images/request_guide/link_arrow.png") center center no-repeat;
	top: 16px;
	right: 20px;
	width: 8px;
	height: 16px;
}

#real-store .memo {
	font-size: 11px;
	margin-bottom: 37px;
}
#real-store > a img {
	display: block;
	margin-top: 15px;
	margin-left: 95px;
	width: 86px;
}

#online > p {
	margin-bottom: 36px;
}
#online > a img {
	display: block;
	margin-left: 78px;
	margin-top: 15px;
	width: 124px;
}
#online .flow {
	background-color: #ebebeb;
	width: 792px;
	margin: 0 auto 42px;
	padding: 50px 44px;
}
#online .flow > dt {
	background: url("images/request_guide/pc_request_flow.png") center center no-repeat;
	width: 117px;
	height: 19px;
	margin: 0 auto 46px;
	text-indent: -200%;
}
#online .flow > dd ol {
	position: relative;
}
#online .flow > dd ol:after {
	content: "";
	border-left: 2px solid #000;
	position: absolute;
	top: 2%;
	left: 48px;
	width: 2px;
	height: 90%;
	z-index: 10;
}
#online .flow > dd ol li {
	display: table;
	width: 100%;
	background-color: #fff;
	margin-bottom: 40px;
	padding: 2px 0;
}
#online .flow > dd ol li .step {
	display: table-cell;
	width: 100px;
	vertical-align: middle;
}
#online .flow > dd ol li .step img.pc {
	display: block;
	margin: 0 auto;
	position: relative;
	z-index: 50;
}
#online .flow > dd ol li dl {
	display: table-cell;
	vertical-align: middle;
	padding: 14px 0;
}
#online .flow > dd ol li dl dt {
	font-size: 17px;
	margin-bottom: 5px;
}
#online .flow > dd.memo {
	background-color: #ecdec3;
	margin: 0 auto;
	width: 450px;
	text-align: center;
	line-height: 2.3;
	padding: 9px 0;
}
#online .flow > dd.memo .price {
	font-size: 17px;
}
#online .flow > dd.memo .notes {
	font-size: 11px;
}


#othres-inquiry {
	padding-bottom: 0;
}
#othres-inquiry p {
	margin-bottom: 55px;
}
#othres-inquiry > a img {
	display: block;
	margin-left: 56px;
	margin-top: 15px;
	width: 166px;
}


/* smart phone */
@media only screen and ( max-width: 768px ){

	h1 {
		background-image: none;
		width: 53.2835%;
		margin: 0 auto 8.9552%;
	}
	h1 img {
		opacity: 1;
		width: 100%;
		display: block;
	}

	article section {
		padding-bottom: 14.9253%;
	}
	article section h2 {
		font-size: 1.4rem;
		line-height: 1.142;
		margin-bottom: 3.2835%;
	}
	article section > a {
		border: 2px solid #000;
		width: 51.7164%;
		padding: 3.1343% 0;
		height: auto;
	}
	article section > a:after {
		background: url("images/request_guide/link_arrow.png") center center no-repeat;
		background-size: contain;
		top: 0;
		right: 6.3157%;
		width: 2.1052%;
		height: 100%;
	}

	#real-store .memo {
		font-size: 1.0rem;
		margin-bottom: 9.2537%;
	}
	#real-store > a img {
		margin: 0 0 0 26.3157%;
		width: 37.3684%;
	}

	#online > p {
		margin-bottom: 8.6567%;
	}
	#online > a img {
		margin: 0 0 0 16.5789%;
		width: 55.5263%;
	}
	#online .flow {
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto 8.9552%;
		padding: 5.8208% 2.9850% 5.9701%;
	}
	#online .flow > dt {
		background-image: none;
		font-size: 1.4rem;
		width: auto;
		height: auto;
		text-align: center;
		margin: 0 auto 5.9701%;
		text-indent: 0;
	}
	#online .flow > dd ol:after {
		border-left: 4px solid #000;
		top: 0;
		left: 3.955%;
		width: 2px;
		height: 89%;
	}
	#online .flow > dd ol li {
		display: table;
		width: 100%;
		background-color: transparent;
		margin-bottom: 8.8059%;
		padding: 0;
	}
	#online .flow > dd ol li .step {
		width: 9.5522%;
		vertical-align: top;
	}
	#online .flow > dd ol li .step img.pc {
		display: none;
	}
	#online .flow > dd ol li .step img.sp {
		display: block;
		position: relative;
		width: 100%;
		z-index: 50;
	}
	#online .flow > dd ol li dl {
		vertical-align: top;
		padding: 2.985% 0 0 3.4328%;
	}
	#online .flow > dd ol li dl dt {
		font-size: 1.4rem;
		margin-bottom: 2.5373%;
	}
	#online .flow > dd.memo {
		background-color: #fff;
		border: 2px solid #e9cd98;
		box-sizing: border-box;
		width: 88.0597%;
		font-size: 1.4rem;
		line-height: 1.071;
		padding: 4.776% 0;
	}
	#online .flow > dd.memo .price {
		font-size: 1.4rem;
	}
	#online .flow > dd.memo .notes {
		font-size: 1.0rem;
	}

	#othres-inquiry p {
		margin-bottom: 9.5522%;
	}
	#othres-inquiry > a img {
		margin: 0 0 0 9.4736%;
		width: 72.6315%;
	}

}