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

@media screen and (max-width: 767px) {


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

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


#person-top-input {
	width: 100%;
	padding: 20px 0;
	background-color: #152a5d;
	}
	#person-top-input table {
		display: block;
		width: 94%;
		margin: 0 auto 1em;
		}
		#person-top-input table th,
		#person-top-input table td {
			display: block;
			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: 100%;
			border-right: none;
			text-align: center;
			}

		#person-top-input table td {
			}

		#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.reset-btn {
			display: none;
			}
		#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::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;
					}
				#person-top-input table td ul li.width-ss {
					width: 40%;
					}
				#person-top-input table td ul li.width-s {
					width: 40%;
					}
				#person-top-input table td ul li.width-m {
					width: 40%;
					}
				#person-top-input table td ul li.width-l {
					width: 40%;
					}
				#person-top-input table td ul li.width-ll {
					width: 80%;
					}

	.sp-btn {
		display: block;
		list-style: none;
		width: 94%;
		margin: 0 auto;
		padding: 0;
		}
		.sp-btn li {
			display: block;
			width: 100%;
			padding: .8em 0 .6em;
			background-color: #FFF;
			color: #287ef7;
			text-align: center;
			letter-spacing: .2em;
			border-radius: 4px;
			font-weight: normal;
			}
	
#sort-container {
	width: 100%;
	margin: 0 auto;
	}
	#sort-container ul {
		list-style: none;
		width: 100%;
		margin: 0;
		padding: 0;
		}
		#sort-container ul li {
			display: none;
			float: none;
			position: relative;
			width: 86%;
			margin: 0 7% 15vw 7%;
			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: 100%;
					height: auto;
					margin: 0 auto;
					padding-top: 54%;
					/*padding-top: 45%;*/
					background-color: #EEE;
					}
				#sort-container ul li a .sort-body {
					display: block;
					box-sizing: border-box;
					width: 100%;
					margin: 0 auto;
					padding: 5vw 10vw 5vw 0;
					font-size: calc(12px + 0.5vw);
					line-height: 1.6;
					color: #0c94e9;
					}
		.name-box {
			position: absolute;
			top: 5.4vw;
			left: -5vw;
			box-sizing: border-box;
			width: 36vw;
			height: 36vw;
			transform-origin: left center;
			}
		.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: 4.5vw;
				padding: 4vw 0 2vw 3vw;
				border-bottom: 1px solid #FFF;
				color: #FFF;
				font-size: calc(6px +  0.5vw);
				line-height: 1.5;
				}
				.name-box-set em {
					font-size: calc(9px + 0.5vw);
					font-style: normal;
					}
			.name-box-name {
				margin: 0 0 1.6vw 3vw;
				color: #FFF;
				font-size: calc(12px + 0.5vw);
				font-weight: bold;
				line-height: 1.1;
				}
			.name-box-year {
				margin-left: 3vw;
				color: #FFF;
				font-size: calc(8px + 0.5vw);
				}

	
}