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

#person-top-kv {
	box-sizing: border-box;
	width: 100%;
	height: 250px;
	padding-top: 50px;
	background: url(../images/top-kv.jpg) no-repeat center / cover;
}

#person-top-kv h2 {
	margin: 0 auto .5em;
	color: #FFF;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	letter-spacing: .15em;
	}
	
	#person-top-kv p {
		color: #FFF;
		font-size: 14.5px;
		line-height: 1.9;
		text-align: center;
		margin: 0 auto 1em;
		letter-spacing: .15em;
		}


#person-top-input {
	width: 100%;
	margin-bottom: 2em;
	padding: 20px 0;
	background-color: #152a5d;
	}
	#person-top-input table {
		width: 715px;
		margin: 0 auto;
		}
		#person-top-input table th,
		#person-top-input table td {
			padding: .8em 0 .6em;
			border-bottom: 2px solid #152a5d;
			font-size: 13px;
			line-height: 1.1;
			color: #FFF;
			vertical-align: middle;
			}
		
		#person-top-input table th {
			width: 153px;
			border-right: 7px solid #152a5d;
			text-align: center;
			}

		#person-top-input table td {
			}

		#person-top-input table td.reset-btn {
			width: 100px;
			border-left: 2px solid #152a5d;
			background: #565656 url(../images/reset-btn.png) no-repeat center / 64px 64px !important;
			}


		#person-top-input table tr:nth-of-type(1) th,
		#person-top-input table tr:nth-of-type(1) td {
			background-color: #287df4;
			}

		#person-top-input table tr:nth-of-type(2) th,
		#person-top-input table tr:nth-of-type(2) td {
			background-color: #3daff5;
			}

		#person-top-input table tr:nth-of-type(3) th,
		#person-top-input table tr:nth-of-type(3) td {
			background-color: #757575;
			}

		#person-top-input table tr:nth-of-type(4) th,
		#person-top-input table tr:nth-of-type(4) td {
			background-color: #757575;
			}

		#person-top-input table td ul {
			list-style: none;
			margin: 0 0 0 2em;
			padding: 0;
			}
			#person-top-input table td ul li {
				display: inline-block;
				list-style: none;
				margin: .3em 2em .5em 0;
				padding: 1px 0 0 0;
				}
			#person-top-input table td ul li.width-ss {
				width: 12%;
				}
			#person-top-input table td ul li.width-s {
				width: 12%;
				}
			#person-top-input table td ul li.width-m {
				width: 18%;
				}
			#person-top-input table td ul li.width-l {
				width: 24%;
				}
			#person-top-input table td ul li.width-ll {
				width: 36%;
				}
				#person-top-input table td ul li::before {
					display: inline-block;
					content: " ";
					width: 11px;
					height: 11px;
					border: 1px solid #FFF;
					margin: 2px 4px 0 0;
					}
				#person-top-input table td ul li.active::before {
					background-color: #FFFFFF;
					}

