@charset "utf-8";



.col_w{
	color: #fff;
}




/* ---------------------------------------
* common
------------------------------------------ */

main{
	position: relative;
}

.btn.sp{
	display: none;
}

.col-w{
	color: #fff;
}

.access a{
	display: block;
	text-decoration: underline;
}

.mainTop{
	overflow: hidden;
}

.btn-404{
	margin: 0 auto;
}

svg{
	width: 100%;
	height: 100%;
}

.bg{
	background-repeat: no-repeat;
	background-size: cover;
}

:root {
	--primary: #0E91D4;
	--bg01: #3E424C;
	--bg02: #F7F7F9;
}

/* ---------------------------------------
* TOP
------------------------------------------ */

.mv{
	padding: 13rem 0 8rem;
	background-color: #F7F7F9;
	position: relative;
}

.mvBg{
	width: 100%;
	position: absolute;
	left: 0;
	top: 2rem;
}

.mvWrap{
	position: relative;
	z-index: 2;
}

.mvImg{
	width: 33.333%;
	margin: 0 auto;
}

.mvtxtWrap{
	margin-top: -10rem;
}

.mvTxt{
	padding-bottom: 1rem;
}

.mvTxt p{
	font-weight: 700;
	line-height: 160%;
	letter-spacing: normal;
	font-size: clamp(14px,2rem, 24px);
}

.mvTxt p:first-of-type{
	font-size: clamp(18px,2.4rem, 28px);
}

.section-about{
	padding-top: 14rem;
	background-color: var(--bg02);
	position: relative;
}

.aboutBg{
	position: absolute;
	width: 83%;
	left: 0;
	bottom: 0;
}

.aboutTxten{
	position: absolute;
	right: 6rem;
	top: 0rem;
}

.aboutTxten p{
	font-size: clamp(18px,20rem, 240px);
	line-height: 120%;
	letter-spacing: normal;
	font-weight: 700;
}

.aboutWrap{
	position: relative;
	z-index: 2;
}

.about-l{
	padding-left: 8rem;
}

.about-l h2{
	writing-mode: vertical-rl;
}

.about-l h2 p{
	font-size: clamp(24px,4.8rem, 56px);
	font-weight: 700;
	line-height: 120%;
	letter-spacing: normal;
}

.about-l h2 p:first-of-type{
	padding-left: 2rem;
}

.about-r{
	width: 56.25%;
}

.about-r p{
	font-weight: 700;
}

.about-r p:not(:last-of-type){
	padding-bottom: 3rem;
}

.section-service{
	background-color: var(--bg01);
	border-radius: 20px;
	margin-top: -1rem;
	position: relative;
	z-index: 2;
}

.servicebg{
	position: absolute;
	right: 0;
	top: 2rem;
	width: 63%;
	mix-blend-mode: multiply;
}

.serviceWrap{
	position: relative;
	z-index: 2;
}

.serviceTxt p{
	font-weight: 700;
}

.service-listItem{
	padding: 4rem ;
	border-radius: 20px;
	background-color: var(--bg02);
}

.service-listItem:not(:last-of-type){
	margin-bottom: 2rem;
}

.service-listNum{
	width: 16.666%;
	flex: 0 0 16.666%;
}

.service-listNum p{
	font-weight: 700;
	letter-spacing: normal;
	line-height: 120%;
}

.service-listNum p:first-of-type{
	font-size: clamp(12px,1.4rem,14px);
	color: var(--primary);
	padding-bottom: 1rem;
}

.service-listNum p:last-of-type{
	font-size: clamp(12px,1.8rem,20px);
}

.service-listMain{
	flex: 1 1 auto;
}

.service-listImg{
	width: 45%;
}

.service-listTxt{
	width: 50%;
}

.service-listTxt h3{
	font-weight: 700;
	font-size: clamp(16px,2.4rem,28px);
	line-height: 160%;
	letter-spacing: normal;
	padding-bottom: 2rem;
}

.case-list{
	column-gap: 1.5rem;
	row-gap: 3rem;
}

.case-listItem{
	width: calc((100% - (1.5rem * 2)) / 3);
	background-color: var(--bg02);
	border-radius: 20px;
}

.case-listItem a{
	display: block;
	padding: 2rem 2rem 3rem;
}

.case-listImg{
	border-radius: 10px;
}

.case-listImg .img{
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 10px;
	padding-top: 51%;
}

