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

/*
	募集要項
-----------------------------------------------------------------------------------------------*/
/* 共通
========================================*/
.recruitPage #cmnPageHead{
	height: 360px;
}
/* 各セクション */
#guidelines .ctsArea{
padding: 40px 30px 80px 30px;
}
#courses .ctsArea{
	padding: 40px 30px 0 30px;
}
/* テキスト */
.recruitPage .txtSmall{
	font-size: 1.2rem;
}
.recruitPage .txtCenter{
	text-align: center;
	margin: 10px auto 0 auto;
	letter-spacing: 0.05em;
}
.recruitPage .leadTxt{
	line-height: 180%;
	letter-spacing: 0.08em;
}
#coursesSelect01,
#coursesSelect02,
#coursesSelect03{
	padding-bottom: 90px;
}
/* テキストリンク */
.txtLinkArea{
	margin-top: 15px;
}

/* Table テーブル
========================================*/
.tblBase{
	border: 1px solid var(--clNavy);
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
/* テーブルが最後に来た時のアキ */
#coursesSelect02 .tblBase,
#coursesSelect03 .tblBase,
#coursesSelect04 .tblBase{
	margin-top: 60px;
}
.tblBase th{
	width: 180px;
	background:rgb(6 55 87 / 0.08);
	border-bottom: 1px solid rgb(6 55 87 / 0.5);
	color: var(--clNavy);
	font-size: 1.4rem;
	font-weight: 500;
}
.tblBase td{
	border-bottom: 1px solid rgb(6 55 87 / 0.5);
	font-size: 1.4rem;
	font-weight: 400;
	padding:20px;
}
.tblBase tr:last-child th,
.tblBase tr:last-child td {
  border-bottom: none;
}
/* リスト */
.listTblIn{
	margin-top: 10px;
}
.listTblIn li{
	position: relative;
	margin: 5px 0 0 0;
	padding: 0 0 0 15px;
}
.listTblIn li::before{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
/* リスト※印 */
.listTblIn.notes li{
	font-size: 1.2rem;
}
.listTblIn.notes li::before{
	content: "※";
}
/* リスト●印　ベーシック */
.listTblIn.basic li.tit{
	font-weight: 400;
	padding: 0 0 0 17px;
	font-size: 1.3rem;
}
#coursesSelect02 .listTblIn.basic .tit,
#coursesSelect03 .listTblIn.basic .tit{/* 細字 */
	font-weight: 400;
}
/* #coursesSelect01、02、03のみ反映 */
#coursesSelect01 .listTblIn,
#coursesSelect02 .listTblIn,
#coursesSelect03 .listTblIn,
#coursesSelect02 .listTblIn li:first-of-type,
#coursesSelect03 .listTblIn li:first-of-type{
	margin-top: 0;
}
#coursesSelect01 .tblBase .txtSmall{
	margin-top: 15px;
}

.listTblIn.basic li.tit::before{
	content: "●";
	color: var(--clGold);
}
.listTblIn.basic li{
	font-size: 1.4rem;
}
.listTblIn.basic li::before{
	content: "・";
}

