/* CSS Document */

#life{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: 32px 0;
	@media (min-width: 1200px) {
		margin: 72px 0 48px 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-top: 32px;
		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;
		}
	}
}

#lifeList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	grid-gap: 40px 16px;
	margin-top: 32px;
	@media (min-width: 576px) {
		column-gap: 32px;
	}
	@media (min-width: 968px) {
		& section:nth-child(-n+2){
			grid-column: 1 / 4;
			grid-row: 1;
			width: calc(50% - 28px);
			margin-bottom: 16px;
			& h3{
				margin: 8px 0 4px 0;
				font-size: 18px;
			}
			& p{
				font-size: 14px;
			}
		}
		& section:nth-child(2){
			justify-self: end;
		}
	}
	@media (min-width: 1200px) {
		grid-gap: 48px;
		margin-top: 56px;
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
			border-radius: 16px;
			background: var(--dummy);
			background-size: cover;
		}
		&>div{
			display: contents;
		}
		& h3{
			font-weight: 900;
			letter-spacing: 0.025em;
		}
		& p{
			font-size: 12px;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			& img{
				aspect-ratio: 1 / 0.667;
				border-radius: 16px;
				object-fit: cover;
			}
		}
	}
}

#counter{
	position: relative;
	display: grid;
	grid-gap: 16px 40px;
	width: var(--wrap);
	margin: 48px auto 64px auto;
	padding: 24px;
	border: 1px solid var(--color-theme);
	border-radius: 32px;
	@media (min-width: 768px) {
		grid-template-rows: auto 1fr;
		margin-top: 64px;
		&:has(figure){
			grid-template-columns: 1fr auto;
		}
	}
	@media (min-width: 1200px) {
		grid-column-gap: 48px;
		margin: 80px auto 96px auto;
		padding: 32px 48px;
		&:has(figure){
			padding-right: 32px;
		}
	}
	& h2{
		display: grid;
		grid-row-gap: 8px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 20px;
		letter-spacing: 0.1em;
		z-index: 1;
		@media (min-width: 1200px) {
			font-size: 24px;
		}
		&:after{
			content: "";
			height: 1px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 1" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 1px;"><line x1="0.5" y1="0.5" x2="2.5" y2="0.5"/></svg>') center left repeat-x;
			-webkit-mask-size: contain;
		}
	}
	& h2+div+div{
		display: grid;
		margin-top: 16px;
		a{
			justify-self: center;
			display: grid;
			grid-template-columns: 1fr 20px;
			grid-gap: 8px;
			align-items: center;
			width: min(100%, 280px);
			min-height: 48px;
			padding: 4px 16px 4px 24px;
			border-radius: 24px;
			border: 1px solid currentColor;
			color: inherit;
			font-weight: 500;
			font-size: 14px;
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				grid-column: 2;
				grid-row: 1;
				content: "";
				aspect-ratio: 1;
			}
			&:before{
				background: var(--color-theme);
				border-radius: 100%;
			}
			&:after{
				background: #fff;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.81,11.4l-4.38-4.38c-.33-.33-.86-.33-1.19,0-.33.33-.33.86,0,1.19l2.79,2.79H6.93c-.55,0-.99.45-.99.99s.44.99.99.99h8.1l-2.79,2.79c-.33.33-.33.86,0,1.19.16.16.38.25.6.25s.43-.08.6-.25l4.38-4.38c.33-.33.33-.86,0-1.19Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
			}
		}
	}
	& figure{
		grid-row: 2;
		z-index: 1;
		@media (min-width: 768px) {
			grid-column: 2;
			grid-row: 1 / 4;
			width: min(30vw, 360px);
		}
		& img{
			aspect-ratio: 16 / 9;
			object-fit: cover;
			border-radius: 16px;
			margin: 20px 0;
		}
	}
}