/* CSS Document */

#search{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: clamp(24px, calc(48 / 1200 * 100vw), 48px) 0 clamp(64px, calc(96 / 1200 * 100vw), 96px) 0;
	&>*{
		grid-column: 2;
	}
	& h2{
		&:not([data-caption]){
			display: grid;
			justify-items: center;
			font-size: clamp(24px, calc(32 / 768 * 100vw), 32px);
			font-family: var(--font-title);
			letter-spacing: 0.2em;
			text-align: center;
			&:before{
				content: "";
				aspect-ratio: 58 / 40;
				width: 58px;
				background: #897750;
				opacity: 0.25;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 40" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polygon points="7 11 17 21 21 17 17 13 7 23 17 33 21 29 17 25 7 35 11 39 15 35 5 25 1 29 5 33 15 23 5 13 1 17 5 21 15 11 11 7 7 11"/><polygon points="25 5 35 15 39 11 35 7 25 17 35 27 39 23 35 19 25 29 29 33 33 29 23 19 19 23 23 27 33 17 23 7 19 11 23 15 33 5 29 1 25 5"/><polygon points="43 11 53 21 57 17 53 13 43 23 53 33 57 29 53 25 43 35 47 39 51 35 41 25 37 29 41 33 51 23 41 13 37 17 41 21 51 11 47 7 43 11"/></svg>') no-repeat center / contain;
			}
		}
		&[data-caption]{
			display: grid;
			justify-items: center;
			font-size: clamp(24px, calc(32 / 768 * 100vw), 32px);
			font-family: var(--font-title);
			letter-spacing: 0.2em;
			text-align: center;
			word-break: keep-all;
			overflow-wrap: anywhere;
			&:before{
				content: attr(data-caption);
				color: var(--color-theme-point);
				font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
				font-family: var(--font-en);
				text-transform: capitalize;
			}
		}
	}
}

#filter{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	grid-gap: 8px;
	margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	&:not(:has(#filterMenu menu.open)){
		padding-bottom: 16px;
		border-bottom: 1px solid #d6d6d6;
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 16px;
		min-height: 32px;
		padding: 4px 16px 4px 8px;
		border-radius: 4px;
		color: inherit;
		font-family: var(--font-min);
		font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
		text-align: center;
		cursor: pointer;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			-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: white; stroke-linecap: round; stroke-linejoin: round;"><line x1="3" y1="4" x2="9" y2="4"/><line x1="11" y1="3" x2="11" y2="5"/><line x1="11.04" y1="4" x2="13" y2="4"/><line x1="3" y1="8" x2="5" y2="8"/><line x1="5" y1="7" x2="5" y2="9"/><line x1="7.04" y1="8" x2="13" y2="8"/><line x1="3" y1="12" x2="6" y2="12"/><line x1="8" y1="11" x2="8" y2="13"/><line x1="8.04" y1="12" x2="13" y2="12"/></svg>') no-repeat center / contain;
		}
		&.open{
			background: #f6f6f6;
		}
	}
	#filterCurrent{
		order: -1;
		width: 100%;
		margin-bottom: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	}
	@media (max-width: 767.98px) {
		justify-content: center;
		#filterCount{
			width: 100%;
		}
	}
	@media (min-width: 768px) {
		#filterCount{
			margin-right: auto;
		}
	}
}

#filterCount{
	font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
	font-family: var(--font-min);
	& span{
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
	}
}

#filterSort{
	position: relative;
	align-self: flex-end;
	& menu+div{
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		left: 50%;
		width: 100%;
		background: #fff;
		border-radius: 4px;
		transform: translateX(-50%);
		filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
		z-index: 1;
	}
	& ul{
		display: grid;
	}
	& li{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 4px 8px;
		border-radius: 4px;
		color: inherit;
		font-family: var(--font-min);
		font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
		text-align: center;
		cursor: pointer;
		&.select{
			background: #f6f6f6;
		}
	}
}

