/* CSS Document */

#wrapper{
	#pagePath{
		display: none;
	}
	&>#ads{
		display: none;
	}
}

#main{
	overflow: hidden;
	& hgroup{
		#news &,
		#award &,
		#about &{
			@media (max-width: 1199.98px) {
				display: grid;
				grid-template-columns: 1fr auto 1fr;
				grid-column-gap: var(--wrap-space);
				align-items: center;
				text-align: center;
				text-wrap: balance;
				&:before,
				&:after{
					content: "";
					border-top: 1px solid currentColor;
					min-width: var(--wrap-space);
				}
				& h2{
					grid-column: 2;
					grid-row: 1;
				}
				& p{
					grid-column: 1 / 4;
					grid-row: 2;
					margin-inline: var(--wrap-space);
				}
			}
		}
		& p[translate="no"]{
			font-weight: 600;
			font-size: clamp(18px, calc(28 / 1366 * 100dvw), 28px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			& span{
				display: contents;
				color: var(--color-theme);
			}
		}
	}
	& h2{
		font-weight: 900;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.15em;
	}
	#hero{
		padding: 0 16px;
		background: #f2ece1;
	}
	#menu{
		padding-top: clamp(80px, calc(120 / 768 * 100dvw), 120px);
		background: #f2ece1;
	}
	#news{
		padding-top: clamp(64px, calc(96 / 768 * 100dvw), 96px);
		background: #f2ece1;
	}
	#award{
		padding-top: clamp(32px, calc(56 / 768 * 100dvw), 56px);
		background: #f2ece1;
	}
	#about{
		padding-top: clamp(80px, calc(120 / 768 * 100dvw), 120px);
		background: #f2ece1;
	}
	#link{
		padding: clamp(96px, calc(144 / 768 * 100dvw), 144px) 0;
		background: #f2ece1;
	}
	#address{
		padding: clamp(56px, calc(72 / 768 * 100dvw), 72px) 0;
		background: #f2ece1;
	}
}

