.top_mid_box{
 	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: space-between;
	margin:0 0 30px 0; 
	width:auto;
	height:auto;
}

.mid_banner{ margin:0 8px 15px 8px; text-align:center;}

.to_kichijitu_cal2{
  background-image: url(https://img14.shop-pro.jp/PA01080/151/etc/to_calendar_smtp.jpg?cmsp_timestamp=20210709111026);
  background-repeat:no-repeat;
  background-size: cover;
  margin:0 auto;
  font-size:200%;
  font-weight:bold;
  width:auto;
  height:auto;
  color:#fff;
  padding:80px 0;
  text-align:center;
  text-shadow: 1px 1px 2px #000;
  line-height:150%;
  margin-bottom:30px;
} 

.to_kichijitu_cal2 a:link,.to_kichijitu_cal2 a:visited{ color:#fff;}
.to_kichijitu_cal2 a:hover{ color:#fff; text-decoration:underline;}

.scroll_content { /* リスト全体のスタイル */
  display: flex;
  max-width: 800px;
  margin: auto;
  overflow-x: auto;
}

/*==================================================
ここから新作スクロールコンテンツのcss
===================================*/
.scroll_content li { /* 各リストのスタイル */
  width: 90%;
  padding: 4px;
  margin: 3px;
  flex-shrink: 0;
  list-style: none;
  background: #f0f0f0;
}
 
.scroll_content img { /* 画像のスタイル */
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}
 
.scroll_content::-webkit-scrollbar {
  height: 6px; /* スクロールバーの高さ */
}
 
.scroll_content::-webkit-scrollbar-thumb {
  background: #aaa; /* ツマミの色 */
  border-radius: 12px; /* ツマミ両端の丸み */
}
 
.scroll_content::-webkit-scrollbar-track {
  background: #ddd; /* トラックの色 */
  border-radius: 6px; /* トラック両端の丸み */
}
 
 
@media screen and (min-width: 450px) {
 
  .scroll_content li {
    width: 45%;
  }
 
}


/*==================================================
ここからランキングタブ切り替えスタイルのcss
===================================*/

.tabs {
  margin-top: 60px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 2px solid #88a9c0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 1.0;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

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

/*タブ切り替え全体のスタイル*/
.tabs1 {
  margin-top: 60px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab1_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 2px solid #88a9c0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab1_item:hover {
  opacity: 1.0;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all1:checked ~ #all_content1,
#programming1:checked ~ #programming_content1,
#design1:checked ~ #design_content1 {
  display: block;
}

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

/*タブ切り替え全体のスタイル*/
.tabs2 {
  margin-top: 60px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab2_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 2px solid #88a9c0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab2_item:hover {
  opacity: 1.0;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all2:checked ~ #all_content2,
#programming2:checked ~ #programming_content2,
#design2:checked ~ #design_content2 {
  display: block;
}

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

/*タブ切り替え全体のスタイル*/
.tabs3 {
  margin-top: 60px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab3_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 2px solid #88a9c0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab3_item:hover {
  opacity: 1.0;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all3:checked ~ #all_content3,
#programming3:checked ~ #programming_content3,
#design3:checked ~ #design_content3 {
  display: block;
}

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

/*タブ切り替え全体のスタイル*/
.tabs4 {
  margin-top: 60px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab4_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 2px solid #88a9c0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab4_item:hover {
  opacity: 1.0;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all4:checked ~ #all_content4,
#programming4:checked ~ #programming_content4,
#design4:checked ~ #design_content4 {
  display: block;
}

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

/*タブ切り替え全体のスタイル*/
.tabs5 {
  margin-top: 60px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab5_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 2px solid #88a9c0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab5_item:hover {
  opacity: 1.0;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all5:checked ~ #all_content5,
#programming5:checked ~ #programming_content5,
#design5:checked ~ #design_content5 {
  display: block;
}

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

/*タブ切り替え全体のスタイル*/
.tabs6 {
  margin-top: 60px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab6_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 2px solid #88a9c0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab6_item:hover {
  opacity: 1.0;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all6:checked ~ #all_content6,
#programming6:checked ~ #programming_content6,
#design6:checked ~ #design_content6 {
  display: block;
}

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

/*タブ切り替え全体のスタイル*/
.tabs7 {
  margin-top: 60px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab7_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 2px solid #88a9c0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab7_item:hover {
  opacity: 1.0;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all7:checked ~ #all_content7,
#programming7:checked ~ #programming_content7,
#design7:checked ~ #design_content7 {
  display: block;
}

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

/*タブ切り替え全体のスタイル*/
.tabs8 {
  margin-top: 60px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab8_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 2px solid #88a9c0;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 13px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab8_item:hover {
  opacity: 1.0;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#all8:checked ~ #all_content8,
#programming8:checked ~ #programming_content8,
#design8:checked ~ #design_content8 {
  display: block;
}

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