/* CSS Document */

#searchMenu{
	#searchButton{
		grid-template-columns: 1fr;
		@media (max-width: 991.98px) {
			justify-content: center;
			& button{
				&.doSearch{
					display: grid;
					grid-template-columns: 32px 1fr;
					align-items: center;
					aspect-ratio: unset;
					width: unset;
					min-width: min(80%, 160px);
					min-height: 48px;
					padding: 4px 24px;
					border-radius: 24px;
					font-weight: 700;
					font-size: 16px;
					text-align: center;
					&:after{
						order: -1;
						position: static;
						aspect-ratio: 1;
						width: 20px;
						height: unset;
					}
				}
			}
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: 1fr 1fr auto !important;
	}
}

#resultNone{
	margin: clamp(120px, calc(160 / 1200 * 100dvw), 120px) 0;
	text-align: center;
}

.articleList{
	display: grid;
	grid-gap: clamp(80px, calc(120 / 1200 * 100dvw), 120px);
	& section{
		display: grid;
		grid-gap: 8px;
	}
	& h3{
		font-weight: 700;
		font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.05em;
	}
}

.summary{
	display: contents;
	& p{
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		&:empty{
			display: none;
		}
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
		margin-top: 8px;
	}
	& li{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 0 1em;
		border-radius: 16px;
		border: 2px solid currentColor;
		font-weight: 700;
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
		letter-spacing: 0.05em;
	}
	& dl{
		display: flex;
		column-gap: 8px;
	}
	& dt{
		aspect-ratio: 1;
		width: 16px;
		font-size: 0;
		&:nth-of-type(1){
			background: #e8a500;
			-webkit-mask: 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>') no-repeat center / contain;
		}
		&:nth-of-type(2){
			background: #ccc;
			-webkit-mask: 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>') no-repeat center / contain;
		}
	}
	& dd{
		&:not(:last-child){
			margin-right: 16px;
		}
	}
}

.plan{
	margin-top: 16px;
	border-bottom: 1px solid var(--color-border);
	& dl{
		position: relative;
		display: grid;
		grid-gap: 8px 24px;
		padding: clamp(16px, calc(24 / 1200* 100vw), 24px) 0;
		border-top: 1px solid var(--color-border);
		@media (min-width: 576px) {
			grid-template-columns: clamp(240px, calc(320 / 1200* 100vw), 320px) 1fr;
			grid-template-rows: auto 1fr;
			&:not(:has(img)):before{
				grid-column: 1;
				grid-row: 1 / 4;
			}
		}
		&:not(:has(img)):before {
			content: "";
			order: -1;
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 4px;
		}
	}
	& dt{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& dd{
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		&:empty{
			display: none;
		}
		&:has(img){
			order: -1;
			align-self: start;
			@media (min-width: 576px) {
				grid-column: 1;
				grid-row: 1 / 4;
			}
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 16px;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

.more{
	display: flex;
	justify-content: center;
	margin-top: 16px;
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-height: 48px;
		padding: 0.25em 1.5em;
		background: var(--color-theme);
		border-radius: 24px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-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-linejoin: round;"><line x1=".5" y1="5" x2="9.5" y2="5"/><polyline points="7 2.5 9.5 5 7 7.5"/></svg>') no-repeat center / contain;
		}
	}
}