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

.other_grid_f1-item_btn{
	display: flex;
	margin-top: 12px;
}
.other_grid_f1-item_btn-item{
	display: block;
	color: #fff;
	padding: 6px .2rem;
	border-radius: 6px;
	background: var(--site-color);
}
.other_grid_f1-item_btn-item + .other_grid_f1-item_btn-item{ 
	margin-left: 10px;
}