/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@700&display=swap');

[lsc-lt]{
	display: contents;
}

[src="[url]"]{
	display: block;
	background: #ccc;
}

/*
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-weight: 500;
	font-weight: 700;
	font-family: 'Shippori Mincho', serif;
	font-weight: 700;
*/

:root{
	--color: #1a1a1a;
	--color-rgb: 26, 26, 26;
	--color-theme: #2995cc;
	--color-theme-rgb: 41, 149, 204;
	--color-border: #808080;
	--color-thin: #c7e5ff;
	--color-point: #ff698b;
	/*--color-point: #6e8094;
	--color-point-rgb: 110, 128, 148;
	--color-border: #808080;
	--color-area1: #e39b88;
	--color-area2: #93889f;
	--color-area3: #ceba79;
	--color-area4: #8bbda7;*/
	--color-variable: var(--color-theme);
	--wrap-space: 24px;
	--wrap-fit: calc(100% - calc(var(--wrap-space) * 2));
	--wrap-max: 1140px;
	--wrap-wide: min(var(--wrap-fit), 1280px);
	--wrap: min(var(--wrap-fit), var(--wrap-max));
	--font: 'Noto Sans JP', sans-serif;
	--font-min: 'Shippori Mincho', serif;
	--dummy: #fff url('/burarinoto/common/images/dummy.svg') center no-repeat;
}
@media (min-width: 1400px){
	:root{
		--wrap-space: 60px;
	}
}

html{
	scroll-behavior: smooth;
	scroll-padding-top: 60px;
}

body{
	position: relative;
	background: var(--color-thin);
	color: var(--color);
	font: 400 16px var(--font);
	line-height: 1.65;
	&:lang(ja){
		overflow-wrap: break-word;
	}
	&:before{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url("/burarinoto/common/images/bodyBg.svg") center bottom no-repeat;
		background-size: 150% auto;
	}
	@media (min-width: 576px){
		&:before{
			background-size: 100% auto;
		}
	}
	&::selection{
		background: var(--color-theme);
		color: #fff;
	}
	&::-moz-selection{
		background: var(--color-theme);
		color: #fff;
	}
}

a{
	color: inherit;
	word-break: break-word;
	.done &{
		transition-property: color,text-decoration,background,background-color,background-size,border,border-color,box-shadow,filter,opacity;
		transition-duration: 0.2s;
		transition-timing-function: ease-out;
	}
}

main{
	@media (min-width: 768px){
		font-size: 18px;
	}
	& a{
		color: var(--color-theme);
		text-decoration: underline;
	}
}

font:not(:lang(ja)){
	&[style="vertical-align: inherit;"]{
		display: contents;
	}
}

:where(a, button):focus-visible{
	outline: var(--color-theme) auto 2px;
	outline-offset: 2px;
}

:where(input, textarea, select){
	background-color: transparent;
	accent-color: var(--color-theme);
	caret-color: var(--color-theme);
	&:focus{
		outline: var(--color-theme) auto 2px;
	}
}

:is(input[type="checkbox"], input[type="radio"]){
	&:checked{
		background-color: var(--color-theme);
	}
}

#wrapper{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	z-index: 1;
	&:before{
		content: "";
		position: sticky;
		top: 0;
		grid-column: 1;
		grid-row: 1;
		background: #fff;
		z-index: 110;
	}
	& > *{
		grid-column: 1;
	}
	#navButton{
		position: sticky;
		top: 0;
		grid-row: 1;
		justify-self: end;
		z-index: 130;
	}
	#header{
		position: sticky;
		top: 0;
		grid-row: 1;
		justify-self: start;
		z-index: 120;
	}
	#nav{
		z-index: 110;
		@media (min-width: 992px){
			position: sticky;
			top: 0;
			grid-row: 1;
			margin-left: 240px;
		}
		@media (min-width: 1200px){
			margin-left: 356px;
		}
	}
}

#siteName{
	margin: 8px;
	& a{
		display: block;
		aspect-ratio: 300 / 76;
		height: 48px;
		background: url("../images/logo.svg") center no-repeat;
		background-size: contain;
		font-size: 0;
		@media (min-width: 576px){
			height: 56px;
		}
		@media (min-width: 992px){
			height: 64px;
		}
		@media (min-width: 1200px){
			height: 86px;
		}
	}
}

