@charset "UTF-8";


/* -----------------
.mgsblk-gallery-1
----------------- */
.mgsblk-gallery-1 .splide__slide
{
  position: relative;
}
.mgsblk-gallery-1 .splide__slide .image img
{
  width: 100%;
  height: 86vh;
  object-fit: cover;
}
.mgsblk-gallery-1 .splide__slide video
{
  pointer-events: none; /* クリック無効化 */
  Object-fit:Cover;
}
.mgsblk-gallery-1 .splide__slide a
{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
/* -----------------
.mgsblk-gallery-2
----------------- */
.mgsblk-gallery-2 .splide__track
{
  padding-left: 300px;
  padding-right: 300px;
}


.mgsblk-gallery-2 .splide__slide
{
  position: relative;
  margin-right: 40px;
}

.mgsblk-gallery-2 .splide__slide.is-prev,
.mgsblk-gallery-2 .splide__slide.is-next
{
  opacity: 0.1;
  place-content:center;
}

.mgsblk-gallery-2 .splide__slide .image img
{
  width: 100%;
  max-height: 75vh;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.mgsblk-gallery-2 .splide__slide.is-prev img,
.mgsblk-gallery-2 .splide__slide.is-next img
{
  /*max-height: 60vh;*/
}

.mgsblk-gallery-2 .splide__slide video
{
  pointer-events: none; /* クリック無効化 */
  Object-fit:Cover;
}
.mgsblk-gallery-2 .splide__slide a
{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.mgsblk-gallery-2 .splide__arrow
{
  background: none;
  height: 3em;
  width: 3em;
}
.mgsblk-gallery-2 .splide__arrow svg
{
  height: 3em;
  width: 3em;
  opacity: 0.5;
}
/* -------------------------------------------------------------------------------- */
/*        TABLET                                                                    */
/* -------------------------------------------------------------------------------- */
@media screen and (min-width: 740px) and (max-width: 899px)
{

  .mgsblk-gallery-1 .splide__slide .image img
  {
    width: 100%;
    height: 40vh;
  }

}

/* -------------------------------------------------------------------------------- */
/*         MOBILE                                                                   */
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 739px)
{
  .mgsblk-gallery-1 .splide__slide .image img
  {
    width: 100%;
    height: 45vh;
  }
}