/*20250710*/
#recruitview{
    background:url(../../recruit/images/img.jpg) center top no-repeat;
    min-height:500px;
    margin-bottom:50px;
    max-width:1000px;
    margin-right:auto;
    margin-left:auto;
    margin-top:30px;
    position: relative;
    overflow: hidden; /* 疑似要素がはみ出さないように */
    animation: fadeIn 3s ease-out forwards;
}

#recruitview > * {
    position: relative;
    z-index: 2;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(0px); 
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
#recruitview .title_cc{
    padding-top:280px;
    margin-bottom:30px;
}
#recruitview .title_cc .txtblock{
    color:#fff;
    display:block;
    position:relative;
    font-size:36px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight:500;
    margin-left:15px;
    letter-spacing: 0.08em;
    margin-bottom:15px;
}
#recruitview .title_cc .txtblock.custom1{
    width:630px;
    overflow:hidden;
}
#recruitview .title_cc .txtblock.custom2{
    width:500px;
    overflow:hidden;
}
#recruitview .title_cc .custom1 .bar1{
    display:inline-block;
    background:#fff;
    height:100%;
    width:0px;
    position:absolute;
    left:0px;
    top:2px;
    z-index:100;
    transition: all 0.8s cubic-bezier(0.95, 0.05, 0.795, 0.035);
    animation:slidemove 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.3s forwards;
}
#recruitview .title_cc .custom1 .bar1.active{
    left:630px;
}
#recruitview .title_cc .custom2 .bar1.active{
    left:500px;
}
#recruitview .title_cc .custom1 .bar2{
    background:#0e2d7e;
    height:100%;
    width:630px;
    position:absolute;
    left:0px;
    top:2px;
    z-index:0;
    opacity:0;
    transition: all 0.8s cubic-bezier(0.95, 0.05, 0.795, 0.035);
    animation:viewon 0s ease-out 1s forwards;
}

#recruitview .title_cc .custom2 .bar2{
    background:#0e2d7e;
    height:100%;
   width:490px;
    position:absolute;
    left:0px;
    top:2px;
    z-index:0;
    opacity:0;
    transition: all 0.8s cubic-bezier(0.95, 0.05, 0.795, 0.035);
    animation:viewon 0s ease-out 1.6s forwards;
}
#recruitview .title_cc .custom1 .bar2.active,
#recruitview .title_cc .custom2 .bar2.active{
    left:12px;
    transition: all 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
}
#recruitview .title_cc .custom1 .txt.active,
#recruitview .title_cc .custom2 .txt.active{
    left:10px;
    transition: all 1.5s ease;
}
#recruitview .title_cc .custom2 .bar1{
    display:inline-block;
    background:#fff;
    height:100%;
    width:0px;
    position:absolute;
    left:0px;
    top:2px;
    z-index:100;
    transition: all 0.8s cubic-bezier(0.95, 0.05, 0.795, 0.035);
    animation:slidemove2 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1s forwards;
}
#recruitview .title_cc .custom1 .txt{
    position:relative;
    color:#fff;
    padding-left:18px;
    padding-right:18px;
    opacity:0;
    left:0px;
    line-height:1.2;
    animation:viewon 0s ease-out 1s forwards;
}
#recruitview .title_cc .custom2 .txt{
    position:relative;
    color:#fff;
    padding-left:18px;
    padding-right:18px;
    opacity:0;
    left:0px;
    line-height:1.2;
    animation:viewon 0s ease-out 1.6s forwards;
}
@keyframes viewon {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes slidemove {
  0% {
    width:0%;
  }
  100% {
   width:630px;
  }
}
@keyframes slidemove2 {
  0% {
    width:0%;
  }
  100% {
   width:490px;
  }
}

#recruitview .txtarea.slideleft{
	display:block;
	opacity:0;
	
}
#recruitview .txtarea.slideleft.active{
	animation:slideonl 1s ease-out 0s forwards;
}
@keyframes slideonl {
  form {
    transform:translateX(0px);
	 opacity: 0;
  }
  to {
   transform:translateX(20px);
   opacity:1;
  }
}

