/* CSS Document */

img[src="[url]"]{
	background: var(--dummy);
	}

#areaguide{}
	#areaguide header{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		margin-top: clamp(24px, 4.8vw, 32px);
		overflow: hidden;
		}
		#areaguide header:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 2 / 5;
			background: #edf0f3;
			z-index: -11;
			}
		#areaguide header:after{
			content: "";
			grid-column: 1 / 4;
			grid-row: 2 / 4;
			background: url("../images/areaMap.webp") center bottom no-repeat;
			z-index: -10;
			}
		#areaguide header > *{
			grid-column: 2;
			}
	#areaguide h2{
		grid-column: 2;
		justify-self: center;
		position: relative;
		margin-bottom: clamp(24px, 4.8vw, 32px);
		padding: 0 clamp(16px, 3.6vw, 24px);
		font: clamp(20px, 4.2vw, 28px) var(--font-min);
		text-align: center;
		line-height: 1.65;
		}
		#areaguide h2:before,
		#areaguide h2:after{
			content: "";
			position: absolute;
			top: 50%;
			width: 100vw;
			height: clamp(32px, 6vw, 40px);
			background-repeat: repeat-x;
			transform: translateY(-50%);
			}
		#areaguide h2:before{
			right: 100%;
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 0 12 40"><circle cx="2" cy="2" r="2" fill="%23e39b88"/><circle cx="2" cy="14" r="2" fill="%2393889f"/><circle cx="2" cy="26" r="2" fill="%23ceba79"/><circle cx="2" cy="38" r="2" fill="%238bbda7"/></svg>');
			background-position: right center;
			}
		#areaguide h2:after{
			left: 100%;
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 40"><circle cx="2" cy="2" r="2" fill="%23e39b88"/><circle cx="2" cy="14" r="2" fill="%2393889f"/><circle cx="2" cy="26" r="2" fill="%23ceba79"/><circle cx="2" cy="38" r="2" fill="%238bbda7"/></svg>');
			background-position: left center;
			}
	#areaguide h2+div{
		grid-row: 2;
		margin: 24px 0;
		}
	#areaguide #areaguideMap{
		grid-row: 4;
		margin-bottom: 48px;
		}
	@media (max-width: 991.98px) {
		#areaguide header{
			grid-template-rows: auto auto 70vw auto;
			}
			#areaguide header:after{
				-webkit-mask: linear-gradient(#000 calc(100% - 10vw), transparent);
				background-size: 170vw auto;
				}
		#areaguide #areaguideMap{
			margin-top: -10vw;
			}
		}
	@media (min-width: 992px) {
		#areaguide header{
			grid-template-columns: 48px 1fr 48px;
			}
			#areaguide header:after{
				justify-self: center;
				width: min(90%, 1400px);
				background-size: 100% auto;
				-webkit-mask: linear-gradient(90deg, #000 94%, transparent);
				}
		#areaguide h2+div{
			margin: 48px 0;
			}
		#areaguide #areaguideMap{
			grid-row: 3;
			}
		}

#areaguideMap{
	display: grid;
	grid-gap: 16px;
	}
	#areaguideMap dl{
		position: relative;
		display: grid;
		grid-gap: 16px;
		grid-template-areas: 'title' 'text';
		padding: 10px;
		background: #fff;
		border: 1px solid var(--color-border);
		color: #fff;
		text-shadow: 0 0 5px rgba(0 ,0, 0, 0.6);
		line-height: 1.65;
		}
		#areaguideMap dl:before{
			content: "";
			grid-column: 1;
			grid-row: 1 / 3;
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
			z-index: 1;
			}
	#areaguideMap dt{
		grid-area: title;
		align-self: end;
		justify-self: center;
		padding: 16px;
		font: 500 32px var(--font-min);
		writing-mode: vertical-rl;
		z-index: 1;
		}
	#areaguideMap dt+dd{
		grid-area: text;
		align-self: end;
		padding: 0 16px 16px 16px;
		font: 500 12px var(--font-min);
		text-align: center;
		z-index: 1;
		}
	#areaguideMap dt+dd+dd{
		grid-column: 1;
		grid-row: 1 / 3;
		}
	#areaguideMap dd{}
		#areaguideMap dd:last-child{
			display: contents;
			}
		#areaguideMap dd img{
			width: 100%;
			height: 100%;
			max-height: 280px;
			aspect-ratio: 1 / 0.57;
			object-fit: cover;
			}
		#areaguideMap dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
			}
	@media (min-width: 576px) {
		#areaguideMap{
			grid-template-columns: 1fr 1fr;
			}
		#areaguideMap dl{
			min-height: 160px;
			}
		}
	@media (min-width: 992px) {
		#areaguideMap{
			grid-gap: 32px min(24vw, 420px);
			}
		}
	@media (min-width: 1200px) {
		#areaguideMap dt{
			font-size: 40px;
			}
		#areaguideMap dt+dd{
			padding-bottom: 24px;
			font-size: 16px;
			}
		}

