@charset "utf-8";

/* =============================================
	利用者の声
============================================= */
/*****
講座受講者の声
*****/
#user_voice_area{
 margin: 4em auto;
 padding: 2em 0;
}
#user_voice_area *{
	box-sizing: border-box;
}

.user_ttl{
	font-size: 2.8rem;
 color: #f4d771;
 text-align: center;
 padding: 0.5em;
 margin-bottom: 1em;
 border-top: solid 2px #fff;
 border-bottom: solid 2px #000;
	background-image: linear-gradient(165deg, #81170d 0%, #e04536 60%, #e95f51 80%, #81170d 100%);
}
.user_ttl .user_ttl_inner{
	position: relative;
}


.user_voice{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 1.6rem;
 width: 94%;
 max-width: 970px;
 margin: 0 auto;
}

.user_text{
	width: 48%;
	margin-bottom: 2em;
	padding: 2em;
	border-radius: 0.25em;
	background-image: url("../img/user_text_bg_top.jpg"),url("../img/user_text_bg_bottom.jpg"),url("../img/user_text_bg.jpg");
	background-repeat: no-repeat,no-repeat,repeat-y;
	background-size: 100% auto;
	background-position: center top,center bottom,center center;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.25);
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
 /*****
 講座受講者の声
 *****/
	.user_ttl_inner .icon_user{
		display: inline-block;
		font-size: 2em;
		line-height: 1;
		padding: 0.2em 0.2em 0.1em 0.2em;
		border: solid 1px #fff;
		background-color: #e04536;
		position: absolute;
		top: 0;
		right: -1.5em;
		transform: rotateZ(-20deg);
		box-shadow: 0 0 2px 2px rgba(0,0,0,0.5);
	}
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
 /*****
 講座受講者の声
 *****/
	.user_ttl{
		font-size: 1.6rem;
	}
	.user_ttl_inner .icon_user{}
	
	.user_voice{
		display: block;
		font-size: 1.3rem;
	}
	.user_text{
		width: 100%;
	}
}