@charset "utf-8";

@media (min-width: 768px){
#content{
	width: 850px;
	margin: 0 auto ;
		display: block;
	background-color:#dcdcdc;
    font-family:"Hiragino Kaku Gothic Pro",sans-serif;
    border: solid 2px #000080;  
}
section{
        margin: 0;
        padding: 0;
}
    
input[type="button"] {
    height: 50px;
    font-size: 20px;
    padding: 0 25px;
    border-radius: 8px;
    background-color: #0066cc;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="button"]:hover {
    background-color: #004c99;
}
    
    
    
    
    
.box1{
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height:auto;
    background-color:#ccffcc;
    line-height:1.5;
    border-top-right-radius:15px;
    border-top-left-radius:15px;
}
.box1 h2{
	 margin:0;
	 color:#333333;
}
.box1 h1{
	margin: 0;
	font-weight:900;
	color:#663300;   
} 
.box1 p{
    padding: 0 20px;
	 margin: 0;
	font-size:18px;
	color:#0033cc; 
  } 
.box2{
    margin : 0;
    padding: 30px 0 30px 30px;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    width: calc(100%-30px);
    background-color:#e0ffff;
}

input{
       display:block;
       width: 100%;
       max-width: 400px;
       height:30px;
      
}
select{
       display:block;
       width:200px;
       height:30px;
  
}       
textarea{
        display:block;
        width: 100%;
        max-width:560px;
       height:120px;
    }  
.kakunin{
        text-align: center;
        margin: 15px 30px;
}

footer{
    width: 100%;
  background: #111;
  color: #ccc;
  text-align: center;
  padding: 0;
    margin: 0;
  }
footer p{
    padding: 20px 0;
}
}
/*************************/
@media (max-width:600px){
#content{
	width: 100%;
	margin: 0 auto ;
		display: block;
	background-color:#dcdcdc;
    font-family:"Hiragino Kaku Gothic Pro",sans-serif;
    border: solid 2px #000080;  
}
 section{
        margin: 0;
        padding: 0;
} 
    
 input[type="button"] {
    height: 50px;
    font-size: 20px;
    padding: 0 25px;
    border-radius: 8px;
    background-color: #0066cc;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="button"]:hover {
    background-color: #004c99;
}
    
    
    
    
.box1{
    padding: 5px;
    width: calc(100%-10px);
    height:auto;
} 
.box1 h2{
     margin:0;
    color:#333333;
    font-size:22px;
}
.box1 h1{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#663300;    
} 
.box1 h3{
    margin:0;
    font-size:18px;
    color:#0033cc;    
} 
.box2{
    padding:5px;
    width: calc(100%-10px);
    height:auto;
    background-color:#e0ffff;
}
input{
      
      width: 95%;
       height:25px;
     
}
select{
       display:block;
       width:65%;
       height:25px;
}       
textarea{
       margin: 0;
       width: 95%;
       height:150px;
    }
 .kakunin{
        text-align: center;
        margin: 10px 30px;
        font-size: 20px;
}   
footer{
    width: 100%;
  background: #111;
  color: #ccc;
  text-align: center;
  margin: 0;
  padding: 0;
  
  }
footer p{
    margin: 0;
    padding: 15px 0;
}
}