@charset "shift_jis";

/***********************************************************************/
/* gallery.css                                                          */
/***********************************************************************/


/* ================================================================
   PCではスマホ用共通ギャラリーを非表示
================================================================ */

.gallery
{
  display: none;
}


/* ================================================================
   スマホ・狭い画面用ギャラリー
================================================================ */

@media screen and (max-width: 767px)
{


/* ---------------------------------------------------------------
   ギャラリー全体
---------------------------------------------------------------- */

.gallery
{
  display: block;
  width: 100%;
  margin: 0 0 30px 0;
}


/* ---------------------------------------------------------------
   大きい写真
---------------------------------------------------------------- */
.galleryWrap
{
  position: relative;
  width: 100%;
}
.gallerySlides
{
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  cursor: pointer;

  scrollbar-width: none;
}


/* ---------------------------------------------------------------
   1枚の写真
---------------------------------------------------------------- */

.gallerySlide
{
  display: block;

  flex: 0 0 100%;

  width: 100%;
  min-width: 100%;
  max-width: 100%;

aspect-ratio: 1 / 1;
height: auto;

  margin: 0;
  padding: 0;

  float: none;

  overflow: hidden;

  scroll-snap-align: start;
}

.gallerySlide img
{
  display: block;

  width: 100%;
  height: 100% !important;
  max-width: none;
  max-height: none;

  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: center center;
}


/* ---------------------------------------------------------------
   左右矢印の配置
---------------------------------------------------------------- */

.galleryArrows
{
  position: absolute;
  left: 0;
  top: 0;

  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


/* ---------------------------------------------------------------
   左右矢印 共通
---------------------------------------------------------------- */

.galleryArrow
{
  position: relative;

  display: block;

  width: 32px;
  height: 32px;

  pointer-events: auto;
  cursor: pointer;
}


/* ---------------------------------------------------------------
   矢印 共通
---------------------------------------------------------------- */

.galleryArrow::before
{
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 14px;
  height: 14px;

  transform: translate(-50%, -50%) rotate(45deg);

  border-style: solid;
  border-width: 0 2px 2px 0;

  border-color: rgba(255, 255, 255, 0.9);

  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 2px rgba(1, 67, 106, 0.8));
}


/* ---------------------------------------------------------------
   左矢印
---------------------------------------------------------------- */

.galleryArrowLeft::before
{
  transform: translate(-40%, -50%) rotate(135deg);
}


/* ---------------------------------------------------------------
   右矢印
---------------------------------------------------------------- */

.galleryArrowRight::before
{
  transform: translate(-60%, -50%) rotate(-45deg);
}


/* ---------------------------------------------------------------
   サムネイル一覧
---------------------------------------------------------------- */

.galleryThumbs
{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;

  gap: 8px !important;

  width: 100% !important;

  margin: 12px 0 0 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------------
   サムネイルボタン
---------------------------------------------------------------- */

.galleryThumbs button
{
  display: block !important;

  flex: 0 0 46px !important;

  width: 46px !important;
  height: 46px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: none !important;

  border: none !important;

  border-radius: 50% !important;

  cursor: pointer;

  opacity: 0.65;

  clip-path: circle(50%);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


/* ---------------------------------------------------------------
   サムネイル画像
---------------------------------------------------------------- */

.galleryThumbs button img
{
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;

  object-fit: cover !important;

  border: none !important;

  border-radius: 50% !important;

  clip-path: circle(50%) !important;
}


/* ---------------------------------------------------------------
   表示中のサムネイル
---------------------------------------------------------------- */

.galleryThumbs button.active
{
  opacity: 1;

  transform: scale(1.08);

  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.45);
}

}