@charset "utf-8";
/* -----------------------------------------------------------
   ページ共通
-------------------------------------------------------------- */
#recruit .ttl-wrap {
	position: relative;
    display: inline-block;
    margin-bottom: 50px;
}

#recruit .ttl-wrap h3 {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
}

#recruit .ttl-wrap h3 span {
    line-height: 2.2;
    background-color: #000;
    padding: 20px 45px 20px 20px;
}

#recruit .ttl-wrap .deco-en {
    font-family: 'Mrs Saint Delafield', cursive;
    font-size: 12rem;
    color: #4FFEFC;
    position: absolute;
    right: -38%;
    bottom: -40px;
    transform: rotate(-16deg);
    -moz-transform: rotate(-16deg);
    -webkit-transform: rotate(-16deg);
}

@media screen and (max-width: 768px){
	#recruit .ttl-wrap {
		margin-bottom: 30px;
	}

	#recruit .ttl-wrap h3 {
		font-size: 2rem;
	}

	#recruit .ttl-wrap h3 span {
		line-height: 1.8;
		background-color: #000;
		padding: 20px 25px 20px 15px ;
	}

	#recruit .ttl-wrap .deco-en {
		font-size: 6rem;
		position: absolute;
		right: -22%;
		bottom: -20px
	}
}


/* -----------------------------------------------------------
    採用TOP MV
-------------------------------------------------------------- */
#recruit .rec-mv-area {
    height: 888px;
	position: relative;
	overflow: hidden;
}

#recruit .rec-mv-area::before{
	content: '';
	position: absolute;
	width: 579px;
	height: 689px;
	bottom: -200px;
	left: -200px;
	background: url("../img/rec-mv-triangle.png") no-repeat top center / contain;
	z-index: 1;
}
#recruit .rec-mv-area .img-catch {
    position: relative;
}
/*
#recruit .rec-mv-area .img-catch::after {
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.15;
    top: 0;
    left: 0;
	z-index: 0;
}*/

#recruit .rec-mv-area .img-catch .img-area {
	height: 888px;
}

#recruit .rec-mv-area .img-catch .img-area li {
height: 100%;
}

#recruit .rec-mv-area .img-catch .img-area li .img-wrap {
	width: 100%;
	height: 100%;
}

#recruit .rec-mv-area .img-catch .img-area li .img-wrap img {
	object-fit: cover;
	object-position: top;
	width: 100%;
	height: 100%;
}

#recruit .rec-mv-area .img-catch .catch-area {
    position: absolute;
	bottom: 60px;
	left: 80px;
	z-index: 1;
}

#recruit .rec-mv-area .img-catch .catch-area .mv-en {
    font-family: "Space Grotesk", sans-serif;
	font-size: 10rem;
	font-weight: 700;
	line-height: 1rem;
	color: #fff!important;
	letter-spacing: 0.05em;
	line-height: 1;
	display: flex;
	padding: 0 0 17px;
}
#recruit .rec-mv-area .img-catch .catch-area .mv-en span{
	color: #fff!important;
}
#recruit .rec-mv-area .img-catch .catch-area .catch-jp span {
    font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background-color: #31D8A8;
	padding: 15px 10px;
	display: inline-block;
	border-radius: 10px;
	position: relative;
	margin: 0 0 20px;
}
#recruit .rec-mv-area .img-catch .catch-area .catch-jp span::after {
content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 12px solid #31D8A8;
    border-top: 0;
    transform: rotate(50deg);
    bottom: -5px;
    left: 13px;
}

#recruit .rec-mv-area .img-catch .catch-area .deco-en {
	position: absolute;
    right: 140px;
	top: 0px;
}

#recruit.recruit-top .breadcrumbs {
    top: 980px;
    left: 20px;
}

#recruit.recruit-top .h1-wrap h1 {
    position: absolute;
    top: 988px;
    right: 20px;
    z-index: 2;
    font-size: 1.2rem;
    font-weight: 500;
}

