@charset "utf-8";



/*////////////////////////////////////
TOP
////////////////////////////////////*/

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

#main_scction{
	position: relative;
	width:100%;
	height: 100vh;
	}

#top_slideimg{
	position: relative;
	padding-top: 50px;
	width: 100%; 
	height:100vh; 
	overflow: hidden;
	z-index: 0;
}


.top_slideimg_img {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
 	inset: 0; /*親要素内にフルサイズで配置*/
	opacity: 0; /* 初期状態で透明に */
	background-size: cover;
	animation: slideAnime 16s infinite; /* 1サイクル16秒を無限ループ */
}

/* スライド個別設定 */
.top_slideimg_img:nth-of-type(1) { 
	background-image: url("../img/top_slideimg_img1.jpg");
	animation-delay: 0s;
}


.top_slideimg_img:nth-of-type(2) {
	background-image: url("../img/top_slideimg_img2.jpg"); 
	animation-delay: 4s;
}


.top_slideimg_img:nth-of-type(3) {
	background-image: url("../img/top_slideimg_img3.jpg");
	animation-delay: 8s;
}


.top_slideimg_img:nth-of-type(4) {
	background-image: url("../img/top_slideimg_img4.jpg");
	animation-delay: 12s;
}


#top_slideimg::before{
	position: absolute;
	content: "";
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background: inherit;
	z-index: 1;
	width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(black 10%, transparent 20%),radial-gradient(black 10%, transparent 20%);
  background-size: 4px 4px;
  background-position: 0 0, 3px 3px;
}


#top_main_text{
	position:absolute;
	width:100%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
	color: #FDFDFD;
	font-size: clamp(3rem,2.5vw,5rem);
	overflow: wrap;
	font-family: serif;
	line-height: 1.8;
	letter-spacing: 0.06em;
}

.pbr{
	display: none;
}


.about_btn{
	position: absolute;
	width:100%;
	bottom: 50px;
	padding-left:3%;
}


.btn_sp{
	display: none;
}

}

/*タイミング設定*/
@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; } /* 非表示のタイミング */
	10%, 20% { opacity: 1; } /* 表示されるタイミング */
}





/*////////////////////////////////////
career
////////////////////////////////////*/

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

#l_section_career{
	position: relative;
	width: 100%;
}



#bg_color_center_career{
	position: relative;
	width: 100%;
	background-image: linear-gradient(90deg, #4976a1, #1f486f);
	padding: 0 50px;
}



.career{
	position: relative;
	width:90%;
	margin: 0 auto;
}

.career_area{
	position: relative;
	width:100%;
	margin-bottom: 50px;
}


.c_heading03{
	position: relative;
	width:90%; 
	margin: 0 auto;
	padding-top: 100px;
	text-align: center;
}


.c_heading03 h2.main{
	font-size: 4rem;
    line-height: 1.6;
    font-weight: 400;
    margin-block:0px 0px;
	color: #fff;
}

.c_heading03 .sub{
	font-size: 2.5rem;
    line-height: 1.6;
    font-weight: 700;
    padding-botom:0px;
	color: #fff;
}

.c_heading03_text{
	position: relative;
	width:100%; 
	overflow: hidden;
	text-align: center;
}

.c_heading03_text_area{
	font-size:3rem;
	color:#fff;
}



.skill_career_list{
	position: relative;
	width:100%;
	margin-bottom: 50px;
}



.skill_career_list_iconbox{
	position: relative;
	border:8px solid #fff;
	background: #fff;
	border-radius: 10px;
	margin-right: 1%;
	margin-left: 1%;
	float: left;
	width:31%;
	aspect-ratio:2/1;
}

.skill_career_list_icon{
	position: absolute;
	width:18%;
	top:-18%;
	left:50%;
	transform:translateX(-50%);
}



.skill_career_list_iconbox_area{
	position:absolute;
	width:100%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
}


.skill_career_list_iconbox_area span{
	color:rgba(38,101,167,1.00);
	font-size:clamp(1.4rem,1.5vw,1.8rem);
	font-weight: 800;
}



.skill_career_list_iconbox_area p{
	font-size:clamp(1.8rem,1.5vw,2.4rem);
	font-weiht:700;
	margin: auto;
}