/*
	4つの採用コース
-----------------------------------------------------------------------------------------------*/
/* アンカー
========================================*/
.listAnchor{
	display: flex;
	gap: 10px;
	width: 100%;
	margin: 45px auto;
}
.listAnchor li{
	width: calc(100% / 4);
	text-align: center;
}
.listAnchor li a{
	display: grid;
	place-content: center;
	min-height: 62px;
	font-size: 1.4rem;
	font-weight: 600;
	border: 1px solid #000000;
	position: relative;
	transition: var(--trstCmn);
}
.listAnchor li a .num{
	display: grid;
	place-content: center;
	width: 90px;
	min-height: 16px;
	padding-top: 1px;
	font-family: var(--ffEn);
	font-size: 1.2rem;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 100%;
	background-color: #000000;
	position: absolute;
	top: -9px;
	left: calc(50% - 45px);
}
.listAnchor li a::after{
	content: ' ';
	display: block;
	width: 1px;
	height: 20px;
	background-color: rgb(0 0 0 / 0.3);
	position: absolute;
	top: 52px;
	left: 50%;
	transition: var(--trstCmn);
}
/* 赤文字ショルダー */
.listAnchor li .subTit{
	color: var(--clRed);
	display: inline-block;
	font-size:1.3rem;
	font-weight: 500;
	background: linear-gradient(to top, transparent 2px, #FFFFFF 2px, #FFFFFF 8px, transparent 8px);	
	letter-spacing: 0.05em;
	margin-bottom: 20px;
	position: relative;
}
.listAnchor li .subTit::before,
.listAnchor li .subTit::after{
	content: ' ';
	display: block;
	width: 1px;
	height: 20px;
	background-color:var(--clRed);
	position: absolute;
}
.listAnchor li .subTit::before{
	bottom: 0;
	left: -10px;
	transform: rotate(-30deg);
}
.listAnchor li .subTit::after{
	bottom: 0;
	right: -10px;
	transform: rotate(30deg);
}
@media (any-hover: hover){
	.listAnchor li a:hover{
		color: #FFFFFF;
		background-color: var(--clGold);
	}
	.listAnchor li a:hover::after{
		height: 0;
		bottom: -14px;
		top: auto;
	}
}

/* コースタイトル
========================================*/
.coursesSelectTit{
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--clGray);
	border-top: 1px solid #000;
	font-size: 2.0rem;
	font-weight: 800;
	margin-bottom: 30px;
}
.coursesSelectTit .num{
	display: flex; 
	align-items: center;
	justify-content: center;
	background: var(--clGold);
	color:#fff;
	flex-shrink: 0; 	
	font-family: var(--ffEn);
	font-weight: 600;
	text-align: center;
	width: 120px;
	min-height: 58px;
}