/*.txtTitle span {
    line-height: 0.8;
}*/

@media screen and (max-width: 1000px){
	.txtTitle span {
   	 	line-height: 1;
	}
	}


@media screen and (max-width: 768px){
	#recruit .rec-mv-area {
		height: 400px;
	}
	#recruit .rec-mv-area::before{
		width: 200px;
		height: 500px;
		bottom: -320px;
    left: -60px;
	}

	#recruit .rec-mv-area .img-catch {
		position: relative;
	}

	/*#recruit .rec-mv-area .img-catch::after {
		content: "";
		background: #000;
		width: 100%;
		height: 100%;
		position: absolute;
		opacity: 0.15;
		top: 0;
		left: 0;
		z-index: 0;
	}*/

	#recruit .rec-mv-area .img-catch .img-area {
		height: 400px;
	}

	#recruit .rec-mv-area .img-catch .img-area li {
	}

	#recruit .rec-mv-area .img-catch .img-area li .img-wrap {
		width: 100%;
		height: 100%;
		padding: 60px 0 0;
	}

	#recruit .rec-mv-area .img-catch .img-area li .img-wrap img {
		object-fit: cover;
		object-position: top;
		width: 100%;
		height: 100%;
	}

	#recruit .rec-mv-area .img-catch .catch-area {
		position: absolute;
		bottom: 10px;
		left: 20px;
		z-index: 1;
	}

	#recruit .rec-mv-area .img-catch .catch-area .mv-en {
		font-size: 4rem;
		padding: 0 0 7px;
	}
	
	#recruit .rec-mv-area .img-catch .catch-area .catch-jp {
		margin-top: 5px;
	}

	#recruit .rec-mv-area .img-catch .catch-area .catch-jp span {
		font-size: 1.6rem;
		padding: 8px 5px 8px 5px;
		display: inline-block;
		margin: 0 0 5px;
		line-height: 1.1;
		border-radius: 3px;
	}

	#recruit .rec-mv-area .img-catch .catch-area .deco-en {
		position: absolute;
		right: -110px;
		bottom: 5px;
	}
	#recruit .rec-mv-area .img-catch .catch-area .deco-en img{
		width: 70%;	
	}
	
	#recruit.recruit-top .h1-wrap h1 {
		position: relative;
		top: 0px;
	}
	
	.txtTitle span {
		line-height: 1;
	}
}

/* -----------------------------------------------------------
    代表メッセージ
-------------------------------------------------------------- */


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


/* -----------------------------------------------------------
    働く環境
-------------------------------------------------------------- */


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



/* -----------------------------------------------------------
    社員紹介
-------------------------------------------------------------- */
.rec-interview-area {
	padding: 80px 0;
	display: flex;
	background: linear-gradient(180deg, #fff 0%, #fff 55%, #F2F9FF 45%, #F2F9FF 100%);
}

.rec-interview-area .txt-wrap {
	margin: 0px 0px 40px calc((100% - 1200px) / 2);
	width: 475px;
	flex-shrink: 0;
}

#recruit .rec-interview-area .ttl-wrap .deco-en {
    right: -95%;
    bottom: -40px;
	white-space: nowrap;
}

/*スライド*/
.rec-interview-area .slider-box {
	position: relative;
	right: -50px;
}

.rec-interview-area .slider-box ul {

}

.rec-interview-area .slider-box ul li {
	margin-right: 10px;
	padding: 0 15px;
	position: relative;
	padding-top: 5px;
}

.rec-interview-area .slider-box ul li .card_surface {
	width: 385px;
	height: 520px;
}

