/* CSS Document */

#article{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(48px, 9.6vw, 64px) 0;
	}
	#article > *{
		grid-column: 2;
		}
	#article h2{
		display: grid;
		grid-template-columns: 1.5em auto 1.5em;
		grid-gap: 1em;
		align-items: center;
		justify-content: center;
		font-size: clamp(28px, 4.8vw, 32px);
		font-family: "fot-tsukuardgothic-std", sans-serif;
		line-height: 1.65;
		text-align: center;
		}
		#article h2:before,
		#article h2:after{
			content: "";
			justify-self: center;
			width: 2px;
			height: 1.5em;
			background: var(--color-theme);
			border-radius: 2px;
			transform-origin: center center;
			}
		#article h2:before{
			transform: rotate(-45deg) translateY(10%);
			}
		#article h2:after{
			transform: rotate(45deg) translateY(10%);
			}
		#article h2 span{
			display: contents;
			}
	#article h2+div{
		display: grid;
		grid-gap: 32px 24px;
		margin-top: clamp(24px, 4.8vw, 32px);
		}
	#article h2+div+div{
		display: flex;
		justify-content: center;
		margin-top: clamp(32px, 7.2vw, 48px);
		}
	#article dl{
		position: relative;
		display: grid;
		grid-gap: 16px;
		}
	#article dt{
		font-weight: bold;
		line-height: 1.65;
		}
	#article dt+dd{
		grid-row: 1;
		}
	#article dd{}
		#article dd img{
			width: 100%;
			height: 100%;
			background: var(--color-theme);
			border-radius: 16px;
			aspect-ratio: 1 / 0.75;
			object-fit: cover;
			}
		#article dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			}
	#article .button{
		display: grid;
		grid-template-columns: auto 1em;
		align-items: center;
		grid-gap: 8px;
		width: min(100%, 400px);
		min-height: 80px;
		padding: 16px 24px;
		background: var(--color-theme);
		border-radius: 40px;
		color: #fff;
		font-size: 24px;
		font-weight: bold;
		line-height: 1.5;
		text-align: center;
		text-decoration: none;
		}
		#article .button:after{
			content: "";
			width: 1em;
			height: 1em;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m19.96,9.61c-.01-.06-.03-.11-.05-.17-.02-.07-.04-.14-.06-.2-.03-.07-.07-.13-.1-.19-.03-.05-.05-.1-.08-.15-.07-.11-.16-.21-.25-.31L11.41.59c-.78-.78-2.05-.78-2.83,0-.78.78-.78,2.05,0,2.83l4.59,4.59H2c-1.1,0-2,.9-2,2s.9,2,2,2h11.17l-4.59,4.59c-.78.78-.78,2.05,0,2.83.39.39.9.59,1.41.59s1.02-.2,1.41-.59l8-8c.09-.09.18-.2.25-.31.03-.05.05-.1.08-.15.03-.06.07-.12.1-.19.03-.07.04-.13.06-.2.02-.06.04-.11.05-.17.05-.26.05-.52,0-.78Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			}
	@media (max-width: 575.98px) {
		#article dd{}
			#article dd img{
				border-radius: 24px;
				}
		}
	@media (min-width: 576px) {
		#article .button{
			min-height: 64px;
			padding: 4px 24px;
			border-radius: 32px;
			font-size: 20px;
			}
		}
	@media (min-width: 768px) {
		#article h2+div{
			grid-template-columns: repeat(3, 1fr);
			}
		}
	@media (min-width: 1200px) {
		#article h2+div{
			grid-gap: 48px;
			}
		#article dd{}
			#article dd img{
				border-radius:24px;
				}
		}

#search{
	padding: clamp(48px, 9.6vw, 64px) 0;
	}
	#search h2{
		display: none;
		}

#searchMenu{}
	@media (max-width: 991.98px) {
		#searchMenu{
			display: grid;
			grid-gap: 16px;
			}
		#searchMenu #searchSelect{
			display: contents;
			}
			#searchMenu #searchSelect ul{
				display: contents;
				}
		#searchMenu #searchDetail{
			display: contents;
			}
			#searchMenu #searchDetail section{
				margin-bottom: 16px;
				}
		#searchMenu :where(#searchSelect li, #searchDetail section):nth-of-type(1){
			order: 1;
			}
		#searchMenu :where(#searchSelect li, #searchDetail section):nth-of-type(2){
			order: 2;
			}
		#searchMenu :where(#searchSelect li, #searchDetail section):nth-of-type(3){
			order: 3;
			}
		}

