@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++

	Directory

++++++++++++++++++++++++++++++++++++++++ */

/* ----------------------------------------
	directorySearch
---------------------------------------- */

#searchName {
	margin: 0 0 40px;
}

#directorySearch section {
	margin-top: 20px;
}
#directorySearch section h3 {
	height: 23px;
	margin-bottom: 5px;
	padding-top: 7px;
	background: #1e1e1e;
}
#directorySearch section h3 img {
	display: block;
	height: 16px;
	margin: auto;
}
#directorySearch section ul {
	padding: 10px;
	background: #fff;
}
#directorySearch section li {
	float: left;
	margin-right: 10px;
	text-align: center;
	line-height: 40px;
}

#searchPrevious li { width: 260px; }
#searchJapanese li { width: 40px; }
#searchArea li { width: 60px; }
/* #searchSponsor li { width: 126px; } */

#directorySearch section a {
	display: block;
	border-radius: 0 5px 5px 0;
	background: #d2d2d2;
	text-decoration: none;
	color: #1e1e1e;
}
#directorySearch section li:first-child a,
#searchPrevious li a {
	border-radius: 5px;
}
/*
#searchSponsor li{
	margin-top: 10px;
}
#searchSponsor li:nth-child(5n) {
	margin-right: 0;
}
#searchSponsor li:nth-child(1),
#searchSponsor li:nth-child(2),
#searchSponsor li:nth-child(3),
#searchSponsor li:nth-child(4),
#searchSponsor li:nth-child(5) {
	margin-top: 0;
}
#searchSponsor li a {
	border-radius: 0;
	background: none;
}
*/

/* ++++++++++++++++++++++++++++++++++++++++

	Search Result

++++++++++++++++++++++++++++++++++++++++ */

#directoryList li {
	margin-top: 5px;
	background: #fff;
	font-size: 21px;
}
#directoryList li:first-child {
	margin-top: 0;
}
#directoryList li a {
	display: block;
	position: relative;
	padding: 20px 157px 20px 20px;
	text-decoration: none;
	color: #5a5a5a;
}
#directoryList li a:after {
	content: '';
	position: absolute;
	right: 20px;
	top: 0;
	width: 12px;
	height: 100%;
	background: url(../img/common/arrow_r.png) 0 50% no-repeat;
	background-size: 100%;
}
#directoryList li small {
	margin-left: 20px;
	font-size: 14px;
}

#directoryList .japan16,
#directoryList .ladies8 { background: #1e1e1e; }
#directoryList .japan16.champion,
#directoryList .ladies8.champion { background: #96783c; }

#directoryList .japan16 a,
#directoryList .ladies8 a {
	color: #fff;
}
#directoryList .japan16 a:after,
#directoryList .ladies8 a:after {
	background-image: url(../img/common/arrow_r_wht.png);
}

#directoryList li .logo {
	display: block;
	position: absolute;
	right: 50px;
	top: 50%;
	width: 87px;
	height: 26px;
	margin-top: -13px;
	background: 0 50% no-repeat;
	background-size: 100%;
	text-indent: -20000px;
}

#directoryList .japan16 .logo { background-image: url(../img/directory/logo_japan16.png); }
#directoryList .ladies8 .logo { background-image: url(../img/directory/logo_ladies8.png); }



/* ++++++++++++++++++++++++++++++++++++++++

	Detail

++++++++++++++++++++++++++++++++++++++++ */

#directoryDetail {
	color: #5a5a5a;
}
#directoryDetail a {
	color: #96783c;
}
#directoryDetail p a:before {
	content: '> ';
}
#directoryDetail>div {
	position: relative;
}

#detailPhoto {
	position: absolute;
	left: 20px;
	top: 180px;
}
#detailPhoto li {
	float: left;
	width: 220px;
	margin-right: 15px;
}
#detailPhoto img {
	width: 100%;
}

#directoryTitle {
	position: relative;
	height: 65px;
	margin-bottom: 260px;
	padding: 0 20px;
	background: #fff;
	white-space: nowrap;
	letter-spacing: -.4em;
	font-weight: normal;
	font-size: 21px;
	line-height: 1;
}
#directoryTitle:before,
#directoryTitle h3,
#directoryTitle .rank {
	display: inline-block;
	vertical-align: middle;
	letter-spacing: 0;
}
#directoryTitle:before {
	content: '';
	height: 100%;
}
#directoryTitle h3 {
	width: 62%;
	white-space: normal;
	font-weight: normal;
}
#directoryTitle h3 span,
#directoryTitle span+small {
	display: inline-block;
}
#directoryTitle h3 span {
	margin-right: 20px;
}
#directoryTitle h3 small {
	margin-left: 20px;
}
#directoryTitle h3 span+small {
	margin: 0;
}
#directoryTitle small,
#directoryTitle .year {
	font-size: 14px;
}

#directoryTitle .rank {
	width: 38%;
	text-align: right;
}

#directoryTitle .rank>li+li {
	margin-top: 5px;
}

#directoryTitle .rank .year,
#directoryTitle .rank ul,
#directoryTitle .rank li li {
	display: inline-block;
	vertical-align: baseline;
}
#directoryTitle .rank .year {
	margin-right: 5px;
}

