body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  background-color: #f0f2f5;
}

.container {
  max-width: 800px;
  margin-top: 2rem;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1,
h2 {
  color: #333;
}

h5 {
  color: #333;
  padding-top: 2rem;
  /* h6の上にスペースを空ける */

  padding-bottom: 0.5rem;
  /* 見出しと区切り線の間にスペースを空ける */

  border-bottom: 1px solid #333;
  /* 下に1pxの実線を引く */

}

.form-label {
  font-weight: 600;
}

.form-control,
.form-select {
  border-radius: 8px;
  border-color: #ddd;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 123, 255, 0.05);
}

.table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.table thead th {
  background-color: #607D8B;
  color: #fff;
  border: none;
}

.table tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.1);
  cursor: pointer;
}

/* 表のセル内で改行をさせない */
.table td {
  white-space: nowrap;
}

/* ラジオボタングループのスタイル */
.btn-check:checked+.btn-outline-primary {
  background-color: #607d8b;
  /* ブルーグレイ */
  color: #fff;
  /* 白い文字 */
  border-color: #607d8b;
  /* ブルーグレイのアウトライン */
}

/* 選択されていないボタンのスタイル */
.btn-outline-primary {
  color: #607d8b;
  /* ブルーグレイの文字 */
  border-color: #607d8b;
  /* ブルーグレイのアウトライン */
}

.btn-primary {
  background-color: #607D8B;
  /* ブルーグレイに変更 */
  border-color: #607D8B;
  /* ブルーグレイに変更 */
  transition: background-color 0.2s, border-color 0.2s;
}

.btn-primary:hover {
  background-color: #455A64;
  /* ホバー時の色を少し濃く */
  border-color: #37474F;
}

footer {
  padding-bottom: 3rem;
  /* 下に余白を追加 */
}

/* liの上下に余白を追加 */
ul.text-muted li {
  margin-bottom: 0.5rem;
}

#backToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  z-index: 1000;
  display: none;
  /* 初期状態では非表示 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body {
  /* bodyをflexコンテナにする */
  justify-content: center;
  /* 子要素を中央に配置 */
  align-items: flex-start;
  /* 子要素を上揃え */
  min-height: 100vh;
  /* 画面の高さいっぱいまで広げる */
  background-color: #f0f0f0;
  /* 薄いグレーの背景色 */
  margin: 0;
  /* bodyの余白をなくす */
  padding: 0;
  /* bodyのパディングをなくす */
}

.scrollable-content {
  flex-grow: 1;
  overflow-y: auto;
  /* ここでスクロールを有効にする */
  padding: 20px;
}

.ad-left-outer,
.ad-right-outer {
  display: none;
  /* デフォルトで非表示 */
  width: 200px;
  /* 広告の幅 */
  /*min-height: 600px;*/
  /* 単色の四角（広告のプレースホルダー） */
  flex-shrink: 0;
  /* 縮まないようにする */
  margin: 0 10px;
  /* コンテンツとの間に少し余白 */
}


/* デフォルトではPC用広告は表示し、スマホ用は非表示にする */
.ad-container-pc {
  display: block;
  /* PC用広告を表示 */
}

.ad-container-sp {
  display: none;
  /* スマホ用広告を非表示 */
}

/* 画面幅が768px以下の場合、スマホ用広告を表示しPC用を非表示にする */
@media (max-width: 768px) {
  .ad-container-pc {
    display: none;
    /* PC用広告を非表示 */
  }

  .ad-container-sp {
    display: block;
    /* スマホ用広告を表示 */
  }
}