main{
  padding-bottom:30px;
}
section.contact{
  --contact-color:#bbb;
  display:block;
  width:800px;
  max-width:100%;
  margin:30px auto;
  padding:20px;
  background-color:white;
}

section.contact p{
  margin:0;
}

section.contact h1{
  font-size:2.0rem;
  text-align:center;
}

section.contact .flex{
  display:flex;
  align-items:center;
}

section.contact .flex-column{
  display:flex;
  flex-direction:column;
}

section.contact .form-wrap > *{
  border-bottom:1px solid var(--contact-color);
  padding:10px;
}
section.contact .form-wrap > *:last-child{
  border:0;
}

section.contact .item{
  padding:30px 10px;
}

section.contact .item > *:nth-of-type(1){
  width:150px;
}
section.contact .item > *:nth-of-type(2){
  flex:1;
}

section.contact .width-100{
  width:100%;
  flex:1;
}

section.contact input:not([type="radio"],[type="chackbox"]),
section.contact textarea,
section.contact select{
  border:1px solid var(--contact-color);
  outline:none;
  padding:10px;
  border-radius:5px;
  width:100%;
  appearance:none;
}
section.contact textarea{
  height:200px;
  resize : none;
}
section.contact select{
  /* position:relative; */
  background-color: white;
  border: 1px solid #ccc;
  padding: 8px 30px 8px 12px; /* 右側にアイコンのスペースを作る */
  font-size: 16px;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}
/* section.contact select::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  transform:translate(0,-50%);
  display:block;
  width:15px;
  height:15px;
  background-color:black;
} */

section.contact .button-area > *{
  text-align:center;
}

section.contact button[name="send"]{
  appearance:none;
  background-color:black;
  color:white;
  padding:5px 20px;
  border-radius:5px;
  cursor:pointer;
}

section.contact button[name="send"]:hover{
  opacity:0.7;
}

@media(max-width:768px){
  section.contact .item{
    flex-direction:column;
  }
  section.contact .item *:nth-of-type(1),
  section.contact .item *{
    width:100%;
  }
}