@charset "utf-8";

/* -------------------------------------------------- */
/* PC*/
/* -------------------------------------------------- */
/* MV */
/* ----------------------------------- */
#underFvWrap {
	background: url(../../img/recruit/under_mv_pc.jpg) right 15% center / cover no-repeat;
}

/* #underFv::after {
	content: "";
	width: 108px;
	height: 148px;
	background: url(../../img/recruit/under_mv_illust.png) 0 0 no-repeat;
	background-size: contain;
	display: inline-block;
	position: absolute;
	bottom: -30px;
	right: 0;
} */

#bc.bgNone {
	background: none;
}

/* 採用情報 */
/* ----------------------------------- */
#recruitBg {
	background: url(../../img/recruit/recruit_bg_pc.jpg) center center / cover no-repeat;
}

/* メッセージ */
/* ----------------------------------- */
#message {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
}

#messageBox {
	padding: 300px 0;
	position: relative;
	z-index: 2;
	text-align: center;
}

@media screen and (max-width: 1300px) {
	#messageBox {
		padding: 300px 0 400px;
	}
}

#messageBox h2 {
	padding-bottom: 20px;
	font-size: 3rem;
	color: #0d499e;
	font-weight: bold;
}

#messageBox p {  
	font-size: 1.8rem;
	padding-bottom: 1em;
	line-height: 2;
}

#messageBox p:last-child {  
	padding-bottom: 0;
}

#messageImgs img {
	border-radius: 10px;
}

#messageImg1 {
	width: clamp(300px, 25vw ,410px);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	-webkit-transform: translate(-160%, 0);
	transform: translate(-160%, 0);
}

@media screen and (max-width: 1300px) {
	#messageImg1 {
		top: -1%;
		-webkit-transform: translate(-40vw, 0);
		transform: translate(-40vw, 0);
	}
}

#messageImg1 img {
	width: 100%;
	height: auto;
}

#messageImg2 {
	width: clamp(200px, 18.4vw ,300px);
	position: absolute;
	top: 10%;
	right: 50%;
	z-index: 1;
	-webkit-transform: translate(210%, 0);
	transform: translate(210%, 0);
}

@media screen and (max-width: 1300px) {
	#messageImg2 {
		top: 0%;
		-webkit-transform: translate(40vw, 0);
		transform: translate(40vw, 0);
	}
}

#messageImg2 img {
	width: 100%;
	height: auto;
}

#messageImg3 {
	width: clamp(200px, 18.4vw ,300px);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	-webkit-transform: translate(-240%, 0);
	transform: translate(-240%, 0);
}

@media screen and (max-width: 1300px) {
	#messageImg3 {
		top: auto;
		bottom: 5%;
		-webkit-transform: translate(40vw, 0);
		transform: translate(-40vw, 0);
	}
}

#messageImg3 img {
	width: 100%;
	height: auto;
}

#messageImg4 {
	width: clamp(300px, 25vw ,410px);
	position: absolute;
	bottom: 5%;
	right: 50%;
	z-index: 1;
	-webkit-transform: translate(190%, 0);
	transform: translate(190%, 0);
}

@media screen and (max-width: 1300px) {
	#messageImg4 {
		bottom: 5%;
		-webkit-transform: translate(40vw, 0);
		transform: translate(40vw, 0);
	}
}

#messageImg4 img {
	width: 100%;
	height: auto;
}

/* 紙資源ってどんな会社？ */
/* ----------------------------------- */
#about {
	padding: 100px 0;
}

/* 入社のきっかけベスト3 */
/* ----------------------------------- */
#motivation {
	padding: 100px 0;
	background: #edf3fc;
}

#motivation .layout1 {
	display: flex;
	align-items: center;
	gap: 40px;
}

.motivationImg {
	border-radius: 10px;
	overflow: hidden;
}

.motivationDetail {
	flex: 1;
}


.motivationTit {
	padding-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	font-size: 2.4rem;
	font-weight: bold;
}

