.kikai2, .kikai3, .kikai4, .kikai{
    display: flex;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
      flex-direction: row;
      flex: 50%;
     margin-bottom: 2rem;
    }
    .kikai2, .kikai3, .kikai4, .kikai:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
      }
      .container {
        padding: 2px 16px;
        flex: 50%;
      }
      .cards {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .onecard{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        padding: 2rem 1rem;
        border: solid 1px #647798;
        margin-bottom: 1rem;
    }
    main {
        padding-top: 2em;
        max-width: 100%;
    }
   #darkblue{
        background-color: #123777;
    }
    #lightblue{
        background-color: #AEBBD1;
    }
    #grey{
        background-color: #D1D1D1;
    }
    .demo2 {
        width: 100%;
    }
    table{
        margin-top: 2rem;
    }
    table:first-of-type{
        margin-top: 2rem;
    }
  
    .demo2 td{
        font-size: 2.5vw;
    }
    @media screen and (min-width: 768px) {
        .demo2 {
            width: 80%;
        }
    
    .kikaititle{
        font-size: 2vw;
    }
    .onecard{
        flex: 45%;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .cards{
        flex-direction: row;
    }
    .onecard img{
        width: 100%;
    }
    .cards{
            width: 100%;
    }
    .kikai2, .kikai3, .kikai4, .kikai{
        flex: 50%;

        width: 90%;
    }
    .marginright{
        margin-right: 2rem;
    }
 .borderblock{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
 }
 .demo2 td {
    width: 22vw;
}
}