﻿@charset "utf-8";
/*--京users_voice.css--*/
/* ##########PC########## */
.page_title{
	text-align:center;
	font-size:1.8em;
	margin:2em auto;
	width:980px;
	padding-bottom:0.5em;
	position:relative;
}

	.page_title:before{
		content:"";
		display:block;
		width:100%;
		height:60%;
		background:rgba(0,135,64,0.05);
		position:absolute;
		bottom:0;
		left:0;
		z-index:1;
		border-bottom:3px solid rgba(0,135,64,0.2);
	}
	
	.page_title h3{
		position:relative;
		z-index:2;
	}

.page_body{
	width:980px;
	margin:0 auto;
}

.users_voice > .box_inner{
	margin-bottom:3em;
}

	.users_voice > .box_inner ul{}
	
		.users_voice > .box_inner > ul > li{
			border-bottom:1px dotted #aaa;
			padding:1.5em 1em;
			display:flex;
			justify-content:space-between;
		}
		
		.users_voice > .box_inner > ul > li:first-child{
			border-top:1px dotted #aaa;
		}
		
		.users_voice > .box_inner ul li dl.user_info{
			width:230px;
			line-height:1.4;
		}
		
			.users_voice > .box_inner ul li dl.user_info dt{
				font-weight:bold;
				color:#333;
			}
			
				.users_voice > .box_inner ul li dl.user_info dt:before{
					font-family: FontAwesome;
					content:"\f0da";
					margin-right:0.3em;
					font-weight:normal;
					color:rgba(0,79,148,0.5);
				}
			
			.users_voice > .box_inner ul li dl.user_info dd{
				margin-bottom:0.3em;
				padding-left:0.7em;
			}
			
			.users_voice > .box_inner ul li dl.user_info dd .user_img{
				padding:0.3em;
			}
		
		.users_voice > .box_inner ul li dl.user_voice{
			width:calc(100% - 270px);
			border-left:1px dotted #aaa;
			box-sizing:border-box;
			padding:0 0.5em 0 20px;
		}
		
			.users_voice > .box_inner ul li dl.user_voice > dt{
				background:#edf5fe;
				font-weight:bold;
				color:#004e93;
				padding:0.5em;
				margin-bottom:1em;
			}
			
			.users_voice > .box_inner ul li dl.user_voice > dt:before{
				font-family: FontAwesome;
				content:"\f075";
				font-weight:normal;
				margin-right:0.3em;
			}
			
			.users_voice > .box_inner ul li dl.user_voice > dd{
				line-height:1.6;
				padding:0 0.5em;
			}
			
				.users_voice > .box_inner ul li dl.user_voice > dd a{
					color:#00416b;
				}
			
			.users_voice > .box_inner ul li dl.user_voice > dd p{
				margin-bottom:0.5em;
			}
			
			.users_voice > .box_inner ul li dl.user_voice > dd p:last-child{
				margin-bottom:0;
			}
			
				.users_voice > .box_inner ul li dl.user_voice > dd dl.reply{
					margin-top:0.8em;
					border-top:1px dotted #bbb;
					padding:0.5em 1em 0 1em;
				}
			
				.users_voice > .box_inner ul li dl.user_voice > dd dl.reply dt{
					font-weight:bold;
					color:#333;
					margin-bottom:0.3em;
				}
				
				.users_voice > .box_inner ul li dl.user_voice > dd .sub_comment{
					margin-top:0.8em;
					padding:0 1em;
				}
				
					.users_voice > .box_inner ul li dl.user_voice > dd .sub_comment dl{}
					
					.users_voice > .box_inner ul li dl.user_voice > dd .sub_comment dl dt{
						font-weight:bold;
						color:#333;
						margin-bottom:0.3em;
					}
					
					.users_voice > .box_inner ul li dl.user_voice > dd .sub_comment dl dd{
						margin-bottom:1em;
					}
					
					.users_voice > .box_inner ul li dl.user_voice > dd .sub_comment dl dd:last-child{
						margin-bottom:0;
					}
					
			.users_voice > .box_inner ul li dl.user_voice > dd ul{
				
			}
			
				.users_voice > .box_inner ul li dl.user_voice > dd ul li{
					position:relative;
					padding-left:1em;
					margin-bottom:0.5em;
				}
				
				.users_voice > .box_inner ul li dl.user_voice > dd ul li:last-child{
					margin-bottom:0;
				}
			
				.users_voice > .box_inner ul li dl.user_voice > dd ul li:before{
					font-family: FontAwesome;
					content:"\f105";
					position:absolute;
					top:-0.1em;
					left:0;
				}
				
.users_voice > .box_footer{
	text-align:center;
}


/* ##########SP########## */
@media screen and (max-width:479px) {
	.page_title{
		margin:1em 2vw 1.5em 2vw;
		width:auto;
		padding-bottom:0.5em;
		font-size:5vw;
	}
	
	.page_body{
		width:100%;
		margin:0;
		box-sizing:border-box;
		padding:0 3vw;
	}
	
		.users_voice > .box_inner > ul > li{
			padding:1em 3vw;
			display:block;
			border:1px solid #ccc;
			margin-bottom:1em;
		}
		
		.users_voice > .box_inner > ul > li:first-child{
			border-top:1px solid #ccc;
		}
				
			.users_voice > .box_inner ul li dl.user_info{
				width:auto;
				display:flex;
				flex-wrap:wrap;
				margin-bottom:0.5em;
			}
				
				.users_voice > .box_inner ul li dl.user_info dt{
					font-weight:bold;
					color:#333;
					width:25%;
					margin-bottom:0.3em;
				}
					
				.users_voice > .box_inner ul li dl.user_info dd{
					margin-bottom:0.3em;
					padding-left:0;
					width:75%;
				}
					
			.users_voice > .box_inner ul li dl.user_voice{
				width:auto;
				border-left:none;
				padding:0;
			}
			
	.users_voice > .box_footer a img{
		width:50%;
		height:auto;
	}


}

/* ##########印刷用########## */
@media print{

}