@charset "UTF-8";
/* CSS Document */

/*
	kv
-----------------------------------------------------------------------------------------------*/
#kvWrapper{
	height: calc(100vh - var(--hHeader));
	min-height: 600px;
	position: relative;
	overflow: hidden;
	z-index: 2;
}
#kvWrapper .inBox{
	display: flex;
	align-items: center;
	width: var(--wBase);
	height: 100%;
	padding: 0 30px;
	margin: 0 auto;
}

/* tit
============================== */
.titKv{
	display: flex;
	flex-direction: column;
	gap: 30px 0;
	position: relative;
	z-index: 3;
}
.titKv span{
	display: inline-block;
	padding: 0 10px;
	overflow: hidden;
}
.titKv img{
	filter: drop-shadow(0 0 5px rgb(000 000 000 / 50%));
}

/* ph
============================== */
#kvWrapper .phBox::after{
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
#kvWrapper .kvPh{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* スクロール
============================== */
#kvWrapper .scroll{
	height: 120px;
	writing-mode: vertical-rl;
	color: var(--clrBase);
	font-family: var(--fEn);
	font-weight: 700;
	padding-left: 10px;
	position: absolute;
	bottom: 0;
	left: 30px;
	overflow: hidden;
	z-index: 3;
}
#kvWrapper .scroll::before{
	content: " ";
	display: block;
	width: 2px;
	height: 100%;
	background-color: currentColor;
	position: absolute;
	top: -100%;
	left: 0;
	animation: anmKvScroll 1.5s linear 0.5s infinite;
}

/* anm */
@keyframes anmKvScroll{
	from{
		top: -100%;
	}
	to{
		top: 100%;
	}
}

/* anm
============================== */
/* ph */
#kvWrapper .phBox::after{
	animation: anmW0 0.8s linear 0.5s forwards;
}

/* tit */
.titKv span img{
	opacity: 0;
}
.titKv span:nth-of-type(1) img{
	animation: anmFadeUpS 1s ease 1.3s forwards;
}
.titKv span:nth-of-type(2) img{
	animation: anmFadeUpS 1s ease 1.6s forwards;
}
.titKv span:nth-of-type(3) img{
	animation: anmFadeUpS 1s ease 1.9s forwards;
}
.titKv span:nth-of-type(4) img{
	animation: anmFadeUpS 1s ease 2.2s forwards;
}

/* スクロール */
#kvWrapper .scroll{
	opacity: 0;
	animation: anmFadeIn 1s ease 2.9s forwards;
}


/*
	学生のみなさまへメッセージ
-----------------------------------------------------------------------------------------------*/
#messageWrapper{
	display: block;
	width: 370px;
	height: 250px;
	background: url("../images/bg_top_message_pc.png") no-repeat bottom -5px right -5px rgb(232 56 13 / 95%);
	border-bottom: 3px solid #fff;
	position: absolute;
	left: 50%;
	transform: translate(200px, -100px);
	z-index: 2;
}
@media print, screen and (min-width:813px){
	#messageWrapper:hover{
		background-color: rgb(207 41 0 / 95%);
		background-position: bottom -13px right -13px;
	}
}
#messageWrapper .inBox{
	width: 100%;
	height: 100%;
	padding: 30px;
}

/* tit
============================== */
.titMessage{
	color: rgb(255 255 255 / 70%);
	font-size: 1.3rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 100%;
}
.titMessage span{
	display: block;
	color: rgb(255 255 255 / 100%);
	font-size: 4rem;
	font-family: var(--fEn);
	line-height: 100%;
	letter-spacing: 0.5rem;
	margin-bottom: 10px;
}


/*
	会社について
-----------------------------------------------------------------------------------------------*/
#aboutWrapper{
	padding-bottom: 130px;
	margin-top: 10px;
	position: relative;
	z-index: 1;
}
#aboutWrapper::before,
#aboutWrapper::after{
	content: " ";
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
}
#aboutWrapper::before{
	height: 10px;
	background-color: #fff;
	top: -10px;
	z-index: 2;
}
#aboutWrapper::after{
	height: calc(100% - 130px);
	background: url("../images/bg_top_about_pc.png") repeat center center;
	top: 0;
	z-index: -1;
}
#aboutWrapper .ctsArea{
	display: flex;
	gap: 0 85px;
	padding-top: 290px;
	padding-bottom: 130px;
	position: relative;
}

