@charset "utf-8";
/* CSS Document */
body{
	background-color:#F7F9FB;
	--base-fc:#6B7280;
	--main-color:#1F6FEB;
	color:var(--base-fc);
	--hover-color:#1a0dab;
}
.pageTitle{
	background-color:#F7F9FB;
}
.tagBox h3,.tagBox h4{
	background:transparent;
	padding:0;
	margin:0 0 25px 0;
	text-align: left;
	color:#000;	
	font-weight:700;
	&::before,&::after{
		display:none;
	}
}
.tagBox h3{
	font-size:2.4rem;
	color:#000;
}
.tagBox h4{
	font-size:1.7rem;
	border-bottom:none;
	border-radius: 0px;
	color:#000;
}
@media only screen and (max-width:768px) {
}
#main .tagBox .recruitHeader{
	display:flex;
	justify-content: space-between;
	align-items: center;
	& div:nth-child(1){
		& span{
			color:#000;
		}
	}
	& ul.recruitHeaderMenu{
        display:flex;
        gap:0 10px;
        & > li{
			list-style-type:none;
			margin:0;
			font-weight:bold;
            &:nth-child(1),& a{
                background-color:var(--main-color);
				padding:0.5em 1em;
				border-radius:10px;
				color:#fff;
			}
            &:nth-child(1)::before{
                    display:inline-block;
                    content:"\f095";
					font-family:"Font Awesome 5 Free";
					font-weight:900;
					margin-right:0.3em;
					transform: scaleX(-1);
					font-size:0.95em;
                }            
            & a{
				display:block;
				text-decoration: none;
				&:hover{background-color:var(--hover-color);}
            }
        }
	}
}
@media only screen and (max-width:768px) {
	#main .tagBox .recruitHeader{
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		& ul.recruitHeaderMenu{
			gap:0 10px;
			margin-top:15px;
			& > li{
				&:nth-child(1),& a{
					justify-content: center;
					padding:0.5em 1em;
				}
				&:nth-child(1){
					padding:0;
					&::before{display:none;}					
					& a{						
						&::before{
							display:inline-block;
							content:"\f095";
							font-family:"Font Awesome 5 Free";
							font-weight:900;
							margin-right:0.3em;
							transform: scaleX(-1);
							font-size:0.95em;
						}
					}
				}         
				
			}
		}
	}
}
.tagBox .recruitHeading{
	background-color:#ECEEF1;
	display:flex;
	justify-content: space-between;
	border-radius: 15px;
	padding:30px;
	margin-bottom:20px;
	& > div:nth-child(1){
		width:80%;
		& .toptxt,& .btmtxt{
			color:var(--base-fc);
		}
		& .toptxt{
			font-size:0.9em;
		}
		& .btmtxt{
			margin-bottom:10px;
		}
		& h2{
			border-left:none;
			padding:0;
			color:#000;
			margin-bottom:10px;
			font-size:2.8rem;
		}
		& .flexBox1{
			margin-bottom:0;
			gap:0 1em;
			& > div[class^="buttonLink"]{
				width:auto;
				display:inline-block;
				margin:0;
				font-weight:bold;
				& a{
					padding:0.5em 1em;
					border: 1px solid #e5e7eb;
					border-radius: 10px;
					&::before{
						display:none;
					}					
				}
			}
			& > div.buttonLink1 a{
				background-color:var(--main-color);
				color:#fff;
				&:hover{background-color:var(--hover-color);}
			}
			& > div.buttonLink2 a{
				background-color:#ffffff;
				color:#000;
				&:hover{
					background-color:var(--hover-color);
					color:#fff;
				}
			}
		}
	}
	& > div:nth-child(2){
		width:20%;
		& > img{
			display:block;
			border-radius: 15px;
		}
	}
}
@media only screen and (max-width:768px) {
	.tagBox .recruitHeading{
		flex-direction: column;
		justify-content: flex-start;
		padding:20px;
		margin-bottom:20px;
		& > div:nth-child(1){
			width:100%;
			& h2{
				font-size:2.2rem;
				line-height:1.4;
			}
			& .flexBox1{
				margin-bottom:15px;
			}
		}
		& > div:nth-child(2){
			width:100%;
		}
	}
}
.tagBox .recruiFeatures{
	display:flex;
	gap:15px;
	flex-wrap: wrap;
	margin-bottom:25px;
	color:#000;
	& > div{
		width:calc((100% - 45px) /4);
		padding:1em;
		background-color:#fff;
		border-radius: 15px;
		box-shadow:0 2px 8px rgba(15,23,36,0.04);
		display:flex;
		flex-direction: column;
		justify-content: center;
		position:relative;
		padding:15px 15px 15px calc(2.5em + 30px);
		font-size:1.7rem;
		&::before{
			font-family: 'Noto Color Emoji', sans-serif;
			position:absolute;
			width:2.5em;
			height:2.5em;
			background-color:#F1F5F9;
			display:flex;
			align-items: center;
			justify-content: center;
			font-size:1em;
			left:15px;
			border-radius: 10px;
		}
		& .title{
			font-weight:bold;
		}
	}
	& > div:nth-child(1)::before{content:"🏫";}
	& > div:nth-child(2)::before{content:"🕒";}
	& > div:nth-child(3)::before{content:"💸";}
	& > div:nth-child(4)::before{content:"👔";}
}
@media only screen and (max-width:768px) {
	.tagBox .recruiFeatures{
		& > div{
			width:calc((100% - 15px) /2);
			padding:15px 10px 15px calc(1.5em + 20px);
			font-size:1.7rem;
			line-height:1.6;
			&::before{
				width:1.5em;
				left:10px;
			}
		}
	}
}
.tagBox .exampleDaily{
	display:flex;
	flex-direction: row;
	gap:15px;
	margin-bottom:25px;
	color:#000;
	& > div{
		background-color:#fff;
		display:flex;
		gap:15px;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding:15px;
		border-radius: 15px;
		box-shadow:0 2px 8px rgba(15, 23, 36, 0.04);
		width:100%;
		font-size:1.7rem;
		& .title{
			font-weight:bold;
		}
	}
}
@media only screen and (max-width:768px) {
	.tagBox .exampleDaily{
		flex-direction: column;
		& > div{
			gap:15px;
			flex-direction:row;
			align-items: flex-start;
			text-align: left;
			font-size:1.7rem;
			& .title{
				font-weight:bold;
			}
		}
	}
}
#main .tagBox .availablePositions{
	& ul{
		display:flex;
		flex-wrap: wrap;
		gap:15px;
		& > li{
			width:calc((100% - 15px)/2);
			display:flex;
			gap:15px;
			list-style-type: none;
			margin:0;
			background-color:#fff;
			box-shadow:0 1px 6px rgba(2,6,23,0.03);
			padding:15px;
			color:var(--base-fc);
			border-radius: 10px;
			& > div{
				--child2-width:8em;
				&:nth-child(1){
					width:calc(100% - var(--child2-width));
					& h4{
						color:#000;
						margin-bottom:0;
					}
					& p{
						margin-bottom:0;
						font-size:1.5rem;
					}
				}
				&:nth-child(2){
					width:var(--child2-width);
					display:flex;
					align-items: center;
					& a{
						background-color:var(--main-color);
						color:#fff;
						text-decoration: none;
						border:2px solid #000;
						border-radius: 10px;
						width:100%;
						height:2.8em;
						display:flex;
						align-items: center;
						justify-content: center;
						&:hover{background-color:var(--hover-color);}
					}
				}
			}
		}
	}
}
@media only screen and (max-width:768px) {
	#main .tagBox .availablePositions{
		& ul{
			flex-direction: column;
			flex-wrap:nowrap;
			gap:15px;
			& > li{
				width:100%;
				& > div{
					--child2-width:5em;
					&:nth-child(1){
						width:calc(100% - var(--child2-width));
					}
					&:nth-child(2){
						width:var(--child2-width);
					}
				}
			}
		}
	}
}
.tagBox .flexBox1.otherinfo{
	color:var(--base-fc);
	gap:0 15px;
	& > div{
		--otherinfo-width:40%;
		&:nth-of-type(1){
			margin-right:0;
			width:calc(100% - var(--otherinfo-width));
		}
		&:nth-of-type(2){
			width:var(--otherinfo-width);
		}
	}
	& dl{
		padding:20px 15px;
		box-shadow:0 2px 8px rgba(15,23,36,0.04);
		background-color:#fff;
		margin-bottom:20px;
		border-radius: 15px;
		& dt{
			font-weight:bold;
			color:#000;
			font-size:1.1em;
			margin-bottom:15px;
		}
		& dd{
			& ul{
				margin-bottom:5px;
				margin-left:2.5em;
				& > li{
					margin:0 0 0 20px;
					&:last-child{
						margin-bottom:0;
					}
				}
			}
		}
	}
	& h4{
		font-size:1.2em;
		margin-bottom:20px;
	}
	& ul.faqList{
		& > li{
			list-style-type: none;
			margin:0 0 10px 0;
			box-shadow:0 2px 8px rgba(15,23,36,0.04);
			background-color:#fff;
			border-radius: 15px;
			padding:20px 15px;
			& .ques{
				font-size:1.1em;
				font-weight:bold;
				color:#000;
			}
			& .ans{
				padding:15px 0;
			}
		}
	}
}
@media only screen and (max-width:768px) {
	.tagBox .flexBox1.otherinfo{
		gap:15px;
		display:flex;
		flex-direction: column;
		& > div{
			--otherinfo-width:100%;
			&:nth-of-type(1){
				margin-right:0;
				width:var(--otherinfo-width);
			}
			&:nth-of-type(2){
				width:var(--otherinfo-width);
			}
		}
	}
}
.tagBox .buttonLink1.recruit{
	border-radius: 15px;
	& a{
		background-color:var(--main-color);
		padding:10px 30px;
		font-weight:bold;
		&::before{
			display:none;
		}
		&:hover{background-color:var(--hover-color);}
	}
	
}

#main .tagBox p.footerTxt{
	font-size:0.9em;
	& a{
		color:var(--base-fc),
	}
}
.recruitFooter{
	display:flex;
	justify-content: space-between;
	font-size:0.9em;
	& a{
		color:var(--base-fc),
	}
}
@media only screen and (max-width:768px) {
	.recruitFooter{
		flex-direction: column;
		justify-content: flex-start;
	}
}
.fixEntryBtn{
	position:fixed;
	right:15px;
	bottom:120px;
	z-index:3;
	& a{
		--fixEntryBtn-height:3em;
		padding:0em 1em;
		background-color:var(--main-color);
		color:#fff;
		display:flex;
		height:var(--fixEntryBtn-height);
		border-radius: calc(var(--fixEntryBtn-height) / 2);
		justify-content: center;
		align-items: center;
		font-weight:bold;
		font-size:1.2em;
		&:hover{background-color:var(--hover-color);}
	}
}
@media only screen and (max-width:768px) {
	.fixEntryBtn{
		right:5px;
		bottom:60px;
}