#navButton{
	aspect-ratio: 1;
	display: grid;
	align-content: center;
	justify-items: center;
	grid-gap: 8px;
	height: 100%;
	margin: 0;
	padding: 0;
	color: var(--color-theme);
	cursor: pointer;
	@media (min-width: 992px){
		display: none;
	}
	& i{
		width: 50%;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
		animation-duration: 0.75s;
		animation-fill-mode: forwards;
		transition: transform 0.75s;
	}
	&.on i{
		&:nth-of-type(1){
			animation-name: navButton-bar01_on;
		}
		&:nth-of-type(2){
			animation-delay: 0.375s;
			animation-duration: 0.1875s;
			animation-name: navButton-bar02_on;
		}
		&:nth-of-type(3){
			animation-name: navButton-bar03_on;
		}
	}
	&.off i{
		&:nth-of-type(1){
			animation-name: navButton-bar01_off;
		}
		&:nth-of-type(2){
			animation-name: navButton-bar02_off;
		}
		&:nth-of-type(3){
			animation-name: navButton-bar03_off;
		}
	}
}
@keyframes navButton-bar01_on{
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(10px) rotate(0);
	}
	100%{
		transform: translateY(10px) rotate(45deg);
	}
}
@keyframes navButton-bar01_off{
	0%{
		transform: translateY(10px) rotate(45deg);
	}
	50%{
		transform: translateY(10px) rotate(0);
	}
	100%{
		transform: translateY(0);
	}
}
@keyframes navButton-bar02_on{
	0%{
		transform: scaleX(1);
	}
	100%{
		transform: scaleX(0);
	}
}
@keyframes navButton-bar02_off{
	0%{
		transform: scaleX(0);
	}
	100%{
		transform: scaleX(1);
	}
}
@keyframes navButton-bar03_on{
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-10px) rotate(0);
	}
	100%{
		transform: translateY(-10px) rotate(-45deg);
	}
}
@keyframes navButton-bar03_off{
	0%{
		transform: translateY(-10px) rotate(-45deg);
	}
	50%{
		transform: translateY(-10px) rotate(0);
	}
	100%{
		transform: translateY(0);
	}
}

#nav{
	display: grid;
	@media (max-width: 991.98px){
		position: fixed;
		top: 0;
		left: 100%;
		align-content: start;
		width: min(100%, 400px);
		height: 100%;
		padding: 24px 24px 40px 24px;
		background: #eee;
		transform: translateX(0);
		transition: transform 0.2s ease-out;
		overflow-y: auto;
		overscroll-behavior: none;
		.nav &{
			transform: translateX(-100%);
		}
		#navGlobal,
		#navPickup{
			order: 1;
		}
		#navGlobal{
			margin-top: 16px;
		}
		#navPickup{
			margin-top: 24px;
			padding-top: 24px;
			border-top: 1px solid var(--color-border);
		}
	}
	@media (min-width: 992px){
		grid-template-columns: 1fr auto;
		align-content: center;
		align-items: center;
		grid-gap: 8px 16px;
		padding-right: 16px;
		#navPickup{
			order: 1;
			grid-column: 1 / 3;
		}
	}
	@media (min-width: 1200px){
		padding-right: 24px;
		column-gap: 24px;
	}
	& h2{
		height: 56px;
		font-size: 0;
		visibility: hidden;
		@media (min-width: 992px){
			display: none;
		}
	}
}

