@charset "utf-8";

/* ====================================
   1. スライドショーのコンテナ設定
   ==================================== */
#mainimg {
  clear: left;
  width: 100%;
  position: relative;
}

.slideshow {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  height: 0;
  z-index: 1;
  padding-top: 33.333%;
}

/* ====================================
   2. スライドのラッパー設定 (フェード切り替え用)
   ==================================== */
.slideshow__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ====================================
   3. 個別スライドの設定 (フェード効果)
   ==================================== */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity 3s ease-in-out;
}

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 【修正】JavaScriptによって is-active クラスが付いたスライドを表示 */
.slide.is-active {
  opacity: 1;
  z-index: 2;
}

/* ====================================
   4. ドットナビゲーションのスタイル
   ==================================== */
.slideshow__dots {
  position: absolute;
  bottom: 20px; /* 画像の下から40pxの位置（修正済み） */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
  display: flex;
  gap: 20px;
}

.slideshow__dots.is-hidden {
  opacity: 0;
  pointer-events: none; /* クリックやホバーを無効化 */
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s, border-color 0.3s;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* 視覚的な同期を改善するため、ドットのトランジション時間を短くし、画像と同期させる */
.dot.is-active {
  background-color: #fff;
  border-color: #000;
  /* 0.1秒かけて変化させる（一瞬で変わるより滑らかになる）*/
  transition: background-color 0.1s, border-color 0.1s;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 10px rgba(0, 0, 0, 0.8);
}

.dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* ====================================
   5. キャプションのスタイル
   ==================================== */
.caption {
  position: absolute;
  display: flex;
  top: 20px;
  left: 20px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 5;
  pointer-events: none;
  opacity: 0; /* 初期は透明 */
  transition: opacity 3s ease-in-out; /* 画像と同じフェード速度 */
}

.caption.is-active-caption {
  opacity: 1;
}

.caption h1 {
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 1.5vw; /* 小さめ。画面幅に比例して縮小 */
  font-weight: 600;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.pj-name {
  margin-left: 10px;
}

.caption-s {
  font-size: 0.9vw;
  padding-right: 2em;
}
.sp-br {
  display: none;
}

.caption-logo {
  margin-bottom: 0;
  padding-right: 0;
  width: auto;
  display: block;
}

.caption-logo img {
  width: 100px;
  height: auto;
  display: block;
}

/* ロゴの影*/
.caption-logo img {
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)) /* 影を少し柔らかく */
    drop-shadow(7px 7px 12px rgba(0, 0, 0, 0.3)) /* 奥行き用 */ drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.4)); /* 上の光を強め */
}

/* ====================================
   スマホ用に調整 (@media screen and (max-width: 800px))
   ==================================== */
@media screen and (max-width: 800px) {
  .caption {
    top: 5px;
    left: 5px;
    padding: 10px;
    width: 70%;
  }

  .caption h1 {
    font-size: 2.5vw; /* スマホでは少し大きめに */
  }

  .caption p.caption-s {
    font-size: 1.7vw;
  }

  .pj-name {
    margin-left: 5px;
    padding-left: 0;
  }

  .caption-logo img {
    width: 70px !important; /* width を優先 */
    margin-bottom: 0;
    margin-right: 0;
  }

  .sp-br {
    display: inline; /* もしくはそのままdisplay: none;を解除 */
  }

  .pc-br {
    display: none;
  }

  .dot {
    width: 8px;
    height: 8px;
  }
}