.contents{
  min-height:calc(100% - 60px - 80px - 1px);
  text-align:center;
  margin-bottom:40px;
}

.contents .lists{
  max-width:600px;
  width:80%;
  min-width:300px;
  margin:20px auto;
}
.contents .row{
  min-height:80px;
}

input,
textarea{
  border:1px solid #ccc;
  border-radius:4px;
  padding:10px;
  font-size:18px;
  width:100%;
}
textarea{
  height:120px;
  resize:none;
}
button{
  display:inline-block;
  border:1px solid #ccc;
  background-color:#EEE;
  border-radius:4px;
  padding:10px;
  font-size:18px;
  font-size:14px;
  min-width:120px;
  margin:8px auto;
}



@media screen and (max-width: 500px){
  .contents .row{
    margin-bottom:20px;
  }
  .contents .index{
    display:block;
    text-align:left;
    font-weight:bold;
    font-size:14px;
    padding:4px 10px;
  }
  .contents .content{
    display:block;
    /* border-bottom : 2px solid #ccc; */
    text-align:left;
    padding:10px 20px;
  }
}
@media screen and (min-width: 501px){
  .contents .row{
    display:flex;
  }
  .contents .index{
    display:inline-block;
    width:30%;
    /* border-bottom : 2px solid #AAA; */
    text-align:left;
    padding:20px;
    font-size:14px;
    font-weight:bold;
  }
  .contents .content{
    display:inline-block;
    width:70%;
    /* border-bottom : 2px solid #ccc; */
    text-align:left;
    padding:20px;
  }
}



@media screen and (max-width: 500px){
  .message{
    white-space:pre-wrap;
    width:90%;
    margin:10px auto;
    text-align:left;
  }
}
@media screen and (min-width: 501px){
  .message{
    white-space:pre-wrap;
    margin:20px 80px;
  }
}
@media screen and (min-width: 768px){
  .message{
    white-space:pre-wrap;
    margin:20px 80px;
  }
}
@media screen and (min-width: 1000px){
  .message{
    white-space:pre-wrap;
    margin:20px 80px;
  }
}