@charset "UTF-8";

#illust-header {
	background-color: #6d6d6d;
}

.no-webp #illust-header {
	background-image: url(../imgs/illust/hdr-bkg.jpg);
}
.webp #illust-header {
	background-image: url(../imgs/illust/hdr-bkg.webp);
}
#illust-header {
	background-image: image-set(
		url('../imgs/illust/hdr-bkg.avif') type('image/avif'),
		url('../imgs/illust/hdr-bkg.webp') type('image/webp'),
		url('../imgs/illust/hdr-bkg.jpg') type('image/jpeg')
	);
}
header h2 {
	max-width: 432px;
}

/* クリエイター募集 */
#creator-reg {
	background-color: #000;
	border-radius: 1rem;
	color: #fff;
	display: block;
	font-size: 1.125rem;
	margin: 2rem auto 0 auto;
	padding: 1rem 2rem;
	text-decoration: none;
	transition: background-color .5s;
	width: fit-content;
}
#creator-reg:after {
	content: "　 →";
}
#creator-reg:hover {
	background-color: gray;
	opacity: 1;
}

.wrapper .sect:first-child .sect-content {
	background-image: url(../imgs/illust/game.jpg);
	background-position: 7.5% 100%;
	background-repeat: no-repeat;
	/*height: 574px;*/
	padding-bottom: 400px;
}
#ttl-sosicalnetworkandconsumergame {
	max-width: 916px;
}
#ttl-illustproduction {
	max-width: 435px;
}

@media screen and (min-width: 980px) {
	/* クリエイター募集 */
	header .wrapper div:has( #creator-reg) {
		margin-bottom: calc((500px - 250px) / 3);
	}
	#creator-reg {
		font-size: 1.5rem;
		margin: 2rem 0 0 0;
	}
}

@media screen and (min-width: 1200px) {
	header .wrapper {
		margin: 0 auto;
		max-width: 1200px;
	}
	.wrapper .sect:first-child .sect-content {
		background-position: 50% 0;
		height: 524px;
		padding-bottom: 0;
	}
}