#bg_color_bottom_career{
	position: relative;
	width: 100%;
	background-image: linear-gradient(90deg, #4976a1, #1f486f);
	aspect-ratio:8/1;
	clip-path: polygon(0 0%,100% 100%,100% 0);
	margin-bottom: 20px;
	margin-top:0px; 
}


}

/*////////////////////////////////////
message
////////////////////////////////////*/

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


#l_section_message{
	position: relative;
	width: 100%;
}

#l_section_message_area{
	position: relative;
	width: 80%;
	margin: 0 auto 50px auto;
}


.l_section_message_text{
	position: relative;
	width: 48%;
	margin-right:2%; 
	float:left;
}

.l_section_message_text img{
	border-radius: 20px;
}


.c_heading04{
    position: relative;
    width: 100%;
    margin-bottom:40px;
	margin-inline:auto; 
	color:#000;
	}


.c_heading04 .main{
	font-size:4.5rem;
	font-weight: 600;
	line-height: 1.6;
}


.c_heading04 .sub{
	position: relative;
	margin: 0 auto;
	font-size:2rem;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 30px;
}




.c_heading04 .text{
	font-size: 3rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom:40px;
	color: #000;
}


.btn_x{
	position: relative;
	width:80%;
	margin: 0 auto;
}


}

/*////////////////////////////////////
workstyle
////////////////////////////////////*/

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

#l_section_workstyle{
	position: relative;
	width: 100%;
}



#bg_color_top_workstyle{
	position: relative;
	width: 100%;
	/* background-image: linear-gradient(90deg, #4976a1, #1f486f);*/
	 background-image: linear-gradient(90deg, #4976a1, #1f486f);
	aspect-ratio:8/1;
	clip-path: polygon(0 0,100% 100%,0 100%);
	margin-bottom: 0;
}




#bg_color_center_workstyle{
	position: relative;
	width: 100%;
	background-image: linear-gradient(90deg, #4976a1, #1f486f);
}



#bg_color_center_area_workstyle{
	position: relative;
	width:90%;
	margin:0 auto;
	padding-bottom: 80px;
}



.workstyle{
	position: relative;
	width:100%;
	margin-bottom: 50px;
}

.c_heading02{
	position: relative;
	width:100%;
	margin-bottom: 30px;
	text-align: center;
}

.c_heading02 .main{
	font-size: clamp(2.5rem,4vw,4rem);
    line-height: 1.6;
    font-weight: 600;
	color: #fff;
}

.c_heading02 .sub{
	font-size: 2.5rem;
    line-height: 1.6;
    font-weight: 700;
    padding-botom:0px;
	color: #fff;
}

.c_heading02_text{
	position: relative;
	width:100%; 
	text-align: center;
	margin-bottom: 30px;
}

.c_heading02_text_area{
	font-size:2rem;
	color:#fff;
}


.supportlist{
	position: relative;
	width:100%;
}


.supportlist_iconbox{
	position: relative;
	border:8px solid #fff;
	background: #fff;
	border-radius: 10px;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: 4%;
	float: left;
	width:23%;
	aspect-ratio:2/1;
}

.supportlist_icon{
	position: absolute;
	width:18%;
	top:-18%;
	left:50%;
	transform:translateX(-50%);
}



.supportlist_iconbox_area{
	position:absolute;
	width:100%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
}



.supportlist_iconbox_area span{
	color:rgba(38,101,167,1.00);
	font-size:clamp(1.4rem,1.5vw,1.8rem);
	font-weight: 800;
}



.supportlist_iconbox_area p{
	font-size:clamp(1.8rem,1.5vw,2.4rem);
	font-weiht:700;
	margin: auto;
}





}

/*////////////////////////////////////
recruit
////////////////////////////////////*/

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

#l_section_recruit{
	position: relative;
	width: 100%;
	background-image:url("../img/top_recruit.png");
	background-position: center center;
	background-size: cover;
	padding: 100px 0;
	z-index: 0;
}

#l_section_recruit:before{
	content: '';
	top:0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: inherit;
	z-index: -1;
	filter: brightness(0.5);
}