#hero{
	&{
		display: grid;
		grid-row-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		overflow: hidden;
		#heroTitle,
		#heroSlide{
			grid-column: 1;
			grid-row: 1;
		}
		#heroTitle{
			align-self: end;
			pointer-events: none;
			z-index: 10;
		}
	}
	#heroTitle{
		padding: clamp(40px, calc(80 / 1366 * 100dvw), 80px) clamp(16px, calc(32 / 768 * 100dvw), 32px);
		color: white;
		filter: drop-shadow(0 0 20px color-mix(in srgb, transparent, #001b48 50%));
		&{
			display: grid;
			grid-template-columns: auto auto;
			grid-template-rows: 1fr 0 1fr;
			justify-content: center;
			grid-row-gap: clamp(8px, calc(16 / 1366 * 100dvw), 16px);
			text-align: center;
			text-wrap: balance;
			&:before{
				grid-column: 1;
				grid-row: 1 / 4;
				align-self: center;
			}
			&:after{
				grid-column: 2;
				grid-row: 2;
			}
			& h1{
				align-self: end;
				padding: 0 1em;
			}
		}
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(64px, calc(112 / 1366 * 100dvw), 112px);
			background: #f2ece1 url("/gastronomy-award/images/logo.webp") no-repeat center / contain;
			border-radius: 100%;
		}
		&:after{
			content: "";
			border-bottom: 2px solid #f2ece1;
		}
		& h1{
			font-weight: 900;
			font-size: clamp(13px, calc(32 / 1366 * 100dvw), 32px);
			letter-spacing: 0.3em;
		}
		& p[translate="no"]{
			font-weight: 600;
			font-size: clamp(10px, calc(24 / 1366 * 100dvw), 24px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			& span{
				display: contents;
				color: var(--color-theme);
			}
		}
	}
	#heroSlide{
		display: grid;
		z-index: 1;
		&:not(.slick-sllider){
			& > li{
				grid-column: 1;
				grid-row: 1;
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		&.slick-slider{
			position: relative;
			.slick-Control{
				position: absolute;
				right: clamp(24px, calc(48 / 1366 * 100dvw), 48px);
				bottom: clamp(24px, calc(48 / 1366 * 100dvw), 48px);
				z-index: 10;
				&{
					display: flex;
					align-items: center;
					column-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
					.slick-num{
						margin-left: 8px;
					}
				}
				.slick-num{
					display: grid;
					column-gap: 0.25em;
					align-items: center;
					color: white;
					font-weight: 600;
					font-size: clamp(20px, calc(24 / 1366 * 100dvw), 24px);
					font-family: 'Montserrat', var(--font);
					&:before{
						content: "";
						grid-column: 2;
						grid-row: 1;
						height: 2em;
						border-left: 1px solid currentColor;
						transform: rotate(45deg);
					}
					.now-count{
						grid-column: 1;
						grid-row: 1;
						transform: translateY(-30%);
					}
					.all-count{
						grid-column: 3;
						grid-row: 1;
						transform: translateY(30%);
					}
				}
			}
			.slick-arrow{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
				position: relative;
				aspect-ratio: 1;
				width: 40px;
				background: color-mix(in srgb, transparent, #001b48 20%);
				border: 1px solid currentColor;
				border-radius: 100%;
				color: white;
				font-size: 0;
				z-index: 1;
				&:before{
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="4.83" y1="11.93" x2="19.17" y2="11.93"/><polyline points="13.3 6.14 19.17 12 13.3 17.86"/></svg>') no-repeat center / 50%;
				}
				&.slick-prev:before{
					transform: scale(-1, 1);
				}
				&.slick-disabled{
					pointer-events: none;
					opacity: 0.5;
				}
			}
		}
		& dl{
			position: relative;
			display: grid;
			grid-template-rows: 1fr;
			grid-row-gap: 24px;
			aspect-ratio: 358 / 424;
			padding: clamp(40px, calc(80 / 1366 * 100dvw), 80px) clamp(16px, calc(32 / 768 * 100dvw), 32px);
			border-radius: 0 0 clamp(24px, calc(32 / 1366 * 100dvw), 32px) clamp(24px, calc(32 / 1366 * 100dvw), 32px);
			overflow: hidden;
			@media (min-width: 768px) {
				aspect-ratio: 16 / 9;
			}
			&{
				& dt{
				}
			}
		}
		& dt{
			position: relative;
			z-index: 1;
			color: #fff;
			font-size: clamp(18px, calc(24 / 1366 * 100dvw), 24px);
			font-family: serif;
			letter-spacing: 0.1em;
			text-align: center;
			text-wrap: balance;
			word-break: keep-all;
			overflow-wrap: anywhere;
			filter: drop-shadow(0 0 5px color-mix(in srgb, transparent, #001b48 50%));
		}
		& dd{
			display: contents;
		}
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			outline-offset: -1px;
		}
	}
}

#menu{
	overflow: hidden;
	&{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding-bottom: 24px;
		& li{
			position: relative;
			display: grid;
			&:before{
				content: "";
				position: absolute;
				bottom: 24px;
				left: 0;
				width: 100%;
				border-bottom: 1px solid #cfcac1;
			}
			&:first-child:before{
				left: inherit;
				right: 0;
				width: 100dvw;
			}
			&:last-child:before{
				width: 100dvw;
			}
			& a{
				position: relative;
				display: grid;
				align-items: center;
				min-height: 72px;
				padding: 0 0 24px 0;
				color: inherit;
				font-weight: 700;
				font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
				text-align: center;
				text-wrap: balance;
				text-decoration: none;
				outline-offset: -1px;
				&:after{
					content: "";
					position: absolute;
					left: 50%;
					bottom: 4px;
					aspect-ratio: 1;
					width: 16px;
					background: var(--color-theme);
					transform: translateX(-50%);
					transition: bottom 0.2s ease-out;
					pointer-events: none;
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="13 6 8 11 3 6"/></svg>') no-repeat center / contain;
				}
				&:hover:after{
					bottom: 0;
				}
			}
		}
	}
}

#news{
	&{
		display: grid;
		@media (max-width: 1199.98px) {
			grid-template-columns: 1fr var(--wrap) 1fr;
			& hgroup{
				grid-column: 1 / 4;
			}
			#newsList{
				grid-column: 1 / 4;
				margin-top: 32px;
				padding: clamp(24px, calc(40 / 768 * 100dvw), 40px) 0;
				background: white;
			}
			#newsLink{
				grid-column: 2;
				display: flex;
				justify-content: center;
				margin-top: 32px;
			}
		}
		@media (min-width: 1200px) {
			grid-template-columns: 110px auto 1fr 110px;
			grid-template-rows: 1fr 1fr 32px auto;
			& hgroup{
				display: contents;
				&:before,
				&:after{
					content: "";
					border: 0 solid currentColor;
				}
				&:before{
					grid-column: 1;
					grid-row: 1 / 3;
					align-self: center;
					border-top-width: 1px;
				}
				&:after{
					grid-column: 1;
					grid-row: 2 / 4;
					justify-self: center;
					border-left-width: 1px;
				}
				& h2{
					grid-column: 2;
					grid-row: 1 / 3;
					align-self: center;
					margin-inline: clamp(32px, calc(40 / 1366 * 100dvw), 40px);
				}
				& p{
					grid-column: 1;
					grid-row: 4;
					justify-self: center;
					align-self: start;
					margin-top: 40px;
					writing-mode: vertical-rl;
				}
			}
			#newsList{
				grid-column: 2 / 5;
				grid-row: 4;
				padding: 64px 110px 64px 64px;
				background: white;
				border-radius: 56px 0 0 56px;
			}
			#newsLink{
				grid-column: 3;
				grid-row: 1 / 3;
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: center;
				&:before{
					content: "";
					min-width: 48px;
					border-top-width: 1px;
				}
			}
		}
	}
	#newsList{
		& section{
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			grid-gap: 4px 16px;
			margin-left: 56px;
			&:nth-child(n+2){
				border-top: 1px solid color-mix(in srgb, white, black 15%);
			}
			&:has(.tagCheck){
				& h3{
					position: relative;
					&:before{
						content: "";
					}
				}
			}
			@media (max-width: 1199.98px) {
				margin-right: 56px;
				&:nth-child(n+2){
					margin-top: 16px;
					padding-top: 16px;
				}
				& h3:before{
					transform: translateY(calc(0.875em - 50%));
				}
			}
			@media (min-width: 1200px) {
				&:nth-child(n+2){
					margin-top: 24px;
					padding-top: 24px;
				}
				&:has(a){
					padding-right: 56px;
				}
				& h3:before{
					transform: translate(-100%, calc(0.875em - 50%)) scale(1.5);
				}
			}
		}
		& h3{
			order: 1;
			width: 100%;
			margin-top: 4px;
			font-weight: 800;
			letter-spacing: 0.025em;
			&:before{
				position: absolute;
				top: 0;
				left: -32px;
				aspect-ratio: 1;
				width: 17px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><path d="M14.92,6.69c-1-1-2.58-1.03-3.62-.12l-3.98-2.63.61-1.46c.1-.25.05-.54-.14-.73l-1.25-1.25L.5,6.54l1.25,1.25c.19.19.48.25.73.14l1.46-.61,2.63,3.98c-.91,1.05-.87,2.63.12,3.62l.86.86L15.78,7.55l-.86-.86Z"/><line x1="11.83" y1="11.83" x2="16.5" y2="16.5"/></svg>') no-repeat center / contain; 
			}
		}
		& h3+div{
			display: contents;
		}
		& time{
			color: #666;
			font-size: 14px;
			letter-spacing: 0.05em;
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
		}
		& li{
			display: grid;
			align-items: center;
			min-width: 8em;
			min-height: 20px;
			padding: 0 10px;
			border: 1px solid color-mix(in srgb, white, black 13%);
			border-radius: 10px;
			font-weight: 700;
			font-size: 12px;
			letter-spacing: 0.2em;
			text-align: center;
			text-wrap: balance;
			&.tagCheck{
				display: none;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: inherit;
			font-size: 0;
			z-index: 1;
			@media (min-width: 1200px) {
				&:before{
					content: "";
					position: absolute;
					top: 50%;
					right: 28px;
					aspect-ratio: 1;
					width: 16px;
					background: currentColor;
					transition: transform 0.2s ease-out;
					transform: translate(50%, -50%);
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><polygon points="0 12 5 6 0 0 1 0 6 6 1.22 12 0 12"/><polygon points="5 12 10 6 5 0 6 0 11 6 6.22 12 5 12"/></svg>') no-repeat center / contain; 
				}
				&:hover:before{
					transform: translate(75%, -50%);
				}
			}
		}
	}
	#newsLink{
		& a{
			display: grid;
			align-items: center;
			min-width: 164px;
			min-height: 48px;
			padding: 8px 16px;
			border: 2px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
		}
	}
}

