@charset "utf-8";
body {
  margin: 0;
  width: 100%;  /* モーダル表示時、幅が変更されるのを防ぐ */
  color: #444;
}

p {
  margin: 30px 0 10px;
  font-weight: 700;
  text-align: center;
}

.text {
  margin: 15px auto;
  width: 80%;
  text-align: left;
}

#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
}

.modal-mask {
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: 0.2;
  /*background: rgba(0,0,0,0.75);*/ /* 背面のbodyを少しだけ暗くし、操作できないニュアンスを出す */
}

.modal-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  background: #fefefe;
  transform: translate(-50%, -50%);
  box-shadow: 3px 3px 5px #888; /* 背面のbodyの上に立体的にのせているイメージ */
 max-width:500px;
}

.modal-inner {
  position: relative; /* 閉じるボタンの相対位置の基準とする */
  margin: 10px auto;
  width: 90%;
  height: auto;
}

.modal-title {
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  color: #ff1493;
  text-align: center;
}

.modal-text {
  /*padding: 5%;*/
   padding: 1% 1% 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  letter-spacing: 1px;
}
.modal-title img,.modal-text img {
 display: block;
 margin: 0 auto;
 width: 100%;
}
button {
  position: absolute;
/*top: calc(-10% - 8px);*/
top: calc(-8% - 8px);

 /* 位置の基準とする親要素のmargin分と、親要素からはみ出す距離（ここでは8px)を引く */
  right: calc(-5% - 8px);
  padding: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid #fefefe;
  border-radius: 50%;
  background-color: #fefefe;
 font-size: 20px;

  box-shadow: 2px 2px 3px #888;
  line-height: 10px;
  color: #444;
  cursor: pointer;
}
@media screen and (min-width: 600px) {
 .modal-container {
    width: 50%;
   max-width:500px;
 }
 button {
   top: calc(-3% - 5px);
  width: 40px;
  height: 40px;
  font-size: 30px;
 }
}