/* コンテンツ */
.topContent .container {
	padding-top: 160px;
}

@media(max-width: 1023px) {
	.topContent .container {
		padding-top: 30vw;
	}
}

.topContent .container {
	max-width: 1600px;
	width: 92%;
	margin-inline: var(--main-position);
}

.topContent .container .kvArticle .kvSection .container-works {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

@media(max-width: 768px) {
	.topContent .container .kvArticle .kvSection .container-works {
		justify-content: space-between;
		width: 100%;
	}
}

.topContent .container .kvArticle .kvSection .container-works .content-work {
	width: 18%;
	margin-right: 7%;
	flex-shrink: 0;
	padding-bottom: 25%;
	height: 0;
}

@media(max-width: 1023px) {
	.topContent .container .kvArticle .kvSection .container-works .content-work {
		margin-right: 13%;
		width: 20%;
	}
}

@media(max-width: 768px) {
	.topContent .container .kvArticle .kvSection .container-works .content-work {
		margin-right: 0;
		width: 42vw;
		height: 52vw;
	}
}

.topContent .container .kvArticle .kvSection .container-works .content-work a {
	width: 100%;
	padding-bottom: 100%;
	height: 0;
	margin: 0 auto;
	cursor: pointer;
	position: relative;
}

.topContent .container .kvArticle .kvSection .container-works .content-work a .content-work-img {
	height: 0;
	overflow: hidden;
	padding-bottom: 100%;
	position: relative;
	transform: translate(0,0);
	width: 100%;
	transition: background .3s;
}

.topContent .container .kvArticle .kvSection .container-works .content-work a .content-work-img .content-work-imgInner::before {
	background: var(--main-color);
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.topContent .container .kvArticle .kvSection .container-works .content-work .thumb-img {
	filter: grayscale(100%);
	mix-blend-mode: screen;
	transition: filter .3s;
}

.topContent .container .kvArticle .kvSection .container-works .content-work .thumb-img:hover {
	filter: grayscale(0);
	mix-blend-mode: normal;
}

.content-work__detail span {
	display: block;
	font-size: 1.3rem;
	color: var(--main-color);
	padding-top: 2%;
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
}

.modal-bg {
	background: rgba(0, 0, 0, 0.7);
	height: 100vh;
	position: absolute;
	width: 100%;
}

.modal-wrapper {
	margin: var(--main-position);
	width: 60%;
	max-width: 750px;
	position: relative;
}

@media(max-width: 768px) {
	.modal-wrapper {
		top: 50px;
	}
}

@media(max-width: 768px) {
	.modal-wrapper {
		width: 100%;
	}
}

.modal-content {
	background: rgb(255, 255, 255);
	overflow-y: auto;
	height: 100%;
	min-height: 100vh;
	max-height: 100vh;
	width: 100%;
}

.modal-content {
	display: flex;
	justify-content: space-between;
}

@media(max-width: 768px) {
	.modal-content {
		flex-direction: column;
	}
}

.modal-content-txt {
	width: 44%;
	-webkit-position: sticky;
	position: sticky;
	top: 0;
	padding: 8% 5% 8% 8%;
}

@media(max-width: 768px) {
	.modal-content-txt {
		width: 92%;
		position: relative;
	}
}

.modal-content-txt h2 {
	color: #333333;
	font-size: 1.6rem;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-feature-settings: "palt";
	letter-spacing: .04em;
	line-height: 1.75;
	text-align: justify;
}

.modal-content-txt div:not(:first-child) {
	padding-top: 8%;
}

.modal-content-txt div:not(:last-child) {
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 8%;
}

.modal-content-txt a {
	text-decoration: underline;
}

.modal-content-img {
	width: 55%;
	padding: 8% 5% 8% 8%;
}

.modal-content-img p {
	padding-top: 10px;
}
.modal-content-img p + img {
	margin-top: 30px;
}

@media(max-width: 768px) {
	.modal-content-img {
		width: 92%;
	}
}


.modal-close {
	width: 40px;
	height: 40px;
	background: var(--main-color);
	position: absolute;
	top: 0;
	right: -40px;
}

@media(max-width: 768px) {
	.modal-close {
		top: -20px;
		right: 10px;
	}
}

.modal-close::before,
.modal-close::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	transform-origin: center;
	width: 40%;
	height: 1px;
	background: rgb(255, 255, 255);
}

.modal-close::before {
	transform: rotate(45deg);
}

.modal-close::after {
	transform: rotate(-45deg);
}