@charset "utf-8";


.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/*----------------------------------------------------
  .demo01
----------------------------------------------------*/
.demo01 table { width: 100%; }
.demo01 th  { padding: 10px; border: 0px solid #ddd; width: 30%; text-align: left; }
.demo01 td  { padding: 10px; border: 0px solid #ddd; }

@media only screen and (max-width:480px){
    .demo01 { margin: 0 -10px; }
    .demo01 th,
    .demo01 td{
    width: 100%;
    display: block;
    border-top: none;
    }
  .demo01 tr:first-child th { border-top: 1px solid #ddd; }
}

/*----------------------------------------------------
  .demo02
----------------------------------------------------*/
.demo02 table { width: 100%; }
.demo02 th  { padding: 10px; border: 1px solid #ddd; width: 30%; text-align: left; }
.demo02 td  { padding: 10px; border: 1px solid #ddd; }

@media only screen and (max-width:480px){
    .demo02 { margin: 0 -10px; }
    .demo02 th,
    .demo02 td{
    width: 100%;
    display: block;
    border-top: none;
    }
  .demo02 tr:first-child th { border-top: 1px solid #ddd; }
}

/*----------------------------------------------------
  .demo03
----------------------------------------------------*/
.demo03 table { width: 100%; }
.demo03 th  { padding: 10px; border: 1px solid #ddd; width: 60%; text-align: left; }
.demo03 td  { padding: 10px; border: 1px solid #ddd; }

@media only screen and (max-width:480px){
    .demo03 { margin: 0 -10px; }
    .demo03 th,
    .demo03 td{
    width: 100%;
    display: block;
    border-top: none;
    }
  .demo03 tr:first-child th { border-top: 1px solid #ddd; }
}