html, body, main{
 width:100%;
 height:100%;
 margin:0 auto;
}

body#page01{

background: url(../img/open_book_hires.jpg);
background-size:cover;
color:#20232a;
font-family: "Sawarabi Gothic";
}

main {
/* display: flex; 子要素をflexboxで揃える */
/* margin-top: 1%; */
flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
/* justify-content: center; 子要素をflexboxにより中央に配置する */
align-items: center;  /* 子要素をflexboxにより中央に配置する */

}

body#page01 main{
display: flex;
background-color:rgba(255,255,255,0.5);
}
body#page01 main .content{
width:90%;

}
body#page03{
  width:100%;
  height:auto;
  margin:5% auto;
}
main h1,
main h3{
 width:100%;
 text-align:center;
 font-size:1.25em;
 line-height: 1.35em;
}

main h3{
  color:#fff;
}
body#page02 .err{
  color:#E91E63;
  font-size:0.98em;
}
.btn:hover{
  background:#7E57C2;
 color:#fff;
}
.box_choise{
 width:100%;
 text-align: center;

}
.box_choise .box{
 display: inline-block;
 border:solid 1px #20232a;
 width:150px;
 height:30px;
 font-size: 20px;
 padding:10px;
 text-decoration: none;
 color:#20232a;
}

.box_choise .box:last-child{
	margin-left:5%;
}
span.row {
    padding-left: 1.0em;
    height: 2.0em;
    line-height: 2.0em;
    font-weight: bold;
}

.err,
.err_id,
.err_name,
.economic_att {
	color:#d9534f;
}
#exam_1+label {
  margin-bottom:2em;
}
.privacy {
    margin: 1rem auto;
    overflow: scroll;
    width: 100%;
    height: 250px;
    background-color: #ebebeb;
    font-size: 12px;
}

.container {
  margin-top:1%;
}

.download{
  background:#dddddd;
  font: 400 1rem sans-serif;
}
.download:hover{
  background:#ff7f50;
}
.download > a{
  color:#000000;
}
.download:hover > a{
  color:#ffffff;
}

label.upload {
  background: #dddddd;
  font: 400 1rem sans-serif;
}

label.upload:hover {
  background: #19B3B1;
}

.row {
    margin-bottom: 15px;
}

body#page02 main{
display: flex;
background-color:rgba(255,255,255,0.5);
}
body#page02 main .content{
width:90%;
}
.badge.badge-danger {
  padding: .4em;
  margin-left: 1em;
}
input[type='radio'],input[type='check']{
  width: .9em;
  height: .9em;
  vertical-align: middle;
}
@media screen and (max-width:892px){
  button {
    margin-bottom: 1em;
  }
}
@media screen and (max-width:500px){
  .radio + label {
    display: inline;
  }
}