.motivationTit .num {
	width: 90px;
	height: 90px;
	background: #0d499e;
	color: #FFF;
	font-family: "Roboto Condensed", sans-serif;
	border-radius: 100vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-weight: 500;
	font-size: 1.6rem;
}

.motivationTit .num .large {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1;
}


/* 数字で見る紙資源 */
/* ----------------------------------- */
#numbers {
	padding: 100px 0;
	background: #0d499e;
}

#numbers ul {
	display: flex;
	flex-wrap: wrap;
	gap: 38px 3.8%;
}


/* 福利厚生 */
/* ----------------------------------- */
#benefits {
	padding: 100px 0;
}

#benefitPoint {
	padding-bottom: 50px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3%;
}

#benefitPoint li {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 2px solid #0d499e;
	border-radius: 20px;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.benefitPointTit {
	padding-bottom: 20px;
	font-size: 2rem;
	color: #0d499e;
	font-weight: bold;
	text-align: center;
}

.benefitPointTxt {
	font-size: 1.6rem;
}

#benefitOther {
	margin-bottom: 50px;
	border: 2px solid #0d499e;
	border-radius: 20px;
	padding: 20px;
}

.tit {
	padding-bottom: 10px;
	font-size: 2rem;
	font-weight: bold;
}

#benefitOtherList {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	font-size: 1.6rem;
}

#youtube {
	width: 100%;
} 

#youtube iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 315;
} 

/* 先輩インタビュー */
/* ----------------------------------- */
#interviews {
	padding: 100px 0;
	background: #0d499e;
}

#interview {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4%;
}

#interview a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

#interview a:hover img {
	transform: scale(1.1);
}

.interviewImg {
	width: 100%;
}

.interviewImg {
	width: 100%;
	height: auto;
	transition: all 0.3s ease-in-out 0s;
}

.nameWrap {
	width: 80%;
	padding: 20px 30px;
	font-weight: bold;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../../img/common/icon_arrow3.svg) right 5% center / 30px no-repeat rgba(13,73,158,0.7);
	border-radius: 0 10px 0 0;
}

.nameWrap .job {
	font-size: 1.6rem;
	color: #FFF;
	font-weight: normal;
}

.nameWrap .name {
	font-size: 2.4rem;
	color: #FFF;
	letter-spacing: 0.3em;
}

/* ポップアップ */
.interviewWrap {
	width: 900px;
	height: 80vh;
	background: #edf3fc;
	border-radius: 10px;
}

.lity {
	z-index: 10000;
}

.lity-content::after {
	-webkit-box-shadow: 0 0 8px rgba(0,31,75,0.6);
	box-shadow: 0 0 8px rgba(0,31,75,0.6);
}

.lity-close {
	width: 50px;
	height: 50px;
	background: #0d499e;
	top: 30px;
	right: 30px;
	border-radius: 100vw;
	transition: all 0.3s ease-in-out 0s;
}

.lity-close:hover {
	background: #0d499e;
	opacity: 0.7;
}

.lity-close:active {
	top: 30px;
}

.scroll {
	height: 100%;
	position: relative;
}

.interviewIn {
	padding: 50px;
}

.interviewIn .tit2 {
	padding-bottom: 20px;
	font-size: 2.8rem;
}

.interviewMain {
	width: 100%;
	aspect-ratio: 750 / 350;
	margin-bottom: 30px;
	position: relative;
}

#interview1 .interviewMain {
	background: url(../../img/recruit/interview1_img1.jpg) center center / cover no-repeat;
}

#interview2 .interviewMain {
	background: url(../../img/recruit/interview2_img1.jpg) center center / cover no-repeat;
}

#interview3 .interviewMain {
	background: url(../../img/recruit/interview3_img1.jpg) center center / cover no-repeat;
}

.interviewImg img {
	width: 100%;
	height: auto;
}

.interviewInfo {
	padding: 20px 50px;
	background: #0d499e;
	color: #FFF;
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	font-size: 1.6rem;
}

.interviewInfo .name {
	padding-top: 10px;
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: 0.5em;
}

