/* CSS Document */

:where(#feature, #plan, #spot, #event, #theme, #favorite){
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	}
	:where(#feature, #plan, #spot, #event, #theme, #favorite) > *{
		grid-column: 2;
		}

:where(#feature, #plan, #spot, #event, #favorite) h2{
	grid-column: 2;
	margin: clamp(24px, 4.8vw, 32px) auto;
	}

#lead{
	font-weight: 500;
	line-height: 1.65;
	text-align: center;
	word-break: keep-all;
	}

#pickup{
	grid-column: 1 / 4;
	padding: clamp(48px, 9.6vw, 64px) 0 clamp(32px, 7.2vw, 48px) 0;
	background: #96cee5;
	overflow: hidden;
	}
	#pickup img{
		grid-area: main;
		width: 100%;
		aspect-ratio: 1 / 0.667;
		object-fit: cover;
		}
	#pickup dl{
		position: relative;
		display: grid;
		grid-template-areas: 'main';
		grid-gap: 8px 0;
		background: #fff;
		color: var(--color-theme);
		padding: clamp(12px, 2.4vw, 16px);
		border-radius: 4px;
		}
		#pickup dl:before{
			content: "";
			grid-area: main;
			aspect-ratio: 1 / 0.667;
			background: var(--dummy);
			background-size: cover;
			border-radius: 4px;
			}
	#pickup dt{
		order: 1;
		margin: 4px 8px 0 8px;
		font-weight: 500;
		line-height: 1.65;
		}
	#pickup dt+dd{}
		#pickup dt+dd:not(:last-child){
			grid-area: main;
			position: relative;
			}
	#pickup dd{}
		#pickup dd:last-child{
			display: contents;
			}
		#pickup dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#pickup li[data-caption]{
		display: grid;
		grid-template-areas: 'main';
		border-radius: 6px;
		overflow: hidden;
		}
		#pickup li:not([data-caption=""]):after{
			content: attr(data-caption);
			grid-area: main;
			align-self: end;
			padding: 16px;
			background: linear-gradient(rgba(0,26,23,0), rgba(0,26,23,0.7));
			color: #fff;
			font-size: 12px;
			line-height: 1.65;
			z-index: 1;
			}
	#pickup .slick-slider{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-gap: clamp(24px, 4.8vw, 32px) 0;
		width: var(--wrap);
		margin: 0 auto;
		}
	#pickup .slick-list{
		grid-column: 1 / 4;
		overflow: visible;
		filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2));
		}
	#pickup .slick-slide{
		width: min(65vw, 482px);
		margin: 0 clamp(12px, 2.4vw, 16px);
		}
	#pickup .slick-arrow{
		grid-row: 2;
		}
	#pickup .slick-prev{
		grid-column: 1;
		}
	#pickup .slick-next{
		grid-column: 3;
		justify-self: end;
		}
	#pickup .slick-dots{
		grid-column: 2;
		grid-row: 2;
		}
		#pickup .slick-dots:nth-child(2){
			display: none;
			}

#tabMenu{
	grid-column: 1 / 4;
	}
	#pickup+#tabMenu{
		background: #96cee5;
		}

#feature{}
	#feature+#search #searchType li:nth-child(3),
	#feature+#search #searchType li:nth-child(4){
		display: none;
		}

#spot{}
	#spot+#search #searchType li:nth-child(3){
		display: none;
		}

#event{}
	#event+#search #searchType li:nth-child(4){
		display: none;
		}

#plan{}
	#plan+#search #searchType li:nth-child(3),
	#plan+#search #searchType li:nth-child(4){
		display: none;
		}