#navGlobal{
	& ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		font-weight: 700;
		@media (min-width: 992px){
			display: flex;
			justify-content: end;
			column-gap: 4px;
		}
	}
	& li{
		display: contents;
		&:last-child{
			& a{
				display: grid;
				grid-template-columns: 16px 1fr;
				grid-gap: 4px;
				align-items: center;
				&:before{
					content: "";
					content: "";
					aspect-ratio: 1;
					background: currentColor;
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.82 16"><polygon points="16.82 6.11 11.01 5.27 8.41 0 5.81 5.27 0 6.11 4.21 10.21 3.21 16 8.41 13.27 13.61 16 12.62 10.21 16.82 6.11"/></svg>') center no-repeat;
					-webkit-mask-size: contain;
				}
				@media (max-width: 991.98px){
					grid-column: 1 / 3;
					grid-row: 1;
					margin-bottom: 16px;
					padding: 4px 16px;
					background: var(--color-theme);
					border-radius: 4px;
					color: #fff;
					text-align: center;
				}
				@media (min-width: 992px){
					&:before{
						background: currentColor;
					}
				}
			}
		}
		@media (min-width: 992px){
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 4px;
			font-size: min(1.15vw, 16px);
			&:nth-child(n+2){
				&:before{
					content: "\FF0F";
					transform: translateY(0.1em);
				}
			}
		}
		@media (min-width: 1200px){
			font-size: min(1.15vw, 18px);
		}
	}
	& a{
		body:has(#feature) &[href$="feature/index.html"]{
			color: var(--color-theme);
		}
		body:has(#course) &[href$="course/index.html"]{
			color: var(--color-theme);
		}
		body:has(#spot) &[href$="spot/index.html"]{
			color: var(--color-theme);
		}
		body:has(#gourmet) &[href$="gourmet/index.html"]{
			color: var(--color-theme);
		}
		body:has(#reserve) &[href$="reserve/index.html"]{
			color: var(--color-theme);
		}
		@media (max-width: 991.98px){
			display: grid;
			grid-template-columns: 12px 1fr;
			align-items: center;
			grid-gap: 8px;
			min-height: 48px;
			padding: 4px 0;
			&:before{
				content: "";
				aspect-ratio: 1;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12"><polygon points="6 6 0 12 0 0 6 6" /></svg>') center no-repeat;
				-webkit-mask-size: contain;
			}
		}
		@media (min-width: 992px){
			&:hover{
				color: var(--color-theme);
			}
		}
	}
}

#navPickup{
	& ul{
		display: grid;
		font-weight: 700;
		@media (min-width: 992px){
			display: flex;
			justify-content: end;
			column-gap: 4px;
		}
	}
	& li{
		display: contents;
		@media (min-width: 992px){
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 4px;
			font-size: min(1.3vw, 16px);
			&:nth-child(n+2){
				&:before{
					content: "\FF0F";
					transform: translateY(0.1em);
				}
			}
		}
	}
	& a{
		@media (max-width: 991.98px){
			display: grid;
			grid-template-columns: 12px 1fr;
			align-items: center;
			grid-gap: 8px;
			min-height: 48px;
			padding: 4px 0;
			&:before{
				content: "";
				aspect-ratio: 1;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12"><polygon points="6 6 0 12 0 0 6 6" /></svg>') center no-repeat;
				-webkit-mask-size: contain;
			}
		}
		@media (min-width: 992px){
			&:hover{
				color: var(--color-theme);
			}
		}
	}
}

#navSearch{
	@media (min-width: 992px){
		width: 160px;
	}
	& div:not(.gsc-clear-button),
	& table,
	& tbody,
	& tr,
	& td{
		display: contents;
	}
	& form{
		all: unset;
		display: grid;
		grid-template-columns: 48px 1fr;
		padding-right: 8px;
		align-items: center;
		background: #fff;
		border: 1px solid var(--color-border);
		border-radius: 4px;
		@media (min-width: 992px){
			grid-template-columns: 24px 1fr;
			padding-right: 4px;
		}
	}
	& input{
		all: unset;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		@media (max-width: 991.98px){
			padding: 8px;
		}
		@media (min-width: 992px){
			padding: 0 4px;
			font-size: 12px;
		}
	}
	& button{
		all: unset;
		order: -1;
		aspect-ratio: 1;
		background: currentColor;
		font-size: 0;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.66,13.59l-3.42-3.42c.72-.95,1.16-2.13,1.16-3.41,0-3.11-2.52-5.63-5.63-5.63S1.12,3.65,1.12,6.76s2.52,5.63,5.63,5.63c1.28,0,2.47-.43,3.41-1.16l3.42,3.42c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77,0-1.06ZM2.62,6.76c0-2.28,1.85-4.13,4.13-4.13s4.13,1.85,4.13,4.13-1.85,4.13-4.13,4.13-4.13-1.85-4.13-4.13Z"/></svg>') center no-repeat;
		-webkit-mask-size: min(100%, 16px);
		& svg{
			display: none;
		}
	}
	& a{
		all: unset;
		grid-column: 3;
		color: #404040;
		font-weight: 700;
		font-size: 16px;
		cursor: pointer;
		& span{
			all: unset;
			display: contents;
		}
	}
}

#pagePath{
	display: flex;
	justify-content: center;
	padding: 8px 0;
	background: var(--color-thin);
	overflow: hidden;
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 0 8px;
		width: var(--wrap);
	}
	& li{
		font-size: 14px;
		&:nth-child(n+2):before{
			content: ">";
			margin-right: 8px;
		}
	}
	& a{
		text-decoration: underline;
	}
}

#main{
	min-height: 50vw;
}

