@charset "UTF-8";
/*
Theme Name: hyteclab
Description: hyteclab
Version: xxx
Author: xxx
*/



.header-navi__list-container {
	margin-right: 16px;
}
.header-navi {
    gap: 12px;
}
.header-navi__list {
	gap:0 24px;
}
.header-navi-button.to_mov {
	color:#FFF;
	background:var(--color-purple-secondary);
	padding:0 16px;
	position:relative;
}
.header-navi-button.to_mov .label_new {
	width:52px;
	height:20px;
	display:block;
	text-align:center;
	background:var(--color-yellow-primary);
	color:#FFF;
	font-size:1.4rem;
	border-radius:20px;
	position:absolute;
	top:-10px;
	right:20px;
}
.header-navi-button__icon.icon_mov {
	background: url("images/icon_nav_link_right.svg") no-repeat center / cover;
}

.recruiting_member {
	width:fit-content;
	padding:35px 30px;
	background:rgba(255,255,255,0.65) url("images/bg_recruiting-member.png") no-repeat left center / contain;
	border-radius:16px;
	position:absolute;
	bottom:-80px;
	right:0;
	z-index:7;
	box-shadow: rgba(200, 182, 227, 0.6) 0 10px 24px 4px;
}
.recruiting_member p {
	color:var(--color-purple-secondary);
	font-size:3rem;
	font-weight:700;
	letter-spacing:0.02em;
	line-height:1.64;
}
.recruiting_member p span {
	font-size:1.5rem;
	font-weight:500;
	display:block;
	letter-spacing:0;
}
.recruiting_member a {
	display:block;
	width:165px;
	height:48px;
	line-height:45px;
	font-weight:500;
	text-align:center;
	color:#FFF;
	background:rgba(246, 171, 0, 1) url("images/icon_arrow_right.svg") no-repeat right 15px center / 12px;
	font-size:1.8rem;
	padding-right:5px;
	position:absolute;
	bottom:30px;
	right:-5px;
}
.recruiting_member #closeButton {
  position: absolute;
  top: -6px;
  right: -6px;
  cursor: pointer;
	background:none;
}

.section-service-lineup {
	padding-bottom:32px;	
}
.service-lineup__ttl {
	width:fit-content;
	height:145px;
	padding:0 50px 0 160px;
	border-radius:24px;
	font-size:4.8rem;
	color:#FFF;
	font-weight:700;
	background:var(--color-purple-secondary) url("images/icon_bell_wh.png") no-repeat left 50px center / 88px;
	margin:60px 0 30px;
	display:flex;
	align-items:center;
	gap:0 32px;
}
.service-lineup__ttl span {
	font-size:3.2rem;
	display:inline-block;
}
.service-lineup__pls {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0 55px;
	margin-bottom:30px;
}
.service-lineup__pls img {
	display:block;
	width:145px;
}
.service-lineup__pls .txt {
	font-size:4rem;
	font-weight:700;
	color:var(--color-purple-secondary);
}
.service-lineup__list-container {
	padding:0;
	background:none;
	box-shadow:none;
}
.service-lineup-list {
	max-width:1080px;
	display:flex;
	flex-wrap:wrap;
	margin-bottom:20px;
}
.service-lineup-list li {
	height:78px;
	background:#FFF;
	border:solid 3px var(--color-purple-secondary);
	color:var(--color-purple-secondary);
	border-radius:16px;
	padding:0 32px;
	box-shadow: rgba(200, 182, 227, 0.6) 0 10px 24px 4px;
}
.view-detail-button__label em {
	font-size:2.4rem;
}

.schematic_diagram {
	margin-top:102px;
}

.linkto {
	display:flex;
	justify-content:center;
	align-items:center;
	background:var(--color-purple-secondary) url("images/icon_arrow_right.svg") no-repeat right 30px center / 12px;
	color:#FFF;
	font-size:2.8rem;
	font-weight:700;
	width:376px;
	height:78px;
	border-radius:100px;
	margin:60px auto 0;
}
.linkto:hover {
	filter: brightness(1.2);
	transition: 0.3s;
}
.service-introduction__title {
	background:none;
	padding:0;
	line-height:1;
}
.service-introduction__title span {
	display:inline-block;
	font-size:6.4rem;
	font-weight:700;
	color:#FFF;
    padding: 30px 30px 0 30px;
    background: var(--color-purple-secondary);
    border-radius: 16px 16px 0 0;
}
.service-introduction__title span.under {
	border-radius: 0 16px 16px 16px;
	padding: 30px;
}
.service-introduction__title span.over {
	border-radius: 16px;
	padding: 30px;
}

