@charset "utf-8";
/* CSS Document */
.imgonmouse {
  margin: 10px auto; width: 98vw; max-width:1000px; overflow: hidden;}
.imgonmouse img { margin:10px auto;}
.imgonmouse ul {
  padding: 0px;
  margin-top: 0px; }
.imgonmouse ul li {
  list-style-type: none;
  margin: 0 1% 0 0; 
  padding: 0px; display:inline-block; width: 22%; box-sizing:border-box}
.imgonmouse ul li img {
  cursor:pointer; min-width:180px;
  padding: 2px;  border: 1px solid #CCC;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}

.navi { display:table; list-style:none; margin:30px auto; min-width:300px; width:50%}
.navi dt { display:table-cell; width:30%; vertical-align:middle}
.navi dd { display:table-cell; width:40%; vertical-align:middle}
.navi img{ width:50%}

.navi img:hover{
-webkit-animation-name: pulse;/* 実行する名前 */
-webkit-animation-duration: 1s;/* 秒かけて実行 */
-webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}
.vr { width:30%; float:left; margin:20px 1%; }


@media print, screen and (max-width: 768px) {
.imgonmouse {
  margin-top: 10px;
  overflow: hidden;
  width:98vw; 
}
.imgonmouse ul li img {
  width: 20vw; cursor:pointer;
  border: 1px solid #CCC;
  padding: 2px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}
.navi img{ width:80%}

.imgonmouse ul li {
 width: 46%; box-sizing:border-box}
}

.mp3 { width:100%; margin:30px auto;  }	
.youtube { width:80%; margin:20px auto; text-align:center; }
.youtube ul { list-style:none; padding:0; text-align:center; margin:0 auto;} 
.youtube ul li iframe  { width:100%; margin:30px auto;  }	
.pic3{ list-style:none; margin:0 auto; padding:0; width:96%; height:auto}
.pic3 li{ float:left;}
.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; background-color:#333; color:#FFF; 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}



.miyage { width:32vw; float:left; min-height:400px; padding:0; margin:0;}
.miyageinnner { background-color:#FFF; border-radius:50%; margin:0; background-repeat:no-repeat; background-position:center top;  background-size:60%}
.miyageyoutube { padding:200px 0 0 0;}