@import url("https://fonts.googleapis.com/css?family=Montserrat:600");
.video{
  clear: left;
	max-width: 800px;
  margin-left:auto;
  margin-right:auto;
	margin-bottom: 0px;
  padding-top: 100px;
	position: relative;
}
@media only screen and (max-width:800px){
  .video{
    clear: left;
    max-width: 600px;
    min-width:460px;
    margin-left:auto;
     margin-right:auto;
    margin-bottom: 0px;
    padding-top: 65px;
    position: relative;
  }
}
@media only screen and (max-width:460px){
  .video{
    clear: left;
    min-width:300px;
    max-width: 400px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 0px;
    padding-top: 55px;
    position: relative;
  }
}


.effect-fade {
    opacity : 0;
    transform : translate(0, 0px);
    transition : all 900ms;
    }
    
.effect-fade.effect-scroll {
    opacity : 1;
    transform : translate(0, 0);
  }
/*試作ボタン*/
/*.hidden {
    display: none;            
  }*/

  
/* グリッド
**************************/
.gridWrapper{
  padding-bottom:10px;
  clear:both;
  overflow:hidden;
  }

  .grid h3{
  
  margin: auto;
  font: 20px 20px "Montserrat", sans-serif;
  font-weight:bold;
  border-bottom:10px solid #ccc;
  text-align: center
  }
  
  .grid img{float:none;margin:10px auto 1px;max-width:100%;height:auto;}

  .grid p{padding:0px 0;}
  
  .grid p.img{
  float:left;
  margin:10px 0 0 0;
  }
  
  .readmore{clear:both;
  text-align:center;
 }
  
  .readmore a{
  padding:3px 5px;
  text-align: center;
  border-radius:10px;
  color:#fff;
  background:#999;
  }
  
  .readmore a:hover{background:#ccc;}

  /* グリッド全体 */
.gridWrapper{
display:table;
border-collapse:separate;
border-spacing:20px;
margin:auto;
height: 800px;
text-align: center
}

@media only screen and (max-width:800px){
  .gridWrapper{
    display:table;
    border-collapse:separate;
    border-spacing:0px;
    margin-left:auto;
    margin-right:auto;
    min-height:480px;
    max-height:800px;
    text-align: center
  }
  .readmore{clear:both;
    text-align:center;
   }
  }  
   @media only screen and (max-width:480px){
    .gridWrapper{
      display:table;
      border-collapse:separate;
      border-spacing:0px;
      margin-left:auto;
      margin-right:auto;
      min-height:300px;
      max-height:400px;
      text-align: center
    }
    .readmore{clear:both;
      text-align:center;
     }
    }
  .readmore a{
    padding:3px 5px;
    text-align: center;
    border-radius:10px;
    color:#fff;
    background:#999;
    }
/* グリッド共通 ベース:トップページ4カラム */
.grid{
width:400px;
display:table-cell;
margin: auto;
}

#sub.gridWrapper{width:800px;}
/* グリッド共通 ベース:トップページ4カラム */
.grid{
  margin-left:auto;
 margin-right:auto;
  min-width:400px;
  max-width:600px;
  display:table;
  
  }
@media only screen and (max-width:460px){
  .grid{
    margin-left:auto;
     margin-right:auto;
    min-width:300px;
    max-width:400px;
    display:table;
    
    }
    }

    @media only screen and (max-width:460px){
      .grid{
        width:200px;
        display:table;
        margin: auto;
        }
      }
  #sub.gridWrapper{width:800px;}

  .readmore{clear:both;
    text-align:center;
  font-size: 80%; }
     
  .readmore a{
    padding:5px 5px;
    text-align: center;
    border-radius:10px;
    color:#fff;
    background:#999;
    font-size: 80%;
    }
  /* サブコンテンツ + フッター グリッド(3カラム) */
  #sub .grid, #footer .grid{width:500px;}
  
  @media only screen and (max-width:640px){
    #footer .grid p{text-align:center;}
    .readmore{clear:both;
      text-align:center;
     }
       
  .readmore a{
    padding:3px 5px;
    text-align: center;
    border-radius:10px;
    color:#fff;
    background:#999;
    }
    .grid img{float:none;margin:10px auto 1px;max-width:100%;height:auto;}
    
    .grid p,#sub .grid li{text-align:left;}
    
    .alignleft,.alignright{float:none;display:block;margin:0 auto 5px;}
  }
    
    @media only screen and (max-width:480px){
    #mainBanner h2,#mainBanner h3{font-size:100%;}
    .readmore{
      margin: auto;
      clear:both;
      text-align:center;
     }
       
  .readmore a{
    margin: auto;
    padding:3px 5px;
    text-align: center;
    border-radius:10px;
    color:#fff;
    background:#999;
    }
    #sub .grid{
    float:none;
    width:98%;
    }
    
    #sub .grid h3{padding:0px 0px;}
  }

  .Category{
    display: table;
    width: 100%;
    margin-left:auto;
    margin-right:auto;
    max-width:600px;
    margin-top: 5px;
    border-collapse: separate;
    border-spacing: 10px 0px;
  }

  .CCategory{
    display: table-cell;
    margin: auto;
    max-width:100px;
    text-align: center;
  }
.CCategory img{border-radius:20px;}


p.img2 img{
 max-width:200px;
  border-radius: 5%;}
th{margin: 10%;}
  @media only screen and (max-width:640px){
    p.img2 img{
      max-width:140px;
      margin-left: auto;
      margin-right: auto;
       border-radius: 5%;}
    }