.howto-table {
    width: 100%;
    border-collapse: collapse;
    border: solid 2px #ccc;
    table-layout: fixed;
}

.howto-table tr {
    border-top: 1px solid #ccc;
}

.howto-table th {
    background: #898989;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.howto-table th, .howto-table td {
    font-size: 15px;
    padding: 4px 3px;
}

.howto-table td {
    width: 36%;
    border: 1px solid #ccc;
    text-align: center;
}

.howto-table tr:nth-child(odd) {
    background-color: #f5f5f5;
}

.howto-table td img {
    width: 100%;
    max-width: 200px;
}

.howto-flex-right > div:first-child {
    width: 300px;
}

@media screen and (min-width: 801px){
    .howto-column2-pc .howto-flex-right > div:first-child {
    width: 200px;
    }
}

.howto-flex-right h4 {
  font-weight: bold;
  font-size:16px;
  margin:1em 0 .5em;
  color:#333;
}

@media screen and (max-width: 1150px){
    .howto-column2-pc {
        flex-direction: column;
    }
    .howto-column2-pc > * {
        width:100%;
    }
}

@media screen and (max-width: 800px){

    .howto-table {
        table-layout: initial;
    }

    .howto-table th, .howto-table td {
        font-size: 11px;
        padding: 6px 3px;
        line-height: 1.4;
        vertical-align: middle;
    }

    .howto-flex-right {
        flex-direction: column-reverse;
    }

    .howto-flex-right img {
        width:100%;
    }

    .howto-flex-right > div:first-child {
        width: 100%;
    }

    .howto-flex-right > div:first-child + div {
        width:100%;
    }

    .howto-flex-right h4 {
      font-size:14px;
      margin:1em 0 1em;
    }

    .howto-column2-pc {
        flex-direction: column;
    }

    .howto-column2-pc > * {
        width:100%;
    }

}