}@charset "utf-8";
body {
  line-height: 1.5;
}
#table-wrap, #ulli-wrap {
  width: 918px;
  margin: 50px auto 100px;
  padding: 20px;
  background: #D5E0F1;
  border: 1px solid #3261AB;
  position: relative;
}
.role-heading {
  position: absolute;
  top: -60px;
  font-weight: bold;
  font-size: 24px;
}

p {
  width: 80%;
}
textarea {
  width: 350px;
  height: 4rem;
}
form p {
  text-align: center;
}
form p input {
  padding: 5px 10px;
}
/*tableで設定*/
#table-wrap table {
  margin-left: 30px;
}
#table-wrap th {
  width: 200px;
  text-align: right;
  vertical-align: top;
}
#table-wrap th, #table-wrap td {
  padding: 0 10px 0 5px;
}
/*ul・li・spanで設定*/
#ulli-wrap ul {
  list-style-type: none;
}
#ulli-wrap li {
  margin-bottom: 10px;
}
#ulli-wrap li span {
  display: inline-block; /*span要素は本来、ブラウザでの表示状態=displayプロパティはinlineです。これは「要素が横並びに配置される」「改行しない」「幅を設定出来ない」性質をもちますが、これをblock要素の性質を併せ持ったinline-blockに変更しました。これにより、本来は幅を設定出来ないspan要素にwidthを持ちつつ、要素が改行しない横並びを実装しています*/
  width: 200px;
  margin-right: 10px;
  font-weight: bold;
  text-align: right;
  vertical-align: top;