@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////

	採用情報

//////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

 ページタイトル

------------------------------------------------------------------------------*/

main > header {
	margin-bottom: 160px;
}

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

main > header {
	margin-bottom: 80px;
}
	
}

@media screen and (max-width: 767px) {
	
main > header {
	margin-bottom: 12vw;
}	

}


/*------------------------------------------------------------------------------

 キャッチコピー

------------------------------------------------------------------------------*/

main .catch {
	margin-bottom: 88px;
}

main .catch .site_column {
	max-width: 1300px;
}

main .catch p {
	position: absolute;
	top: -9%;
	left: 7.6%;
	padding: .8em .3em;
	font-size: 2.625em;
	font-weight: bold;
	line-height: 1;
	color: #FFF;
	font-feature-settings: initial;
	writing-mode: vertical-rl;
	background-color: rgba(var(--sub-color), 1);
}

main .catch figure img {
	border-radius: 10px;
}

@media (max-width: 1200px) {
	
main .catch p {
	top: -7%;
	left: 5%;
	font-size: 2em;
}
	
}

@media (max-width: 1024px) {
	
main .catch {
	margin-bottom: 60px;
}
	
main .catch p {
	font-size: 1.5em;
}
	
}

@media (max-width: 767px) {
	
main .catch {
	margin-bottom: 10vw;
}
	
main .catch p {
	font-size: 3.2vw;
}

main .catch figure img {
	border-radius: 1vw;
}
	
}


/*------------------------------------------------------------------------------

 イントロ

------------------------------------------------------------------------------*/

main .intro {
	padding-bottom: 9%;
	overflow: hidden;
}

main .intro .site_column {
	max-width: 1000px;
}

main .intro .group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

main .intro .group .text .title,
main .intro .group .text .strong {
	font-size: 1.25em;
	font-weight: bold;
}

main .intro .group .text .title {
	margin-bottom: 1.5em;
}

main .intro .group .text p:not(.title):not(.strong) {
	line-height: 2.6;
}

main .intro .group:nth-child(1) {
	flex-direction: row-reverse;
}

main .intro .group:nth-child(1) .text {
	flex: 1;
}

main .intro .group:nth-child(1) .text .title span {
	display: block;
}

main .intro .group:nth-child(1) figure {
	margin: 0 4% 0 0;
}

main .intro .group:nth-child(1) figure img {
	width: 300px;
	aspect-ratio: 1/1;
	border-radius: 10px;
} 

main .intro .group:nth-child(2) {
	position: relative;
	margin-top: 125px;
}

main .intro .group:nth-child(2) .text {
	width: 65%;
}

main .intro .group:nth-child(2) figure {
	position: absolute;
	top: 50%;
	right: -54%;
	transform: translateY(-50%);
	margin: 0;
}

main .intro .group:nth-child(2) figure img {
	width: 830px;
	aspect-ratio: 830/551;
} 

@media (max-width: 1600px) {

main .intro .group:nth-child(2) .text {
	width: 58%;
}

main .intro .group:nth-child(2) figure {
	right: -28%;
}	
	
main .intro .group:nth-child(2) figure img {
	width: 600px;
} 

}

@media (max-width: 1024px) {

main .intro .group:nth-child(1) figure img {
	width: 160px;
}

main .intro .group:nth-child(2) {
	margin-top: 70px;
}	
	
main .intro .group:nth-child(2) figure {
	right: -13%;
}
	
main .intro .group:nth-child(2) figure img {
	width: 400px;
} 
	
}

@media (max-width: 900px) {

main .intro .group:nth-child(2) figure img {
	width: 340px;
} 
	
}

@media (max-width: 767px) {

main .intro .group {
	flex-direction: column;
}	

main .intro .group:nth-child(1) figure {
	margin: 5vw 0 0;
	text-align: center;
}	
	
main .intro .group:nth-child(1) figure img {
	width: 80%;
} 	

main .intro .group:nth-child(2) {
	margin-top: 10vw;
}	
	
main .intro .group:nth-child(2) .text {
	width: 100%;
}	
	
main .intro .group:nth-child(2) figure {
	position: static;
	transform: none;
	margin-top: 5vw;
}	
	
main .intro .group:nth-child(2) figure img {
	width: 100%;
} 
	
}


/*------------------------------------------------------------------------------

 工場見学動画

------------------------------------------------------------------------------*/

#video {
	margin-top: 80px;
}

#video .site_column {
	max-width: 1000px;
}


#video .iframe_content.youtube {
	max-width: 1000px !important;
}

