@charset "utf-8";


/*page-message
************************************************************************************/
.messageBox{
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-rows: auto;
	column-gap: 30px;
	row-gap: 40px;
	align-items: stretch;
}
.messageBox .messageBox_ph img{
	max-width: 100%;
	height: auto;
	margin: auto;
}
.messageBox span.name{
	font-size: 1.25em;
}
@media screen and (max-width: 599px) {
	.messageBox{
		display: block;
	}
	.messageBox .messageBox_ph{
		text-align: center;
	}
	.messageBox .messageBox_ph img{
		max-width: 50%;
	}
}

/*page-course
************************************************************************************/
/*intro*/
.introBox{
	margin: 1.5em 0;
	padding: 2em;
	line-height: 1.7;
	background: #edf0fb;
	border-radius: 7px;
}
.introBox p{
	padding-bottom: 1em;
}
.introBox p:last-child{
	padding-bottom: 0;
}


/*staff*/
ul.course_staff{
	margin: 1em 0;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}
ul.course_staff li{
	width: 49%;
	margin: 15px 0.5%;
	padding: 30px;
	box-sizing: border-box;
	border: 1px solid #dedede;
	border-radius: 5px;
	display: grid;
	grid-template-columns: 150px 1fr;
	grid-template-rows: auto;
	column-gap: 40px;
	row-gap: 40px;
	align-items: stretch;
}
ul.course_staff li .course_staff_ph img{
	max-width: 100%;
	height: auto;
	margin: auto;
}
ul.course_staff li .course_staff_status{
	margin-bottom: 1em;
}
ul.course_staff li .course_staff_name{
	font-size: 1.5em;
	font-weight: bold;
	color: #E98787;
	margin-bottom: .8em;
}
ul.course_staff li .course_staff_name span{
	font-size: 0.7em;
	font-weight: 400;
	padding-left: 20px;
}
ul.course_staff li .course_staff_edu{
	font-size: 0.875em;
	color: #333;
}
@media screen and (max-width: 1024px){
	ul.course_staff{
		align-items: stretch;
	}
	ul.course_staff li{
		display: block;
	}
	ul.course_staff li .course_staff_ph img{
		max-width: 50%;
		display: block;
		margin: 0 auto 1em;
	}
}
@media screen and (max-width: 768px){
	ul.course_staff li{
		display: grid;
		width: 98%;
		margin: .5%;
	}
	ul.course_staff li .course_staff_ph img{
		max-width: 100%;
	}
}
@media screen and (max-width: 599px) {
	ul.course_staff li .course_staff_name span{
		padding: .4em 0;
		display: block;
	}
}
@media screen and (max-width: 415px){
	ul.course_staff li{
		display: block;
	}
	ul.course_staff li .course_staff_status,
	ul.course_staff li .course_staff_name{
		text-align: center;
	}
}

/*page-staff
************************************************************************************/
.page-staff .group-photo{
	text-align: center;
	margin: 1em 0;
}
.page-staff .group-photo img{
	max-width: 100%;
	height: auto;
	border-radius: 15px;
}
.page-staff table.table-line{
	table-layout: fixed;
}
.page-staff tbody th,
.page-staff-detail tbody th{
	width: 20%;
}
.page-staff span.name{
	display: inline-block;
	width: 8em;
}
.page-staff ul.ar li{
	width: 49%;
	box-sizing: border-box;
	display: inline-block;
	background: url("../../img/common/ar_breadcrumb.svg")no-repeat left .6em;
	background-size: 7px auto;
	padding: .15em 0 .1em 18px;
	margin: 0 auto .5em;
}

/*page-staff-detail*/
.frame_staff{
	display: grid;
	grid-template-columns: 150px 1fr;
	grid-template-rows: auto;
	column-gap: 40px;
	row-gap: 40px;
	align-items: stretch;
	margin-bottom: 40px;
	padding-top: 30px;
}
.staff_detail_ph img{
	max-width: 100%;
	height: auto;
	margin: auto;
}
.staff_detail_status{
	padding-bottom: 15px;
	border-bottom: 2px dotted #D0D0D0;
	margin-bottom: 1em;
}
.staff_detail_name{
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: .8em;
}
.staff_detail_name span{
	font-size: 0.7em;
	font-weight: 400;
	padding-left: 20px;
}
.staff_detail_edu{
	font-size: 0.875em;
	color: #333;
	margin-bottom: .2em;
}
.staff_detail_mail:before{
	background: url("../../img/common/icon_mail.svg") no-repeat center center;
	background-size: 100% 100%;
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin: 0 .4em 0 0;
	width: 20px;
	height: 20px;
}

.page-staff-detail table.table-line{
	border-top: 1px solid #E98787;
}
.page-staff-detail table.table-line tbody th,
.page-staff-detail table.table-line tbody td{
	border-bottom: 1px solid #E98787;
}

@media screen and (max-width: 599px) {
	.frame_staff{
		display: block;
	}
	.staff_detail_ph img{
		max-width: 50%;
		display: block;
		margin: 0 auto 1.5em;
	}
	.page-staff-detail table.table-line{
		display: block;
		width: 100%;
		border: 0 !important;
	}
	.page-staff-detail table.table-line thead{
		display: none;
	}
	.page-staff-detail table.table-line tbody{
		display: block;
		width: 100%;
	}
	.page-staff-detail table.table-line tr{
		display: block;
		width: 100%;
	}
	.page-staff-detail table.table-line th,
	.page-staff-detail table.table-line td{
		display: list-item;
		width: 100%;
		padding: 10px 10px !important;
		box-sizing: border-box;
		display: block;
	}
	.page-staff-detail table.table-line th{
		list-style-type: none;
		display: block;
		background: #ffebeb;
		border-top: 1px solid #E98787;
	}

	.page-staff-detail table.table-line td{
		margin-left: 0;
		list-style-type: none;
		border: 0 !important;
	}
}