/*　採用フロー
========================================*/
.recruitPage .flowArea{
	padding-top:40px;
}
.recruitPage .flowTit{
	font-size: 1.8rem;
	font-weight: 800;
	padding-left: 20px;
	margin-bottom: 20px;
	position: relative;
}
.recruitPage .flowTit::before{
	content: "";
	background: #000;
	display: inline-block;
	position: absolute;
	width: 3px;
	height: 30px;
	left: 0;
}
.recruitPage .flowArea .listFlow{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.recruitPage .flowArea .listFlow li{
	flex: 1 1 0;
	background: rgb(255 255 255 / 0.25);
	border: 1px solid var(--clNavy);
	color: var(--clNavy);
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
	padding-block: 20px;
	position: relative;
}
/* 5個以上のときだけ適用 */
.recruitPage .flowArea .listFlow:has(li:nth-child(5)) > li {
	flex: 0 0 calc((100% - 20px * 2) / 3);
}
/* 黒三角 */
.recruitPage .flowArea .listFlow li::after{
	content: ' ';
	display: block;
	width: 6px;
	height: 9px;
	background: url(../images/ico_arrow_career_want.svg) left top no-repeat;
	background-size: 6px 9px;
	position: absolute;
	top: calc(50% - 3px);
	right: -15px;
}
.recruitPage .flowArea .listFlow li:last-child::after {
  content: none;
}

/* ボックス
========================================*/
.coursesBox{
	background: rgb(255 255 255 / 0.25);
	border: 1px solid var(--clNavy);
	margin-top: 60px;
	padding-block: 35px;
	position: relative;
}
.coursesBoxTit{
	background: #fff;
	border: 1px solid #000;
	color: var(--clNavy);
	font-size: 1.7rem;
	font-weight: 700;
	text-align: center;
	position: absolute;
	padding-block: 7px;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 290px;
}
.listCourses{
	display: flex;
	justify-content: center;
}
.listCourses.dot{
	align-items: center;
}
.listCourses.dot li{
	flex: 1 1 0;
	position: relative;
	padding: 10px 0;
}	
.listCourses.dot li::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(to bottom,rgb(6 55 87 / 1) 0 4px,transparent 2px 5px);
}
.listCourses.dot li:last-child::after{
  content: none;
}
.listCourses li.titLine{
	color: var(--clNavy);
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
}
.listCourses li.titLine .markerW{
	display: inline;
	background: linear-gradient(to top, transparent 3px, #fff 3px, #fff 6px, transparent 6px);	
}
.listCourses li.titLine .txtColGold{
	color: var(--clGold);
}
/* タイトル */
.listCourses .tit{
	background: var(--clNavy);
	color: #fff;
	font-size: 1.8rem;
	font-weight: 800;
	width: fit-content;
	padding:2px 6px 4px 6px;
}
.listCourses .txt{
	font-size: 1.4rem;
	line-height: 180%;
}
/* 写真付き */
.listCourses.picBox{
	position: relative;
}
.listCourses.picBox .picBoxVisual{
	position: relative;
	text-align: center;
	margin-bottom: 15px;
	overflow: hidden;
}
.listCourses.picBox .picBoxVisual::before{
	width: 100%;
	height: 170px;
	content: "";
	position: absolute;
	inset: 0;
	top: -12px;
  background: var(--patDots);
	opacity: 0.5;
	z-index: 0;
}
/* 中身を前に出す */
.listCourses.picBox .picBoxVisual > *{
	position: relative;
	z-index: 1;
}
.listCourses.picBox .picBoxVisual img{
  position: relative;
  z-index: 1;
  width: 200px;
}
.listCourses.picBox li{
	width: 100%;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 12px;
	padding: 0 50px;
}
.listCourses.picBox li::after{
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(to bottom,rgb(6 55 87 / 1) 0 4px,transparent 2px 5px);
	left: 50%;
}
.listCourses.picBox .comment{
	background: rgb(6 55 87 / 0.08);
	color: var(--clNavy);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 160%;
	text-align: justify;
	padding: 25px;
	margin-top: 20px;
	position: relative;
}
.listCourses.picBox .comment .shoulder{
	border-radius: 50%;
	background: var(--clGold);
	color: #fff;
	font-size: 1.2rem;
	padding: 8px;
	position: absolute;
	letter-spacing: 0.05em;
	top: -20px;
	left: -20px;
}
.listCourses.picBox .comment .shoulder .txtSmall{
	font-size: 1.0rem;
}
/* こんなAO日本一を求めています */
.listCoursesIcon {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
@media screen and (width <= 812px) {
	.listCoursesIcon {
		grid-template-columns: repeat(2, 1fr);
	}
}
.listCoursesIcon > li{
	position: relative;
	padding: 20px;
	display: flex;
	align-items: center;	
	flex-direction: column;	
}
/* ===== 縦線（共通） ===== */
.listCoursesIcon > li::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(to bottom,rgb(6 55 87 / 1) 0 4px,transparent 2px 5px	);
}
/* PC：4列目は縦線なし */
.listCoursesIcon > li:nth-child(4n)::before {
	display: none;
}
/* ===== 横線（デフォルトOFF） ===== */
.listCoursesIcon > li::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: repeating-linear-gradient(to right,rgb(6 55 87 / 1) 0 4px,transparent 2px 5px);
	display: none;
}
.listCoursesIcon img{
	width: 114px;
	margin: 0 auto;
	display: block;
}
.listCoursesIcon .genre{
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--clNavy);
	text-decoration: underline;
	text-underline-offset:11px;
	margin-block: 20px;
}
.listCoursesIcon li .listGenre li{
	margin-top: 5px;
	font-size: 1.3rem;
	position: relative;
	padding-left: 18px;
	letter-spacing: 0.05em;
}
.listCoursesIcon li .listGenre li::before{
	content: "●";
	color: var(--clGold);
	left: 0;
	position: absolute;
}
.listCoursesIcon li:last-child::after,
.listCoursesIcon li .listGenre li::after{
	content: none;
}
/* 経験を求めてます */
.listCoursesExp{
	align-items: center; 
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 35px 20px;
	max-width: 768px;
	margin: 20px auto 0 auto;
}
.listCoursesExp li{
	position: relative;
	font-size: 1.6rem;
	padding-left: 40px;
}
.listCoursesExp li::before{
	content: "";
	display: inline-block;
	background: url(../images/ico_list_course_check_pc.png) no-repeat left center;
	background-size: 26px 26px;
	width: 26px;
	height: 26px;
	position: absolute;
	left: 0;
	top: 50%;
  transform: translateY(-50%);
}


