/* Step 1: ページ全体のベーススタイル */
body {
  background-color: #000015; /* 黒に近い紺 */
  color: #ffffff;            /* 文字は白 */
  font-family: 'M PLUS 1 Code', 'M PLUS Code Latin', monospace; /* 日本語・英語フォント */
  margin: 0;
  padding: 0;
  text-align: center;        /* 中央揃え */
}

/* Step 2: ファイルコンテナ */
.file-container {
  max-width: 800px;           /* 幅制限 */
  margin: 10vh auto;          /* 上下中央 */
  padding: 2rem;
  border: 2px solid #ff9900;  /* 赤系枠線 */
  background-color: #000010;  /* 濃紺背景 */
  border-radius: 8px;
  box-shadow: 0 0 20px #ff9900; /* 赤の光 */
}

/* Step 3: ブロック名 */
.block-title {
  color: #ff9900;  /* 赤系文字 */
  font-size: 2rem;
  margin-bottom: 2rem;
}

/* Step 4: ACCESS GRANTED大見出し */
.access-title {
  font-size: 4rem;
  margin-top: 2rem;
  color: #ffb84d;  /* 薄い赤 */
}

/* Step 5: グローアニメーション */
.glow-text {
  text-shadow: 0 0 3px #ff9900, 0 0 6px #ff9900;
  animation: glowPulse 2s infinite alternate;
}
@keyframes glowPulse {
  from {
    text-shadow: 0 0 5px #ff9900, 0 0 10px #ff9900;
  }
  to {
    text-shadow: 0 0 20px #ff9900, 0 0 35px #ffb84d;
  }
}

/* Step 6: タイプライター用各行 */
.typewriter-line {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #ffcc99;        /* 淡い赤 */
  white-space: nowrap;
  overflow: hidden;
  width: 0;              /* アニメーションで幅を広げる */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Step 7: ボタン */
button {
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  border: 2px solid #ff9900; /* 赤系ボーダー */
  background-color: transparent;
  color: #ff9900;             /* 赤系文字 */
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 2rem;
}
button:hover {
  background-color: #ff9900;
  color: #000010;
}

/* Step 8: 非表示用ユーティリティ */
.hidden {
  display: none;
}

/* Step 9: メッセージ画面 */
.next-page {
  max-width: 800px;
  margin: 5vh auto;
  padding: 2rem;
  background-color: #000020;   /* 深い青 */
  border: 2px solid #ff9900;   /* 赤系枠線 */
  border-radius: 8px;
  color: #ffffff;
  box-shadow: 0 0 15px #ff9900; /* 赤の光 */
}
.next-page h2 {
  color: #ff9900;  /* 赤系文字 */
  font-size: 3.5rem;
  margin-bottom: 1rem;
}
.next-page p {
  color: ffe6cc;  /* 淡いクリームレッド */
}

/* Step 10: レスポンシブ対応 */
@media screen and (max-width: 600px) {
  .block-title { font-size: 1.5rem; }
  .access-title { font-size: 2.8rem; }
  .typewriter-line { font-size: 1rem; }
  .next-page h2   { font-size: 1.4rem; }
  .next-page p    { font-size: 0.95rem; }
  button          { font-size: 0.9rem; padding: 0.6rem 1.2rem; }
}

#message-content {
  padding: 1rem;
  color: #ffffff; // 白文字
  text-align: left;
  background-color: transparent;
  font-size: 1rem;
  line-height: 1.8;
  white-space: pre-wrap; // 改行保持
}

/* Step X: メッセージ本文のみフォントを Shippori Mincho に変更 */
#message-content {
  font-family: 'Shippori Mincho', serif; // メッセージ本文を明朝体に変更
}