/**
 * #page
 */

.p-lower {
	color: #111;
}

.p-lower__body {
	padding: 80px 20px 100px;
	color: #111;

	@media (max-width: 768px) {
		padding: 40px 20px 60px;
	}
}

.p-lower__lead {
	max-width: 40em;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.8;
}

.p-page-content {
	padding-bottom: 100px;

	@media (max-width: 768px) {
		padding-bottom: 0;
	}
}

.p-page-content__article {
	--pd-inline: 50px;
	--pd-inline-sp: 15px;

	--pd-top: 60px;
	--pd-top-sp: 30px;

	padding: var(--pd-top) var(--pd-inline);

	@media (max-width: 768px) {
		padding: var(--pd-top-sp) var(--pd-inline-sp) 50px;
	}
}

.p-page-content__thumb {
	margin: calc(var(--pd-top) * -1) calc(var(--pd-inline) * -1) 30px;

	img {
		display: block;
		width: 100%;
		height: auto;
	}

	@media (max-width: 768px) {
		margin-top: calc(var(--pd-top-sp) * -1);
		margin-inline: calc(var(--pd-inline-sp) * -1);
		margin-bottom: 30px;
	}
}

.p-page-header {
	padding: 50px 20px 60px;

	@media (max-width: 768px) {
		padding: 20px 10px 30px;
	}
}

.theme-edance-hub .p-page-header .c-sec-head--glow .c-sec-head__en {
	border-bottom: 0;
	background-image: var(--neon-grd);
	background-size: 100% 10px;
	background-position: left bottom;
	background-repeat: no-repeat;

	@media (max-width: 768px) {
		border-bottom: 0;
		background-size: 100% 5px;
	}
}

.p-lower-frame {
	position: relative;
	width: calc(100% - 60px);
	max-width: 1440px;
	margin: 0 auto 80px;
	background-color: rgb(255 255 255 / 50%);

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		padding: 2px;
		background-image: var(--neon-grd);
		pointer-events: none;
		-webkit-mask:
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		/* Keep standard masks last: -webkit-mask resets mask-composite in Firefox. */
		mask:
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		mask-composite: exclude;
	}

	> * {
		position: relative;
		z-index: 1;
	}

	@media (max-width: 768px) {
		width: calc(100% - 40px);
		margin-bottom: 40px;
	}
}

/* 内側に下余白がないページだけ付ける。RELATED があるときは p-related を付ける。 */
.p-lower-frame--pad {
	padding-bottom: 80px;

	@media (max-width: 768px) {
		padding-bottom: 40px;
	}
}

.p-main:has(.p-related) .p-lower-frame {
	margin-bottom: 0;
}