@charset "Shift_JIS";
.star5_rating {
	position: relative;
	z-index: 0;
	display: inline-block;
	white-space: nowrap;
	color: #cccccc;
}
.star5_rating:before, .star5_rating:after{
	content: '★★★★★';
}
.star5_rating:after {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #f8c601;
}
.star5_rating[data-rate="5"]:after{ width: 100%; }
.star5_rating[data-rate="4.9"]:after{ width: 98%; }
.star5_rating[data-rate="4.8"]:after{ width: 96%; }
.star5_rating[data-rate="4.7"]:after{ width: 94%; }
.star5_rating[data-rate="4.6"]:after{ width: 92%; }
.star5_rating[data-rate="4.5"]:after{ width: 90%; }
.star5_rating[data-rate="4.4"]:after{ width: 88%; }
.star5_rating[data-rate="4.3"]:after{ width: 86%; }
.star5_rating[data-rate="4.2"]:after{ width: 84%; }
.star5_rating[data-rate="4.1"]:after{ width: 82%; }
.star5_rating[data-rate="4"]:after{ width: 80%; }
.star5_rating[data-rate="3.9"]:after{ width: 78%; }
.star5_rating[data-rate="3.8"]:after{ width: 76%; }
.star5_rating[data-rate="3.7"]:after{ width: 74%; }
.star5_rating[data-rate="3.6"]:after{ width: 72%; }
.star5_rating[data-rate="3.5"]:after{ width: 70%; }
.star5_rating[data-rate="3.4"]:after{ width: 68%; }
.star5_rating[data-rate="3.3"]:after{ width: 66%; }
.star5_rating[data-rate="3.2"]:after{ width: 64%; }
.star5_rating[data-rate="3.1"]:after{ width: 62%; }
.star5_rating[data-rate="3"]:after{ width: 60%; }
.star5_rating[data-rate="2.9"]:after{ width: 58%; }
.star5_rating[data-rate="2.8"]:after{ width: 56%; }
.star5_rating[data-rate="2.7"]:after{ width: 54%; }
.star5_rating[data-rate="2.6"]:after{ width: 52%; }
.star5_rating[data-rate="2.5"]:after{ width: 50%; }
.star5_rating[data-rate="2.4"]:after{ width: 48%; }
.star5_rating[data-rate="2.3"]:after{ width: 46%; }
.star5_rating[data-rate="2.2"]:after{ width: 44%; }
.star5_rating[data-rate="2.1"]:after{ width: 42%; }
.star5_rating[data-rate="2"]:after{ width: 40%; }
.star5_rating[data-rate="1.9"]:after{ width: 38%; }
.star5_rating[data-rate="1.8"]:after{ width: 36%; }
.star5_rating[data-rate="1.7"]:after{ width: 34%; }
.star5_rating[data-rate="1.6"]:after{ width: 32%; }
.star5_rating[data-rate="1.5"]:after{ width: 30%; }
.star5_rating[data-rate="1.4"]:after{ width: 28%; }
.star5_rating[data-rate="1.3"]:after{ width: 26%; }
.star5_rating[data-rate="1.2"]:after{ width: 24%; }
.star5_rating[data-rate="1.1"]:after{ width: 22%; }
.star5_rating[data-rate="1"]:after{ width: 20%; }
.star5_rating[data-rate="0.9"]:after{ width: 18%; }
.star5_rating[data-rate="0.8"]:after{ width: 16%; }
.star5_rating[data-rate="0.7"]:after{ width: 14%; }
.star5_rating[data-rate="0.6"]:after{ width: 12%; }
.star5_rating[data-rate="0.5"]:after{ width: 10%; }
.star5_rating[data-rate="0.4"]:after{ width: 8%; }
.star5_rating[data-rate="0.3"]:after{ width: 6%; }
.star5_rating[data-rate="0.2"]:after{ width: 4%; }
.star5_rating[data-rate="0.1"]:after{ width: 2%; }
.star5_rating[data-rate="0"]:after{ width: 0%; }

