body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .header-img {
            max-width: 100%;
            height: auto;
        }

        /* テキストセクション */
        .site-announce-h2 {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
        .popup-ber {
            text-align: center;
            background-color: #fff;
            margin: 10px;
        }

        .division {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            padding: 20px;
  height: calc(100% - 170px);            /* 画面高さの90% */
        }
        .division-nomargin {
            display: flex;
            justify-content: space-between;
        }
        /* 左側エリア */
        .left {
            width: 45%; /* 左側エリアは全体の45%の幅 */
            background-color: #fff;
            padding: 10px;
        }
        .left img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }

        /* 右側エリア */
        .right {
            width: 50%; /* 右側エリアは全体の50%の幅 */
            background-color: #fff;
            padding: 10px;
        }
        .right img{
            width: 50%; 
        }

        .search-bar {
            margin-bottom: 20px;
            text-align: center;
        }
        .search-bar input {
            padding: 10px;
            width: 80%;
            max-width: 400px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        /* サムネイルコンテナ */
        .thumbnail-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
  overflow: auto;
  height: calc(100% - 100px);            /* 画面高さの90% */
        }

        /* サムネイルスタイル */
        .thumbnail {
            width: calc(50% - 10px); /* 画面サイズに合わせてサムネイルの幅を調整 */
            background-color: #fff;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;
            box-sizing: border-box;
            transition: transform 0.3s ease;
        }
        .thumbnail img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .thumbnail h3 {
            margin: 10px 0;
            font-size: 18px;
        }
        .thumbnail p {
            font-size: 14px;
            color: #555;
        }

        /* リンクスタイル */
        .thumbnail a {
            color: #007BFF;
            text-decoration: none;
        }

        .thumbnail a:hover {
            text-decoration: underline;
        }
#popup {
  position: fixed;         /* スクロールしても固定位置に表示 */
  top: 50%;                /* 縦中央 */
  left: 50%;               /* 横中央 */
  transform: translate(-50%, -50%); /* 中央揃え */
  width: 95vw;             /* 画面幅の90% */
  height: 90vh;            /* 画面高さの90% */
  background-color: #f4f4f4; /* 薄い灰色の背景 */
  z-index: 9999;           /* 他の要素の上に表示 */
  display: none;
}
#close {
  position: fixed;        /* スクロールしても位置を固定 */
  top: 40px;              /* 画面の上から20pxの位置 */
  right: 20px;            /* 画面の右から20pxの位置 */
  padding: 10px 20px;     /* ボタンの内側に余白を追加 */
  background-color: #ff007b; /* ボタンの背景色 (青) */
  color: white;           /* ボタンの文字色 */
  border: none;           /* ボタンの境界線を無しに */
  border-radius: 5px;     /* ボタンの角を丸くする */
  font-size: 16px;        /* フォントサイズ */
  cursor: pointer;       /* ボタン上にカーソルを置くとポインターが表示される */
  z-index: 9999;          /* 他の要素よりも上に表示されるようにする */
  transition: background-color 0.3s ease; /* ホバー時の背景色変化にアニメーション */
}
#open {
  border: none;           /* ボタンの境界線を無しに */
  border-radius: 5px;     /* ボタンの角を丸くする */
  padding: 10px 20px;     /* ボタンの内側に余白を追加 */
  background-color: #F067A6; /* ボタンの背景色 (青) */
            width: 100%;
            color: #fff;
            font-size: 20px;

}
        .container {
            text-align: center;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .line {
            flex-grow: 1;
            height: 10px;
            background-color: #009be8;
        }

        .text {
            margin: 0 20px;
            font-size: 24px;
            font-weight: bold;
            white-space: nowrap; /* 改行しないようにする */
        }
        /* 小さな画面サイズでの調整 */
        @media (max-width: 768px) {
            .division,  .division-nomargin{
                flex-direction: column; /* スマホなど小さい画面では縦並び */
            margin-top: 0px;
            }
            .left, .right {
            padding: 0px;
                width: 100%; /* 幅を100%にして上下に並べる */
            margin-left: 0px;
            margin-bottom: 10px;
            }
            .thumbnail {
                width: 100%; /* サムネイルも100%幅に */
            }
            #close {
  top: 20px;              /* 画面の上から20pxの位置 */
  right: 10px;            /* 画面の右から20pxの位置 */}
  
  .thumbnail-container {
  overflow: visible;
  height: auto;
  }
  .division {
  overflow: auto;
  height: auto;
  }
  #popup {
  overflow: auto;
}
        }