@charset "utf-8";
/*-----------------------------------------*/
/* top
/*-----------------------------------------*/
.page_contents.page_contents--payment.page_payment.page-payment {
	min-width: 800px;
}
/* current coin wrap */
.page_payment .current_coin_wrap{
	border-bottom: 2px #ccc solid;
	display: inline-block;
	padding-bottom: 0.5rem;
}
.page_payment .current_coin_wrap img,
.page_payment .current_coin_wrap span{
	vertical-align: middle;
}
/* bank transfer history */
.page_payment .transfer_histry_table{
	table-layout: fixed;
	width: 100%;
}
.page_payment .transfer_histry_table tr{
	border-bottom: 1px #ccc solid;
}
.page_payment .transfer_histry_table tr:first-child{
	background: #f5f5f5;
}
.page_payment .transfer_histry_table th{
	font-weight: bold;
	font-size: 1.5rem;
	padding: 1.6rem 2rem;
	text-align: left;
	line-height: 1.5;
}
.page_payment .transfer_histry_table td{
	font-size: 1.5rem;
	padding: 2rem;
	line-height: 1.5;
}
/* notice_wrap */
.page_payment .notice_wrap .notice + .notice{
	margin-top: 1.5rem;
}

/* sec details */
.page_payment .sec_details .teacher_category{
	display: inline-block;
	padding: 0 0 0.5rem;
	position: relative;
}
.page_payment .sec_details .teacher_category:after{
	position: absolute;
	content: '';
	width: 104%;
	border-bottom: 2px solid #ccc;
	bottom: 0;
	left: 0;
	right: 0;
}
.page_payment .sec_details table{
	table-layout: fixed;
	width: 100%;
	max-width: 100rem;
}
.page_payment .sec_details table tr{
	border-bottom: 1px #ccc solid;
}
.page_payment .sec_details table tr:first-child{
	background: #f5f5f5;
}
.page_payment .sec_details .table_wrap-total tr:first-child{
	background: #fff7e2;
}
.page_payment .sec_details table th{
	font-weight: bold;
	font-size: 1.5rem;
	padding: 1.6rem 2rem;
	text-align: left;
	line-height: 1.5;
	white-space: nowrap;
}
.page_payment .sec_details table.column-3 th:first-child{
	width: 46%;
}
.page_payment .sec_details table.column-2 th:first-child{
	width: 73%;
}
.page_payment .sec_details table td{
	font-size: 1.5rem;
	padding: 2rem;
	line-height: 1.5;
	white-space: nowrap;
}
.page_payment .sec_details table td:last-child{
	width: 28%;
}
.page_payment .sec_details [class^=table_wrap] + [class^=table_wrap]{
	margin-top: 4rem;
}

/* calendar */
.page_payment .sec_details .calendar_wrap{
	position: relative;
	display: inline-block;
	margin: 0 4rem;
}
.page_payment .sec_details .calendar_wrap .calendar{
	background: #1dabbb;
	color: #fff;
	display: inline-block;
	position: relative;
	z-index: 40;
}
.page_payment .sec_details .calendar_wrap .calendar .select_date_range{
	margin: 0;
	padding: 0.6rem 9.5rem;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #fff;
	font-size: 2rem;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	cursor: pointer;
	box-sizing: content-box;
}
.page_payment .sec_details .calendar_wrap .calendar select.select_date_range option{
	color: #555;
}
.page_payment .sec_details .calendar_wrap .calendar:before{
	content: url('../images/icon/calendar-white.png');
	position: absolute;
	top: 0.2rem;
	bottom: 0;
	left: 2rem;
	margin: auto;
	display: flex;
	align-items: center;
	z-index: -1;
}
.page_payment .sec_details .calendar_wrap .calendar .select_calendar{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 2rem;
	margin: auto;
	color: #fff;
	display: flex;
	align-items: center;
	z-index: -1;
	cursor: pointer;
}
.page_payment .sec_details .calendar_wrap .ctrl .left,
.page_payment .sec_details .calendar_wrap .ctrl .right{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	z-index: 20;
}
.page_payment .sec_details .calendar_wrap .ctrl .left a,
.page_payment .sec_details .calendar_wrap .ctrl .right a{
	font-size: 2.5rem;
	color: #1dabbb;
	display: inherit;
}
.page_payment .sec_details .calendar_wrap .ctrl .left{
	justify-content: flex-start;
	left: -4rem;
}
.page_payment .sec_details .calendar_wrap .ctrl .right{
	justify-content: flex-end;
	right: -4rem;
}

