@charset "utf-8";

/* ヘッダー */
header{
	position: relative;
	margin: 0 auto ;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 82%;
}
header .bg{
	background-image: url("../img/service_main.jpg");
	background-size: auto 135%;
	background-position: 86% 90%;
	padding-top: 82%;
	z-index: -1;
}
.catch .catchSVG{
	width: 56%;
	margin: 0 auto;
}

/* about */
#about{
	position: relative;
	margin: 0 auto;
	padding: 45px 0;
	background-color: #ffffff;
}
#about ul{
	position: relative;
	margin: 0 auto;
}
#about ul li{
	position: relative;
	margin: 0;
	padding: 20px;
	background-color: #6e7ddc;
	width: calc(100% - 40px);
}
#about ul li:nth-child(2){background-color: #5662c3;}
#about ul li a{
	position: relative;
	margin: 0;
	color: #ffffff;
}
#about ul li .Img{
	position: relative;
	margin: 0;
	width: 28%;
}
#about ul li .ttl{
	position: relative;
	margin: 0;
	width: 70%;
	text-align: center;
	font-size: .16rem;
}
#about ul li .ttl span{font-size: .13rem;}
#about ul li .ttl img{width: 40px;margin: 5px auto 0 auto;}

/* servicetype */
#servicetype{
	position: relative;
	margin: 0 auto;
	padding: 0;
	background-color: #ffffff;
}
#servicetype ul {
	position: relative;
	margin: 0 auto;
}
#servicetype ul li{
	position: relative;
	margin: 0;
	padding: 20px 0;
}
#servicetype ul li .ttl{
	position: relative;
	margin: 0 0 20px 0;
	font-size: .15rem;
	border-bottom: solid 6px #6e7ddc;
}
#servicetype ul li .Txt{
	position: relative;
	margin: 10px 0 0 0;
	width: 100%;
	font-weight: 500;
}
#servicetype ul li .program{
	position: relative;
	margin: 10px auto;
	padding: 10px 0;
	border-top: solid 1px #1d2087;
	border-bottom: solid 1px #1d2087;
	text-align: center;
	font-weight: 700;
	font-size: .12rem;
}
#servicetype ul li .target{
	position: relative;
	margin: 0 auto;
}
#servicetype ul li .target .targetTtl{
	position: relative;
	margin: 0;
	width: 3em;
	font-weight: 700;
}
#servicetype ul li .target .targetTxt{
	position: relative;
	margin: 0;
	width: calc(100% - 3em);
	padding: 0;
}
#servicetype ul li .target .targetTxt ul{
	position: relative;
	margin: 0;
}
#servicetype ul li .target .targetTxt ul li{
	position: relative;
	margin: 0 0 5px 0;
	padding: 0 0 0 1.2em;
}
#servicetype ul li .target .targetTxt ul li::before{
	position: absolute;
	top:0;
	left: 0;
	content: '\025b6';
}
#servicetype ul li .merit{margin: 10px auto 0 auto; border-top: solid 1px #1d2087;padding-top: 10px;}
#servicetype ul li .merit li{padding: 10px;}
#servicetype ul li .merit li .no{
	position: relative;
	margin: 0;
	width: 120px;
	padding: 0;
	display: block;
	font-size: .15rem;
	font-weight: 900;
}
#servicetype ul li .merit li .no span{
	position: relative;
	margin: 0 0 0 10px;
	display: inline-block;
	border: solid 3px #6e7ddc;
	font-size: .20rem;
	border-radius: 100px;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	font-weight: 700;
}
#servicetype ul li .merit li .bar{
	position: relative;
	margin: 0;
	width: calc(100% - 130px);
	padding: 0;
	display: block;
}
#servicetype ul li .merit li p{padding-top: 7px;}


