@charset "UTF-8";
/* CSS Document */

#wrap.pink { background-color: #ffe7e1; }
#wrap.cream { background-color: #fff2d4; }


/*--------------- students ---------------*/

.bg_voice {
	width: 92%;
	max-width: 1024px;
	margin: 0 auto 140px;
	padding: 48px 0;
	background-color: rgba(255,255,255,0.7);
}
@media only screen and ( max-width: 600px ) {
	.bg_voice {
		margin: 0 auto 10%;
		padding: 5% 0;
	}
}
.col_voicelist {
	width: 90%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.col_voicelist.detail { justify-content: center; }
.col_voicelist .cont {
	width: 31%;
	margin: 0 3.5% 3.5% 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.7;
	transition: all .5s;
	opacity: 0;
	position: relative;
	top: 20px;
}
.col_voicelist .cont:nth-child(3n-1) { transition-delay: 0.2s; }
.col_voicelist .cont:nth-child(3n) {
	margin-right: 0;
	transition-delay: 0.4s;
}
.col_voicelist .cont.active {
	opacity: 1;
	top: 0;
}
@media only screen and ( max-width: 850px ) {
	.col_voicelist .cont {
		width: 48%;
		margin: 0 4% 4% 0;
	}
	.col_voicelist .cont:nth-child(3n) {
		margin-right: 4%;
		transition-delay: 0s;
	}
	.col_voicelist .cont:nth-child(3n-1) { transition-delay: 0s; }
	.col_voicelist .cont:nth-child(even) {
		margin-right: 0;
		transition-delay: 0.2s;
	}
}
@media only screen and ( max-width: 560px ) {
	.col_voicelist .cont {
		width: 100%;
		margin: 0 0 8%;
	}
	.col_voicelist .cont:nth-child(3n) { margin-right: 0; }
	.col_voicelist .cont:nth-child(even) { transition-delay: 0s; }
}
.col_voicelist .cont .movi_door {
	width: 100%;
	margin: 0 0 5px;
	padding: 0;
	position: relative;
	z-index: 0;
}
.col_voicelist .cont .movi_door::after {
	content: "";
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: rgba(0,0,0,0.3);
	background-image: url(../img/icon_start_youtube.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24.7% auto;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.col_voicelist .cont .movi_door.iframe::after { content: none; }
.col_voicelist .cont .movi_door img {
	width: 100%;
	vertical-align: top;
}
.col_voicelist .cont .movi_door iframe {
	width: 100%;
	height: 14.438vw;
	max-height: 160px;
}
@media only screen and ( max-width: 850px ) {
	.col_voicelist .cont .movi_door iframe {
		height: 22.356vw;
		max-height: unset;
	}
}
@media only screen and ( max-width: 560px ) {
	.col_voicelist .cont .movi_door iframe {
		height: 46.575vw;
	}
}
.col_voicelist .cont .submds {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 500;
	text-align: center;
	position: relative;
	z-index: 0;
}
.col_voicelist .cont .submds > span {
	padding: 0 3px 0 5px;
	display: inline-block;
}
.col_voicelist .cont .submds > span::before,
.col_voicelist .cont .submds > span::after {
	content: "";
	width: calc( 50% - 83px );
	height: 100%;
	background: linear-gradient( 180deg, rgba(255,255,255,0) calc(50% - 5px), rgba(255,231,225,1) calc( 50% - 4px), rgba(255,231,225,1) calc( 50% + 7px ), rgba(255,255,255,0) calc(50% + 8px) );
	position: absolute;
}
.col_voicelist .cont .submds > span::before { left: 0; }
.col_voicelist .cont .submds > span::after { right: 0; }
.col_voicelist .cont .submds.parents > span::before,
.col_voicelist .cont .submds.parents > span::after {
	width: calc( 50% - 93px );
	background: linear-gradient( 180deg, rgba(255,255,255,0) calc(50% - 5px), rgba(255,242,212,1) calc( 50% - 4px), rgba(255,242,212,1) calc( 50% + 7px ), rgba(255,255,255,0) calc(50% + 8px) );
}

.col_voicelist .cont .name {
	margin: 0 0 5px;
	padding: 0;
	font-size: 19px;
	font-weight: 400;
	display: flex;
	align-items: baseline;
	justify-content: center;
}
.col_voicelist .cont .name .label {
	margin: 1px 5px 0 0;
	padding: 0 5px;
	color: #fff;
	font-size: 12px;
	background-color: #ff6400;
	display: inline-block;
	align-self: center;
}
.col_voicelist .cont .name .small {
	font-size: 12px;
}