/* CSS Document */
.other_grid{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
.other_grid-title{
	padding-bottom:40px;
}
.other_grid-box{
	display:flex;
	flex-wrap:wrap;
	gap:var(--gap-other_grid);
}
.other_grid-item{
	width:calc((100% / var(--num-other_grid)) - (var(--gap-other_grid) * (var(--num-other_grid) - 1) / var(--num-other_grid)));
	position:relative;
}
.other_grid-item.on{
	z-index:3;
}
.other_grid-item_box{
	position:relative;
}
.other_grid-item.on .other_grid-item_box{
	position:absolute;
	left:0;
	width:100%;
	top:0;
	height:calc((100% * var(--h-other_grid)) + (var(--gap-other_grid) * (var(--h-other_grid) - 1)));
}
.other_grid-item_img {
    height: 100%;
    overflow: hidden;
	display: flex;
}
.other_grid-item_img .img_normal{
	opacity:1;
}
.other_grid-item_img .img_hover{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	visibility:hidden;
}
.other_grid-item_box:hover .other_grid-item_img .img_normal{
	opacity:0;
	visibility:hidden;
}
.other_grid-item_box:hover .other_grid-item_img .img_hover{
	opacity:1;
	visibility:visible;
}
.other_grid-item_img img {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}
.other_grid-item_text{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	color: #fff;
    background-color: #0006;
	overflow: hidden;
}
/* ani */
.other_grid-item_line{
	--to_border-other_grid-line:8%;
	--side_to_border-other_grid-line:4%;
	--width-other_grid-line:1px;
}
.other_grid-item_line i{
	position:absolute;
	background-color:#fff;
	transition:.5s all;
	opacity:0;
	visibility:hidden;
}
.other_grid-item_line i.t{
	top:var(--to_border-other_grid-line);
	left:var(--side_to_border-other_grid-line);
}
.other_grid-item_line i.l{
	top:var(--side_to_border-other_grid-line);
	left:var(--to_border-other_grid-line);
}
.other_grid-item_line i.r{
	right:var(--to_border-other_grid-line);
	bottom:var(--side_to_border-other_grid-line);
}
.other_grid-item_line i.b{
	right:var(--side_to_border-other_grid-line);
	bottom:var(--to_border-other_grid-line);
}
.other_grid-item_line i.t,
.other_grid-item_line i.b{
	height:var(--width-other_grid-line);
	width:0;
}
.other_grid-item_box:hover .other_grid-item_line i.t,
.other_grid-item_box:hover .other_grid-item_line i.b{
	width:calc(100% - (var(--side_to_border-other_grid-line) * 2));
}
.other_grid-item_line i.l,
.other_grid-item_line i.r{
	width:var(--width-other_grid-line);
	height:0;
}
.other_grid-item_box:hover .other_grid-item_line i.l,
.other_grid-item_box:hover .other_grid-item_line i.r{
	height:calc(100% - (var(--side_to_border-other_grid-line) * 2));
}
.other_grid-item_box:hover .other_grid-item_line i{
	opacity:1;
	visibility:visible;
}
@media(max-width: 768px) {
	.other_grid-item{
		width:calc((100% / var(--num-other_grid)) - (var(--gap-other_grid) * (var(--num-other_grid) - 1) / var(--num-other_grid))) !important;
	}
	.other_grid-item.on .other_grid-item_box{
		position:static;
		height:auto;
	}
	.other_grid-item{
		margin:0 !important;
	}
}