@charset "UTF-8";
/* ==========================================================================
   page-gallery.css ── フォトギャラリー（一覧・タグ・ページ送り・拡大表示）
   値は Figma の gallery_PC（552:32942）／gallery_SP（552:33817）／gallerymodal_PC（552:33083）／gallerymodal_SP（552:33889）のもの
   ========================================================================== */

.pw-gallerysec { padding: 80px 0; background: var(--pw-color-bg); }
.pw-gallerysec__inner { width: min(var(--pw-content), 100% - var(--pw-gutter) * 2); margin-inline: auto; }
/* タグ（中央そろえ・折り返し）。選択中は塗りつぶし（§12-2：記事カードのタグと同じ形） */
.pw-taglist { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: 16px; line-height: 24px; }
.pw-taglist a { display: inline-block; color: var(--pw-color-primary); transition: color .3s ease-in-out, background-color .3s ease-in-out; }
.pw-taglist .is-current a { padding: 2px 8px; margin: -2px -8px; color: var(--pw-color-white); background: var(--pw-color-primary); }
@media (hover: hover) { .pw-taglist li:not(.is-current) a:hover { color: var(--pw-color-secondary); } }
/* 一覧：3列 373.3×300（5:4）、列間 40・行間 46 */
.pw-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 40px; margin-top: 56px; }
.pw-gitem__btn { display: block; width: 100%; text-align: left; color: var(--pw-color-text); cursor: zoom-in; }
.pw-gitem__figure { display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-gitem__img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s cubic-bezier(.19, 1, .22, 1); }
.pw-gitem__body { display: block; margin-top: 10px; padding-bottom: 4px; }   /* Figma の文字の枠は 64（20＋8＋32＋4） */
.pw-gitem__tags { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14px; line-height: 20px; }
.pw-gitem__title { display: block; margin-top: 8px; font-size: 18px; line-height: 32px; color: var(--pw-color-primary); }
.pw-gitem__tags + .pw-gitem__title { margin-top: 8px; }
.pw-gallery__empty { margin-top: 56px; font-size: 16px; line-height: 29px; text-align: center; }
.pw-gallery .pw-pager { margin-top: 56px; }
@media (hover: hover) { .pw-gitem__btn:hover .pw-gitem__img { scale: 1.05; } }

/* ---- 拡大表示（dialog）：648×800 の白い箱・角丸8・閉じるボタン 50 ---- */
.pw-gmodal { width: 648px; max-width: calc(100% - 40px); max-height: calc(100% - 40px); padding: 0; border: 0; border-radius: 8px; background: var(--pw-color-white); color: var(--pw-color-text); overflow: auto; }
.pw-gmodal::backdrop { background: rgba(15, 25, 20, .7); }
.pw-gmodal__box { position: relative; padding: 90px 40px 40px; }
.pw-gmodal__close { position: absolute; right: 16px; top: 16px; width: 50px; height: 50px; background: var(--pw-color-primary); cursor: pointer; transition: background-color .3s ease-in-out; }
.pw-gmodal__close::before, .pw-gmodal__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 1px; margin-left: -15px; background: var(--pw-color-white); rotate: 45deg; }
.pw-gmodal__close::after { rotate: -45deg; }
.pw-gmodal__figure { aspect-ratio: 568 / 600; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-gmodal__img { width: 100%; height: 100%; object-fit: cover; }
.pw-gmodal__tags { margin-top: 10px; font-size: 14px; line-height: 20px; white-space: pre-wrap; }
.pw-gmodal__tags:empty { display: none; }
.pw-gmodal__title { margin-top: 8px; font-size: 18px; line-height: 32px; color: var(--pw-color-primary); }
.pw-gmodal__tags:empty + .pw-gmodal__title { margin-top: 10px; }
.pw-gmodal__desc { margin-top: 8px; font-size: 14px; line-height: 25px; white-space: pre-wrap; }   /* 説明文（任意）。改行はそのまま */
.pw-gmodal__desc:empty { display: none; }
@media (hover: hover) { .pw-gmodal__close:hover { background: var(--pw-color-primary-dark); } }
html.pw-gmodal-open { overflow: hidden; }

/* ---- タブレット（768〜1024px） ---- */
@media (min-width: 768px) and (max-width: 1024px) {
	.pw-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}

/* ---- SP（767px 以下） ---- */
@media (max-width: 767px) {
	.pw-gallerysec { padding: 40px 0; }
	.pw-taglist { gap: 8px 16px; }
	.pw-gallery__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
	.pw-gitem__body { margin-top: 9px; }
	.pw-gitem__title { margin-top: 7px; font-size: 16px; line-height: 29px; }
	.pw-gitem__tags { gap: 0 14px; font-size: 13px; line-height: 18px; }
	.pw-gallery .pw-pager { margin-top: 24px; }
	/* 拡大表示：335 の箱・閉じる 25 */
	.pw-gmodal { width: 335px; }
	.pw-gmodal__box { padding: 56px 20px 16px; }
	.pw-gmodal__close { right: 16px; top: 16px; width: 25px; height: 25px; }
	.pw-gmodal__close::before, .pw-gmodal__close::after { width: 15px; margin-left: -7.5px; }
	.pw-gmodal__figure { aspect-ratio: 295 / 324; }
}