/* CSS Document */

#photo{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-top: 40px;
	&>*{
		grid-column: 2;
	}
	& h2{
		grid-column: 2;
		margin-bottom: 40px;
		font: 700 clamp(24px, calc(32 / 768 * 100vw), 32px) var(--font-title);
		letter-spacing: 0.1em;
		text-align: center;
	}
	& section{
		grid-column: 1 / 4;
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		padding-top: 56px;
		background: #fcf6bb;
		&>*{
			grid-column: 2;
		}
	}
	& h3{
		display: grid;
		grid-template-columns: 20px auto;
		justify-content: center;
		align-items: center;
		column-gap: 0.5em;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		&:before{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6,4.5c-1.1,0-2,.9-2,2s.9,2,2,2,2-.9,2-2-.9-2-2-2ZM17,0H3C1.34,0,0,1.34,0,3v14c0,1.66,1.34,3,3,3h14c1.66,0,3-1.34,3-3V3c0-1.66-1.34-3-3-3ZM18,17c0,.55-.45,1-1,1H4.41l7.59-7.59,6,6v.59ZM18,13.59l-5.29-5.29c-.39-.39-1.02-.39-1.41,0L2.13,17.46c-.07-.14-.13-.29-.13-.46V3c0-.55.45-1,1-1h14c.55,0,1,.45,1,1v10.59Z"/></svg>') no-repeat center / contain;
		}
	}
	& h3+div{
		margin-top: 24px;
	}
	#pickup{
		grid-column: 1 / 4;
	}
}

#photoTab{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	border-bottom: clamp(8px, calc(16 / 1200 * 100vw), 16px) solid var(--color-theme);
	&>*{
		grid-column: 2;
	}
	& ul{
		display: grid;
		column-gap: clamp(8px, calc(24 / 1200 * 100vw), 24px);
	}
	& li{
		grid-row: 1;
		display: grid;
	}
	& a{
		display: grid;
		grid-template-columns: clamp(6px, calc(10 / 1200 * 100vw), 10px) auto;
		align-items: center;
		justify-content: center;
		column-gap: 0.5em;
		min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
		padding: 8px;
		background: var(--color);
		border-radius: 10px 10px 0 0;
		color: #fff;
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
		text-align: center;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme-sub);
			border-radius: 100%;
		}
		.select &{
			background: var(--color-theme);
			pointer-events: none;
		}
	}
}

#cart{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: 40px 0 clamp(80px, calc(120 / 1200 * 100vw), 120px) 0;
	&>*{
		grid-column: 2;
	}
	& h2{
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		text-align: center;
	}
	& h2+div{
		margin-bottom: 40px;
		font-size: 14px;
		text-align: center;
	}
	&: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;
			}
		}
	}
}

#request{
	display: flex;
	justify-content: center;
	margin-top: 64px;
	& a{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 1em;
		width: min(100%, 400px);
		min-height: clamp(60px, calc(80 / 768 * 100vw), 80px);
		padding: 0.5em 1em;
		border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
		border: 1px solid currentColor;
		color: inherit;
		font-size: clamp(14px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			width: clamp(24px, calc(32 / 768 * 100vw), 32px);
		}
		&: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 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / 32px;
		}
		&:hover{
			background: var(--color);
			border-color:transparent;
			color: #fff;
			&:after{
				background: var(--color);
			}
		}
	}
}

#noPhoto{
	display: grid;
	place-content: center;
	aspect-ratio: 16 / 9;
}

