/* CSS Document */

#resultList{
	display: grid;
	grid-gap: clamp(48px, 9.6vw, 64px);
	}
	#resultList h3{
		display: grid;
		grid-template-columns: 3px auto;
		grid-gap: 10px;
		font-family: var(--font-min);
		font-size: clamp(18px, 3.6vw, 24px);
		font-weight: 500;
		line-height: 1.65;
		}
		#resultList h3:before{
			content: "";
			margin: 0.3em 0;
			background: var(--color-point);
			transform: translateY(0.1em);
			}
	#resultList h3+div{
		margin-top: clamp(24px, 5.4vw, 36px);
		}
	#resultList > div{
		display: grid;
		place-items: center;
		padding: 10vw 0;
		}
	@media (min-width: 576px) {
		#resultList h3{
			grid-template-columns: 4px auto;
			grid-gap: 0 16px;
			}
		}

.summary{
	display: grid;
	}
	.summary ul{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		grid-gap: 8px;
		margin-top: clamp(16px, 3.6vw, 24px);
		}
	.summary li{
		display: grid;
		grid-template-columns: auto auto;
		place-items: center;
		min-height: 40px;
		padding: 8px 16px;
		border: 1px solid var(--color-border);
		color: inherit;
		}
	.summary dl{
		display: grid;
		justify-content: start;
		grid-gap: 8px;
		order: -1;
		}
	.summary dl :where(dt, dd){
		grid-row: 1;
		margin-bottom: clamp(12px, 2.4vw, 16px);
		}
	.summary dt{
		width: 16px;
		height: 16px;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: contain;
		background: currentColor;
		overflow: hidden;
		}
		.summary dt:nth-of-type(1){
			-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>');
			color: #e8a500;
			}
		.summary dt:nth-of-type(2){
			-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>');
			color: #ccc;
			}
	.summary dd{
		margin-right: 24px;
		}

.plan{
	display: grid;
	grid-gap: clamp(16px, 3.6vw, 24px);
	margin-top: clamp(24px, 5.4vw, 36px);
	}
	.plan dl{
		position: relative;
		display: grid;
		grid-gap: 8px 24px;
		padding: clamp(12px, 2.4vw, 16px);
		border: 1px solid var(--color-border);
		line-height: 1.65;
		}
	.plan dt{
		color: var(--color-point);
		font-size: clamp(16px, 3vw, 20px);
		font-weight: 700;
		}
		.plan dt a{
			color: inherit;
			text-decoration: none;
			}
	.plan dt+dd{
		position: relative;
		align-self: start;
		overflow: hidden;
		}
		.plan dt+dd:empty{
			background: var(--dummy);
			aspect-ratio: 1 / 0.667;
			}
	.plan dt+dd+dd{
		font-size: clamp(12px, 2.1vw, 14px);
		}
	.plan dd{}
		.plan dd img{
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			}
	.plan dl+div{
		justify-self: center;
		}
	@media (min-width: 576px) {
		.plan dl{
			grid-template-columns: 240px auto;
			}
		.plan dt+dd{
			grid-column: 1;
			grid-row: 1 / 4;
			}
		}

.button{
	display: grid;
	grid-template-columns: auto 18px;
	grid-gap: 16px;
	align-items: center;
	width: min(100%, 320px);
	min-height: 50px;
	margin: 0 auto;
	padding: 4px 16px;
	background: #fff;
	border: 1px solid var(--color-border);
	color: inherit;
	text-align: center;
	line-height: 1.65;
	text-decoration: none;
	}
	.button:after{
		content: "";
		aspect-ratio: 1;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.16 15.71"><polygon points="9.31 0 8.6 .71 15.25 7.35 0 7.35 0 8.35 15.25 8.35 8.6 15 9.31 15.71 17.16 7.85 9.31 0"/></svg>') center no-repeat;
		-webkit-mask-size: 17.16px 15.71px;
		background: currentColor;
		}