#award{
	&{
		display: grid;
		@media (max-width: 1199.98px) {
			grid-template-columns: 1fr var(--wrap) 1fr;
			& hgroup{
				grid-column: 1 / 4;
			}
			#awardList{
				grid-column: 1 / 4;
				grid-row: 2;
				margin-top: 32px;
				padding: clamp(24px, calc(40 / 768 * 100dvw), 40px) 0;
				background: white;
				&{
					display: grid;
					grid-template-columns: var(--wrap-space) clamp(256px, calc(384 / 768 * 100dvw), 384px) 1fr;
					#awardControl{
						grid-column: 1 / 4;
						justify-self: center;
						width: var(--wrap);
						margin-top: 24px;
					}
					&:not(:has(.slick-slider)){
						& > section,
						& > span{
							grid-column: 2;
							grid-row: 1;
						}
					}
					&:has(.slick-slider){
						#awardSlide,
						#awardSlideNav{
							grid-row: 1;
							align-self: end;
						}
						#awardSlide{
							grid-column: 2;
						}
						#awardSlideNav{
							grid-column: 3;
						}
						#awardControl{
							grid-column: 1 / 4;
						}
					}
				}
			}
			#awardLink{
				grid-column: 1 / 4;
				grid-row: 3;
				display: flex;
				justify-content: center;
				margin-top: 32px;
			}
		}
		@media (min-width: 1200px) {
			grid-template-columns: 110px max(384px, calc(384 / 1367 * 100dvw)) 1fr auto 110px;
			grid-template-rows: 1fr 1fr 32px auto;
			&:before{
				content: "";
				grid-column: 1 / 5;
				grid-row: 4 / 6;
				background: white;
				border-radius: 0 56px 56px 0;
			}
			& hgroup{
				display: contents;
				&:before,
				&:after{
					content: "";
					border: 0 solid currentColor;
				}
				&:before{
					grid-column: 5;
					grid-row: 1 / 3;
					align-self: center;
					border-top-width: 1px;
				}
				&:after{
					grid-column: 5;
					grid-row: 2 / 4;
					justify-self: center;
					border-left-width: 1px;
				}
				& h2{
					grid-column: 2 / 5;
					grid-row: 1 / 3;
					align-self: center;
					margin-inline: clamp(32px, calc(40 / 1366 * 100dvw), 40px);
					text-align: right;
					text-wrap: balance;
				}
				& p{
					grid-column: 5;
					grid-row: 4 / 6;
					justify-self: center;
					align-self: start;
					margin-top: 40px;
					writing-mode: vertical-rl;
				}
			}
			#awardList{
				&:not(:has(.slick-slider)){
					grid-column: 2;
					grid-row: 4 / 6;
					margin-block: 56px;
				}
				&:has(.slick-slider){
					display: contents;
					#awardSlide{
						grid-column: 2;
						grid-row: 4 / 6;
						align-self: end;
						margin-block: 56px;
					}
					#awardSlideNav{
						grid-column: 3 / 5;
						grid-row: 5;
						align-self: end;
						margin-bottom: 56px;
						z-index: 1;
					}
					#awardControl{
						grid-column: 3;
						grid-row: 4;
						align-self: center;
						margin: 56px 32px;
					}
				}
			}
			#awardLink{
				grid-column: 4;
				grid-row: 4;
				align-self: center;
				margin: 56px 88px 56px 0;
			}
		}
	}
	#awardList{
		& section{
			position: relative;
			&{
				display: grid;
				&:before,
				& figure{
					grid-column: 1;
					grid-row: 1;
					aspect-ratio: 3 / 2;
					border-radius: 4px;
				}
			}
			&:not(:has(img)):before{
				content: "";
				background: var(--dummy);
			}
			& h3{
				padding: 16px 8px 0 8px;
				font-weight: 800;
				letter-spacing: 0.025em;
			}
			& h3+div{
				display: contents;
			}
			& a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
				z-index: 1;
			}
			& figure{
				position: relative;
				overflow: hidden;
				& img{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		&:not(:has(.slick-slider)){
			display: grid;
			& > section,
			& > span{
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		#awardSlide{
			.slick-list{
				margin-right: calc(0px - clamp(16px, calc(32 / 768 * 100dvw), 32px));
			}
			.slick-slide{
				margin-right: clamp(16px, calc(32 / 768 * 100dvw), 32px);
			}
		}
		#awardSlideNav{
			overflow: hidden;
			.slick-list{
				margin-left: calc(0px - clamp(200px, calc(258 / 768 * 100dvw), max(258px, calc(258 / 1367 * 100dvw))));
			}
			.slick-slide{
				width: clamp(200px, calc(258 / 768 * 100dvw), max(258px, calc(258 / 1367 * 100dvw)));
				margin-right: clamp(16px, calc(32 / 768 * 100dvw), 32px);
			}
		}
		#awardControl{
			&{
				display: grid;
				align-items: center;
				column-gap: 16px;
				@media (max-width: 1199.98px) {
					grid-template-columns: auto 1fr auto auto;
					.slick-dots{
						grid-column: 2;
						grid-row: 1;
					}
					.slick-num{
						grid-column: 1;
						grid-row: 1;
					}
				}
				@media (min-width: 1200px) {
					grid-template-columns: auto auto auto 1fr;
					.slick-dots{
						grid-column: 4;
						grid-row: 1;
					}
					.slick-num{
						grid-column: 3;
						grid-row: 1;
						margin-inline: 16px;
					}
				}
			}
			.slick-arrow{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
				position: relative;
				aspect-ratio: 1;
				width: 40px;
				border: 1px solid currentColor;
				border-radius: 100%;
				color: inherit;
				font-size: 0;
				z-index: 1;
				&:before{
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="4.83" y1="11.93" x2="19.17" y2="11.93"/><polyline points="13.3 6.14 19.17 12 13.3 17.86"/></svg>') no-repeat center / 50%;
				}
				&.slick-prev:before{
					transform: scale(-1, 1);
				}
				&.slick-disabled{
					pointer-events: none;
					opacity: 0.5;
				}
			}
			.slick-dots{
				display: grid;
				& li{
					grid-row: 1;
					display: grid;
					align-items: center;
					min-height: 24px;
					cursor: pointer;
				}
				& button{
					height: 0;
					border-bottom: 1px solid #b5b5b5;
					font-size: 0;
					overflow: hidden;
					.slick-active &{
						border-color: var(--color-theme);
					}
				}
			}
			.slick-num{
				display: flex;
				column-gap: 8px;
				font-weight: 600;
				font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
				font-family: 'Montserrat', var(--font);
				letter-spacing: 0.2em;
			}
		}
	}
	#awardLink{
		& a{
			display: grid;
			align-items: center;
			min-width: 164px;
			min-height: 48px;
			padding: 8px 16px;
			border: 2px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
		}
	}
}