@media (max-width: 900px) {

#video {
	margin-top: 60px;
}	

}

@media (max-width: 767px) {

#video {
	margin-top: 0;
}	

}


/*------------------------------------------------------------------------------

 社員インタビュー

------------------------------------------------------------------------------*/

#interview {
	margin-top: 80px;
}

#interview .site_column {
	max-width: 1300px;
}

@media (max-width: 1024px) {

#interview {
	margin-top: 80px;
}

}

@media (max-width: 767px) {

#interview {
	margin-top: 0;
}	

}

/*------------------------------------------------------------------------------

 採用Q＆A

------------------------------------------------------------------------------*/

#qa {
	margin-top: 70px;
}

#qa .site_column {
	max-width: 1000px;
}

@media (max-width: 767px) {

#qa {
	margin-top: 0;
}

}


/*------------------------------------------------------------------------------

 福利厚生・新卒研修

------------------------------------------------------------------------------*/

main > .group .site_column {
	display: flex;
	justify-content: space-between;
	max-width: 1300px;
}

main > .group #benefit,
main > .group #training {
	margin-top: 20px;
}

main > .group #benefit {
	width: 62%;
	margin-right: 4%;
}

main > .group #training {
	flex: 1;
}

main > .group #training img {
	border-radius: 10px;
}

@media (max-width: 1024px) {

main > .group #benefit,
main > .group #training {
	margin-top: 20px;
}

}

@media (max-width: 767px) {

main > .group .site_column {
	flex-direction: column;
}	

main > .group #benefit,
main > .group #training {
	margin-top: 0;
}	
	
main > .group #benefit {
	width: 100%;
	margin-right: 0%;
}	

main > .group #training img {
	border-radius: 1vw;
}
	
}


/*------------------------------------------------------------------------------

 募集要項

------------------------------------------------------------------------------*/

#job_description {
	margin-top: 80px;
}

#job_description .site_column {
	max-width: 1300px;
}

#job_description h3 {
	margin-bottom: 1.3em;
	padding-bottom: .3em;
	padding-left: 0;
	border-bottom: 2px solid rgba(var(--sub-color), 1);
}

#job_description h3::before {
	display: none;
}

#job_description .group {
	display: flex;
	flex-wrap: wrap;
}

#job_description .group a {
	display: flex;
	width: 48.5%;
	margin: 3% 3% 0 0;
	padding: 1.5%;
	flex-direction: row-reverse;
	text-decoration: none;
	background-color: #FFF;
	border-radius: 10px;
	box-shadow: 0 0 .5em 0 rgba(0,0,0,.25);
}

#job_description .group a:hover {
	opacity: 1;
	filter: brightness(120%);
}

#job_description .group a:nth-child(-n+2) {
	margin-top: 0;
}

#job_description .group a:nth-child(2n) {
	margin-right: 0;
}

#job_description .group a dl {
	margin: 0;
	flex: 1;
}

#job_description .group a dl dt {
	margin-bottom: .2em;
	font-size: 1.25em;
	font-weight: bold;
	color: rgba(var(--sub-color), 1);
}

#job_description .group a dl dd {
	display: flex;
	align-items: flex-start;
	color: rgba(51,51,51,1);
}

#job_description .group a dl dd span:nth-child(1) {
	min-width: 5em;
	margin-top: .1em;
	margin-right: .8em;
	padding: 0 .5em;
	font-size: .875em;
	color: #FFF;
	background-color: rgba(var(--sub-color), 1);
	border-radius: 5px;
}

#job_description .group a dl dd span:nth-child(2) {
	line-height: 1.6;
}

#job_description .group a figure {
	width: 113px;
	margin: 0 3% 0 0;
}

#job_description .group a figure img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    object-fit: cover;
}

@media (max-width: 1024px) {

#job_description {
	margin-top: 80px;
}

#job_description .group a figure {
	width: 80px;
	margin: 0 3% 0 0;
}
	
}

@media (max-width: 900px) {

#job_description {
	margin-top: 60px;
}	

#job_description .group a dl dd {
	flex-direction: column;
}

#job_description .group a dl dd span:nth-child(1) {
	margin-bottom: .5em;
}
	
}

@media (max-width: 767px) {

#job_description {
	margin-top: 0;
}	

#job_description .group a,	
#job_description .group a figure img {
    border-radius: 1vw;
}
	
#job_description .group a {
	width: 100%;
	margin: 4vw 0 0 0;
	padding: 3vw;
}

#job_description .group a:hover {
	filter: unset;
}

#job_description .group a:nth-child(2) {
	margin-top: 4vw;
}
	
}