@charset "utf-8";

/* ===================================================================
COMMON
=================================================================== */

/* COMMON
--------------------*/

.container-900 {
	max-width: 930px;
	padding: 0 15px;
}

.h-side-inner {
    left: -150px;
}

@keyframes sideShow {
	0% {
		width: 150px;
		left: -150px;
	}
	100% {
		width: 100%;
		left: 0;
	}
}

@keyframes sideClose {
	0% {
		width: 100%;
		left: 0;
	}
	100% {
		width: 150px;
		left: -150px;
	}
}

/* IMG
--------------------*/

img {
	height: auto;
}

/* OTHER LIST
--------------------*/

.other-list {
	max-width: 840px;
	margin: 0 auto;
}

.other-list > ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	column-gap: calc(30 / 840 * 100%);
	row-gap: 30px;
}

.other-list > ul > li {
	width: calc(405 / 840 * 100%);
}

.other-list > ul > li a {
	display: block;
}

@media screen and (max-width: 1100px) {

	/* ===================================================================
	COMMON
	=================================================================== */

	/* COMMON
	--------------------*/

	.h-side-inner {
		left: 0;
	}

	@keyframes sideShow {
		0% {
			width: 150px;
			left: 0;
		}
		100% {
			width: 100%;
			left: 0;
		}
	}

	@keyframes sideClose {
		0% {
			width: 100%;
			left: 0;
		}
		100% {
			width: 150px;
			left: 0;
		}
	}

	/* OTHER LIST
	--------------------*/

	.other-list > ul {
		flex-direction: column;
		row-gap: 20px;
	}

	.other-list > ul > li {
		width: 100%;
	}

}