.rec-interview-area .slider-box ul li img.card_surface  {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rec-interview-area a.r-link {
	margin-top: 50px;
}

.interview-list a .txt-box {
	position: absolute;
    left: 0px;
	top: 0;
}

@media screen and (max-width: 768px){
	.rec-interview-area {
		padding: 40px 20px;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #fff 0%, #fff 75%, #F2F9FF 25%, #F2F9FF 100%);
	}

	.rec-interview-area .txt-wrap {
		margin: 0;
		width: 100%;
		flex-shrink: 0;
	}

	#recruit .rec-interview-area .ttl-wrap .deco-en {
		right: -95%;
		bottom: -14px;
		white-space: nowrap;
	}

	/*スライド*/
	.rec-interview-area .slider-box {
		position: relative;
		right: -50px;
		margin-top: 30px;
	}
	
	.rec-interview-area .slider-box ul li {
		margin-right: 10px;
		padding: 0 10px;
		position: relative;
	}

	.rec-interview-area .slider-box ul li .card_surface {
		width: 190px;
		height: 250px;
	}
	
	.rec-interview-area a.r-link {
		margin-top: 30px;
	}
	
	.interview-list a .name-area {
		left: -10px;
	}
}


/* -----------------------------------------------------------
    募集要項
-------------------------------------------------------------- */


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

/* -----------------------------------------------------------
	news
-------------------------------------------------------------- */
.news-area {
	position: relative;
	margin: 100px auto;
}


#recruit .news-area .news-box .ttl-wrap {
    margin-bottom: 0px;
}
.news-area .news-box_inner{
}

.news-area .news-box{
	display: flex;
	justify-content: space-between;
	position: relative;
	margin: 0 auto;
}
.news-area .news-title.eg-font {
	font-size: 7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	font-family: "Space Grotesk", sans-serif;
	white-space: nowrap;}

.news-area .news-title.jp {
	font-weight: 700;
	font-size: 2.2rem;
	margin-bottom: 30px;
}

.news-area .news-list {
	width: 950px;
	list-style-type: none;
	padding: 0 0 0 70px;
}
.news-area .news-list li:first-child{
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: solid 1px #002060;
}

.news-area .news-list li:nth-of-type(n+3){
	display: none;
}

.news-area .news-list a{
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
}

.news-area .news-de_title {
	flex: 1;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.news-area .cate {
	display: inline-block;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	text-align: center;
	padding: 5px 15px 5px;
	margin: 0 30px;
	border-radius: 30px;
	background-color: #00CCFF;
}

.news-area .news-more{
	right: 0;
	white-space: nowrap;
}

.news-area .news-more > a::before{
	display: inline-block;
	content: "\f105";
	font-family: 'FontAwesome';
	padding: 0 8px 0 0;
	font-weight: 700;
}

@media screen and (max-width: 768px){
	.news-area {
		margin: 20px auto;
	}
	#recruit .news-area .news-box .ttl-wrap {
		margin-bottom: 20px;
	}
	.news-area .news-box{
		display: block;
		position: relative;
        padding: 0;
		width: 100%;
	}

	.news-area .news-box_inner{
		display: block;
		padding: 30px 20px;
	}
	
	.news-area .ttl-wrap {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 30px;
	}

	.news-area .news-title.eg-font {
		font-size: 2.2rem;
	}

	.news-area .news-title.jp {
		font-size: 1.4rem;
		margin-bottom: 0px;
	}
	
	.news-area .news-list {
		width: 100%;
        padding: 0;
	}
	
	.news-area .news-list li:first-child{
		padding-bottom: 0px;
		margin-bottom: 0px;
		border-bottom: none;
	}

	.news-area .news-list li:nth-of-type(n+2){
		display: none;
	}

	.news-area .news-list a{
		flex-wrap: wrap;
	}

	.news-area .news-de_title {
		flex: auto;
		flex-shrink: 0;
		width: 100%;
		margin: 10px 0 0;
		text-overflow: inherit;
    	white-space: normal;
		line-height: 1.3;
	}

	.news-area .cate{
		margin: 0 0 0 30px;
	}

	.news-area .news-more{
		position: absolute;
		top: 0;
		right: 0;
	}
}