/* Player
=================================== */

#players #container { background:url(../img/bg_player.jpg) fixed; background-size:cover; }
#players #pagebody { background-color:#fff; color:#333; }
#pagettl-box:after {content:"";clear:both;display:block;}
#players #pagettl { float:left; }
#pl-notice { float:right; margin:23px 20px 0 0; font-size:90%; line-height:140%; }
#pl-notice li { display:inline; margin-right:0.5em; }
#players #pagebody-top { height:50px; }
#players main { padding:0 20px 20px 20px; }
#players table { width:100%; box-sizing:border-box; margin-bottom:15px; border-top:1px #aaa solid; border-left:1px #aaa solid; }
#players table a { color:#333; }
#players table caption { padding:10px 0; font-size:90%; }
#players table th, #players table td { border-collapse:collapse; border-right:1px #aaa solid; border-bottom:1px #aaa solid; padding:10px; font-size:90%; line-height:120%; }
#players table tr:nth-child(odd) td { background-color:#efefef; }
#players table tr.japanese td { background-color:#fefe98; }
#players table .thBg { background-color:#4aab01; color:#fff; }
#players table td.rdbg { text-align:center; }
#players table td.name { border-right:none; font-weight:bold; }
#players table td.flag { width:24px; }
#players #Date { text-align:right; font-size:90%; margin-bottom:10px; }

#pl-shikaku h2 { display:block; width:217px; height:30px; margin:0 0 15px 0; text-indent:-9999px; }
#pl-shikaku ul { margin-bottom:10px; list-style:decimal inside; }
#pl-shikaku ul li { font-size:90%; line-height:120%; padding:0 10px 0.4em 10px; }
#pl-shikaku li.etc{ list-style:none !important; }
#pl-shikaku h3 { margin-bottom:10px; }

/* ------ Media Queries ------ */

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

#players #pagebody { padding-top:0; }
#players #pagebody-top { height:auto; }
#players #pagettl { float:none; border-bottom:#ddd 1px solid; }
#pl-notice { float:none; margin:5px 0 10px 10px; font-size:80%; }
#pl-notice li { display:block; margin-right:0em; }
#players main { padding:0 10px 10px 10px; }
#players table th, #players table td { padding:5px; }
#players table td.flag { width:auto; }

#players table tr.thBg th:nth-child(4),
#players table td.scbg { display:none; }

#pl-shikaku h2 { width:auto; height:auto; margin:0 0 10px 0; padding-bottom:7px; border-bottom:#666 1px dotted; font-size:110%; line-height:120%; background:none; text-indent:0; }

}


/* player detail
----------------------------------- */

#pl-dtl-name { margin-bottom:1.0em; padding:0.3em; background-color:#46a201; color:#fff; font-size:150%; line-height:140%; }

#pl-box:after {content:"";clear:both;display:block;}

#pl-box-l { float:left; width:400px; }
#pl-dtl-pic { position:relative; width:100%; height:0; padding-top:100%; background-color:#efefef; }
#pl-dtl-pic p { position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

#pl-box-r { float:right; width:520px; }

#pl-dtl-data h3 { background-color:#46a201; color:#fff; padding:0.4em 0.6em; font-size:90%; line-height:140%; }
#pl-dtl-data table { width:100%; border-left:#ddd 1px solid; }
#pl-dtl-data table th, #pl-dtl-data table td { vertical-align:top; padding:0.4em 0.4em; border-right:#ddd 1px solid; border-bottom:#ddd 1px solid; font-size:90%; line-height:140%; }
#players #pl-dtl-data table tr:nth-child(odd) td { background-color:transparent; }
#pl-dtl-data table th { text-align:left; white-space:nowrap; }

#pl-dtl-text { padding-bottom:15px; font-size:90%; line-height:180%; }

#pl-btn-back { padding:10px 0; }
#pl-btn-back a { margin:0 0 0 auto; display:block; width:8.0em; height:auto; padding:0.6em 0.4em; box-sizing:border-box; text-align:center; background-image:none; background-color:#46a201; color:#fff; font-size:14px; font-weight:bold; text-decoration:none; text-indent:0; }
#pl-btn-back a:before { position:relative; top:0.15em; float:left; content:" "; vertical-align:middle; width:0.7em; height:0.7em; background:url(../img/arrow2.png) center center no-repeat; background-size:contain; }

/* ------ Media Queries ------ */

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

#pl-dtl-name { font-size:100%; }

#pl-box-l { float:none; width:80%; margin:0 10% 20px 10%; }
#pl-box-r { float:none; width:auto; }

#pl-dtl-data { font-size:90%; width:80%; margin:0 10%; }

#pl-dtl-text { font-size:85%; line-height:150%; }

}