#flow{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: 40px 0 80px 0;
	&>*{
		grid-column: 2;
	}
	& h2{
		display: grid;
		grid-template-columns: clamp(4px, calc(6 / 768 * 100vw), 6px) 1fr;
		column-gap: 16px;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before{
			content: "";
			height: 1em;
			background: var(--color-theme);
			border-radius: 3px;
			transform: translateY(0.325em);
		}
	}
	& h2+div{
		display: grid;
		grid-gap: 40px;
		margin-top: 24px;
		@media (min-width: 992px) {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	& section{
		position: relative;
		margin-top: 20px;
		padding: 32px 24px 24px 24px;
		border: 1px solid currentColor;
		border-radius: 10px;
		&:nth-child(n+2):before{
			content: "";
			position: absolute;
			aspect-ratio: 1;
			width: 16px;
			background: var(--color-theme-sub);
		}
		@media (max-width: 991.98px) {
			&:before{
				content: "";
				position: absolute;
				top: -40px;
				left: 50%;
				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 16 16"><polygon points="0 2 16 2 8 14 0 2"/></svg>') no-repeat center / contain;
			}
		}
		@media (min-width: 992px) {
			&:before{
				content: "";
				position: absolute;
				left: -20px;
				top: 50%;
				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 16 16"><polygon points="2 0 14 8 2 16 2 0"/></svg>') no-repeat center / contain;
			}
		}
	}
	& h3{
		position: absolute;
		top: 0;
		left: 50%;
		display: grid;
		align-items: center;
		min-height: 40px;
		padding: 4px 24px 8px 24px;
		background: var(--color);
		border-radius: 20px;
		color: #fff;
		font: 700 18px var(--font-title);
		letter-spacing: 0.1em;
		white-space: nowrap;
		transform: translate(-50%, -50%);
	}
}

#terms{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: 40px 0 clamp(80px, calc(120 / 1200 * 100vw), 120px) 0;
	&>*{
		grid-column: 2;
	}
	& h2{
		display: grid;
		grid-template-columns: clamp(4px, calc(6 / 768 * 100vw), 6px) 1fr;
		column-gap: 16px;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before{
			content: "";
			height: 1em;
			background: var(--color-theme);
			border-radius: 3px;
			transform: translateY(0.325em);
		}
	}
	& h2+div{
		display: grid;
		grid-row-gap: 16px;
		margin-top: 24px;
	}
	& h3+div{
		display: grid;
		grid-row-gap: 8px;
		margin: 8px 0 0 0.75em;
	}
	& ol{
		display: grid;
		grid-row-gap: 8px;
		list-style: none;
		& li{
			padding-left: 1em;
			text-indent: -1em;
		}
	}
}

#detail{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	padding: 24px 0 clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	&>*{
		grid-column: 2;
	}
	& h2{
		display: grid;
		grid-row-gap: 16px;
		font-weight: 700;
		font-size: 24px;
		&:after{
			content: "";
			height: 6px;
			border: 1px solid currentColor;
			border-width: 1px 0;
		}
	}
	@media (min-width: 992px) {
		grid-template-rows: auto auto 1fr;
		#detailText{
			margin-bottom: 8px;
		}
		#detailPhoto{
			grid-row: 3 / 5;
			width: min(50vw, 600px);
		}
		#detailStatus{
			grid-row: 3;
			margin-left: calc(min(50vw, 600px) + 64px);
		}
		#detailAction{
			grid-row: 4;
			margin-left: calc(min(50vw, 600px) + 64px);
		}
	}
}

#detailText{
	color: #666666;
}

#detailPhoto{
	& img{
		width: 100%;
		height: auto;
		border-radius: 40px;
	}
}

#detailStatus{
	dl{
		display: grid;
		grid-template-columns: auto 1fr;
		border-bottom: 1px solid #b3b3b3;
	}
	& dt{
		padding: 16px;
		font-weight: 700;
		&:nth-of-type(n+2){
			border-top: 1px solid #b3b3b3;
		}
	}
	& dd{
		padding: 16px;
		&:nth-of-type(n+2){
			border-top: 1px solid #b3b3b3;
		}
		& a{
			color: inherit;
		}
	}
}

