@charset "utf-8";
/* ===================================================
	Recruit CSS
====================================================== */

/* ---------------------------------------------------
	main_img
------------------------------------------------------ */
#main_img .main_photo { display: flex;}
#main_img .main_photo img { display: block; width: 50%; height: 500px;}
#main_img .main_tit > h1 { line-height: 43px; letter-spacing: 0.2em; text-shadow: 0 4px 4px #000;}
#main_img .main_tit .cap { right: 0; color: #d7d7d7; letter-spacing: 2px;}
#main_img .main_tit::before { height: 120px; bottom: -60px;}

@media screen and (max-width: 600px) {
	#main_img .main_photo img { height: 350px;}
	#main_img .main_tit > h1 { line-height: 1.2;}
	#main_img .main_tit .cap { right: 5px; z-index: 1; color: rgba(215, 215, 215, 0.4); letter-spacing: normal;}
	#main_img .main_tit::before { height: 70px; bottom: -35px;}
}

/* ---------------------------------------------------
	sec01（導入）
------------------------------------------------------ */
#sec01 { margin: 125px 0 0; text-align: center;}
#sec01 h2 { font-size: 46px; font-weight: normal; line-height: 80px; letter-spacing: 0.02em;}
#sec01 p { margin: 37px 0 0; line-height: 40px; letter-spacing: 0.02em;}

@media screen and (max-width: 600px) {
	#sec01 { margin: 40px 0 0; padding: 10vw 4% 0;}
	#sec01 h2 { font-size: 24px; line-height: 1.5;}
	#sec01 p { margin: 15px 0 0; line-height: 2; text-align: left;}
}

/* ---------------------------------------------------
	sec02（募集職種）
------------------------------------------------------ */
#sec02 { margin: 124px 0 0; padding: 53px 0; background: #e2e4ef;}
#sec02 .inner { display: flex; align-items: flex-start; width: 1128px; max-width: none;}
#sec02 img { display: block; width: 480px; height: auto;}
#sec02 .txt { width: 491px; margin: 0 0 0 84px; padding: 49px 0 0;}
#sec02 h2 { font-size: 36px; font-weight: normal; line-height: 45px; letter-spacing: 0.08em;}
#sec02 h2::after { content: ''; display: block; width: 229px; height: 1px; margin: 34px 0 0; background: #818699;}
#sec02 p { margin: 23px 0 0; font-size: 20px; line-height: 45px; letter-spacing: 0.01em;}

@media screen and (max-width: 600px) {
	#sec02 { margin: 10vw 0 0; padding: 10vw 0;}
	#sec02 .inner { display: block; width: 92%;}
	#sec02 img { width: 100%;}
	#sec02 .txt { width: 100%; margin: 20px 0 0; padding: 0;}
	#sec02 h2 { font-size: 22px; line-height: 1.6;}
	#sec02 h2::after { width: 150px; margin: 15px 0 0;}
	#sec02 p { margin: 15px 0 0; font-size: 16px; line-height: 1.8;}
}

/* ---------------------------------------------------
	sec03（募集要項）
------------------------------------------------------ */
#sec03 { margin: 14px 0 0; padding: 108px 0 0; background: url(../../recruit/img/sec03_bg.webp) no-repeat right top; background-size: 831px 768px;}
#sec03 h2 { font-size: 36px; font-weight: normal; line-height: 45px; letter-spacing: 0.08em; text-align: center;}
#sec03 table { width: 92%; max-width: 1380px; margin: 63px auto 0; border-collapse: collapse; border-top: 1px solid #818699; line-height: 45px; letter-spacing: 0.08em;}
#sec03 th { width: 210px; padding: 34px 10px 34px 44px; background: #616574; color: #fff; font-weight: normal; text-align: left; vertical-align: top; box-sizing: border-box;}
#sec03 td { padding: 34px 0 34px 60px; vertical-align: top;}
#sec03 tr + tr th { border-top: 1px solid #fff;}
#sec03 tr + tr td { border-top: 1px solid #818699;}
#sec03 tr:last-child td { border-bottom: 1px solid #818699;}

