@charset "utf-8";
/* ===================================================================
CSS
 file name  :  evaluation.css
=================================================================== */
@media screen and (min-width: 769px) {
	h1.page_title{
		background-image: url("../images/evaluation/bg_title_evaluation.png");
	}
}
.image_evaluation{
	margin-top: 50px;
}
p.commission_lead{
	margin-top: 70px;
}
.commission{
	margin-top: 70px;
}
.commission.upper{
	margin-top: 30px;
}
.promotion,
.bonus{
	margin-top: 70px;
}
.commission .table_commission,
.promotion .table_promotion{
	margin: 40px auto 30px auto;
}
.example{
	margin-top: 30px;
	background: #F0F6FF;
	padding: 30px 40px;
	display: flex;
	line-height: 2;
}
.example .subtitle_example{
	padding-right: 1em;
}
.example .target_example span{
	font-weight: 700;
}
.example .attention{
	color: #A20000;
}
@media screen and (min-width: 769px) {
	ul.bonus_list{
		margin-top: 40px;
		display: flex;
		justify-content: space-between;
	}
	ul.bonus_list.dev{
		justify-content: flex-start;
	}
	ul.bonus_list li{
		width: 18%;
	}
	ul.bonus_list.dev li{
		margin-right: 2%;
	}
}
ul.bonus_list li{
	border: 1px solid #2F4C85;
	border-radius: 5px;
	line-height: 1.8;
}
ul.bonus_list li .bonus_name{
	background: #F0F6FF;
	border-radius: 5px 5px 0 0;
	padding: 30px 10px;
	text-align: center;
	color: #202466;
	font-weight: 500;
}
ul.bonus_list li .bonus_price{
	padding: 30px 10px;
	text-align: center;
	font-weight: 500;
}
ul.bonus_list li .bonus_price .number{
	color: #202466;
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 4.0rem;
	font-weight: 700;
	margin-right: 0.1em;
	line-height: 1;
}
ul.bonus_list li .bonus_price .notes{
	font-weight: 400;
	font-size: 1.4rem;
}
@media screen and (min-width: 769px) {
	ul.income_list{
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
		margin-left: -3.333%;
	}
	ul.income_list li{
		margin-top: 50px;
		width: 33.333%;
		padding-left: 3.333%;
	}
}
ul.income_list li .person{
	padding: 0.7em;
	background: #2F4C85;
	color: #FFFFFF;
	text-align: center;
	font-size: 1.8rem;
}
ul.income_list li .price{
	border: 1px solid #2F4C85;
	border-radius: 5px;
	margin-top: 20px;
	padding: 20px 10px;
	font-weight: 500;
	text-align: center;
}
ul.income_list li .price span{
	color: #202466;
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 4.8rem;
	font-weight: 700;
	margin: auto.1em;
	line-height: 1;
}
ul.income_list li .text{
	margin-top: 2em;
	text-align: center;
	line-height: 2;
}
@media screen and (max-width: 768px) {
	.image_evaluation{
		margin: 30px auto auto;
		max-width: 360px;
	}
	p.commission_lead{
		margin: 30px auto auto;
		max-width: 640px;
	}
	.commission{
		margin: 20px auto auto;
		max-width: 640px;
	}
	.promotion,
	.bonus{
		margin: 50px auto auto;
		max-width: 640px;
	}
	.commission .table_commission,
	.promotion .table_promotion{
		margin: 20px auto 20px auto;
		max-width: 640px;
		overflow-x: scroll;
		scrollbar-color: #688BD0 #CCCCCC;
	}
	.commission .table_commission::-webkit-scrollbar,
	.promotion .table_promotion::-webkit-scrollbar{
		width: 6px;
	}
	.commission .table_commission::-webkit-scrollbar-track,
	.promotion .table_promotion::-webkit-scrollbar-track{
		background-color: #f2f2f2;
		border-radius: 10px;
	}
	.commission .table_commission::-webkit-scrollbar-thumb,
	.promotion .table_promotion::-webkit-scrollbar-thumb{
		background-color: #688BD0;
		border-radius: 10px;
	}
	.commission .table_commission div,
	.promotion .table_promotion div{
		height: 140px;
		width: 734px;
	}
	.commission .table_commission div.tc2,
	.promotion .table_promotion div.tc2{
		height: 100px;
		width: 734px;
	}
	.example{
		margin-top: 20px;
		display: inherit;
		padding: 1em 2em;
	}
	ul.bonus_list{
		margin: 0px auto auto;
		max-width: 300px;
	}
	ul.bonus_list li{
		margin-top: 20px;
		width: 100%;
	}
	ul.bonus_list li .bonus_name,
	ul.bonus_list li .bonus_price{
		padding: 15px 10px;
	}
	ul.bonus_list li .bonus_price .number{
		font-size: 3.0rem;
	}
	ul.bonus_list li .bonus_price .notes{
		font-size: 1.2rem;
	}
	ul.income_list{
		margin: 0px auto auto;
		padding-top: 10px;
		max-width: 360px;
	}
	ul.income_list li{
		margin-top: 20px;
		width: 100%;
	}
	ul.income_list li .person{
		font-size: 1.2rem;
	}
	ul.income_list li .price{
		padding: 10px 10px;
	}
	ul.income_list li .price span{
		font-size: 3.6rem;
	}
	ul.income_list li .text{
		margin-top: 1em;
	}
}