/* CSS Document */

article{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: 32px 0 64px 0;
	@media (min-width: 992px) {
		& section{
			margin-left: calc(50% + 24px);
			&:nth-of-type(1){
				grid-row: 3;
			}
			&:nth-of-type(2){
				grid-row: 4;
			}
			&:nth-of-type(3){
				grid-row: 5;
			}
		}
		& figure{
			grid-row: 3 / 7;
			margin-right: calc(50% + 24px);
		}
	}
	@media (min-width: 1200px) {
		margin: 72px 0 96px 0;
	}
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		position: relative;
		padding: 4px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 32px;
		font-family: fot-tsukubrdgothic-std, sans-serif;
		@media (min-width: 1200px) {
			font-size: 48px;
		}
		&:before,
		&:after{
			content: "";
			position: absolute;
			background: currentColor;
		}
		&:before{
			top: 0;
			right: 0;
			aspect-ratio: 22 / 28;
			width: 22px;
			transform: translateX(100%);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.98 28.31"><path d="M7.32.2c-.64-.39-1.47-.19-1.86.45-.87,1.42-1.74,2.84-2.6,4.26C1.96,6.36-.61,9.16.13,10.98c.23.56.53.77.88.74,1.35-.12,3.31-4.03,3.73-4.73,1.01-1.65,2.02-3.29,3.02-4.94.39-.64.19-1.47-.45-1.86ZM20.56,24.61c-1.92.1-3.35.28-4.73.45-1.52.19-4.26-.3-5.44.93-.87.91-.35,1.95.85,2.23.04,0,.07.02.11.02,1.41.27,3.42-.32,4.82-.5,1.39-.18,2.71-.34,4.53-.43.75-.04,1.32-.67,1.28-1.42s-.66-1.32-1.42-1.28ZM11.97,16.33c2.13-.94,4.19-2.05,6.28-3.07.67-.33.95-1.14.62-1.81-.33-.67-1.14-.94-1.81-.62-1.36.66-2.72,1.33-4.08,1.99-1.08.53-3.1.91-3.65,2.13-.61,1.37.19,1.75,1.15,1.72.52-.02,1.09-.16,1.49-.34Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
		&:after{
			left: 0;
			bottom: 0;
			width: 100%;
			height: 3px;
			border-radius: 3px;
		}
	}
	& h2+div{
		margin: 32px 0;
		font-weight: 700;
		font-size: 15px;
		text-align: center;
		letter-spacing: 0.1em;
		@media (min-width: 1200px) {
			margin-top: 56px;
		}
		&:has(wbr){
			word-break: keep-all;
		}
	}
	& section{
		order: 1;
		margin-top: 32px;
		@media (min-width: 1200px) {
			margin-top: 48px;
		}
		&:nth-of-type(1){
			color: #de5252;
			& h3:after {
				border-bottom: solid 2px #de5252;
				border-right: solid 2px #de5252;
			}
		}
		&:nth-of-type(2){
			color: #1ead2b;
			& h3:after {
				border-bottom: solid 2px #1ead2b;
				border-right: solid 2px #1ead2b;
			}
		}
		&:nth-of-type(3){
			color: #2baacc;
			& h3:after {
				border-bottom: solid 2px #2baacc;
				border-right: solid 2px #2baacc;
			}
		}
		& h3{
			font-weight: 700;
			font-size: 18px;
			letter-spacing: 0.1em;
			z-index: 1;
			cursor: pointer;
			position: relative;
			display: inline-block;
			padding-right: 20px;
			@media (min-width: 1200px) {
				font-size: 20px;
			}
			&:after {
				content: '';
				width: 8px;
				height: 8px;
				border: 0;
				transform: rotate(45deg);
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
		& h3+div{
			margin-top: 16px;
		}
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(50%, 6.6em), 1fr));
			grid-gap: 8px 16px;
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			grid-template-columns: 1fr 10px;
			align-items: center;
			min-height: 24px;
			padding: 0 12px;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: 12px;
			color: inherit;
			font-weight: 500;
			font-size: 14px;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				background: currentColor;
				transform: translateX(4px);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10;"><polyline points="3.25 9 7 5.13 3 1"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
			}
			&[href="[url]"]{
				background: #f2f2f2;
				color: #ccc;
				pointer-events: none;
			}
		}
	}
	& figure{
		margin-top: 32px;
		@media (min-width: 1200px) {
			margin-top: 48px;
		}
		& svg{
			width: 100%;
			height: auto;
		}
		.disabled{
			fill: #ddd;
		}
	}
}