@charset "utf-8";

/*-------------------------------
	メインタイトル
-------------------------------*/
.maintitle{
	margin-bottom:113px;
}

/*----- コピーライト */
.maintitle .copyright{
	justify-content:flex-end;
}

/*----- コンテンツ */

/* ビジュアル */
.maintitle .visual{
	background-image:url("../images/recruit_people/mt.png");
}
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .maintitle .visual{
        background-image:url("../images/recruit_people/mt@2x.png");
    }
}

.maintitle .title{
	width:380px;
}


/*-------------------------------
	共通
-------------------------------*/

/* スライダー(ドット) */
.slick-dots{
	display: flex;
	justify-content:flex-start;
	align-items:center;
	height:70px;
}
.slick-dots li:not(:last-child){
	margin-right:10px;
}
.slick-dots li button{
	background: #d7d8d8;
	height:2px;
	width:60px;
	border:none;
	text-indent: -9999px;
	cursor: pointer;
	position: relative;
}
.slick-dots li.slick-active button::after{
	content: "";
	position:absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #111;
	animation: progress 6.8s linear 0s forwards;
	z-index:1;
}
@keyframes progress {
	0%{
		width:0;
	}
	100% {
		width:100%;
	}
}

/*----- ボタン */
.sec .button a{
	width:170px;
	height:50px;
	font-size:1.4rem;
	background:#1e1e1e url("../images/btn-arrow-wh-lt.png") no-repeat 10% 50%/6px auto;
	border-radius: 27px;
	display: flex;
	justify-content: center;
	align-items:center;
	color:#fff;
	border:#1e1e1e solid 1px;
	margin-right:auto;
	margin-left:auto;
}
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .sec .button a{
        background-image:url("../images/btn-arrow-wh-lt@2x.png");
    }
}
.sec .button a:hover{
	opacity: 1;
	background-color:transparent;
	background-image:url("../images/btn-arrow-bk-lt.png");
	color:#1e1e1e;
}
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .sec .button a:hover{
        background-image:url("../images/btn-arrow-bk-lt@2x.png");
    }
}
.sec .button a span{
	font-weight:600;
}


/*-------------------------------
	SANKEIの人びと (.sec1)
-------------------------------*/
.sec1{
	padding-bottom:150px;
}

/*----- ボックス */
.recruit-people-box{
	margin-bottom:60px;
}
.recruit-people-box .box{
	padding-top:60px;
	display: flex;
}
.recruit-people-box .box:not(:last-child){
	margin-bottom:90px;
}
.recruit-people-box .box:nth-child(odd) .text-area{
	order:1;
}
.recruit-people-box .box:nth-child(even) .text-area{
	order:2;
}
.recruit-people-box .box:nth-child(odd) .image-area{
	order:2;
	margin-left:66px;
}
.recruit-people-box .box:nth-child(even) .image-area{
	order:1;
	margin-right:66px;
}

/*----- ボックス（テキスト） */
.recruit-people-box .text-area{
	width:calc(100% - 490px);
}
.recruit-people-box .text-area .ttl{
	font-size:2.6rem;
	font-weight:500;
	line-height:1.8;
	margin-bottom:25px;
	margin-top:-10px;
	letter-spacing: .07em;
}
.recruit-people-box .text-area .txt{
	font-size:1.4rem;
	line-height: 2;
	letter-spacing: -.08em;
}