#pageTop{
	display: none;
}

#footer{
	justify-self: center;
	display: grid;
	grid-gap: 24px 40px;
	width: var(--wrap);
	margin: 72px 0;
	@media (min-width: 576px){
		grid-template-columns: auto auto;
		grid-template-rows: auto 1fr;
		justify-content: center;
	}
	@media (min-width: 992px){
		column-gap: 56px;
		margin: 192px 0 104px 0;
	}
	#fAddress{
		@media (min-width: 576px){
			grid-row: 1 / 3;
			align-self: start;
		}
	}
	#fNav{
		@media (min-width: 576px){
			grid-column: 2;
		}
	}
	#fLink{
		justify-self: start;
		@media (min-width: 576px){
			grid-column: 2;
		}
	}
}

#fAddress{
	display: grid;
	grid-row-gap: 16px;
	&:before{
		content: "";
		display: block;
		aspect-ratio: 300 / 76;
		width: 100%;
		background: url("../images/logo.svg") center no-repeat;
		background-size: contain;
		font-size: 0;
	}
	@media (min-width: 1200px){
		&:before{
			width: 340px;
		}
	}
	& h2{
		margin-top: 16px;
		font-weight: 700;
		font-size: 18px;
		@media (min-width: 992px){
			margin-top: 40px;
			font-size: 20px;
		}
	}
	& dl{
		overflow: hidden;
	}
	& dt{
		clear: both;
		float: left;
		&:after{
			content: ":";
			margin: 0 0.25em;
		}
		&:nth-of-type(1){
			display: none;
		}
	}
}

#fNav{
	& ul{
		display: grid;
		grid-gap: 4px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 8px 1fr;
		align-items: center;
		grid-gap: 8px;
		&:hover{
			&:before{
				transform: translateX(4px);
			}
		}
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-point);
			transition: transform 0.2s ease-out;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 8"><polygon points="4 4 0 8 0 0 4 4"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

#fLink{
	& a{
		display: grid;
		grid-template-columns: 1fr 16px 28px;
		align-items: center;
		min-height: 32px;
		padding-left: 8px;
		background: #fff;
		border: 1px solid var(--color-border);
		&:hover{
			background: #94cce8;
		}
		&:before,
		&:after{
			content: "";
			order: 1;
		}
		&:before{
			align-self: stretch;
			margin: 4px 0;
			border-right: 1px solid var(--color-border);
		}
		&:after{
			content: "";
			width: 8px;
			justify-self: center;
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 8"><polygon points="0 8 0 0 6 4 0 8"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

#pagenation{
	display: flex;
	justify-content: center;
	overflow: hidden;
	& ul,
	& ol{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		grid-gap: 8px;
		width: var(--wrap);
		list-style: none;
	}
	& ul{
		display: grid;
		grid-row-gap: 40px;
		@media (min-width: 992px) {
			grid-row-gap: 56px;
		}
		& li{
			display: contents;
		}
		& a{
			&[rel]{
				grid-gap: 8px;
				min-height: 40px;
				padding: 4px 16px;
				background: var(--color-theme);
				color: #fff;
				letter-spacing: 0.05em;
				}
			&[rel="list"]{
				grid-column: 1 / 3;
				grid-row: 2;
				min-height: 48px;
				background: #fff;
				border: 1px solid currentColor;
				color: inherit;
			}
		}
	}
	& a{
		display: grid;
		place-content: center;
		color: inherit;
		text-decoration: none;
		&:not([rel]){
			aspect-ratio: 1;
			height: 48px;
			background: #fff;
			border-radius: 100%;
			line-height: 1;
		}
		&[rel]{
			grid-gap: 8px;
			font-weight: 700;
			&:before{
				align-self: center;
				aspect-ratio: 1;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="4.5 1 11.5 8 4.5 15" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
			}
		}
		&[rel="prev"]{
			grid-template-columns: 16px auto;
			margin-right: 8px;
			&:before{
				content: "";
				transform: scale(-1, 1);
			}
		}
		&[rel="next"]{
			grid-template-columns: auto 16px;
			margin-left: 8px;
			&:before{
				content: "";
				order: 1;
			}
		}
		&.lsc-current-page{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
			pointer-events: none;
		}
	}
}

.topicsList{
	& dl{
		position: relative;
		display: grid;
		grid-template-columns: min(20vw, 90px) 1fr;
		grid-gap: 8px 16px;
		padding: 16px 0;
		border-bottom: 1px solid var(--color-border);
		@media (min-width: 992px){
			padding: 24px 0;
			column-gap: 24px;
		}
		&:has(a){
			&:not(:has(img)):before,
			& img{
				transition: opacity 0.2s ease-out;
			}
			&:hover{
				&:not(:has(img)):before,
				& img{
					opacity: 0.75;
				}
			}
		}
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1 / 3;
			aspect-ratio: 90 / 60;
			background: var(--dummy);
			border-radius: 4px;
		}
		&:has(a){
			padding-right: 24px;
		}
		&:nth-child(1){
			margin-top: -16px;
			@media (min-width: 992px){
				margin-top: -24px;
			}
		}
	}
	& dt{
		color: #595757;
		font-weight: 900;
	}
	& dd{
		&:has(img){
			grid-column: 1;
			grid-row: 1 / 3;
			align-self: start;
		}
		&:has(time){
			grid-row: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			grid-gap: 4px 8px;
			color: #595757;
			font-size: 14px;
			&:before{
				content: "";
				order: -1;
				width: 100%;
			}
			@media (min-width: 576px){
				font-size: 16px;
				&:before{
					content: none;
				}
			}
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 90 / 60;
			object-fit: cover;
			border-radius: 4px;
		}
		& time{
			@media (min-width: 576px){
				margin-right: 8px;
			}
		}
		& ul{
			display: contents;
		}
		& li{
			&[class]{
				order: -2;
				display: grid;
				align-items: center;
				padding: 0 16px;
				background: var(--color-theme);
				color: #fff;
				font-weight: 500;
				font-size: 12px;
				@media (min-width: 576px){
					order: unset;
					min-height: 24px;
					font-size: 14px;
				}
				&.tagNew{
					background: var(--color-point);
				}
			}
			&:not([class]){
				display: flex;
				flex-wrap: wrap;
				grid-gap: 4px;
				&:before,
				&:after{
					content: "-";
				}
			}
		}
		& a{
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			color: inherit;
			font-size: 0;
			&:hover{
				&:before{
					transform: translateX(4px);
				}
			}
			&:before{
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				width: 18px;
				height: 100%;
				background: currentColor;
				transition: transform 0.2s ease-out;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 1px;"><polyline points="9,1 17,9 9,17"/><polyline points="0,9 17,9"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
			} 
		}
	}
}