.reviews_title {
	padding: 15px 0px;
	font-size: 20px;
	color: #333333;
	font-weight: bold;
	text-align: center;
}
.star5_rating_disp {
	font-size: 24px;
	text-align: left;
	font-weight: bold;
	color: #ee8f25;
	font-family: 'Bebas Neue', sans-serif;
}
/* ユーザー情報 */
.user_container {
	display: flex; /* 子要素を横並びにする */
	gap: 10px; /* 要素間の余白 */
}
.user_containerR {
	display: flex; /* 子要素を横並びにする */
	justify-content: flex-end; /* 子要素を右端にする */
	gap: 10px; /* 要素間の余白 */
}
.user_box {
	height: 25px;
	font-size: 12px;
/*	background-color: #f2f2f2; */
}



.user_t {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	background-color: #ffffff;
}
td.user_t {
	padding: 2px 3px;
}
/* 参考になったボタン用 */
.btnU {
	width: 100px;
	padding: 4px 5px;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background-color: #3366cc;
	border: solid 1px #000099;
	border-radius: 5px;
}
.btnU:hover {
	opacity:0.8;
	cursor: pointer;
	text-decoration: none;
	color: #ffffff;
}
.btnUx {
	width: 100px;
	padding: 4px 5px;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	color: #333333;
	background-color: #f2f2f2;
	border: solid 1px #999999;
	border-radius: 5px;
}
.btnUx:hover {
	opacity:0.8;
	cursor: pointer;
	text-decoration: none;
	color: #333333;
}
/* 違反を報告ボタン用 */
.btnR {
	width: 100px;
	padding: 4px 5px;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	color: #333333;
	background-color: #ffffff;
	border: solid 1px #cccccc;
	border-radius: 5px;
}
.btnR:hover {
	opacity:0.8;
	cursor: pointer;
	text-decoration: none;
	color: #333333;
}
.btnRx {
	width: 100px;
	padding: 4px 5px;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	color: #cccccc;
	background-color: #f2f2f2;
	border: solid 1px #999999;
	border-radius: 5px;
}
.btnRx:hover {
	opacity:0.8;
	cursor: pointer;
	text-decoration: none;
	color: #333333;
}

.reviews_line {
	border: none;
	border-top: dashed 1px #999999;
	height: 1px;
	color: #ffffff;
	margin-top: 10px;
	margin-bottom: 10px;
}
.rating_bar_chart {
	width: 100%;
	max-width: 640px;
	font-size:12px;
}
.rating_bar_container {
	display: flex;
	align-items: center;
	margin: 4px 0;
}
.rating_bar_label {
	width: 30px; /* 項目名の幅 */
	text-align: left;
	margin-right: 5px;
}
.rating_bar_background {
	flex: 1;
	height: 20px;
	background-color: #f2f2f2; /* 枠の色 */
	border-radius: 5px;
	position: relative;
}
.rating_bar {
	height: 100%;
	background-color: #f8c601; /* バーの色 */
	border-radius: 5px;
}
.rating_bar_value {
	width: 40px; /* 数値の幅 */
	text-align: right;
	margin-left: 5px;
}
/* 違反を報告用ポップアップ */
#pup_popup_form {
	display: none;
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #f0f8ff;
	border: 2px solid #6ca6cd;
	box-shadow: 0 0 10px rgba(0, 0, 255, 0.2);
	padding: 20px;
	width: 320px;
	border-radius: 5px;
	z-index: 1000;
	font-family: sans-serif;
}
#pup_popup_form .pup_button_group {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}
#pup_popup_form button {
	background-color: #6ca6cd;
	color: #ffffff;
	border: none;
	padding: 6px 12px;
	border-radius: 5px;
	cursor: pointer;
	flex: 1;
	margin: 0 5px;
	font-weight: bold;
}
#pup_popup_form button.pup_cancel {
	background-color: #a0a0a0;
}
#pup_popup_form button:hover {
	opacity: 0.9;
}
#pup_overlay {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 999;
}
#pup_popup_form .pup_label {
	display: block;
	margin: 6px 0;
}