@charset "utf-8";
/* CSS Document */


.mp3 { width:100%; margin:30px auto; height:100%  }	

.youtube { width:90%; margin:0 auto; padding:0; text-align:center;}
.tab1,.tab2,.tab3,.tab4,.tab5,.tab6,.tab7{overflow:hidden; cursor:pointer;}
.tab1 li,.tab2 li,.tab3 li,.tab4 li,.tab5 li,.tab6 li,.tab7 li{ 
padding:5px 25px; float:left; margin-right:1px; overflow:hidden; max-width:100px; height:30px; width:50%}
.tab1 li.select,.tab2 li.select,.tab3 li.select,.tab4 li.select,.tab5 li.select,.tab6 li.select,.tab7 li.select
{background:#FCC; color:#333 }
.content1 li,.content2 li,.content3 li,.content4 li,.content5 li,.content6 li,.content7 li
{background:#000; padding:0; margin:0 0 30px 0; width:100%}
.hide1 {display:none;}
.clear { clear:both}

/* tabnav */
.tabnav{ margin:0 auto; padding: 0; list-style:none; overflow:hidden; width:50%; float:right;box-sizing:border-box }
.tabnav li{ padding:0 !important; margin:0 !important; float:left; overflow:hidden;width:50%; box-sizing:border-box; border-top:#FFF 2px solid; border-right:#FFF 2px solid; }
.tabnav li a{ display:block; width:100%; overflow: hidden; padding:0 !important; margin:0 !important;  }
.tabnav li a img{ width:100%; height:35vh; object-fit: cover;/* トリミングの指定 */ padding:0 !important; margin:0 !important; }
.tabnav li a img:hover,
.tabnav li a img.active{ filter: brightness(150%); }

.tabcontent{ padding:0; margin:0; width:50%; float:left;box-sizing:border-box; border:2px solid #FFF}
.tabcontent div{ width:100%; overflow:hidden; text-align:center; }
.tabcontent div img{ width:100%; height: -webkit-calc(70vh + 6px) ; object-fit: cover;  }
.tabcontent div iframe  { width:100%; height: -webkit-calc(70vh + 6px) ; margin:0 auto;  }	
/* tabnav */

@media print, screen and (max-width: 1000px) {
.tabnav{ width:100%; float:none;}
.tabnav li{border:none; width:25%}
.tabnav li a img{ height:20vh; }
.tabcontent{ width:100%; float:none; border:none  }

}
@media print, screen and (max-width: 768px) {
.youtube { width:100%;}
.tabnav li a img{ height:15vh; }
.tabcontent div img{ height:40vh; }
.tabcontent div iframe{ height:40vh; }
}