@charset "utf-8";

#data_root, #loading{
position: relative;
width:70%;
margin:0px auto;
min-width:800px;
}

#loading_img_div{
position: absolute;
width: 90%;
margin: auto;
text-align: center;
padding: 20% 0px;
min-height:calc(68vh);
}

#columns {
border-radius: 10px;border: 4px solid #3f51b5;
}

div.ui-columns-search iv.ui-columns-title{
border-radius: 7px 7px 0px 0px;
}
div.ui-table-footer{
border-radius: 0px 0px 7px 7px;
}
#columns th {
font-weight: normal;
}

/*コンボボックススタイル */
/* https://copypet.jp/797/ */
/* http://weboook.blog22.fc2.com/blog-entry-408.html */
.cp_ipselect {
position: relative;
width: 90%;
margin: 2em auto;
text-align: center;
}
.cp_sl06 {
position: relative;
font-family: inherit;
background-color: transparent;
width: 100%;
padding: 10px 10px 10px 0;
font-size: 18px;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(0,0,0, 0.3);
}
.cp_sl06:focus {
outline: none;
border-bottom: 1px solid rgba(0,0,0, 0);
}
.cp_ipselect .cp_sl06 {
appearance: none;
-webkit-appearance:none
}
.cp_ipselect select::-ms-expand {
display: none;
}
.cp_ipselect:after {
position: absolute;
top: 18px;
right: 10px;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.cp_sl06_selectlabel {
color: rgba(0,0,0, 0.5);
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: 0.2s ease all;
}
.cp_sl06:focus ~ .cp_sl06_selectlabel, .cp_sl06:valid ~ .cp_sl06_selectlabel {
/*color: #da3c41;*/
color: #737373;
top: -20px;
transition: 0.2s ease all;
font-size: 14px;
}
.cp_sl06_selectbar {
position: relative;
display: block;
width: 100%;
}
.cp_sl06_selectbar:before, .cp_sl06_selectbar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
/*background: #da3c41;*/
background: #737373;
transition: 0.2s ease all;
}
.cp_sl06_selectbar:before {
left: 50%;
}
.cp_sl06_selectbar:after {
right: 50%;
}
.cp_sl06:focus ~ .cp_sl06_selectbar:before, .cp_sl06:focus ~ .cp_sl06_selectbar:after {
width: 50%;
}
.cp_sl06_highlight {
position: absolute;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}

.btn
{
position: relative;
width: 100%;
min-height: 60px;
padding: 10px 10px 10px 0;
font-size: 18px;
border-radius: 7px;
}

.btn:hover
{
background-color: #536dfe;
border-color: rgba(0, 0, 0, 0.26);
}

@media screen and max-width(480px) {
.btn:hover {
/* hoverが付いていない時と同じスタイルを当てる */
background: #536dfe;
}
}

.btn_ipselect {
position: relative;
width: 90%;
margin: 0em auto;
text-align: center;
}

.ripple {
position: relative;
overflow: hidden;
}

.ripple .rp-effect {/*エフェクト*/
position: absolute;
border-radius: 50%;
opacity: 0.35;/*波紋の濃さ*/
transform: scale(0);
background: #FFF;/*波紋色*/
animation: ripple 1000ms;
pointer-events: none; 
}

@-webkit-keyframes ripple {
to {
opacity: 0;
transform: scale(2.0);
}
}

@keyframes ripple {
to {
opacity: 0;
transform: scale(2.0);
}
}

.columns_ipselect {
position: relative;
width: 90%;
margin: 2em auto;
text-align: center;
}
.columns_ipselect-col5 {
position: relative;
width: 75%;
margin: 2em auto;
text-align: center;
}
.columns_ipselect-col7 {
position: relative;
width: 80%;
margin: 2em auto;
text-align: center;
}
.columns_ipselect-col8 {
position: relative;
width: 85%;
margin: 2em auto;
text-align: center;
}

#menu{
position: relative; 
overflow: hidden;
width: 90%;
margin: 0px auto;
}

#menu ul{
position: relative;
padding: 0px;
margin: 0px;
left: 50%;
float: left;
}

#menu ul li{
position: relative;
left: -50%;
float: left;
list-style: none;
}

#cmb_mode, #cmb_league, #cmb_tournaments, #cmb_stats_param{
min-width:210px;
}

#cmb_year, #cmb_area{
min-width:120px;
}

.team_td{
   width:99%;
   margin: auto;
}

.player_td{
/*   min-width:130px;*/
   width:99%;
   margin: auto;
}

div.columns_ipselect-col8 div.ui-columns-table table.ui-table th[data-columns-sortby="Team"]{
   min-width:14%;
   max-width:120px;
   width:16%;
/*   min-width:100px;*/
   margin: auto;
}