#theme{
	grid-gap: clamp(24px, 4.8vw, 32px) 0;
	padding: clamp(24px, 4.8vw, 32px) 0;
	}
	#theme+#search{
		display: none;
		}
	#theme h2{
		color: var(--color-theme);
		font-size: clamp(20px, 3.6vw, 24px);
		font-weight: 500;
		text-align: center;
		text-wrap: balance;
		letter-spacing: 0.1em;
		line-height: 1.65;
		}
	#theme h2+div{
		order: 1;
		color: #1a1a1a;
		line-height: 1.65;
		}
	#theme h2+div+div{
		order: 2;
		justify-self: center;
		width: min(100%, 300px);
		}
		#theme h2+div+div a{
			display: grid;
			grid-template-columns: auto 15px;
			align-items: center;
			grid-gap: 16px;
			height: 48px;
			padding: 8px 16px;
			border: 1px solid currentColor;
			border-radius: 4px;
			color: var(--color-theme);
			font-size: 14px;
			font-weight: 500;
			text-align: center;
			text-decoration: none;
			line-height: 1.65;
			}
			#theme h2+div+div a:after{
				content: "";
				aspect-ratio: 1;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><polygon points="7.5 .15 6.79 .85 12.94 7 .15 7 .15 8 12.94 8 6.79 14.15 7.5 14.85 14.85 7.5 7.5 .15"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				}
	#theme figure:not(#pickup){
		display: grid;
		grid-template-areas: 'photo';
		}
		#theme figure:not(#pickup) img{
			grid-area: photo;
			width: 100%;
			aspect-ratio: 2 / 1;
			object-fit: cover;
			}

#search{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-gap: clamp(24px, 4.8vw, 32px) 0;
	margin-top: clamp(36px, 8.4vw, 56px);
	}
	#search > *{
		grid-column: 2;
		}
	#search h2{
		color: var(--color-theme);
		font-size: clamp(16px, 3vw, 20px);
		font-weight: 500;
		text-align: center;
		letter-spacing: 0.1em;
		}

#searchMenu{
	display: grid;
	}
	@media (max-width: 991.98px) {
		#searchMenu{
			grid-gap: 16px;
			}
		#searchMenu #searchType{
			display: contents;
			}
			#searchMenu #searchType li:nth-child(1){
				order: 1;
				}
			#searchMenu #searchType li:nth-child(2){
				order: 2;
				}
			#searchMenu #searchType li:nth-child(3){
				order: 3;
				}
			#searchMenu #searchType li:nth-child(4){
				order: 4;
				}
			#searchMenu #searchType li:nth-child(5){
				order: 5;
				}
		#searchMenu #searchSelect{
			display: contents;
			}
			#searchMenu #searchSelect section{
				margin-bottom: 16px;
				}
			#searchMenu #searchSelect section:nth-child(1){
				order: 1;
				}
			#searchMenu #searchSelect section:nth-child(2){
				order: 2;
				}
			#searchMenu #searchSelect section:nth-child(3){
				order: 3;
				}
			#searchMenu #searchSelect section:nth-child(4){
				order: 4;
				}
			#searchMenu #searchSelect section:nth-child(5){
				order: 5;
				}
		}

#searchType{
	color: var(--color-theme);
	}
	#searchType ul{
		display: contents;
		}
	#searchType li{
		display: grid;
		grid-gap: 8px;
		min-height: 48px;
		font-size: 14px;
		}
		#searchType li:not(:last-child){
			grid-template-columns: auto 16px;
			align-items: center;
			padding: 4px clamp(14px, 2.4vw, 16px);
			border: 1px solid currentColor;
			border-radius: 4px;
			text-align: center;
			text-wrap: balance;
			cursor: pointer;
			}
			#searchType li:not(:last-child):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 14.71 8.06"><polygon points="14 0 7.35 6.65 0.71 0 0 0.71 7.35 8.06 14.71 0.71 14 0"/></svg>') center no-repeat;
				-webkit-mask-size: 14.71px 8.06px;
				background: currentColor;
				}
			#searchType li:not(:last-child).select{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
				}
				#searchType li:not(:last-child).select:after{
					transform: scale(1,-1);
					}
		#searchType li:last-child{
			grid-template-columns: auto 48px;
			}
	#searchType input{
		grid-column: 1;
		padding: 4px 16px;
		border: 1px solid #666;
		border-radius: 4px;
		}
		#searchType input:placeholder-shown{
			color: #aeaeae;
			}
	#searchType button{
		grid-column: 2;
		position: relative;
		width: 48px;
		background: var(--color-theme);
		border-radius: 4px;
		font-size: 0;
		overflow: hidden;
		}
		#searchType 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 18 18"><path d="M17.71,16.29l-3.83-3.82a7.78,7.78,0,1,0-1.41,1.41l3.82,3.83a1,1,0,0,0,1.42,0A1,1,0,0,0,17.71,16.29Zm-10-2.79A5.75,5.75,0,1,1,13.5,7.75,5.76,5.76,0,0,1,7.75,13.5Z"/></svg>') center no-repeat;
			-webkit-mask-size: 18px 18px;
			background: currentColor;
			}
	@media (min-width: 992px) {
		#searchType{
			display: grid;
			grid-gap: 16px;
			}
			#searchType:has(li:nth-child(2):last-child){
				grid-template-columns: 1fr 1fr;
				}
		#searchType > *,
		#searchType li{
			grid-row: 1;
			}
		#searchType input{
			font-size: inherit;
			}
		}