#directoryTitle .rank li li {
	position: relative;
	padding-left: 27px;
}
#directoryTitle .rank li li:before {
	content: '';
	position: absolute;
	left: 0;
	top: -2px;
	width: 25px;
	height: 25px;
	background: 50% 50% no-repeat;
	background-size: contain;
}
#directoryTitle .rank li li+li {
	margin-left: 5px;
}

#directoryTitle .rank .blue:before { background-image: url(../img/common/icon_blue.png); }
#directoryTitle .rank .red:before { background-image: url(../img/common/icon_red.png); }

#directoryDetail h4 {
	box-sizing: border-box;
	height: 30px;
	margin-bottom: 5px;
	padding-top: 8px;
	background: #1e1e1e;
}
#directoryDetail h4 img {
	display: block;
	height: 14px;
	margin: auto;
}


/* ----------------------------------------
	detailConstructor
---------------------------------------- */

#detailConstructor,
#pcRight {
	float: left;
	width: 335px;
}
#detailConstructor li {
	float: left;
	width: 108px;
	margin-left: 5px;
}
#detailConstructor li:first-child,
#detailConstructor #detailOthers {
	margin-left: 0;
}
#detailConstructor li:nth-child(2){
	width: 109px;
}
#detailConstructor li>div,
#detailProfile dl,
#detailHistory>p  {
	padding: 10px;
	background: #fff;
}
#detailConstructor li a img {
	background: #fff;
}

#detailConstructor #detailOthers {
	width: 100%;
	margin-top: 5px;
}
#detailConstructor #detailOthers li {
	width: 98px;
	margin: 0 0 10px 10px;
}
#detailConstructor #detailOthers li:first-child,
#detailConstructor #detailOthers li:nth-child(3n+1) {
	clear: left;
	margin-left: 0;
}
#detailConstructor #detailOthers li:nth-child(3n+2){
	width: 99px;
}


/* ----------------------------------------
	detailProfile
---------------------------------------- */

#pcRight {
	float: right;
}

#detailProfile dt,
#detailProfile dd {
	display: inline-block;
	width: 75px;
	margin-top: 5px;
	vertical-align: middle;
}
#detailProfile dt {
	background: #d2d2d2;
	text-align: center;
	font-size: 12px;
	line-height: 30px;
}
#detailProfile dd {
	width: 70px;
	padding-left: 10px;
}
#detailProfile dt:nth-child(1),
#detailProfile dd:nth-child(2),
#detailProfile dt:nth-child(3),
#detailProfile dd:nth-child(4) {
	margin-top: 0;
}


/* ----------------------------------------
	detailHistory
---------------------------------------- */

#detailHistory {
	margin-top: 5px;
}
#detailHistory h4 {
	padding-top: 7px;
}
#detailHistory h4 img {
	height: 16px;
}
#detailHistory span {
	float: right;
}


/* ----------------------------------------
	Color Variation
---------------------------------------- */

#directoryDetail.champion,
#directoryDetail.top16,
.top50 #directoryTitle,
.top100 #directoryTitle,
.top150 #directoryTitle,
.top200 #directoryTitle,
.top300 #directoryTitle {
	color: #fff;
}

.champion #directoryTitle,
#directoryDetail.champion h4 { background-color: #96783c; }
.top16 #directoryTitle { background-color: #1e1e1e; }
.top50 #directoryTitle,
#directoryDetail.top50 h4 { background-color: #594397; }
.top100 #directoryTitle,
#directoryDetail.top100 h4 { background-color: #325040; }
.top150 #directoryTitle,
#directoryDetail.top150 h4 { background-color: #d2471e; }
.top200 #directoryTitle,
#directoryDetail.top200 h4 { background-color: #f3c415; }
.top300 #directoryTitle,
#directoryDetail.top300 h4 { background-color: #00b0ec; }

.champion #detailConstructor li>div,
.champion #detailProfile dl,
.champion #detailHistory>p,
.top16 #detailConstructor li>div,
.top16 #detailProfile dl,
.top16 #detailHistory>p  {
	background-color: #1e1e1e;
}

.champion #detailProfile dt,
.top16 #detailProfile dt {
	background-color: #3c3c3c;
}


/**
	modify search sponsor bloc
**/
section#searchSponsor ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 12px 8px;

	margin: 0;
	padding: 12px 8px;
}

section#searchSponsor li {
	width: calc(20% - 6.4px);
    float: none;
    margin-right: 0;
    text-align: center;
    line-height: initial;
}

section#searchSponsor a {
    display: block;
    border-radius: initial !important;
    background: none;
    text-decoration: none;
    color: initial;
}

.searchAndButton {
	margin: 0 0 40px;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
	justify-content: space-between;
    flex-direction: row;
}

.searchAndButton form {
	margin: 0 !important;
}

.reservedPlayer {
	line-height: 40px;
	padding-left: 40px;
	padding-right: 40px;
	border: none;
	border-radius: 5px;
	font-size: 14px;
	text-align: center;
	color: #1e1e1e;
	background: #d2d2d2;
	cursor: pointer;
	text-decoration: none;
	transition: .2s;
}