/* step */
#step{
	position: relative;
	margin: 0 auto;
	padding: 45px 0 0 0;
	background-color: #ffffff;
}
#step .ttl{
	position: relative;
	margin: 0;
	padding: 0 20px 5px 20px;
	font-size: .15rem;
	border-bottom: solid 6px #6e7ddc;
}
#step .stepWrap{
	position: relative;
	margin: 0 auto;
	padding: 20px 20px 45px 20px;
	background-color: rgba(110,125,220,.11);
	font-weight: 500;
}
#step .stepWrap p{margin: 0 0 20px 0;}
#step dl{
	position: relative;
	margin: 0 auto;
}
#step dl dt{
	position: relative;
	border: solid 6px #6e7ddc;
	background-color: #6e7ddc;
	color: #ffffff;
	font-weight: 700;
	padding: 2px 0;
	text-align: center;
	width: 100%;
}
#step dl dd{
	position: relative;
	border: solid 6px #6e7ddc;
	background-color: #ffffff;
	padding: 10px;
	margin-bottom: 30px;
}
#step dl dd:before,
#step dl dd:after{
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
}
#step dl dd:before{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #6e7ddc transparent transparent transparent;
  border-width: 14px 17px 0 17px;
}
#step dl dd:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  border-width: 13px 16px 0 16px;
}
#step dl dd:last-child::before, #step dl dd:last-child::after{display: none;}
#step dl dd ul li{
	position: relative;
	padding-left: 1.2em;
}
#step dl dd ul li::before{
	position: absolute;
	display: block;
	content: '●';
	top:0;
	left: 0;
}


/* ----- pc ----- */
@media screen and (min-width: 768px) {

	#menu .nav ul li a{color: #ffffff;}
	
	/* ヘッダー */
	header{padding-top: 450px;}
	header .bg{
		background-position: 50% 50%;
		background-size: cover;
		padding-top: 450px;
	}
	.catch{width: 413px;padding: 20px 0;}

	/* about */
	#about{padding: 70px 0;}
	#about ul{width: 960px;}
	#about ul li{
		padding: 25px 30px;
		width: calc(50% - 60px);
	}

	#about ul li .Img{width: 29%;}
	#about ul li .ttl{
		width: 70%;
		font-size: .20rem;
	}
	#about ul li .ttl span{font-size: .16rem;}
	#about ul li .ttl img{width: 50px;margin: 10px auto 0 auto;}
	#about ul li a:hover{color: #1d2087 !important;}
	
	/* servicetype */
	#servicetype ul {width: 840px;}
	#servicetype ul li .ttl{
		margin: 0 0 15px 0;
		padding-bottom: 10px;
		font-size: .22rem;
		width: 700px;
	}
	#servicetype ul li .Txt{font-size: .16rem;}
	#servicetype ul li .Txt p{width: 670px;}
	#servicetype ul li .program{
		margin: 10px auto;
		padding: 10px 0;
		font-size: .16rem !important;
		text-align: left;
		width: 100% !important;
	}
	#servicetype ul li .target .targetTxt ul{width: 100% !important;}
	#servicetype ul li .merit li .no{
		width: 140px;
		font-size: .16rem;
	}
	#servicetype ul li .merit li .no span{
		margin: 0 0 0 13px;
		border: solid 5px #6e7ddc;
		font-size: .26rem;
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
	#servicetype ul li .merit li .bar{width: 50px;padding: 0 10px;}
	#servicetype ul li .merit li p{padding-top: 0;width: 600px;}

	#servicetype #service01 .ttl::after, #servicetype #service02 .ttl::after{
		position: absolute;
		right:-139px;
		top:-20px;
		display: block;
		width: 140px;
		height: 140px;
		content: '';
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}
	#servicetype #service01 .ttl::after{background-image: url("../img/service01-1.svg");}
	#servicetype #service02 .ttl::after{background-image: url("../img/service02-1.svg");}

	/* step */
	#step{padding: 70px 0;}
	#step .ttl{
		margin: 0 auto;
		padding: 0 0 5px 0;
		font-size: .22rem;
		width: 840px;
	}
	#step .stepWrap{
		padding: 65px 45px 1px 45px;
		width: 750px;
	}
	#step .stepWrap p{font-size: .15rem;width: 600px;margin: 0 auto 20px auto;}
	#step dl dt{
		padding: 5px 0 0 0;
		font-size: .15rem;
	}
	#step dl dd{padding: 10px 20px;font-size: .15rem;}

}