.case-listTxt{
	padding-top: 2rem;
}

.client{
	font-weight: 600;
	font-size: clamp(12px,1.4rem,14px);
	line-height: 160%;
	letter-spacing: normal;
	color: #C0C0C0;
	padding-bottom: 0.6rem;
}

.case-listTxt h3{
	font-weight: 600;
	font-size: clamp(12px,1.8rem,20px);
	line-height: 160%;
	letter-spacing: normal;
}

.case-taglist{
	padding-top: 2rem;
	column-gap: .4rem;
}

.case-taglistItem{
	display: inline-block;
	color: var(--primary);
	border: solid 1px var(--primary);
	padding: .4rem 1rem;
	border-radius: 100px;
	letter-spacing: normal;
	line-height: 160%;
	font-weight: 600;
	font-size: clamp(12px,1.2rem,12px);
}

.section-company{
	background-color: var(--bg02);
	border-radius: 20px 20px 0 0;
}

.info-contents{
	width: 88.88%;
	margin: 0 auto;
}

.info-defList{
	padding: 2.4rem 0;
	border-bottom: 1px solid #D9D9D9;
}

.info-defList:first-of-type{
	padding-top: 0;
}

.info-defTitle{
	font-size: clamp(12px,1.4rem,14px);
	font-weight: 600;
	width: 22rem;
	flex: 0 0 22rem;
}

.info-defDesc{
	flex: 1 1 auto;
	font-size: clamp(12px,1.4rem,14px);
}

.info-defDesc a{
	display: block;
	text-decoration: underline;
}

.section-recruit{
	padding: 6rem 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/top/recruit.png);
}

.recruitCont{
	width: 32%;
	margin-left: auto;
	padding: 8rem 4rem;
	background-color: var(--bg02);
	border-radius: 20px;
}

.recruitCont>p{
	font-weight: 600;
	font-size: clamp(12px,1.4rem,16px);
	padding: 3rem 0 0;
}

/* ---------------------------------------
* RECRUIT
------------------------------------------ */

.section-mess{
	padding: 14rem 0 10rem;
	background-color: var(--bg01);
	position: relative;
	overflow: hidden;
}

.messbg{
	position: absolute;
	left: 0;
	top: 24rem;
	width: 52%;
	mix-blend-mode: multiply;
}

.messWrap{
	position: relative;
	z-index: 2;
}

.mess-l{
	width: 50%;
	padding-left: 6rem;
}

.mess-r{
	padding-top: 4rem;
	width: 43.75%;
}

.mess-r p{
	font-weight: 700;
}

.mess-r p:not(:last-of-type){
	padding-bottom: 3rem;
}

.messSlide{
	position: relative;
	z-index: 2;
	width: calc((246.8rem + 4rem)*3) ;
}

.messSlideimg{
	width: 246.8rem;
}

.jobWrap{
	margin-top: 4rem;
	background-color: var(--bg02);
	padding: 4rem 6rem;
	border-radius: 20px;
}

.job-defList:not(:last-of-type){
	margin-bottom: 2.4rem;
	padding-bottom: 2.4rem;
	border-bottom: solid 1px #DFDFDF;
}

.job-defTtl{
	width: 18rem;
	flex: 0 0 18rem;
	line-height: 160%;
	font-weight: 400;
	font-size: clamp(12px,1.4rem,14px);
}

.job-defDesc{
	flex: 1 1 auto;
	line-height: 160%;
	font-size: clamp(12px,1.4rem,14px);
}

.entryBtn a{
	background-color: var(--primary);
	border: solid 2px var(--primary);
	padding: 6rem;
	border-radius: 10px;
	transition: all .3s;
}

.entryBtn a:hover{
	background-color: #fff;
}

.entryBtnTtl p{
	display: inline-block;
	padding-left: 1.6rem;
	margin-bottom: 1rem;
	line-height: 100%;
	color: var(--primary);
	position: relative;
	transition: all .3s;
	color: #fff;
	font-weight: 700;
}

.entryBtnTtl p::before{
	content: "";
	display: block;
	width: .8rem;
	height: .8rem;
	background-color: #fff;
	position: absolute;
	border-radius: 100px;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: all .3s;
}

.entryBtnTtl h3{
	font-size: clamp(24px, 4.8rem , 56px);
	line-height: 100%;
	font-weight: 700;
	color: #fff;
	transition: all .3s;
}