/* txtArea
============================== */
#aboutWrapper .txtArea,
.listAbout{
	position: relative;
	z-index: 2;
}
#aboutWrapper .txtArea{
	mix-blend-mode: multiply;
	color: var(--clrBrown);
}

/* tit */
.titAbout{
	width: fit-content;
	font-size: 6.4rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 80%;
	letter-spacing: 0.5rem;
	margin-bottom: 20px;
	position: relative;
}
.titAbout::after{
	content: " ";
	display: block;
	width: 50vw;
	min-width: calc(100% + 20px);
	height: 3px;
	background-color: currentColor;
	position: absolute;
	bottom: 0;
	right: 20px;
}

/* txt */
.txtAbout{
	width: 380px;
}

/* list
============================== */
.listAbout{
	display: flex;
	flex-direction: column;
	gap: 70px 0;
}
.listAbout li{
	position: relative;
}

/* figure */
.listAbout figure{
	position: relative;
}

/* tit */
.listAbout .tit{
	width: 250px;
	background-color: #fff;
	font-size: 2rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 130%;
	position: absolute;
	right: -30px;
	bottom: -20px;
	transition: all 0.3s;
}
.listAbout .tit span{
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 64px;
	padding: 10px 75px 10px 20px;
}
@media print, screen and (min-width:813px){
	.listAbout .tit span::after{
		content: " ";
		display: block;
		width: 0;
		height: 3px;
		background-color: var(--clrBase);
		position: absolute;
		bottom: 0;
		left: 0;
		transition: all 0.5s;
	}
	.listAbout a:hover .tit{
		color: var(--clrBase);
	}
	.listAbout a:hover .tit::before,
	.listAbout a:hover .tit::after{
		right: 8px;
	}
	.listAbout a:hover .tit span::after{
		width: 100%;
	}
}

/* ph */
.listAbout figure{
	width: 400px;
	height: 270px;
	box-shadow: 7px 7px 5px rgb(000 000 000 / 15%);
	border: 2px solid #fff;
	overflow: hidden;
}
@media print, screen and (min-width:813px){
	.listAbout img{
		transition: all 0.5s;
	}
	.listAbout a:hover img{
		object-fit: cover;
		transform: scale(1.1);
	}
}

/* item:どうぶつさん
============================== */
[class *= itemAbout]{
	position: absolute;
	z-index: 1;
}
.itemAboutPet01{/* 黒猫 */
	top: 40px;
	left: -10px;
}
.itemAboutPet02{/* 焦茶ダックス */
	top: 165px;
	left: 280px;
}
.itemAboutPet03{/* 白黒犬 */
	top: 270px;
	right: 40px;
	z-index: 2;
}
.itemAboutPet04{/* うさぎ */
	top: 230px;
	right: 60px;
	z-index: 1;
}
.itemAboutPet05{/* 茶ダックス */
	right: -20px;
	bottom: 290px;
}
.itemAboutPet06{/* パピヨン */
	right: 70px;
	bottom: -40px;
}
.itemAboutPet07{/* 茶猫 */
	right: 210px;
	bottom: -130px;
}

/* item:足跡
============================== */
.itemAboutPaw{
	top: 0;
	right: 184px;
	mix-blend-mode: multiply;
}

/* item:フード
============================== */
.itemAboutFood01{
	top: 115px;
	left: 180px;
}
.itemAboutFood02{
	bottom: 70px;
	left: -140px;
}


/*
	社員紹介
-----------------------------------------------------------------------------------------------*/
#peopleWrapper{
	padding-bottom: 110px;
}

/* tit
============================== */
.titPeople{
	text-align: center;
	color: var(--clrGrayD);
	font-family: var(--fZen);
	font-weight: 700;
	margin-bottom: 50px;
}
.titPeople span{
	display: block;
	color: var(--clrBase);
	font-size: 6.4rem;
	font-family: var(--fEn);
	line-height: 80%;
	letter-spacing: 0.5rem;
	margin-bottom: 15px;
}

/*
	RECRUIT
-----------------------------------------------------------------------------------------------*/
#recruitWrapper{
	display: flex;
	align-items: flex-start;
	position: relative;
}

/* anm */
#recruitWrapper.jsAnmStart{
	animation: anmFadeIn 1s ease 0.5s forwards;
}

/* tit
============================== */
.titRecruit{
	color: #fff;
	font-size: 11rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 80%;
	letter-spacing: 0.5rem;
	position: absolute;
	top: 63px;
	left: 630px;
	z-index: 3;
}

