@charset "UTF-8";

.pc { display:block; }
.tb { display:none; }
.sp { display:none; }	


.container {
	max-width: 830px;
	width: 90%;
}

.page_guide {
	margin: 6rem auto 3rem;
	text-align: center;
	line-height: 1.8;
	p{
		text-align: left;
	}
}

.guide_title {
    font-weight: 700;
    font-size: 20px;
    margin: 5rem 0 3rem;
    padding: 10px 15px;
    border-left: 10px solid #004986;
    color: #004986;
    background-color: #F2F2F2;
}

.guide_title_bg {
    font-weight: 700;
    font-size: 20px;
    margin: 3rem 0 3rem;
    padding: 10px 15px;
    border-left: 10px solid #004986;
    color: #004986;
    background-color: #FFF;
}

.work_l {
	text-align: center;
}

.work_l P {
	text-align: left;
	margin-bottom: 2rem;
}

a.btn {
	padding: 10px 0px;
    width: 220px;
    color: #fff;
    background-color: #0057A2;
    font-size: 0.9em;
    display: inline-block;
    border-radius: 1em;
	transition-property: opacity;
	-webkit-transition-property: opacity;
	transition-duration: .5s;
	-webkit-transition-duration: .5s;
}

a.btn:hover {
  opacity: .7;
}

.work_r {
	text-align: right;
}

.work_r img {
	width: 100%;
}


.interview .box {
	background: #004986 url("../img/security_guard.png") no-repeat 95% 50%;
	background-size: 40%;
	padding: 1rem 1rem 0.25rem;
	color: #fff;
	line-height: 1;
}

.interview .box p {
	margin-bottom: 0.75rem;
}

p.staff_name {
	font-size: 1.5em;
}

.interview .text_r {
	margin: 0 0 5rem 2rem;
}

.interview .text_r dt {
	color: #004986;
	font-weight: bold;
}

.interview .text_r dd {
	margin-bottom: 1rem;
}




.grid {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.photo-gallery .items:after {
  content:"";
  display:block;
  width: 32%;
  height:0;
}
.photo-gallery .item {
  width: 32%;
  height: 100px;
  background: #3D9FB1;
  margin-bottom: 10px;
}



.photo-gallery {
	margin: 0 auto 80px;
}

.photo-gallery img {
	width: 100%;
	margin: 0 0 20px;
	aspect-ratio: 3 / 2;
    object-fit: cover;
}



.faq_bg {
	background-color: #F2F5FA;
	width: 100%;
	padding: 2rem 0;
	display: block;
}

.faq_box dl {
	padding: 2rem;
	background: #fff;
	margin-top: 1rem;
}

.faq_box dt {
    position: relative;
    padding: 0 0 10px 25px;
    margin: 0 0 10px;
    border-bottom: 1px solid #004986;
	color: #004986;
	font-weight: bold;
}

.faq_box dt::before {
    position: absolute;
    top: 2px;
    left: 0;
    content: "Ｑ.";
    font-size: 18px;
    font-weight: bold;
    color: #004986;
    line-height: 1;
}

.faq_box dd {
    position: relative;
    padding: 0 0 0 25px;
    margin: 0;
}

.faq_box dd::before {
    position: absolute;
    top: 2px;
    left: 0;
    content: "A.";
    font-size: 18px;
    font-weight: bold;
    color: #707070;
    line-height: 1;
}


.listings_table table {
	line-height: 1.45;
	max-width: 720px;
	width: 90%;
    margin: 0px auto 0px;
	letter-spacing: 1px;
}

.listings_table table tr {
    border-bottom: 1px dotted #3E603B;
}

.listings_table table td {
    line-height: 1.6em;
    text-align: left;
    padding: 10px 10px;
	font-feature-settings: "palt";
}

td.item {
    width: 160px;
}





@media only screen and (min-width:580px) and (max-width: 992px){

	.pc { display:none; }
  	.tb { display:block; }
	
	.guide_column {
		flex-direction: column;
	}
	.guide_column_reverse {
		flex-direction: column-reverse;
	}

	.page_guide {
		margin: 5rem auto 3rem;
		text-align: center;
		line-height: 1.8;
	}
	
	.work_l {
		margin-top: 2rem;
	}	
	
	.interview .box {
		background-size: 16%;
	}
	
	.interview .text_r {
		margin: 2rem 0 5rem;
	}

	.listings_table table {
		width: 100%;
		margin-bottom: 7rem;
	}	
	
}



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

	.pc { display:none; }
  	.sp { display:block; }
	
	.guide_column {
		flex-direction: column;
	}
	.guide_column_reverse {
		flex-direction: column-reverse;
	}
	
	.container {
		width: 100%;
	}
	
	.page_guide {
		margin: 5rem auto 3rem;
		text-align: left;
	}
	
	.guide_title_bg {
		margin: 0 0 2.5rem;
	}
	
	
	.work_l {
		margin-top: 2rem;
	}
	
	
	.interview .box {
		background-size: 25%;
		padding: 1rem 1rem 0.65rem;
	}

	.interview .box p {
		margin-bottom: 0.35rem;
	}

	.interview .text_r {
		width: 100%;
		margin: 2.5rem 0;
	}

	.interview .text_r dd {
		word-break: break-all;
	}
	
	
	.faq_bg {
		padding: 3rem 0 2rem;
	}

	.faq_box dl {
		padding: 1rem;
		margin-top: 1.5rem;
	}


	.listings_table table {
		width: 100%;
		font-size: 0.9rem;
		margin-bottom: 6rem;
	}

	.listings_table table td {
		padding: 10px 5px;
	}

	td.item {
		width: 90px;
	}

}