@media screen and (max-width: 600px) {
	#sec03 { margin: 0; padding: 10vw 0 0; background-size: 60vw auto;}
	#sec03 h2 { font-size: 22px; line-height: 1.6;}
	#sec03 table { margin: 5vw auto 0; line-height: 1.8; letter-spacing: normal;}
	#sec03 tr,
	#sec03 th,
	#sec03 td { display: block; width: 100%;}
	#sec03 th { padding: 5px 10px;}
	#sec03 td { padding: 10px 0 15px; border-bottom: 1px solid #818699;}
	#sec03 td li + li { margin: 5px 0 0;}
	#sec03 tr + tr th,
	#sec03 tr + tr td { border-top: none;}
}

/* ---------------------------------------------------
	sec04（ご応募・お問い合わせ）
------------------------------------------------------ */
#sec04 { position: relative; margin: 113px 0 0; padding: 152px 0 110px; background: #1d1d20; color: #fff; text-align: center;}
#sec04::before { content: ''; display: block; width: 1px; height: 100px; background: #818699; position: absolute; top: 0; left: 50%;}
#sec04 h2 { font-size: 36px; font-weight: normal; line-height: 45px; letter-spacing: 0.08em;}
#sec04 .lead { margin: 37px 0 0; line-height: 40px; letter-spacing: 0.08em;}
#sec04 ul { display: flex; justify-content: center; margin: 61px 0 0;}
#sec04 li { width: 451px;}
#sec04 li + li { margin: 0 0 0 54px;}
#sec04 .box { display: block; padding: 28px 10px 32px; background: #616574; color: #fff; letter-spacing: 0.08em;}
#sec04 li + li .box { padding: 26px 10px 30px; border: 1px solid #5e5e5e; background: #212121;}
#sec04 .label,
#sec04 .main { display: block; line-height: 40px;}
#sec04 .main { margin: 3px 0 0; font-size: 23px; letter-spacing: 0.01em;}
#sec04 .sub { display: block; margin: 6px 0 0; font-size: 15px; line-height: 25px;}
#sec04 li + li .main { font-size: 20px; letter-spacing: 2.4px;}
#sec04 .tel-link { color: #fff; font-size: 32px;}
#sec04 .note { margin: 17px 0 0; font-size: 15px; line-height: 25px; letter-spacing: 0.02em; text-align: left;}
#sec04 li + li .note { letter-spacing: 0.08em;}
#sec04 a:hover { color: #fff; text-decoration: none;}
#sec04 a.box { transition: background-color .5s;}

@media screen and (min-width: 601px) and (hover :hover) {
	#sec04 a.box:hover { background: #545867;}
}

@media screen and (max-width: 600px) {
	#sec04 { margin: 10vw 0 0; padding: calc(10vw + 40px) 4% 10vw;}
	#sec04::before { height: 40px;}
	#sec04 h2 { font-size: 22px; line-height: 1.6;}
	#sec04 .lead { margin: 15px 0 0; line-height: 1.8; text-align: left;}
	#sec04 ul { display: block; margin: 5vw 0 0;}
	#sec04 li { width: 100%;}
	#sec04 li + li { margin: 8vw 0 0;}
	#sec04 .box { padding: 15px 10px;}
	#sec04 li + li .box { padding: 14px 10px;}
	#sec04 .label { font-size: 15px; line-height: 1.8;}
	#sec04 .main { margin: 5px 0 0; font-size: 18px; line-height: 1.6;}
	#sec04 li + li .main { font-size: 18px; letter-spacing: 1px;}
	#sec04 .tel-link { font-size: 26px;}
	#sec04 .sub { margin: 5px 0 0; font-size: 14px; line-height: 1.6;}
	#sec04 .note { margin: 10px 0 0; font-size: 14px; line-height: 1.7;}
}
