@charset "UTF-8";

/* ===============================
	style
=============================== */

.bg-green {
	background-color: #E1E6E6;
}

/* ------ トップエリア ------ */

#main-visual {
	outline: 2px solid #345D5F;
}

/* ------ 魅力 ------ */

#attraction .detail {
	background-color: #FDFDFC;
}

/* タイトル */
#attraction .title::before {
	background-color: #345D5F;
}

/* テキスト・写真 */
#attraction .photo {
	box-shadow: 20px 20px 0px 0px #345D5F;	
}

/* ------ 研修生の練習風景 ------ */

#practice ul {
	width: 100%;
}

#practice ul li {
	width: 320px;
	background-color: #fff;
	position: relative;
}

#practice ul li .photo {
	width: 100%;
	height: 350px;
}
#practice ul li .photo img {
	height: 350px;
	object-fit: cover;
}

#practice ul li p {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	color: #345D5F;
	padding: 7rem 1rem 3rem;
}

#practice ul li .pnum {
	width: 120px;
	height: 120px;
	position: absolute;
	top: 291px;
	left: 50%;
	transform: translateX(-50%);
}

/* ------ よくあるご質問 ------ */

#faq ul li.ttl {
	background-color: #E1E6E6;
}
#faq ul li.ttl::before {
	color: #345D5F;
}

/* ------ 募集要項 ------ */

#description h4 {
	background-color: #345D5F;
}

#description table tr:not(:last-of-type) {
	border-bottom: 2px solid #E7EAEA;
}

#description table td:nth-child(1) {
	background-color: #B8C8C9;
}
#description table td:nth-child(2) {
	background-color: #FDFDFC;
}

#description table td .cap {
	color: #345D5F;
}

/* 採用までの流れ */
#description ul#step li p.title {
	background-color:#B8C8C9;
}

/* エントリーボタン */
#description .formbtn a {
	background-color: #345D5F;
}
#description .formbtn a:hover {
	background-color: #5A9093;
}

/* 電話 */
#description ul.call {
	border: 2px solid #345D5F;
}

#description ul.call li.ttl {
	background-color: #345D5F;
}
#description ul.call li.number p.tel a:hover {
	color: #345D5F;
}

/* ===============================
	PC / Tab Style
=============================== */
@media print , screen and (min-width: 481px) {	

	/* ------ ページ内リンク ------ */

	#pnavi {
		border-top: 2px solid #345D5F;
		border-bottom: 2px solid #345D5F;
	}
	#pnavi ul a {
		color: #345D5F;
	}
	
	/* ------ 研修生の練習風景 ------ */

	#practice ul {
		justify-content: space-between;
	}
	
	/* ------ 募集要項 ------ */

	/* 採用までの流れ */
	#description ul#step li:not(:last-of-type)::after {
		border-left: 20px solid #345D5F;
	}

}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 480px) {

	/* ------ 魅力 ------ */

	/* テキスト・写真 */
	#attraction .photo {
		box-shadow: 3vw 3vw 0px 0px #345D5F;
	}

	/* ------ 研修生の練習風景 ------ */

	#practice ul li {
		width: 100%;
	}
	#practice ul li:not(:last-of-type) {
		margin-bottom: 3rem;
	}

	#practice ul li .photo,
	#practice ul li .photo img {
		width: 100%;
		height: 200px;
	}
	#practice ul li:nth-of-type(1) .photo img,
	#practice ul li:nth-of-type(3) .photo img {
		object-position: 50% -45px;
	}

	#practice ul li p {
		font-size: 1.2rem;
		padding: 5.5rem 1rem 2.5rem;
	}
	
	#practice ul li .pnum {
		width: 120px;
		height: 120px;
		top: 140px;
	}
	
	/* ------ 募集要項 ------ */

	/* 採用までの流れ */
	#description ul#step li:not(:last-of-type)::after {
		border-top: 5vw solid #345D5F;
	}

}