#filterMenu{
	display: contents;
	& menu{
		align-self: flex-end;
	}
	& menu+div{
		order: 1;
		display: grid;
		width: 100%;
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
		filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
		transform: translateZ(0);
		@media (min-width: 576px) {
			grid-template-columns: 1fr 1fr;
			column-gap: 1px;
			& dl{
				grid-column: 1 / 3;
			}
		}
	}
	& dl{
		display: grid;
		@media (min-width: 576px) {
			grid-template-columns: auto 1fr;
			& dt{
				padding-top: calc(clamp(16px, calc(24 / 1200 * 100vw), 24px) + 5px);
			}
			& dd{
				&:nth-of-type(n+2){
					border-top: 1px solid #d6d6d6;
				}
			}
		}
	}
	& dt{
		display: grid;
		grid-template-columns: 16px 1fr;
		min-width: 8em;
		padding-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		font-size: 14px;
		&:nth-of-type(n+2){
			border-top: 1px solid #d6d6d6;
		}
		&:before{
			content: "";
			width: 4px;
			height: 16px;
			background: currentColor;
			transform: translateY(calc(0.325em - 1px));
		}
	}
	& dd{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 16px;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	}
	& label{
		display: block;
		padding: 4px 8px;
		border: 1px solid currentColor;
		border-radius: 4px;
		font-family: var(--font-min);
		font-size: 14px;
		&:has(:checked){
			background: #897750;
			border-color: transparent;
			color: #fff;
		}
		& input{
			display: none;
		}
	}
	& dl+div{
		display: grid;
		column-gap: 1px;
		@media (min-width: 576px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	& button{
		all: unset;
		box-sizing: border-box;
		align-self: baseline;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 8px;
		min-height: clamp(48px, calc(64 / 768 * 100vw), 64px);
		padding: 4px 8px;
		background: #000;
		color: #fff;
		font-family: var(--font-min);
		text-align: center;
		cursor: pointer;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			margin-left: 8px;
			background: currentColor;
			-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: white; stroke-linecap: round; stroke-linejoin: round;"><line x1="14" y1="14" x2="9.75" y2="9.75"/><circle cx="6.5" cy="6.5" r="4.5"/></svg>') no-repeat center / contain;
		}
		&.doClear{
			background: #999;
			&:before{
				-webkit-mask-image: 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: white; stroke-linecap: round; stroke-linejoin: round;"><line x1="4.46" y1="11.54" x2="11.54" y2="4.46"/><line x1="11.54" y1="11.54" x2="4.46" y2="4.46"/></svg>');
			}
		}
	}
}

#filterCurrent{
	& dl{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
		padding: 16px;
		background: #f6f6f6;
		border-radius: 4px;
	}
	& dt{
		display: grid;
		align-items: center;
		min-height: 32px;
		margin-right: 16px;
		font-size: 14px;
	}
	& dd{
		display: contents;
	}
	& button{
		all: unset;
		box-sizing: border-box;
	}
	& a,
	& button{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		min-height: 32px;
		padding: 4px 16px;
		background: #897750;
		border-radius: 4px;
		color: #fff;
		font-family: var(--font-min);
		font-size: 12px;
		letter-spacing: 0.025em;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateX(8px);
			-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;"><line x1="4.46" y1="11.54" x2="11.54" y2="4.46"/><line x1="11.54" y1="11.54" x2="4.46" y2="4.46"/></svg>') no-repeat center / contain;
		}
	}
	& button{
		background: var(--color);
		color: #fff;
		cursor: pointer;
	}
}

#list{
	&.roomList{
		margin-bottom: 8px;
	}
	&.featureList{
		margin-bottom: clamp(32px, calc(56 / 1200 * 100vw), 56px);
	}
}

#topicsTab{
	justify-self: center;
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: clamp(24px, calc(24 / 768 * 100vw), 32px);
		padding: 0 8px;
		background: #f2f2f2;
		border-radius: 4px;
		color: inherit;
		font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
		font-family: var(--font-min);
		text-decoration: none;
		.select &{
			background: var(--color-theme-point);
			color: #fff;
		}
	}
}

#pagenation{
	.topicsList+&{
		margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
	}
}