#searchSelect{}
	#searchSelect section{
		position: relative;
		display: none;
		padding: clamp(16px, 3.6vw, 24px);
		background: #fff;
		border: 1px solid #c7c7c7;
		border-radius: 4px;
		transform-origin: center top;
		}
	#searchSelect h3{
		display: none;
		}
	#searchSelect ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-gap: 24px;
		}
	#searchSelect li{}
		#searchSelect li ul{
			grid-template-columns: 1fr;
			grid-gap: 16px;
			margin: 14px 0 16px 24px;
			font-size: 14px;
			}
	#searchSelect .buttonSet{
		display: grid;
		grid-gap: 16px;
		margin-top: clamp(24px, 5.4vw, 36px);
		}
		#searchSelect .buttonSet button{
			justify-self: center;
			padding: clamp(14px, 2.4vw, 16px);
			font-size: 14px;
			}
	#searchSelect .doSearch{
		display: grid;
		grid-template-columns: auto 16px;
		align-items: center;
		width: min(100%, 300px);
		background: var(--color-theme);
		border-radius: 4px;
		color: #fff;
		text-align: center;
		text-wrap: balance;
		}
		#searchSelect .doSearch:after{
			content: "";
			width: 18px;
			height: 18px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M17.71,16.29l-3.83-3.82a7.78,7.78,0,1,0-1.41,1.41l3.82,3.83a1,1,0,0,0,1.42,0A1,1,0,0,0,17.71,16.29Zm-10-2.79A5.75,5.75,0,1,1,13.5,7.75,5.76,5.76,0,0,1,7.75,13.5Z"/></svg>') center no-repeat;
			-webkit-mask-size: 18px 18px;
			background: currentColor;
			}
	#searchSelect .doClear{
		width: min(60%, 250px);
		background: none;
		border: 1px solid currentColor;
		border-radius: 4px;
		color: var(--color-theme);
		}
	@media (max-width: 991.98px) {
		#searchSelect .close{
			display: none;
			}
		}
	@media (min-width: 992px) {
		#searchSelect{
			position: relative;
			}
		#searchSelect section{
			position: absolute;
			top: 24px;
			left: 0;
			width: 100%;
			padding-right: clamp(32px, 7.2vw, 48px);
			z-index: 1;
			}
		#searchSelect .select{
			z-index: 2;
			}
		#searchSelect .close{
			position: absolute;
			top: 0;
			right: 0;
			width: 48px;
			height: 48px;
			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 12 12"><polygon points="11.66 1.05 10.95 0.34 6 5.29 1.05 0.34 0.34 1.05 5.29 6 0.34 10.95 1.05 11.66 6 6.71 10.95 11.66 11.66 10.95 6.71 6 11.66 1.05"/></svg>') center no-repeat;
			-webkit-mask-size: 16px 16px;
			background: var(--color-theme);
			font-size: 0;
			cursor: pointer;
			}
		}