.interviewSection {
	padding-bottom: 40px;
}

.interviewTxt {
	padding-bottom: 1em;
	font-size: 1.6rem;
	line-height: 1.8;
}

/* 採用までの流れ */
/* ----------------------------------- */
#flow3Wrap {
	padding: 100px 0;
	background: #FFF;
}

#flow3Wrap .tit2 {
	padding-bottom: 80px;
}

.flow3Img {
	text-align: center;
}

.flow3Img img {
	width: max-content;
}


/* 募集要項 */
/* ----------------------------------- */
#jobDetailsWrap {
	padding-bottom: 300px;
}

.jobDetails {
	padding-bottom: 100px;
}

.jobDetailsList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5%;
	gap: 20px 5%;
}

.jobDetailsList a {
	padding: 10px 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: url(../../img/common/icon_arrow3.svg) right 5% center / 25px  no-repeat #1f2964;
	position: relative;
	top: 0;
	box-shadow: 0 5px #0d112e;
	border-radius: 10px;
}

.jobDetailsList a:hover {
	top: 5px;
	box-shadow: 0 0 #0d112e;
}

.jobDetailsList .name {
	font-size: 2rem;
	color: #ffff00;
	font-weight: 500;
}

.jobDetailsList .area {
	padding: 0 10px;
	border: 1px solid #FFF;
	font-size: 1.3rem;
	display: inline-block;
	color: #FFF;
	display: flex;
	align-items: center;
	gap: 5px;
}

#ctaIntro.recruit {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/* 募集要項 */
/* ----------------------------------- */
#tour {
	padding: 0 0 100px;
	background: #edf3fc;
}

#tour .layout1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-bottom: 0;
}

#tourContact {
	flex: 1;
	padding: 30px;
	background: #fbfaaf;
	border-radius: 10px;
}

#tourContactImg {
	padding-bottom: 20px;
	text-align: center;
}

#tourContactTelWrap {

}

#tourContactTit {
	padding-bottom: 10px;
	font-size: 2rem;
	color: #000;
	font-weight: bold;
	text-align: center;
}

#tourContactTel {
	padding-bottom: 10px;
	font-size: 4.5rem;
	font-weight: bold;
	color: #0d499e;
	font-family: "Roboto Condensed", sans-serif;
	line-height: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

#tourContactTel::before {
	content: "";
	width: 21px;
	height: 24px;
	background: url(../../img/common/icon_tel_b.svg) 0 0 no-repeat;
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
}

#tourContactTime {
	color: #0d499e;
	text-align: center;
	font-weight: 500;
}

#requirements {
	padding-bottom: 300px;
	background: #edf3fc;
}

.table1 th {
	width: max-content;
}

#entryBtn {
	padding-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* -------------------------------------------------- */
/* TAB&SP */
/* -------------------------------------------------- */
@media screen and (max-width: 1024px) {
	#aboutImg img {
		width: 100%;
	}

	.motivationImg {
		width: 200px;
	}

	.motivationImg img {
		width: 100%;
	}

	.motivationDetail .txt2 {
		font-size: 1.6rem;
		line-height: 2;
	}

	.motivationTit {
		font-size: 2.2rem;
	}

	.motivationTit .num {
		width: 80px;
		height: 80px;
	}

	#numbers ul {
		gap: 20px 4%;
	}

	#numbers ul li img {
		width: 100%;
	}

	#numbers ul li:nth-child(1) {
		width: 65.5%;
	}

	#numbers ul li:nth-child(2) {
		width: 30.5%;
	}

	#numbers ul li:nth-child(3) {
		width: 48%;
	}

	#numbers ul li:nth-child(4) {
		width: 48%;
	}

	#numbers ul li:nth-child(5) {
		width: 30.666%;
	}

	#numbers ul li:nth-child(6) {
		width: 30.666%;
	}

	#numbers ul li:nth-child(7) {
		width: 30.666%;
	}

	#numbers ul li:nth-child(8) {
		width: 48%;
	}

	#numbers ul li:nth-child(9) {
		width: 48%;
	}

	.benefitPointTit {
		font-size: 2vw;
	}

	.benefitPointTxt {
		font-size: 1.6vw;
	}
	.interviewWrap {
		width: 92%;
		margin: 0 auto;
	}

	/* 募集要項 */
	/* ----------------------------------- */
	#tour .layout1 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px;
		margin-bottom: 0;
	}

	.table1 {
		width: 100%;
	}
}


