@charset "utf-8";
:root {
  --overlay-color: rgb(75 86 89/.5);
}

/* ラッパー */
.bl_imgSwitcher {
  inline-size: min(100%, 712px);
  margin-inline: auto;
  margin-block: 3rem;
}

/* メイン画像 */
.bl_imgSwitcher_main img {
  aspect-ratio: 3/2;
  inline-size: 100%;
  object-fit: contain;
  border-radius: 10px;
  transition: opacity .4s cubic-bezier(.25, 1, .5, 1);
}

/* サムネイルのエリア */
.bl_imgSwitcher_thumb {
  gap: 0 1.5rem;
  margin-block-start: 2rem;
}

/* サムネイルの各ボタン */
.bl_imgSwitcher_btn {
  flex-shrink: 0;
  inline-size: 10rem;
  overflow: hidden;
  border-radius: 10px;
  position: relative;

  &::before {
    content: "";
    border-radius: inherit;
    position: absolute;
    inset: 0;
    z-index: 10;
    transition: background-color .4s;
  }

  &:focus-visible::before {
    background-color: var(--overlay-color);
  }

  img {
    aspect-ratio: 1;
    inline-size: 100%;
    object-fit: cover;
  }
}

@media (any-hover: hover) {
  .bl_imgSwitcher_btn:hover::before {
    background-color: var(--overlay-color);
    border: #003b82 solid 3px;
  }
}

/* is_activeクラスが付与されたら、サムネイルに半透明の黒背景を適用 */
.bl_imgSwitcher_btn.is_active::before {
  background-color: var(--overlay-color);
  border: #003b82 solid 3px;
}