/* CSS Document */

main{
	background: var(--color-bg);
}

article{
	& hgroup{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-row-gap: 16px;
		&{
			&:before{
				content: "";
				grid-column: 1 / 4;
				grid-row: 1;
				background: white;
				margin-bottom: -8px;
			}
			& h2{
				grid-column: 2;
				grid-row: 1;
				margin-top: 24px;
			}
			& p{
				grid-column: 2;
				grid-row: 2;
				justify-self: center;
			}
		}
		& h2{
			font-weight: 900;
			font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			letter-spacing: 0.15em;
			text-align: center;
			text-wrap: balance;
		}
		& p{
			font-weight: 600;
			font-size: clamp(20px, calc(28 / 768 * 100dvw), 28px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			text-align: center;
			text-wrap: balance;
			& span{
				display: contents;
				color: var(--color-theme);
			}
		}
	}
}

#onsen{
	&{
		display: grid;
		#lead{
			justify-self: center;
			width: var(--wrap);
			@media (max-width: 991.98px) {
				margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
			}
		}
		#list{
			margin-top: clamp(32px, calc(56 / 768 * 100dvw), 56px);
			background: white;
			@media (max-width: 991.98px) {
				padding-bottom: clamp(64px, calc(104 / 768 * 100dvw), 104px);
			}
			@media (min-width: 992px) {
				justify-self: center;
				width: min(100%, 1120px);
				margin-bottom: clamp(64px, calc(104 / 768 * 100dvw), 104px);
				border-radius: 40px;
			}
		}
	}
}

#lead{
	font-weight: 600;
	font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	letter-spacing: 0.05em;
	line-height: 2;
	&{
		display: grid;
		grid-gap: 24px 40px;
		@media (min-width: 992px) {
			grid-template-columns: 1fr 1.3fr;
			align-items: center;
		}
	}
}

#list{
	& section{
		padding: clamp(32px, calc(48 / 768 * 100dvw), 48px) clamp(24px, calc(48 / 768 * 100dvw), 48px);
		&:nth-child(n+2){
			border-top: 1px solid color-mix(in srgb, transparent, black 15%);
		}
		&{
			display: grid;
			grid-gap: 24px 48px;
			& h3{
				justify-self: start;
			}
			& h3+div+div{
				align-self: start;
			}
			& figure{
				grid-column: 1;
				grid-row: 2;
			}
			@media (min-width: 992px) {
				grid-template-columns: 1fr 1fr;
				grid-template-rows: auto auto 1fr;
				& h3+div,
				& h3+div+div{
					margin-left: 16px;
				}
				& h3+div+div{
					margin-top: 16px;
				}
				& figure{
					grid-column: 1;
					grid-row: 1 / 4;
					align-self: center;
				}
			}
		}
	}
	& h3{
		display: grid;
		align-items: center;
		min-height: 2.4em;
		padding: 0.25em 1.25em;
		border: 3px solid currentColor;
		border-radius: 1.2em;
		font-weight: 900;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.2em;
		[data-area="1"] &{
			border-color: #c1c42f;
		}
		[data-area="2"] &{
			border-color: #67afe1;
		}
		[data-area="3"] &{
			border-color: #81c2c2;
		}
		[data-area="4"] &{
			border-color: #555ea9;
		}
		[data-area="5"] &{
			border-color: #b078b0;
		}
		[data-area="6"] &{
			border-color: #e57897;
		}
		[data-area="7"] &{
			border-color: #ca7b5e;
		}
	}
	& h3+div{
		&{
			& dl{
				margin-top: 24px;
			}
		}
		& p{
			letter-spacing: 0.025em;
			line-height: 2;
		}
		& dl{
			letter-spacing: 0.025em;
			&{
				@media (max-width: 575.98px) {
					& dt{
						&:nth-child(n+2){
							margin-top: 16px;
						}
					}
				}
				@media (min-width: 576px) {
					display: grid;
					grid-template-columns: 9em 1fr;
					grid-gap: 16px 8px;
				}
			}
			& dt{
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: baseline;
				column-gap: 8px;
				font-weight: 800;
				&:after{
					content: "";
					border-top: 4px dotted currentColor;
					min-width: 1em;
					transform: translateY(-0.25em);
				}
			}
			& dd{
				font-size: 14px;
			}
		}
	}
	& h3+div+div{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			min-width: min(90%, 288px);
			min-height: 40px;
			padding: 8px 20px;
			border: 1px solid currentColor;
			border-radius: 20px;
			color: inherit;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 1em;
				background: currentColor;
				transform: translateX(8px);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="5 3 9 7 5 11"/></svg>') no-repeat center / contain;
			}
		}
	}
}