/* -------------------------------------------------- */
/* TAB(調整) */
/* -------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {}

/* -------------------------------------------------- */
/* SP(調整) */
/* -------------------------------------------------- */
@media screen and (max-width: 767px) {
	#underFvWrap {
		background: url(../../img/recruit/under_mv_sp.jpg) right 15% center / cover no-repeat;
	}

	.jobDetails {
		padding-bottom: 80px;
	}

	.jobDetailsList {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 10px 5%;
	}

	#messageBox {
		padding: 550px 4% 80px;
		text-align: left;
	}

	#messageImg1 {
		width: clamp(220px, 54vw ,410px);
		top: 0;
		-webkit-transform: translate(-44vw, 0);
		transform: translate(-44vw, 0);
	}

	#messageImg2 {
		width: clamp(150px, 37vw ,300px);
		top: 13%;
		-webkit-transform: translate(45vw, 0);
		transform: translate(45vw, 0);
	}

	#messageImg3 {
		bottom: auto;
		top: 18%;
		-webkit-transform: translate(-45vw, 0);
		transform: translate(-45vw, 0);
		width: clamp(180px, 44vw ,300px);
	}

	#messageImg4 {
		bottom: auto;
		top: 34%;
		-webkit-transform: translate(45vw, 0);
		transform: translate(45vw, 0);
		width: clamp(200px, 49vw ,410px);
	}

	#messageBox h2 {
		font-size: 2.4rem;
	}

	#messageBox p {
		font-size: 3.8vw;
	}

	#motivation {
		padding: 80px 0 60px;
	}

	#motivation .layout1 {
		flex-direction: column;
	}

	.motivationImg {
		width: 100%;
	}

	.motivationTit {
		font-size: 2rem;
		justify-content: center;
		flex-direction: column;
	}

	#numbers {
		padding: 80px 0;
	}

	#benefits {
		padding: 80px 0;
	}

	#benefitPoint {
		padding-bottom: 50px;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 20px 3%;
	}

	#benefitPoint li {
		aspect-ratio: auto;
		padding: 40px 20px;
	}

	.benefitPointTit {
		font-size: 2rem;
	}

	.benefitPointTxt {
		font-size: 1.6rem;
	}

	#interviews {
		padding: 80px 0;
		background: #0d499e;
	}

	#interview {
		grid-template-columns: repeat(1, 1fr);
		gap: 30px 4%;
	}

	.lity-close {
		right: 4%;
	}

	.interviewIn {
		padding: 20px;
	}

	.interviewIn .tit2 {
		padding-bottom: 20px;
		font-size: 2.2rem;
	}

	.interviewInfo {
		padding: 10px 20px;
		top: auto;
		bottom: 0;
		left: 0;
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		font-size: 1.3rem;
	}

	.interviewInfo .name {
		font-size: 1.8rem;
	}

	#flow3Wrap {
		padding: 80px 0;
	}

	#jobDetailsWrap {
		padding-bottom: 360px;
	}

	/* 募集要項 */
	/* ----------------------------------- */
	.underFvTit .subTit {
		padding: 2px 5px;
		font-size: 1.4rem;
	}

	#tourContactTel {
		font-size: 3.4rem;
	}

	#tourContactTel a {
		color: #0d499e;
	}

	.table1 th {
		padding: 10px 30px;
		display: block;
		width: 100%;
	}

	.table1 td {
		display: block;
		width: 100%;
	}

	#requirements {
		padding-bottom: 350px;
	}

	#tour {
		padding: 0 0 80px;
	}

}