:root{
    --background_white:#FAFAFA;
    --background_body:#000;
    --color:#000;
    --h:#242424;
    --pcolor:#fff;
    --orng: #eb2222;
    --cnt:left;
    --background_header:#054e12;
    --blue:#4611e4;
}
@font-face {
  font-family: header;
  src: url(../../fonts/ManufacturingConsent-Regular.ttf);
}

body{
    width:100%;
    -webkit-font-smoothing: antialiased;
    font-family: "Merriweather Sans",sans-serif;
    min-height: 100vh;
    background-color:var(--background_white) ;
    color: var(--color);
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
  
    
}
* {
  box-sizing: border-box;
}
#wrapper{
  background-color:var(--background_white) ;

     min-height: 100vh;
    margin:0 auto 0 auto;
    text-align: left;
    
}
header{
 max-width: 1280px;
 margin:auto;
 padding: 1rem 3rem 1rem 3rem;
 
}
.or{
  display: block;
  
  text-align: center;
  padding:0.5rem;
}
.or a:link,a:visited{
  color:#f00;
  font-weight: bold;
  font-size: clamp(1rem, 4vw, 1.2rem);
  text-decoration: none;
}
.banner{
  background: #000;
  border: 1px #000 solid;
    max-width: 1280px;
   max-height: 400px;
 text-align: center;
 margin:0 auto 0.8rem auto;
 padding:0;
}
#ma{
  width:100%;
    max-width: 1280px;
   text-align: left;
 margin:auto;
 display:flex;
 
}

.content{
 width: clamp(25rem, 70%, 850px);
}
.content a, a:visited{
  white-space: nowrap;
  color: var(--orng);
  font-weight: bold;
}
.content a:hover{
  color: var(--color);
  
}
.mainC{
  float:left;
 margin-right:2rem;
 padding-left:3rem;
}
.imgblock{
  display: block; 
  text-align:center;
}
.asside{
  padding:0.8rem 3rem 0 0;
  width: 32%;
 text-align: center;
}
.asside p{
    padding:0;
    margin:0 0 2rem 0;
    max-width:100%;
    text-align: justify;
    line-height: 140%;
    font-size: clamp(0.8rem, 3vw, 1rem);
    font-weight: bold;
  }
img{
    max-width: 100%;
    height: auto;
  }
  h1,h2{
    text-align: left;
    margin: 0 auto 0 auto;
    font-family: "Merriweather Sans",sans-serif;
     font-size: clamp(14px, 5vw, 50px);
     color: var(--h);
  }
  p {
    max-width: 60em;
    padding: 0 2em;
    font-size: clamp(1rem, 4vw, 1.2rem);
    line-height: 160%;
    text-align:justify;
  }
  h1,h2,p,footer{
    text-align: var(--cnt);
    padding-left:3rem;
  }
  .bluehead{
    color: var(--blue);
    font-size:clamp(1.2rem, 4vw, 1.4rem);
  }
  form {
  width: 99%;
    padding: 1rem 1rem 0 1rem ;
    margin:0;
    font-size: clamp(0.9rem, 4vw, 1em);
   
    text-align:justify;
  
    margin:auto;
    color: #e9e7e7;
  }
 
fieldset,legend{
   background-color: var(--orng);
   border:none;
}
 button{
  background-color: var(--background_white);
  border: none;
  border-radius: 10px;
  color:#000;
  padding: 0.5rem;
 } 
  .lb{
    display: inline-block;
    padding:0.5rem;
  }
  #share{
    width: 100px;
    margin:auto;
    display:block;
  }
  #demos{
    padding: 2rem;
    max-width: 1280px;
    margin:auto;
    background-color: #494545;
    color:#fff;
  }
  .item{
    max-height: 280px;
    position:relative;
  }
  .zoom{
    position:absolute;
    top:0;right:3px;
    background: url(../../icon/zoom.png);
    width:50px;
    height:50px;
  }
  footer{
   margin:4rem auto 0 auto;
    bottom:0;
    
    width:100%;
     
    background-color: #e9e7e7;
    color: #054e12;
    
  }
  footer span{
    display:block;
    text-align: center;

  }
.fb-share-button{
  text-align: center;
}
  @media screen and (max-width: 812px) {
#ma{
  flex-wrap: wrap;
}
.content,.asside{width: 100%;text-align: center;}
form{
  width:98%;
}
.asside p {
  padding: 1rem;
}
  }