@charset "utf-8";
.other_section {
		padding: 0 40px 180px;
}
.other_inner {
		max-width: 960px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		position: relative;
}
.other_inner .other_ataru {
		position: absolute;
		width: 330px;
		top: -125px;
		right: -260px;
		transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
}
.other_ataru {
		transform: translateX(150px);
		opacity: 0;
}
.other_ataru.isActive {
		transform: translateX(0);
		opacity: 1;
}
@media(min-width: 768px) {
		.sp_other_ataru_wrap {
				display: none;
		}
}
@media(max-width: 767px) {
		.other_ataru {
				display: none
		}
		.sp_other_ataru_wrap {
				display: flex;
				justify-content: flex-end;
		}
		.sp_other_ataru {
				width: 170px;
				transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
				position: relative;
				right: -20px;
				transform: translateX(100px);
				opacity: 0;
		}
		.sp_other_ataru.isActive {
				transform: translateX(0px);
				opacity: 1;
		}
		.sp_other_ataru img {
				width: 100%;
				height: auto
		}
}
.other_ataru img {
		width: 100%;
		height: auto;
}
.other_item {
		background: #fff;
		width: 424px;
		height: 315px;
		border-radius: 32px;
		position: relative;
		box-shadow: #AE000E 8px 8px 0px;
		box-sizing: border-box;
		padding: 30px 40px;
		display: flex;
		align-items: flex-end;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.other_item::after {
		content: '';
		display: block;
		position: absolute;
		top: -70px;
		right: -35px;
		width: 360px;
		height: 310px;
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 100%;
		pointer-events: none
}
.other_item.gallery::after {
		background-image: url("../re_images/top_btn_bgGallery.png")
}
.other_item.game::after {
		background-image: url("../re_images/top_btn_bgGame.png")
}
.other_title {
		display: flex;
		flex-direction: column-reverse;
		line-height: 1.8;
		font-weight: 600;
		color: #4D171B;
}
.other_title .en {
		letter-spacing: 0;
		font-family: "Montserrat", sans-serif;
		font-optical-sizing: auto;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		margin: 0 0 8px;
}
.other_title h4 {
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
}
.other_title h4 a {
		color: #4D171B;
		text-decoration: none;
		display: inline-block;
		position: relative;
}
.other_title h4 a::after {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 10px);
		right: -25px;
		width: 12px;
		height: 20px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 12px;
		background-image: url("../re_images/other_arw_brwn.png?2505")
}
.other_title h4 a span {
		display: inline-block;
		position: relative;
}
.other_title h4 a span::after {
		content: '';
		display: block;
		position: absolute;
		bottom: -6px;
		left: 0;
		width: 100%;
		height: 2px;
		background: #4D171B;
		transform-origin: left center;
		transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
		transform: scaleX(0);
}
@media (hover: hover) {
		.other_item:hover {
				transform: translate(3px, 3px);
				box-shadow: #AE000E 5px 5px 0px;
		}
		.other_item:hover h4 a span::after {
				transform: scaleX(1);
		}
}
@media(max-width: 1100px) {
		.other_inner .other_ataru {
				width: 260px;
				top: -200px;
				right: -70px;
		}
		.other_item {
				background: #fff;
				width: calc(50% - 30px);
				height: auto;
				aspect-ratio: 10 / 7.4;
				padding: 25px 30px;
				border-radius: 26px;
		}
		.other_item::after {
				top: -5vw;
				right: -35px;
				width: 80%;
				height: auto;
				aspect-ratio: 10 / 8.6;
		}
}
@media(max-width: 767px) {
		.other_section {
				padding: 0 25px 80px;
		}
		.other_inner {
				display: block;
		}
		.other_item {
				width: 100%;
				aspect-ratio: 10 / 7.4;
				padding: 25px 20px;
				border-radius: 12px;
				margin: 0 0 50px;
				box-shadow: #AE000E 6px 6px 0px;
		}
		.other_item.game {
				margin-bottom: 20px;
		}
		.other_item::after {
				top: -13vw;
				right: -15px;
		}
}