.categories-list {
	display: grid;
}
.categories-link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1em;
	background-color: #156A9A;
	color: #fff;
	font-weight: bold;
	&::after {
		content: "";
		inline-size: 0.7em;
		aspect-ratio: 1;
		border-width: 1.5px;
		border-style: solid solid none none;
		rotate: 135deg;
		translate: 0 -25%;
	}
}
@media (width < 768px) {
	.categories-nav {
		padding-block-start: 40px;
	}
	.categories-list {
		gap: 5px;
	}
	.categories-link {
		block-size: 56px;
		padding-inline-start: 15px;
		padding-inline-end: 20px;
		line-height: 1.3;
		letter-spacing: 0.15em;
	}
}
@media (width >= 768px) {
	.categories-nav {
		padding-block-start: 30px;
	}
	.categories-list {
		grid-template-columns: repeat(4, 1fr);
		gap: 5px;
	}
	.categories-link {
		block-size: 88px;
		padding-inline: 15px;
		font-size: 18px;
		line-height: 1.5;
		text-align: center;
		transition: background-color 0.2s;
		&:hover {
			background-color: #105075;
		}
	}
}


/* details展開アニメーション用 */
html {
	interpolate-size: allow-keywords;
}


.category-h2 {
	font-weight: bold;
	color: #156A9A;
	border-block-end: 1px solid #4E4E4E;
}
.qa-item {
	border-block-end: 1px solid #4E4E4E;
	display: grid;
	grid-template-columns: auto 1fr;
	&::before {
		content: "";
		aspect-ratio: 1;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNDIiIGhlaWdodD0iNDIuMjI2IiB2aWV3Qm94PSIwIDAgNDIgNDIuMjI2Ij48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGQ9Ik0yMC43MjUsMGEyMC43MjUsMjAuNzI1LDAsMCwwLDAsNDEuNDUxSDQxLjQ1MVYyMC43MjVBMjAuNzI2LDIwLjcyNiwwLDAsMCwyMC43MjUsMFoiIGZpbGw9Im5vbmUiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCBpZD0iYiIgeTE9IjEiIHgyPSIwLjAwNyIgeTI9IjEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmYWFmNjYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmOTk5M2EiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iYyI+PHJlY3Qgd2lkdGg9IjQyIiBoZWlnaHQ9IjQyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0wLjI4NykiIGZpbGw9Im5vbmUiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDAgLTIxMzcpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MCAyMTM3Ljc3NCkiIGNsaXAtcGF0aD0idXJsKCNhKSI+PHJlY3Qgd2lkdGg9IjQyIiBoZWlnaHQ9IjQyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0wLjc3NikiIGZpbGw9InVybCgjYikiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAgMjEzNy4yODcpIiBjbGlwLXBhdGg9InVybCgjYykiPjxwYXRoIGQ9Ik01OC4yMjUsNDcuODYzYTEwLjM2MSwxMC4zNjEsMCwxLDAtNC4xNTcsOC4zbDIuMDYzLDIuMDYzLDIuMDk0LTIuMDk0LTIuMDYzLTIuMDYzYTEwLjMxOCwxMC4zMTgsMCwwLDAsMi4wNjMtNi4yMDZtLTEwLjM2Myw3LjRhNy40LDcuNCwwLDEsMSw2LjE3NS0zLjMyMWwtMS45MzItMS45MzItMi4wOTQsMi4wOTQsMS45MzIsMS45MzJhNy4zNjYsNy4zNjYsMCwwLDEtNC4wODEsMS4yMjciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNy4xMzcgLTI2LjY0OSkiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==");
		background-size: contain;
		background-repeat: no-repeat;
	}
}
.qa-details {
	overflow: clip;
	&::details-content {
		transition-property: height, content-visibility;
		transition-duration: 500ms;
		transition-behavior: allow-discrete;
		height: 0;
	}
	&[open]::details-content {
		height: auto;
	}
}
.qa-summary {
	display: grid;
	grid-template-columns: 1fr auto;
	cursor: pointer;
	font-weight: bold;
	color: #156A9A;
	&::after {
		content: "＋";
		color: #4E4E4E;
	}
}
:open > .qa-summary::after {
	content: "－";
}
.qa-content {
	display: grid;
	grid-template-columns: auto 1fr;
	&::before {
		content: "";
		aspect-ratio: 1;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNDMiIGhlaWdodD0iNDEuNjE2IiB2aWV3Qm94PSIwIDAgNDMgNDEuNjE2Ij48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGQ9Ik0yMC44MjQsMGEyMC44MDgsMjAuODA4LDAsMSwwLDAsNDEuNjE2SDQxLjY0OFYyMC44MDhBMjAuODE2LDIwLjgxNiwwLDAsMCwyMC44MjQsMFoiIGZpbGw9Im5vbmUiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCBpZD0iYiIgeTE9IjEiIHgyPSIwLjAwNyIgeTI9IjEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM0OWE0ZTIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyMDZiYzgiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iYyI+PHJlY3Qgd2lkdGg9IjQxLjczNyIgaGVpZ2h0PSI0MC4wODQiIGZpbGw9Im5vbmUiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAwIC0yMjIwKSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwIDIyMjApIiBjbGlwLXBhdGg9InVybCgjYSkiPjxyZWN0IHdpZHRoPSI0MS43NDMiIGhlaWdodD0iNDEuNzExIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjI4MyAtMC41MykiIGZpbGw9InVybCgjYikiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAxLjI2NCAyMjIwLjc2NykiIGNsaXAtcGF0aD0idXJsKCNjKSI+PHBhdGggZD0iTTU0LjgyMSw1Ny40MjdoMy41bC04LjM4LTE5LjUzNEg0NS44OEwzNy41LDU3LjQyN0g0MUw0My4yODUsNTIuMWg5LjI1MVpNNDQuNyw0OC44bDMuMjExLTcuNDg0TDUxLjEyMSw0OC44WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3LjM3MiAtMjguNTYzKSIgZmlsbD0iI2ZmZiIvPjwvZz48L2c+PC9zdmc+");
		background-size: contain;
		background-repeat: no-repeat;
	}
	&.-pre {
		white-space: pre-wrap;
	}
}
@media (width < 768px) {
	.category-section {
		padding-block-start: 80px;
	}
	.category-h2 {
		font-size: 28px;
		line-height: 1.3;
		letter-spacing: 0.15em;
		padding-block-end: 15px;
	}
	.qa-item {
		padding-inline-end: 12px;
		margin-block-start: 25px;
		padding-block-end: 25px;
		gap: 10px;
		&::before {
			inline-size: 21px;
		}
	}
	.qa-summary {
		gap: 0.8em;
		font-size: 20px;
		line-height: 1.4;
		&::after {
			font-size: 115%;
		}
	}
	.qa-content {
		margin-inline-end: 1em;
		padding-block-start: 15px;
		gap: 10px;
		line-height: 1.6;
		&::before {
			inline-size: 24px;
		}
	}
}
@media (width >= 768px) {
	.category-section {
		padding-block-start: 100px;
	}
	.category-h2 {
		font-size: 36px;
		line-height: 1.3;
		letter-spacing: 0.15em;
		padding-block-end: 20px;
		padding-inline: 42px;
	}
	.qa-item {
		padding-inline: 42px;
		margin-block-start: 19px;
		padding-block-end: 17px;
		gap: 10px;
		&::before {
			inline-size: 24px;
		}
	}
	.qa-summary {
		gap: 2em;
		font-size: 20px;
		line-height: 1.4;
		&::after {
			font-size: 130%;
		}
	}
	.qa-content {
		margin: 0px 6em 0px 30px;
		margin-inline-start: 30px;
		margin-inline-end: 6em;
		padding-block-start: 25px;
		padding-block-end: 40px;
		gap: 10px;
		line-height: 2;
		&::before {
			inline-size: 24px;
		}
	}
}