.infoWin{
	width: min(50vw, 280px);
	& dl{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 10px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1 / 0.667;
			width: 100%;
			background: var(--dummy);
			background-size: cover;
		}
	& dt{
		width: 100%;
		font-weight: 700;
		font-size: 14px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		}
	}
	& dd{
		&:has(img){
			width: 100%;
		}
		&:has(a){
			width: calc(50% - 5px);
			margin: 0 auto;
		}
		& img{
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
		}
		& a{
			display: grid;
			place-items: center;
			padding: 4px 8px;
			background: var(--color-theme);
			color: #fff;
			font-size: 12px;
			text-decoration: none;
			&[href*="google.co.jp"]{
				background: #000;
			}
		}
	}
}


/*


.infoPin{
	display: grid;
	width: 54px;
	height: 62px;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4))
	}
	.infoPin:after{
		content: "";
		justify-self: center;
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-top-color: #fff;
		transform: scale(0.6, 1) translateX(-40%);
		}
	.infoPin img{
		width: 46px;
		height: 46px;
		background: var(--color);
		border: 4px solid #fff;
		object-fit: cover;
		}

.categoryPin{
	width: 50px;
	height: 60px;
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 58.28"><path d="m48,50h-19.15l-2.94,7.64c-.33.85-1.52.86-1.86.02l-3.1-7.65H2c-1.1,0-2-.9-2-2V2C0,.9.9,0,2,0h46c1.1,0,2,.9,2,2v46c0,1.1-.9,2-2,2Z" style="fill: white"/><path d="m48,1c.55,0,1,.45,1,1v46c0,.55-.45,1-1,1h-19.83l-.25.64-2.94,7.64-3.1-7.65-.25-.62H2c-.55,0-1-.45-1-1V2c0-.55.45-1,1-1h46m0-1H2C.9,0,0,.9,0,2v46c0,1.1.9,2,2,2h18.95l3.1,7.65c.17.42.55.62.93.62s.77-.21.93-.64l2.94-7.64h19.15c1.1,0,2-.9,2-2V2c0-1.1-.9-2-2-2h0Z" style="fill:gray"/></svg>') center top no-repeat;
	}
	.categoryPin:before{
		content: "";
		display: block;
		width: 36px;
		aspect-ratio: 1;
		margin: 7px;
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		background: var(--color-point);
		}
	.categoryPin[data-category="c1"]:before{
		-webkit-mask-image: var(--icon-c1);
		}
	.categoryPin[data-category="c2"]:before{
		-webkit-mask-image: var(--icon-c2);
		}
	.categoryPin[data-category="c3"]:before{
		-webkit-mask-image: var(--icon-c3);
		}
	.categoryPin[data-category="c4"]:before{
		-webkit-mask-image: var(--icon-c4);
		}
	.categoryPin[data-category="c5"]:before{
		-webkit-mask-image: var(--icon-c5);
		}
	.categoryPin[data-category="c6"]:before{
		-webkit-mask-image: var(--icon-c6);
		}
	.categoryPin[data-category="c7"]:before{
		-webkit-mask-image: var(--icon-c7);
		}

.countPin{
	display: grid;
	place-items: center;
	width: 40px;
	height: 54px;
	padding-bottom: 16px;
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 54.29"><path d="m40,20C40,8.95,31.05,0,20,0S0,8.95,0,20c0,12.86,17.86,24.4,17.86,32.14,0,2.86,4.29,2.86,4.29,0,0-7.74,17.86-19.29,17.86-32.14Z" style="fill:black"/><path d="m20,1c10.48,0,19,8.52,19,19,0,6.88-5.51,13.52-10.38,19.38-4.01,4.84-7.48,9.01-7.48,12.76,0,1.09-.95,1.14-1.14,1.14s-1.14-.06-1.14-1.14c0-3.74-3.47-7.92-7.48-12.76C6.51,33.52,1,26.88,1,20,1,9.52,9.52,1,20,1m0-1C8.95,0,0,8.95,0,20c0,12.86,17.86,24.4,17.86,32.14,0,1.43,1.07,2.14,2.14,2.14s2.14-.71,2.14-2.14c0-7.74,17.86-19.29,17.86-32.14C40,8.95,31.05,0,20,0h0Z" style="fill:white"/></svg>') center top no-repeat;
	color: #fff;
	font-weight: 500;
	}
*/