#areaguideList{
	display: grid;
	border-bottom: 1px solid var(--color-border);
	}
	#areaguideList section{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-gap: clamp(16px, 3.6vw, 24px) 0;
		padding-bottom: 32px;
		}
		#areaguideList section:before{
			content: "";
			grid-column: 1 / 4;
			background: currentColor;
			height: 10px;
			}
		#areaguideList #noto:before{
			background: var(--color-area1);
			}
		#areaguideList #kanazawa:before{
			background: var(--color-area2);
			}
		#areaguideList #kaga:before{
			background: var(--color-area3);
			}
		#areaguideList #hakusan:before{
			background: var(--color-area4);
			}
		#areaguideList section > *{
			grid-column: 2;
			}
	#areaguideList h3{
		grid-column: 1 / 4;
		margin-bottom: -8px;
		font: 500 24px var(--font-min);
		text-align: center;
		line-height: 1.65;
		}
	#areaguideList h3+div{
		color: #4d4d4d;
		line-height: 1.65;
		letter-spacing: 0.05em;
		}
	#areaguideList h3+div+div{}
		#areaguideList h3+div+div ul{
			display: grid;
			grid-gap: 8px;
			}
		#areaguideList h3+div+div li{
			}
		#areaguideList h3+div+div a{
			display: grid;
			grid-template-columns: 4px auto;
			align-items: center;
			grid-gap: 16px;
			color: inherit;
			font-weight: 500;
			line-height: 1.65;
			text-decoration: none;
			}
			#areaguideList h3+div+div a:before{
				content: "";
				aspect-ratio: 1 / 2;
				-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;
				background: var(--color-point);
				}
			#areaguideList #noto h3+div+div a:before{
				background: var(--color-area1);
				}
			#areaguideList #kanazawa h3+div+div a:before{
				background: var(--color-area2);
				}
			#areaguideList #kaga h3+div+div a:before{
				background: var(--color-area3);
				}
			#areaguideList #hakusan h3+div+div a:before{
				background: var(--color-area4);
				}
	#areaguideList figure{
		grid-column: 1 / 4;
		grid-row: 3;
		}
		#areaguideList figure ul{
			display: grid;
			grid-template-columns: 1fr 1fr;
			}
		#areaguideList figure li{
			display: grid;
			grid-template-areas: 'main';
			}
			#areaguideList figure li:before{
				content: attr(data-caption);
				grid-area: main;
				align-self: end;
				display: grid;
				align-content: end;
				min-height: 80px;
				padding: 16px;
				background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
				color: #fff;
				line-height: 1.65;
				text-align: center;
				z-index: 1;
				}
		#areaguideList figure img{
			grid-area: main;
			width: 100%;
			height: 100%;
			aspect-ratio: 2 / 1;
			object-fit: cover;
			}
	@media (min-width: 576px) and (max-width: 991.98px) {
		#areaguideList h3+div+div ul{
			grid-template-columns: 1fr 1fr;
			grid-gap: 1px;
			}
		}
	@media (min-width: 992px) {
		#areaguideList{
			grid-template-columns: 1fr 1fr;
			border-bottom: none;
			}
		#areaguideList section{
			grid-template-columns: 48px 1fr 48px;
			align-content: start;
			padding-bottom: 48px;
			background: #fff;
			outline: 1px solid var(--color-border);
			}
		}