#l_section_recruit_area{
	position: relative;
	width: 80%;
	margin: 0 auto;
}


#recruit_headline{
	position: relative;
	width:100%;
}



#recruit_headline h3{
	font-size:3rem;
	color: #fff;
}

.c_heading05{
    position: relative;
    width: 100%;
    margin-bottom:40px;
	margin-inline:auto; 
	color:#fff;
	}


.c_heading05 .main{
	font-size:5rem;
	font-weight: 600;
	color:#fff;
}


.c_heading05 .sub{
	font-size: 2rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom:40px;
	color: #fff;
}

.recruit_list{
	position: relative;
	width: 100%;
}




.recruit_list_area{
	position: relative;
	width:90%;
	margin: 0 auto 50px auto;
	padding:50px;
	backdrop-filter: blur(10px);
	border-top:2px solid rgba(255,255,255,0.2);
	border-left:2px solid rgba(255,255,255,0.2);
	border-right:1px solid rgba(255,255,255,0.2);
	border-bottom:1px solid rgba(255,255,255,0.2);
}


.l_section_recruit h3{
	font-size:3.5rem;
}


.top_recruit_title{
	position: relative;
	text-align: center;
	margin-bottom: 30px;
}

.top_recruit_title h4{
	font-size:3rem;
	color:#fff;
	margin: 0;

}

.recruit_list_place{
	position: relative;
	width:100%;
	text-align: center;
}

.recruit_btn{
	position: relative;
	width: 50%;
	margin-left: 0%;
	float: left;
}

.recruit_btn a{
	position: relative;
	display: inline-block;
	width:300px;
	border: 2px solid #fff;
	color: #333;
	font-size: clamp(1.4rem,2.5vw,2.0rem);
	padding: 20px 0px;
	margin:5px;
	text-decoration: none;
	font-weight: 700;
	transition: all 0.3s;
	overflow: hidden;
	z-index: 1;
	background: #fff;
}


.recruit_btn a:hover{
	color:#fff;
	 background-image: linear-gradient(90deg, #4976a1, #1f486f);
}


}



/*////////////////////////////////////
@media screen and (min-width: 0px) and (max-width: 767px)
main_scction
////////////////////////////////////*/

@media screen and (min-width: 0px) and (max-width: 767px){

#main_scction{
	position: relative;
	width:100%;
	height: 500px;
	}

#top_slideimg{
	position: relative;
	padding-top: 60px;
	width: 100%; 
	height:100%; 
	overflow: hidden;
	z-index: 0;
}


.top_slideimg_img {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
 	inset: 0; /*親要素内にフルサイズで配置*/
	opacity: 0; /* 初期状態で透明に */
	animation: slideAnime 16s infinite; /* 1サイクル15秒を無限ループ */
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;  
}


/* スライド個別設定 */
.top_slideimg_img:nth-of-type(1) { 
	background-image: url("../img/top_slideimg_img1.jpg");
	animation-delay: 0s;
}


.top_slideimg_img:nth-of-type(2) {
	background-image: url("../img/top_slideimg_img2.jpg"); 
	animation-delay: 4s;
}


.top_slideimg_img:nth-of-type(3) {
	background-image: url("../img/top_slideimg_img3.jpg");
	animation-delay: 8s;
}


.top_slideimg_img:nth-of-type(4) {
	background-image: url("../img/top_slideimg_img4.jpg");
	animation-delay: 12s;
}


#top_slideimg::before{
	position: absolute;
	content: "";
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background: inherit;
	z-index: 1;
	width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(black 10%, transparent 20%),radial-gradient(black 10%, transparent 20%);
  background-size: 4px 4px;
  background-position: 0 0, 3px 3px;
}




#top_main_text{
	position:absolute;
	width:90%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
	color: #FDFDFD;
	font-size:3rem;
	overflow: wrap;
	font-family: serif;
}


.about_btn{
	position: relative;
	width:90%;
	margin: -115px auto 0 auto;
	text-align: center;
}


.btn_pc{
	display:none;
}
	

}

/*タイミング設定*/
@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; } /* 非表示のタイミング */
	10%, 20% { opacity: 1; } /* 表示されるタイミング */
}





