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

.guide-quality {
	background: #fff;
	padding: 30px;
}
.guide-quality ul{
	margin: 0 auto;
	width: 90%;
}
.guide-quality li{
	list-style-type: none;
	font-size: 1.8rem;
	font-weight: bold;
}
.guide-quality li span{
	color: #E65885;
}
.guide-quality li:before{
	content: url(../images/share/icn_check.png) ;
	position: relative;
	top: 5px;
	margin-right: 20px;
}
.guide-flow {
	overflow: hidden;
}
.guide-flow li{
	position: relative;
	list-style-type: none;
	display: inline-block;
	box-sizing:border-box;
	background: #fff;
	min-height: 232px;
	padding: 15px;
	width: 22%;
	margin-right: 4%;
}
.guide-flow li:after{
	position: absolute;
	content: url(../images/share/arrow_triangle_right.png) ;
	right: -25px;
	top: 40%;
}
.guide-flow li:last-child{
	margin-right: 0;
}
.guide-flow li h4{
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 10px;
	line-height:1.3;
	text-indent:-1.6em;
	padding-left:2em;
}
.guide-flow li h4 span{
	color: #0080D7;
	padding-right: 10px;
}
.guide-flow li p {
	margin-left: 1.5em;
	text-indent: -1.5em;
}
.guide-flow li p span{
	font-size: 1.2rem;
}
.guide-flow li p:before{
	content: '■';
	color: #0080D7;
	margin-right: 5px;
}
.guide-ope {
	overflow: hidden;
}
.guide-ope li{
	position: relative;
	list-style-type: none;
	display: inline-block;
	box-sizing:border-box;
	background: #fff;
	min-height: 170px;
	padding: 30px 20px;
	width: 49%;
	margin-right: 2%;
	margin-bottom: 20px;
}
.guide-ope li:nth-child(2n){
	margin-right: 0;
}
.guide-ope li h4{
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 20px;
	line-height:1.3;
	text-indent:-1em;
	padding-left:1em;
}
.guide-ope li h4:before{
	content: url(../images/share/line.png);
	position:relative;
	top: 3px;
	margin-right: 10px;
}
.guide-ope li h4 span{
	font-size: 1.6rem;
}
.btn-pc {
	display: inline-block;
	margin-right: 2%;
	width: 48%;
}
.btn-pc a{
	display:block;
	text-decoration: none;
	box-sizing:border-box;
	position: relative;
	color: #007FD7;
	font-weight: bold;
	line-height: 1.2;
	padding: 15px 20px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background : -webkit-linear-gradient(top, #ffffff, #E0F3FB) ;
	background : linear-gradient(to bottom, #ffffff, #E0F3FB) ; 
}
.btn-pc a:hover{
	background : -webkit-linear-gradient(top, #E0F3FB, #ffffff) ;
	background : linear-gradient(to bottom, #E0F3FB, #ffffff) ; 
}
.btn-pc a:after { 
	display: block;
	content: url(../images/share/arrow_blue_s.png);
	position: absolute;
	top: 35%;
	right: 10px;
}
.btn-sp {
	display: inline-block;
	width: 48%;
}
.btn-sp a{
	display:block;
	text-decoration: none;
	box-sizing:border-box;
	position: relative;
	color: #17B1A8;
	font-weight: bold;
	line-height: 1.2;
	padding: 15px 20px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background : -webkit-linear-gradient(top, #ffffff, #D7F7E3) ;
	background : linear-gradient(to bottom, #ffffff, #D7F7E3) ; 
}
.btn-sp a:hover{
	background : -webkit-linear-gradient(top, #D7F7E3, #ffffff) ;
	background : linear-gradient(to bottom, #D7F7E3, #ffffff) ; 
}
.btn-sp a:after { 
	display: block;
	content: url(../images/share/arrow_green_s.png);
	position: absolute;
	top: 35%;
	right: 10px;
}

.btn-qa {
	display: block;
	width: 48%;
	margin-top: 15px;
}
.btn-qa a{
	display:block;
	text-decoration: none;
	box-sizing:border-box;
	position: relative;
	color: #333333;
	font-weight: bold;
	line-height: 1.2;
	padding: 15px 20px 15px 40px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background : -webkit-linear-gradient(top, #ffffff, #f8f8f8) ;
	background : linear-gradient(to bottom, #ffffff, #f8f8f8) ; 
}
.btn-qa a:hover{
	background : -webkit-linear-gradient(top, #f8f8f8, #ffffff) ;
	background : linear-gradient(to bottom, #f8f8f8, #ffffff) ; 
}
.btn-qa a:after { 
	display: block;
	content: url(../images/share/arrow_gray_s.png);
	position: absolute;
	top: 35%;
	right: 10px;
}
.btn-qa a:before { 
	display: block;
	content: url(../images/share/icn_q_s.png);
	position: absolute;
	top: 25%;
	left: 10px;
}
.guide-differ {
	background: #fff;
	padding: 30px;
	text-align: center;
}
.btn-guide-differ {
	display: block;
	width: 40%;
	font-size: 2.0rem;
	margin: 0 auto;
	margin-top: 30px;
}
.btn-guide-differ a{
	position: relative;
	display:block;
	text-decoration: none;
	box-sizing:border-box;
	color: #ffffff;
	font-weight: bold;
	line-height: 1.2;
	padding: 20px 20px 20px 40px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background : -webkit-linear-gradient(top, #727FFA, #5048D4) ;
	background : linear-gradient(to bottom, #727FFA, #5048D4) ; 
}
.btn-guide-differ a:hover{
	background : -webkit-linear-gradient(top, #5048D4, #727FFA) ;
	background : linear-gradient(to bottom, #5048D4, #727FFA) ; 
}
.btn-guide-differ a:after { 
	display: block;
	content: url(../images/share/arrow_white_s.png);
	position: absolute;
	top: 30%;
	right: 20px;
}
.btn-guide-differ a:before { 
	display: block;
	content: url(../images/share/icn_differ.png);
	position: absolute;
	top: 25%;
	left: 20px;
}
@media screen and (max-width: 767px) {
.guide-quality {
	padding: 10px 15px;
}
.guide-quality ul{
	width: 100%;
}
.guide-quality li{
	text-indent: -2em;
	margin-left: 2em;
	font-size: 2rem;
}
.guide-flow li{
	display: block;
	padding: 20px 10px;
	width: 100%;
	margin-right: 0;
	margin-bottom: 40px
}
.guide-flow li:after{
	position: relative;
	content: url(../images/share/arrow_triangle_down_s.png) ;
	right: -45%;
	top: 55px;
}
.guide-flow li:last-child{
	margin-bottom: 0px
}
.guide-flow li:last-child:after{
	content: '';
}
.guide-flow li h4,
.guide-flow li p,
.guide-flow li p span{
	font-size: 2rem;
}
.guide-ope li{
	display: block;
	padding: 20px 10px;
	width: 100%;
	margin-right: 0;
	margin-bottom: 20px;
}
.guide-ope li h4,
.guide-ope li h4 span{
	font-size: 2rem;
}
.btn-pc {
	display: block;
	margin-right: 0;
	width: 100%;
	font-size: 2rem;
}
.btn-sp {
	display: block;
	width: 100%;
	margin-top: 20px;
	font-size: 2rem;
}
.btn-qa {
	width: 100%;
	margin-top: 10px;
	font-size: 2rem;
}
.btn-pc a:after { 
	content: url(../images/share/arrow_blue.png);
	top: 30%;
}
.btn-sp a:after { 
	content: url(../images/share/arrow_green.png);
	top: 30%;
}
.btn-qa a:after { 
	content: url(../images/share/arrow_gray.png);
	top: 30%;
}
.btn-qa a{
	padding: 15px 20px 15px 50px;
}
.btn-qa a:before { 
	content: url(../images/share/icn_q.png);
}
.guide-differ {
	padding: 20px 10px;
}
.btn-guide-differ {
	width: 100%;
	font-size: 2rem;
}
.btn-guide-differ a:after { 
	content: url(../images/share/arrow_white.png);
	top: 35%;
}
}