#searchSelect{}
	#searchSelect ul{
		display: grid;
		grid-gap: 16px 24px;
		}
	#searchSelect li{
		display: grid;
		align-items: center;
		height: 40px;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: 20px;
		font-size: 14px;
		font-weight: bold;
		}
		#searchSelect li:not(:last-child){
			grid-template-columns: auto 10px;
			grid-gap: 8px;
			padding: 0 16px;
			text-align: center;
			cursor: pointer;
			}
			#searchSelect li:not(:last-child):after{
				content: "";
				width: 10px;
				height: 6px;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="m9.71.29c-.39-.39-1.02-.39-1.41,0l-3.29,3.29L1.71.29C1.32-.1.68-.1.29.29S-.1,1.32.29,1.71l4,4c.2.2.45.29.71.29s.51-.1.71-.29L9.71,1.71c.39-.39.39-1.02,0-1.41Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				}
			#searchSelect li:not(:last-child).select{
				color: var(--color-theme);
				}
				#searchSelect li:not(:last-child).select:after{
					transform: rotate(180deg);
					}
		#searchSelect li:last-child{
			grid-template-columns: auto 40px;
			padding-left: 16px;
			overflow: hidden;
			}
	#searchSelect input{
		padding: 0;
		border: none;
		text-align: left;
		}
	#searchSelect button{
		position: relative;
		padding: 0;
		background: currentColor;
		border-radius: 100%;
		color: inherit;
		aspect-ratio: 1;
		transform: translate(0.5px, -0.5px);
		}
		#searchSelect button:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.62 25.5"><path d="m24.19,22.94l-7.38-7.38c1.37-1.65,2.19-3.76,2.19-6.06C19,4.26,14.74,0,9.5,0S0,4.26,0,9.5s4.26,9.5,9.5,9.5c1.85,0,3.58-.54,5.04-1.46l7.52,7.52c.29.29.68.44,1.06.44s.77-.15,1.06-.44c.59-.59.59-1.54,0-2.12Zm-14.69-6.94c-3.58,0-6.5-2.92-6.5-6.5s2.92-6.5,6.5-6.5,6.5,2.92,6.5,6.5-2.92,6.5-6.5,6.5Z"/></svg>') no-repeat;
			-webkit-mask-position: 75% 75%;
			-webkit-mask-size: 24.62px 25.5px;
			background: #fff;
			}
	@media (min-width: 992px) {
		#searchSelect ul{
			grid-template-columns: 200px 200px 300px;
			justify-content: center;
			}
		}

#searchDetail{
	position: relative;
	}
	#searchDetail section{
		position: relative;
		background: #fff;
		padding: clamp(16px, 3.6vw, 24px);
		border-radius: clamp(16px, 3.6vw, 24px);
		}
	#searchDetail h3{
		display: none;
		}
	#searchDetail ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-gap: 16px 24px;
		margin-right: 24px;
		}
	#searchDetail li{}
		#searchDetail li ul{
			grid-template-columns: 1fr;
			margin: 16px 0 0 24px;
			}
	#searchDetail .buttonSet{
		display: grid;
		justify-items: center;
		grid-gap: 16px 24px;
		margin-top: clamp(16px, 3.6vw, 24px);
		}
	#searchDetail .doSearch{
		display: grid;
		grid-template-columns: 20px auto;
		grid-gap: 8px;
		align-items: center;
		height: 40px;
		max-width: 360px;
		padding: 0 16px;
		border: 1px solid currentColor;
		border-radius: 20px;
		background: #fff;
		color: var(--color-theme);
		}
		#searchDetail .doSearch:before{
			content: "";
			width: 20px;
			height: 20px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.62 25.5"><path d="m24.19,22.94l-7.38-7.38c1.37-1.65,2.19-3.76,2.19-6.06C19,4.26,14.74,0,9.5,0S0,4.26,0,9.5s4.26,9.5,9.5,9.5c1.85,0,3.58-.54,5.04-1.46l7.52,7.52c.29.29.68.44,1.06.44s.77-.15,1.06-.44c.59-.59.59-1.54,0-2.12Zm-14.69-6.94c-3.58,0-6.5-2.92-6.5-6.5s2.92-6.5,6.5-6.5,6.5,2.92,6.5,6.5-2.92,6.5-6.5,6.5Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			}
	#searchDetail .doClear{
		display: grid;
		align-items: center;
		height: 32px;
		padding: 0 16px;
		border-radius: 16px;
		font-size: 14px;
		}
	#searchDetail .close{
		position: absolute;
		top: 0;
		right: 0;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>') center no-repeat;
		-webkit-mask-size: 50%;
		background: currentColor;
		cursor: pointer;
		}
	@media (min-width: 576px) {
		#searchDetail .buttonSet{
			grid-template-columns: auto auto;
			align-items: center;
			justify-content: center;
			}
		}
	@media (min-width: 992px) {
		#searchDetail{
			position: relative;
			}
		#searchDetail section{
			position: absolute;
			top: 16px;
			width: 100%;
			z-index: 1;
			}
		}