div.columns_ipselect-col7 div.ui-columns-table table.ui-table th[data-columns-sortby="Team"]{
   min-width:15%;
   max-width:120px;
   width:18%;
/*   min-width:100px;*/
   margin: auto;
}

div.columns_ipselect-col5 div.ui-columns-table table.ui-table th[data-columns-sortby="Team"]{
   min-width:10%;
   max-width:120px;
   width:15%;
/*   min-width:100px;*/
   margin: auto;
}

div.columns_ipselect div.ui-columns-table table.ui-table th[data-columns-sortby="Team"]{
   min-width:10%;
   max-width:120px;
   width:13%;
/*   min-width:100px;*/
   margin: auto;
}

div.columns_ipselect-col8 div.ui-columns-table table.ui-table th[data-columns-sortby="Player"]{
/*   min-width:130px;*/
   width:22%;
   min-width:18%;
   margin: auto;
}

div.columns_ipselect-col7 div.ui-columns-table table.ui-table th[data-columns-sortby="Player"]{
/*   min-width:130px;*/
   width:25%;
   min-width:20%;
   margin: auto;
}

div.columns_ipselect-col5 div.ui-columns-table table.ui-table th[data-columns-sortby="Player"]{
/*   min-width:130px;*/
   width:30%;
   min-width:25%;
   margin: auto;
}

div.columns_ipselect div.ui-columns-table table.ui-table th[data-columns-sortby="Player"]{
/*   min-width:130px;*/
   min-width:13%;
   margin: auto;
}

div.columns_ipselect-col8 div.ui-columns-table table.ui-table th[data-columns-sortby]:not([data-columns-sortby="Player"]):not([data-columns-sortby="Team"]){
    width:10%;
    max-width:11%;
/*    min-width:80px;*/
    margin: auto;
}

div.columns_ipselect-col7 div.ui-columns-table table.ui-table th[data-columns-sortby]:not([data-columns-sortby="Player"]):not([data-columns-sortby="Team"]){
    width:10%;
    max-width:11%;
/*    min-width:80px;*/
    margin: auto;
}

div.columns_ipselect-col5 div.ui-columns-table table.ui-table th[data-columns-sortby]:not([data-columns-sortby="Player"]):not([data-columns-sortby="Team"]){
    width:12%;
    max-width:15%;
    min-width:10%;
/*    min-width:80px;*/
    margin: auto;
}

div.columns_ipselect div.ui-columns-table table.ui-table th[data-columns-sortby]:not([data-columns-sortby="Player"]):not([data-columns-sortby="Team"]){
    width:8%;
    max-width:11%;
    min-width:5%;
/*    min-width:80px;*/
    margin: auto;
}

/*value_tdは、値にしか反映しないstyle*/
.value_td{
margin: auto;
font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
display: inline;
font-size:16px
}

.animation-main {
animation: inout_main 150ms linear;
-webkit-animation: inout_main 150ms linear forwards; /* Safari & Chrome */
}

@keyframes inout_main {
  from   { transform-origin: right top 0px; opacity: 0; display:block; transform: scale(0, 0); }
  to  { opacity: 1; display:block;transform: scale(1, 0.1);  }
}
@-webkit-keyframes inout_main { /* Safari & Chrome */
  from   { transform-origin: right top 0px; opacity: 0; display:block; }
  to  { opacity: 1; display:block; -webkit-transform: scale(1, 0.1); }
}

/*
.animation-container {
animation: inout 100ms linear;
-webkit-animation: inout .1s linear forwards;
}

@keyframes inout {
  from   { transform-origin: right top 0px; opacity: 0; transform: scale(0, 0); }
  to  { opacity: 0.5; transform: scale(1, 0.1); }
}
@-webkit-keyframes inout {
  from   { transform-origin: right top 0px; opacity: 0; -webkit-transform: scale(0, 0); }
  to { opacity: 0.5; -webkit-transform: scale(1, 0.1); }
}
*/












.animation-main_finish {
animation: inout_main_finish 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-animation: inout_main_finish 150ms linear forwards; /* Safari & Chrome */
}

@keyframes inout_main_finish {
  from   { transform: scale(1, 0.1); }
  to  { transform: scale(1, 1);  }
}
@-webkit-keyframes inout_main_finish { /* Safari & Chrome */
  from   { scale(1, 0.1); }
  to  { -webkit-transform: scale(1, 1); }
}

.animation-container_finish {
animation: inout_finish 600ms liner forwards;
-webkit-animation: inout_finish 600ms linear forwards; /* Safari & Chrome */
}

@keyframes inout_finish {
  from   { opacity: 0;}
  to  { opacity: 1; }
}
@-webkit-keyframes inout_finish { /* Safari & Chrome */
  from   { opacity: 0;}
  to { opacity: 1}
}