.slick-arrow{
	all: unset;
	position: relative;
	aspect-ratio: 1;
	width: 32px;
	aspect-ratio: 1;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 100%;
	color: inherit;
	font-size: 0;
	z-index: 1;
	@media (min-width: 576px){
		width: 48px;
	}
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		aspect-ratio: 1;
		width: 100%;
		background: currentColor;
		-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="M8.04,20.5c-.26,0-.51-.1-.71-.29-.39-.39-.39-1.02,0-1.41l6.79-6.79-6.79-6.79c-.39-.39-.39-1.02,0-1.41s1.02-.39,1.41,0l8.21,8.21-8.21,8.21c-.2.2-.45.29-.71.29Z"/></svg>') center no-repeat;
		-webkit-mask-size: min(50%, 24px);
	}
	&.slick-prev{
		&:before{
			transform: scale(-1, 1);
		}
	}
}

.slick-dots{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-gap: 16px;
	z-index: 1;
	& li{
		aspect-ratio: 1;
		width: 8px;
		border-radius: 100%;
		background: #fff;
		border: 1px solid var(--color-border);
		opacity: 0.4;
		overflow: hidden;
		&.slick-active{
			background: var(--color-theme);
			border-color: transparent;
			opacity: unset;
		}
	}
	& button{
		opacity: 0;
	}
}

.cse-search-box{
	display: grid;
	grid-template-columns: auto auto;
	border: 1px solid var(--color-border);
	overflow: hidden;
	}
	.cse-search-box input{
		padding: 0;
		border: none;
		}
	.cse-search-box [type="submit"]{
		aspect-ratio: 1;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m14.66,13.59l-3.42-3.42c.72-.95,1.16-2.13,1.16-3.41,0-3.11-2.52-5.63-5.63-5.63S1.12,3.65,1.12,6.76s2.52,5.63,5.63,5.63c1.29,0,2.47-.44,3.41-1.16l3.42,3.42c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77,0-1.06Zm-7.9-2.7c-2.28,0-4.13-1.85-4.13-4.13s1.85-4.13,4.13-4.13,4.13,1.85,4.13,4.13-1.85,4.13-4.13,4.13Z"/></svg>') center no-repeat;
		-webkit-mask-size: min(80%, 32px);
		background: currentColor;
		}