@charset "UTF-8";

.p-menu {
	margin-top: var(--section-gap);
}

.p-menu__heading {
	margin-bottom: 1.25em;
}

.p-menu__main {
	container-type: inline-size;
}

@media (min-width: 1025px) {
	.p-menu__main {
		padding-inline: 2em;
	}
}

.p-menu__list {
	--column-count: 3;
	--column-gap: min(3cqw, 1.75em);
	--row-gap: min(3cqw, 1.5em);
}

@container (width <=1000px) {
	.p-menu__list {
		--column-count: 3;
	}
}

@container (width <=800px) {
	.p-menu__list {
		--column-count: 2;
	}
}

.p-menu__item__link {
	width: 100%;
	height: 100%;
}

.p-subject-section {
	margin-top: var(--section-gap-lg);
}

.p-subject-section__inner {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--section-gap-lg);
}

.p-subject__main {
	--column-gap: 5.5cqw;
	position: relative;
}

.p-subject__header {
	position: relative;
}

.p-subject__labels {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-flow: column wrap;
	max-height: 100%;
	padding: 0.5em;
	font-size: var(--font-size-xl);
	line-height: 1;
	color: var(--color-text-contrast);
	letter-spacing: 0.2em;
	background-color: var(--color-primary);
	transform: translateX(-0.5em) translateY(-0.5em);
}

.p-subject__labels__item {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.p-subject__labels__item:nth-child(n+2)::before {
	content: "・";
}

.p-subject__body {
	position: relative;
}

.p-subject__heading {
	margin-bottom: 0.85em;
}

@container (width > 750px) {
	.p-subject__heading {
		margin-top: 0.5em;
		margin-left: calc((var(--column-gap) + 0.4em) * -1);
		text-shadow: 0 0 2px #fff, 1px 1px 1.5px #fff, -1px -1px 1.5px #fff, 1px -1px 1.5px #fff, -1px 1px 1.5px #fff;
	}
}

.p-subject__overview {
	display: flex;
	flex-direction: column;
	row-gap: 0.6em;
	margin-bottom: 1em;
	font-size: clamp(1.8rem, 4vw, var(--font-size-xl) * 1.1);
	line-height: 1.5;
}

.p-subject__overview__item > span {
	display: inline;
	padding: 0 0.5em 0.1em;
	background-color: color-mix(in srgb, var(--color-primary) 17%, #fff);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@supports not (background-color: color-mix(in srgb, #000, #fff)) {
	.p-subject__overview__item > span {
		background-color: rgba(var(--color-primary-rgb), 17%);
	}
}

.p-subject__note-list {
	margin-top: 1.5em;
	font-size: 0.9em;
}

.p-subject__buttons {
	display: flex;
	flex-direction: column;
	gap: 1em;
	align-items: flex-end;
	margin-top: min(3em, 10cqw);
}

@media (max-width: 525px) {
	.p-subject__buttons {
		align-items: center;
	}
}

.p-subject__column-list {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--section-gap-sm);
	padding: max(3cqw, 2em) max(4cqw, 1.5em);
	margin-inline: calc(var(--container-padding) / -2);
	margin-top: var(--section-gap-sm);
	background-color: var(--color-secondary);
	border-radius: var(--radius-md);
}

.p-column__heading {
	width: -moz-fit-content;
	width: fit-content;
	margin-inline: auto;
	margin-bottom: 1em;
	font-size: clamp(1.8rem, 4.6vw, 2.7rem);
}

.p-column__body {
	--row-gap: 1.5em;
}

.p-collab {
	position: relative;
	z-index: 0;
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap-lg);
	margin-top: var(--section-gap);
	margin-bottom: calc(var(--section-gap) / -1);
}

.p-collab__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to top, transparent, #000 var(--section-gap-lg));
	mask-image: linear-gradient(to top, transparent, #000 var(--section-gap-lg));
}

.p-collab__heading {
	--max-size: 3.5rem;
	margin-bottom: 1em;
}

.p-collab__intro {
	font-size: var(--font-size-lg);
}

.p-collab__body {
	container-type: inline-size;
	margin-top: 2.5em;
}

.p-collab__list {
	--column-count: 3;
	--column-gap: max(1.5em, 3cqw);
	--row-gap: max(1.5em, 3cqw);
}

@container (width <=840px) {
	.p-collab__list {
		--column-count: 2;
	}
}

@container (width <=560px) {
	.p-collab__list {
		--column-count: 1;
		justify-content: center;
	}
}

.p-collab__item {
	max-width: 400px;
}

.p-collab__banner {
	display: block;
	width: 100%;
}

.p-collab__banner:link {
	transition: opacity 0.2s;
}

.p-collab__banner:link:hover {
	opacity: 0.7;
}

.p-collab__banner > img {
	width: 100%;
}