.project-top.ntc { display: flex;    flex-wrap: wrap;}
.project-top.ntc>* { width: calc((100% - 60px)/3); margin: 10px; position: relative;display:block; transition: .2s;}
.project-top.ntc a:hover {opacity: .8;}
.projectItem-top div p{position: absolute; background-color: rgb(0 0 0 / 80%); color: white;width: calc(100% - 30px); bottom: 0; padding: 15px;font-weight: bold; font-size: 16px; text-align: center; transition: .2s;}
.recruit-title.top{margin-top:50px;transition: .2s;box-shadow: 0px 10px 10px rgba(0, 0, 0, .1);}
a .recruit-title.top:hover {  opacity: .8;}
.recruit-title.top:after{height:197px;}

.projectItem.JS-targetAnime { display: flex; box-shadow: 0px 10px 10px rgba(0,0,0,.1);height: auto;}
a .projectItem.JS-targetAnime:hover{ box-shadow: 0px 10px 10px rgba(0,0,0,.3);}
.projectItem figure {width: 300px;    height: auto;}
.projectItem figure img {height: 100%;object-fit: contain; width: 100%;object-fit: cover;}
.projectItem div {width: calc(100% - 300px); padding: 20px; height: auto;}
.projectBlock.ntc .projectItem h2::before{content:none;}

.project-content{display:flex;}
.project-content figure{max-width:500px; margin-right:40px;width:30%;}
.project-content p{width:70%;}
.project-content p span.annotation {display: block;margin: 10px 0;font-size: 85%;}
.relation p{width: fit-content; background: #429bbf; color: white; padding: 3px 15px;}
.relation a { color: #429bbf; font-weight: 500;}
.relation ul { display: none; list-style: none; padding: 0; margin: 0;}
.relation p {cursor: pointer; position: relative;}
.relation.visible ul { display: block; /* .visible クラスが付与されたら表示 */ }
.relation p.toggle::after {content: ""; top: 21px; position: relative; content: ""; left: 0; border: 8px solid transparent; border-top: 14px solid; margin-left: 5px;}
.relation.visible p.toggle::after { content: "";position: relative;top: -19px; left: 0;border: 8px solid transparent;border-bottom: 14px solid;margin-left: 5px;}
.relation a:hover { text-decoration: underline;}

.recruit-title h2 {font-size:38px;color: #333;font-weight: bold; background-color: white; text-align: center; padding: 20px;  width: 50%; margin: auto; position: absolute;}
.recruit-title {  position: relative; display: flex;align-items: center; justify-content: space-around;}
.recruit-title:after{ content: ""; display: block; width: 100%; height: 300px; background-image: url(/ntc/img/recruit/top-img.jpg); background-position-x: center; background-position-y: -70px;}
.recruit-memu a:hover { box-shadow: 0px 10px 10px rgba(0,0,0,.3);}
.recruit-memu { display: flex; margin: 40px 0;flex-wrap: wrap;}
.recruit-memu a { margin: 10px; box-shadow: 0px 10px 10px rgba(0,0,0,.1); width:calc((100% - 80px)/4);}
.recruit-memu div div { position: relative;}
.recruit-memu figure { position: relative;}
.recruit-memu figure:after { content: ""; width: 100%; position: absolute; top: 0; bottom: 0; height: 100%; background-color: #034f7b6e; z-index: 2; right: 0;}
.recruit-memu span { font-size: 38px; position: absolute;  top: 0; bottom: 0; right: 0; left: 0; display: flex;justify-content: space-around;  align-items: center; color: white;  z-index: 3;   font-weight: bold;  text-align: center;  font-family: "Teko", sans-serif;font-optical-sizing: auto;font-weight: 500;letter-spacing: 1.5px;}
.recruit-memu p {  padding: 10px;  font-weight: bold;  font-size: 16px;text-align: center;}
.recruit-interview {  display: flex;flex-wrap: wrap;}
.recruit-interview .item { margin: 10px; width: calc((100% - 66px)/3); border: 1px solid #dfdddc;}
.recruit-interview .text { padding: 10px 15px 15px; position: relative;}
.recruit-interview .text:before { content: "";position: absolute;left: -1px;background: #1575b5;top: 18px;width: 5px;height: 28px;}
.recruit-interview h3 { margin: 0 0 20px; padding: 5px 0 15px; font-size: 16px;font-weight: bold;line-height: 1.5; border-bottom: 1px solid #dfdddc;}
.recruit-interview p.tag { display: inline-block; font-size: 12px;}

@media (max-width: 1030px){
.recruit-memu a { margin: 5px; width: calc((100% - 20px)/2);}
.recruit-interview .item { width: calc((100% - 44px)/2);}
}
@media (max-width: 1150px){
.projectItem-top div p {   background-color: rgb(0 0 0 / 50%);top:0;display: flex; justify-content: space-around; align-items: center;}
}
@media (max-width: 767px){
.project-top.ntc>* { width: calc((100% - 40px)/2);}
.projectItem figre {width: 150px}
.projectItem div {width: calc(100% - 150px);}
.project-content{ flex-wrap: wrap;}
.project-content figure, .project-content p{width:100%;margin:auto;}
}
@media (max-width: 500px){
.project-top.ntc.EN p{font-size:11px;}
.recruit-title.top.EN h2{font-size:25px;}
.recruit-title.EN h2{font-size:25px;}
.projectItem.JS-targetAnime{flex-direction: column;}
.projectItem figure { width: 100%; height: 100px; display: flex;}
.projectItem figure img { width: 100%;}
.projectItem div { width: auto; padding: 8px;}
.projectItem.JS-targetAnime div>* { padding: 0!important; margin: 0;}
.projectItem.JS-targetAnime div h2 { font-size: 18px; font-weight: bold;}
.projectItem.JS-targetAnime div p { font-size: 16px;}
.recruit-memu span{font-size:30px;}
.recruit-interview .item{width:100%;}
}
@media (max-width: 460px){
.lum-lightbox-inner img { max-width: 100%!important;}
}