/*////////////////////////////////////
@media screen and (min-width: 0px) and (max-width: 767px)
career
////////////////////////////////////*/

@media screen and (min-width: 0px) and (max-width: 767px){


#l_section_career{
	position: relative;
	width: 100%;
}



#bg_color_center_career{
	position: relative;
	width: 100%;
	background-image: linear-gradient(90deg, #4976a1, #1f486f);
	padding: 50px 0;
}



.career{
	position: relative;
	width:90%;
	margin: 0 auto;
}

.career_area{
	position: relative;
	width:100%;
	margin-bottom: 30px;
}


.c_heading03{
	position: relative;
	width:90%; 
	margin: 0 auto;
	text-align: center;
}

.c_heading03 h2.main{
	font-size: 2.7rem;
    line-height: 1.6;
    font-weight: 600;
	color: #fff;
}

.c_heading03 .sub{
	font-size: 2.3rem;
    line-height: 1.6;
    font-weight: 700;
	color: #fff;
}

.c_heading03_text{
	position: relative;
	width:100%; 
	overflow: hidden;
	text-align: center;
}

.c_heading03_text_area{
	font-size:1.8rem;
	font-weight: 600;
	color:#fff;
}



.skill_career_list{
	position: relative;
	width:100%;
	margin-bottom: 50px;
}



.skill_career_list_iconbox{
	position: relative;
	border:5px solid #fff;
	background: #fff;
	border-radius: 10px;
	margin-bottom: 50px;
	float: left;
	width:100%;
	height: 130px;
	aspect-ratio:2/1;
}

.skill_career_list_icon{
	position: absolute;
	width:15%;
	top:-35%;
	left:50%;
	transform:translateX(-50%);
}



.skill_career_list_iconbox_area{
	position:absolute;
	width:100%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
}


.skill_career_list_iconbox_area span{
	color:rgba(4,3,154,1.0);
	font-size:1.4rem;
	font-weight: 800;
}



.skill_career_list_iconbox_area p{
	font-size:1.8rem;
	font-weiht:800;
	margin: auto;
}



#bg_color_bottom_career{
	position: relative;
	width: 100%;
	background-image: linear-gradient(90deg, #3F72A3, #1f486f);
	aspect-ratio:8/1;
	clip-path: polygon(0 0%,100% 100%,100% 0);
	margin-bottom: 10px;
	margin-top:0px; 
}


.pt{
	display: none;
}


}


/*////////////////////////////////////
@media screen and (min-width: 0px) and (max-width: 767px)
message
////////////////////////////////////*/

@media screen and (min-width: 0px) and (max-width: 767px){


#l_section_message{
	position: relative;
	width: 100%;
	padding: 40px 0 50px 0;
}

#l_section_message_area{
	position: relative;
	width: 80%;
	margin: 0 auto 50px auto;
}


.l_section_message_text{
	position: relative;
	width: 100%;

}

.l_section_message_text img{
	border-radius: 20px;
}


.c_heading04{
    position: relative;
    width: 100%;
    margin-bottom:40px;
	margin-inline:auto; 
	color:#000;
	}


.c_heading04 .main{
	font-size:4rem;
	font-weight: 600;
	margin-bottom: 20px;
}


.c_heading04 .sub{
	font-size: 2rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom:40px;
	color: #000;
}

.c_heading04 .text{
	font-size: 2rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom:40px;
	color: #000;
}

.btn_x{
	position: relative;
	width:90%;
	margin: 0 auto;
	text-align: center;
}


}


/*////////////////////////////////////
@media screen and (min-width: 0px) and (max-width: 767px)
workstyle
////////////////////////////////////*/

@media screen and (min-width: 0px) and (max-width: 767px){

#l_section_workstyle{
	position: relative;
	width: 100%;
}



#bg_color_top_workstyle{
	position: relative;
	width: 100%;
	background-image: linear-gradient(90deg, #4976a1, #1f486f);
	aspect-ratio:8/1;
	clip-path: polygon(0 0,100% 100%,0 100%);
	margin-bottom: 0;
}




