body {
  overflow: hidden; /* ページ全体のスクロールを無効化 */
  position: fixed; /* 固定位置に配置 */
  width: 100%; /* 画面幅いっぱいに表示 */
  height: 100%; /* 画面高さいっぱいに表示 */
}

/* 基本スタイル */
form label {
  display: block; /* ラベルをブロック要素として表示 */
  margin-bottom: 8px; /* 下部に8pxの余白を設定 */
  font-size: 1em; /* フォントサイズを親要素と同じに設定 */
  color: #444; /* テキストを濃いグレーに設定 */
}

form input[type="text"],
form input[type="email"] {
  width: 100%; /* 入力フィールドを親要素の幅いっぱいに */
  padding: 10px; /* 内側に10pxの余白を設定 */
  margin-bottom: 16px; /* 下部に16pxの余白を設定 */
  border: 1px solid #ccc; /* 薄いグレーの枠線を設定 */
  border-radius: 4px; /* 角を4px丸く */
  font-size: 1em; /* フォントサイズを親要素と同じに */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
  transition: border-color 0.2s; /* 枠線の色変更を0.2秒でアニメーション */
}

form input[type="text"]:focus,
form input[type="email"]:focus {
  border-color: #5c9ded; /* フォーカス時に青色の枠線に変更 */
  outline: none; /* デフォルトのフォーカス枠を非表示 */
}

form button {
  display: inline-block; /* インラインブロック要素として表示 */
  width: calc(50% - 16px); /* 幅を親要素の半分から16px引いた値に設定 */
  text-align: center; /* テキストを中央揃え */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

/* ローディング表示のスタイル */
.loading-container {
  display: flex; /* Flexboxレイアウトを使用 */
  flex-direction: column; /* 子要素を縦方向に配置 */
  align-items: center; /* 子要素を水平方向の中央に配置 */
  justify-content: center; /* 子要素を垂直方向の中央に配置 */
  height: 100%; /* 親要素の高さいっぱいに表示 */
}

.loading-image {
  width: 128px; /* ローディング画像の幅を128pxに設定 */
  height: 128px; /* ローディング画像の高さを128pxに設定 */
  margin-bottom: 15px; /* 下部に15pxの余白を設定 */
}

.loading-text {
  font-size: 16px; /* テキストサイズを16pxに設定 */
  color: #666; /* テキストをグレーに設定 */
}

.last-updated {
  text-align: right; /* テキストを右揃えに設定 */
  padding: 0 1rem; /* 左右に1remの余白を設定 */
  margin-bottom: 0.5rem; /* 下部に0.5remの余白を設定 */
  color: #666; /* テキストをグレーに設定 */
  font-size: 0.9rem; /* フォントサイズを0.9remに設定 */
}

h1 {
  margin: 1rem 0; /* 上下に1remの余白を設定 */
}

.header-container {
  display: flex; /* Flexboxレイアウトを使用 */
  align-items: center; /* 子要素を垂直方向の中央に配置 */
  gap: 12px; /* 子要素間に12pxの間隔を設定 */
  margin-bottom: 24px; /* 下部に24pxの余白を設定 */
}

.help-icon {
  background-color: #5dade2; /* 背景色を明るい青色に設定 */
  color: white; /* テキストを白に設定 */
  border: none; /* 枠線を非表示 */
  border-radius: 50%; /* 円形にする */
  width: 28px; /* 幅を28pxに設定 */
  height: 28px; /* 高さを28pxに設定 */
  display: flex; /* Flexboxレイアウトを使用 */
  align-items: center; /* 子要素を垂直方向の中央に配置 */
  justify-content: center; /* 子要素を水平方向の中央に配置 */
  cursor: pointer; /* マウスカーソルをポインターに変更 */
  font-size: 16px; /* フォントサイズを16pxに設定 */
  font-weight: bold; /* テキストを太字に設定 */
  transition: background-color 0.3s, transform 0.2s; /* 背景色と変形の変更をアニメーション */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 薄い影を設定 */
}

.help-icon:hover {
  background-color: #4a90e2; /* ホバー時に少し濃い青色に変更 */
  transform: scale(1.1); /* ホバー時に10%拡大 */
}

.help-icon:active {
  transform: scale(0.95); /* クリック時に5%縮小 */
}

.help-icon-text {
  line-height: 1; /* 行の高さを1に設定 */
}

.help-image-popup {
  position: fixed; /* 固定位置に配置 */
  top: 0; /* 上端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 画面幅いっぱいに表示 */
  height: 100%; /* 画面高さいっぱいに表示 */
  background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒背景 */
  display: flex; /* Flexboxレイアウトを使用 */
  align-items: center; /* 子要素を垂直方向の中央に配置 */
  justify-content: center; /* 子要素を水平方向の中央に配置 */
  z-index: 1000; /* 最前面に表示 */
  opacity: 0; /* 初期状態は透明 */
  visibility: hidden; /* 初期状態は非表示 */
  transition: opacity 0.3s, visibility 0.3s; /* 透明度と表示状態の変更をアニメーション */
}

.help-image-popup.show {
  opacity: 1; /* 表示状態では不透明 */
  visibility: visible; /* 表示状態では表示 */
}

.help-image-container {
  max-width: 80%; /* 最大幅を画面の80%に制限 */
  max-height: 90%; /* 最大高さを画面の90%に制限 */
  position: relative; /* 子要素の絶対位置指定の基準点として設定 */
  overflow-y: auto; /* 縦方向のスクロールを有効化 */
}

.help-image {
  width: 100%; /* 幅を親要素いっぱいに設定 */
  height: auto; /* 高さを自動調整 */
  border-radius: 8px; /* 角を8px丸く */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* 影を設定 */
  display: block; /* ブロック要素として表示 */
}

.help-image-close {
  position: absolute; /* 絶対位置指定で配置 */
  top: -40px; /* 上に40px移動 */
  right: 0; /* 右端に配置 */
  background-color: #e74c3c; /* 背景色を赤色に設定 */
  color: white; /* テキストを白に設定 */
  border: none; /* 枠線を非表示 */
  border-radius: 50%; /* 円形にする */
  width: 32px; /* 幅を32pxに設定 */
  height: 32px; /* 高さを32pxに設定 */
  display: flex; /* Flexboxレイアウトを使用 */
  align-items: center; /* 子要素を垂直方向の中央に配置 */
  justify-content: center; /* 子要素を水平方向の中央に配置 */
  cursor: pointer; /* マウスカーソルをポインターに変更 */
  font-size: 18px; /* フォントサイズを18pxに設定 */
  font-weight: bold; /* テキストを太字に設定 */
  transition: background-color 0.3s; /* 背景色の変更をアニメーション */
}

.help-image-close:hover {
  background-color: #c0392b; /* ホバー時に少し濃い赤色に変更 */
}

/* PCでの表示を最適化 */
@media screen and (min-width: 768px) {
  .help-image-container {
    max-width: 70%; /* PCでは幅を少し狭く */
    max-height: 85%; /* PCでは高さを少し調整 */
  }

  .help-image {
    max-height: none; /* PCでは高さ制限を解除 */
  }
}