@charset "UTF-8";
/* =====================================================================================================================
=
= なにわ歯科衛生専門学校
= students
=
===================================================================================================================== */

/*
- Campuslife 共通
--------------------------------------------------------------------------------------------------------------------- */
#campuslife{}
#campuslife #content-header h1{
	background-image:url('/_assets/img/pc/campuslife/main_image.jpg');
}

/*
- students 在校生メッセージ
--------------------------------------------------------------------------------------------------------------------- */
#campuslife.students{}
#campuslife.students #message-list{
	width:964px;
	margin:40px 0;
}

#campuslife.students #message-list .item{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	margin-bottom:40px;
	padding-bottom:40px;
	border-bottom:1px dotted #ff88bf;
}

#campuslife.students #message-list .item .photo{
	width: 31.19%;
	margin-right: 36px;
}

#campuslife.students #message-list .item .photo p{
	display:flex;
	flex-flow:row wrap;
	justify-content: space-between;
 	align-items: flex-start;
	margin-top: 10px;
}

#campuslife.students #message-list .item .photo p .day,
#campuslife.students #message-list .item .photo p .night{
	width:4em;
	padding:12px 0;
	/*border-radius:6px;*/
	color:#ffffff;
	font-size:1.4rem;
	letter-spacing:-0.015em;
	text-align:center;
}

#campuslife.students #message-list .item .photo p .day{
	background-color:#ff88bf;
}

#campuslife.students #message-list .item .photo p .night{
	background-color:#a688bd;
}

#campuslife.students #message-list .item .photo p .name{
	flex:1;
	font-size:1.6rem;
	font-weight:bold;
	margin-left:10px;
}

#campuslife.students #message-list .item .photo p .name small{
	display:block;
	/*font-size:1.2rem;
	font-weight:normal;*/
}
#campuslife.students #message-list .item .photo p .name small span{
	display: inline-block;
	width: 4em;
}

#campuslife.students #message-list .item .message{
	flex:1;
}

#campuslife.students #message-list .item .message .text-lead{
	margin-bottom:20px;
	line-height:1.4;
	font-size: 2.6rem;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-style: normal;
}
#campuslife.students #message-list .item.night .message .text-lead{
    color: #9070af;
}

#campuslife.students #message-list .item .message .to-student{
	position:relative;
	display:block;
	margin-top:40px;
	padding:12px;
	border:1px dashed #f6ad3c;
	border-radius:6px;
}

#campuslife.students #message-list .item .message .to-student:before{
	content:'\53D7\9A13\751F\3078\4D\65\73\73\61\67\65';
	display:block;
	position:absolute;
	top: -12px;
	left: 6px;
	width: auto;
	padding: 0 0.5em;
	background-color:#ffffff;
	color:#f6ad3c;
	font-size: 1.4rem;
	text-align: center;
}

.text-indent {
	display: block;
	text-indent: 2.1em;
}
/*
- media query (tablet)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:963px){/*-add190605-*/
#campuslife.students #message-list{
	width:auto;
	margin:40px 10px;
}
}/*-tablet END-*/
/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
	#campuslife.students{}
	#campuslife.students #message-list{
		width:100%;
		margin:40px 0;
	}

	#campuslife.students #message-list .item{
		display:flex;
		flex-flow:column wrap;
		justify-content:flex-start;
		margin-bottom:40px;
		padding-bottom:40px;
	}

	#campuslife.students #message-list .item .photo{
		width:100%;
		margin-right:0;
		margin-bottom:20px;
	}

	#campuslife.students #message-list .item .photo p{
		display:flex;
		flex-flow:row wrap;
		justify-content:space-between;
		margin-top:10px;
	}

	#campuslife.students #message-list .item .photo p .day,
	#campuslife.students #message-list .item .photo p .night{
		width:4em;
		padding:12px 0;
		border-radius:6px;
		color:#ffffff;
		font-size:1.4rem;
		letter-spacing:-0.015em;
		text-align:center;
	}

	#campuslife.students #message-list .item .photo p .day{
		background-color:#ff88bf;
	}

	#campuslife.students #message-list .item .photo p .night{
		background-color:#a688bd;
	}

	#campuslife.students #message-list .item .photo p .name{
		flex:1;
		font-size:1.6rem;
		font-weight:bold;
		margin-left:10px;
	}

	#campuslife.students #message-list .item .photo p .name small{
		display:block;
		/*font-size:1.2rem;
		font-weight:normal;*/
	}

	#campuslife.students #message-list .item .message{
		flex:1;
	}

	#campuslife.students #message-list .item .message .text-lead{
		margin-bottom:10px;
		line-height:1.4;
		font-size: 2rem;
	}

	#campuslife.students #message-list .item .message .to-student{
		position:relative;
		display:block;
		margin-top:20px;
		padding:12px;
		border:1px dashed #f6ad3c;
		border-radius:6px;
	}

	#campuslife.students #message-list .item .message .to-student:before{
		content:'\53D7\9A13\751F\3078\4D\65\73\73\61\67\65';
		display:block;
		position:absolute;
		top: -12px;
		left: 6px;
		width: 10.5em;
		padding: 0;
		background-color:#ffffff;
		color:#f6ad3c;
		font-size: 1.4rem;
		text-align:center;
	}
}