body {
  background-color: black;
}

.content {
  margin: 30px;
  background-color: #eff3f6;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  padding-top: 20px;
}

.top {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  animation: fadeIn 5s ease 0s 1 normal;
  -webkit-animation: fadeIn 5s ease 0s 1 normal;
}

.image {
  position: relative;
}

.image img {
  width: 60%;
}

.item_titele {
  font-size: 30px;
  color: #b38da4;
}

.content_title {
  color: #4f616f;
}

#info {
  text-align: center;
}

.info_block {
  text-align: left;
  margin-left: 25%;
  margin-top: 50px;
  width: 50%;
}

ul {
  list-style: none;
}

.drama-title {
  text-align: center;
  font-size: 60px;
  font-family: "Hiragino Mincho Pro", "YuMincho", "sans-serif";
  letter-spacing: 0.5em;
  position: absolute;
  top: 0px;
  color: white;
}

.unit-title {
  text-align: center;
  font-size: 20px;
  letter-spacing: 0.1em;
}

.footer {
  margin-top: 3%;
  font-size: 15px;
  font-family: "メイリオ";
  text-align: center;
}


/* 先行予約 */
.fast_reserve {
  padding-left: 5%;
  text-align: left;
  font-size: 15px;
  font-family: "Hiragino Mincho Pro", "YuMincho", "sans-serif";
  color: red;
  line-height: 0.5em;
}

/* 予約フォーム */
.form {
  font-size: 20px;
  text-align: left;
  padding-left: 5%;
}

.form a {
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
  display: inline-block;
  transition: .3s;
  font-weight: 500;
  color: #318ae2;
}

.form a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #31aae2;
  transition: .3s;
  transform: translateX(-50%);
}

.form a:hover::after {
  width: 100%;
}

.kuzu_block {
  width: 50%;
  margin-top: 100px;
  padding: 0.5em 1em;
  margin-left: 25%;
  font-weight: bold;
  color: #6091d3;
  /*文字色*/
  background: #FFF;
  border: solid 3px #6091d3;
  /*線*/
  border-radius: 10px;
  /*角の丸み*/
}

/*モーダル*/

/*表示用のお知らせ欄*/
#notice {
  position: relative;
  text-align: center;
}

.open_mordal {
  font-size: 40px;
  color: #31aae2;
  font-weight: 700;
}

#notice p:hover {
  color: #b38da4;
}

/*モーダル本体*/
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}

.modal-content{
padding: 50px;
background-color: white;
width: 500px;
margin: 5% auto;
border-radius: 20px;
/*アニメーション*/
animation: fadeIn 0.5s ease 0s 1 normal;
-webkit-animation: fadeIn 0.5s ease 0s 1 normal;
}

/*アニメーションのキーフレーム設定*/
@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 2
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 2
  }
}