<@charset "UTF-8";>

.contents {
     width: 100%;
     max-width: 1200px;
     margin: auto;
 }

 .flexbox1 {
     display: flex;
 }
 .box1 {
     width: 45%;
     margin: auto;
 }
 .box2 {
     width: 45%;
     margin: auto .5rem;
 }

 .flexbox2{
     display:flex;
     flex-wrap:wrap;
     justify-content:center;
     
 
 }
 
 .box3{
     margin: 5;
     padding: 5px;
     width: 20%;
     align-items:center;
 }
 
 .box4{
     margin: 5;
     padding: 5px;
     width: 75%;
 }
  .box5{
     margin: 5;
     padding: 5px;
     width: 10%;
 }
   .box6{
     margin: 5;
     padding: 5px;
     width: 10%;
 }
 
 .p1{
     height:10px;
 }
 .p2{
     height:10px;
 }
.br-pc { display:block; }
.br-sp { display:none; }
  
 @media screen and (max-width: 767px) {
     .flexbox1 {
         display: block;
     }
     .flexbox1 .box1 {
         width: 100%;
         margin: 0 auto;
     }
     .flexbox1 .box2 {
         width: 100%;
         margin: 0 auto;
     }
     
      .text-center {
     text-align: center;
 }
     
      .flexbox2 .box3 {
         padding: 5px;
         width: 40%;
     }
     
      .flexbox2 .box4 {
         padding: 0px;
         width: 90%;
     }
     
      .flexbox2 .box5 {
         padding: 12px;
         width: 19%;
     }
      .flexbox2 .box6 {
         padding: 5px;
         width: 19%;
     }
      
     .flexbox2 .p2 {
         height:50px;
     }

     .br-pc {
         display:none; 
     }
     .br-sp {
         display:block; 
         }

 }