/***********************************************************
このCSSは、JAVAと組み合わせて、複数の横に並べて横スクロール
させて表示する機能を提供します。
************************************************************/

    /* 全体のラップ */
    .scroll-gallery {
      position: relative;
      max-width: 100%;
      overflow: hidden;
      border: none; /* 外枠を透明に */
      border-radius: 8px;
    }

    /* 横スクロールコンテナ */
    .scroll-container {
      display: flex; /* 横並びにする */
      overflow-x: auto; /* 横スクロール可能 */
      scroll-behavior: smooth; /* スムーズスクロール */
      white-space: nowrap; /* 折り返しを防ぐ */

      /* スクロールバーを非表示 */
      scrollbar-width: none; /* Firefox用 */
    }

    /* Webkit系（Chrome, Edge, Safari）でのスクロールバー非表示 */
    .scroll-container::-webkit-scrollbar {
      display: none;
    }

    /* 画像のスタイル */
    .scroll-container img {
      width: 250px; /* 各画像の幅 */
      height: auto; /* アスペクト比を維持 */
      margin: 10px;
      border-radius: 4px; /* 角を丸くする */
    }

    /* 左右スクロールボタン */
    .scroll-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5); /* ボタンの背景を半透明に */
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      z-index: 10;
      transition: background-color 0.3s;
    }

    .scroll-button:hover {
      background-color: rgba(0, 0, 0, 0.8); /* ボタンのホバー時の背景 */
    }

    .scroll-button.left {
      left: 10px; /* 左端に配置 */
    }

    .scroll-button.right {
      right: 10px; /* 右端に配置 */
    }