.margin-center {
margin-left:auto;
margin-right:auto
}

#video-2 {
    /*天地中央配置*/
    position: relative;
    z-index: -1;
    top: 50%;
    left: 50%;
   
    /*縦横幅指定*/
   
}



#video-1 {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
   
    /*縦横幅指定*/
   
}

.display-flow{display:flow;}

.display-inline-block{display:inline-block;}
.display-inline-table{display:inline-table;}
.display-inline-flex3{display:inline-flex;}
.display-inline-grid{display:inline-grid;}

.display-block{display:block;}
.display-inline{display:inline;}
.display-ru-in{display:ru-in;}
.no-wrap {display: inline-block; /* インラインブロック化 */}

.img_wrap{
  border: 1px solid #ddd;
  width: 355px;
  height: 302px;
  margin: 20px auto 0;
  transition-duration: 0.5s;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
}
.img_wrap:hover{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}
.img_wrap1{
  border: 1px solid #ddd;
  width: 355px;
  height: 205px;
  margin: 20px auto 0;
  transition-duration: 0.5s;
}
.img_wrap1:hover{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}




.img_wrap2{
  border: 1px solid #ddd;
  width: 571px;
  height: 264px;
  margin: 20px auto 0;
  transition-duration: 0.5s;
}

.img_wrap2:hover{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}




.nbr{
white-space: nowrap;
}

.part{
  display:inline-block;
  clear:both;
  width:100%;
}


 .nav2 {
     width: 750px;
     height: 150px;
  display:inline-block;
 }
 .nav2 li {
     position: relative;
     width: 120px;
     height: 100px;
     text-align: center;
     border-right: 1px solid #fff;
  clear:both;
 }

 .nav2 li:last-child {
     border-right: none;
 }
 .nav2 li a {
     display: inline-block;
     width: 100%;
     height: 100px;
     color: #fff;
     font-size: 14px;
     line-height: 2.8;
     transition: 0.5s;
  background: #7FFFD4;
  z-index:100;
 }
 .nav2 li a:hover {
     color:#fff;
  background: #7FFFD4;
  z-index:100;
 }
 .nav2 > li li:hover > a {
   background: #7FFFD4;
   z-index:100;
 }
 .nav2 li ul {
     left:0;
     position:absolute;
 }
 .nav2 li ul li {
     overflow: hidden;
     height:0;
     transition:0.2s;
 }
 .nav2 li ul li a {
     border-top:1px solid #fff;
 }
 .nav2 li:hover > ul > li {
     overflow: visible;
     width:120px;
     height:100px;
 }
     .nav2 li ul li ul {/*孫*/
         top:0;
         left:109px;
     }
     .nav2 li ul li ul:before {/*孫*/
         position:absolute;
         content:"";
         top:15px;
         left:-10px;
         border:5px solid transparent;
         border-left:5px solid #fff;
     }
     .nav2 li ul li ul li:hover > a {/*孫*/
    background: #7FFFD4;
     }
     .nav2 li ul li ul.left {/*孫*/
         top: 0;
         left: -109px;
         width: 120px;
     }
     .nav2 li ul li ul.left:before {/*孫*/
         position: absolute;
         content: "";
         top: 15px;
         left: 110px;
         border: 5px solid transparent;
         border-right: 5px solid #fff;
     }
     .nav2 li ul li ul.left li:hover > a {/*孫*/
    background: #7FFFD4;
     }

.part{
  display:inline-block;
  clear:both;
  width:100%;
}

.nav11 li ul {
    left: 0;
    position: absolute;
    z-index: 1000;
}