/**************************
 タブ切り替え
***************************/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:5px 0;
}

.tab-wrap:after {
  content: '';
  width: 100%;
  height: 1px;
  background-color:#999fad;
  display: block;
  order: -1;
}



.tab-label {
  color: White;
  background-color:lightgray;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  border-radius: 2px;
  position: relative;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
 background-color:#999fad;/*背景色*/
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 0px;
  opacity: 1;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}


/**************************
 タブ切り替え
***************************/
.tab-wrap2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:0px 0;
}

.tab-wrap2:after {
  content: '';
  width: 100%;
  background-color:#999fad;
  display: block;
  order: -1;
}



.tab-label2 {
  color: #022EB0;
  background-color:#FAFAFA;
  text-align: center;
  font-size: 11px;
  padding: .2em 0.5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
}

.tab-label2:not(:last-of-type) {
  margin-right: 5px;
}

.tab-content2 {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch2:checked+.tab-label2 {
 color: #111111;
text-decoration:underline; 
 background-color:#FFFFFF;/*背景色*/
}

.tab-switch2:checked+.tab-label2+.tab-content2 {
  height: auto;
  overflow: auto;
  padding: 0px;
  opacity: 1;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-switch2 {
  display: none;
}





.tab-top {
  display: flex;
  flex-wrap: wrap;
  margin:1px 0;
}

.tab-top:after {
  content: '';
  width: 100%;
  display: block;
  order: -1;
}



.tab-toplabel {
  color: #1D3994;
  background-color:#E6ECFE;
  border-top:1px solid #9EB4DB;
  border-left:1px solid #9EBDDB;
  border-right:1px solid #9EB4DB;
  border-bottom:1px solid #9EB4DB;
  text-align: center;
  padding: .4em 0em;
  order: -1;
  position: relative;
  z-index: 0;
  cursor: pointer;
  flex: 1;
  border-radius: 2px;
  position: relative;
}

.tab-toplabel:not(:last-of-type) {
  margin-right: 0px;
}

.tab-topcontent {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-topswitch:checked+.tab-toplabel {
 color: #111111;
 font-weight: bold; 
 background-color:#FFFFFF;/*背景色*/
  border-bottom:1px solid #ffffff;
}

.tab-topswitch:checked+.tab-toplabel+.tab-topcontent {
  height: auto;
  overflow: auto;
  padding: 0px;
  opacity: 1;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-topswitch {
  display: none;
}



.tab-top2 {
  display: flex;
  flex-wrap: wrap;
  margin:1px 0;
}

.tab-top2:after {
  content: '';
  width: 100%;
  display: block;
  order: -1;
}



.tab-top2label {
  color: #1D3994;
  background-color:#E0DCDC;
  border-top:2px solid #e0e0e0;
  border-left:2px solid #e0e0e0;
  border-right:2px solid #e0e0e0;

  text-align: center;
  padding: .4em 0em;
  order: -1;
  position: relative;
  z-index: 0;
  cursor: pointer;
  flex: 1;
  border-radius: 2px;
  position: relative;
}

.tab-top2label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-top2content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-top2switch:checked+.tab-top2label {
 color: #111111;
 font-weight: bold; 
 background-color:#FFFFFF;/*背景色*/
  border-bottom:1px solid #ffffff;
}

.tab-top2switch:checked+.tab-top2label+.tab-top2content {
  height: auto;
  overflow: auto;
  padding: 0px;
  opacity: 1;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-top2switch {
  display: none;
}



/**************************
試合小窓用
***************************/

.tab-score {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:0px 0;
}
.tab-score:after {
  content: '';
  width: 100%;
  background-color:#999fad;
  display: block;
  order: -1;
}
.tab-scorelabel {
  color: #022EB0;
  background-color:#FFF;
  text-align: center;
  font-size: 0px;
}

.tab-scorelabel:not(:last-of-type) {
  margin-right: 5px;
}
.tab-scorecontent {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-scoreswitch:checked+.tab-scorelabel {
 color: #111111;
 font-size: 12px;
 font-weight: bold;
 background-color:#FFFFFF;/*背景色*/
}
.tab-scoreswitch:checked+.tab-scorelabel+.tab-scorecontent {
  height: auto;
  overflow: auto;
  padding: 0px;
  opacity: 1;
  transition: .5s opacity;
}
/* ラジオボタン非表示 */
.tab-scoreswitch {
  display: none;
}


/**************************
 タブ切り替え【空白】
***************************/
.tab-wrap3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:0px 0;
}

.tab-wrap3:after {
  content: '';
  display: block;
  order: -1;
}

.tab-label3 {
  text-align: center;
  font-size: 0px;
  padding: 0px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  position: relative;
}

.tab-label3:not(:last-of-type) {
  margin-right: 0px;
}

.tab-content3 {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch3:checked+.tab-label3 {
text-decoration:underline; 
}

.tab-switch3:checked+.tab-label3+.tab-content3 {
  height: auto;
  overflow: auto;
  padding: 0px;
  opacity: 1;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-switch3 {
  display: none;
}

/**************************
 タブ切り替え(縦棒)
***************************/
.tab-wrap4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  margin:0px 0;

}

.tab-wrap4:after {
  content: '';
  width: 100%;
  background-color:#FFFFFF;
  display: block;
  order: -1;
}



.tab-label4 {
  display: inline-flex;
  align-items: center;     /* アイコンと文字の縦位置揃え */
  padding: 7px 16px;      /* ボタンの大きさ */
  border: 1px solid transparent; /* 境界線の場所を確保 */
  border-radius: 6px;      /* 角丸 */
  background-color: #f5f5f5; /* 背景：薄いグレー */
  color: #666;             /* 文字：グレー */
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;           /* クリック時の青枠を消す */
  margin: 6px;
  order: -1;

}

.tab-label4:not(:last-of-type) {
　border-right:none;
  margin-right: 1px;
}

.tab-content4 {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;  
}

.tab-label4:hover{
  background-color: #e3f2fd; /* 薄い青背景 */
  color: #1565c0;            /* 濃い青文字 */
}

.tab-label4.ticon {
  margin-right: 8px;       /* 文字との間隔 */
  font-size: 1.2em;        /* アイコンを少し大きく */
}

/* アクティブなタブ */
.tab-switch4:checked+.tab-label4 {
  background-color: #fff;    /* 背景：白 */
  color: #0d47a1;            /* 文字：濃い青 */
  border: 1px solid #bbdefb; /* 枠線：薄い青 */
  border-bottom: 2px solid #1976d2; /* 下線だけ太くして強調 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 軽く影をつける */
}

.tab-switch4:checked+.tab-label4+.tab-content4 {
  height: auto;
  overflow: auto;
  padding: 0px;
  opacity: 1;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-switch4 {
  display: none;
}