@charset "utf-8";

dl {
	padding: 0 0 5px 0;
  margin-left:1rem;
  width:90%;
  margin:auto;
  max-width: 800px;
  min-width: 300px;
	}
dl dt {
	border-left: solid 4px var(--hover-color);
  /* border-top: solid 1px var(--hover-color); */
	padding: 1rem 0 0 1rem;
	font-weight: bold;
  margin-top:1rem;
	}
dl dd {
	border-left: solid 4px var(--hover-color);
	padding: 0.3rem 3rem;
	}
dl a{
	text-decoration: none;
	color:var(--main-color);
}
dl a:hover{
	color:var(--hover-color);
	text-decoration: underline;
}
div.contact{
	min-height:40vh;
}
div.contact table{
	width:80%;
	margin:20px auto;
}
div.contact table th,div.contact table td{
	padding:20px 10px;
	font-size: 1rem;
}
div.contact table th{
	background-color: var(--right--gray);
	color:#000;
}
div.contact table textarea{
    vertical-align:top;
    width:80%;
    height: 7em;
}
.button {
  display       : inline-block;
  border-radius : 5%;
  font-size     : 1rem;
  text-align    : center;
  cursor        : pointer;
  padding       : 12px 2rem;
  background    : var(--right--gray);
  line-height   : 1em;
  transition    : .3s;
  box-shadow    : 2px 2px 3px rgba(0,0,0,0.4);
  border        : 1px solid var(--main-color);
}
.button:hover {
  box-shadow    : none;
  color         : #000066;
  background    : #ffffff;
}

/*mobile*/
@media screen and (max-width:599px) {
div.contact table{
	box-sizing: border-box;
	width:100%;
}
  div.contact table th,div.contact table td{
	display:block;
}
div.contact table textarea{
    width:100%;
}
}