#bg_color_center_workstyle{
	position: relative;
	width: 100%;
	background-image: linear-gradient(90deg, #4976a1, #1f486f);
}



#bg_color_center_area_workstyle{
	position: relative;
	width:90%;
	margin:0 auto;
	padding: 50px 0;
}



#workstyle{
	position: relative;
	width:100%;
	margin-bottom:50px;
}

.c_heading02{
	position: relative;
	width:100%;
	margin-bottom: 30px;
	text-align: center;
}

.c_heading02 .main{
	font-size: 3rem;
    line-height: 1.6;
    font-weight: 400;
	color: #fff;
}

.c_heading02 .sub{
	font-size: 2rem;
    line-height: 1.6;
    font-weight: 700;
    padding-botom:0px;
	color: #fff;
}

.c_heading02_text{
	position: relative;
	width:100%; 
	text-align: center;
	margin-bottom: 30px;
}

.c_heading02_text_area{
	font-size:2rem;
	color:#fff;
}


.supportlist{
	position: relative;
	width:100%;
}


.supportlist_iconbox{
	position: relative;
	border:8px solid #fff;
	background: #fff;
	border-radius: 10px;
	margin-bottom: 50px;
	width:100%;
	height: 130px;
	aspect-ratio:2/1;
}

.supportlist_icon{
	position: absolute;
	width:15%;
	top:-35%;
	left:50%;
	transform:translateX(-50%);
}



.supportlist_iconbox_area{
	position:absolute;
	width:100%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
}



.supportlist_iconbox_area span{
	color:rgba(4,3,154,1.0);
	font-size:1.4rem;
	font-weight: 800;
}



.supportlist_iconbox_area p{
	font-size:1.8rem;
	font-weiht:700;
	margin: auto;
}





}


/*////////////////////////////////////
@media screen and (min-width: 0px) and (max-width: 767px)
recruit
////////////////////////////////////*/

@media screen and (min-width: 0px) and (max-width: 767px){

#l_section_recruit{
	position: relative;
	width: 100%;
	background-image:url("../img/top_recruit.png");
	background-position: center center;
	background-size: cover;
	padding: 100px 0;
	z-index: 0;
}

#l_section_recruit:before{
	content: '';
	top:0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: inherit;
	z-index: -1;
	filter: brightness(0.5);
}



#l_section_recruit_area{
	position: relative;
	width: 90%;
	margin: 0 auto;
}


#recruit_headline{
	position: relative;
	width:100%;
}





.c_heading05{
    position: relative;
    width: 100%;
    margin-bottom:40px;
	margin-inline:auto; 
	color:#fff;
	}


.c_heading05 .main{
	font-size:4rem;
	font-weight: 600;
	color:#fff;
}


.c_heading05 .sub{
	font-size: 2rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom:40px;
	color: #fff;
}



.recruit_list{
	position: relative;
	width: 100%;
}



.recruit_list_area{
	position: relative;
	width:100%;
	margin: 0 auto 50px auto;
	padding:50px;
	backdrop-filter: blur(10px);
	border-top:2px solid rgba(255,255,255,0.2);
	border-left:2px solid rgba(255,255,255,0.2);
	border-right:1px solid rgba(255,255,255,0.2);
	border-bottom:1px solid rgba(255,255,255,0.2);
}




.top_recruit_title{
	position: relative;
	text-align: center;
	margin-bottom: 30px;
}

.top_recruit_title h4{
	font-size:3rem;
	color:#fff;
	margin: 0;

}

.recruit_list_place{
	position: relative;
	width:100%;
	text-align: center;
}

.recruit_btn{
	position: relative;
	width: 85%;
	margin: 0 auto;
}


.recruit_btn a{
	position: relative;
	display: inline-block;
	width:100%;
	border: 2px solid #fff;
	color: #333;
	font-size: 1.8rem;
	padding: 20px 0px;
	margin:5px;
	text-decoration: none;
	font-weight: 700;
	transition: all 0.3s;
	overflow: hidden;
	z-index: 1;
	background: #fff;
}


.recruit_btn a:hover{
	color:#fff;
	 background-image: linear-gradient(90deg, #4976a1, #1f486f);
}


}