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

/*
	サービス紹介
-----------------------------------------------------------------------------------------------*/
.kvheader{
	background: url(../images/service_top_pc.png) no-repeat top center / cover;
}

/* meritBox featureArea casestudyArea共通 */
#meritArea .meritBox,
#featureArea,
#casestudyArea,
#blogArea{
	padding-top: 80px;
	text-align: justify;
}
#meritArea .meritBox .tit.en,
#featureArea .tit.en,
#casestudyArea .tit.en,
#blogArea .tit.en{
	text-align: center;
	margin-bottom: 70px;
	position: relative;
}
#meritArea .meritBox .tit.en::after,
#featureArea .tit.en::after,
#casestudyArea .tit.en::after,
#blogArea .tit.en::after{
	content: '';
	position: absolute;
	width: 24px;
	height: 6px;
	background-color: #37a0dc;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
}
#meritArea .meritBox .listBox,
#featureArea .listBox{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -70px -60px 0;
}
#meritArea .meritBox .listBox .list,
#featureArea .listBox .list{
	margin: 0 70px 60px 0;
}
#meritArea .meritBox .listBox .list .tit,
#featureArea .listBox .list .tit{
	font-size: 2.2rem;
	font-weight: 700;
	margin-top: 20px;
	margin-bottom: 10px;
}

/* meritArea */
#meritArea{
	margin-top: 80px;
}
#meritArea .titArea{
	text-align: center;
}
#meritArea .titArea .tit{
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 30px;
}
#meritArea .titArea .txt{
	font-size: 1.6rem;
	line-height: 200%;
}
/* meritArea_meritBox */
#meritArea .meritBox .listBox{
}
#meritArea .meritBox .listBox .list{
	width: calc((100% - 210px)/3);
}
#meritArea .meritBox .listBox .phBox{
	width: 260px;
    margin: 0 auto;
	position: relative;
}
#meritArea .meritBox .listBox .phBox .num{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	background-color: #9ddfff;
	color: #fff;
	font-size: 2.0rem;
	top: 10px;
	left: 0;
	border-radius: 50%;
	opacity: 0.9;
}

/* featureArea */
#featureArea{
	background-color: #f5f7f7;
}
#featureArea .listBox .list{
	width: calc((100% - 140px)/2);
}


/* casestudyArea blogArea 共通 */
/* underArea */
#underArea{
	display: flex;
}
#casestudyArea,#blogArea{
	width: calc(100% /2);
}
#casestudyAreaIn,#blogAreaIn{
	width: 490px;
	margin: 0 auto 100px auto;
}
#underArea .tit.en{
	margin-bottom: 40px;
}
#underArea .txt{
	font-size: 1.6rem;
	text-align: center;
	margin-bottom: 40px;
}
#underArea #casestudyArea .btnBox,
#underArea #blogArea .btnBox{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 260px;
	height: 60px;
	font-size: 1.6rem;
	text-align: center;
	border: 1px solid #333;
	margin: 0 auto;
	cursor: pointer;
	transition: all 0.3s;
}
#underArea #casestudyArea .btnBox::after,
#underArea #blogArea .btnBox::after{
	content: ' ';
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	border-top: solid 2px #333;
	border-right: solid 2px #333;
	top: 50%;
	right: 15px;
	transform: translateY(-50%) rotate(45deg);
	transition: all 0.6s;
}


/* casestudyArea */
#casestudyArea{
	background-color: #37a0dc;
}
#casestudyArea .tit.en::after {
    background-color: #2062c0;
}
#casestudyArea .txt{
	color: #fff;
}
#underArea #casestudyArea .btnBox{
	color: #fff;
	border: 1px solid #fff;
}
#underArea #casestudyArea .btnBox:hover {
	background-color: #fff;
	color: #37a0dc;
	opacity: 1;
}
#underArea #casestudyArea .btnBox::after {
	content: ' ';
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	top: 50%;
	right: 15px;
	transform: translateY(-50%) rotate(45deg);
	transition: all 0.6s;
}
#underArea #casestudyArea .btnBox:hover::after {
	border-top: solid 2px #37a0dc;
	border-right: solid 2px #37a0dc;
	right: 10px;
}

/* blogArea */
#underArea #blogArea .btnBox:hover {
	background-color: #333;
	color: #fff;
	opacity: 1;
}
#underArea #blogArea .btnBox:hover::after{
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	right: 10px;
}



@media screen and (max-width:812px){
	/* meritBox featureArea casestudyArea共通 */
	#meritArea .meritBox,
	#featureArea,
	#casestudyArea,
	#blogArea{
		padding-top: 50px;
	}
	#meritArea .meritBox .tit.en,
	#featureArea .tit.en,
	#casestudyArea .tit.en,
	#blogArea .tit.en{
		margin-bottom: 40px;
	}
	#meritArea .meritBox .tit.en::after,
	#featureArea .tit.en::after,
	#casestudyArea .tit.en::after,
	#blogArea .tit.en::after{
		width: 20px;
		height: 6px;
		bottom: -10px;
	}
	#meritArea .meritBox .tit.en img,
	#featureArea .tit.en img,
	#casestudyArea .tit.en img,
	#blogArea .tit.en img{
		width: auto;
		height: 45px;
	}
	#meritArea .meritBox .listBox,
	#featureArea .listBox{
		margin: 0 0 -50px 0;
	}
	#meritArea .meritBox .listBox .list,
	#featureArea .listBox .list{
		margin: 0 0 50px 0;
	}
	#meritArea .meritBox .listBox .list .tit,
	#featureArea .listBox .list .tit{
		font-size: 1.8rem;
		margin-bottom: 8px;
	}

	/* meritArea */
	#meritArea{
		margin-top: 40px;
	}
	#meritArea .titArea{
		text-align: justify;
	}
	#meritArea .titArea .tit{
		font-size: 2.4rem;
		line-height: 140%;
		margin-bottom: 20px;
	}
	#meritArea .titArea .txt{
		font-size: 1.5rem;
		line-height: 160%;
	}
	/* meritArea_meritBox */
	#meritArea .meritBox .listBox .list{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	#meritArea .meritBox .listBox .phBox{
		width: 120px;
		margin: 0;
	}
	#meritArea .meritBox .listBox .phBox .num{
		width: 36px;
		height: 36px;
		font-size: 1.6rem;
		top: -5px;
		left: -5px;
	}
	#meritArea .meritBox .listBox .txtBox{
		width: calc(100% - 140px);
	}
	#meritArea .meritBox .listBox .list .tit{
		margin-top: 0;
	}
	/* featureArea */
	#featureArea .listBox .list{
		width: 100%;
		margin: 0 0 40px 0;
	}
	/* casestudyArea blogArea 共通 */
	/* underArea */
	#underArea{
		flex-direction: column;
	}
	#casestudyArea,#blogArea{
		width: 100%;
		padding: 50px 25px 0 25px;
	}
	#casestudyAreaIn,#blogAreaIn{
		width: 100%;
		margin-bottom: 60px;
	}
	#underArea .tit.en{
		margin-bottom: 30px;
	}
	#underArea .txt{
		font-size: 1.5rem;
		text-align: justify;
		margin-bottom: 20px;
	}
	#underArea #casestudyArea .btnBox,
	#underArea #blogArea .btnBox{
		width: 80%;
		max-width: 240px;
		height: 50px;
		font-size: 1.4rem;
	}
}