body,
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 30px;
  background-color: #fff;
  border-radius: 10px;

  margin: 0 auto;}

/*★カテゴリー１の色（※2024年不使用）　#e5005a*/
/*★カテゴリー２の色（※国語）　#e83956*/
/*★カテゴリー３の色（※漢字）　#db006c*/
/*★カテゴリー４の色（※作文）　#a96232*/
/*★カテゴリー５の色（※算数）　#0095db*/
/*★カテゴリー６の色（※自由帳・方眼）　#f6d040*/
/*★カテゴリー７の色（※科目入り方眼）　#EA5541*/
/*★カテゴリー８の色（※自主学習）　#ee7b60*/
/*★カテゴリー９の色（※合理的配慮ノート）　#b6d56a*/

/*★タブの数はデフォルトで3分割　width: calc(100%/3);を替えれば増やせる*/
/*★タブのタイトルが長すぎる場合はスマホでは溢れるのでフォント*/

/*★カテゴリー１のタブスタイル★----------------------------------------*/
.tab_item1 {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #e5005a;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: tab1-1 0.2s ease;
}
.tab_item1:hover {
  opacity: 0.75;
}

.tab_item.tab_col1 {

}

/*ラジオボタンを全て消す*/
input[name="tab_item1"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab1-1:checked ~ #tab1-1_content,
#tab1-2:checked ~ #tab1-2_content,
#tab1-3:checked ~ #tab1-3_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item1 {
  background-color: #e5005a;
  color: #fff;
}

/*★カテゴリー２のタブスタイル★----------------------------------------*/
.tab_item2 {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #e83956;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: tab1-1 0.2s ease;
}
.tab_item2:hover {
  opacity: 0.75;
}

.tab_item.tab_col1 {

}

/*ラジオボタンを全て消す*/
input[name="tab_item2"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab2-1:checked ~ #tab2-1_content,
#tab2-2:checked ~ #tab2-2_content,
#tab2-3:checked ~ #tab2-3_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item2 {
  background-color: #e83956;
  color: #fff;
}

/*★カテゴリー３のタブスタイル★----------------------------------------*/
.tab_item3 {
  width: calc(100%/4);
  height: 50px;
  border-bottom: 3px solid #db006c;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: tab1-1 0.2s ease;
}
.tab_item3:hover {
  opacity: 0.75;
}

.tab_item.tab_col1 {

}

/*ラジオボタンを全て消す*/
input[name="tab_item3"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab3-1:checked ~ #tab3-1_content,
#tab3-2:checked ~ #tab3-2_content,
#tab3-3:checked ~ #tab3-3_content,
#tab3-4:checked ~ #tab3-4_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item3 {
  background-color: #db006c;
  color: #fff;
}

/*★カテゴリー４のタブスタイル★----------------------------------------*/
.tab_item4 {
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #a96232;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: tab1-1 0.2s ease;
}
.tab_item4:hover {
  opacity: 0.75;
}

.tab_item.tab_col1 {

}

/*ラジオボタンを全て消す*/
input[name="tab_item4"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab4-1:checked ~ #tab4-1_content,
#tab4-2:checked ~ #tab4-2_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item4 {
  background-color: #a96232;
  color: #fff;
}

/*★カテゴリー５のタブスタイル★----------------------------------------*/
.tab_item5 {
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #0095db;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: tab1-1 0.2s ease;
}
.tab_item5:hover {
  opacity: 0.75;
}

.tab_item.tab_col1 {

}

/*ラジオボタンを全て消す*/
input[name="tab_item5"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab5-1:checked ~ #tab5-1_content,
#tab5-2:checked ~ #tab5-2_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item5 {
  background-color: #0095db;
  color: #fff;
}

/*★カテゴリー６のタブスタイル★----------------------------------------*/
.tab_item6 {
  width: calc(100%/2)!important;
  height: 50px;
  border-bottom: 3px solid #F3C500;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: tab1-1 0.2s ease;
}
.tab_item6:hover {
  opacity: 0.75;
}

.tab_item.tab_col1 {

}

/*ラジオボタンを全て消す*/
input[name="tab_item6"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab6-1:checked ~ #tab6-1_content,
#tab6-2:checked ~ #tab6-2_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item6 {
  background-color: #F3C500;
  color: #fff;
}

/*★カテゴリー7のタブスタイル★----------------------------------------*/
.tab_item7 {
  width: calc(100%/4)!important;
  height: 50px;
  border-bottom: 3px solid #ee781f;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: tab1-1 0.2s ease;
}
.tab_item7:hover {
  opacity: 0.75;
}

.tab_item.tab_col1 {

}

/*ラジオボタンを全て消す*/
input[name="tab_item7"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab7-1:checked ~ #tab7-1_content,
#tab7-2:checked ~ #tab7-2_content,
#tab7-3:checked ~ #tab7-3_content,
#tab7-4:checked ~ #tab7-4_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item7 {
  background-color: #ee781f;
  color: #fff;
}

/*★カテゴリー8のタブスタイル★----------------------------------------*/
.tab_item8 {
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #ee7b60;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: tab1-1 0.2s ease;
}
.tab_item8:hover {
  opacity: 0.75;
}

.tab_item.tab_col1 {

}

/*ラジオボタンを全て消す*/
input[name="tab_item8"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab8-1:checked ~ #tab8-1_content,
#tab8-2:checked ~ #tab8-2_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item8 {
  background-color:#ee7b60;
  color: #fff;
}

/*★カテゴリー9のタブスタイル★----------------------------------------*/
.tab_item9 {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #8FC31F;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: tab1-1 0.2s ease;
}
.tab_item9:hover {
  opacity: 0.75;
}

.tab_item.tab_col1 {

}

/*ラジオボタンを全て消す*/
input[name="tab_item9"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab9-1:checked ~ #tab9-1_content,
#tab9-2:checked ~ #tab9-2_content,
#tab9-3:checked ~ #tab9-3_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item9 {
  background-color: #8FC31F;
  color: #fff;
}

#contentInner{padding-bottom: 0;}
#contentInner,
#wide_main_contents{width: 100%;}


@media (max-width: 780px) {

  /*------------------------------------------- */

  .tab_item1 {
  font-size: 15px;
  }

  .tab_item2 {
  font-size: 15px;
  }

  .tab_item3 {
  font-size: 15px;
  }

  .tab_item4 {
  font-size: 15px;
  }

  .tab_item5 {
  font-size: 15px;
  }

  .tab_item6 {
  font-size: 15px;
  }

  .tab_item7 {
  font-size: 15px;
  }

  .tab_item8 {
  font-size: 15px;
  }

  .tab_item9 {
    font-size: 15px;
    }

}