/*----- ボックス（イメージ） */
.recruit-people-box .image-area{
	width:424px;
	position: relative;
}
.recruit-people-box .image-area .list{
	width:100%;
	height:470px;
	position: relative;
	overflow:hidden;
	border-radius: 6px;
}
.recruit-people-box .image-area .list img{
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.recruit-people-box .image-area .type{
	position: absolute;
	top:-60px;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding-bottom:20px;
	z-index:1;
	letter-spacing: .03em;
}
.recruit-people-box .box:nth-child(odd) .image-area .type{
	border-bottom-left-radius: 6px;
	right:0;
	padding-left:20px;
}
.recruit-people-box .box:nth-child(even) .image-area .type{
	border-bottom-right-radius: 6px;
	left:0;
	padding-right:20px;
}
.recruit-people-box .image-area .type .num{
	font-size:3rem;
	font-weight:500;
	display:block;
	position: relative;
	margin-bottom:40px;
}
.recruit-people-box .image-area .type .num::after{
	content: "";
	width: 14px;
	height:1px;
	background: #c4c5c5;
	display:block;
	position: absolute;
	top:calc(100% + 20px);
	right:0;
	left:0;
	margin:auto;
}
.recruit-people-box .image-area .type .ttl{
	display:block;
	font-size:3.6rem;
	font-weight:500;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

/* スライダー（ロード時対策） */
.box1-slide-list {
  opacity: 0;
  transition: opacity .2s linear;
}
.box1-slide-list.slick-initialized{
  opacity: 1;
}
.box2-slide-list {
  opacity: 0;
  transition: opacity .2s linear;
}
.box2-slide-list.slick-initialized{
  opacity: 1;
}
.box3-slide-list {
  opacity: 0;
  transition: opacity .2s linear;
}
.box3-slide-list.slick-initialized{
  opacity: 1;
}


/*-------------------------------
	1100px以下
-------------------------------*/
@media screen and (max-width:1100px){
	
	/*-------------------------------
		SANKEIの人びと (.sec1)
	-------------------------------*/

	/*----- ボックス */
	.recruit-people-box .box:nth-child(odd) .image-area{
		margin-left:40px;
	}
	.recruit-people-box .box:nth-child(even) .image-area{
		margin-right:40px;
	}

	/*----- ボックス（テキスト） */
	.recruit-people-box .text-area{
		width:calc(100% - 464px);
	}
	.recruit-people-box .text-area .ttl .sp-none-inline{
		display:none;
	}
	
}

/*-------------------------------
	920px以下
-------------------------------*/
@media screen and (max-width:920px){
	
	/*-------------------------------
		SANKEIの人びと (.sec1)
	-------------------------------*/

	/*----- ボックス（テキスト） */
	.recruit-people-box .text-area{
		width:calc(100% - 400px);
	}

	/*----- ボックス（イメージ） */
	.recruit-people-box .image-area{
		width:360px;
		position: relative;
	}
	.recruit-people-box .image-area .list img{
		width: auto;
		height: 100%;
		max-width: none;
		max-height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

}


/*-------------------------------
	SP専用
-------------------------------*/
@media screen and (max-width:768px){
	
	/*-------------------------------
		メインタイトル
	-------------------------------*/
	.maintitle{
		margin-bottom:10vw;
	}
	
	.maintitle .title{
		width:60vw;
	}
	
	
	/*-------------------------------
		共通
	-------------------------------*/

	/* スライダー(ドット) */
	.slick-dots{
		height:10vw;
	}
	.slick-dots li:not(:last-child){
		margin-right:2vw;
	}
	.slick-dots li button{
		width:13vw;
	}

	/*----- ボタン */
	.sec .button a{
		width:80%;
		height:12vw;
		font-size:2.4rem;
		border-radius: 6vw;
		margin-right:auto;
		margin-left:auto;
	}
	.sec .button a:hover{
		background-color:#1e1e1e;
		background-image:url("../images/btn-arrow-wh-lt.png");
		color:#fff;
	}
	/* Retina */
	@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
		.sec .button a:hover{
			background-image:url("../images/btn-arrow-wh-lt@2x.png");
		}
	}
	

	/*-------------------------------
		SANKEIの人びと (.sec1)
	-------------------------------*/
	.sec1{
		padding-bottom:15vw;
	}

	/*----- ボックス */
	.recruit-people-box{
		margin-bottom:10vw;
	}
	.recruit-people-box .box{
		padding-top:5vw;
		flex-direction: column;
	}
	.recruit-people-box .box:not(:last-child){
		margin-bottom:10vw;
	}
	.recruit-people-box .box:nth-child(odd) .text-area{
		order:2;
	}
	.recruit-people-box .box:nth-child(even) .text-area{
		order:2;
	}
	.recruit-people-box .box:nth-child(odd) .image-area{
		order:1;
		margin-left:0;
	}
	.recruit-people-box .box:nth-child(even) .image-area{
		order:1;
		margin-right:0;
	}

	/*----- ボックス（テキスト） */
	.recruit-people-box .text-area{
		width:100%;
	}
	.recruit-people-box .text-area .ttl{
		font-size:3.6rem;
		margin-bottom:5vw;
		margin-top:0;
	}
	.recruit-people-box .text-area .txt{
		font-size:2.4rem;
	}

	/*----- ボックス（イメージ） */
	.recruit-people-box .image-area{
		width:100%;
	}
	.recruit-people-box .image-area .list{
		width:100%;
		height:100vw;
	}
	.recruit-people-box .image-area .list img{
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: none;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.recruit-people-box .image-area .type{
		top:-5vw;
		padding-bottom:5vw;
	}
	.recruit-people-box .box:nth-child(odd) .image-area .type{
		padding-left:5vw;
	}
	.recruit-people-box .box:nth-child(even) .image-area .type{
		padding-right:5vw;
	}
	.recruit-people-box .image-area .type .num{
		font-size:4rem;
		margin-bottom:8vw;
	}
	.recruit-people-box .image-area .type .num::after{
		width: 4vw;
		top:calc(100% + 4vw);
	}
	.recruit-people-box .image-area .type .ttl{
		font-size:4.4rem;
	}

}