/* 画像の配置と基本レイアウト（flexbox使用） */
.gallery {
	display:flex;
	flex-wrap: wrap;
}
.item_box_L {
	height:28vh;
	width: auto;
	margin: 10px;

	flex-grow: 1;
}
.item_box_M {
	height:20vh;
	width: auto;
	margin: 10px;

	flex-grow: 1;
}
.images {
	border-radius: 4px;
	width:100%;
	object-fit: cover;
}
/* チェックボックスを利用した画像フェードイン */
.item_box_checkable:hover {
	cursor:pointer;
}
.item_box_check_boxes {
	display: none;
}
input.item_box_check_boxes:checked + label .imagesFull_box {
	display: block;
	animation-name: fadeIn;
	animation-fill-mode:forwards;
	animation-duration:0.6s;
}
@keyframes fadeIn{
	  0% { opacity: 0; }
	100% { opacity: 1; }
}

/* 画像（大）の配置と基本レイアウト */
.imagesFull_box {
	display: none;

	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;

	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
}
.imagesFull {
	width: auto;
	height: 90vh;
	object-fit: cover;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

@media screen and (max-aspect-ratio: 9/15) {
	label {
		-webkit-tap-highlight-color: transparent;
	}
	.item_box_L {
		width: 40vw;
		height: auto;
	}
	.item_box_M {
		width: 25vw;
		height: auto;
	}
	.images {
		height: 100%;
		width: 100%;
	}
	.imagesFull {
		width: 98vw;
		height: auto;
	}
}