#searchDate{}
	#searchDate p{
		margin-bottom: clamp(16px, 3.6vw, 24px);
		font-size: 14px;
		text-align: center;
		}
	#searchDate table{
		display: grid;
		align-items: center;
		background: var(--color-theme);
		}
		#searchDate table:lang(ja){
			white-space: nowrap;
			}
	#searchDate caption{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		grid-gap: 8px;
		padding: 10px;
		color: #fff;
		font-size: 12px;
		}
		#searchDate caption span{
			justify-self: center;
			padding: 4px 16px;
			background: rgba(255, 255, 255, 0.25);
			border-radius: 4px;
			font-size: 16px;
			font-weight: 700;
			cursor: pointer;
			}
		#searchDate caption menu{
			justify-self: end;
			margin: 0;
			padding: 4px 6px;
			border: 1px solid currentColor;
			border-radius: 4px;
			color: #fff;
			font-weight: 700;
			font-size: 14px;
			cursor: pointer;
			}
	#searchDate thead,
	#searchDate tbody{
		display: contents;
		}
	#searchDate tr{
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		}
	#searchDate td{
		background: #fff;
		border: 1px solid #a6a6a6;
		text-align: center;
		cursor: pointer;
		}
		#searchDate td:last-child:not(.check){
			color: var(--color-theme);
			}
		#searchDate td:first-child:not(.check),
		#searchDate td.holiday{
			color: var(--point-color);
			}
		#searchDate td.check{
			background: var(--color-theme);
			color: #fff;
			}
	#searchDate thead{}
		#searchDate thead td{
			padding: 4px;
			}
	#searchDate tbody{}
		#searchDate tbody td{
			padding: 8px 4px;
			}
		#searchDate tbody td:empty{
			background: #f8f8f8;
			pointer-events: none;
			}
		#searchDate tbody td:not(:empty){
			font-weight: 700;
			cursor: pointer;
			}
	#searchDate .slick-slider{
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) 48px;
		align-items: center;
		grid-gap: 0 16px;
		margin: 0 -8px;
		}
	#searchDate .slick-track{
		display: flex;
		align-items: start;
		}
	#searchDate .slick-slide{
		margin: 0 12px;
		}
	#searchDate .slick-arrow{
		background: #fff;
		color: var(--color-theme);
		z-index: 1;
		}
		#searchDate .slick-arrow.slick-disabled{
			color: var(--color);
			opacity: 0.2;
			}
	#searchDate .slick-next{
		justify-self: end;
		}
	@media (max-width: 575.98px) {
		#searchDate .slick-list{
			margin: 0 -40px;
			}
		#searchDate .slick-prev{
			transform: scale(0.7) translateX(-12px);
			}
		#searchDate .slick-next{
			transform: scale(0.7) translateX(12px);
			}
		}

#searchCurrent{
	padding: 16px;
	background: #96cee5;
	border-radius: 4px;
	color: #fff;
	}
	#searchCurrent dl{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 16px;
		font-size: 14px;
		}
	#searchCurrent dd{
		display: contents;
		}
	#searchCurrent :where(a, button){
		display: grid;
		grid-template-columns: auto 8px;
		align-items: center;
		color: inherit;
		}
		#searchCurrent :where(a, button):after{
			content: "";
			width: 8px;
			height: 8px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="10 0.83 9.17 0 5 4.17 0.83 0 0 0.83 4.17 5 0 9.17 0.83 10 5 5.83 9.17 10 10 9.17 5.83 5 10 0.83"></polygon></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			}
	#searchCurrent a{
		grid-gap: 16px;
		padding: 4px 8px;
		border: 1px solid currentColor;
		border-radius: 4px;
		text-decoration: none;
		}
	#searchCurrent button{
		grid-gap: 8px;
		padding: 0;
		background: transparent;
		color: inherit;
		}

#result{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-gap: clamp(24px, 4.8vw, 32px) 0;
	margin-top: clamp(32px, 8.4vw, 56px);
	}
	#result > *{
		grid-column: 2;
		}
	#result h2{
		display: none;
		}
	#search+#result{
		padding-top: 0;
		}

#resultSearch{
	grid-gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid currentColor;
	color: var(--color-theme);
	}
	@media (max-width: 575.98px) {
		#resultSearch{
			display: grid;
			justify-items: center;
			}
		}
	@media (min-width: 576px) {
		#resultSearch{
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			}
		}

#resultCount{
	display: flex;
	align-items: baseline;
	font-weight: 500;
	}
	#resultCount span{
		font-size: 2em;
		}