#recruitlist{
	margin-bottom:80px;
    max-width:1000px;
    margin-right:auto;
    margin-left:auto;
}
.recruitlist_inner .title{
	background:#ebf4ff;
	display:flex;
	align-items:center;
	margin-bottom:8px;
}
.recruitlist_inner .title h4{
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Osaka", "MS Pゴシック", "MS PGothic", "MSゴシック", Arial, Helvetica, sans-serif;
	font-size:20px;	
	font-weight:700;
	width:76%;
	color:#233E85;
	box-sizing:border-box;
	padding:14px 0 14px 14px;
}
.recruitlist_inner .title .btn-next{
	width:24%;
	box-sizing:border-box;
	padding-right:14px;
}
.recruitlist_inner .title .btn-next a{
	display:block;
	color:#fff;
    font-weight:500;
	background:#0e2d7e;
	padding:10px 10px 10px 10px;
	text-align:center;
	transition: all 0.3s ease;
}
.recruitlist_inner .title .btn-next a:hover{
	background:#071a5e;
	text-decoration:none;
}
.recruitlist_inner table{
	border-collapse: collapse;
	border-left:solid 1px #ccc;
	border-top:solid 1px #ccc;
	margin-bottom:40px;
}
.recruitlist_inner table th,
.recruitlist_inner table td{
	border-right:solid 1px #ccc;
	border-bottom:solid 1px #ccc;
	padding:14px;
}
.recruitlist_inner table th{
	width:25%;
	background:#f9f9f9;
}
.recruitlist_inner:last-child table{
	margin-bottom:0px;
}
.fadeElement{
	opacity:0;
	transform:translateY(0px);
	transform:scale(1.2);
}
.fadeElement.on{
	animation:fadeElement 2s ease-out 0s forwards;
}
#recruitdetail .imgtitle{
	margin-bottom:10px;
	display:block;
	width:980px;
	overflow:hidden;
	height:408px;
}
#recruitdetail ul.pankuzu{
	display:flex;
	margin-bottom:30px;
}
#recruitdetail ul.pankuzu li{
	padding-right:10px;
}
#recruitdetail ul.pankuzu li::after{
	content:"›";
	margin-left:10px;

}
#recruitdetail ul.pankuzu li:last-child::after{
	content:"";
}

@keyframes fadeElement{
	form{
		transform:translateY(0px);
	 	opacity: 0;
		transform:scale(1.3);
	}
	to{
		transform:translateY(0px);
	 	opacity: 1;
		transform:scale(1);
	}
}
.moveElement{
	opacity:0;
	transform:translateX(-30px);
	position:relative;
}
.moveElement.on{
	animation:moveElement 0.5s ease-out 0s forwards;
}
@keyframes moveElement{
	form{
		transform:translateX(-30px);
	 	opacity: 0;
	}
	to{
		transform:translateX(0px);
	 	opacity: 1;
	}
}
.back_btn{
	margin:0px auto 30px auto;
	display:block;
	width:260px;
	border:solid 1px #0e2d7e;
	margin-top:30px;
}
.back_btn a{
	padding:10px;
	color:#0e2d7e;
	text-align:center;
	display:block;
	font-weight:700;
	font-size:16px;
	transition:all 0.3s ease;
}
.back_btn a:hover{
	text-decoration:none;
	background:#0e2d7e;
	color:#fff;
}




#recruitdetail .hyoline dl{
	overflow:hidden;
	border-bottom:solid 1px #ccc;
}
#recruitdetail .hyoline dt{
	float:left;
	width:200px;
	vertical-align:top;
	font-weight:700;
}
#recruitdetail .hyoline dd{
	margin:0 0 0 200px;
}
#recruitdetail .hyoline dt a,
#main .hyoline dt a{
	color:#0E2D7E;
}

#recruitdetail .hyoline dt,#recruitdetail .hyoline dd{
	padding:20px 0 20px 0;
	line-height:1.6;
}
#recruitdetail p.bm10{
    margin:0 0 10px 0;
    color:var(--text-black);
}
@media screen and (max-width:768px){
    #recruitview{
        background:url(../../recruit/images/img.jpg) center top no-repeat;
        background-size:auto 300px;
        min-height:300px;
        margin-bottom:50px;
        margin-top:0px;
    }
    #recruitlist{
        margin-bottom:40px;
    }
    #recruitview .title_cc{
        padding-top:200px;
        margin-bottom:10px;
    }
    #recruitview .title_cc .txtblock{
        font-size:5.6vw;
        display:inline-block;
        margin-bottom:0px;
    }
    #recruitview .title_cc .txtblock.custom1{
        width:auto;
    }
    #recruitview .title_cc .txtblock.custom2{
        width:auto;
    }

    #recruitview .title_cc .txtblock{
        margin-left:-12px;
        margin-bottom:3px;
    }
    #recruitview .txtarea{
        padding-right:40px;
        font-size: var(--spfontsize);
    }
    .recruitlist_inner .title h4{
        font-size:16px;	
        width:65%;
    }
    .recruitlist_inner .title .btn-next{
        padding-right:0px;
        width:35%;
    }
    .recruitlist_inner .title .btn-next a{
        font-size:13px;
    }
    #recruitdetail .hyoline dl,
    .recruitlist_inner table{
        font-size: var(--spfontsize);
    }
    #recruitdetail .hyoline dt{
        width:120px;
    }
    #recruitdetail .hyoline dd{
        margin:0 0 0 120px;
    }
    .back_btn a{
        font-size: var(--spfontsize);
    }
}