@charset "utf-8";

#fake_alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 他の要素の上に表示 */
  z-index: 9999; 
  /* 初期状態は非表示 */
  visibility: hidden; 
}

#fake_alert.active {
  visibility: visible; /* activeクラスが付いたら表示 */
}

#fake_alert-content {
  text-align: center;
  max-width: 90%; /* モバイル向けに最大幅を設定 */
  position: relative; /* 相対位置でXボタンを配置 */
}

#fake_alert_img {
  width: 100%; /* 画像は親要素の幅に合わせる */
  border-radius: 8px 8px 0 0; /* 上部の角を丸くする */
}

#fake_alert-close-btn {
  opacity: 15%;
  position: absolute;
  top: 0px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

@media (max-width: 600px) {
  #fake_alert-content {
      font-size: 14px; /* スマホ向けにフォントサイズを調整 */
  }
}