@charset "UTF-8";
/* CSS Document */
/* スライダー全体のコンテナ */
.slider-wrapper {
  position: relative; /* テキストをこの枠に対して固定する */
  width: 100%;
  overflow: hidden;
  z-index: 0;
}
.flexslider {
  margin: 0!important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}
/* --- 【重要】右下に固定するテキストエリア --- */
.fixed-caption {
  position: absolute;
  left: 10%;
  bottom: 80px;
  z-index: 1000;
  color: #fff;
  text-align: left;
  pointer-events: none;
  transition: all 0.3s ease; /* サイズ変更をスムーズに */
  text-shadow: 2px 2px 1rem rgba(0, 0, 0, 2);
  font-weight: 600;
}
.fixed-caption h2 {
  font-size: 4rem;
  margin: 0 0 5px 0;
  letter-spacing: 0.1em;
  color: #fff;
}
.fixed-caption p {
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 0;
}
.flex-direction-nav .flex-next {
  display: none !important;
}
.flex-direction-nav .flex-prev {
  display: none !important;
}
/* --- 矢印のカスタマイズ（維持） --- */
.flex-direction-nav {
  display: none !important;
}
.flex-direction-nav a {
  display: none !important;
}
/* --- ドットの配置（画像の中央下） --- */
.flex-control-nav {
  bottom: 25px !important;
  display: block !important;
  z-index: 999 !important;
  visibility: visible !important;
  width: 100% !important;
  text-align: center !important;
}
.flex-control-paging li a {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  box-shadow: none;
}
.flex-control-paging li a.flex-active {
  background: #fff;
}
/* 1. 矢印の黒背景や三角形を消して、白い枠のデザインにする */
.flex-direction-nav a {
  display: none !important;
}
/* 既存の三角形（::before）を消す */
.flex-direction-nav a::before {
  display: none !important;
}
/* 2. ドットのデザイン（数字が出る設定）をリセットしてシンプルな丸にする */
.flex-control-paging li a::after {
  content: none !important; /* 数字の "01" 等を消す */
}
.flex-control-paging li a {
  width: 12px !important; /* 長方形から丸いサイズへ */
  height: 12px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
}
.flex-control-nav {
  bottom: 10px !important; /* 位置を画像の下端近くに固定 */
  text-align: center !important; /* 右寄せを中央寄せに戻す */
}
/* 現在表示されているスライドのドット（不透明の白） */
.flex-control-paging li a.flex-active {
  background: rgba(255, 255, 255, 1.0) !important;
  /* もしくは単に background: #fff !important; */
}
/* 3. スマホ時の高さを維持 */
@media screen and (max-width: 768px) {
  .flexslider .slides img {
    height: 40vh !important;
    object-fit: cover !important;
  }
  .flex-direction-nav .flex-prev, .flex-direction-nav .flex-next {
    top: 50% !important; /* 既存の top: 0 を上書き */
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  /* 1. 固定テキストのサイズと位置を調整 */
  .fixed-caption {
    right: 5%; /* 端に寄せすぎないよう調整 */
    bottom: 60px; /* ドットに被らないよう少し上げる */
  }
  .fixed-caption h2 {
    font-size: 1.4rem; /* タイトルを小さく */
    margin-bottom: 2px;
  }
  .fixed-caption p {
    font-size: 0.75rem; /* 本文を小さく */
    line-height: 1.4;
  }
  /* 3. 下のドットを少し小さく */
  .flex-control-nav {
    bottom: 15px !important;
  }
  .flex-control-paging li a {
    width: 8px !important;
    height: 8px !important;
  }
  /* 1. スライド画像の高さを画面の40%に固定 */
  .flexslider .slides img {
    height: 40vh !important; /* 画面の高さの40% */
    object-fit: cover; /* 画像の比率を保ったまま切り抜き */
    width: 100%;
  }
  /* 2. 固定テキストの位置微調整 */
  .fixed-caption {
    right: 5%;
    bottom: 30px; /* 画像の高さに合わせて調整 */
  }
  .fixed-caption h2 {
    font-size: 1.6rem;
  }
  .fixed-caption p {
    font-size: 1rem;
  }
  /* 3. 矢印を小さくして両端にピタッとくっつける */
  .flex-direction-nav a {
    width: 30px !important; /* さらに小さく */
    height: 30px !important;
    background: rgba(0, 0, 0, 0.3); /* 背景を少し濃くして視認性確保 */
    border-width: 1px;
  }
  /* 4. ドットの位置も少し下げる */
  .flex-control-nav {
    bottom: 0 !important;
  }
  div.sns a:after {
    display: none;
  }
}