/* txtArea
============================== */
.txtRecruitArea{
	display: flex;
	align-items: center;
	width: 580px;
	height: 420px;
	position: relative;
	z-index: 2;
}
.txtRecruitArea::before,
.txtRecruitArea::after{
	content: " ";
	display: block;
	width: calc((100vw - 1140px) / 2 + 620px);
	min-width: calc(100% + 70px);
	height: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
}
.txtRecruitArea::before{
	background: url("../images/bg_top_recruit_pc.png") no-repeat center center / cover;
	transform: translateX(40px);
	z-index: 2;
}
.txtRecruitArea::after{
	background-color: var(--clrBrown30);
	transform: translate(50px, 10px);
	z-index: 1;
}
.txtRecruitArea .txt{
	color: #fff;
	font-size: 3.6rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 180%;
	position: relative;
	z-index: 3;
}

@media print, screen and (min-width:813px){
	/* anm */
	#recruitWrapper.jsAnmStart .txtRecruitArea{
		animation: anmFadeLeft 1s ease 0.5s forwards;
	}
}

/* list
============================== */
.listRecruit{
	display: flex;
	flex-direction: column;
	gap: 20px 0;
	width: 560px;
	background-color: var(--clrBrown);
	padding: 110px 30px 80px 140px;
	margin-top: 70px;
	position: relative;
}
.listRecruit::before,
.listRecruit::after{
	content: " ";
	display: block;
	position: absolute;
	top: 0;
}
.listRecruit::before{
	width: 50px;
	height: 360px;
	background-color: var(--clrBrown30);
	mix-blend-mode: multiply;
	left: 0;
}
.listRecruit::after{
	width: calc((100vw - 1140px) / 2);
	min-width: 30px;
	height: 100%;
	background-color: var(--clrBrown);
	right: 0;
	transform: translateX(100%);
	z-index: 1;
}
.listRecruit li{
	position: relative;
	z-index: 2;
}
.listRecruit a{
	display: block;
	color: #fff;
	font-size: 2rem;
	font-family: var(--fZen);
	font-weight: 700;
	border: 1px solid #fff;
	border-radius: 50px;
	padding: 20px 75px 20px 30px;
	position: relative;
}
.listRecruit a:hover{
	background-color: var(--clrBrownD);
}

@media print, screen and (min-width:813px){
	/* anm */
	#recruitWrapper.jsAnmStart .listRecruit{
		animation: anmFadeRight 1s ease 0.5s forwards;
	}
}


