@charset "utf-8";

/*------------ 生徒の声　---------------
----------------------------------------*/

/*------- 生徒の声 ---------*/
.voice {
	margin-bottom: 10px;
}
.elementary .voice {
	border-bottom: 2px dotted #ef8576;
}
.junior .voice {
	border-bottom: 2px dotted #75D523;
}

.section + .voice {
	margin-top: -15px;
}
.voice .voice_header {
	display: flex;
	align-items: flex-end;
	padding: 0 5px;
}
.voice .voice_img {
	padding-right: 5px;
}
.voice .voice_img img {
	width: 30vw;
	vertical-align: bottom;
}

.voice .voice_header_txt {
	width: 100%;
	
}


/* ふきだし */
.voice .voice_fukidashi {
	position: relative;
	margin: 10px 0;
	padding: 10px 15px;
	width: 100%;
	color: #0c357f;
	background: #fff;
	border: solid 1px #555;
	border-radius: 8px;
	box-sizing: border-box;
}
.voice .voice_fukidashi::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
	margin-top: -7px;
	border: 12px solid transparent;
	border-right: 12px solid #fff;
	z-index: 2;
}
.voice .voice_fukidashi::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
	margin-top: -5px;
	border: 10px solid transparent;
	border-right: 10px solid #555;
	z-index: 1;
}
.voice .voice_fukidashi dt {
	font-size: 95%;
	margin-bottom: 5px;
}
.voice .voice_fukidashi dt span{
	background: linear-gradient(transparent 60%, #fff100 60%);
}
.voice .voice_fukidashi dd {
	font-size: 100%;
	font-weight: bold;
}

/* 55アイコン */
.voice .voice_icon55 {
	position: absolute;
	right: 12px;
}
.voice .voice_icon55 img {
	width: 55px;
}

/* ふきだし下 */
.voice .voice_profile {
	display: flex;
	align-items: center;
	font-size: 90%;
	flex-wrap: wrap;
}
.voice .voice_profile dt,
.voice .voice_profile dd {
	margin-bottom: 10px;
}

/* 学年 */
.voice .voice_profile .voice_gakunen {
	margin-right: 10px;
	width: 5em;
	padding: 2px 5px;
	text-align: center;
	color: #fff;
	border-radius: 3px;
}
.elementary .voice .voice_profile .voice_gakunen {
	background-color: #ef8576;
}
.junior .voice .voice_profile .voice_gakunen {
	background-color: #75D523;
}


/* 名前 */
.voice .voice_profile .voice_name {
/*	width: 40vw; */
}
.voice .voice_profile .voice_name img {
	height: 12.5px !important;
	vertical-align: middle;
}

/* 受講科目 */
.voice .voice_profile .voice_kamoku {
	margin-right: 10px;
	margin-left: 10px;
}
.voice .voice_profile .voice_kamoku::after {
	content: "：";
}

/* タイトル */
.voice .voice_ttl {
	position: relative;
	margin-top: -3px;
	padding: 5.5vw 1em 0 12vw;
	height: 33.67vw;
	font-size: 3.8vw;
	color: #333;
	line-height: 2;
	background: url("/common/images/voice_title_bg_sp.png") no-repeat left top;
	background-size: cover;
	box-sizing: border-box;
	z-index: 5;
}

/* 本文 */
.voice .voice_txt {
	padding: 10px 10px 25px;
	line-height: 1.8;
	font-size: 95%;
}


@media screen and (max-width : 330px) {
	.voice .voice_header {
		position: relative;
		padding: 0;
	}
	
	.voice .voice_fukidashi dd {
		font-size: 90%;
	}
	
	.voice .voice_img img {
		width: 25vw;
	}
	
	/* 55アイコン */
	.voice .voice_icon55 {
		position: absolute;
		top: 10px;
		left: 12px;
	}
	
	.voice .voice_profile .voice_gakunen {
		width: 20vw;
	}
	.voice .voice_profile .voice_name {
		width: 35vw;
	}
	
}



/* ▼PCTB用　ここに601px以上のCSSを記述*/ 
@media screen and (min-width : 601px) {
	.no_pc {
		display: none;
	}

	/* 生徒の声 */
	.voice {
		margin-bottom: 25px;
	}
	.voice .voice_header {
		padding: 0 10px;
	}

	.voice .voice_img {
		padding-right: 10px;
	}
	.voice .voice_img img {
		width: 150px;
	}


	.voice .voice_fukidashi {
		margin: 25px 0 20px;
		padding: 12px 30px;
	}
	.voice .voice_fukidashi.icon55 {
		width: 270px;
		float: left;
	}
	.voice .voice_fukidashi dt {
		margin-bottom: 8px;
		font-size: 100%;
	}
	.voice .voice_fukidashi dd {
		font-size: 108%;
	}

	.voice .voice_icon55 {
		position: static;
		float: right;
		margin-top: 25px;
	}
	.voice .voice_icon55 img {
		width: 80px;
		-webkit-backface-visibility: hidden;
	}

	.voice .voice_profile {
		clear: both;
		display: flex;
		align-items: center;
		margin-bottom: 18px;
		font-size: 90%;
		line-height: 1.0;
	}
	.voice .voice_profile .voice_gakunen {
		margin-right: 10px;
		padding: 5px;
		width: auto;
		color: #fff;
		background-color: #ef8576;
		border-radius: 3px;
	}
	.voice .voice_profile .voice_name {
		margin-right: 10px;
		width: auto;
	}
	.voice .voice_profile .voice_name.kaigyo {
		width: 280px;
	}
	.voice .voice_profile .voice_name img {
		height: 12.5px;
		vertical-align: middle;
		-webkit-backface-visibility: hidden;
	}
	.voice .voice_kamoku {
		margin-right: 10px;
	}
	.voice .voice_kamoku::after {
		content: ":";
	}

	.voice .voice_ttl {
		position: relative;
		margin-top: -10px;
		padding: 30px 0 0 65px;
		height: 114px;
		font-size: 110%;
		background-image: url("/common/images/voice_title_bg.png");
	}
	.voice .voice_ttl.line3 {
		padding-top: 14px;
		padding-left: 70px;
	}

	.voice .voice_txt {
		padding: 10px 10px 30px;
		font-size: 100%;
	}
}



/*------- 講師・保護者からの声 ---------*/

.voice_comment {
	margin: -10px 0 30px;
	padding: 13px 15px 15px;
	border: 1px dashed #0c357f;
}

.voice_comment_header {
	min-height: 30px;
	margin-bottom: 0.4em;
	padding: 0.4em 0 0 40px;
	font-size: 100%;
	background: url("/common/images/icon_pencil.png") no-repeat top left;
	background-size: 26.5px 30px;
}

.voice_comment_ttl {
	margin-bottom: 0.5em;
	font-size: 100%;
	color: #396e8f;
	font-weight: bold;
}


@media screen and (min-width : 601px) {
	.voice_comment {
		padding: 17px 20px 20px;
	}
	
	.voice_comment_header {
		margin-bottom: 0.5em;
		font-size: 105%;
	}
	
	.voice_comment_ttl {
		font-size: 105%;
	}
}



/*------- ページング ---------*/

.pagination {
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
	width: 100%;
}
.pagination li {
	flex-grow: 1;
	text-align: center;
}
.pagination li + li {
	margin-left: -1px;
}

.pagination li a,
.pagination li span {
	padding: 10px 15px;
	display: block;
	color: #333;
	border: 1px solid #ccc;
	text-decoration: none;
}

.pagination li a {
	background-color: #fff;
}
.pagination li a:hover {
	color: #fff;
	background-color: #999;
}
.junior .pagination li a:hover { background-color: #75D523; }

.pagination li span {
	background-color: #eee;
}
.pagination li.active span {
	font-weight: bold;
	color: #fff;
	background-color: #999;
	cursor: default;
}
.junior .pagination li.active span { background-color: #75D523; }


.pagination li.prev a,
.pagination li.prev span {
	border-radius: 5px 0 0 5px;
}
.pagination li.next a,
.pagination li.next span {
	border-radius: 0 5px 5px 0;
}

@media screen and (min-width : 601px) {
	.pagination li a,
	.pagination li span {
		padding: 5px 20px;
	}
}