<style>
.contents {
     width: 100%;
     max-width: 1200px;
     margin-left: 1em;
 }
 /*
 .contents img {
     width: 100%;
 }*/
 
 .text-center {
     text-align: center;
 }
 .flexbox {
     display: flex;
 }
 .box1 {
     width: 30%;
     margin: auto;
 }
 .box2 {
     width: 70%;
     margin: auto .5rem;
     padding: 1rem;
 }
 .flexbox2 {
     display: flex;
     align-items: stretch;
 }
 .box3 {
     width: 100%;
     margin: 0 auto;
     align-self: flex-start;
 }
 .box4 {
     width: 100%;
     margin: 0  auto;
     align-self: flex-start;
 }
 @media screen and (max-width: 767px) {
     .flexbox {
         display: block;
     }
     .flexbox .box1 {
         width: 100%;
         margin: 0 auto;
     }
     .flexbox .box2 {
         vartical-align: top;
         margin-top: 1rem;
         width: 100%;
         margin: 0 auto;
     }
     .flexbox2 {
         display: block;
     }
 }

 

@media screen and (max-width: 480px) {
  .sp_br{
    display: none;
  }
}
</style>