.entryBtn a:hover .entryBtnTtl p,.entryBtn a:hover .entryBtnTtl h3{
	color: var(--primary);
}

.entryBtn a:hover .entryBtnTtl p::before{
	background-color: var(--primary);
}

.entryArrow{
	width: 6rem;
	height: 6rem;
	position: relative;
}

.entryArrow svg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.entryBtn a rect,.entryBtn a path{
	transition: all .3s;
}

.entryBtn a:hover rect{
	fill: var(--primary);
}

.entryBtn a:hover path{
	stroke: #fff;
}

.faq-r{
	width: 70.3%;
}

.faq-defList{
	padding: 2rem;
	background-color: #F8F8F8;
}

.faq-defList:not(:last-of-type){
	margin-bottom: 2rem;
}

.faq-defTtl{
	position: relative;
	cursor: pointer;
}

.faq-defTtlWrap p{
	font-weight: 400;
	line-height: 160%;
	letter-spacing: normal;
}

.faq-defTtlWrap p:last-of-type{
	padding-left: 1.6rem;
}

.faqIcon{
	transition: all .3s;
	width: 1.6rem;
	height: 1.6rem;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.faq-defTtl.open .faqIcon{
		transform: translateY(-50%) rotate(135deg);
}

.faqIcon svg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.faq-defDesc{
	display: none;
	margin-top: 2rem;
	padding: 2rem 0 1rem;
	border-top: solid 1px #EDEDED;
}

.faq-defDesc p{
	line-height: 160%;
	letter-spacing: normal;
	display: inline-block;
	vertical-align: text-top;
}

.faq-defDesc p:last-of-type{
	padding-left: 1.6rem;
	font-size: clamp(14px,1.4rem ,14px);
}





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

	/* ---------------------------------------
	* common
	------------------------------------------ */

	.btn.sp{
		display: flex;
	}

	.btn.pc{
		display: none;
	}

	.btn{
		margin: 0 auto;
	}

	.nav-other02{
		padding-right: 10px;
	}

	.nav-other02 li a{
		display: block;
		font-size: 12px;
	}

	.bar{
		height: 3vw;
	}

	/* ---------------------------------------
	* TOP
	------------------------------------------ */

	.mv{
		padding: 10rem 0 8rem;
	}

	.mvBg{
		width: 100%;
		position: absolute;
		left: 0;
		top: 2rem;
	}

	.mvImg{
		width: 60%;
	}

	.mvtxtWrap{
		margin-top: -3rem;
	}

	.mvTxt{
		text-align: center;
		padding-bottom: 1rem;
	}

	.mvTxt p{
		font-size: 1.4rem;
	}

	.mvTxt p:first-of-type{
		font-size: 1.8rem;
	}

	.mvtxtWrap>p{
		text-align: center;
		font-size: 1.8rem;
		line-height: 160%;
		letter-spacing: normal;
		padding-top: .4rem;
		font-weight: 700;
	}

	.section-about{
		padding-top: 4rem;
	}

	.aboutBg{
		width: 100%;
	}

	.aboutTxten{
		right: 2rem;
		top: 3rem;
	}

	.aboutTxten p{
		font-size: 9.6rem;
	}

	.about-l{
		padding-left: 0;
	}

	.about-l h2{
		writing-mode: unset;
	}

	.about-l h2 p{
		font-size: 2.4rem;
	}

	.about-l h2 p:first-of-type{
		padding-left: 0;
	}

	.about-r{
		width: 100%;
		padding-top: 3rem;
	}

	.about-r p{
		font-weight: 700;
	}

	.about-r p:not(:last-of-type){
		padding-bottom: 2rem;
	}

	.servicebg{
		position: absolute;
		right: 0;
		top: 2rem;
		width: 63%;
		mix-blend-mode: multiply;
	}

	.serviceTxt p{
		padding-top: 2rem;
	}

	.service-listItem{
		padding: 3rem ;
		border-radius: 10px;
	}

	.service-listNum{
		text-align: center;
		width: 100%;
		padding-bottom: 2rem;
	}

	.service-listNum p:first-of-type{
		font-size: 1.2rem;
	}

	.service-listNum p:last-of-type{
		font-size: 1.6rem;
	}

	.service-listImg{
		width: 100%;
	}

	.service-listTxt{
		width: 100%;
		padding-top: 2rem;
	}

	.service-listTxt h3{
		font-size: 2rem;
		padding-bottom: 2rem;
	}

	.case-listItem{
		width: 100%;
		border-radius: 10px;
	}


	.case-listImg .img{
		padding-top: 65%;
	}


	.client{
		font-size: 1.2rem;
	}

	.case-listTxt h3{
		font-size: 1.8rem;
	}

	.case-taglistItem{
		font-size: 1.2rem;
	}

	.info-contents{
		width: 100%;
	}

	.info-defList{
		padding: 2rem 0;
	}

	.info-defTitle{
		font-size: 1.4rem;
		width: 100%;
	}

	.info-defDesc{
		padding-top: 1rem;
		font-size: 1.4rem;
	}

	.section-recruit{
		padding: 8rem 0;
		background-position: center;
	}

	.recruitCont{
		text-align: center;
		width: 100%;
		padding: 4rem 4rem;
		background-color: var(--bg02);
		border-radius: 20px;
	}

	.recruitCont>p{
		font-weight: 600;
		font-size: clamp(12px,1.4rem,16px);
		padding: 3rem 0 0;
	}

	/* ---------------------------------------
	* RECRUIT
	------------------------------------------ */

	.section-mess{
		padding: 8rem 0 4rem;
	}

	.messbg{
		position: absolute;
		left: 0;
		top: unset;
		width: 100%;
		bottom: 0;
	}


	.mess-l{
		width: 100%;
		padding-left: 0;
	}

	.mess-r{
		padding-top: 3rem;
		width: 100%;
	}

	.mess-r p:not(:last-of-type){
		padding-bottom: 2rem;
	}

	.messSlide{
		width: calc((132rem + 2rem)*3) ;
	}

	.messSlideimg{
		width: 132rem;
	}

	.jobWrap{
		margin-top: 4rem;
		padding: 4rem 3rem;
		border-radius: 10px;
	}

	.job-defList:not(:last-of-type){
		margin-bottom: 2rem;
		padding-bottom: 2rem;
	}

	.job-defTtl{
		width: 100%;
		font-size: 1.4rem;
	}

	.job-defDesc{
		padding-top: 1rem;
		font-size: 1.4rem;
	}

	.entryBtn a{
		text-align: center;
		padding: 4rem 3rem;
	}

	.entryBtnTtl p{
		padding-left: 1.4rem;
	}

	.entryBtnTtl p::before{
		width: .6rem;
		height: .6rem;
	}

	.entryBtnTtl h3{
		font-size: 3.6rem;
	}

	.entryArrow{
		margin: 3rem auto 0;
		width: 4.8rem;
		height: 4.8rem;
	}

.faq-r{
	width: 100%;
	padding-top: 4rem;
}

.faq-defList{
	padding: 2rem;
}

.faq-defTtlWrap{
	width: 90%;
	align-items: flex-start;
}

.faq-defList:not(:last-of-type){
	margin-bottom: 1.4rem;
}

.faq-defTtlWrap p:last-of-type{
	padding-left: 1rem;
}

.faq-defDesc{
	margin-top: 2rem;
	padding: 2rem 0 1rem;
}


.faq-defDesc p:last-of-type{
	width: 95%;
	padding-left: 1rem;
	font-size: 1.2rem;
}

	

}

.cvArea{
	position: relative;
	background-color: var(--primary);
	overflow: hidden;
}

.cvbg{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 51%;
	mix-blend-mode: multiply;
}

.cvArea a{
	position: relative;
	z-index: 2;
	padding: 12rem 6rem;
}

.cv-l>p{
	font-weight: 600;
	padding-top: 1rem;
	font-size: clamp(12px,1.4rem,16px);
}

.cv-r{
	width: 6rem;
	height: 6rem;
	position: relative;
	transform: translateX(-2rem);
	transition: all .3s;
}

.cvArea a:hover .cv-r{
	transform: translateX(0);
}

.cv-r svg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}


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

.cvArea{
	position: relative;
	background-color: var(--primary);
	overflow: hidden;
}

.cvbg{
	width: 100%;
}

.cvArea a{
	position: relative;
	z-index: 2;
	padding: 8rem 6rem 6rem;
}

.cv-l{
	text-align: center;
}

.cv-l>p{
	display: inline-block;
	font-size: 1.4rem;
}

.cv-r{
	margin: 4rem auto;
	width: 6rem;
	height: 6rem;
	transform: translateX(-0);
}

.cvArea a:hover .cv-r{
	transform: translateX(0);
}

.cv-r svg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

	
	
}