#about{
	&{
		display: grid;
		@media (max-width: 1199.98px) {
			grid-template-columns: 1fr var(--wrap) 1fr;
			& hgroup{
				grid-column: 1 / 4;
			}
			#aboutList{
				grid-column: 1 / 4;
				margin-top: 32px;
				padding: clamp(24px, calc(40 / 768 * 100dvw), 40px) 0;
				background: white;
			}
		}
		@media (min-width: 1200px) {
			grid-template-columns: 110px 1fr 110px;
			grid-template-rows: 1fr 1fr 32px auto;
			& hgroup{
				display: contents;
				&:before,
				&:after{
					content: "";
					border: 0 solid currentColor;
				}
				&:before{
					grid-column: 1;
					grid-row: 1 / 3;
					align-self: center;
					border-top-width: 1px;
				}
				&:after{
					grid-column: 1;
					grid-row: 2 / 4;
					justify-self: center;
					border-left-width: 1px;
				}
				& h2{
					grid-column: 2;
					grid-row: 1 / 3;
					align-self: center;
					margin-inline: clamp(32px, calc(40 / 1366 * 100dvw), 40px);
				}
				& p{
					grid-column: 1;
					grid-row: 4;
					justify-self: center;
					align-self: start;
					margin-top: 40px;
					writing-mode: vertical-rl;
				}
			}
			#aboutList{
				grid-column: 2 / 5;
				grid-row: 4;
				padding: 64px 110px 64px 64px;
				background: white;
				border-radius: 56px 0 0 56px;
			}
		}
	}
	#aboutList{
		&{
			display: grid;
			& section{
				&:nth-child(n+2){
					margin-top: clamp(48px, calc(72 / 768 * 100dvw), 72px);
					padding-top: clamp(48px, calc(72 / 768 * 100dvw), 72px);
					border-top: 1px solid color-mix(in srgb, transparent, var(--color) 25%);
				}
			}
			@media (max-width: 1199.98px) {
				grid-template-columns: var(--wrap);
				justify-content: center;
			}
		}
		& section{
			&{
				display: grid;
				@media (max-width: 767.98px) {
					& h3{
						margin-top: 16px;
					}
					& h3+div{
						grid-column: 1;
						grid-row: 1;
					}
					& figure{
						grid-column: 1;
						grid-row: 2;
						justify-self: center;
						width: min(80dvw, 240px);
						margin-top: 32px;
					}
				}
				@media (min-width: 768px) {
					grid-template-rows: auto 1fr;
					column-gap: clamp(32px, calc(72 / 1366 * 100dvw), 72px);
					& h3{
						margin-top: 32px;
					}
					& h3+div{
						grid-row: 1 / 3;
					}
					& figure{
						grid-row: 1;
					}
					&:nth-child(odd){
						grid-template-columns: 1fr clamp(280px, calc(384 / 1366 * 100dvw), 384px);
						& h3+div{
							grid-column: 1;
						}
					}
					&:nth-child(even){
						grid-template-columns: clamp(280px, calc(384 / 1366 * 100dvw),384px) 1fr;
						& h3+div{
							grid-column: 2;
						}
					}
				}
			}
			& h3{
				letter-spacing: 0.025em;
				line-height: 1.875;
				text-align: center;
				text-wrap: balance;
				word-break: keep-all;
				overflow-wrap: anywhere;
			}
			& p{
				letter-spacing: 0.025em;
				line-height: 2.375;
			}
			& figure{
				& img{
					aspect-ratio: 1;
					object-fit: cover;
					border-radius: 100%;
				}
			}
		}
	}
}