@media screen and (max-width:812px){
	#ctsWrapper {
		padding-bottom: 5px;
	}

	/*
		kv
	-----------------------------------------------------------------------------------------------*/
	#kvWrapper{
		height: calc(100svh - 50px);
		min-height: initial;
	}
	#kvWrapper .inBox{
		justify-content: center;
		align-items: flex-end;
		padding: 0 20px;
	}

	/* tit
	============================== */
	.titKv{
		gap: 20px 0;
		position: relative;
		top: -20%;
	}
	.titKv img{
		width: auto;
		height: 45px;
	}

	/* スクロール
	============================== */
	#kvWrapper .scroll{
		height: 100px;
		font-size: 1.3rem;
		padding-left: 8px;
		left: 15px;
	}


	/*
		学生のみなさまへメッセージ
	-----------------------------------------------------------------------------------------------*/
	#messageWrapper{
		width: 100%;
		height: 260px;
		background: var(--clrBase);
		border-top: 3px solid #fff;
		position: relative;
		left: auto;
		transform: translate(0, 0);
	}
	#messageWrapper .inBox{
		width: var(--wBase);
		max-width: 500px;
		background: url("../images/bg_top_message_sp.png") no-repeat bottom -5px right -25px / 300px auto;
		padding: 30px 20px;
		margin: 0 auto;
	}

	/* tit
	============================== */
	.titMessage span{
		font-size: 5rem;
		letter-spacing: 0.3rem;
		margin-bottom: 8px;
	}


	/*
		会社について
	-----------------------------------------------------------------------------------------------*/
	#aboutWrapper{
		padding-bottom: 100px;
		margin-top: 0;
	}
	#aboutWrapper::before{
		content: none;
	}
	#aboutWrapper::after{
		height: calc(100% - 100px);
		background: url("../images/bg_top_about_sp.png") repeat center center / 650px auto;
	}
	#aboutWrapper .ctsArea{
		flex-direction: column;
		gap: 30px 0;
		padding-top: 130px;
		padding-bottom: 220px;
	}

	/* txtArea
	============================== */
	/* tit */
	.titAbout{
		font-size: 6rem;
		letter-spacing: 0.3rem;
	}
	.titAbout::after{
		min-width: calc(100% + 16px);
		right: 16px;
	}

	/* txt */
	.txtAbout{
		width: 100%;
	}

	/* list
	============================== */
	.listAbout{
		gap: 40px 0;
	}

	/* tit */
	.listAbout .tit{
		font-size: 1.8rem;
		right: -10px;
		bottom: -15px;
	}
	.listAbout .tit span{
		min-height: 55px;
		padding-right: 60px;
	}

	/* ph */
	.listAbout figure{
		width: 100%;
		height: initial;
	}

	/* item:どうぶつさん
	============================== */
	.itemAboutPet01{/* 黒猫 */
		width: 140px;
		top: 15px;
		left: 80px;
	}
	.itemAboutPet02{/* 焦茶ダックス */
		width: 150px;
		top: 90px;
		left: 290px;
	}
	.itemAboutPet03{/* 白黒犬 */
		display: none;
	}
	.itemAboutPet04{/* うさぎ */
		display: none;
	}
	.itemAboutPet05{/* 茶ダックス */
		width: 111px;
		right: 80px;
		bottom: 70px;
	}
	.itemAboutPet06{/* パピヨン */
		width: 90px;
		right: 10px;
		bottom: 30px;
	}
	.itemAboutPet07{/* 茶猫 */
		width: 70px;
		right: 80px;
		bottom: -70px;
	}

	/* item:足跡
	============================== */
	.itemAboutPaw{
		display: none;
	}

	/* item:フード
	============================== */
	.itemAboutFood01{
		width: 80px;
		top: 50px;
		left: 225px;
	}
	.itemAboutFood02{
		width: 225px;
		bottom: -60px;
		left: -25px;
	}


	/*
		社員紹介
	-----------------------------------------------------------------------------------------------*/
	#peopleWrapper{
		padding-bottom: 80px;
	}

	/* tit
	============================== */
	.titPeople{
		margin-bottom: 20px;
	}
	.titPeople span{
		font-size: 6rem;
		letter-spacing: 0.3rem;
		margin-bottom: 10px;
	}


	/*
		RECRUIT
	-----------------------------------------------------------------------------------------------*/
	#recruitWrapper{
		flex-direction: column;
	}

	/* tit
	============================== */
	.titRecruit{
		font-size: 6rem;
		letter-spacing: 0.3rem;
		top: -3px;
		left: initial;
	}

	/* txtArea
	============================== */
	.txtRecruitArea{
		display: block;
		width: 100%;
		height: initial;
		padding: 70px 0 40px 0;
	}
	.txtRecruitArea::before,
	.listRecruit::after{
		width: 100vw;
		min-width: calc(100% + 40px);
		right: 50%;
		transform: translateX(50%);
	}
	.txtRecruitArea::before{
		background: url("../images/bg_top_recruit_sp.png") no-repeat center center / cover;
	}
	.txtRecruitArea::after{
		content: none;
	}
	.txtRecruitArea .txt{
		font-size: 2.4rem;
		line-height: 170%;
	}

	/* list
	============================== */
	.listRecruit{
		gap: 15px 0;
		width: 100%;
		padding: 30px 0;
		margin-top: 5px;
	}
	.listRecruit::before{
		content: none;
	}
	.listRecruit a{
		font-size: 1.8rem;
		padding: 10px 60px 10px 20px;
	}
}

/* landscape / iPad mini */
@media screen and (max-width:812px) and (min-width: 520px){
	/*
		kv
	-----------------------------------------------------------------------------------------------*/
	#kvWrapper{
		height: 400px;
		background: url(../images/bg_top_kv_landscape.png) no-repeat center top / cover;
	}
	#kvWrapper .inBox{
		justify-content: flex-start;
	}
	.titKv{
		padding-left: 50px;
	}
	#kvWrapper .kvPh{
		display: none;
	}

	/*
		学生のみなさまへメッセージ
	-----------------------------------------------------------------------------------------------*/
	#messageWrapper .inBox{
		background-position: bottom right;
	}
}