.faq-list__answer-text p {
	margin-bottom:1em;
}



@media screen and (max-width: 768px) {
	
	.recruiting_member {
		width: 80%;
		padding: 16px;
		bottom: 40px;
		left: 0;
		z-index: 7;
	}
	.recruiting_member p {
		font-size: 2rem;
		letter-spacing: 0;
		line-height: 1.4;
	}
	.recruiting_member p span {
		font-size: 1.3rem;
		margin-bottom: 5px;
	}
	.recruiting_member a {
		width: 100px;
		height: 32px;
		line-height: 32px;
		font-weight: 500;
		background: rgba(246, 171, 0, 1) url(images/icon_arrow_right.svg) no-repeat right 5px center / 8px;
		font-size: 1.3rem;
		padding-right: 10px;
		position: absolute;
		bottom: 10px;
		right: -5px;
	}
	.mv__large-copy {
		bottom: -82px;
	}
	
	.service-lineup__decoration-text_img {
		position:relative;
		z-index:-1;
	}
	.service-lineup__ttl {
		display:block;
		height: auto;
		padding: 20px;
		padding-left: 90px;
		font-size: 3rem;
		background: var(--color-purple-secondary) url(images/icon_bell_wh.png) no-repeat left 20px top 20px / 60px;
	}
	.service-lineup__ttl span {
    	font-size: 2.2rem;
		width:60%;
		margin-top:10px;
		display:block;
	}
	.service-lineup__pls {
		gap:0 5px;
	}
	.service-lineup__pls img {
		display:block;
		width:80px;
	}
	.service-lineup__pls .txt {
		font-size:3rem;
	}
	.service-lineup-list li {
		height:60px;
		padding:0 16px;
	}
	.schematic_diagram {
		overflow-x: scroll;
		margin-top:32px;
		padding-bottom:16px;
	}
	.schematic_diagram .scl_img {
		display:block;
		width:680px;
	}
	.view-detail-button__label em {
		font-size:2rem;
	}
	.video-guide-banner {
		width:90%;
		margin:0 auto;
	}
	.video-guide-banner__lead {
        font-size: 4rem;
    }
	.linkto {
		font-size:2.4rem;
		width:90%;
		height:72px;
		margin:0 auto;
	}
	
	.service-introduction__title span {
		display:inline-block;
		font-size:3.4rem;
		padding: 16px 16px 0 16px;
		border-radius: 16px 16px 0 0;
	}
	.service-introduction__title span.under {
			border-radius: 0 16px 16px 16px;
			padding: 16px;
		}
	.service-introduction__title span.over {
		border-radius: 16px;
		padding: 16px;
	}
	
	.service-points__visual {
		width:90%;
	}
	
	.sp-navi {
		gap:24px;
	}	
	.sp-navi_tel {
		width:fit-content;		
		margin: 0 auto;		
	}
	.sp-navi_tel a {
		color: var(--color-purple-secondary);
		font-size:1.6rem;
		font-weight:700;
		background: url(images/icon_tel.svg) no-repeat left center / 16px;
		padding-left:25px;
	}
	.sp-navi__item a {
		font-size:2rem;
		font-weight:700;
		justify-content:center;
		color: #412B5E;
		width:70%;
		margin:0 auto;
	}
	.sp-navi__item:last-of-type a {
    	border-bottom: 1px solid var(--color-lightgray-secondary);
	}
	.sp-navi__item a::after {
		content:none;
	}
	.header-navi-button__label {
		font-weight:700;
	}

}



/****** 採用情報 ******/

.section-about__bg {
	inset: 0;
}
.section-about__content-wrapper.wrapper01 {
	width:80%;
	margin: 0 auto 120px auto;
}
.section-about_info {
	background:url("images/recruit_main_img.png") no-repeat right 30px top / 40%;
	padding-top:100px;
}
.section-about__title.info_ttl {
	color: var(--color-purple-secondary);
	font-size:4rem;
	font-weight:900;
	margin-bottom:40px;
}
.about_info_txt {
	color: var(--color-purple-secondary);
	font-size:2.2rem;
	line-height:2;
	margin-bottom:1.5em;
	max-width:800px;
}
.requirements_ttl {
	text-align:center;
}
.section-about__content-list_ttl {
	font-size:3.2rem;
	font-weight:900;
	text-align:center;
	color: var(--color-purple-secondary);
	background:url("images/recruit_section-about__content-list_ttl_bg.png") no-repeat center bottom / 62px;
	padding-bottom:15px;
	margin-bottom:20px;
}
.section-about__content-description {
	line-height:2.2;
}


