@import url("./name.css");/*チーム名*/
@import url("./season.css");/*シーズン名*/
@import url("./item.css");/*表示/非表示の項目*/

/* 全体の配色とフォントの設定 */ 
body{
  color: rgb(0,17,68);
  font-size: 15px;
  background-color: rgb(238,238,238);
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a{
  color: rgb(0,93,161);
}

a:hover{
  color: rgb(0,170,255);
}

.card{
  background-color: rgb(226,226,229);
  padding: 0.2rem;
}

span.k{
  word-break: keep-all;
}

span.b, td.b{
  font-weight: bold;
}

span.s2, td.s2{
  font-size: 120%;
}

span.s3, td.s3{
  font-size: 140%;
}

span.s4, td.s4{
  font-size: 160%;
}

.m5{
  margin-top: 0.5rem;
}

span.r90{
  transform: rotate(-90deg);
  display:inline-block; 
}

span.sm{
  font-size: 80%;
}

span.xsm{
  font-size: 60%;
  color:#888;
}

.photo img{
  box-shadow: 1px 1px 5px 0px rgb(0,17,68);
  margin: 2px;
}

/* 横線 */
hr{
  border-top: 1px solid rgba(0,17,68,0.2);
}

.hr10{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.hr5{
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.hr55{
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
}

/* 左右のスペースを狭めに設定 */
.container{
  max-width: 100%;
  margin-top: 10px;
}

@media (min-width: 576px){
  .container{
    max-width: 95%;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 90%;
  }
}

/* タイトルのBullet */
.bullbox{
  margin-top: 0.5rem;
  margin-right: 0.2rem;
  display: none;
  background-color: rgb(0,131,208);
}

/* top-menu */
.top-menu{
  width: 100%;
  margin-bottom: 0.2rem;
  font-size: 120%;
  background-color: rgb(0,170,255);
  display: flex;
  margin-bottom: 0.2rem;
}

.top-menu a{
	text-align: center;
	text-decoration: none;
  color: rgb(238,238,238);
  flex-grow: 1;
}

.top-menu a:hover{
  background-color: rgb(0,131,208);
}

/* game-menu */
.game-menu{
  width: 100%;
  margin-bottom: 0.2rem;
  font-size: 120%;
  background-color: rgb(0,131,208);
  display: flex;
}

.game-menu a{
	text-align: center;
	text-decoration: none;
  color: rgb(238,238,238);
  flex-grow: 1;
}

.game-menu a:hover{
  background-color: rgb(0,170,255);
}

/* 小さな見出し */
div.header{
  padding: 0.3rem 0.5rem 0.2rem;
  margin-top: 0.2rem;
  position: relative;
  color: rgb(238,238,238);
}

span.header{
  padding: 0.3rem 0.5rem 0.2rem;
  margin: 0.2rem 0 0 -0.5rem;
}

div.htext{
  background-color: rgb(0,93,161);
}

span.htext{
  background-color: rgb(0,131,208);
}

@keyframes roll-over {
  from { transform: rotateX(0deg); }
  20% { transform: rotateX(360deg); }
  to { transform: rotateX(360deg); }
}

.anim-header0{
  animation: roll-over 5s ease-in-out 0s infinite;
}
.anim-header1{
  animation: roll-over 5s ease-in-out 1s infinite;
}
.anim-header2{
  animation: roll-over 5s ease-in-out 2s infinite;
}

/* 表示アニメ */

@keyframes expand {
  from { transform: translateY(-50%) scaleY(0.1); }
  to { transform: translateY(0.0) scaleY(1.0); }
}

.anim-e{
  animation: expand 0.3s linear;
}

@keyframes down {
  from { opacity: 0.0; }
  to { opacity: 1.0; }
}

.anim-d0{ animation: down 0.4s linear 0s backwards;}
.anim-d1{ animation: down 0.4s linear 0.05s backwards;}
.anim-d2{ animation: down 0.4s linear 0.1s backwards;}
.anim-d3{ animation: down 0.4s linear 0.15s backwards;}
.anim-d4{ animation: down 0.4s linear 0.2s backwards;}
.anim-d5{ animation: down 0.4s linear 0.25s backwards;}
.anim-d6{ animation: down 0.4s linear 0.3s backwards;}
.anim-d7{ animation: down 0.4s linear 0.35s backwards;}
.anim-d8{ animation: down 0.4s linear 0.4s backwards;}
.anim-d9{ animation: down 0.4s linear 0.45s backwards;}
.anim-dx{ animation: down 0.4s linear 0.5s backwards;}

/* players list*/
span.pitem:not(:empty){
  margin-right: 0.7rem;
}

span.birth:not(:empty)::after{
  content: "生";
}
span.age:not(:empty)::before{
  content: "（";
}
span.age:not(:empty)::after{
  content: "歳）";
}

/* players row*/
.players td.num{
  color: rgb(0,170,255);
  text-align: center;
  width: 4rem;
  font-size: 200%;
}

.players .name{
  font-size: 150%;
}

/* tableの前後のマージン */

table.tm{
  margin-top: 0.5rem;
}
table.bm{
  margin-bottom: 0.5rem;
}

table th.p15,
table td.p15{
  width:15%;
}
table th.p30,
table td.p30{
  width:30%;
}

table td.center{
  text-align: center;
}

/* simple-table */
.simple-table{
  width: 100%;
}

.simple-table td{
  padding: 0.2rem;
  border: 1px solid rgba(0,17,68,0.2);
}

/* mvp-table */
.mvp-table{
  width: 100%;
  background-color: rgb(238,238,238);
  border-right:3px solid rgb(0,170,255);
}

.mvp-table tr{
  border: 1px solid rgba(0,17,68,0.2);
}

.mvp-table td{
  padding: 0.2rem;
}

.mvp-table td.photo{
  width:80px;
  text-align: center;
}

/* top-table */
.top-table{
  width: 100%;
  background-color: rgb(238,238,238);
  margin: 0.1rem 0;
}

.top-table tr{
  border: 1px solid rgba(0,17,68,0.2);
}

.top-table td{
  padding: 0.2rem;
  text-align: center;
}

.top-table td.w{
  width: 30px;
}

.top-table td.half{
  width: 50%;
}

.top-table td.v{
  width: 4rem;
}

.top-table td.photo{
  width: 60px;
}

.top-table td.name{
  text-align: left;
}

.top-table td.lb{
  border-right:3px solid rgb(0,170,255);
}

/* run-table */
.run-table{
  background-color: rgb(238,238,238);
  width: 100%;
  -webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}


.run-table th,
.run-table td{
  text-align: center;
  padding: 0.3rem 0;
  border: 1px solid rgba(0,17,68,0.2);
}

.run-table.w0 th:not(.name){width:6.15%;}
.run-table.w1 th:not(.name){width:5.71%;}
.run-table.w2 th:not(.name){width:5.33%;}
.run-table.w3 th:not(.name){width:5%;}
.run-table.w4 th:not(.name){width:4.7%;}
.run-table.w5 th:not(.name){width:4.44%;}
.run-table.w6 th:not(.name){width:4.21%;}
.run-table.w7 th:not(.name){width:4%;}
.run-table.w8 th:not(.name){width:3.8%;}
.run-table.w9 th:not(.name){width:3.63%;}
.run-table.w10 th:not(.name){width:3.84%;}
.run-table.w11 th:not(.name){width:3.7%;}
.run-table.w12 th:not(.name){width:3.57%;}

.run-table th{
  font-size: 90%;
}

.run-table th.name,
.run-table td.name{
  width: auto;
  font-weight: bold;
}

.run-table th.run,
.run-table td.run{
  font-weight: bold;
}

.run-table td.win{
  padding-left: -3px;
  border-left: 6px solid rgb(0,170,255);
}

/* stickyなrun-table */
table.sticky{
  position: -webkit-sticky;
  position: -ms-sticky;
  position: sticky;
  top: -1px;
  z-index: 10;
}

table.sticky td{
  user-select: none;
}

table.sticky td.r:hover{
  font-weight: bold;
  font-style: oblique;
}

/* order-table */
.order-table{
  background-color: rgb(238,238,238);
  width: 100%;
}

.order-table th,
.order-table td{
  text-align: center;
  border: 1px solid rgba(0,17,68,0.2);
}

.order-table td.name{
  text-align: left;
  padding-left: 0.5rem;
}

/* play-list デフォルトカラーで表示 */
.play-list .row{
  color: #004400;
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 5px 0;
}

.play-list span.count{
  color: #444;
}

.play-list div{
  margin: 0 auto 1px auto;
  padding: 0.2rem 0.2rem 0 0.2rem;
}

.play-list div.inn{
  font-size: 120%;
  padding: 0.2rem 0 0.2rem 0.2rem;
  background-color: #ffffee;
  border: 1px solid #004400;
}

.play-list div.ord{
  color: #ffffee;
  background-color: #004400;
}

.play-list div.status{
  color: #444;
}
.play-list div.status::before{
  content: "■";
}

.play-list div.play{
  font-weight: bold;
}

.play-list div.hit{
  color: red;
  font-weight: bold;
}

.play-list div.run{
  color: red;
}
.play-list div.run::before{
  content: "■";
}

.play-list div.info{
  color: #0088ff;
  font-weight: bold;
}

.play-list div.note{
  color: #0088ff;
}

/* stats-table デフォルトカラーで表示 */
.stats-table{
  display: block;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border-collapse: separate;
  border-spacing: 0;
  color: #222222;
  border-left: 2px solid rgb(0,131,208);
}


.stats-table a{
  color: #006600;
}

.stats-table a:hover{
  color: #22aa22;
}

.stats-table tr{
  background-color: #ffffee;
  height: 1.8rem;
}

.stats-table tr.r_odd{
  background-color: #eee;
}

.stats-table th,
.stats-table td{
  position: relative;
  text-align: center;
  line-height: 1rem;
  white-space: nowrap;
  padding: 0.2rem 0.3rem;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  z-index:1;
  background-clip: padding-box;
}

.stats-table thead th{
  border-top: 1px solid #ccc;
}

/* 守備成績の境目 */
.stats-table.table-wide th.rb,
.stats-table.table-wide td.rb{
  border-right: 1px solid  #888;
}

/* 固定列 */
.stats-table .w_ord{
  border-left: 1px solid #ccc;
  background-color: #ffffee;
  min-width: 40px;
  max-width: 40px;
}

.stats-table .w_name{
  background-color: #ffffee;
  min-width: 5rem;
}

.stats-table .n_ord{
  display: none;
}

.stats-table .n_name{
  background-color: #ffffee;
  min-width: 5rem;
}

@supports (position:sticky) {/*IEなどposition:stickyに非対応のブラウザでは列固定しない*/
  .stats-table .w_ord{
    position: -webkit-sticky;
    position: -ms-sticky;
    position: sticky;
    left: 0;
    z-index:7;
  }
  
  .stats-table .w_name{
    position: -webkit-sticky;
    position: -ms-sticky;
    position: sticky;
    left: 40px;
    z-index:5;
  }

  .stats-table .n_name{
    position: -webkit-sticky;
    position: -ms-sticky;
    position: sticky;
    left: 0px;
    z-index:5;
  }
}

/* 固定の偶数列の色 */
.stats-table tr.r_odd th.w_ord,
.stats-table tr.r_odd th.w_name{
  background-color: #eee;
}

/* 試合の成績の打順は色を変えない */
.stats-table.table-wide tr.r_odd th.w_ord{
  background-color: #ffffee;
}

.stats-table th.w_date,
.stats-table td.w_date{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-left: 1px solid #ccc;
}

.stats-table th.w_game,
.stats-table td.w_game{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.stats-table td.hit{
  color: red;
}

.stats-table td.zero{
  color: #ccc;
}

.stats-table th.asc{
  border-top: 4px solid  #0f4;
  border-bottom: 4px solid  #ccc;
}

.stats-table th.des{
  border-top: 4px solid  #ccc;
  border-bottom: 4px solid  #0f4;
}

.stats-table td.sorted{
  font-style: italic;
}

.stats-table th.s:hover,
.stats-table th.x:hover{
  cursor: pointer;
}

.stats-table th.infield{
  color: #0b2;
}

a.sheet_on{
  text-decoration: none;
  border: 2px solid rgb(0,93,161);
  border-radius: 1rem;
  padding: 0 1.8rem 0 0.5rem;
  font-size: 90%;
  background-image: url(../../score.gif);
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: auto 1rem;
}

a.sheet_on:hover{
  border: 2px solid rgb(0,170,255);
}

.sheet_off{
  display: none;
}