#detailAction{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px 40px;
	& a{
		display: grid;
		grid-template-columns: 16px 1fr;
		align-items: center;
		grid-gap: 8px;
		min-width: min(100%, 170px);
		min-height: 40px;
		margin-top: 8px;
		padding: 4px 16px;
		background: var(--color-theme-sub);
		border-radius: 20px;
		color: #fff;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		z-index: 2;
		&:before{
			content: "";
			aspect-ratio: 1;
			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"><path d="M9.94,6.16h6.06v.07l-4.9,3.55,1.92,5.85-.05.02-4.97-3.6-4.97,3.6-.05-.02,1.92-5.85L0,6.23v-.07h6.06L7.97.35h.07l1.91,5.82Z"/></svg>') no-repeat center / contain;
		}
		&.deleteCart{
			background: transparent;
			border: 1px solid currentColor;
			color: #b3b3b3;
			&: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: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="3 7 7 12 14 4"/></svg>');
			}
		}
		&.limit{
			background: #ccc;
			opacity: 0.5;
			pointer-events: none;
		}
		&.cart{
			background: #fff;
			border: 1px solid currentColor;
			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 16 16"><path d="M15.3,1.22h-1.46c-.33,0-.61.22-.68.54l-1.82,7.73h-1.07l.86-6.01c.03-.2-.03-.4-.16-.56-.13-.15-.33-.24-.53-.24H.7c-.2,0-.4.09-.53.24C.04,3.07-.02,3.28,0,3.48l.97,6.81c.05.34.34.6.69.6h10.22c.33,0,.61-.22.68-.54l1.82-7.73h.91c.39,0,.7-.31.7-.7s-.31-.7-.7-.7ZM3.41,9.49h-1.13l-.29-2.01h1.41v2.01ZM3.41,6.08h-1.61l-.29-2.01h1.9v2.01ZM6.33,9.49h-1.52v-2.01h1.52v2.01ZM6.33,6.08h-1.52v-2.01h1.52v2.01ZM8.85,9.49h-1.13v-2.01h1.41l-.29,2.01ZM9.34,6.08h-1.61v-2.01h1.9l-.29,2.01ZM3.38,11.65c-.67,0-1.22.54-1.22,1.22s.54,1.22,1.22,1.22,1.22-.54,1.22-1.22-.54-1.22-1.22-1.22ZM9.7,11.65c-.67,0-1.22.54-1.22,1.22s.54,1.22,1.22,1.22,1.22-.54,1.22-1.22-.54-1.22-1.22-1.22Z"/></svg>');
			}
			&:hover{
				background: var(--color);
				border-color: transparent;
				color: #fff;
			}
		}
	}
}

.photoList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 10px), 216px), 1fr));
	grid-gap: clamp(40px, calc(56 / 1200 * 100vw), 56px) 20px;
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1;
			border-radius: 8px;
			background: var(--dummy);
		}
		& h3{
			font-weight: 700;
			@media (min-width: 576px) {
				margin: 0 20px;
			}
		}
		& h3+div{
			display: contents;
		}
		& a{
			&[title]{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
				z-index: 1;
			}
			&[data-id]{
				justify-self: center;
				display: grid;
				grid-template-columns: 16px 1fr;
				align-items: center;
				grid-gap: 8px;
				min-width: min(100%, 170px);
				min-height: 40px;
				margin-top: 8px;
				padding: 4px 16px;
				background: var(--color-theme-sub);
				border-radius: 20px;
				color: #fff;
				font-size: clamp(11px, calc(14 / 768 * 100vw), 14px);
				letter-spacing: 0.05em;
				text-align: center;
				text-decoration: none;
				cursor: pointer;
				z-index: 2;
				&:before{
					content: "";
					aspect-ratio: 1;
					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"><path d="M9.94,6.16h6.06v.07l-4.9,3.55,1.92,5.85-.05.02-4.97-3.6-4.97,3.6-.05-.02,1.92-5.85L0,6.23v-.07h6.06L7.97.35h.07l1.91,5.82Z"/></svg>') no-repeat center / contain;
				}
				&.deleteCart{
					background: transparent;
					border: 1px solid currentColor;
					color: #b3b3b3;
					&: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: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="3 7 7 12 14 4"/></svg>');
					}
				}
				&.limit{
					background: #ccc;
					opacity: 0.5;
					pointer-events: none;
				}
			}
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			& img{
				aspect-ratio: 1;
				object-fit: cover;
				border-radius: 10px;
			}
		}
	}
}