.section-about.flow {
	background:url("images/company_bg_about2.webp") no-repeat center top / 100%;
}
.section-about.flow .section-about__content-wrapper {
	margin-bottom:120px;
}
.section-about.flow h3 {
	margin-bottom:64px;
}
.flow_proccess_wrap {
	display:flex;
	align-items: center;
	gap:0 40px;
}
.flow_proccess_bg {
	display:block;
	width:48px;
}
.flow_proccess {
	flex:1;
}
.flow_proccess li {
	display:flex;
	background:#FFF;
	box-shadow:rgba(200, 182, 227, 0.5) 0 10px 23px ;
	height:131px;
	border-radius:16px;
	overflow: hidden;
	margin-bottom:40px;
}
.flow_proccess li:last-child {
	margin-bottom:0;
}
.flow_step {
	width:160px;
	background:rgba(197, 154, 255, 1);
	color:#FFF;
	font-size:5.6rem;
	font-weight:700;
	line-height:1.3;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
}
.flow_step span {
	font-size:2rem;
	display:block;
	letter-spacing:0.1em;
}
.flow_box {
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding-left:60px;
}
.flow_box h4 {
	font-size:3.2rem;
	font-weight:900;
	color: var(--color-purple-secondary);
	margin-bottom:5px;
}


.section-about.join_us {
	background:url("images/company_bg_about2.webp") no-repeat center top / 100%;
	padding-top:80px;
	margin-bottom:100px;
}
.section-about.join_us h3 {
	font-size:10rem;
	font-weight:900;
	font-family: "Lato", sans-serif;
	text-align:left;
	margin-bottom:24px;
}
.section-about.join_us h3 span {
	display:block;
	font-size:4.8rem;
}
.join_us .requirements_txt {
	color: var(--color-purple-secondary);
	font-weight:400;
}
.join_us .toentry {
	display:block;
	width:438px;
	margin-top:-10px;
}
.join_us .toentry:hover {
	filter:brightness(120%);
	transition:0.3s;
}
.join_us_img {
	position:absolute;
	top:0;
	right:0;
	width:50%;
	display:block;
}

.section-interview {
	background:url("images/company_bg_about2.webp") no-repeat center bottom / 100%;
	height:480px;
	margin-bottom:120px;
	position:relative;
}
.interview_info {
	width:50%;
	height:100%;
	background:var(--color-purple-secondary);
	color:#FFF;
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding-right:10%;
}
.interview_info::after {
	content:"";
	width:157px;
	height:480px;
	background:url("images/interview_bg_after.png") no-repeat center / cover;
	display:block;
	position:absolute;
	top:0;
	right:-157px;
}
.interview_info h3 {
	font-size:4.8rem;
	font-weight:900;
	font-family: "Lato", sans-serif;
	margin-bottom:24px;
}
.interview_info_txt {
	font-size:2.4rem;
	font-weight:400;
	line-height:2;
}
.client_interview {
	width:722px;
	height:215px;
	background:#FFF;
	display:flex;
	position:absolute;
	top:50%;
	left:50%;
	transform:translateY(-50%);
	border-radius:16px;
	overflow:hidden;
}
.client_interview_txt {
	width:400px;
	padding:30px 20px;
}
.client_interview_txt h4 {
	font-size:2.8rem;
	font-family: "Lato", sans-serif;
	background: url(images/recruit_section-about__content-list_ttl_bg.png) no-repeat left bottom / 62px;
	padding-bottom:10px;
	margin-bottom:8px;
	letter-spacing:0.1em;
}
.client_interview_txt .post {
	font-size:1.6rem;
}
.client_interview_txt .name {
	font-size:2.4rem;
	line-height:2;
}
.client_interview_img {
	flex:1;
}
.client_interview_img img {
	width:100%;
	object-fit:cover;
}
.client_interview .linkto {
	width:240px;
	height:55px;
	display:block;
	background:var(--color-purple-secondary) url(images/icon_arrow_right.svg) no-repeat right 10px center / 12px;
	color:#FFF;
	position:absolute;
	right:-20px;
	bottom;20px;
}

