/* FIVE SEASON ギャラリー */
.egal { position: relative; margin: 1.5em 0; }
.egal__item { display: block; cursor: zoom-in; }
.egal__item img { display: block; width: 100%; height: auto; }
.egal__nav { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: pointer; }
.egal__nav::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 2px solid #555; border-left: 2px solid #555; }
.egal__nav--prev { left: 6px; }
.egal__nav--prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.egal__nav--next { right: 6px; }
.egal__nav--next::before { transform: translate(-70%, -50%) rotate(135deg); }
.egal__nav[disabled] { opacity: .3; cursor: default; }

/* カルーセル：横に流れる（スマホは指で送れる） */
.egal__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0; }
.egal__track::-webkit-scrollbar { display: none; }
.egal--carousel .egal__item { flex: 0 0 auto; width: calc((100% - 30px) / 4); scroll-snap-align: start; }
.egal--carousel .egal__item img { aspect-ratio: 2 / 3; object-fit: cover; }
@media (max-width: 782px) { .egal--carousel .egal__item { width: calc((100% - 10px) / 2.2); } }

/* 1枚ずつ */
.egal__stage { position: relative; display: grid; justify-items: center; }
.egal--image-viewer .egal__item { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .3s; }
.egal--image-viewer .egal__item.is-active { visibility: visible; opacity: 1; }
.egal--image-viewer .egal__item img { max-height: 70vh; width: auto; max-width: 100%; }
.egal__bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.egal__bar .egal__nav { position: relative; top: auto; left: auto; right: auto; margin: 0; }
.egal__count { min-width: 4em; text-align: center; font-size: 13px; color: #666; letter-spacing: .05em; }

/* 敷き詰め：行の高さをそろえ、横幅いっぱいに伸ばす */
.egal__rows { display: flex; flex-wrap: wrap; gap: 6px; }
.egal__rows::after { content: ""; flex-grow: 999; }
/* 幅は縦横比に比例させて伸ばす（同じ行の写真は同じ高さになる）。高さは写真の読み込み前から縦横比で決めておく */
.egal--justified .egal__item { flex: var(--r) 1 calc(var(--r) * var(--egal-h, 220px)); min-width: 0; }
.egal--justified .egal__item img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; }
@media (max-width: 600px) { .egal--justified { --egal-h: 140px !important; } }
/* JavaScript で並べたあと：幅と高さは計算どおり、写真の間は設定どおり、行は中央にそろえる */
.egal--justified .egal__rows { gap: var(--egal-gap, 6px); }
.egal__rows.is-laid { justify-content: center; }
.egal__rows.is-laid::after { display: none; }
.egal__rows.is-laid .egal__item { flex: none; }
.egal__rows.is-laid .egal__item img { height: 100%; aspect-ratio: auto; }

/* 拡大表示 */
.egal-lb { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); }
.egal-lb.is-open { display: flex; }
.egal-lb__img { max-width: 92vw; max-height: 86vh; object-fit: contain; user-select: none; transition: opacity .2s; }
.egal-lb__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 32px; line-height: 44px; cursor: pointer; }
.egal-lb .egal__nav { position: fixed; background: rgba(255, 255, 255, .85); }
.egal-lb .egal__nav--prev { left: 12px; }
.egal-lb .egal__nav--next { right: 12px; }
.egal-lb__count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #ddd; font-size: 13px; letter-spacing: .05em; }
body.egal-lb-open { overflow: hidden; }

/* 写真カード：名前付きのカードで並べ、押すと大きく出す（和装の衣装など） */
.egal__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
.egal--cards .egal__item { color: inherit; text-decoration: none; }
.egal--cards .egal__fig { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #f1efec; }
.egal--cards .egal__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.egal--cards .egal__item:hover .egal__fig img { transform: scale(1.04); }
.egal__cap { display: block; margin-top: .6em; font-size: 13px; letter-spacing: .04em; line-height: 1.5; }
@media (max-width: 600px) { .egal__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }

/* 石畳：縦横そのままで列に詰める（JavaScript で一番低い列へ順に足す。動く前は CSS の段組み） */
.egal__cols { columns: var(--egal-cols, 4); column-gap: var(--egal-gap, 10px); }
.egal--masonry .egal__item { break-inside: avoid; margin-bottom: var(--egal-gap, 10px); }
.egal__cols.is-laid { columns: auto; display: flex; align-items: flex-start; gap: var(--egal-gap, 10px); }
.egal__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--egal-gap, 10px); }
.egal__cols.is-laid .egal__item { margin: 0; }
@media (max-width: 600px) { .egal--masonry { --egal-cols: 2 !important; } }

/* スライド：1枚ずつ。キャプションがあれば左に写真・右に文字 */
.egal__slides { display: grid; touch-action: pan-y; }
.egal__slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .4s ease, visibility .4s; }
.egal__slide.is-active { visibility: visible; opacity: 1; }
.egal__slide-img img { display: block; width: 100%; height: auto; }
.egal--slides .egal__nav { top: calc(50% - 12px); }
.egal--slides.has-text { margin: 4em 0 2.5em; padding: 0 56px; }
.egal--slides.has-text .egal__slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: center; }
.egal__slide-head { margin: 0 0 1em; font-size: 15px; font-weight: 600; letter-spacing: .05em; }
.egal__slide-body { margin: 0; font-size: 13px; line-height: 2; letter-spacing: .04em; }
.egal__dots { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.egal__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #ccc; cursor: pointer; }
.egal__dot.is-active { background: #555; }
@media (max-width: 782px) {
	.egal--slides.has-text { padding: 0; }
	.egal--slides.has-text .egal__slide { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
	/* 矢印は写真（横:縦 = 3:2）の真ん中の高さに。margin の % は横幅が基準 */
	.egal--slides.has-text .egal__nav { top: 0; margin-top: calc(100% / 3 - 20px); }
}