@charset UTF-8;


/* ギャラリー全体のレイアウト例 */

#gallery_box .photospace	{max-width: 630px;
				margin-inline: auto;}


#gallery_box .photospace ul	{padding: 0;display: flex;
				flex-wrap: wrap;
				gap: 1rem;
				list-style: none;
				}

	#gallery_box .photospace li	{width:100%;
					max-width: 200px;
					cursor: pointer;
					}

#gallery_box .photospace img	{width: 100%;
				height: auto;
				display: block;
				transition: opacity 0.2s;
				}

		#gallery_box .photospace img:hover {opacity: 0.8;}




	/* =======================================

		     モーダル関連のCSS

	=========================================== */

/* モーダル表示時にbodyのスクロールを禁止する */

body.modal-open {overflow: hidden;}



/* モーダルの背景・コンテナ */

.image-modal	{width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 9999;
		}

/* モーダルが開いている時の状態 */
.image-modal.is-active	{opacity: 1;
			visibility: visible;}


/* モーダル内のコンテンツ縦並び */
.modal-content-wrap	{position: relative;
			max-width: 90%;
			max-height: 90%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			}


/* 画像を収める親要素（左右クリックエリアの基準） */
.modal-img-container	{position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			}

/* 表示画像 */
	.modal-img-container img	{max-width: 85vw;
					max-height: 75vh; 
					object-fit: contain;	
					display: block;	
					user-select: none;
					border-radius: 8px 8px;	
					}

/* キャプションとカウンターをまとめるエリア（横並び） */	
.modal-info-bar	{
		color: #fff;display: flex;
		width: 100%;
		margin-top: 1rem;
		justify-content: space-between;	
		align-items: center;	
		font-family: sans-serif;	
		user-select: none;	
		}





/* キャプションのスタイル */
.modal-caption	{color:#fff;
		font-size: 2rem;
		letter-spacing: 0.05rem;
		}


/* カウンター（例: 1 / 9）のスタイル */
.modal-counter	{color: #ccc;
		font-size: 1.5rem;
		letter-spacing: 0.05rem;
		white-space: nowrap;
		margin-left: 1.2rem; 
		}



/* 左右の切り替えボタン */
.modal-nav	{position: absolute;
		top: 0;
		bottom: 0;
		width: 50%;
		cursor: pointer;
		z-index: 10;
		}

	.modal-prev {left: 0;}

	.modal-next {right: 0;}


/* 矢印アイコン */
.modal-nav::after	{content: '';
			position: absolute;
			top: 50%;
			width: 1.2rem;
			height: 1.2rem;
			border-top: 3px solid #fff;
			border-right: 3px solid #fff;
			transform: translateY(-50%);
			}

.modal-prev::after	{left: 1.2rem;
			transform: translateY(-50%) rotate(-135deg);}

.modal-next::after	{right: 1.2rem;
			transform: translateY(-50%) rotate(45deg);}



/* 閉じるボタン（右上） */
.modal-close	{color: #fff;
		padding: 10px;
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 5rem;
		line-height: 1;
		background: none;
		border: none;
		cursor: pointer;
		z-index: 20;
		}




/* ------------------------------------------------------
                       W430
------------------------------------------------------  */

@media (max-width: 430px) {

	#gallery_box .photospace	{max-width: 90%;
					margin-bottom: 2rem;}

	#gallery_box .photospace ul {display: block;}

	#gallery_box .photospace li	{display: inline-block;
					max-width: fit-content;
					with:100%;
					}

	#gallery_box .photospace img	{max-width: 100px;
					width:100%;
					border: 3px solid #fff;
					box-shadow: 1px 1px 4px #222;
					}





}