@charset 'utf-8';


#contentheader {
	display: none;
}

.header {
	background-image: url(../image/guide/back_header.jpg);
}

.chapter h2 {
	margin-bottom: .8em;
	color: #364163;
	font-size: 2.6em;
	font-weight: normal;
	line-height: 1.4em;
}

.chapter p {
	margin-bottom: 1em;
	color: #4d4d4d;
	font-size: 1.6em;
	line-height: 2em;
}

.chapter .caution {
	color: #707eae;
	font-size: 1.4em;
	line-height: 2em;
}


#guideblock .inner {
	margin: 0 auto;
	padding: 50px 30px;
	padding-bottom: 0;
	text-align: center;
}

.guideblock {
	padding-bottom: 30px;
	position: relative;
}

.guideblock:after {
	content: '\f078';
	color: #b1b7d1;
	font-size: 4em;
	font-family: 'FontAwesome';
	font-weight: normal !important;
	text-align: center;
	line-height: 1em;
}

#guide5:after {
	display: none;
}

.guideblock h2:before {
	content: '';
	display: block;
	width: 150px;
	height: 150px;
	margin: 0 auto;
	margin-bottom: 20px;
	border-radius: 50%;
	background-color: #364163;
	background-image: url(../image/guide/parts.png);
	background-repeat: no-repeat;
	background-size: cover;
}

#guide1 h2:before {
	background-image: url(../image/guide/icon_flow1.png);
}

#guide2 h2:before {
	background-image: url(../image/guide/icon_flow2.png);
}

#guide3 h2:before {
	background-image: url(../image/guide/icon_flow3.png);
}

#guide4 h2:before {
	background-image: url(../image/guide/icon_flow4.png);
}

#guide5 h2:before {
	background-image: url(../image/guide/icon_flow5.png);
}


#faq {
	width: 100%;
	margin: 0 auto;
	background: #7580d1;
}

#faq .inner {
	margin: 0 auto;
	padding: 60px;
	padding-bottom: 20px;
}

#faq header {
	margin-bottom: 60px;
}

#faq header h1 {
	text-align: center;
	color: #fff;
	font-size: 3.2em;
	font-weight: normal;
	line-height: 1.4em;
}

#faq header h1:before {
	content: '';
	display: block;
	width: 150px;
	height: 150px;
	margin: 0 auto;
	margin-bottom: 20px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-image: url(../image/guide/icon_faq.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.faqblock {
	margin-bottom: 60px;
}

.faqblock h2 {
	margin-bottom: 30px;
	padding-left: 60px;
	color: #364163;
	font-size: 2.6em;
	font-weight: normal;
	line-height: 1.4em;
	position: relative;
}

.faqblock h2:before {
	content: 'Q';
	padding-left: 5px;
	font-weight: normal;
	font-size: 1.6em;
	font-family: 'AvenirNext LT Pro HeavyIt';
	letter-spacing: -.05em;
	line-height: 1.1em;
	position: absolute;
	top: 0;
	left: 0;
}

.faqblock div {
	padding-left: 60px;
	color: #fff;
	font-size: 1.6em;
	line-height: 1.8em;
	position: relative;
}

.faqblock div:before {
	content: 'A';
	padding-left: 7px;
	font-weight: normal;
	font-size: 2.4em;
	font-family: 'AvenirNext LT Pro HeavyIt';
	letter-spacing: -.05em;
	line-height: 1.1em;
	position: absolute;
	top: 0;
	left: 0;
}

.faqblock p {
	position: relative;
}


@media only screen and (min-width: 541px) and (max-width: 768px) {

	.chapter,
	#faq {
		font-size: .9em;
	}

	#guideblock .inner {
		padding-top: 40px;
	}

	.guideblock {
		padding-bottom: 20px;
	}

	.guideblock h2:before,
	#faq header h1:before {
		width: 120px;
		height: 120px;
		margin-bottom: 15px;
	}

	#faq .inner {
		padding: 45px;
		padding-bottom: 10px;
	}

	#faq header {
		margin-bottom: 45px;
	}

	.faqblock {
		margin-bottom: 45px;
	}

	.faqblock h2 {
		margin-bottom: 25px;
		padding-left: 50px;
	}

	.faqblock div {
		padding-left: 50px;
	}
}

@media only screen and (min-width: 0px) and (max-width: 540px) {

	.chapter,
	#faq {
		font-size: .8em;
	}

	#guideblock .inner {
		padding-top: 30px;
	}

	.guideblock {
		padding-bottom: 10px;
	}

	.guideblock h2:before,
	#faq header h1:before {
		width: 90px;
		height: 90px;
		margin-bottom: 10px;
	}

	#faq .inner {
		padding: 30px;
		padding-bottom: 5px;
	}

	#faq header {
		margin-bottom: 30px;
	}

	.faqblock {
		margin-bottom: 30px;
	}

	.faqblock h2 {
		margin-bottom: 20px;
		padding-left: 45px;
	}

	.faqblock div {
		padding-left: 45px;
	}
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {

	#guide1 h2:before {
		background-image: url(../image/guide/icon_flow1@2x.png);
	}

	#guide2 h2:before {
		background-image: url(../image/guide/icon_flow2@2x.png);
	}

	#guide3 h2:before {
		background-image: url(../image/guide/icon_flow3@2x.png);
	}

	#guide4 h2:before {
		background-image: url(../image/guide/icon_flow4@2x.png);
	}

	#guide5 h2:before {
		background-image: url(../image/guide/icon_flow5@2x.png);
	}

	#faq header h1:before {
		background-image: url(../image/guide/icon_faq@2x.png);
	}
}