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

body{
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
body *{
	line-height: 1.4;
	letter-spacing: normal;
}
.l-cont{
	background-color: #F2F2F2;
}
.content{
	margin: 0 auto;
	width: 90%;
	max-width: 1000px;
}
.mainv{
	background: url("../../img/uservoice/maiv_bg_sp.png") 0 0 no-repeat;
	background-size: cover;
	height: 100vw;
	margin-bottom: 40px;
	padding-top: 14.13vw;
}
.mainv h1{
	color: #FFDD00;
	font-size: 25px;
	font-weight: bold;
	margin-bottom: 20px;
	text-align: center;
}
.mainv p{
	color: #fff;
	font-size: 12px;
	display: table;
	margin: 0 auto;
}
.content.uservoice-wrap{
	padding-bottom: 40px;
}
.uservoice-sec{
	background: url("../../img/uservoice/dv_quote.png") 10px 10px no-repeat #fff;
	background-size: 28px;
	border-top: 10px solid #001731;
	box-shadow: 0px 3px 6px 0px #00000040;
	margin-bottom: 20px;
	padding: 40px 12px 16px;
}
.uservoice-sec .uservoice-sec-txt{
	color: #3B8BE5;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 16px;
}
.uservoice-sec .uservoice-sec-lower{
	display: flex;
	align-items: center;
}
.uservoice-sec .uservoice-sec-lower .uservoice-sec-img{
	margin-right: 16px;
}
.uservoice-sec .uservoice-sec-lower .uservoice-sec-img img{
	width: 50px;
}
.uservoice-sec .uservoice-sec-lower .uservoice-sec-name{
	color: #001731;
	font-size: 12px;
	font-weight: bold;
}
.uservoice-sec .uservoice-sec-lower .uservoice-sec-name > span{
	margin-right: 10px;
}
.uservoice-sec .uservoice-sec-lower .uservoice-sec-name a.bt-detail-case{
	background: url("../../img/uservoice/bt-detail-case-arr.png") no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	border: 1px solid #001731;
	color: #001731;
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	padding: 20px 30px 20px 10px;
	text-decoration: none;
}
.uservoice-sec .uservoice-sec-lower .uservoice-sec-name a.bt-detail-case:hover{
	opacity: 0.8;
}
.uservoice-sec .uservoice-sec-lower .uservoice-sec-name br.pc-only{
	display: none;
}
@media screen and (min-width:480px){
	.mainv{
		height: 80vw;
		background-position: center bottom;
	}
}

@media screen and (min-width:640px){
	.mainv{
		height: 70vw;
		padding-top: 8vw;
	}
}

@media screen and (min-width:768px){
	.mainv{
		background-image: url("../../img/uservoice/maiv_bg_pc.png");
		background-position: 0 0;
		background-size: cover;
		height: 25vw;
		margin-bottom: 80px;
		padding: 0;
		position: relative;
	} 
	.mainv .content{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
	}
	.mainv h1{
		font-size: 50px;
	}
	.mainv p{
		font-size: 20px;
	}
	.uservoice-sec{
		background-position: 20px 20px;
		background-size: 57px;
		margin-bottom: 40px;
		padding: 86px 24px 32px;
	}
	.uservoice-sec .uservoice-sec-txt{
		font-size: 25px;
		margin-bottom: 24px;
	}
	.uservoice-sec .uservoice-sec-lower{
		justify-content: space-between;
		flex-direction : row-reverse;
	}
	.uservoice-sec .uservoice-sec-lower .uservoice-sec-img img{
		width: 90px;
	}
	.uservoice-sec .uservoice-sec-lower .uservoice-sec-name{
		font-size: 20px;
	}
	.uservoice-sec .uservoice-sec-lower .uservoice-sec-name > span{
		margin-right: 0;
	}
	.uservoice-sec .uservoice-sec-lower .uservoice-sec-name a.bt-detail-case{
		background-position: right 8px center;
		background-size: 7px;
		font-size: 16px;
		margin-top: 16px;
		padding: 8px 32px 8px 14px;
	}
	.uservoice-sec .uservoice-sec-lower .uservoice-sec-name br.pc-only{
		display: inline;
	}
}

@media screen and (min-width:1200px){
	.mainv{
		/*max-width: 1920px;*/
		height: 18.177vw;
		margin: 0 auto 80px;
	}
}