/* =========================
   Joy Gallery
========================= */

.joy-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 24px 0;
}

.joy-gallery a {
	position: relative;
	display: block;
	overflow: hidden;
	background: #f5f5f5;
	text-decoration: none;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	cursor: zoom-in;
}

.joy-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .2s ease;
}

.joy-gallery a:hover img {
	opacity: .88;
}

.joy-gallery a.joy-gallery-hidden {
	display: none !important;
}

.joy-gallery-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(0, 0, 0, .48);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: .02em;
}


/* =========================
   PhotoSwipe
========================= */

.pswp {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	z-index: 999999 !important;
	overflow: hidden !important;
}

.pswp__bg,
.pswp__scroll-wrap {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.pswp__container,
.pswp__item {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* テーマ側の古いPhotoSwipeスキン画像を無効化 */
.pswp button.pswp__button,
.pswp .pswp__button {
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	outline: none !important;
}

/* 拡大ボタンは非表示 */
.pswp__button--zoom {
	display: none !important;
}

/* PhotoSwipe標準SVGは消す。ボタン本体は残す */
.pswp__button .pswp__icn {
	display: none !important;
}

/* 閉じるボタン：上中央 */
.pswp__button--close {
	position: fixed !important;
	top: 28px !important;
	left: 50% !important;
	width: 44px !important;
	height: 44px !important;
	margin-left: -22px !important;
	padding: 0 !important;
	opacity: .95 !important;
}

.pswp__button--close::before {
	content: "×";
	display: block;
	width: 44px;
	height: 44px;
	color: #ddd;
	font-size: 40px;
	font-weight: 300;
	line-height: 44px;
	text-align: center;
	background: none !important;
}

/* 左右矢印：Enfold風 */
.pswp__button--arrow {
	position: fixed !important;
	top: 50% !important;
	width: 82px !important;
	height: 100px !important;
	margin-top: -50px !important;
	padding: 0 !important;
	opacity: .9 !important;
}

.pswp__button--arrow--prev {
	left: 0 !important;
}

.pswp__button--arrow--next {
	right: 0 !important;
}

.pswp__button--arrow--prev::before,
.pswp__button--arrow--next::before {
	content: "";
	position: absolute;
	top: 50%;
	width: 38px;
	height: 38px;
	margin-top: -14px;
	border-color: #ddd;
	border-style: solid;
	background: none !important;
}

.pswp__button--arrow--prev::before {
	left: 28px;
	border-width: 0 0 3px 3px;
	transform: rotate(45deg);
}

.pswp__button--arrow--next::before {
	right: 28px;
	border-width: 3px 3px 0 0;
	transform: rotate(45deg);
}

.pswp__button--arrow:hover::before,
.pswp__button--close:hover::before {
	border-color: #fff;
	color: #fff;
}

/* 枚数表示：初期寄りで左上 */
.pswp__counter {
	position: fixed !important;
	top: auto !important;
	left: auto !important;
	right: 24% !important;
	bottom: 78px !important;
	min-width: 44px;
	padding: 6px 10px !important;
	height: 30px;
	line-height: 18px !important;
	color: #fff !important;
	background: rgba(0, 0, 0, .55);
	border-radius: 2px;
	font-size: 14px !important;
	text-align: center;
	z-index: 999999 !important;
}

/* キャプション：画像左下寄り */
.pswp__joy-caption {
	position: fixed;
	left: 50%;
	bottom: 78px;
	transform: translateX(-50%);
	width: min(760px, 80vw);
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
	z-index: 999999;
}


/* =========================
   Mobile
========================= */

@media (max-width: 600px) {
	.joy-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.joy-gallery-more {
		font-size: 24px;
	}

	.pswp__button--close {
		top: 18px !important;
	}

	.pswp__button--arrow {
		width: 60px !important;
		height: 80px !important;
		margin-top: -40px !important;
	}

	.pswp__button--arrow--prev::before,
	.pswp__button--arrow--next::before {
		width: 22px;
		height: 22px;
		margin-top: -11px;
	}

	.pswp__button--arrow--prev::before {
		left: 20px;
	}

	.pswp__button--arrow--next::before {
		right: 20px;
	}
}

/*media Queries タブレット（940px）以下で適応したいCSS -タブレット・スマホ横向き
---------------------------------------------------------------------------------------------------*/
@media (max-width: 940px) {
.pswp__counter {
	top: auto !important;
	left: auto !important;
	right: 24px !important;
	bottom: 54px !important;
}

	.pswp__joy-caption {
		left: 20px;
		right: 20px;
		bottom: 54px;
		transform: none;
		width: auto;
	}
.pswp__button--close {
  width: 64px !important;
  height: 64px !important;
  margin-left: -32px !important;
}
.pswp__button--close::before {
  width: 64px;
  height: 64px;
  font-size: 60px;
  line-height: 64px;
}
}

/* =========================
   Note注意書き
========================= */

p.gallery-note {
	margin: 20px 0 12px;
	color: #666;
	font-size: 14px;
}