#searchCurrent{
	margin-top: clamp(24px, 4.8vw, 32px);
	}
	#searchCurrent dl{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		grid-gap: 8px;
		flex-wrap: wrap;
		padding-top: 32px;
		}
	#searchCurrent dt{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		}
	#searchCurrent :where(a, button){
		display: grid;
		align-items: center;
		grid-gap: 8px;
		padding: 0 16px;
		height: 40px;
		border-radius: 20px;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		}
	#searchCurrent a{
		grid-template-columns: auto 16px;
		background: var(--color-theme);
		color: #fff;
		text-decoration: none;
		}
		#searchCurrent a:after{
			content: "";
			width: 16px;
			height: 16px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: #fff;
			}
	#searchCurrent button{
		background: var(--color);
		}
	@media (min-width: 992px) {
		#searchCurrent dl{
			justify-content: start;
			padding: 0 0 0 9em;
			}
		#searchCurrent dt{
			display: grid;
			align-items: center;
			width: auto;
			height: 40px;
			}
		}

#result{
	padding-bottom: clamp(48px, 9.6vw, 64px);
	}
	#result h2{
		display: none;
		}

#resultSetting{
	display: grid;
	grid-gap: 16px 24px;
	}
	@media (max-width: 991.98px) {
		#resultSetting{
			justify-items: center;
			}
		}
	@media (min-width: 992px) {
		#resultSetting{
			grid-template-columns: auto 1fr auto;
			align-items: center;
			justify-content: space-between;
			}
		#resultSetting #resultSort{
			justify-self: end;
			}
		#resultSetting #resultDisplay{
			grid-column: 3;
			}
		}

#resultCount{
	display: flex;
	align-items: center;
	grid-gap: 8px;
	font-size: 18px;
	font-weight: bold;
	}
	#resultCount span{
		color: #d6c400;
		font-size: 56px;
		}

#resultSort{}
	#resultSort dl{
		display: flex;
		align-items: center;
		grid-gap: 8px;
		font-size: 14px;
		font-weight: bold;
		}
	#resultSort dt{
		margin-right: 8px;
		color: var(--color-theme);
		}
	#resultSort dd{
		display: grid;
		place-content: center;
		height: 32px;
		padding: 0 16px;
		background: var(--color-theme);
		border: 1px solid transparent;
		color: #fff;
		border-radius: 16px;
		cursor: pointer;
		}
	#resultSort .select{
		background: #fff;
		border-color: var(--color-theme);
		color: var(--color-theme);
		pointer-events: none;
		}