@media screen and (max-width: 768px) {
	
	.section-about_info {
		background: url(images/recruit_main_img.png) no-repeat right 20px top / 80%;
		padding-top: 68%;
	}
	
	.section-about__content-wrapper.wrapper01 {
		width: 90%;
		margin: 0 auto 80px auto;
	}
	.section-about__title.info_ttl {
		font-size: 2.8rem;
		text-align:left;
	}
	.about_info_txt {
		font-size: 1.8rem;
		max-width: 100%;
	}
	.section-about__content {
		display: block;
		flex-direction:column;
		justify-content: flex-start;
		align-items:flex-start;
		padding: 20px 0;
		border-bottom: solid 1px var(--color-lightgray-secondary);
	}
	.section-about__content-title {
		font-size:1.8rem;
		font-weight:700;
        width:100%;		
		margin-bottom:5px;
    }
	.flow_proccess_wrap {
		display: block;
	}
	.flow_proccess_bg {
		display: none;
	}
	.flow_proccess li {
		height: 120px;
	}
	.flow_step {
		width: 160px;
		font-size: 3.6rem;
	}
	.flow_box {
		padding:0 16px;
	}
	.flow_box h4 {
		font-size:2rem;
	}
	.section-about.join_us h3 {
		font-size: 5rem;
	}
	.section-about.join_us h3 span {
		font-size: 3.2rem;
	}
	.join_us_img {
		display: none;
	}
	.join_us .toentry {
		width: 80%;
		margin: 20px auto 20px;
	}
	.section-about.join_us {
		margin-bottom: 0;
		padding-top:0;
	}
	
	.section-interview {
		height:auto;
		margin-bottom:80px;
	}
	.interview_info {
		width:100%;
		height:240px;
		background:var(--color-purple-secondary);
		color:#FFF;
		position:relative;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		padding-right:10%;
	}
	.interview_info::after {
		content:none;
	}
	.interview_info h3 {
		font-size:3.2rem;
		margin-bottom:24px;
	}
	.interview_info_txt {
		font-size:2rem;
	}
	.client_interview {
		width:100%;
		height:auto;
		background:#FFF;
		display:flex;
		flex-direction:column;
		position:static;
		border-radius:0;
		transform: translateY(0%);
	}
	.client_interview_txt {
		width:100%;
		padding:30px 20px;
	}
	.client_interview_txt h4 {
		font-size:2rem;
		padding-bottom:5px;
		margin-bottom:5px;
		letter-spacing:0.1em;
	}
	
}


/****** FAQ（代表） ******/

.faq_ttl {
	width:fit-content;
	border-bottom:solid 6px var(--color-yellow-primary);
	margin: 0 auto;
	padding-bottom:5px;
	margin-bottom:60px;
}
.faq_tab {
	display:flex;
	justify-content:center;
	gap:0 80px;
	margin-bottom:60px;
}
.faq-list {
	border:solid 8px var(--color-purple-secondary);
	border-radius:32px;
	padding:48px;
	margin-bottom:120px;
}
.site-main-faq_ad .faq-list {
	border:solid 8px var(--color-yellow-primary);
}
.faq_tab li {
	font-size:4rem;
	font-weight:900;
	border-radius:16px;
	width:fit-content;
}
.faq_tab li a {
	display:block;
	width:100%;
	height:88px;
	padding:0 40px;
	display:grid;
	place-items:center;	
}
.faq_tab li:nth-child(1) {
	border: solid 5px var(--color-purple-secondary);
	color:var(--color-purple-secondary);
}
.faq_tab li:nth-child(1) a:hover,
.site-main-faq .faq_tab li:nth-child(1) {
	background: var(--color-purple-secondary);
	color:#FFF;
	transition:0.3s;
}
.faq_tab li:nth-child(2) {
	border: solid 5px var(--color-yellow-primary);
	color:var(--color-yellow-primary);
}
.faq_tab li:nth-child(2) a:hover,
.site-main-faq_ad .faq_tab li:nth-child(2){
	background: var(--color-yellow-primary);
	color:#FFF;
	transition:0.3s;
}

.faq_list {
	border:solid 8px var(--color-purple-secondary);
	border-radius:32px;
	padding:48px;
}


@media screen and (max-width: 768px) {
	
	.faq_tab {
		gap: 0 20px;
		margin-bottom: 40px;
	}
	.faq_tab li {
		font-size:1.8rem;
		border-radius:16px;
		text-align:center;
		font-weight:700;
	}
	.faq_tab li a {
		display:block;
		height:auto;
		padding: 10px 16px;
	}
	.faq_tab li:nth-child(1) {
		border: solid 3px var(--color-purple-secondary);
	}
	.faq_tab li:nth-child(2) {
		border: solid 3px var(--color-yellow-primary);
	}
	.faq-list {
		border:solid 4px var(--color-purple-secondary);
		padding:16px;
		margin-bottom:60px;
	}
	
}