#resultSort{}
	#resultSort dt,
	#resultSort dd{
		font-size: clamp(12px, 2.1vw, 14px);
		}
	#resultSort .select{
		background: var(--color-theme);
		border-color: transparent;
		color: #fff;
		}
	@media (max-width: 991.98px) {
		#resultSort{
			position: relative;
			width: 150px;
			height: 28px;
			}
		#resultSort dl{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: 4px;
			white-space: nowrap;
			cursor: pointer;
			z-index: 10;
			}
			#resultSort dl :where(dt, dd dd){
				padding: 8px;
				}
		#resultSort .open{}
			#resultSort .open dt{
				}
		#resultSort dt{
			display: grid;
			grid-template-columns: auto 8px;
			align-items: center;
			grid-gap: 16px;
			}
		#resultSort dt:after{
			content: "";
			width: 8px;
			height: 8px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="20,0 0,0 10,20"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			}
		#resultSort dt+dd{
			display: none;
			}
		#resultSort dd+dd{
			border-top: 1px solid currentColor;
			}
		}
	@media (min-width: 992px) {
		#resultSort dl{
			display: flex;
			align-items: center;
			grid-gap: 8px;
			}
		#resultSort dt{
			margin-right: 8px;
			}
		#resultSort dt+dd{
			display: contents;
			}
		#resultSort dd{
			padding: 8px 16px;
			border: 1px solid currentColor;
			border-radius: 4px;
			cursor: pointer;
			}
		}

#resultList{}
	#resultList :where(.articleList, .spotList){
		display: grid;
		grid-gap: clamp(24px, 5.4vw, 36px);
		align-items: start;
		}
	@media (min-width: 576px) and (max-width: 767.98px) {
		#resultList :where(.articleList, .spotList){
			grid-template-columns: repeat(2, 1fr);
			}
		}
	@media (min-width: 768px) and (max-width: 1199.98px) {
		#resultList :where(.articleList, .spotList){
			grid-template-columns: repeat(3, 1fr);
			}
		}
	@media (min-width: 1200px) {
		#resultList :where(.articleList, .spotList){
			grid-template-columns: repeat(4, 1fr);
			}
		}

#pagenation{
	width: var(--wrap);
	margin: clamp(32px, 7.2vw, 48px) auto;
	}

.articleList{}
	.articleList dl{
		position: relative;
		display: grid;
		grid-template-areas: 'main';
		line-height: 1.65;
		}
		.articleList dl:before{
			content: "";
			grid-area: main;
			padding-top: 66.66%;
			background: var(--dummy);
			background-size: cover;
			border-radius: 8px;
			z-index: -1;
			}
	.articleList dt{
		margin: 0 16px;
		font-size: 14px;
		letter-spacing: 0.025em;
		}
	.articleList dd{
		display: contents;
		}
		.articleList dd ul{
			grid-row: 2;
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
			margin: 0 16px;
			transform: translateY(-16px);
			}
		.articleList dd li{
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 4px 16px;
			background: var(--color-theme);
			border-radius: 16px;
			color: #fff;
			font-size: 12px;
			}
			.articleList dd li:empty{
				visibility: hidden;
				min-height: 16px;
				}
		.articleList  dd figure{
			grid-area: main;
			position: relative;
			border-radius: 8px;
			overflow: hidden;
			z-index: -1;
			}
		.articleList dd img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			}
		.articleList dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}

.spotList{}
	.spotList dl{
		position: relative;
		display: grid;
		grid-template-areas: 'main';
		grid-gap: 4px;
		line-height: 1.65;
		}
		.spotList dl:before{
			content: "";
			grid-area: main;
			padding-top: 66.66%;
			background: var(--dummy);
			background-size: cover;
			border-radius: 8px;
			z-index: -1;
			}
	.spotList dt{
		grid-area: main;
		align-self: end;
		display: grid;
		align-items: end;
		min-height: 80px;
		padding: 16px;
		background: linear-gradient(rgba(0, 26 ,23 ,0), rgba(0 ,26 ,23 ,0.3));
		border-radius: 0 0 8px 8px;
		color: #fff;
		font-weight: 500;
		letter-spacing: 0.025em;
		}
	.spotList dt+dd{
		line-height: 1.65;
		}
	.spotList dd+dd{
		display: contents;
		}
	.spotList dd{
		font-size: 14px;
		}
		.spotList dd ul{
			grid-row: 2;
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			grid-gap: 4px;
			margin-top: 4px;
			color: var(--color-theme);
			}
		.spotList dd li{
			display: contents;
			}
		.spotList dd li+li{}
			.spotList dd li+li:before{
				content: "/";
				}
		.spotList dd time{
			grid-row: 3;
			font-weight: 500;
			}
		.spotList dd figure{
			grid-area: main;
			position: relative;
			border-radius: 8px;
			overflow: hidden;
			z-index: -1;
			}
		.spotList dd img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			}
		.spotList dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}