/* 
	SP
-----------------------------------------------------------------------------------------------*/
@media screen and (width <= 812px){
	/*
	-----------------------------------------------------------------------------------------------*/
	/*
		募集要項
	-----------------------------------------------------------------------------------------------*/
	/* 共通
	========================================*/
	.recruitPage #cmnPageHead{
		height: 183px;
	}
	/* 各セクション */
	#guidelines .ctsArea{
	padding: 20px 0px 40px 0px;
	}
	#courses .ctsArea{
		padding: 20px 0px 0 0px;
	}
	/* テキスト */
	.recruitPage .txtSmall{
		font-size: 1.0rem;
	}
	.recruitPage .txtCenter{
		text-align: left;
	}
	.recruitPage .leadTxt{
		line-height: 160%;
	}
	#coursesSelect01,
	#coursesSelect02,
	#coursesSelect03{
		padding-bottom: 50px;
	}

	/* Table テーブル
	========================================*/
	/* テーブルが最後に来た時のアキ */
	#coursesSelect02 .tblBase,
	#coursesSelect03 .tblBase,
	#coursesSelect04 .tblBase{
		margin-top: 30px;
	}
	.tblBase th{
		width: 100%;
		display: block;
		padding-block: 10px;
	}
	.tblBase td{
		width: 100%;
		display: block;
		font-size: 1.3rem;
		padding:15px;
	}
	/* リスト */
	.listTblIn{
		margin-top: 5px;
	}
	.listTblIn.basic li{
		font-size: 1.3rem;
	}

	/*
		4つの採用コース
	-----------------------------------------------------------------------------------------------*/
	/* アンカー
		========================================*/
	.listAnchor{
		flex-wrap: wrap;
		gap: 20px 10px;
		padding-inline: 0;
		margin: 25px 0 50px 0;
	}
	.listAnchor li{
		width: calc((100% - 10px)/2);
	}
	.listAnchor li a{
		min-height: 54px;
		font-size: 1.1rem;
	}
	.listAnchor li a .num{
		width: 74px;
		min-height: 13px;
		font-size: 1rem;
		top: -7px;
		left: calc(50% - 37px);
	}
	.listAnchor li a::after{
		height: 10px;
		top: 48px;
		left: 50%;
	}
	@media (any-hover: hover){
		.listAnchor li a:hover::after{
			height: 0;
			bottom: -6px;
			top: auto;
		}
	}
	/* 赤文字ショルダー */
	.listAnchor li .subTit{
		font-size:1.0rem;
		margin-bottom:15px;
		background: linear-gradient(to top, transparent 2px, #FFFFFF 2px, #FFFFFF 6px, transparent 6px);	
	}
	.listAnchor li .subTit::before,
	.listAnchor li .subTit::after{
		height: 12px;
	}
	.listAnchor li .subTit::before{
		left: -5px;
	}
	.listAnchor li .subTit::after{
		right: -5px;
	}
	@media (any-hover: hover){
		.listAnchor li a:hover{
			color: #FFFFFF;
			background-color: var(--clGold);
		}
		.listAnchor li a:hover::after{
			height: 0;
			bottom: -14px;
			top: auto;
		}
	}

	/* コースタイトル
	========================================*/
	.coursesSelectTit{
		font-size: 1.6rem;
		margin-bottom: 20px;
		gap: 15px;
	}
	.coursesSelectTit .num{
		width: 60px;
		padding-block: 10px;
	}

	/*　採用フロー
	========================================*/
	.recruitPage .flowArea{
		padding-top:30px;
	}
	.recruitPage .flowTit{
		font-size: 1.6rem;
		padding-left: 15px;
	}
	.recruitPage .flowTit::before{
		height: 26px;
	}
	.recruitPage .flowArea .listFlow{
		flex-direction: column;
	}
	.recruitPage .flowArea .listFlow li{
		font-size: 1.3rem;
		padding-block: 8px;
	}
	/* 6個以上のときだけ適用 */
	.recruitPage .flowArea .listFlow:has(li:nth-child(6)) > li {
		flex: 0 0 100%;
	}
	/* 黒三角 */
	.recruitPage .flowArea .listFlow li::after{
		top: 44px;
		right: 50%;
		transform:rotate(90deg) translateX(-50%);
	}

	/* ボックス
	========================================*/
	.coursesBox{
		margin-top: 40px;
		padding-block: 20px;
	}
	#coursesSelect02 > .coursesBox:nth-of-type(3){
		padding: 40px 10px 20px 10px;
	}
	.coursesBoxTit{
		font-size: 1.4rem;
		width: 240px;
	}
	.listCourses{
		flex-direction: column;
		padding-inline: 20px;
	}
	.listCourses.dot li{
		flex: none;
		width: 100%;
		padding: 20px 0;
	}	
	.listCourses.dot li::after{
		width: 100%;
		height: 1px;
		top: auto;
		bottom: 0;
		right: auto;
		left: 0;
		background: repeating-linear-gradient(to right,rgb(6 55 87 / 1) 0 4px,transparent 2px 5px);
	}
	/* タイトル */
	.listCourses .tit{
		font-size: 1.5rem;
		padding:2px 5px 3px 5px;
	}
	.listCourses .txt{
		font-size: 1.3rem;
	}
	/* 写真付き */
	.listCourses.picBox {
		gap: 50px;
	}	
	.listCourses.picBox .picBoxVisual{
		text-align: center;
		margin-block: 10px;
	}	
	.listCourses.picBox .picBoxVisual::before{
		width: 100%;
		height: 100%;
		top: -7px;
	}
	.listCourses.picBox .picBoxVisual img{
		width: 209px;
	}
	.listCourses.picBox li{
		width: 100%;
		padding: 0;
		position: relative;
	}
	.listCourses.picBox li::after{
		width: 100%;
		height: 1px;
		top:-18px;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		background: repeating-linear-gradient(to right,rgb(6 55 87 / 1) 0 4px,transparent 2px 5px);
	}
	.listCourses.picBox li:first-of-type:after{
		content: none;
	}
	.listCourses.picBox .comment{
		font-size: 1.1rem;
	}
	.listCourses.picBox .comment .shoulder{
		top: -20px;
		left: -10px;
	}
	/* こんなAO日本一を求めています */
	.listCoursesIcon > li{
		padding: 10px 10px 20px 10px;
	}
	/* 横線ON */
	.listCoursesIcon li::after {
		display: block;
	}
	/* 2列目は縦線なし */
	.listCoursesIcon > li:nth-child(2n)::before {
		display: none;
	}
	/* 最下段は横線なし */
	.listCoursesIcon > li:nth-last-child(-n+2)::after {
		display: none;
	}
	.listCoursesIcon img{
		width: 80px;
	}
	.listCoursesIcon .genre{
		font-size: 1.5rem;
		text-underline-offset:8px;
		margin-block: 10px;
	}
	.listCoursesIcon li .listGenre li{
		font-size: 1.0rem;
		padding-left: 14px;
	}
	/* 経験を求めてます */
	.listCoursesExp{
		grid-template-columns: 1fr;
		gap: 20px; 
		max-width: 100%;
		padding: 0 15px;
	}
	.listCoursesExp li{
		font-size: 1.4rem;
		padding-left: 28px;
	}
	.listCoursesExp li::before{
		background: url(../images/ico_list_course_check_sp.png) no-repeat left center;
		background-size: 20px 20px;
		width: 20px;
		height: 20px;
	}
}
@media only screen and (width <= 812px) and (orientation: landscape){
	
}