.roomList{
	display: grid;
	margin-top: 8px;
	& section{
		position: relative;
		display: grid;
		grid-row-gap: 16px;
		padding: clamp(24px, calc(48 / 1200 * 100vw), 48px) 0;
		&:nth-child(n+2){
			border-top: 1px solid #d6d6d6;
		}
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
		}
		@media (min-width: 576px) {
			grid-template-columns: min(40vw, 342px) 1fr;
			grid-template-rows: auto 1fr;
			column-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
			&:before{
				grid-column: 1;
				grid-row: 1 / 4;
			}
			& h3+div+div{
				justify-content: start;
			}
			& figure{
				grid-column: 1;
				grid-row: 1 / 4;
			}
		}
	}
	& h3{
		font-size: clamp(16px, calc(20 / 768 * 100vw), 20px);
		font-family: var(--font-min);
	}
	& h3+div{
		display: grid;
		grid-gap: inherit;
		& p{
			color: #897750;
			font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
		}
		& dl{
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 4px 1em;
			font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
		}
		& dt{
			display: grid;
			grid-template-columns: 1fr auto;
			column-gap: inherit;
			&:after{
				content: "|";
			}
		}
		& dd{
			& p{
				all: unset;
			}
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 4px 16px;
			color: #999;
			font-size: 12px;
		}
	}
	& h3+div+div{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: clamp(8px, calc(16 / 1200 * 100vw), 16px);
		margin-top: 8px;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			min-width: min(100%, 160px);
			min-height: 40px;
			padding: 8px 16px;
			border: 1px solid currentColor;
			border-radius: 4px;
			color: inherit;
			font-family: var(--font-min);
			font-size: 14px;
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				transform: translateX(8px);
				-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: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="5.5 3 10.5 8 5.5 13"/></svg>') no-repeat center / contain;
			}
			&:nth-child(2){
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
			}
			&[href^="https://www.tablecheck.com/"]{
				background: var(--color-theme-sub);
				border-color: transparent;
				color: #fff;
			}
		}
	}
	& figure{
		order: -1;
		cursor: pointer;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
}

.featureList{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: clamp(48px, calc(56 / 1200 * 100vw), 56px) 24px;
	margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
	@media (min-width: 768px) {
		grid-template-columns: repeat(3, 1fr);
	}
	@media (min-width: 992px) {
		column-gap: clamp(48px, calc(56 / 1200 * 100vw), 56px)
	}
	& section{
		position: relative;
		display: grid;
		grid-template-rows: auto auto 1fr;
		align-content: start;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
		}
		&:has(h3+div a){
			& h3{
				display: grid;
				grid-template-columns: 14px 1fr;
				column-gap: 8px;
				&:before{
					content: "";
					margin-top: 0.825em;
					border-top: 1px solid currentColor;
					transition: transform 0.2s ease-out;
				}
				section:hover &:before{
					transform: translateX(4px);
				}
			}
		}
	}
	& h3{
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		font-family: var(--font-min);
	}
	& h3+div{
		display: grid;
		&:has(a){
			display: grid;
			grid-gap: inherit;
			margin-left: 22px;
		}
		&:not(:has(a)){
			grid-row-gap: inherit;
			align-content: start;
		}
		& p{
			color: #897750;
			&:empty{
				display: none;
			}
		}
		& dl{
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 4px 1em;
			font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
		}
		& dt{
			display: grid;
			grid-template-columns: 1fr auto;
			column-gap: inherit;
			&:after{
				content: "|";
			}
		}
		& dd{
			& p{
				all: unset;
			}
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 4px 16px;
			color: #999;
			font-size: 12px;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& h3+div+div{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: clamp(8px, calc(16 / 1200 * 100vw), 16px);
		margin-top: 8px;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			min-width: min(100%, 160px);
			min-height: 40px;
			padding: 8px;
			border: 1px solid currentColor;
			border-radius: 4px;
			color: inherit;
			font-family: var(--font-min);
			font-size: 14px;
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				-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: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="5.5 3 10.5 8 5.5 13"/></svg>') no-repeat center / contain;
			}
			&[href*="www4.489pro.com"]{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
			}
			&[href*="www.tablecheck.com"]{
				background: var(--color-theme-sub);
				border-color: transparent;
				color: #fff;
			}
			&[href*="shiroyama-shop.jp"]{
				background: #333;
				border-color: transparent;
				color: #fff;
			}
		}
	}
	& figure{
		order: -1;
		cursor: pointer;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
}

.topicsList{
	display: grid;
	align-content: start;
	& section{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px 16px;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px) 0;
		border-bottom: 1px solid var(--color-border);
		&:has(a){
			padding-right: 24px;
		}
	}
	& h3{
		order: 1;
		width: 100%;
		font-family: var(--font-min);
	}
	& h3+div{
		display: contents;
		& time,
		& ul{
			font-size: clamp(12px, calc(16 / 768 * 100vw), 16px);
		}
		& ul{
			display: contents;
			&:before{
				content: "";
				height: 1em;
				border-left: 1px solid currentColor;
				transform: translateY(0.325em);
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			width: 100%;
			height: 100%;
			color: inherit;
			font-size: 0;
			overflow: hidden;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				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 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="5.5 3 10.5 8 5.5 13"/></svg>') no-repeat center / contain;
			}
			&:hover:after{
				transform: translateX(4px);
			}
		}
	}
}