/* --- Slick --- */

    /* 全体のリセット */
    /* * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #f5f5f5;
      font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    } */

    /* カルーセル全体のコンテナ（ファーストビュー） */
    .slider-wrapper {
      position: relative;
      width: 100%;
      /* height: 100vh;  */
      overflow: hidden;
      background-color: #000;
    }

    .slideBox {
      width: 100%;
      height: 100%;
    }

    /* 各スライドのインナー要素 */
    .slideBox_inner {
      position: relative;
      width: 100%;
      /* height: 100vh; */
      outline: none; /* クリック時の青い枠線を消す */
    }

    .slideBox_inner figure {
      width: 100%;
      /* height: 100%; */
      position: relative;
    }

    /* 画像のレスポンシブ制御（PC/SP切り替え） */
    .slideBox_inner img {
      width: 100%;
      /* height: 100%; */
      object-fit: cover; /* 比率を保ったままエリアを埋める */
    }

    /* 初期状態のディスプレイ設定 */
    .slideBox_inner .pc { display: block; height: 100%; }
    .slideBox_inner .sp { display: none; height: 100%; }

    /* スマートフォンサイズ（画面幅767px以下）の切り替え */
    @media screen and (max-width: 767px) {
      .slideBox_inner .pc { display: none; }
      .slideBox_inner .sp { display: block; }
    }

    /* 画像の上のキャプション（文字） */
    figcaption {
      position: absolute;
      left: 8%;
      bottom: 12%;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 0.1em;
      text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6); /* 文字の視認性を上げる影 */
      z-index: 5;
    }

    @media screen and (max-width: 767px) {
      figcaption {
        left: 5%;
        bottom: 15%;
        font-size: 18px;
        right: 5%; /* スマホで文字が折り返してもはみ出さないように */
      }
    }

    /* ==========================================
      3. Slick自動生成ドットボタンのカスタムCSS
    ========================================== */
    .slick-dots {
      position: absolute;
      bottom: 40px; /* 画面下部からの位置 */
      left: 50%;
      transform: translateX(-50%);
      display: flex !important; /* Slickのデフォルトを上書きしてflex適用 */
      list-style: none;
      z-index: 10;
    }

    .slick-dots li {
      margin: 0 8px;
    }

    /* 通常時のドット（半透明の白） */
    .slick-dots li button {
      border: none;
      background: rgba(255, 255, 255, 0.4);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      text-indent: -9999px; /* 数字を隠す */
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
    }

    /* ホバー時 */
    .slick-dots li button:hover {
      background: rgba(255, 255, 255, 0.8);
    }

    /* 現在表示中のアクティブなドット */
    .slick-dots li.slick-active button {
      background: #fff; /* パキッとした白 */
      transform: scale(1.2); /* 少しだけ大きくして強調 */
    }

     @media screen and (max-width: 767px) {
      .slick-dots{
        bottom: 3vw;
      }
     }