/* CSS Document */

#photo{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1366 400"><path fill="white" opacity="0.1" d="M1366,23.59c-49.72-11.77-99.48-14.67-129.8-13.61-72.45,2.53-178.28,33.01-293.37,99-115.09,66-225.53,101.23-331.84,117.95-106.31,16.72-223.2,3.97-276.26-12.54s-163.7-59.58-216.27-89.37C118.46,125.02,65.87,92.63,0,85.07v262.08c42.97,5.38,91.05,1.56,142.21-15.86,145.25-49.45,176.76-76.57,288.31-79.7,111.56-3.13,200.19,20.55,289.72,42.68,89.53,22.12,389.57,114.18,563.27,86.69,29.99-4.75,57.55-11.84,82.48-20.89V23.59Z"/></svg>') no-repeat center -24px / max(640px, 100%) clamp(240px, calc(400 / 1200 * 100dvw), 400px);
	}
	& h2{
		grid-row: 1;
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		margin: clamp(48px, calc(64 / 1200 * 100dvw), 64px) 0;
		column-gap: 0.5em;
		color: #fff;
		font-weight: 700;
		font-size: clamp(24px, calc(35 / 768 * 100dvw), 35px);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 1em;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M220.66,268.85c21.7,0,39.29-17.59,39.29-39.3s-17.59-39.29-39.29-39.29-39.3,17.59-39.3,39.29,17.59,39.3,39.3,39.3ZM442.58,73.76v-34.71H0v364.48h34.72V73.76h407.87ZM69.42,108.47v364.48h442.58V108.47H69.42ZM477.29,438.23H104.13V143.18h373.16v295.06ZM351.33,248.98c-3.59-5.44-9.67-8.71-16.18-8.7-6.52,0-12.59,3.29-16.17,8.73l-62.43,95.01-34.46-39.05c-3.99-4.53-9.88-6.93-15.9-6.5-6.03.42-11.5,3.64-14.82,8.69l-57.83,88.11h314.36l-96.56-146.29Z"/></svg>') no-repeat center / contain;
		}
	}
	& h2+div:not([id]){
		display: flex;
		justify-content: center;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			min-width: min(100%, 320px);
			min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
			padding: 4px 16px;
			border: 1px solid currentColor;
			border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
			color: var(--color-theme);
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: 16px;
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				background: #fff;
				-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-width: 1.5px;"><polyline points="6.25 11.5 9.75 8 6.25 4.5"/></svg>') no-repeat center / contain;
			}
		}
	}
	#tab{
		margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
}

#tab{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	& ul{
		display: grid;
		column-gap: clamp(8px, calc(16 / 1200 * 100dvw), 16px);
		& a{
			grid-row: 1;
		}
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			&:has(li:nth-child(3)){
				grid-template-columns: repeat(3, 1fr);
			}
			&:has(li:nth-child(4)){
				grid-template-columns: repeat(4, auto);
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: repeat(3, 1fr);
			&:has(li:nth-child(4)){
				grid-template-columns: repeat(4, 1fr);
			}
		}
	}
	& li{
		display: contents;
	}
	& a{
		position: relative;
		display: grid;
		align-items: center;
		column-gap: 8px;
		min-height: 48px;
		padding: 8px 0.5em 4px 0.5em;
		background: #e8e8e8;
		border-radius: 2px 2px 0 0;
		color: inherit;
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 6px;
			background: #d3e3f2;
			border-radius: 2px;
		}
		.select &{
			background: #d3e3f2;
		}
	}
}

#terms{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding-bottom: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	background: #d3e3f2;
	& h2{
		display: none;
	}
	& section{
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	}
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		color: inherit;
		font-weight: 700;
		font-size: clamp(18px, calc(22 / 768 * 100dvw), 22px);
		&:before{
			content: "";
			width: 3px;
			height: 1em;
			background: var(--color-theme);
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& h4{
		margin-top: 8px;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& p{
		margin-top: 1em;
	}
	& ol{
		margin-top: 1em;
		& li{
			padding-left: 2.5em;
			text-indent: -2.5em;
		}
	}
	& footer{
		display: flex;
		justify-content: end;
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	}
}

#cart{
	margin-bottom: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	& hgroup{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: clamp(24px, calc(48 / 1200 * 100dvw), 48px) 0;
		background: #d3e3f2;
		& h2{
			font-weight: 700;
			font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
			text-align: center;
		}
		& p{
			font-weight: 500;
			text-align: center;
		}
	}
	#list{
		width: var(--wrap);
		margin: clamp(32px, calc(64 / 1200 * 100dvw), 64px) auto 0 auto;
	}
	&:has(section){
		#noPhoto{
			display: none;
		}
	}
	&:not(:has(section)){
		#request{
			display: none;
		}
	}
	&:has(section:nth-child(21)){
		#request{
			& a{
				background: #ccc;
				border-color: transparent;
				opacity: 0.5;
				pointer-events: none;
			}
		}
	}
}