/* notice_balloon */
.page_payment .sec_details table td .notice_wrap{
	position: relative;
	display: inline-block;
}
.page_payment .sec_details table td .notice_balloon{
	display: none;
	position: absolute;
	top: 3.8rem;
	box-shadow: 0 0 8px 2px rgba(0,0,0,0.4);
	background: #fff;
	width: 35rem;
	padding: 1.5rem 2.5rem;
	z-index: 10;
	margin: auto;
	line-height: 1.7;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
	left: 50%;
	transform: translate(-50%);
	white-space: normal;
}
.page_payment .sec_details table td .notice_balloon:after,
.page_payment .sec_details table td .notice_balloon:before{
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.page_payment .sec_details table td .notice_balloon:after{
	border-bottom-color: #fff;
	border-width: 10px;
	margin-left: -10px;
}
.page_payment .sec_details table td .notice_balloon:before{
	border-bottom-color: rgba(0,0,0,0.2);
	border-width: 13px;
	margin-left: -13px;
}

/* overlay */
#static_overlay {
	position: fixed;
	z-index: 10000;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000;
	display: none;
}

/* sec overview */ 
.page_payment .sec_overview .overview_table{
	width: 100%;
	table-layout: fixed;
}
.page_payment .sec_overview .overview_table th,
.page_payment .sec_overview .overview_table td{
	padding: 2rem;
	text-align: center;
	vertical-align: middle;
	border: solid 1px #bbb;
}
.page_payment .sec_overview .overview_table th{
	background: #eee;
}

/* payslip */
#payslip-detail #total td {
	background: #DEB887;
}
#years, #bank_info, #salary {
	margin-top: 50px;
}
#years {
	font-size: 25px;
	text-align: center;
	font-weight: bold;
}
#months, #cutoff_types, #term {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}
#months span, #cutoff_types span {
	margin: 0px;
	padding: 6px 8px;
	display: inline-block;
	border: 2px solid transparent;
}
#months span.on, #cutoff_types span.on, .month:hover, .cutoff_type:hover {
	border: 2px solid #16a9b2 !important;
	border-radius: 10px;
}
#bank_info p {
	color: #ff0000;
	font-size: 40px;
	text-align: center;
}
#payslip-detail table {
	width: 40%;
	border: 1px solid #cccccc;
	border-radius: 3px;
}
#payslip-detail .t_bold td  {
	border: 1px solid;
	padding: 5px;
	background: #E0E0E0;
}
#payslip-detail tr td {
	border: 1px solid;
	padding: 5px;
}
#yearMonthLabel, #cutoffLabel {
	font-size: 15px;
	margin-bottom: 5px;
	display: block;
}
.rankid-container, .salary-equivalent-container {
	float: left;
	width: 29%;
}
.rankid-container p {
	font-size: 20px;
	font-weight: bold;
	padding-top: 11px;
}
.salary-total-container {
	float: left;
	width: 39%;
}
.salary-total-container p {
	font-size: 40px;
	font-weight: bold;
}
.salary-equivalent-container p {
	font-size: 20px;
	font-weight: bold;
}

#previous-year, #next-year, .month:not(.on), .cutoff_type:not(.on) {
	cursor: pointer;
}
#previous-year:hover , #next-year:hover {
	color: #696969;
}
.cRed {
	color: #FF0000;
}

.rankid-container p span {
	cursor: pointer;
	color: #00acee !important;
}
.total_amt{
	background: #fff6df !important;
}
.cursor-pointer{
	cursor: pointer;
}