#resultDisplay{}
	#resultDisplay dl{
		display: flex;
		align-items: center;
		grid-gap: 8px;
		font-size: 14px;
		font-weight: bold;
		}
	#resultDisplay dt{
		margin-right: 8px;
		color: var(--color-theme);
		}
	#resultDisplay dd{
		display: contents;
		}
		#resultDisplay dd a{
			display: grid;
			grid-template-columns: 12px auto;
			align-items: center;
			grid-gap: 8px;
			height: 32px;
			padding: 0 16px;
			background: var(--color-theme);
			border: 1px solid transparent;
			color: #fff;
			border-radius: 16px;
			text-decoration: none;
			}
		#resultDisplay dd a:before{
			content: "";
			width: 12px;
			height: 12px;
			-webkit-mask-position: center;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			transform: translateX(-4px);
			}
		#resultDisplay dd a[href*="shop/index"]{}
			#resultDisplay dd a[href*="shop/index"]:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="m5,12h2v-2h-2v2ZM0,2h2V0H0v2Zm5,5h2v-2h-2v2Zm-5,0h2v-2H0v2Zm0,5h2v-2H0v2Zm10-5h2v-2h-2v2ZM5,2h2V0h-2v2ZM10,0v2h2V0h-2Zm0,12h2v-2h-2v2Z"/></svg>');
				}
		#resultDisplay dd a[href*="shop/map"]{}
			#resultDisplay dd a[href*="shop/map"]:before{
				height: 14px;
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14"><path d="m6,0C2.69,0,0,2.69,0,6s6,8,6,8c0,0,6-4.69,6-8S9.31,0,6,0Zm0,8c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2Z"/></svg>');
				}
	#resultDisplay .select{
		background: #fff;
		border-color: var(--color-theme);
		color: var(--color-theme);
		pointer-events: none;
		}

#resultList{
	margin-top: clamp(48px, 9.6vw, 64px);
	}

#resultMap{
	margin-top: clamp(48px, 9.6vw, 64px);
	background: #fff;
	}
	#resultMap #gMap{
		aspect-ratio: 1;
		}
	@media (min-width: 992px) {
		#resultMap #gMap{
			aspect-ratio: 1 / 0.5;
			}
		}

#pagenation{
	margin-top: clamp(32px, 6vw, 40px);
	}

.shopList{
	display: grid;
	grid-gap: clamp(24px, 4.8vw, 32px);
	}
	.shopList section{
		display: grid;
		align-content: start;
		grid-gap: 16px;
		padding: clamp(16px, 3.6vw, 24px);
		background: #fff;
		border-radius: clamp(16px, 3.6vw, 24px);
		}
	.shopList h3{
		margin: 4px 0;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.65;
		}
	.shopList h3+div{
		display: contents;
		}
	.shopList h3+div+div{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
		}
		.shopList h3+div+div a{
			display: grid;
			grid-template-columns: 12px auto;
			align-items: center;
			grid-gap: 8px;
			border: 1px solid currentColor;
			min-height: 32px;
			padding: 0 16px;
			border-radius: 16px;
			color: #0094c2;
			font-size: 14px;
			font-weight: bold;
			text-decoration: none;
			}
			.shopList h3+div+div a:before{
				content: "";
				width: 16px;
				height: 16px;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="m10,0H0v8h5v2H0v2h12v-2h-5v-2h5V0h-2Zm0,6H2V2h8v4Z"/></svg>') center no-repeat;
				-webkit-mask-size: 12px 12px;
				background: currentColor;
				transform: translateX(-4px);
				}
			.shopList h3+div+div a[href*="//www.google.co.jp/maps/"]:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14"><path d="m6,0C2.69,0,0,2.69,0,6s6,8,6,8c0,0,6-4.69,6-8S9.31,0,6,0Zm0,8c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2Z"/></svg>');
				}
	.shopList dl{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		grid-gap: 8px 24px;
		font-size: 14px;
		line-height: 1.65;
		}
	.shopList dt{
		color: #0094c2;
		}
	.shopList ul{
		grid-row: 1;
		display: flex;
		flex-wrap: wrap;
		grid-gap: 16px;
		padding-bottom: 8px;
		border-bottom: 1px solid currentColor;
		color: #0094c2;
		font-size: 14px;
		}
	.shopList li{}
		.shopList li:not(:last-child){
			padding-right: 16px;
			border-right: 1px solid currentColor;
			}
	@media (min-width: 992px) {
		.shopList{
			grid-template-columns: repeat(2, 1fr);
			}
		}
	@media (min-width: 1200px) {
		.shopList{
			grid-gap: 48px;
			}
		}