#list{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 264px), 1fr));
	grid-gap: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1 / 0.75;
			background: var(--dummy);
			border-radius: 10px;
		}
		& ul{
			grid-row: 2;
			margin-top: 8px;
		}
	}
	& h3{
		font-weight: 500;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		letter-spacing: 0.05em;
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			&[data-id]{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
				justify-self: center;
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: center;
				column-gap: 8px;
				min-height: 48px;
				margin-top: 8px;
				padding: 4px 1em;
				background: var(--color-theme);
				border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
				color: #fff;
				font-weight: 500;
				font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
				letter-spacing: 0.05em;
				text-align: center;
				text-decoration: none;
				z-index: 1;
				&: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 24 24"><path d="m17.5 11c2.484 0 4.5 2.016 4.5 4.5s-2.016 4.5-4.5 4.5-4.5-2.016-4.5-4.5 2.016-4.5 4.5-4.5zm.5 4v-1.5c0-.265-.235-.5-.5-.5s-.5.235-.5.5v1.5h-1.5c-.265 0-.5.235-.5.5s.235.5.5.5h1.5v1.5c0 .265.235.5.5.5s.5-.235.5-.5c0-.592 0-1.5 0-1.5h1.5c.265 0 .5-.235.5-.5s-.235-.5-.5-.5c-.592 0-1.5 0-1.5 0zm-6.479 1c.043.522.153 1.025.321 1.5h-9.092c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm1.106-4c-.328.456-.594.96-.785 1.5h-9.092c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm7.373-3.25c0-.414-.336-.75-.75-.75h-16.5c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75zm0-4c0-.414-.336-.75-.75-.75h-16.5c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75z"/></svg>') no-repeat center / contain;
				}
				&.deleteCart{
					background: #ddd;
					color: inherit;
					&:before{
						-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.5 11c2.484 0 4.5 2.016 4.5 4.5s-2.016 4.5-4.5 4.5-4.5-2.016-4.5-4.5 2.016-4.5 4.5-4.5zm-5.979 5c.043.522.153 1.025.321 1.5h-9.092c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm3.704-.024 1.442 1.285c.095.085.215.127.333.127.136 0 .271-.055.37-.162l2.441-2.669c.088-.096.131-.217.131-.336 0-.274-.221-.499-.5-.499-.136 0-.271.055-.37.162l-2.108 2.304-1.073-.956c-.096-.085-.214-.127-.333-.127-.277 0-.5.224-.5.499 0 .137.056.273.167.372zm-2.598-3.976c-.328.456-.594.96-.785 1.5h-9.092c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm7.373-3.25c0-.414-.336-.75-.75-.75h-16.5c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75zm0-4c0-.414-.336-.75-.75-.75h-16.5c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75z"/></svg>');
					}
					&:hover:before{
						-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.495 11c2.484 0 4.5 2.016 4.5 4.5s-2.016 4.5-4.5 4.5c-2.483 0-4.5-2.016-4.5-4.5s2.017-4.5 4.5-4.5zm-5.979 5c.043.522.153 1.025.321 1.5h-9.092c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm6.686-.5s.642-.642 1.061-1.061c.188-.187.188-.519 0-.707-.188-.187-.52-.187-.707 0-.419.419-1.061 1.061-1.061 1.061s-.641-.642-1.06-1.061c-.188-.187-.52-.187-.707 0-.188.188-.188.52 0 .707.418.419 1.06 1.061 1.06 1.061s-.642.642-1.06 1.061c-.188.187-.188.519 0 .707.187.187.519.187.707 0 .419-.419 1.06-1.061 1.06-1.061s.642.642 1.061 1.061c.187.187.519.187.707 0 .188-.188.188-.52 0-.707-.419-.419-1.061-1.061-1.061-1.061zm-5.579-3.5c-.329.456-.595.96-.786 1.5h-9.092c-.414 0-.75-.336-.75-.75s.336-.75.75-.75zm7.372-3.25c0-.414-.336-.75-.75-.75h-16.5c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75zm0-4c0-.414-.336-.75-.75-.75h-16.5c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75z"/></svg>');
					}
				}
			}
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 1 / 0.75;
			object-fit: cover;
			border-radius: 10px;
		}
	}
}

#request{
	display: flex;
	justify-content: center;
	margin-top: 64px;
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		min-width: min(100%, 320px);
		min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
		padding: 4px 16px;
		background: var(--color-theme);
		border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			width: 16px;
		}
		&:before{
			background: currentColor;
			border-radius: 100%;
		}
		&:after{
			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 16 16" style="fill: none; stroke: black; stroke-width: 1.5px;"><polyline points="6.25 11.5 9.75 8 6.25 4.5"/></svg>') no-repeat center / contain;
		}
	}
}

#noPhoto{
	padding: 10% 0;
	font-weight: 500;
	text-align: center;
}