#sort-container {
	width: 1000px;
	margin: 0 auto;
	}
	#sort-container ul {
		list-style: none;
		margin: 0;
		padding: 0;
		}
		#sort-container ul li {
			display: block;
			float: left;
			position: relative;
			width: 440px;
			margin: 0 50px 50px 0;
			padding-bottom: 2em;
			border-bottom: 1px #ceeafb solid;
			}
		#sort-container ul li {
			display: none;
			float: left;
			position: relative;
			width: 440px;
			margin: 0 50px 50px 0;
			padding-bottom: 2em;
			border-bottom: 1px #ceeafb solid;
			animation: show .5s ease 0s;
			opacity: 0;
			}
		#sort-container ul li.on {
			display: block;
			opacity: 1;
			}
		@keyframes show {
			from { opacity: 0; }
			to   { opacity: 1; }
			}
			#sort-container ul li a {
				width: 100%;
				}
				#sort-container ul li a figure {
					display: block;
					width: 440px;
					height: 235px;
					background-color: #EEE;
					background: no-repeat center / cover;
					}
				#sort-container ul li.p01 a figure { background-image: url(../images/thumb-01.jpg); }
				#sort-container ul li.p02 a figure { background-image: url(../images/thumb-02.jpg); }
				#sort-container ul li.p03 a figure { background-image: url(../images/thumb-03.jpg); }
				#sort-container ul li.p04 a figure { background-image: url(../images/thumb-04.jpg); }
				#sort-container ul li.p05 a figure { background-image: url(../images/thumb-05.jpg); }
				#sort-container ul li.p06 a figure { background-image: url(../images/thumb-06.jpg); }
				#sort-container ul li.p07 a figure { background-image: url(../images/thumb-07.jpg); }
				#sort-container ul li.p08 a figure { background-image: url(../images/thumb-08.jpg); }
				#sort-container ul li.p09 a figure { background-image: url(../images/thumb-09.jpg); }
				#sort-container ul li.p10 a figure { background-image: url(../images/thumb-10.jpg); }
				#sort-container ul li.p11 a figure { background-image: url(../images/thumb-11.jpg); }
				#sort-container ul li.p12 a figure { background-image: url(../images/thumb-12.jpg); }
				#sort-container ul li.p13 a figure { background-image: url(../images/thumb-13.jpg); }
				#sort-container ul li.p14 a figure { background-image: url(../images/thumb-14.jpg); }
				#sort-container ul li.p15 a figure { background-image: url(../images/thumb-15.jpg); }
				#sort-container ul li.p16 a figure { background-image: url(../images/thumb-16.jpg); }
				#sort-container ul li.p17 a figure { background-image: url(../images/thumb-17.jpg); }
				#sort-container ul li.p18 a figure { background-image: url(../images/thumb-18.jpg); }
				#sort-container ul li.p19 a figure { background-image: url(../images/thumb-19.jpg); }
				#sort-container ul li.p20 a figure { background-image: url(../images/thumb-20.jpg); }
				#sort-container ul li.p21 a figure { background-image: url(../images/thumb-21.jpg); }
				#sort-container ul li.p22 a figure { background-image: url(../images/thumb-22.jpg); }
				#sort-container ul li.p23 a figure { background-image: url(../images/thumb-23.jpg); }
				#sort-container ul li.p24 a figure { background-image: url(../images/thumb-24.jpg); }
				#sort-container ul li.p25 a figure { background-image: url(../images/thumb-25.jpg); }
				#sort-container ul li.p26 a figure { background-image: url(../images/thumb-26.jpg); }
				#sort-container ul li.p27 a figure { background-image: url(../images/thumb-27.jpg); }
				#sort-container ul li.p28 a figure { background-image: url(../images/thumb-28.jpg); }
				#sort-container ul li.p29 a figure { background-image: url(../images/thumb-29.jpg); }
				#sort-container ul li.p30 a figure { background-image: url(../images/thumb-30.jpg); }
				#sort-container ul li.p31 a figure { background-image: url(../images/thumb-31.jpg); }
				#sort-container ul li.p32 a figure { background-image: url(../images/thumb-32.jpg); }

				#sort-container ul li a .sort-body {
					display: block;
					box-sizing: border-box;
					width: 100%;
					padding: 10px 30px 10px 0;
					font-size: 18px;
					line-height: 1.6;
					color: #0c94e9;
					}
		.name-box {
			position: absolute;
			top: 34px;
			left: -18px;
			box-sizing: border-box;
			width: 170px;
			height: 170px;
			}
		.p-sogo .name-box {
			background-color: #287df4;
			}
		.p-pro .name-box {
			background-color: #3daff5;
			}
			.name-box-set {
				display: block;
				box-sizing: border-box;
				width: 90%;
				margin-bottom: 25px;
				padding: 15px 0 11px 13px;
				border-bottom: 1px solid #FFF;
				color: #FFF;
				font-size: 11px;
				line-height: 1.5;
				}
				.name-box-set em {
					font-size: 14px;
					font-style: normal;
					}
			.name-box-name {
				margin: 0 0 11px 13px;
				color: #FFF;
				font-size: 21px;
				font-weight: bold;
				line-height: 1.1;
				}
			.name-box-year {
				margin-left: 13px;
				color: #FFF;
				font-size: 13px;
				}
.sp-btn {display: none;}
	

/*
#person-top-input input[type=checkbox] {
	display: none;
	}

#person-top-input input[type=checkbox] {
	box-sizing: border-box;
	-webkit-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	position: relative;
	display: inline-block;
	margin: 0 20px 8px 0;
	padding: 12px 12px 12px 42px;
	border-radius: 8px;
	background-color: #f6f7f8;
	vertical-align: middle;
	cursor: pointer;
	}
#person-top-input input[type=checkbox]:hover {
	background-color: #e2edd7;
	}
#person-top-input input[type=checkbox]:hover:after {
	border-color: #53b300;
	}
#person-top-input input[type=checkbox]:after {
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
	position: absolute;
	top: 50%;
	left: 15px;
	display: block;
	margin-top: -10px;
	width: 16px;
	height: 16px;
	border: 2px solid #bbb;
	border-radius: 6px;
	content: '';
	}

#person-top-input input[type=checkbox]:before {
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	position: absolute;
	top: 50%;
	left: 21px;
	display: block;
	margin-top: -7px;
	width: 5px;
	height: 9px;
	border-right: 3px solid #53b300;
	border-bottom: 3px solid #53b300;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	}
#person-top-input input[type=checkbox]:checked + input[type=checkbox]:before {
	opacity: 1;
	}