/* CSS Document */

#resultList {
	display: grid;
	grid-gap: 56px;
	margin-bottom: 32px;
}

@media (min-width: 992px) {
	#resultList {
		grid-gap: 80px;
	}
}

#resultList h3 {
	display: grid;
	grid-template-columns: 16px auto;
	align-items: center;
	grid-gap: 8px;
	font-weight: 700;
	font-size: 18px;
}

@media (min-width: 992px) {
	#resultList h3 {
		font-size: 20px;
	}
}

#resultList h3:before {
	content: "";
	aspect-ratio: 1;
	background: #5ab6b6;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3,0h7v7c0,1.66-1.34,3-3,3H0V3C0,1.34,1.34,0,3,0Z"/></svg>') center no-repeat;
	-webkit-mask-size: contain;
}

#resultList section {
	display: grid;
	grid-gap: 24px;
}

.summary {
	display: grid;
	grid-gap: 24px;
	margin-top: -8px;
}

.summary ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	grid-gap: 8px;
}

.summary li {
	display: grid;
	align-items: center;
	min-height: 32px;
	padding: 4px 16px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	color: inherit;
	font-size: 14px;
	table-layout: 0.05em;
	text-decoration: none;
}

.summary dl {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 8px 16px;
	order: -1;
}

.summary dt {
	display: none;
}

.summary dd {
	display: grid;
	grid-template-columns: 16px auto;
	align-items: center;
	grid-gap: 8px;
	margin-right: 24px;
}

.summary dd:before {
	content: "";
	aspect-ratio: 1;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.summary dd:nth-of-type(1):before {
	background: #e8a500;
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 1 26 28"><path d="M26 10.109c0 0.281-0.203 0.547-0.406 0.75l-5.672 5.531 1.344 7.812c0.016 0.109 0.016 0.203 0.016 0.313 0 0.406-0.187 0.781-0.641 0.781-0.219 0-0.438-0.078-0.625-0.187l-7.016-3.687-7.016 3.687c-0.203 0.109-0.406 0.187-0.625 0.187-0.453 0-0.656-0.375-0.656-0.781 0-0.109 0.016-0.203 0.031-0.313l1.344-7.812-5.688-5.531c-0.187-0.203-0.391-0.469-0.391-0.75 0-0.469 0.484-0.656 0.875-0.719l7.844-1.141 3.516-7.109c0.141-0.297 0.406-0.641 0.766-0.641s0.625 0.344 0.766 0.641l3.516 7.109 7.844 1.141c0.375 0.063 0.875 0.25 0.875 0.719z"></path></svg>');
}

.summary dd:nth-of-type(2):before {
	background: #ccc;
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 2 28 28"><path d="M28 14c0 5.531-6.266 10-14 10-0.766 0-1.531-0.047-2.266-0.125-2.047 1.813-4.484 3.094-7.187 3.781-0.562 0.156-1.172 0.266-1.781 0.344-0.344 0.031-0.672-0.219-0.75-0.594v-0.016c-0.078-0.391 0.187-0.625 0.422-0.906 0.984-1.109 2.109-2.047 2.844-4.656-3.219-1.828-5.281-4.656-5.281-7.828 0-5.516 6.266-10 14-10s14 4.469 14 10z"></path></svg>');
}

.plan {
	display: grid;
	grid-gap: 16px;
}

.plan dl {
	position: relative;
	display: grid;
	grid-gap: 8px 24px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
}

@media (min-width: 576px) {
	.plan dl {
		grid-template-columns: min(30vw, 240px) 1fr;
		grid-template-rows: auto 1fr;
	}

	.plan dl:not(:has(img)):before {
		grid-column: 1;
		grid-row: 1 / 4;
	}
}

.plan dl:not(:has(img)):before {
	content: "";
	order: -1;
	aspect-ratio: 1 / 0.667;
	background: var(--dummy);
	background-size: 50% auto;
	border-radius: 4px;
}

.plan dt {
	color: #5ab6b6;
	font-weight: 700;
}

@media (min-width: 992px) {
	.plan dt {
		margin-top: 4px;
		font-size: 18px;
	}
}

.plan dt a {
	color: inherit;
	text-decoration: none;
}

.plan dd {
	font-size: 14px;
}

@media (min-width: 992px) {
	.plan dd {
		font-size: 16px;
	}
}

.plan dd:empty {
	display: none;
}

.plan dd:has(img) {
	order: -1;
	align-self: start;
}

@media (min-width: 576px) {
	.plan dd:has(img) {
		grid-column: 1;
		grid-row: 1 / 4;
	}
}

.plan dd:has(a) {
	display: contents;
}

.plan dd img {
	aspect-ratio: 1 / 0.667;
	object-fit: cover;
	border-radius: 4px;
}

.plan dd img[src="[url]"] {
	display: block;
	background: #ccc;
}

.plan dd a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
}

.more {
	justify-self: center;
}

.more a {
	display: grid;
	grid-template-columns: 1fr 24px;
	grid-gap: 8px;
	align-items: center;
	min-height: 64px;
	padding: 4px 16px 4px 24px;
	border-radius: 32px;
	border: 1px solid currentColor;
	color: inherit;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.more a:before,
.more a:after {
	grid-column: 2;
	grid-row: 1;
	content: "";
	aspect-ratio: 1;
}

.more a:before {
	background: #5ab6b6;
	border-radius: 100%;
}

.more a: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;
}