#link{
	&{
		display: grid;
		grid-template-columns: min(var(--wrap), 776px);
		justify-content: center;
		& dl{
			border-top: 1px solid #cfcac1;
			&:last-child{
				border-bottom: 1px solid #cfcac1;
			}
		}
	}
	& dl{
		position: relative;
		min-height: 148px;
		padding: 8px 24px 8px clamp(24px, calc(40 / 768 * 100dvw), 40px);
		&{
			display: grid;
			align-items: center;
			grid-gap: 8px 24px;
			@media (max-width: 767.98px) {
				grid-template-columns: 1fr auto;
				&:after{
					grid-column: 2;
					grid-row: 1 / 3;
				}
			}
			@media (min-width: 768px) {
				grid-template-columns: auto 1fr auto;
				& dt{
					margin-right: 16px;
				}
			}
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transition: all 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 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="5 2 11 8 5 14"/></svg>') no-repeat center / contain;
		}
		&:hover:after{
			transform: translateX(4px);
		}
		& dt{
			font-weight: 900;
			font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			letter-spacing: 0.15em;
		}
		& dd[translate="no"]{
			font-weight: 600;
			font-size: clamp(16px, calc(20 / 1366 * 100dvw), 20px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			& span{
				display: contents;
				color: var(--color-theme);
			}
		}
		& dd:has(a){
			display: contents;
			& a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
			}
		}
	}
}

#ads{
	#adsBanner{
		& a{
			display: grid;
			align-items: center;
			width: min(100%, 344px);
		}
		& img{
			&[src="images/banner_tepco.webp"]{
				height: 80%;
			}
		}
	}
}

#address{
	&{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
	}
	& h3{
		display: none;
	}
	& h3+div{
		&{
			display: grid;
			justify-items: center;
			grid-gap: 16px 64px;
			@media (min-width: 768px) {
				grid-template-columns: auto auto;
				justify-content: center;
				& dl{
					align-self: center;
				}
			}
		}
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 254px;
			background: url("/gastronomy-award/images/logo.webp") no-repeat center / contain;
		}
	}
	& dl{
		line-height: 1.75;
		@media (max-width: 575.98px) {
			& dt{
				&:nth-child(n+2){
					margin-top: 24px;
				}
			}
			& dd{
				margin-top: 8px;
			}
		}
		@media (min-width: 576px) {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 16px 24px;
		}
	}
}